Merge branch 'main' into DEVSINTECH-246

Author: Susmita-Dey

src/components/HomePage/stats/index.jsx

@@ -1,36 +1,56 @@
 import React, { useState, useEffect } from 'react';
+import img from '../../../assets/Team/Developer.jpg';
+import Image from 'next/image';
 
 const Stats = ({ stats }) => {
   const [count, setCount] = useState(0);
 
   useEffect(() => {
     const interval = setInterval(() => {
       setCount((prevCount) => prevCount + 1);
-    }, 10); // Adjust the interval duration as needed
+    }, 10); 
 
     return () => {
       clearInterval(interval);
     };
   }, []);
 
   return (
-    <section className="text-gray-600 body-font">
-      <div className="container px-5 py-4 mx-auto">
-        <div className="flex flex-wrap -m-4 text-center">
-          {stats &&
-            stats.map((data, index) => {
-              return (
-                <div key={index} className="p-4 sm:w-1/3 w-full">
-                  <h2 className="title-font font-medium sm:text-4xl text-3xl text-transparent bg-clip-text bg-gradient-to-br from-[#FF008A] to-[#6100FF]">
-                    {count > data.number ? data.number : count}+
-                  </h2>
-                  <p className="leading-relaxed text-white mt-2">{data.name}</p>
-                </div>
-              );
-            })}
-        </div>
-      </div>
+    <section className='flex space-x-6 items-center justify-center'>
+      {
+        stats &&
+        stats.map((data, index) => {
+          return (
+            <div 
+            key={index}
+            className="block 
+            w-[24rem] 
+            h-[10rem] 
+            p-6 
+            bg-gradient-to-r from-indigo-800 to-purple-500 
+            border 
+            border-gray-200 
+            rounded-lg 
+            shadow 
+            hover:bg-[#6B3183] 
+            items-center 
+            justify-center 
+            text-center
+            hover:translate-y-2
+            transition-transform
+            mt-4
+            mb-4
+            ">
+              <h2 className="mb-2 text-5xl font-bold tracking-tight text-white dark:text-white text-center">
+              {count > data.number ? data.number : count}+
+              </h2>
+              <p className="font-bold text-gray-400 text-2xl mt-5 text-center">{data.name}</p>
+            </div>
+          )
+        })
+      }
     </section>
+
   );
 };
 

src/components/Navbar.jsx

@@ -40,7 +40,11 @@ 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"
+                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>

src/components/testimonial.js

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import Header from "./header";
-import Image from "next/image";
 
 const testimonials = [
   {
@@ -52,9 +51,7 @@ const Testimonial = ({ testimonial }) => (
     <p className="text-white">{testimonial.text}</p>
     <div className="flex items-center mt-4">
       <div className="flex-shrink-0">
-        <Image
-        width={0}
-        height={0}
+        <img
           className="w-12 h-12 rounded-full"
           src={testimonial.image}
           alt={testimonial.name}

src/pages/404.js

@@ -0,0 +1,24 @@
+import Link from "next/link";
+
+export default function custom404(){
+    return (
+        <div>
+            <div className="w-9/12 m-auto py-16 min-h-screen flex items-center justify-center">
+                <div className="shadow overflow-hidden sm:rounded-lg pb-8">
+                    <div className="border-t border-gray-200 text-center pt-8">
+                        <h1 className="text-9xl font-bold text-white">404</h1>
+                        <h1 className="text-6xl font-medium py-8 text-white">Oops! Page not found</h1>
+                        <p className="text-2xl pb-8 px-12 font-medium text-gray-300">
+                            Oops! The page you are looking for does not exist. It might have been moved or deleted.
+                            </p>
+                        <Link href="/" 
+                        className="bg-gradient-to-r from-purple-400 to-blue-500 hover:from-indigo-500 
+                        hover:to-purple-500 text-white font-semibold px-6 py-3 mt-5 rounded-md mr-6">
+                            Go to HOME
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

src/pages/home/index.jsx

@@ -4,6 +4,7 @@ import Footer from "@/components/Footer";
 import Cards from "@/components/HomePage/Events_Cards";
 import Navbar from "@/components/Navbar";
 import ScrollToTop from "@/components/ScrollToTop";
+import TestimonialCarousel from "@/components/testimonial";
 import { useEffect, useState } from "react";
 import HashLoader from "react-spinners/HashLoader";
 const Home = () => {
@@ -33,8 +34,11 @@ const Home = () => {
           <ScrollToTop />
           <AboutCommunity />
           <Cards />
+          <TestimonialCarousel />
           <FaqAccordion />
-          <Footer /></>)}
+          <Footer />
+        </>
+      )}
     </>
   );
 };