updated the email sending automation

client/src/app/(routes)/About/page.jsx

@@ -9,7 +9,7 @@ function page() {
         className="-top-45 left-5 sm:left-60 sm:-top-20"
         fill="white"
       />
-      <div className=" p-4 max-w-7xl  mx-auto relative z-10  w-full pt-20 md:pt-0">
+      <div className=" p-4 max-w-7xl  mx-auto relative z-10  w-full pt-20 md:pt-0 mt-10">
         <h1 className="text-4xl md:text-7xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 bg-opacity-50">
           ABOUT US 
         </h1>

client/src/components/Navbar.jsx

@@ -36,9 +36,14 @@ function Navbar({ className }) {
 
 
 
-        <Link href="/">
+
+
+          <Link href="/">
           <MenuItem setActive={setActive} active={active} item="Home" />
-        </Link>
+
+          </Link>
+
+
 
         <MenuItem setActive={setActive} active={active} item="Discover">
           <div className="text-sm grid grid-cols-1 md:grid-cols-2 gap-4 p-2">

client/src/components/ui/navbar-menu.jsx

@@ -0,0 +1,123 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import Image from "next/image";
+
+const transition = {
+  type: "spring",
+  mass: 0.5,
+  damping: 11.5,
+  stiffness: 100,
+  restDelta: 0.001,
+  restSpeed: 0.001,
+};
+
+export const MenuItem = ({
+  setActive,
+  active,
+  item,
+  children,
+}) => {
+  return (
+    <div onMouseEnter={() => setActive(item)} onClick={() => setActive(item)} className="relative">
+      <motion.p
+        transition={{ duration: 0.3 }}
+        className="cursor-pointer text-black hover:opacity-[0.9] dark:text-white"
+      >
+        <button>{item}</button>
+      </motion.p>
+      {active !== null && (
+        <motion.div
+          initial={{ opacity: 0, scale: 0.85, y: 10 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          transition={transition}
+        >
+          {active === item && children && (
+            <div className="absolute top-[calc(100%_+_1.2rem)] left-1/2 transform -translate-x-1/2 pt-4">
+              <motion.div
+                transition={transition}
+                layoutId="active"
+                className="bg-white dark:bg-[#050A0F] backdrop-blur-sm rounded-2xl overflow-hidden border border-black/[0.2] dark:border-white/[0.2] shadow-xl"
+              >
+                <motion.div layout className="w-max h-full p-4">
+                  {children}
+                </motion.div>
+              </motion.div>
+            </div>
+          )}
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+export const Menu = ({
+  setActive,
+  children,
+}) => {
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setActive(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setActive]);
+
+  return (
+    <div className="flex justify-center w-full">
+      <nav
+        ref={menuRef}
+        onMouseLeave={() => setActive(null)}
+        className="relative rounded-full border border-transparent dark:bg-[#050A0F] dark:border-white/[0.2] bg-white shadow-input flex justify-center space-x-4 px-10 py-6"
+      >
+        {children}
+      </nav>
+    </div>
+  );
+};
+
+export const ProductItem = ({
+  title,
+  description,
+  href,
+  src,
+  setActive
+}) => {
+  return (
+    <div >
+      <Link href={href} className="flex space-x-2">
+        <Image
+          src={src}
+          width={140}
+          height={70}
+          alt={title}
+          className="flex-shrink-0 rounded-md shadow-2xl"
+        />
+        <div>
+          <h4 className="text-xl font-bold mb-1 text-black dark:text-white">
+            {title}
+          </h4>
+          <p className="text-neutral-700 text-sm max-w-[10rem] dark:text-neutral-300">
+            {description}
+          </p>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export const HoveredLink = ({ children, ...rest }) => {
+  return (
+    <Link {...rest} className="text-neutral-700 dark:text-neutral-200 hover:text-black">
+      {children}
+    </Link>
+  );
+};

client/tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/(routes)/layout.jsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/(routes)/layout.jsx", "src/components/ui/navbar-menu.jsx"],
   "exclude": ["node_modules"]
 }

load_checker.sh

@@ -7,10 +7,14 @@ NEXT_URL="https://code-cell-website.vercel.app/"
 # Number of requests
 REQUESTS=1000
 # Number of concurrent users
+<<<<<<< HEAD
 CONCURRENCY=1000
+=======
+CONCURRENCY=100
+>>>>>>> d4ade32963d06325eb5181312d091f99b2352576
 
 echo "Testing Django App..."
 ab -n $REQUESTS -c $CONCURRENCY $DJANGO_URL
 
 echo "Testing Next.js App..."
-ab -n $REQUESTS -c $CONCURRENCY $NEXT_URL
+ab -n $REQUESTS -c $CONCURRENCY $NEXT_URL