-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #163 from haseebzaki-07/new_branch
Add Email for subscribing
- Loading branch information
Showing
5 changed files
with
113 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
SMTP_EMAIL= | ||
SMTP_PASSWORD= |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" }); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"> | ||
|