@dailyautomations/ui 1.2.0 → 1.4.0

package/examples/pages/LandingPage.tsx

@@ -0,0 +1,860 @@
+"use client"
+
+import * as React from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import {
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  Input,
+  Label,
+  Badge,
+  AnimatedFade,
+  AnimatedSlide,
+  AnimatedList,
+  AnimatedListItem,
+  staggerContainer,
+  staggerChild,
+  cn,
+} from "../../src"
+import {
+  CheckCircle2,
+  Zap,
+  Clock,
+  Brain,
+  TrendingUp,
+  Shield,
+  ArrowRight,
+  Star,
+  Play,
+  Check,
+  X,
+  ChevronRight,
+} from "lucide-react"
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface Testimonial {
+  name: string
+  role: string
+  company: string
+  avatar: string
+  quote: string
+  result: string
+}
+
+interface PricingTier {
+  name: string
+  value: string
+  features: string[]
+  highlighted?: boolean
+}
+
+interface TransformationStage {
+  label: string
+  title: string
+  description: string
+  icon: React.ComponentType<{ className?: string }>
+}
+
+// ============================================================================
+// DATA
+// ============================================================================
+
+const TESTIMONIALS: Testimonial[] = [
+  {
+    name: "Sarah Chen",
+    role: "Head of Operations",
+    company: "Fintech Startup",
+    avatar: "SC",
+    quote:
+      "We went from 40 hours of manual data entry to 2 hours of oversight. The ROI was obvious within the first week.",
+    result: "95% time reduction",
+  },
+  {
+    name: "Marcus Williams",
+    role: "Solo Founder",
+    company: "E-commerce Brand",
+    avatar: "MW",
+    quote:
+      "I was drowning in spreadsheets. Now my entire workflow runs while I sleep. Best investment I've made.",
+    result: "$12K/mo saved",
+  },
+  {
+    name: "Elena Rodriguez",
+    role: "Agency Owner",
+    company: "Digital Agency",
+    avatar: "ER",
+    quote:
+      "We onboarded 3 new clients without hiring. Daily handles what used to take a full-time coordinator.",
+    result: "3x client capacity",
+  },
+]
+
+const PRICING_TIERS: PricingTier[] = [
+  {
+    name: "Full Platform Access",
+    value: "$2,997",
+    features: [
+      "All automation templates",
+      "Unlimited workflows",
+      "Priority support",
+      "Custom integrations",
+    ],
+  },
+  {
+    name: "Implementation Support",
+    value: "$1,500",
+    features: [
+      "2-hour strategy call",
+      "Workflow audit",
+      "Custom setup assistance",
+      "30-day follow-up",
+    ],
+  },
+  {
+    name: "Training Library",
+    value: "$997",
+    features: [
+      "50+ video tutorials",
+      "Step-by-step guides",
+      "Template library",
+      "Community access",
+    ],
+    highlighted: true,
+  },
+  {
+    name: "Bonus Resources",
+    value: "$497",
+    features: [
+      "Automation playbook",
+      "Integration templates",
+      "ROI calculator",
+      "Quick-start checklist",
+    ],
+  },
+]
+
+const TRANSFORMATION_STAGES: TransformationStage[] = [
+  {
+    label: "Week 1",
+    title: "Quick Win",
+    description: "Automate your first workflow and reclaim 5+ hours instantly.",
+    icon: Zap,
+  },
+  {
+    label: "Month 1",
+    title: "Compound Effect",
+    description: "Connected automations multiply your output without extra effort.",
+    icon: TrendingUp,
+  },
+  {
+    label: "Month 3",
+    title: "Competitive Edge",
+    description: "Operate at a level your competitors can't match manually.",
+    icon: Shield,
+  },
+  {
+    label: "Year 1",
+    title: "10x Transformation",
+    description: "Scale operations that would've required a full team.",
+    icon: Brain,
+  },
+]
+
+const PROBLEMS = [
+  {
+    title: "Drowning in repetitive tasks",
+    agitation:
+      "Every week, you lose 15+ hours to copy-paste, manual updates, and busy work. That's 780 hours a year—20 full work weeks—spent on tasks a machine could handle.",
+  },
+  {
+    title: "Information scattered everywhere",
+    agitation:
+      "Customer data in one tool, notes in another, tasks in a third. You're the human glue holding it together. One missed sync and deals fall through the cracks.",
+  },
+  {
+    title: "Scaling means hiring",
+    agitation:
+      "Growth sounds exciting until you realize it means more people, more overhead, more management. The business that was supposed to give you freedom now owns your calendar.",
+  },
+]
+
+// ============================================================================
+// SECTION COMPONENTS
+// ============================================================================
+
+/**
+ * HERO SECTION
+ * Job: Get email or get scroll
+ * Structure: Eyebrow → Headline → Subheadline → CTA → Trust Signals
+ */
+function HeroSection({
+  onSubmit,
+  email,
+  setEmail,
+}: {
+  onSubmit: (e: React.FormEvent) => void
+  email: string
+  setEmail: (v: string) => void
+}) {
+  return (
+    <section className="relative min-h-[90vh] flex items-center justify-center px-4 py-20 overflow-hidden">
+      {/* Background gradient */}
+      <div className="absolute inset-0 bg-gradient-to-b from-primary/5 via-background to-background" />
+
+      {/* Subtle grid pattern */}
+      <div
+        className="absolute inset-0 opacity-[0.02]"
+        style={{
+          backgroundImage: `linear-gradient(rgb(var(--primary)) 1px, transparent 1px),
+                           linear-gradient(90deg, rgb(var(--primary)) 1px, transparent 1px)`,
+          backgroundSize: '64px 64px',
+        }}
+      />
+
+      <div className="relative z-10 max-w-4xl mx-auto text-center">
+        <AnimatedFade>
+          {/* Eyebrow */}
+          <Badge variant="outline" className="mb-6 text-sm font-medium">
+            <Zap className="w-3 h-3 mr-1.5 text-accent" />
+            For operators who refuse to stay stuck
+          </Badge>
+
+          {/* Headline */}
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-text-primary mb-6 leading-[1.1]">
+            Stop working <span className="text-primary">in</span> your business.
+            <br />
+            Start working <span className="text-accent">on</span> it.
+          </h1>
+
+          {/* Subheadline */}
+          <p className="text-lg md:text-xl text-text-secondary max-w-2xl mx-auto mb-10 leading-relaxed">
+            Daily automates the knowledge work that's eating your calendar—so you can focus on decisions that actually move the needle.
+          </p>
+        </AnimatedFade>
+
+        {/* CTA */}
+        <AnimatedSlide direction="up" delay={0.2}>
+          <form onSubmit={onSubmit} className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-8">
+            <Input
+              type="email"
+              placeholder="Enter your email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="flex-1 h-12 text-base"
+              required
+            />
+            <Button type="submit" size="lg" className="h-12 px-8 text-base font-semibold">
+              Get Started Free
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </Button>
+          </form>
+        </AnimatedSlide>
+
+        {/* Trust Signals */}
+        <AnimatedFade delay={0.4}>
+          <div className="flex flex-wrap items-center justify-center gap-6 text-sm text-text-secondary">
+            <span className="flex items-center gap-1.5">
+              <Check className="w-4 h-4 text-success" />
+              No credit card required
+            </span>
+            <span className="flex items-center gap-1.5">
+              <Check className="w-4 h-4 text-success" />
+              Setup in under 10 minutes
+            </span>
+            <span className="flex items-center gap-1.5">
+              <Check className="w-4 h-4 text-success" />
+              Cancel anytime
+            </span>
+          </div>
+        </AnimatedFade>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * SUCCESS SECTION (Conditional)
+ * Job: Kill buyer's remorse
+ * Structure: Checkmark → Confirmation → Deliverable list
+ */
+function SuccessSection({ email }: { email: string }) {
+  return (
+    <section className="py-20 px-4 bg-card/50">
+      <div className="max-w-2xl mx-auto text-center">
+        <AnimatedFade>
+          <div className="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-6">
+            <CheckCircle2 className="w-8 h-8 text-success" />
+          </div>
+
+          <h2 className="text-2xl md:text-3xl font-bold text-text-primary mb-4">
+            You're in. Check your inbox.
+          </h2>
+
+          <p className="text-text-secondary mb-8">
+            We sent a confirmation to <span className="text-primary font-medium">{email}</span>.
+            Here's what happens next:
+          </p>
+
+          <Card className="text-left">
+            <CardContent className="p-6 space-y-4">
+              {[
+                "Instant access link (check spam if needed)",
+                "5-minute quick start guide",
+                "First automation template ready to deploy",
+                "Direct line to our support team",
+              ].map((item, i) => (
+                <div key={i} className="flex items-start gap-3">
+                  <Check className="w-5 h-5 text-success mt-0.5 shrink-0" />
+                  <span className="text-text-primary">{item}</span>
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+        </AnimatedFade>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * PROBLEM-AGITATE SECTION
+ * Job: Make status quo painful
+ * Structure: 3 problems with agitation → Personal transition
+ */
+function ProblemSection() {
+  return (
+    <section className="py-24 px-4">
+      <div className="max-w-4xl mx-auto">
+        <AnimatedFade>
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">The Problem</Badge>
+            <h2 className="text-3xl md:text-4xl font-bold text-text-primary mb-4">
+              You didn't start a business to do busywork.
+            </h2>
+            <p className="text-text-secondary text-lg max-w-2xl mx-auto">
+              But somewhere along the way, operations took over. Sound familiar?
+            </p>
+          </div>
+        </AnimatedFade>
+
+        <motion.div
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          className="space-y-8"
+        >
+          {PROBLEMS.map((problem, i) => (
+            <motion.div key={i} variants={staggerChild}>
+              <Card className="border-l-4 border-l-destructive/50">
+                <CardContent className="p-6">
+                  <div className="flex items-start gap-4">
+                    <div className="w-8 h-8 rounded-full bg-destructive/10 flex items-center justify-center shrink-0 mt-1">
+                      <X className="w-4 h-4 text-destructive" />
+                    </div>
+                    <div>
+                      <h3 className="text-lg font-semibold text-text-primary mb-2">
+                        {problem.title}
+                      </h3>
+                      <p className="text-text-secondary leading-relaxed">
+                        {problem.agitation}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Personal transition */}
+        <AnimatedFade delay={0.4}>
+          <div className="mt-16 text-center">
+            <p className="text-lg text-text-secondary italic">
+              "I built Daily because I lived this. Two years of 60-hour weeks,
+              most of it doing things I knew could be automated—if only I had the time
+              to set it up."
+            </p>
+            <p className="mt-4 text-primary font-medium">
+              — The founder who finally built the solution
+            </p>
+          </div>
+        </AnimatedFade>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * VALUE STACK SECTION
+ * Job: Make saying no feel stupid
+ * Structure: 4 tiers descending → Total value → Your price
+ */
+function ValueStackSection() {
+  const totalValue = PRICING_TIERS.reduce(
+    (sum, tier) => sum + parseInt(tier.value.replace(/[$,]/g, "")),
+    0
+  )
+  const yourPrice = 497
+
+  return (
+    <section className="py-24 px-4 bg-card/30">
+      <div className="max-w-4xl mx-auto">
+        <AnimatedFade>
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">What You Get</Badge>
+            <h2 className="text-3xl md:text-4xl font-bold text-text-primary mb-4">
+              Everything you need to automate your operations.
+            </h2>
+          </div>
+        </AnimatedFade>
+
+        <motion.div
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="space-y-4"
+        >
+          {PRICING_TIERS.map((tier, i) => (
+            <motion.div key={i} variants={staggerChild}>
+              <Card className={cn(
+                "relative overflow-hidden transition-colors",
+                tier.highlighted && "border-primary bg-primary/5"
+              )}>
+                {tier.highlighted && (
+                  <div className="absolute top-0 right-0 bg-primary text-primary-foreground text-xs font-medium px-3 py-1 rounded-bl">
+                    Most Popular
+                  </div>
+                )}
+                <CardContent className="p-6">
+                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                    <div className="flex-1">
+                      <h3 className="text-lg font-semibold text-text-primary mb-2">
+                        {tier.name}
+                      </h3>
+                      <div className="flex flex-wrap gap-2">
+                        {tier.features.map((feature, j) => (
+                          <Badge key={j} variant="secondary" className="font-normal">
+                            <Check className="w-3 h-3 mr-1" />
+                            {feature}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="text-right shrink-0">
+                      <span className="text-2xl font-bold text-text-primary">
+                        {tier.value}
+                      </span>
+                      <span className="text-text-secondary text-sm ml-1">value</span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Total value vs price */}
+        <AnimatedFade delay={0.4}>
+          <div className="mt-12 p-8 rounded-2xl bg-gradient-to-r from-primary/10 via-accent/10 to-primary/10 border border-primary/20 text-center">
+            <div className="flex flex-col md:flex-row items-center justify-center gap-8">
+              <div>
+                <p className="text-text-secondary text-sm mb-1">Total Value</p>
+                <p className="text-3xl font-bold text-text-primary line-through opacity-60">
+                  ${totalValue.toLocaleString()}
+                </p>
+              </div>
+              <div className="text-4xl text-text-secondary">→</div>
+              <div>
+                <p className="text-text-secondary text-sm mb-1">Your Investment</p>
+                <p className="text-4xl md:text-5xl font-extrabold text-accent">
+                  ${yourPrice}
+                </p>
+              </div>
+            </div>
+            <p className="mt-6 text-text-secondary">
+              That's <span className="text-accent font-semibold">
+                {Math.round((1 - yourPrice / totalValue) * 100)}% off
+              </span> when you start today.
+            </p>
+          </div>
+        </AnimatedFade>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * SOCIAL PROOF SECTION
+ * Job: Let others convince them
+ * Structure: Header → 3 testimonials with specific results
+ */
+function SocialProofSection() {
+  return (
+    <section className="py-24 px-4">
+      <div className="max-w-5xl mx-auto">
+        <AnimatedFade>
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">Results That Speak</Badge>
+            <h2 className="text-3xl md:text-4xl font-bold text-text-primary mb-4">
+              They were skeptical too. Then they tried it.
+            </h2>
+          </div>
+        </AnimatedFade>
+
+        <motion.div
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="grid md:grid-cols-3 gap-6"
+        >
+          {TESTIMONIALS.map((testimonial, i) => (
+            <motion.div key={i} variants={staggerChild}>
+              <Card className="h-full flex flex-col">
+                <CardContent className="p-6 flex-1 flex flex-col">
+                  {/* Result badge */}
+                  <Badge className="self-start mb-4 bg-success/10 text-success border-success/20">
+                    {testimonial.result}
+                  </Badge>
+
+                  {/* Quote */}
+                  <blockquote className="text-text-secondary leading-relaxed flex-1 mb-6">
+                    "{testimonial.quote}"
+                  </blockquote>
+
+                  {/* Author */}
+                  <div className="flex items-center gap-3 pt-4 border-t border-border">
+                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm">
+                      {testimonial.avatar}
+                    </div>
+                    <div>
+                      <p className="font-medium text-text-primary text-sm">
+                        {testimonial.name}
+                      </p>
+                      <p className="text-text-secondary text-xs">
+                        {testimonial.role}, {testimonial.company}
+                      </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Additional trust */}
+        <AnimatedFade delay={0.4}>
+          <div className="mt-12 flex flex-wrap items-center justify-center gap-8 text-text-secondary text-sm">
+            <div className="flex items-center gap-2">
+              <div className="flex -space-x-2">
+                {[...Array(5)].map((_, i) => (
+                  <Star key={i} className="w-4 h-4 fill-accent text-accent" />
+                ))}
+              </div>
+              <span>4.9/5 from 200+ users</span>
+            </div>
+            <span className="hidden sm:inline">•</span>
+            <span>500+ workflows automated</span>
+            <span className="hidden sm:inline">•</span>
+            <span>10,000+ hours saved monthly</span>
+          </div>
+        </AnimatedFade>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * TRANSFORMATION SECTION
+ * Job: Make outcome tangible
+ * Structure: 4 stages: Quick win → Compound → Advantage → 10x
+ */
+function TransformationSection() {
+  return (
+    <section className="py-24 px-4 bg-card/30">
+      <div className="max-w-4xl mx-auto">
+        <AnimatedFade>
+          <div className="text-center mb-16">
+            <Badge variant="outline" className="mb-4">Your Transformation</Badge>
+            <h2 className="text-3xl md:text-4xl font-bold text-text-primary mb-4">
+              From overwhelmed operator to scalable business.
+            </h2>
+            <p className="text-text-secondary text-lg max-w-2xl mx-auto">
+              Here's the realistic path—no hype, just what actually happens.
+            </p>
+          </div>
+        </AnimatedFade>
+
+        <motion.div
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="relative"
+        >
+          {/* Timeline line - left on mobile, center on desktop */}
+          <div className="absolute left-6 md:left-1/2 top-0 bottom-0 w-px bg-border md:-translate-x-px" />
+
+          {TRANSFORMATION_STAGES.map((stage, i) => {
+            const Icon = stage.icon
+            const isEven = i % 2 === 0
+
+            return (
+              <motion.div
+                key={i}
+                variants={staggerChild}
+                className="relative pb-12 last:pb-0"
+              >
+                {/* Mobile layout - always left-aligned */}
+                <div className="flex items-start gap-6 md:hidden">
+                  <div className="relative z-10 w-12 h-12 rounded-full bg-primary flex items-center justify-center shrink-0">
+                    <Icon className="w-5 h-5 text-primary-foreground" />
+                  </div>
+                  <Card className="flex-1">
+                    <CardContent className="p-6">
+                      <Badge variant="secondary" className="mb-2">{stage.label}</Badge>
+                      <h3 className="text-lg font-semibold text-text-primary mb-2">
+                        {stage.title}
+                      </h3>
+                      <p className="text-text-secondary text-sm">
+                        {stage.description}
+                      </p>
+                    </CardContent>
+                  </Card>
+                </div>
+
+                {/* Desktop layout - alternating sides */}
+                <div className="hidden md:grid md:grid-cols-[1fr_auto_1fr] md:gap-8 md:items-start">
+                  {/* Left column */}
+                  <div className={cn("flex", isEven ? "justify-end" : "justify-end")}>
+                    {isEven && (
+                      <Card className="max-w-sm text-right">
+                        <CardContent className="p-6">
+                          <Badge variant="secondary" className="mb-2">{stage.label}</Badge>
+                          <h3 className="text-lg font-semibold text-text-primary mb-2">
+                            {stage.title}
+                          </h3>
+                          <p className="text-text-secondary text-sm">
+                            {stage.description}
+                          </p>
+                        </CardContent>
+                      </Card>
+                    )}
+                  </div>
+
+                  {/* Center icon */}
+                  <div className="relative z-10 w-12 h-12 rounded-full bg-primary flex items-center justify-center">
+                    <Icon className="w-5 h-5 text-primary-foreground" />
+                  </div>
+
+                  {/* Right column */}
+                  <div className="flex justify-start">
+                    {!isEven && (
+                      <Card className="max-w-sm">
+                        <CardContent className="p-6">
+                          <Badge variant="secondary" className="mb-2">{stage.label}</Badge>
+                          <h3 className="text-lg font-semibold text-text-primary mb-2">
+                            {stage.title}
+                          </h3>
+                          <p className="text-text-secondary text-sm">
+                            {stage.description}
+                          </p>
+                        </CardContent>
+                      </Card>
+                    )}
+                  </div>
+                </div>
+              </motion.div>
+            )
+          })}
+        </motion.div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * SECONDARY CTA SECTION
+ * Job: Catch the scrollers
+ * Structure: Avatar → Question headline → "Yes" button
+ */
+function SecondaryCTASection({
+  onCTAClick,
+}: {
+  onCTAClick: () => void
+}) {
+  return (
+    <section className="py-24 px-4">
+      <div className="max-w-3xl mx-auto">
+        <AnimatedFade>
+          <Card className="overflow-hidden">
+            <CardContent className="p-0">
+              <div className="grid md:grid-cols-[1fr,2fr]">
+                {/* Avatar / Image side */}
+                <div className="bg-gradient-to-br from-primary to-accent p-8 flex items-center justify-center">
+                  <div className="w-32 h-32 rounded-full bg-white/10 backdrop-blur flex items-center justify-center">
+                    <Brain className="w-16 h-16 text-white" />
+                  </div>
+                </div>
+
+                {/* Content side */}
+                <div className="p-8 md:p-12 flex flex-col justify-center">
+                  <h2 className="text-2xl md:text-3xl font-bold text-text-primary mb-4">
+                    Ready to get your time back?
+                  </h2>
+                  <p className="text-text-secondary mb-8">
+                    Join 500+ operators who stopped drowning in busywork and started
+                    scaling. Your first automation takes 10 minutes.
+                  </p>
+                  <Button
+                    onClick={onCTAClick}
+                    size="lg"
+                    className="w-full sm:w-auto text-base font-semibold"
+                  >
+                    Yes, I'm Ready
+                    <ChevronRight className="w-4 h-4 ml-2" />
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </AnimatedFade>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * FOOTER SECTION
+ * Job: Professional legitimacy
+ * Structure: Logo → Nav → Legal → Social
+ */
+function FooterSection() {
+  return (
+    <footer className="py-12 px-4 border-t border-border bg-card/50">
+      <div className="max-w-5xl mx-auto">
+        <div className="grid gap-8 md:grid-cols-4">
+          {/* Logo & tagline */}
+          <div className="md:col-span-2">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
+                <Zap className="w-4 h-4 text-primary-foreground" />
+              </div>
+              <span className="text-xl font-bold text-text-primary">Daily</span>
+            </div>
+            <p className="text-text-secondary text-sm max-w-xs">
+              Automation infrastructure for operators who want to scale without
+              hiring an army.
+            </p>
+          </div>
+
+          {/* Navigation */}
+          <div>
+            <h4 className="font-semibold text-text-primary mb-4 text-sm">Product</h4>
+            <ul className="space-y-2 text-sm text-text-secondary">
+              <li><a href="#" className="hover:text-primary transition-colors">Features</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Pricing</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Integrations</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Changelog</a></li>
+            </ul>
+          </div>
+
+          {/* Legal & Social */}
+          <div>
+            <h4 className="font-semibold text-text-primary mb-4 text-sm">Company</h4>
+            <ul className="space-y-2 text-sm text-text-secondary">
+              <li><a href="#" className="hover:text-primary transition-colors">About</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Blog</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Privacy</a></li>
+              <li><a href="#" className="hover:text-primary transition-colors">Terms</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-border flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-text-secondary">
+          <p>© {new Date().getFullYear()} Daily Automations. All rights reserved.</p>
+          <div className="flex items-center gap-4">
+            <a href="#" className="hover:text-primary transition-colors">Twitter</a>
+            <a href="#" className="hover:text-primary transition-colors">LinkedIn</a>
+            <a href="#" className="hover:text-primary transition-colors">GitHub</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+// ============================================================================
+// MAIN PAGE COMPONENT
+// ============================================================================
+
+export function LandingPage() {
+  const [email, setEmail] = React.useState("")
+  const [isSubmitted, setIsSubmitted] = React.useState(false)
+  const [submittedEmail, setSubmittedEmail] = React.useState("")
+  const heroRef = React.useRef<HTMLDivElement>(null)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (email) {
+      setSubmittedEmail(email)
+      setIsSubmitted(true)
+      setEmail("")
+      // In production: send to your email service
+    }
+  }
+
+  const scrollToHero = () => {
+    heroRef.current?.scrollIntoView({ behavior: "smooth" })
+  }
+
+  return (
+    <div className="min-h-screen bg-background text-text-primary">
+      <div ref={heroRef}>
+        <AnimatePresence mode="wait">
+          {isSubmitted ? (
+            <motion.div
+              key="success"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <SuccessSection email={submittedEmail} />
+            </motion.div>
+          ) : (
+            <motion.div
+              key="hero"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <HeroSection
+                onSubmit={handleSubmit}
+                email={email}
+                setEmail={setEmail}
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      <ProblemSection />
+      <ValueStackSection />
+      <SocialProofSection />
+      <TransformationSection />
+      <SecondaryCTASection onCTAClick={scrollToHero} />
+      <FooterSection />
+    </div>
+  )
+}
+
+export default LandingPage