Deploy

src/components/sections/EarthyNewsletterSection.tsx

@@ -0,0 +1,55 @@
+'use client'
+import { useState } from 'react'
+import { ArrowRight, Mail } from 'lucide-react'
+import Image from 'next/image'
+import Button from '@/components/ui/Button'
+import Input from '@/components/ui/Input'
+
+export default function EarthyNewsletterSection() {
+  const [email, setEmail] = useState('')
+  const [subscribed, setSubscribed] = useState(false)
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (email) setSubscribed(true)
+  }
+  return (
+    <section data-vula-section="earthynewsletter" id="newsletter" className="py-20 bg-[#f4f5f2]">
+      <div className="container mx-auto px-4 max-w-5xl">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center bg-white rounded-3xl shadow-xl overflow-hidden">
+          <div className="relative h-64 md:h-full min-h-[250px]">
+            <Image
+              src="https://images.pexels.com/photos/9775170/pexels-photo-9775170.jpeg?auto=compress&cs=tinysrgb&h=350&w=350"
+              alt="Marula oil bottle"
+              fill
+              sizes="(max-width: 768px) 100vw, 50vw"
+              className="object-cover"
+            />
+          </div>
+          <div className="p-8 md:p-12">
+            <p className="text-sm uppercase tracking-wider text-[#ea580c] mb-2">Imvelo Tips</p>
+            <h3 className="text-2xl font-bold text-[#2c331f] mb-2">Get early access to small batches</h3>
+            <p className="text-[#8b5a3c] mb-6">Subscribe for seasonal skincare tips, new product alerts, and exclusive offers from the workshop.</p>
+            {subscribed ? (
+              <p className="text-lg font-semibold text-[#6b8e23]">Siyabonga! You're on the list.</p>
+            ) : (
+              <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
+                <Input
+                  type="email"
+                  placeholder="Your email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  className="flex-1"
+                />
+                <Button type="submit" variant="default" className="whitespace-nowrap">
+                  Subscribe
+                  <ArrowRight className="w-4 h-4 ml-2" />
+                </Button>
+              </form>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}