VIBN Frontend for Coolify deployment

marketing/components/hero.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { Sparkles, ArrowRight } from "lucide-react";
+import { homepage } from "@/marketing/content/homepage";
+
+export function Hero() {
+  return (
+    <section className="w-full">
+      <div className="container mx-auto px-6">
+        <div className="flex flex-col items-center gap-6 pb-16 pt-16 md:py-24 lg:py-32">
+          <div className="flex max-w-[980px] flex-col items-center gap-6 text-center">
+        {/* Main title */}
+        <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-5xl lg:text-6xl lg:leading-[1.1]">
+          {homepage.hero.title}
+        </h1>
+        
+        {/* Subtitle */}
+        <p className="max-w-[750px] text-lg text-muted-foreground sm:text-xl md:text-2xl">
+          {homepage.hero.subtitle}
+        </p>
+        
+        {/* CTAs */}
+        <div className="flex flex-col sm:flex-row gap-4 mt-4">
+          <Link href="/auth">
+            <Button size="lg" className="h-12 px-8 text-base">
+              <Sparkles className="mr-2 h-5 w-5" />
+              {homepage.hero.cta.primary}
+            </Button>
+          </Link>
+          <Link href="#how-it-works">
+            <Button variant="outline" size="lg" className="h-12 px-8 text-base">
+              {homepage.hero.cta.secondary}
+              <ArrowRight className="ml-2 h-5 w-5" />
+            </Button>
+          </Link>
+        </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+