From dee7024cb6d3c3c5d66014306bb9883b3de01634 Mon Sep 17 00:00:00 2001
From: Akshay <akshay.allen26200@gmail.com>
Date: Sat, 1 Nov 2025 14:34:08 +0530
Subject: [PATCH] feat(newsletter): Add comprehensive newsletter management
 system

- Implement admin newsletter page with subscriber management
- Create API routes for newsletter subscribers and sending
- Add unsubscribe page for newsletter management
- Implement subscriber statistics and export functionality
- Add tabs for subscribers list and newsletter sending
- Include error handling and loading states
- Enhance footer with newsletter-related components
---
 app/admin/newsletter/page.tsx                 | 271 ++++++++++++++++++
 app/api/admin/newsletter/send/route.ts        | 210 ++++++++++++++
 app/api/admin/newsletter/subscribers/route.ts |  60 ++++
 app/api/newsletter/route.ts                   |  99 +++++++
 app/api/newsletter/unsubscribe/route.ts       |  43 +++
 app/newsletter/unsubscribe/page.tsx           |  98 +++++++
 components/footer.tsx                         |  95 +++++-
 7 files changed, 862 insertions(+), 14 deletions(-)
 create mode 100644 app/admin/newsletter/page.tsx
 create mode 100644 app/api/admin/newsletter/send/route.ts
 create mode 100644 app/api/admin/newsletter/subscribers/route.ts
 create mode 100644 app/api/newsletter/route.ts
 create mode 100644 app/api/newsletter/unsubscribe/route.ts
 create mode 100644 app/newsletter/unsubscribe/page.tsx

