feat(homepage): implement banner section (#3)

Co-authored-by: Hoang Nguyen <[email protected]>

src/app/page.tsx

@@ -6,6 +6,52 @@ export default function Home() {
   return (
     <main className="flex min-h-screen flex-col">
       <div className="flex-1 space-y-16 pb-8 pt-20 md:pb-12 md:pt-24 lg:py-32">
+        <div className="container flex flex-col items-center gap-4 text-center">
+          <Badge className="rounded-lg" variant="secondary">
+            NEW
+            {' '}
+            <span className="mx-1">+</span>
+            {' '}
+            v0.5.14 is now live on GitHub. Check it out!
+          </Badge>
+
+          <span className="text-4xl">❝</span>
+
+          <h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
+            Chat with AI
+            <br />
+            without privacy concerns
+          </h1>
+
+          <p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+            Jan is an open source ChatGPT-alternative that runs 100% offline.
+          </p>
+
+          <div className="space-y-4">
+            <Button className="h-11 px-8" size="lg">
+              <Download className="mr-2 size-4" />
+              Download for Windows
+              <ChevronDown className="ml-2 size-4" />
+            </Button>
+            <p className="text-xs text-muted-foreground">
+              <span className="font-semibold text-yellow-500">2.5M+</span>
+              {' '}
+              downloads | Free & Open Source
+            </p>
+          </div>
+        </div>
+
+        <div className="container">
+          <div className="relative mx-auto aspect-video max-w-5xl overflow-hidden rounded-xl border bg-background shadow-xl">
+            <Image
+              src="https://sjc.microlink.io/-ax0tIqUfnMYpO1Y6sFNuRcGN_Oe6cQwpzrnQR5q5pzkpfA29UGKZ228lDnpeQCpNANORBcNBmQgFoOtLn18vw.jpeg"
+              alt="Jan AI Interface"
+              fill
+              className="object-cover"
+              priority
+            />
+          </div>
+        </div>
         <AnnouncementBanner />
         <FeaturesSection />
         <CustomizationSection />

src/components/AnnouncementBanner.tsx

@@ -0,0 +1,14 @@
+export function AnnouncementBanner() {
+  return (
+    <div className="bg-primary/10 py-2 text-center">
+      <div className="container">
+        <p className="text-sm">
+          <span className="mr-2 rounded bg-primary px-2 py-0.5 text-xs font-semibold text-white">NEW</span>
+          <span className="font-medium">✨ v0.5.14</span>
+          {' '}
+          is now live on GitHub. Check it out!
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/HeroSection.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@/components/atoms';
+import { Download } from 'lucide-react';
+import Image from 'next/image';
+
+export function HeroSection() {
+  return (
+    <div className="relative">
+      <div className="container flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center text-center">
+        <div className="mx-auto max-w-5xl space-y-4">
+          <h1 className="text-4xl font-bold sm:text-5xl md:text-6xl lg:text-7xl">
+            Chat with AI
+            <br />
+            without privacy concerns
+          </h1>
+          <p className="mx-auto max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+            Jan is an open source ChatGPT-alternative that runs 100% offline.
+          </p>
+          <div className="space-y-4">
+            <Button size="lg" className="h-12">
+              <Download className="mr-2 size-4" />
+              Download for Windows
+            </Button>
+            <p className="text-sm text-muted-foreground">
+              <span className="font-semibold text-primary">2.5M+</span>
+              {' '}
+              downloads | Free & Open Source
+            </p>
+          </div>
+        </div>
+        <div className="mt-16 w-full max-w-5xl rounded-lg border bg-muted/50 p-4">
+          <Image
+            src="https://sjc.microlink.io/-ax0tIqUfnMYpO1Y6sFNuRcGN_Oe6cQwpzrnQR5q5pzkpfA29UGKZ228lDnpeQCpNANORBcNBmQgFoOtLn18vw.jpeg"
+            alt="Jan AI Interface"
+            className="rounded-lg shadow-2xl"
+            width={1200}
+            height={675}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}