Skip to content

Commit

Permalink
new ui kinda
Browse files Browse the repository at this point in the history
  • Loading branch information
@suvanbanerjee
suvanbanerjee committed Jan 16, 2025
1 parent 5be4cd3 commit 057ec44
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 75 deletions.
138 changes: 72 additions & 66 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,40 @@ import Image from "next/image";
import { HealthArticle } from "@/components/health-article";
import { cn } from "@/lib/utils";
import { DotPattern } from "@/components/ui/dot-pattern";
import { Heart, ShieldCheck, DollarSign, Briefcase, Plane, Smartphone, Car, Baby, HardHat, Backpack, Lock, Wifi, Server, Zap, Clock, Globe, QrCode } from 'lucide-react';
import { Heart, ShieldCheck, DollarSign, Server, Wifi, QrCode } from 'lucide-react';

export default function Home() {
return (
<div className="min-h-screen bg-background text-foreground">
<div className="min-h-screen bg-gradient-to-b from-background to-gray-100 dark:from-background dark:to-gray-900 text-foreground">
<DotPattern
className={cn(
"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
"absolute inset-0 opacity-50 [mask-image:radial-gradient(1000px_circle_at_center,white,transparent)]",
)}
/>
{/* Hero Section */}
<section className="relative py-16 px-4 sm:px-6 lg:px-8 min-h-screen">
<section className="relative py-20 px-4 sm:px-6 lg:px-8 min-h-screen flex items-center">
<div className="max-w-7xl mx-auto">
<div className="text-center flex flex-col items-center">
<div className="relative w-32 h-32 sm:w-48 sm:h-48" data-aos="zoom-y-out" data-aos-delay="100">
<div className="relative w-40 h-40 sm:w-56 sm:h-56 mb-8" data-aos="zoom-in" data-aos-duration="1000">
<Image
src="/opentag.png"
alt="OpenTag Serverless Logo"
className="rounded-full"
className="rounded-full shadow-2xl"
fill
sizes="100vw"
data-aos="zoom-y-out" data-aos-delay="150"
style={{
objectFit: "cover"
}}
/>
</div>
<h1 className="text-5xl sm:text-6xl font-bold tracking-tight text-red-600 dark:text-red-500 pt-10">
<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">
OpenTag Serverless
</h1>
<p className="max-w-2xl mx-auto text-xl sm:text-2xl text-muted-foreground mt-4 font-semibold">
Medical information indise a QR code <span className="italic">Literally</span>
<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">
Medical information inside a QR code <span className="italic font-semibold">Literally</span>
</p>
<div className="mt-8 flex flex-col sm:flex-row gap-4">
<Button asChild size="lg" variant="default">
<div className="mt-10" data-aos="fade-up" data-aos-delay="600">
<Button asChild size="lg" variant="default" className="text-lg px-8 py-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300">
<Link href="/generate">Try it Yourself</Link>
</Button>
</div>
Expand All @@ -47,41 +46,45 @@ export default function Home() {
</section>

{/* Bold Claims Section */}
<section className="bg-red-600 dark:bg-red-800 text-white py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto text-center">
<h2 className="text-3xl sm:text-4xl font-bold mb-8">Why OpenTag Serverless?</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="flex flex-col items-center">
<Heart className="h-16 w-16 mb-4" />
<h3 className="text-2xl font-bold mb-2">Same goodness of OpenTag</h3>
<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>
</div>
<div className="flex flex-col items-center">
<Lock className="h-16 w-16 mb-4" />
<h3 className="text-2xl font-bold mb-2">Fully Anonymous</h3>
<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>
</div>
<div className="flex flex-col items-center">
<QrCode className="h-16 w-16 mb-4" />
<h3 className="text-2xl font-bold mb-2">Compact QR Code</h3>
<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>
<section className="bg-red-600 dark:bg-red-800 text-white py-24 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
<div className="absolute inset-0 opacity-10">
<DotPattern />
</div>
<div className="max-w-7xl mx-auto text-center relative z-10">
<h2 className="text-4xl sm:text-5xl font-bold mb-16" data-aos="fade-up">Why OpenTag Serverless?</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
<div className="flex flex-col items-center" data-aos="fade-up" data-aos-delay="200">
<Heart className="h-20 w-20 mb-6 text-red-200" />
<h3 className="text-2xl font-bold mb-4">Same Goodness of OpenTag</h3>
<p className="text-lg">Instant access to critical medical information in emergencies, but now with no server dependency.</p>
</div>
<div className="flex flex-col items-center" data-aos="fade-up" data-aos-delay="400">
<ShieldCheck className="h-20 w-20 mb-6 text-red-200" />
<h3 className="text-2xl font-bold mb-4">Fully Anonymous</h3>
<p className="text-lg">Data encoded directly into the QR code. No login, no ID, no server. Privacy concerns? Forgotten.</p>
</div>
<div className="flex flex-col items-center" data-aos="fade-up" data-aos-delay="600">
<QrCode className="h-20 w-20 mb-6 text-red-200" />
<h3 className="text-2xl font-bold mb-4">Compact QR Code</h3>
<p className="text-lg">Small in size, big in impact. Store data you never thought possible in such a compact form.</p>
</div>
</div>
</div>
</section>

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


<section className="py-16 px-4 sm:px-6 lg:px-8">
{/* Sample QR Code Section */}
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-800">
<div className="max-w-7xl mx-auto items-center">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl sm:text-4xl font-bold mb-4">Some of your data, in a QR code</h2>
<div className="max-w-3xl mx-auto text-center mb-16">
<h2 className="text-4xl sm:text-5xl font-bold mb-6" data-aos="fade-up">Your Data, In a QR Code</h2>
<p className="text-xl text-muted-foreground" data-aos="fade-up" data-aos-delay="200">Compact, portable, and potentially life-saving.</p>
</div>
<div className="relative w-full h-64 sm:h-96 my-12">
<div className="relative w-full h-96 sm:h-[500px] my-12" data-aos="zoom-in" data-aos-delay="400">
<Image
src="/sampletag.png"
alt="OpenTag Serverless Example"
Expand All @@ -90,64 +93,67 @@ export default function Home() {
sizes="100vw"
/>
</div>
<div className="max-w-4xl mx-auto mt-8">
<p className="text-lg sm:text-xl text-justify mb-4">
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.
<div className="max-w-4xl mx-auto mt-16">
<p className="text-lg sm:text-xl text-center mb-6" data-aos="fade-up" data-aos-delay="600">
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.
</p>
<p className="text-sm sm:text-base text-center mt-4 text-muted-foreground">
Note: The amount of data that can be stored in the QR code is limited
<p className="text-base sm:text-lg text-center mt-4 text-muted-foreground" data-aos="fade-up" data-aos-delay="800">
Note: The amount of data that can be stored in the QR code is limited, but it's enough to save lives.
</p>
</div>
</div>
</section>

{/* Benefits Section */}
<section id="benefits" className="py-16 px-4 sm:px-6 lg:px-8">
<section id="benefits" className="py-24 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
<div className="max-w-7xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-3xl sm:text-4xl font-bold">Unparalleled Benefits</h2>
<div className="text-center mb-16">
<h2 className="text-4xl sm:text-5xl font-bold" data-aos="fade-up">Unparalleled Benefits</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="flex items-start bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
<Server className="h-12 w-12 text-red-600 dark:text-red-500 mr-4 flex-shrink-0" />
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<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">
<Server className="h-16 w-16 text-red-600 dark:text-red-500 mr-6 flex-shrink-0" />
<div>
<h3 className="text-xl font-bold mb-2">Zero Server Dependency</h3>
<p className="text-muted-foreground">Your medical information lives in the QR code, not on vulnerable servers. Absolute data sovereignty.</p>
<h3 className="text-2xl font-bold mb-4">Zero Server Dependency</h3>
<p className="text-lg text-muted-foreground">Your medical information lives in the QR code, not on vulnerable servers. Absolute data sovereignty.</p>
</div>
</div>
<div className="flex items-start bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
<Wifi className="h-12 w-12 text-red-600 dark:text-red-500 mr-4 flex-shrink-0" />
<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">
<Wifi className="h-16 w-16 text-red-600 dark:text-red-500 mr-6 flex-shrink-0" />
<div>
<h3 className="text-xl font-bold mb-2">No Login Required</h3>
<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>
<h3 className="text-2xl font-bold mb-4">No Login Required</h3>
<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>
</div>
</div>
<div className="flex items-start bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
<DollarSign className="h-12 w-12 text-red-600 dark:text-red-500 mr-4 flex-shrink-0" />
<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">
<DollarSign className="h-16 w-16 text-red-600 dark:text-red-500 mr-6 flex-shrink-0" />
<div>
<h3 className="text-xl font-bold mb-2">Unlimited Free Tags</h3>
<p className="text-muted-foreground">Create as many tags as you need, all for free. No limits, no hidden costs.</p>
<h3 className="text-2xl font-bold mb-4">Unlimited Free Tags</h3>
<p className="text-lg text-muted-foreground">Create as many tags as you need, all for free. No limits, no hidden costs.</p>
</div>
</div>
<div className="flex items-start bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
<ShieldCheck className="h-12 w-12 text-red-600 dark:text-red-500 mr-4 flex-shrink-0" />
<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">
<ShieldCheck className="h-16 w-16 text-red-600 dark:text-red-500 mr-6 flex-shrink-0" />
<div>
<h3 className="text-xl font-bold mb-2">You're in Control</h3>
<p className="text-muted-foreground">Choose exactly what information to include. Update anytime. Your tag, your rules.</p>
<h3 className="text-2xl font-bold mb-4">You're in Control</h3>
<p className="text-lg text-muted-foreground">Choose exactly what information to include. Update anytime. Your tag, your rules.</p>
</div>
</div>
</div>
</div>
</section>

{/* CTA Section */}
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-red-600 dark:bg-red-800 text-white">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl sm:text-4xl font-bold mb-4">Join the Medical Revolution Today!</h2>
<p className="text-xl sm:text-2xl mb-8">
<section className="py-24 px-4 sm:px-6 lg:px-8 bg-red-600 dark:bg-red-800 text-white relative overflow-hidden">
<div className="absolute inset-0 opacity-10">
<DotPattern />
</div>
<div className="max-w-4xl mx-auto text-center relative z-10">
<h2 className="text-4xl sm:text-5xl font-bold mb-8" data-aos="fade-up">Join the Medical Revolution Today!</h2>
<p className="text-xl sm:text-2xl mb-12" data-aos="fade-up" data-aos-delay="200">
Don't wait for an emergency to wish you had OpenTag Serverless. Create your life-saving QR code now.
</p>
<Button asChild size="lg" variant="secondary" className="text-red-600 hover:text-red-700">
<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">
<Link href="/generate">Generate Your Free QR Code</Link>
</Button>
</div>
Expand Down
15 changes: 6 additions & 9 deletions components/health-article.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
import { Button } from "@/components/ui/button";
import BoxReveal from "@/components/ui/box-reveal";

export async function HealthArticle() {
return (
<div className="size-full items-center justify-center overflow-hidden pt-8 max-w-[80vw] mx-auto">
<BoxReveal boxColor={"#e51d15"} duration={1}>
<div>
<p className="text-2xl font-semibold hidden sm:block">
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.
</p>
<p className="text-xl font-semibold sm:hidden">
Critical <span className="text-red-600 font-bold">Medical Data</span> Isn't Accessible in Time.
</p>
<p className="text-3xl sm:text-4xl font-semibold">
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.
</p>
</div>
</BoxReveal>

<BoxReveal boxColor={"#e51d15"} duration={1}>
<p className="mt-[1.5rem]">
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.
<p className="mt-6 text-xl sm:text-2xl">
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.
</p>
</BoxReveal>

</div>
);
}

0 comments on commit 057ec44

Please sign in to comment.