"use client"; import React, { useState } from "react"; import { motion } from "framer-motion"; import { Mail, ArrowRight, CheckCircle2, XCircle } from "lucide-react"; interface SubscriptionState { status: "idle" | "loading" | "success" | "error"; message: string; } export function NewsletterBlockTwo() { const [email, setEmail] = useState(""); const [subscription, setSubscription] = useState({ status: "idle", message: "", }); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setSubscription({ status: "loading", message: "" }); // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1000)); if (email.includes("@")) { setSubscription({ status: "success", message: "Thank you for subscribing! Check your email to confirm.", }); setEmail(""); } else { setSubscription({ status: "error", message: "Please enter a valid email address.", }); } }; return (

{/* Background Elements */}

Stay in the loop

Get the latest updates, news, and exclusive offers delivered directly to your inbox.

setEmail(e.target.value)} placeholder="Enter your email" className="flex-1 bg-transparent px-6 py-4 text-foreground placeholder:text-muted-foreground focus:outline-none" disabled={subscription.status === "loading"} />

{/* Subscription Status */} {subscription.status === "loading" && ( )} {subscription.status === "success" && ( <> {subscription.message} )} {subscription.status === "error" && ( <> {subscription.message} )} {/* Trust Indicators */}

No spam, unsubscribe at any time

Join 10,000+ subscribers

Weekly newsletter with exclusive content

); }

Newsletter Component

Newsletter

Install Dependencies