Merge branch 'main' into Illaf2

Author: Susmita-Dey

README.md

@@ -48,6 +48,85 @@ DevsInTech offers a wide range of resources and opportunities for developers and
 
 [![Next.js](https://img.shields.io/badge/next.js-%2320232a.svg?style=for-the-badge&logo=next.js&logoColor=%2361DAFB)](https://nextjs.org/) [![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-%23326ce9.svg?style=for-the-badge&logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)
 
+## Getting Started 👩‍💻
+
+> ⚠️Prerequisites
+>
+> - Before getting into it, make sure you have [pnpm](https://nodejs.org/download) installed.
+
+
+### Let's jump right in🌟
+
+1. Fork the project
+2. Clone the project to run on your local machine using the following command:
+
+   ```sh
+   git clone https://github.com/<your_github_username>/DevsInTech.git
+   ```
+
+3. Get into the root directory
+
+   ```sh
+   cd DevsInTech
+   ```
+
+4. Install all dependencies by running
+
+   ```sh
+   pnpm install
+   ```
+
+5. Create your branch
+
+   ```sh
+   git checkout -b <your_branch_name>
+   ```
+
+6. Run and view the application on localhost
+
+   ```sh
+   pnpm run dev
+   ```
+
+7. Make your changes
+
+8. Stage your changes
+
+   ```sh
+   git add <filename>
+   ```
+
+9. Commit your changes
+
+   ```sh
+   git commit -m "<your-commit-message>"
+   ```
+
+10. Push your changes to your branch
+
+    ```sh
+    git push origin "<your_branch_name>"
+    ```
+
+11. Create a Pull Request.
+
+    > Click _compare across forks_ if you don't see your branch
+
+### Setup using Docker
+
+  * Enter the root directory
+
+    ```sh
+    docker build .
+
+    ```
+
+    
+    ```sh
+    docker run -p 3000:80 <Image>
+    ```
+
+    
 # Contribute
 
 We welcome contributions in our community. Learn how to start contributing, from installing the project on your device to submitting a pull request with our<Link href="https://github.com/devs-in-tech/DevsInTech/blob/main/CONTRIBUTING.md"> Contribution guide.<Link/>

public/check-markf.png

@@ -1,5 +1,3 @@
-
-
 import Image from "next/image";
 import Link from "next/link";
 import {

src/components/Footer.jsx

@@ -0,0 +1,106 @@
+import axios from "axios";
+import Image from "next/image";
+import { useState } from "react";
+
+export default function Letter() {
+  const [email, setEmail] = useState("");
+  const [subscriptionSuccess, setSubscriptionSuccess] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Make the POST request using Axios
+    axios
+      .post("/api/subscribes", { email })
+      .then((response) => {
+        // Handle the success response here
+        console.log(response.data);
+        setSubscriptionSuccess(true);
+      })
+      .catch((error) => {
+        // Handle the error here
+        console.error(error);
+      });
+  };
+
+  const handleEmailChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  return (
+    <section className="bg-black ">
+      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div className="mx-auto max-w-screen-md sm:text-center">
+          {subscriptionSuccess ? (
+            <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">
+              <div className="w-12 h-12 mb-2 animate-bounce">
+                <Image
+                  src="/check-markf.png"
+                  alt="Success Icon"
+                  width={68}
+                  height={68}
+                />
+              </div>
+              <span className="text-center text-3xl mt-2">
+                We&apos;ve sent a confirmation email
+                <br />
+                Click on the link to complete your subscription to this
+                newsletter.
+              </span>
+            </div>
+          ) : (
+            <>
+              <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">
+                Subscribe to our newsletter
+              </h2>
+              <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">
+                Read articles from DevsInTech Blogs directly inside your inbox.
+                Subscribe to the newsletter, and don&apos;t miss out.
+              </p>
+              <form action="#" onSubmit={handleSubmit}>
+                <div className="items-center mx-auto mb-3 space-y-4 max-w-screen-sm sm:flex sm:space-y-0">
+                  <div className="relative w-full">
+                    <label
+                      htmlFor="email"
+                      className="hidden mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                    >
+                      Email address
+                    </label>
+                    <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none ">
+                      <svg
+                        className="w-5 h-5 text-gray-500 dark:text-gray-400"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                      </svg>
+                    </div>
+                    <input
+                      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"
+                      placeholder="Enter your email"
+                      type="email"
+                      id="email"
+                      required=""
+                      value={email}
+                      onChange={handleEmailChange}
+                    />
+                  </div>
+                  <div>
+                    <button
+                      type="submit"
+                      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"
+                    >
+                      Subscribe
+                    </button>
+                  </div>
+                </div>
+              </form>
+            </>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Letter.jsx

@@ -2,7 +2,6 @@ import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import Logo from "../../public/logo2.png";
-// import Button from "./button";
 import HeaderSocialMedia from "./HeaderSocialMedia";
 
 const Navbar = () => {
@@ -12,25 +11,23 @@ const Navbar = () => {
     { name: "Events", link: "/events" },
     { name: "Team", link: "/team" },
     { name: "FAQs", link: "/#faqs" },
-    { name: "Contributors", link: "/Contributors" }
+    { name: "Contributors", link: "/Contributors" },
   ];
   let [open, setOpen] = useState(false);
   return (
-    <div className="w-full z-999 top-0 left-0 sticky bg-black">
+    <div className="w-full z-999 top-0 left-0 sticky bg-black bg-opacity-75 shadow-lg">
       <div className="md:flex md:items-center md:justify-between py-4 px-7">
-        <div
-          className="font-bold text-base cursor-pointer flex flex-col md:items-center font-secondary 
-      text-white"
-        >
+        <div className="font-bold text-base cursor-pointer flex flex-col md:items-center font-secondary text-white">
           <span>
             <Image className="h-14 w-14" src={Logo} alt="" />
           </span>
           DevsInTech
         </div>
 
         <ul
-          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]"
-            }`}
+          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]"
+          }`}
         >
           {Links.map((link) => (
             <li
@@ -40,11 +37,7 @@ const Navbar = () => {
             >
               <Link
                 href={link.link}
-                className="text-white font-3 hover:text-transparent bg-clip-text bg-gradient-to-r from-[#AF7AF2] via-[#A5F7A8] to-[#AF7AF2] duration-200
-               relative  transition-all duration-500 before:content-[''] before:absolute before:-bottom-2
-                before:left-0 before:w-0   before:h-1 before:opacity-0  before:transition-all before:duration-500
-                before:bg-gradient-to-r hover:before:w-full  hover:before:opacity-100
-                "
+                className="text-white font-3 hover:text-transparent bg-clip-text bg-gradient-to-r from-[#AF7AF2] via-[#A5F7A8] to-[#AF7AF2] duration-200 relative  transition-all duration-500 before:content-[''] before:absolute before:-bottom-2 before:left-0 before:w-0 before:h-1 before:opacity-0  before:transition-all before:duration-500 before:bg-gradient-to-r hover:before:w-full  hover:before:opacity-100"
               >
                 {link.name}
               </Link>
@@ -80,4 +73,3 @@ const Navbar = () => {
 };
 
 export default Navbar;
-

src/components/Navbar.jsx

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+export default async function handler(req, res) {
+  try {
+    const { email } = req.body;
+    const publicationId = process.env.NEXT_PUBLIC_PUBLICATION_ID;
+
+    // Make the API call to subscribe to the newsletter
+    const response = await axios.post(
+      "https://devsintech.hashnode.dev/api/newsletter/subscribe",
+      {
+        email,
+        publicationId,
+      }
+    );
+
+    // Handle the response from the API call
+    if (response.status === 200) {
+      res
+        .status(200)
+        .json({ message: "Subscribed to the newsletter successfully!" });
+    } else {
+      res.status(500).json({ error: "Error subscribing to the newsletter" });
+    }
+  } catch (error) {
+    res.status(500).json({ error: "Error subscribing to the newsletter" });
+  }
+}

src/pages/api/subscribes.js

@@ -2,6 +2,7 @@ import { AboutCommunity, HeroSection } from "@/components";
 import FaqAccordion from "@/components/FaqAccordion";
 import Footer from "@/components/Footer";
 import Cards from "@/components/HomePage/Events_Cards";
+import Letter from "@/components/Letter";
 import Navbar from "@/components/Navbar";
 import ScrollToTop from "@/components/ScrollToTop";
 import TestimonialCarousel from "@/components/testimonial";
@@ -36,6 +37,7 @@ const Home = () => {
           <Cards />
           <TestimonialCarousel />
           <FaqAccordion />
+          <Letter />
           <Footer />
         </>
       )}