Skip to content

Commit ef56939

Browse files
Susmita-DeySusmita-Dey
authored
Merge pull request #367 from Nishitbaria/main
 Added Newsletter Subscription to DevsInTech Website
2 parents cae2ca1 + 2e1317f commit ef56939

File tree

6 files changed

+140
-5
lines changed

6 files changed

+140
-5
lines changed

‎public/check-markf.png‎

18.2 KB
Loading

‎src/components/Footer.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
2-
31
import Image from "next/image";
42
import Link from "next/link";
53
import {

‎src/components/Letter.jsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import axios from "axios";
2+
import Image from "next/image";
3+
import { useState } from "react";
4+
5+
export default function Letter() {
6+
const [email, setEmail] = useState("");
7+
const [subscriptionSuccess, setSubscriptionSuccess] = useState(false);
8+
9+
const handleSubmit = (e) => {
10+
e.preventDefault();
11+
12+
// Make the POST request using Axios
13+
axios
14+
.post("/api/subscribes", { email })
15+
.then((response) => {
16+
// Handle the success response here
17+
console.log(response.data);
18+
setSubscriptionSuccess(true);
19+
})
20+
.catch((error) => {
21+
// Handle the error here
22+
console.error(error);
23+
});
24+
};
25+
26+
const handleEmailChange = (e) => {
27+
setEmail(e.target.value);
28+
};
29+
30+
return (
31+
<section className="bg-black ">
32+
<div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
33+
<div className="mx-auto max-w-screen-md sm:text-center">
34+
{subscriptionSuccess ? (
35+
<div className="bg-black-500 text-white p-4 mb-4 rounded-lg flex flex-col items-center justify-center border-2 border-solid focus:border-primary-500 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
36+
<div className="w-12 h-12 mb-2 animate-bounce">
37+
<Image
38+
src="/check-markf.png"
39+
alt="Success Icon"
40+
width={68}
41+
height={68}
42+
/>
43+
</div>
44+
<span className="text-center text-3xl mt-2">
45+
We&apos;ve sent a confirmation email
46+
<br />
47+
Click on the link to complete your subscription to this
48+
newsletter.
49+
</span>
50+
</div>
51+
) : (
52+
<>
53+
<h2 className="sm:text-3xl md:text-4xl text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-green-400 to-purple-400">
54+
Subscribe to our newsletter
55+
</h2>
56+
<p className="mx-auto mb-8 mt-4 max-w-2xl font-secondary text-white-500 md:mb-12 sm:text-xl dark:text-white">
57+
Read articles from DevsInTech Blogs directly inside your inbox.
58+
Subscribe to the newsletter, and don&apos;t miss out.
59+
</p>
60+
<form action="#" onSubmit={handleSubmit}>
61+
<div className="items-center mx-auto mb-3 space-y-4 max-w-screen-sm sm:flex sm:space-y-0">
62+
<div className="relative w-full">
63+
<label
64+
htmlFor="email"
65+
className="hidden mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
66+
>
67+
Email address
68+
</label>
69+
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none ">
70+
<svg
71+
className="w-5 h-5 text-gray-500 dark:text-gray-400"
72+
fill="currentColor"
73+
viewBox="0 0 20 20"
74+
xmlns="http://www.w3.org/2000/svg"
75+
>
76+
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
77+
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
78+
</svg>
79+
</div>
80+
<input
81+
className="block p-3 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 sm:rounded-none sm:rounded-l-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
82+
placeholder="Enter your email"
83+
type="email"
84+
id="email"
85+
required=""
86+
value={email}
87+
onChange={handleEmailChange}
88+
/>
89+
</div>
90+
<div>
91+
<button
92+
type="submit"
93+
className="py-3 px-5 w-full text-sm font-medium text-center text-white rounded-lg border cursor-pointer bg-primary-700 border-primary-600 sm:rounded-none sm:rounded-r-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 bg-gradient-to-r from-indigo-800 to-purple-500"
94+
>
95+
Subscribe
96+
</button>
97+
</div>
98+
</div>
99+
</form>
100+
</>
101+
)}
102+
</div>
103+
</div>
104+
</section>
105+
);
106+
}

‎src/components/Navbar.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Navbar = () => {
1111
{ name: "Events", link: "/events" },
1212
{ name: "Team", link: "/team" },
1313
{ name: "FAQs", link: "/#faqs" },
14-
{ name: "Contributors", link: "/Contributors" }
14+
{ name: "Contributors", link: "/Contributors" },
1515
];
1616
let [open, setOpen] = useState(false);
1717
return (
@@ -25,8 +25,9 @@ const Navbar = () => {
2525
</div>
2626

2727
<ul
28-
className={`md:flex md:items-center md:pb-0 px-20 md:px-0 pb-12 md:justify-center absolute md:static md:z-auto left-0 w-full transition-all duration-500 ease-in ${open ? "top-24 bg-black" : "top-[-550px]"
29-
}`}
28+
className={`md:flex md:items-center md:pb-0 px-20 md:px-0 pb-12 md:justify-center absolute md:static md:z-auto left-0 w-full transition-all duration-500 ease-in ${
29+
open ? "top-24 bg-black" : "top-[-550px]"
30+
}`}
3031
>
3132
{Links.map((link) => (
3233
<li

‎src/pages/api/subscribes.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import axios from "axios";
2+
3+
export default async function handler(req, res) {
4+
try {
5+
const { email } = req.body;
6+
const publicationId = process.env.NEXT_PUBLIC_PUBLICATION_ID;
7+
8+
// Make the API call to subscribe to the newsletter
9+
const response = await axios.post(
10+
"https://devsintech.hashnode.dev/api/newsletter/subscribe",
11+
{
12+
email,
13+
publicationId,
14+
}
15+
);
16+
17+
// Handle the response from the API call
18+
if (response.status === 200) {
19+
res
20+
.status(200)
21+
.json({ message: "Subscribed to the newsletter successfully!" });
22+
} else {
23+
res.status(500).json({ error: "Error subscribing to the newsletter" });
24+
}
25+
} catch (error) {
26+
res.status(500).json({ error: "Error subscribing to the newsletter" });
27+
}
28+
}

‎src/pages/home/index.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { AboutCommunity, HeroSection } from "@/components";
22
import FaqAccordion from "@/components/FaqAccordion";
33
import Footer from "@/components/Footer";
44
import Cards from "@/components/HomePage/Events_Cards";
5+
import Letter from "@/components/Letter";
56
import Navbar from "@/components/Navbar";
67
import ScrollToTop from "@/components/ScrollToTop";
78
import TestimonialCarousel from "@/components/testimonial";
@@ -36,6 +37,7 @@ const Home = () => {
3637
<Cards />
3738
<TestimonialCarousel />
3839
<FaqAccordion />
40+
<Letter />
3941
<Footer />
4042
</>
4143
)}

0 commit comments

Comments
 (0)