Skip to content

Commit 057ec44

Browse files
suvanbanerjeesuvanbanerjee
committed
new ui kinda
1 parent 5be4cd3 commit 057ec44

2 files changed

Lines changed: 78 additions & 75 deletions

File tree

‎app/page.tsx‎

Lines changed: 72 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,40 @@ import Image from "next/image";
44
import { HealthArticle } from "@/components/health-article";
55
import { cn } from "@/lib/utils";
66
import { DotPattern } from "@/components/ui/dot-pattern";
7-
import { Heart, ShieldCheck, DollarSign, Briefcase, Plane, Smartphone, Car, Baby, HardHat, Backpack, Lock, Wifi, Server, Zap, Clock, Globe, QrCode } from 'lucide-react';
7+
import { Heart, ShieldCheck, DollarSign, Server, Wifi, QrCode } from 'lucide-react';
88

99
export default function Home() {
1010
return (
11-
<div className="min-h-screen bg-background text-foreground">
11+
<div className="min-h-screen bg-gradient-to-b from-background to-gray-100 dark:from-background dark:to-gray-900 text-foreground">
1212
<DotPattern
1313
className={cn(
14-
"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
14+
"absolute inset-0 opacity-50 [mask-image:radial-gradient(1000px_circle_at_center,white,transparent)]",
1515
)}
1616
/>
1717
{/* Hero Section */}
18-
<section className="relative py-16 px-4 sm:px-6 lg:px-8 min-h-screen">
18+
<section className="relative py-20 px-4 sm:px-6 lg:px-8 min-h-screen flex items-center">
1919
<div className="max-w-7xl mx-auto">
2020
<div className="text-center flex flex-col items-center">
21-
<div className="relative w-32 h-32 sm:w-48 sm:h-48" data-aos="zoom-y-out" data-aos-delay="100">
21+
<div className="relative w-40 h-40 sm:w-56 sm:h-56 mb-8" data-aos="zoom-in" data-aos-duration="1000">
2222
<Image
2323
src="/opentag.png"
2424
alt="OpenTag Serverless Logo"
25-
className="rounded-full"
25+
className="rounded-full shadow-2xl"
2626
fill
2727
sizes="100vw"
28-
data-aos="zoom-y-out" data-aos-delay="150"
2928
style={{
3029
objectFit: "cover"
3130
}}
3231
/>
3332
</div>
34-
<h1 className="text-5xl sm:text-6xl font-bold tracking-tight text-red-600 dark:text-red-500 pt-10">
33+
<h1 className="text-5xl sm:text-7xl font-extrabold tracking-tight text-red-600 dark:text-red-500 mb-4" data-aos="fade-up" data-aos-delay="200">
3534
OpenTag Serverless
3635
</h1>
37-
<p className="max-w-2xl mx-auto text-xl sm:text-2xl text-muted-foreground mt-4 font-semibold">
38-
Medical information indise a QR code <span className="italic">Literally</span>
36+
<p className="max-w-2xl mx-auto text-xl sm:text-2xl text-muted-foreground mt-4 font-medium" data-aos="fade-up" data-aos-delay="400">
37+
Medical information inside a QR code <span className="italic font-semibold">Literally</span>
3938
</p>
40-
<div className="mt-8 flex flex-col sm:flex-row gap-4">
41-
<Button asChild size="lg" variant="default">
39+
<div className="mt-10" data-aos="fade-up" data-aos-delay="600">
40+
<Button asChild size="lg" variant="default" className="text-lg px-8 py-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
4241
<Link href="/generate">Try it Yourself</Link>
4342
</Button>
4443
</div>
@@ -47,41 +46,45 @@ export default function Home() {
4746
</section>
4847

4948
{/* Bold Claims Section */}
50-
<section className="bg-red-600 dark:bg-red-800 text-white py-16 px-4 sm:px-6 lg:px-8">
51-
<div className="max-w-7xl mx-auto text-center">
52-
<h2 className="text-3xl sm:text-4xl font-bold mb-8">Why OpenTag Serverless?</h2>
53-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
54-
<div className="flex flex-col items-center">
55-
<Heart className="h-16 w-16 mb-4" />
56-
<h3 className="text-2xl font-bold mb-2">Same goodness of OpenTag</h3>
57-
<p>Instant access to critical medical information in emergencies, but now with the added benefit of no server dependency (But the amount of data is limited)</p>
58-
</div>
59-
<div className="flex flex-col items-center">
60-
<Lock className="h-16 w-16 mb-4" />
61-
<h3 className="text-2xl font-bold mb-2">Fully Anonymous</h3>
62-
<p>Serverless version encodes data directly into the QR code hence no need for any login or ID or any server thus forget about privacy concerns</p>
63-
</div>
64-
<div className="flex flex-col items-center">
65-
<QrCode className="h-16 w-16 mb-4" />
66-
<h3 className="text-2xl font-bold mb-2">Compact QR Code</h3>
67-
<p>No big and chunky QR codes, small in size but big in impact can store data you never thought possible in such form factor</p>
49+
<section className="bg-red-600 dark:bg-red-800 text-white py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
50+
<div className="absolute inset-0 opacity-10">
51+
<DotPattern />
6852
</div>
53+
<div className="max-w-7xl mx-auto text-center relative z-10">
54+
<h2 className="text-4xl sm:text-5xl font-bold mb-16" data-aos="fade-up">Why OpenTag Serverless?</h2>
55+
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
56+
<div className="flex flex-col items-center" data-aos="fade-up" data-aos-delay="200">
57+
<Heart className="h-20 w-20 mb-6 text-red-200" />
58+
<h3 className="text-2xl font-bold mb-4">Same Goodness of OpenTag</h3>
59+
<p className="text-lg">Instant access to critical medical information in emergencies, but now with no server dependency.</p>
60+
</div>
61+
<div className="flex flex-col items-center" data-aos="fade-up" data-aos-delay="400">
62+
<ShieldCheck className="h-20 w-20 mb-6 text-red-200" />
63+
<h3 className="text-2xl font-bold mb-4">Fully Anonymous</h3>
64+
<p className="text-lg">Data encoded directly into the QR code. No login, no ID, no server. Privacy concerns? Forgotten.</p>
65+
</div>
66+
<div className="flex flex-col items-center" data-aos="fade-up" data-aos-delay="600">
67+
<QrCode className="h-20 w-20 mb-6 text-red-200" />
68+
<h3 className="text-2xl font-bold mb-4">Compact QR Code</h3>
69+
<p className="text-lg">Small in size, big in impact. Store data you never thought possible in such a compact form.</p>
70+
</div>
6971
</div>
7072
</div>
7173
</section>
7274

7375
{/* Article */}
74-
<section className="py-12 sm:py-16 px-4 sm:px-6 lg:px-8 flex justify-center">
76+
<section className="py-24 sm:py-32 px-4 sm:px-6 lg:px-8 flex justify-center bg-white dark:bg-gray-900">
7577
<HealthArticle />
7678
</section>
7779

78-
79-
<section className="py-16 px-4 sm:px-6 lg:px-8">
80+
{/* Sample QR Code Section */}
81+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-800">
8082
<div className="max-w-7xl mx-auto items-center">
81-
<div className="max-w-3xl mx-auto text-center">
82-
<h2 className="text-3xl sm:text-4xl font-bold mb-4">Some of your data, in a QR code</h2>
83+
<div className="max-w-3xl mx-auto text-center mb-16">
84+
<h2 className="text-4xl sm:text-5xl font-bold mb-6" data-aos="fade-up">Your Data, In a QR Code</h2>
85+
<p className="text-xl text-muted-foreground" data-aos="fade-up" data-aos-delay="200">Compact, portable, and potentially life-saving.</p>
8386
</div>
84-
<div className="relative w-full h-64 sm:h-96 my-12">
87+
<div className="relative w-full h-96 sm:h-[500px] my-12" data-aos="zoom-in" data-aos-delay="400">
8588
<Image
8689
src="/sampletag.png"
8790
alt="OpenTag Serverless Example"
@@ -90,64 +93,67 @@ export default function Home() {
9093
sizes="100vw"
9194
/>
9295
</div>
93-
<div className="max-w-4xl mx-auto mt-8">
94-
<p className="text-lg sm:text-xl text-justify mb-4">
95-
OpenTag Serverless is clever. By encoding your critical medical information directly into a QR code, we've eliminated the need for servers and databases, putting you in control of your data like never before. In emergencies, every second counts. With OpenTag Serverless, your vital information is instantly accessible to medical professionals, potentially making the difference between life and death.
96+
<div className="max-w-4xl mx-auto mt-16">
97+
<p className="text-lg sm:text-xl text-center mb-6" data-aos="fade-up" data-aos-delay="600">
98+
OpenTag Serverless encodes your critical medical information directly into a QR code, eliminating the need for servers and databases. You're in control of your data like never before.
9699
</p>
97-
<p className="text-sm sm:text-base text-center mt-4 text-muted-foreground">
98-
Note: The amount of data that can be stored in the QR code is limited
100+
<p className="text-base sm:text-lg text-center mt-4 text-muted-foreground" data-aos="fade-up" data-aos-delay="800">
101+
Note: The amount of data that can be stored in the QR code is limited, but it's enough to save lives.
99102
</p>
100103
</div>
101104
</div>
102105
</section>
103106

104107
{/* Benefits Section */}
105-
<section id="benefits" className="py-16 px-4 sm:px-6 lg:px-8">
108+
<section id="benefits" className="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
106109
<div className="max-w-7xl mx-auto">
107-
<div className="text-center mb-12">
108-
<h2 className="text-3xl sm:text-4xl font-bold">Unparalleled Benefits</h2>
110+
<div className="text-center mb-16">
111+
<h2 className="text-4xl sm:text-5xl font-bold" data-aos="fade-up">Unparalleled Benefits</h2>
109112
</div>
110-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
111-
<div className="flex items-start bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
112-
<Server className="h-12 w-12 text-red-600 dark:text-red-500 mr-4 flex-shrink-0" />
113+
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
114+
<div className="flex items-start bg-gray-100 dark:bg-gray-800 p-8 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="200">
115+
<Server className="h-16 w-16 text-red-600 dark:text-red-500 mr-6 flex-shrink-0" />
113116
<div>
114-
<h3 className="text-xl font-bold mb-2">Zero Server Dependency</h3>
115-
<p className="text-muted-foreground">Your medical information lives in the QR code, not on vulnerable servers. Absolute data sovereignty.</p>
117+
<h3 className="text-2xl font-bold mb-4">Zero Server Dependency</h3>
118+
<p className="text-lg text-muted-foreground">Your medical information lives in the QR code, not on vulnerable servers. Absolute data sovereignty.</p>
116119
</div>
117120
</div>
118-
<div className="flex items-start bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
119-
<Wifi className="h-12 w-12 text-red-600 dark:text-red-500 mr-4 flex-shrink-0" />
121+
<div className="flex items-start bg-gray-100 dark:bg-gray-800 p-8 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="400">
122+
<Wifi className="h-16 w-16 text-red-600 dark:text-red-500 mr-6 flex-shrink-0" />
120123
<div>
121-
<h3 className="text-xl font-bold mb-2">No Login Required</h3>
122-
<p className="text-muted-foreground">Generate and access your tags without the need for any login or ID. Complete anonymity and ease of use.</p>
124+
<h3 className="text-2xl font-bold mb-4">No Login Required</h3>
125+
<p className="text-lg text-muted-foreground">Generate and access your tags without the need for any login or ID. Complete anonymity and ease of use.</p>
123126
</div>
124127
</div>
125-
<div className="flex items-start bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
126-
<DollarSign className="h-12 w-12 text-red-600 dark:text-red-500 mr-4 flex-shrink-0" />
128+
<div className="flex items-start bg-gray-100 dark:bg-gray-800 p-8 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="600">
129+
<DollarSign className="h-16 w-16 text-red-600 dark:text-red-500 mr-6 flex-shrink-0" />
127130
<div>
128-
<h3 className="text-xl font-bold mb-2">Unlimited Free Tags</h3>
129-
<p className="text-muted-foreground">Create as many tags as you need, all for free. No limits, no hidden costs.</p>
131+
<h3 className="text-2xl font-bold mb-4">Unlimited Free Tags</h3>
132+
<p className="text-lg text-muted-foreground">Create as many tags as you need, all for free. No limits, no hidden costs.</p>
130133
</div>
131134
</div>
132-
<div className="flex items-start bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
133-
<ShieldCheck className="h-12 w-12 text-red-600 dark:text-red-500 mr-4 flex-shrink-0" />
135+
<div className="flex items-start bg-gray-100 dark:bg-gray-800 p-8 rounded-2xl shadow-lg transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="800">
136+
<ShieldCheck className="h-16 w-16 text-red-600 dark:text-red-500 mr-6 flex-shrink-0" />
134137
<div>
135-
<h3 className="text-xl font-bold mb-2">You're in Control</h3>
136-
<p className="text-muted-foreground">Choose exactly what information to include. Update anytime. Your tag, your rules.</p>
138+
<h3 className="text-2xl font-bold mb-4">You're in Control</h3>
139+
<p className="text-lg text-muted-foreground">Choose exactly what information to include. Update anytime. Your tag, your rules.</p>
137140
</div>
138141
</div>
139142
</div>
140143
</div>
141144
</section>
142145

143146
{/* CTA Section */}
144-
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-red-600 dark:bg-red-800 text-white">
145-
<div className="max-w-3xl mx-auto text-center">
146-
<h2 className="text-3xl sm:text-4xl font-bold mb-4">Join the Medical Revolution Today!</h2>
147-
<p className="text-xl sm:text-2xl mb-8">
147+
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-red-600 dark:bg-red-800 text-white relative overflow-hidden">
148+
<div className="absolute inset-0 opacity-10">
149+
<DotPattern />
150+
</div>
151+
<div className="max-w-4xl mx-auto text-center relative z-10">
152+
<h2 className="text-4xl sm:text-5xl font-bold mb-8" data-aos="fade-up">Join the Medical Revolution Today!</h2>
153+
<p className="text-xl sm:text-2xl mb-12" data-aos="fade-up" data-aos-delay="200">
148154
Don't wait for an emergency to wish you had OpenTag Serverless. Create your life-saving QR code now.
149155
</p>
150-
<Button asChild size="lg" variant="secondary" className="text-red-600 hover:text-red-700">
156+
<Button asChild size="lg" variant="secondary" className="text-red-600 hover:text-red-700 text-lg px-8 py-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300" data-aos="fade-up" data-aos-delay="400">
151157
<Link href="/generate">Generate Your Free QR Code</Link>
152158
</Button>
153159
</div>

‎components/health-article.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
1-
import { Button } from "@/components/ui/button";
21
import BoxReveal from "@/components/ui/box-reveal";
32

43
export async function HealthArticle() {
54
return (
65
<div className="size-full items-center justify-center overflow-hidden pt-8 max-w-[80vw] mx-auto">
76
<BoxReveal boxColor={"#e51d15"} duration={1}>
87
<div>
9-
<p className="text-2xl font-semibold hidden sm:block">
10-
Every Year, Millions of Lives Are Lost Because Critical Medical Data Isn’t Accessible in Time. <span className="text-red-600 font-bold">OpenTag</span> Lets You Change That—With Just a QR Code.
11-
</p>
12-
<p className="text-xl font-semibold sm:hidden">
13-
Critical <span className="text-red-600 font-bold">Medical Data</span> Isn't Accessible in Time.
14-
</p>
8+
<p className="text-3xl sm:text-4xl font-semibold">
9+
Every Year, Millions of Lives Are Lost Because Critical Medical Data Isn't Accessible in Time. <span className="text-red-600 font-bold">OpenTag</span> Lets You Change That—With Just a QR Code.
10+
</p>
1511
</div>
1612
</BoxReveal>
1713

1814
<BoxReveal boxColor={"#e51d15"} duration={1}>
19-
<p className="mt-[1.5rem]">
20-
Every second counts in an emergency. When medical responders lack access to vital information like your blood type, allergies, or medical history, lives can hang in the balance. With openTag, a free and open-source solution, you can ensure your critical medical data is available instantly through a simple QR code. Accessible, customizable, and built to save lives—openTag empowers everyone to make a difference.
15+
<p className="mt-6 text-xl sm:text-2xl">
16+
Every second counts in an emergency. When medical responders lack access to vital information like your blood type, allergies, or medical history, lives can hang in the balance. With OpenTag, a free and open-source solution, you can ensure your critical medical data is available instantly through a simple QR code. Accessible, customizable, and built to save lives—OpenTag empowers everyone to make a difference.
2117
</p>
2218
</BoxReveal>
19+
2320
</div>
2421
);
2522
}

0 commit comments

Comments
 (0)