VIBN Frontend for Coolify deployment

marketing/components/cta.tsx

@@ -0,0 +1,33 @@
+import { Button } from "@/components/ui/button";
+import { Sparkles, Calendar } from "lucide-react";
+import Link from "next/link";
+import { homepage } from "@/marketing/content/homepage";
+
+export function CTA() {
+  return (
+    <section className="w-full py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto flex max-w-[980px] flex-col items-center gap-6 rounded-2xl border bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20 p-12 md:p-16">
+        <h2 className="text-2xl font-bold leading-tight tracking-tight md:text-4xl lg:text-5xl text-center max-w-[800px]">
+          {homepage.finalCTA.title}
+        </h2>
+        <div className="flex flex-col sm:flex-row gap-4 pt-4">
+          <Link href="/auth">
+            <Button size="lg" className="h-12 px-8 text-base">
+              <Sparkles className="mr-2 h-5 w-5" />
+              {homepage.finalCTA.cta.primary}
+            </Button>
+          </Link>
+          <Link href="https://calendly.com/your-link" target="_blank" rel="noopener noreferrer">
+            <Button variant="outline" size="lg" className="h-12 px-8 text-base">
+              <Calendar className="mr-2 h-5 w-5" />
+              {homepage.finalCTA.cta.secondary}
+            </Button>
+          </Link>
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+}
+

marketing/components/emotional-hook.tsx

@@ -0,0 +1,22 @@
+import { homepage } from "@/marketing/content/homepage";
+
+export function EmotionalHook() {
+  return (
+    <section className="w-full py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto max-w-[800px] text-center space-y-4">
+        <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          {homepage.emotionalHook.title}
+        </h2>
+        <p className="text-4xl font-bold tracking-tight md:text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          {homepage.emotionalHook.subtitle}
+        </p>
+        <p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">
+          {homepage.emotionalHook.description}
+        </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+

marketing/components/features.tsx

@@ -0,0 +1,32 @@
+import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { homepage } from "@/marketing/content/homepage";
+
+export function Features() {
+  return (
+    <section id="features" className="w-full py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto flex max-w-[980px] flex-col items-center gap-4 mb-12">
+        <h2 className="text-3xl font-bold leading-tight tracking-tighter md:text-5xl text-center">
+          {homepage.features.title}
+        </h2>
+        <p className="max-w-[750px] text-center text-lg text-muted-foreground md:text-xl">
+          {homepage.features.description}
+        </p>
+      </div>
+      <div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {homepage.features.list.map((feature, index) => (
+          <Card key={index} className="transition-all hover:border-primary/50">
+            <CardHeader>
+              <CardTitle className="text-lg">{feature.title}</CardTitle>
+              <CardDescription className="text-base leading-relaxed">
+                {feature.description}
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        ))}
+      </div>
+      </div>
+    </section>
+  );
+}
+

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>
+  );
+}
+

marketing/components/how-it-works.tsx

@@ -0,0 +1,39 @@
+import { homepage } from "@/marketing/content/homepage";
+
+export function HowItWorks() {
+  return (
+    <section id="how-it-works" className="w-full py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto max-w-[900px] space-y-12">
+        <div className="text-center space-y-4">
+          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+            {homepage.howItWorks.title}
+          </h2>
+          <p className="text-lg text-muted-foreground md:text-xl">
+            {homepage.howItWorks.description}
+          </p>
+        </div>
+        
+        <div className="space-y-8 pt-8">
+          {homepage.howItWorks.steps.map((step) => (
+            <div key={step.number} className="flex gap-6">
+              <div className="flex-shrink-0">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-blue-600 to-purple-600 text-white font-bold text-xl">
+                  {step.number}
+                </div>
+              </div>
+              <div className="space-y-2 pt-1">
+                <h3 className="text-2xl font-bold">{step.title}</h3>
+                <p className="text-lg text-muted-foreground leading-relaxed">
+                  {step.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+}
+

marketing/components/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Marketing Components
+ * All marketing-specific components for the landing page
+ */
+
+export { Hero } from "./hero";
+export { EmotionalHook } from "./emotional-hook";
+export { WhoItsFor } from "./who-its-for";
+export { Transformation } from "./transformation";
+export { Features } from "./features";
+export { HowItWorks } from "./how-it-works";
+export { Pricing } from "./pricing";
+export { CTA } from "./cta";
+

marketing/components/pricing.tsx

@@ -0,0 +1,69 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Check } from "lucide-react";
+import Link from "next/link";
+import { homepage } from "@/marketing/content/homepage";
+
+export function Pricing() {
+  return (
+    <section id="pricing" className="w-full py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto max-w-[980px] space-y-12">
+        <div className="text-center space-y-4">
+          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+            {homepage.pricing.title}
+          </h2>
+          <p className="text-lg text-muted-foreground md:text-xl">
+            {homepage.pricing.description}
+          </p>
+        </div>
+        
+        <div className="grid gap-8 md:grid-cols-3 pt-8">
+          {homepage.pricing.tiers.map((tier) => (
+            <Card
+              key={tier.name}
+              className={`flex flex-col ${
+                tier.highlighted
+                  ? "border-primary shadow-lg scale-105"
+                  : ""
+              }`}
+            >
+              <CardHeader>
+                <CardTitle className="text-2xl">{tier.name}</CardTitle>
+                <CardDescription className="text-base">
+                  {tier.description}
+                </CardDescription>
+                <div className="pt-4">
+                  <span className="text-4xl font-bold">{tier.price}</span>
+                  {tier.price !== "Free" && (
+                    <span className="text-muted-foreground">/month</span>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent className="flex-1 space-y-4">
+                <ul className="space-y-3">
+                  {tier.features.map((feature, index) => (
+                    <li key={index} className="flex items-start gap-3">
+                      <Check className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" />
+                      <span className="text-sm">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+                <Link href="/auth" className="block pt-4">
+                  <Button
+                    className="w-full"
+                    variant={tier.highlighted ? "default" : "outline"}
+                  >
+                    {tier.price === "Free" ? "Start Free" : "Get Started"}
+                  </Button>
+                </Link>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+}
+

marketing/components/transformation.tsx

@@ -0,0 +1,36 @@
+import { Sparkles } from "lucide-react";
+import { homepage } from "@/marketing/content/homepage";
+
+export function Transformation() {
+  return (
+    <section className="w-full py-16 md:py-24 bg-muted/30">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto max-w-[900px] space-y-12">
+        <div className="text-center space-y-4">
+          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+            {homepage.transformation.title}
+          </h2>
+          <p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">
+            {homepage.transformation.description}
+          </p>
+        </div>
+        
+        <div className="grid gap-6 md:grid-cols-2 pt-8">
+          {homepage.transformation.outcomes.map((outcome, index) => (
+            <div
+              key={index}
+              className="flex items-start gap-4 rounded-lg border bg-background p-6 shadow-sm"
+            >
+              <div className="rounded-full bg-gradient-to-br from-blue-500 to-purple-600 p-2 mt-1">
+                <Sparkles className="h-5 w-5 text-white" />
+              </div>
+              <p className="text-lg leading-relaxed font-medium">{outcome}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+}
+

marketing/components/who-its-for.tsx

@@ -0,0 +1,39 @@
+import { Check } from "lucide-react";
+import { homepage } from "@/marketing/content/homepage";
+
+export function WhoItsFor() {
+  return (
+    <section id="who-its-for" className="w-full py-16 md:py-24">
+      <div className="container mx-auto px-6">
+        <div className="mx-auto max-w-[900px] space-y-12">
+        <div className="text-center space-y-4">
+          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+            {homepage.whoItsFor.title}
+          </h2>
+          <p className="text-2xl font-semibold text-muted-foreground md:text-3xl">
+            {homepage.whoItsFor.subtitle}
+          </p>
+          <p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">
+            {homepage.whoItsFor.description}
+          </p>
+        </div>
+        
+        <div className="grid gap-4 pt-8">
+          {homepage.whoItsFor.traits.map((trait, index) => (
+            <div
+              key={index}
+              className="flex items-start gap-4 rounded-lg border bg-card p-6 transition-all hover:border-primary/50"
+            >
+              <div className="rounded-full bg-primary/10 p-2 mt-1">
+                <Check className="h-5 w-5 text-primary" />
+              </div>
+              <p className="text-lg leading-relaxed">{trait}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+      </div>
+    </section>
+  );
+}
+