Merge pull request #163 from haseebzaki-07/new_branch

Add Email for subscribing

.env.example

@@ -0,0 +1,2 @@
+SMTP_EMAIL=
+SMTP_PASSWORD=

package.json

@@ -34,6 +34,7 @@
     "lucide-react": "^0.452.0",
     "next": "14.2.13",
     "next-themes": "^0.3.0",
+    "nodemailer": "^6.9.15",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",

src/app/api/subscribe/route.js

@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import nodemailer from "nodemailer";
+
+const transporter = nodemailer.createTransport({
+  service: "gmail",
+  auth: {
+    user: process.env.SMTP_EMAIL,
+    pass: process.env.SMTP_PASSWORD,
+  },
+});
+
+export async function POST(req, res) {
+  const { email } = await req.json();
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(email)) {
+    return NextResponse.json({ message: "Invalid email format" });
+  }
+
+  try {
+    await transporter.sendMail({
+      from: process.env.SMTP_EMAIL,
+      to: email,
+      subject: "Thank you for subscribing gdg-website!",
+      html: `
+          <h1>Thank you for subscribing!</h1>
+          <p>We're glad to have you on board. Stay tuned for updates!</p>
+        `,
+    });
+
+    return NextResponse.json({ message: "Thank you for subscribing!" });
+  } catch (error) {
+    console.error("Error sending email:", error);
+    return NextResponse.json({ message: "Error sending email" });
+  }
+}

src/components/Global/Footer.jsx

@@ -1,4 +1,5 @@
-import React from "react";
+"use client"
+import React, { useState } from "react";
 import { FiMail } from "react-icons/fi";
 import { FaWhatsapp, FaInstagram as Instagram } from "react-icons/fa";
 import { FaLinkedin as Linkedin } from "react-icons/fa";
@@ -7,6 +8,31 @@ import { FaXTwitter } from "react-icons/fa6";
 import Link from "next/link";
 
 const Footer = () => {
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+
+      if (response.ok) {
+        setMessage('Thank you for subscribing!');
+      } else {
+        const data = await response.json();
+        setMessage(data.message || 'Subscription failed. Please try again.');
+      }
+    } catch (error) {
+      console.error('Subscription error:', error);
+      setMessage('An error occurred. Please try again later.');
+    }
+  };
+
   return (
     <footer className="bg-gradient-to-b from-blue-900 via-purple-900 to-gray-900 py-12 text-white">
       <div className="mx-auto w-full max-w-7xl px-6">
@@ -147,37 +173,45 @@ const Footer = () => {
                 Stay Updated
               </h2>
 
-              {/* Newsletter Form */}
-              <div className="flex justify-center w-full">
-                <div className="max-w-sm min-w-[200px] w-full">
-                  <div className="relative">
-                    <input
-                      type="text"
-                      className="w-full pl-3 pr-10 py-2 bg-white text-black placeholder:text-gray-400 text-sm border border-gray-400 rounded-md transition duration-300 ease focus:outline-none focus:border-gray-500 shadow-md"
-                      placeholder="[email protected]"
-                    />
-                    {/* SVG Icon */}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className="absolute w-5 h-5 top-2.5 right-3 text-gray-600"
-                    >
-                      <rect width="20" height="16" x="2" y="4" rx="2" />
-                      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
-                    </svg>
-                  </div>
-                </div>
-              </div>
+
+         {/* Newsletter Form */}
+         <div className="flex justify-center w-full">
+         <div className="max-w-sm min-w-[200px] w-full">
+      <form onSubmit={handleSubmit}>
+        <div className="relative">
+          <input
+            type="email"
+            className="w-full pl-3 pr-10 py-2 bg-transparent placeholder:text-slate-400 text-slate-600 text-sm border border-slate-200 rounded-md transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow"
+            placeholder="[email protected]"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+          <button type="submit" className="absolute inset-y-0 right-0 px-4">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="w-5 h-5 text-black"
+            >
+              <rect width="20" height="16" x="2" y="4" rx="2" />
+              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+            </svg>
+          </button>
+        </div>
+      </form>
+      {message && <p className="mt-2 text-sm text-green-600">{message}</p>}
+    </div>
+</div>
+{/* Social Links */}
+              <h2 className="text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wider mt-6 mb-2">
 
-              {/* Social Links */}
-              <h2 className="text-lg font-semibold uppercase tracking-wide mt-6 mb-2">
                 Socials
               </h2>
               <div className="flex gap-4">