Deploy

src/components/sections/RootedNewsletterSection.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useState } from "react"
+import Button from "@/components/ui/Button"
+import Input from "@/components/ui/Input"
+import { ArrowRight } from 'lucide-react'
+
+export default function RootedNewsletterSection() {
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [submitted, setSubmitted] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Placeholder — send to mailing list
+    setSubmitted(true)
+  }
+
+  return (
+    <section data-vula-section="rootednewsletter" id="rooted-newsletter" className="py-20 bg-[#8b5a3c]">
+      <div className="container mx-auto px-4 max-w-2xl text-center">
+        <h2 className="text-4xl font-serif font-bold text-white mb-4">
+          Stay rooted with us
+        </h2>
+        <p className="text-lg text-white/80 mb-10 leading-relaxed">
+          Stories of indigenous botanicals, skincare rituals, and subscriber-only
+          early access to new small batches — delivered to your inbox.
+        </p>
+
+        {submitted ? (
+          <div className="bg-white/10 rounded-xl p-8 backdrop-blur-sm">
+            <p className="text-xl text-white font-semibold">
+              Thank you! You&apos;re now on the list.
+            </p>
+            <p className="text-white/70 mt-2">
+              Watch for your first story soon.
+            </p>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto">
+            <div>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Your name"
+                required
+                className="w-full border-white/20 bg-white/95 text-[#21140d] placeholder:text-[#21140d]/40"
+              />
+            </div>
+            <div>
+              <Input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="Your email address"
+                required
+                className="w-full border-white/20 bg-white/95 text-[#21140d] placeholder:text-[#21140d]/40"
+              />
+            </div>
+            <Button
+              type="submit"
+              variant="default"
+              size="lg"
+              className="w-full bg-[#ea580c] hover:bg-[#d4520a] text-white transition-all duration-200"
+            >
+              Join the circle <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+          </form>
+        )}
+      </div>
+    </section>
+  )
+}