src/pages/HomePage.tsx

@@ -12,7 +12,8 @@ import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
 
-import CertificationsSection from './HomePage/sections/Certifications';export default function HomePage(): React.JSX.Element {
+import CertificationsSection from './HomePage/sections/Certifications';
+import NewsletterSection from './HomePage/sections/Newsletter';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -27,6 +28,7 @@ import CertificationsSection from './HomePage/sections/Certifications';export de
   <FaqSection />
 
   <ContactSection />
+      <NewsletterSection />
     </>
   );
 }

src/pages/HomePage/sections/Newsletter.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { motion } from "motion/react";
+import Tag from "@/components/ui/Tag";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import Input from "@/components/ui/Input";
+import Button from "@/components/ui/Button";
+
+export default function NewsletterSection() {
+  const [email, setEmail] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Subscribed:", email);
+    setEmail("");
+  };
+
+  return (
+    <section data-webild-section="newsletter" id="newsletter" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto">
+        <ScrollReveal variant="fade">
+          <div className="card p-8 md:p-12 flex flex-col items-center text-center">
+            <Tag text="Newsletter" className="mb-6" />
+            <TextAnimation
+              text="Join the Exclusive Circle"
+              variant="fade-blur"
+              tag="h2"
+              className="text-3xl md:text-5xl font-bold text-foreground mb-4"
+              gradientText={false}
+            />
+            <p className="text-lg text-accent max-w-2xl mb-8">
+              Subscribe to receive early access to new collections, private sales, and insider news from Mukmhal.
+            </p>
+            <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-4 w-full max-w-md">
+              <Input
+                type="email"
+                placeholder="Enter your email address"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="flex-1"
+              />
+              <Button text="Subscribe" variant="primary" />
+            </form>
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+}