Skip to content

Commit adcf1e2

Browse files
BhartiNagpureBhartiNagpure
authored
Merge branch 'main' into bharti
2 parents ef4a22f + aae7bc5 commit adcf1e2

File tree

6 files changed

+227
-7
lines changed

6 files changed

+227
-7
lines changed

‎public/check-markf.png‎

18.2 KB
Loading

‎src/components/Footer.jsx‎

Lines changed: 87 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
2-
31
import Image from "next/image";
42
import Link from "next/link";
53
import {
64
FaDiscord,
75
FaFacebookF,
6+
FaGithub,
87
FaInstagram,
98
FaLinkedinIn,
10-
FaTwitter,
9+
FaTwitter
1110
} from "react-icons/fa";
1211
import logo from "../../public/Images/logo.jpg";
1312

@@ -43,7 +42,91 @@ const Footer = () => {
4342
technology. We are an Open-source project available on{" "}
4443
<a href="https://github.com/devs-in-tech/DevsInTech" className="text-blue-500">GitHub</a>
4544
</p>
46-
45+
<ul className="mt-6 flex justify-center gap-6 md:justify-start md:gap-8">
46+
<li>
47+
<Link
48+
href="/"
49+
rel="noreferrer"
50+
target="_blank"
51+
className="text-black transition hover:text-gray-700/75 dark:text-white dark:hover:text-gray-100/90"
52+
>
53+
<FaFacebookF size={20} />
54+
</Link>
55+
</li>
56+
57+
<li>
58+
<Link
59+
href="https://twitter.com/devs_in_tech"
60+
aria-label="Visit us on Twitter"
61+
title="Twitter (External Link)"
62+
rel="noopener noreferrer"
63+
target="_blank"
64+
className="text-black transition hover:text-gray-700/75 dark:text-white dark:hover:text-gray-100/90"
65+
>
66+
<FaTwitter size={20} />
67+
</Link>
68+
</li>
69+
70+
{/* LinkedIn Icon */}
71+
72+
<li>
73+
<Link
74+
href="https://www.linkedin.com/company/devsintech-community/"
75+
target="_blank"
76+
aria-label="Visit us on Linkedin"
77+
title="Linkedin (External Link)"
78+
rel="noopener noreferrer"
79+
className="text-black transition hover:text-gray-700/75 dark:text-white dark:hover:text-gray-100/90"
80+
>
81+
<FaLinkedinIn size={20} />
82+
</Link>
83+
</li>
84+
85+
{/* Instagram icon */}
86+
87+
<li>
88+
<Link
89+
href="/"
90+
aria-label="Visit us on Instagram"
91+
title="Instagram (External Link)"
92+
rel="noopener noreferrer"
93+
target="_blank"
94+
className="text-black transition hover:text-gray-700/75 dark:text-white dark:hover:text-gray-100/90"
95+
>
96+
<FaInstagram size={20} />
97+
</Link>
98+
</li>
99+
100+
{/* Discord icon */}
101+
102+
<li>
103+
<Link
104+
href="https://discord.com/invite/g7FmxB9uZp"
105+
aria-label="Join with us on Discord"
106+
title="Discord (External Link)"
107+
rel="noopener noreferrer"
108+
target="_blank"
109+
className="text-black transition hover:text-gray-700/75 dark:text-white dark:hover:text-gray-100/90"
110+
>
111+
<FaDiscord size={20} />
112+
</Link>
113+
</li>
114+
115+
{/* GitHub icon */}
116+
117+
<li>
118+
<Link
119+
href="https://github.com/devs-in-tech/DevsInTech"
120+
aria-label="Join with us on GitHub"
121+
title="GitHub (External Link)"
122+
rel="noopener noreferrer"
123+
target="_blank"
124+
className="text-black transition hover:text-gray-700/75 dark:text-white dark:hover:text-gray-100/90"
125+
>
126+
<FaGithub size={20} />
127+
</Link>
128+
</li>
129+
</ul>
47130
</div>
48131

49132
{/* COLUMNS */}

‎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)