diff --git a/app/admin/newsletter/page.tsx b/app/admin/newsletter/page.tsx
new file mode 100644
index 00000000..6b78b709
--- /dev/null
+++ b/app/admin/newsletter/page.tsx
@@ -0,0 +1,271 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Download, Send, Loader2, Users, Mail } from "lucide-react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+interface Subscriber {
+  id: number
+  email: string
+  status: string
+  created_at: string
+}
+
+export default function NewsletterAdminPage() {
+  const [subscribers, setSubscribers] = useState<Subscriber[]>([])
+  const [loading, setLoading] = useState(true)
+  const [stats, setStats] = useState({ total: 0, subscribed: 0, unsubscribed: 0 })
+  const [error, setError] = useState("")
+  
+  // Newsletter sending state
+  const [subject, setSubject] = useState("")
+  const [content, setContent] = useState("")
+  const [sending, setSending] = useState(false)
+
+  useEffect(() => {
+    fetchSubscribers()
+  }, [])
+
+  const fetchSubscribers = async () => {
+    try {
+      const response = await fetch("/api/admin/newsletter/subscribers")
+      const data = await response.json()
+      
+      if (response.ok) {
+        setSubscribers(data.subscribers || [])
+        setStats(data.stats || { total: 0, subscribed: 0, unsubscribed: 0 })
+      } else {
+        setError(data.error || "Failed to fetch subscribers")
+        console.error("API Error:", data)
+      }
+    } catch (err) {
+      console.error("Failed to fetch subscribers:", err)
+      setError("Network error - check console")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const exportSubscribers = () => {
+    const csv = [
+      ["Email", "Status", "Subscribed Date"],
+      ...subscribers.map(sub => [
+        sub.email,
+        sub.status,
+        new Date(sub.created_at).toLocaleDateString()
+      ])
+    ].map(row => row.join(",")).join("\n")
+
+    const blob = new Blob([csv], { type: "text/csv" })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = `newsletter-subscribers-${new Date().toISOString().split("T")[0]}.csv`
+    a.click()
+  }
+
+  const sendNewsletter = async () => {
+    if (!subject || !content) {
+      alert("Please fill in both subject and content")
+      return
+    }
+
+    if (!confirm(`Send newsletter to ${stats.subscribed} subscribers?`)) {
+      return
+    }
+
+    setSending(true)
+    try {
+      const response = await fetch("/api/admin/newsletter/send", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ subject, content }),
+      })
+
+      const data = await response.json()
+
+      if (response.ok) {
+        alert(`Newsletter sent successfully to ${data.sent} subscribers!`)
+        setSubject("")
+        setContent("")
+      } else {
+        alert(`Failed to send newsletter: ${data.error}`)
+      }
+    } catch {
+      alert("Failed to send newsletter")
+    } finally {
+      setSending(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="bg-red-500/10 border border-red-500 rounded-lg p-6 max-w-md">
+          <h2 className="text-xl font-bold text-red-500 mb-2">Error Loading Subscribers</h2>
+          <p className="text-foreground/70">{error}</p>
+          <p className="text-sm text-foreground/50 mt-4">
+            Make sure you're logged in as an admin and RLS policies are configured correctly.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto p-6 max-w-6xl">
+      <div className="space-y-6">
+        <div>
+          <h1 className="text-3xl font-bold">Newsletter Management</h1>
+          <p className="text-foreground/70">Manage subscribers and send newsletters</p>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="bg-card border border-border rounded-lg p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-foreground/70">Total Subscribers</p>
+                <p className="text-3xl font-bold">{stats.total}</p>
+              </div>
+              <Users className="h-8 w-8 text-primary" />
+            </div>
+          </div>
+          <div className="bg-card border border-border rounded-lg p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-foreground/70">Active</p>
+                <p className="text-3xl font-bold text-green-500">{stats.subscribed}</p>
+              </div>
+              <Mail className="h-8 w-8 text-green-500" />
+            </div>
+          </div>
+          <div className="bg-card border border-border rounded-lg p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-foreground/70">Unsubscribed</p>
+                <p className="text-3xl font-bold text-red-500">{stats.unsubscribed}</p>
+              </div>
+              <Mail className="h-8 w-8 text-red-500" />
+            </div>
+          </div>
+        </div>
+
+        <Tabs defaultValue="subscribers" className="w-full">
+          <TabsList>
+            <TabsTrigger value="subscribers">Subscribers</TabsTrigger>
+            <TabsTrigger value="send">Send Newsletter</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="subscribers" className="space-y-4">
+            <div className="flex justify-between items-center">
+              <h2 className="text-xl font-semibold">All Subscribers</h2>
+              <Button onClick={exportSubscribers} variant="outline">
+                <Download className="h-4 w-4 mr-2" />
+                Export CSV
+              </Button>
+            </div>
+
+            <div className="bg-card border border-border rounded-lg overflow-hidden">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-muted">
+                    <tr>
+                      <th className="text-left p-4">Email</th>
+                      <th className="text-left p-4">Status</th>
+                      <th className="text-left p-4">Subscribed Date</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {subscribers.map((sub) => (
+                      <tr key={sub.id} className="border-t border-border">
+                        <td className="p-4">{sub.email}</td>
+                        <td className="p-4">
+                          <span className={`px-2 py-1 rounded text-xs ${
+                            sub.status === "subscribed" 
+                              ? "bg-green-500/20 text-green-500" 
+                              : "bg-red-500/20 text-red-500"
+                          }`}>
+                            {sub.status}
+                          </span>
+                        </td>
+                        <td className="p-4">
+                          {new Date(sub.created_at).toLocaleDateString()}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="send" className="space-y-4">
+            <div className="bg-card border border-border rounded-lg p-6 space-y-4">
+              <h2 className="text-xl font-semibold">Compose Newsletter</h2>
+              
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Subject</label>
+                <Input
+                  placeholder="Newsletter subject..."
+                  value={subject}
+                  onChange={(e) => setSubject(e.target.value)}
+                  disabled={sending}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Content (HTML supported)</label>
+                <textarea
+                  className="w-full min-h-[300px] p-3 rounded-md border border-border bg-background font-mono text-sm"
+                  placeholder={`<h2 style="color: #667eea; margin-top: 0;">Welcome to Our Newsletter!</h2>
+<p>Here's what's new this week:</p>
+<ul style="line-height: 1.8;">
+  <li><strong>New Feature:</strong> Description here</li>
+  <li><strong>Upcoming Event:</strong> Details here</li>
+  <li><strong>Community Highlight:</strong> Share achievements</li>
+</ul>
+<p>Stay tuned for more updates!</p>`}
+                  value={content}
+                  onChange={(e) => setContent(e.target.value)}
+                  disabled={sending}
+                />
+                <p className="text-xs text-foreground/60">
+                  💡 Tip: Use HTML for formatting. The template includes a beautiful header, footer, and social links automatically.
+                </p>
+              </div>
+
+              <Button 
+                onClick={sendNewsletter} 
+                disabled={sending || !subject || !content}
+                className="w-full"
+              >
+                {sending ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <Send className="h-4 w-4 mr-2" />
+                    Send to {stats.subscribed} Subscribers
+                  </>
+                )}
+              </Button>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
diff --git a/app/api/admin/newsletter/send/route.ts b/app/api/admin/newsletter/send/route.ts
new file mode 100644
index 00000000..6f7dce6a
--- /dev/null
+++ b/app/api/admin/newsletter/send/route.ts
@@ -0,0 +1,210 @@
+import { NextRequest, NextResponse } from "next/server"
+import { createClient } from "@/lib/supabase/server"
+import { Resend } from "resend"
+
+const resend = new Resend(process.env.RESEND_API_KEY)
+
+export async function POST(request: NextRequest) {
+  try {
+    const { subject, content } = await request.json()
+
+    if (!subject || !content) {
+      return NextResponse.json(
+        { error: "Subject and content are required" },
+        { status: 400 }
+      )
+    }
+
+    const supabase = await createClient()
+
+    // Check if user is admin
+    const { data: { user } } = await supabase.auth.getUser()
+    
+    if (!user) {
+      return NextResponse.json(
+        { error: "Unauthorized" },
+        { status: 401 }
+      )
+    }
+
+    const { data: profile } = await supabase
+      .from("profiles")
+      .select("is_admin")
+      .eq("id", user.id)
+      .single()
+
+    if (!profile?.is_admin) {
+      return NextResponse.json(
+        { error: "Forbidden - Admin access required" },
+        { status: 403 }
+      )
+    }
+
+    // Fetch active subscribers
+    const { data: subscribers, error } = await supabase
+      .from("newsletter_subscriptions")
+      .select("email, unsubscribe_token")
+      .eq("status", "subscribed")
+
+    if (error || !subscribers) {
+      console.error("Fetch subscribers error:", error)
+      return NextResponse.json(
+        { error: "Failed to fetch subscribers" },
+        { status: 500 }
+      )
+    }
+
+    if (subscribers.length === 0) {
+      return NextResponse.json(
+        { error: "No active subscribers found" },
+        { status: 400 }
+      )
+    }
+
+    // Send emails in batches
+    const batchSize = 50
+    let sentCount = 0
+    const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://codeunia.com"
+
+    for (let i = 0; i < subscribers.length; i += batchSize) {
+      const batch = subscribers.slice(i, i + batchSize)
+      
+      const emailPromises = batch.map(async (subscriber) => {
+        const unsubscribeUrl = `${siteUrl}/newsletter/unsubscribe?token=${subscriber.unsubscribe_token}`
+        
+        const htmlContent = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${subject}</title>
+</head>
+<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f5f5f5;">
+  <table role="presentation" style="width: 100%; border-collapse: collapse;">
+    <tr>
+      <td align="center" style="padding: 40px 20px;">
+        <table role="presentation" style="max-width: 600px; width: 100%; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden;">
+          
+          <!-- Header -->
+          <tr>
+            <td style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
+              <h1 style="margin: 0; color: #ffffff; font-size: 28px; font-weight: bold; letter-spacing: -0.5px;">
+                Codeunia
+              </h1>
+              <p style="margin: 10px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 14px;">
+                Empowering the next generation of coders
+              </p>
+            </td>
+          </tr>
+          
+          <!-- Content -->
+          <tr>
+            <td style="padding: 40px 30px; color: #333333; font-size: 16px; line-height: 1.6;">
+              ${content}
+            </td>
+          </tr>
+          
+          <!-- CTA Section (Optional) -->
+          <tr>
+            <td style="padding: 0 30px 40px; text-align: center;">
+              <a href="${siteUrl}" style="display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);">
+                Visit Codeunia
+              </a>
+            </td>
+          </tr>
+          
+          <!-- Social Links -->
+          <tr>
+            <td style="padding: 30px; background-color: #f9fafb; text-align: center; border-top: 1px solid #e5e7eb;">
+              <p style="margin: 0 0 15px; color: #6b7280; font-size: 14px; font-weight: 600;">
+                Connect with us
+              </p>
+              <table role="presentation" style="margin: 0 auto;">
+                <tr>
+                  <td style="padding: 0 8px;">
+                    <a href="https://github.com/Codeunia" style="display: inline-block; width: 36px; height: 36px; background-color: #24292e; border-radius: 50%; text-align: center; line-height: 36px; text-decoration: none;">
+                      <span style="color: #ffffff; font-size: 18px;">G</span>
+                    </a>
+                  </td>
+                  <td style="padding: 0 8px;">
+                    <a href="https://x.com/codeunia" style="display: inline-block; width: 36px; height: 36px; background-color: #1DA1F2; border-radius: 50%; text-align: center; line-height: 36px; text-decoration: none;">
+                      <span style="color: #ffffff; font-size: 18px;">𝕏</span>
+                    </a>
+                  </td>
+                  <td style="padding: 0 8px;">
+                    <a href="https://www.linkedin.com/company/codeunia" style="display: inline-block; width: 36px; height: 36px; background-color: #0077b5; border-radius: 50%; text-align: center; line-height: 36px; text-decoration: none;">
+                      <span style="color: #ffffff; font-size: 18px;">in</span>
+                    </a>
+                  </td>
+                  <td style="padding: 0 8px;">
+                    <a href="https://www.instagram.com/codeunia" style="display: inline-block; width: 36px; height: 36px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-radius: 50%; text-align: center; line-height: 36px; text-decoration: none;">
+                      <span style="color: #ffffff; font-size: 18px;">📷</span>
+                    </a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          
+          <!-- Footer -->
+          <tr>
+            <td style="padding: 30px; background-color: #f9fafb; text-align: center; border-top: 1px solid #e5e7eb;">
+              <p style="margin: 0 0 10px; color: #6b7280; font-size: 13px; line-height: 1.5;">
+                You're receiving this email because you subscribed to Codeunia newsletter.
+              </p>
+              <p style="margin: 0; font-size: 13px;">
+                <a href="${unsubscribeUrl}" style="color: #9ca3af; text-decoration: underline;">Unsubscribe</a>
+                <span style="color: #d1d5db; margin: 0 8px;">|</span>
+                <a href="${siteUrl}/contact" style="color: #9ca3af; text-decoration: underline;">Contact Us</a>
+              </p>
+              <p style="margin: 15px 0 0; color: #9ca3af; font-size: 12px;">
+                © ${new Date().getFullYear()} Codeunia. All rights reserved.
+              </p>
+            </td>
+          </tr>
+          
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
+        `
+
+        try {
+          await resend.emails.send({
+            from: "Codeunia <newsletter@codeunia.com>",
+            to: subscriber.email,
+            subject: subject,
+            html: htmlContent,
+          })
+          return true
+        } catch (error) {
+          console.error(`Failed to send to ${subscriber.email}:`, error)
+          return false
+        }
+      })
+
+      const results = await Promise.all(emailPromises)
+      sentCount += results.filter(Boolean).length
+
+      // Small delay between batches to avoid rate limits
+      if (i + batchSize < subscribers.length) {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
+    }
+
+    return NextResponse.json({
+      message: "Newsletter sent successfully",
+      sent: sentCount,
+      total: subscribers.length,
+    })
+  } catch (error) {
+    console.error("Send newsletter error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}
diff --git a/app/api/admin/newsletter/subscribers/route.ts b/app/api/admin/newsletter/subscribers/route.ts
new file mode 100644
index 00000000..e518ccbc
--- /dev/null
+++ b/app/api/admin/newsletter/subscribers/route.ts
@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server"
+import { createClient } from "@/lib/supabase/server"
+
+export async function GET() {
+  try {
+    const supabase = await createClient()
+
+    // Check if user is admin
+    const { data: { user } } = await supabase.auth.getUser()
+    
+    if (!user) {
+      return NextResponse.json(
+        { error: "Unauthorized" },
+        { status: 401 }
+      )
+    }
+
+    const { data: profile } = await supabase
+      .from("profiles")
+      .select("is_admin")
+      .eq("id", user.id)
+      .single()
+
+    if (!profile?.is_admin) {
+      return NextResponse.json(
+        { error: "Forbidden - Admin access required" },
+        { status: 403 }
+      )
+    }
+
+    // Fetch all subscribers
+    const { data: subscribers, error } = await supabase
+      .from("newsletter_subscriptions")
+      .select("*")
+      .order("created_at", { ascending: false })
+
+    if (error) {
+      console.error("Fetch subscribers error:", error)
+      return NextResponse.json(
+        { error: "Failed to fetch subscribers" },
+        { status: 500 }
+      )
+    }
+
+    // Calculate stats
+    const stats = {
+      total: subscribers.length,
+      subscribed: subscribers.filter(s => s.status === "subscribed").length,
+      unsubscribed: subscribers.filter(s => s.status === "unsubscribed").length,
+    }
+
+    return NextResponse.json({ subscribers, stats })
+  } catch (error) {
+    console.error("Newsletter subscribers error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}
diff --git a/app/api/newsletter/route.ts b/app/api/newsletter/route.ts
new file mode 100644
index 00000000..9163a51f
--- /dev/null
+++ b/app/api/newsletter/route.ts
@@ -0,0 +1,99 @@
+import { NextRequest, NextResponse } from "next/server"
+import { createClient } from "@/lib/supabase/server"
+
+export async function POST(request: NextRequest) {
+  try {
+    const { email } = await request.json()
+
+    // Validate email
+    if (!email || typeof email !== "string") {
+      return NextResponse.json(
+        { error: "Email is required" },
+        { status: 400 }
+      )
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    if (!emailRegex.test(email)) {
+      return NextResponse.json(
+        { error: "Invalid email format" },
+        { status: 400 }
+      )
+    }
+
+    const supabase = await createClient()
+
+    // Check if email already exists
+    const { data: existingSubscriber, error: checkError } = await supabase
+      .from("newsletter_subscriptions")
+      .select("email, status")
+      .eq("email", email.toLowerCase())
+      .single()
+
+    if (checkError && checkError.code !== "PGRST116") {
+      console.error("Database check error:", checkError)
+      return NextResponse.json(
+        { error: "Failed to process subscription" },
+        { status: 500 }
+      )
+    }
+
+    // If subscriber exists
+    if (existingSubscriber) {
+      if (existingSubscriber.status === "subscribed") {
+        return NextResponse.json(
+          { error: "This email is already subscribed" },
+          { status: 409 }
+        )
+      } else {
+        // Resubscribe
+        const { error: updateError } = await supabase
+          .from("newsletter_subscriptions")
+          .update({ 
+            status: "subscribed"
+          })
+          .eq("email", email.toLowerCase())
+
+        if (updateError) {
+          console.error("Resubscribe error:", updateError)
+          return NextResponse.json(
+            { error: "Failed to resubscribe" },
+            { status: 500 }
+          )
+        }
+
+        return NextResponse.json(
+          { message: "Successfully resubscribed to newsletter!" },
+          { status: 200 }
+        )
+      }
+    }
+
+    // Add new subscriber
+    const { error: insertError } = await supabase
+      .from("newsletter_subscriptions")
+      .insert({
+        email: email.toLowerCase(),
+        status: "subscribed",
+      })
+
+    if (insertError) {
+      console.error("Insert error:", insertError)
+      return NextResponse.json(
+        { error: "Failed to subscribe" },
+        { status: 500 }
+      )
+    }
+
+    return NextResponse.json(
+      { message: "Successfully subscribed to newsletter!" },
+      { status: 201 }
+    )
+  } catch (error) {
+    console.error("Newsletter subscription error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}
diff --git a/app/api/newsletter/unsubscribe/route.ts b/app/api/newsletter/unsubscribe/route.ts
new file mode 100644
index 00000000..eb34d90b
--- /dev/null
+++ b/app/api/newsletter/unsubscribe/route.ts
@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server"
+import { createClient } from "@/lib/supabase/server"
+
+export async function POST(request: NextRequest) {
+  try {
+    const { token } = await request.json()
+
+    if (!token) {
+      return NextResponse.json(
+        { error: "Unsubscribe token is required" },
+        { status: 400 }
+      )
+    }
+
+    const supabase = await createClient()
+
+    const { data, error } = await supabase
+      .from("newsletter_subscriptions")
+      .update({ status: "unsubscribed" })
+      .eq("unsubscribe_token", token)
+      .eq("status", "subscribed")
+      .select()
+      .single()
+
+    if (error || !data) {
+      return NextResponse.json(
+        { error: "Invalid or already used unsubscribe link" },
+        { status: 404 }
+      )
+    }
+
+    return NextResponse.json(
+      { message: "Successfully unsubscribed from newsletter" },
+      { status: 200 }
+    )
+  } catch (error) {
+    console.error("Unsubscribe error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}
diff --git a/app/newsletter/unsubscribe/page.tsx b/app/newsletter/unsubscribe/page.tsx
new file mode 100644
index 00000000..97382dd6
--- /dev/null
+++ b/app/newsletter/unsubscribe/page.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import { useEffect, useState, Suspense } from "react"
+import { useSearchParams } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { CheckCircle2, XCircle, Loader2 } from "lucide-react"
+import Link from "next/link"
+
+function UnsubscribeContent() {
+  const searchParams = useSearchParams()
+  const token = searchParams.get("token")
+  const [status, setStatus] = useState<"loading" | "success" | "error">("loading")
+  const [message, setMessage] = useState("")
+
+  useEffect(() => {
+    if (!token) {
+      setStatus("error")
+      setMessage("Invalid unsubscribe link")
+      return
+    }
+
+    const unsubscribe = async () => {
+      try {
+        const response = await fetch("/api/newsletter/unsubscribe", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token }),
+        })
+
+        const data = await response.json()
+
+        if (response.ok) {
+          setStatus("success")
+          setMessage(data.message)
+        } else {
+          setStatus("error")
+          setMessage(data.error)
+        }
+      } catch {
+        setStatus("error")
+        setMessage("Failed to unsubscribe. Please try again.")
+      }
+    }
+
+    unsubscribe()
+  }, [token])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-background to-background/95 p-4">
+      <div className="max-w-md w-full bg-card border border-border rounded-lg p-8 text-center space-y-6">
+        {status === "loading" && (
+          <>
+            <Loader2 className="h-16 w-16 animate-spin mx-auto text-primary" />
+            <h1 className="text-2xl font-bold">Processing...</h1>
+            <p className="text-foreground/70">Please wait while we unsubscribe you</p>
+          </>
+        )}
+
+        {status === "success" && (
+          <>
+            <CheckCircle2 className="h-16 w-16 mx-auto text-green-500" />
+            <h1 className="text-2xl font-bold">Unsubscribed Successfully</h1>
+            <p className="text-foreground/70">{message}</p>
+            <p className="text-sm text-foreground/60">
+              You will no longer receive newsletter emails from Codeunia.
+            </p>
+            <Link href="/">
+              <Button className="w-full">Return to Homepage</Button>
+            </Link>
+          </>
+        )}
+
+        {status === "error" && (
+          <>
+            <XCircle className="h-16 w-16 mx-auto text-red-500" />
+            <h1 className="text-2xl font-bold">Unsubscribe Failed</h1>
+            <p className="text-foreground/70">{message}</p>
+            <Link href="/contact">
+              <Button variant="outline" className="w-full">Contact Support</Button>
+            </Link>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default function UnsubscribePage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen flex items-center justify-center">
+        <Loader2 className="h-16 w-16 animate-spin text-primary" />
+      </div>
+    }>
+      <UnsubscribeContent />
+    </Suspense>
+  )
+}
diff --git a/components/footer.tsx b/components/footer.tsx
index 291fae74..f5ee8337 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,15 +1,62 @@
+"use client"
+
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Github, Twitter, Linkedin, ArrowRight, Instagram } from "lucide-react"
+import { Github, Twitter, Linkedin, ArrowRight, Instagram, Loader2, CheckCircle2 } from "lucide-react"
 import CodeuniaLogo from "./codeunia-logo";
+import { useState, FormEvent } from "react"
 
 export default function Footer() {
+  const [email, setEmail] = useState("")
+  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+  const [message, setMessage] = useState("")
+
+  const handleNewsletterSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setStatus("error")
+      setMessage("Please enter a valid email address")
+      return
+    }
+
+    setStatus("loading")
+    setMessage("")
+
+    try {
+      const response = await fetch("/api/newsletter", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email }),
+      })
+
+      const data = await response.json()
+
+      if (response.ok) {
+        setStatus("success")
+        setMessage("Thanks for subscribing!")
+        setEmail("")
+        setTimeout(() => {
+          setStatus("idle")
+          setMessage("")
+        }, 5000)
+      } else {
+        setStatus("error")
+        setMessage(data.error || "Something went wrong. Please try again.")
+      }
+    } catch {
+      setStatus("error")
+      setMessage("Network error. Please try again.")
+    }
+  }
   return (
     <footer className="border-t border-border/40 bg-gradient-to-b from-background/95 via-background to-background/95">
       <div className="container px-4 pl-8 md:pl-12 py-16">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
-       {/* codeunia branding */}
+          {/* codeunia branding */}
           <div className="space-y-6">
             <CodeuniaLogo size="lg" showText={true} instanceId="footer" />
             <p className="text-foreground/80 leading-relaxed">
@@ -52,7 +99,7 @@ export default function Footer() {
             </div>
           </div>
 
-               {/* quick links of codeunia */}
+          {/* quick links of codeunia */}
           <div className="space-y-6">
             <h4 className="text-lg font-bold text-foreground">Quick Links</h4>
             <div className="space-y-3">
@@ -83,7 +130,7 @@ export default function Footer() {
             </div>
           </div>
 
-       {/* community section of codeunia */}
+          {/* community section of codeunia */}
           <div className="space-y-6">
             <h4 className="text-lg font-bold text-foreground">Community</h4>
             <div className="space-y-3">
@@ -128,21 +175,41 @@ export default function Footer() {
             <p className="text-foreground/80">
               Get the latest updates on events, new features, and community highlights.
             </p>
-            <div className="space-y-3">
+            <form onSubmit={handleNewsletterSubmit} className="space-y-3">
               <div className="flex space-x-2">
-                <Input 
-                  placeholder="Enter your email" 
-                  className="flex-1 bg-background/50 border-border/50 focus:border-primary/50" 
+                <Input
+                  type="email"
+                  placeholder="Enter your email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  disabled={status === "loading" || status === "success"}
+                  className="flex-1 bg-background/50 border-border/50 focus:border-primary/50"
+                  required
                 />
-                <Button 
-                  size="sm" 
-                  className="bg-primary/90 hover:bg-primary shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all"
+                <Button
+                  type="submit"
+                  size="sm"
+                  disabled={status === "loading" || status === "success"}
+                  className="bg-primary/90 hover:bg-primary shadow-lg hover:shadow-primary/20 hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  <ArrowRight className="h-4 w-4" />
+                  {status === "loading" ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : status === "success" ? (
+                    <CheckCircle2 className="h-4 w-4" />
+                  ) : (
+                    <ArrowRight className="h-4 w-4" />
+                  )}
                 </Button>
               </div>
-              <p className="text-xs text-foreground/70">Join 2,000+ developers in our newsletter</p>
-            </div>
+              {message && (
+                <p className={`text-xs ${status === "error" ? "text-red-500" : "text-green-500"}`}>
+                  {message}
+                </p>
+              )}
+              {!message && (
+                <p className="text-xs text-foreground/70">Join 2,000+ developers in our newsletter</p>
+              )}
+            </form>
           </div>
         </div>