about us and what we do

2026-01-17 22:46:46 +05:30
parent 9de3a22224
commit 051a0d0aea
14 changed files with 534 additions and 26 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
      "version": "0.1.0",
      "dependencies": {
        "@fontsource-variable/orbitron": "^5.2.8",
+        "@gsap/react": "^2.1.2",
+        "@lottiefiles/dotlottie-react": "^0.17.13",
        "@react-three/drei": "^10.7.6",
        "@react-three/fiber": "^9.3.0",
        "@react-three/postprocessing": "^3.0.4",
@@ -522,6 +524,16 @@
        "url": "https://github.com/sponsors/ayuhito"
      }
    },
+    "node_modules/@gsap/react": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.2.tgz",
+      "integrity": "sha512-JqliybO1837UcgH2hVOM4VO+38APk3ECNrsuSM4MuXp+rbf+/2IG2K1YJiqfTcXQHH7XlA0m3ykniFYstfq0Iw==",
+      "license": "SEE LICENSE AT https://gsap.com/standard-license",
+      "peerDependencies": {
+        "gsap": "^3.12.5",
+        "react": ">=17"
+      }
+    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1061,6 +1073,24 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@lottiefiles/dotlottie-react": {
+      "version": "0.17.13",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.17.13.tgz",
+      "integrity": "sha512-Ui8bqFlxqxLqB3G4bE9nsSw05lUn7eiZ24dSi/NVHFjTMAlb/JxdS8xWt1cdF2W1yJPNCeQuze6kkqNC5OMbJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lottiefiles/dotlottie-web": "0.61.0"
+      },
+      "peerDependencies": {
+        "react": "^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/@lottiefiles/dotlottie-web": {
+      "version": "0.61.0",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.61.0.tgz",
+      "integrity": "sha512-1QwcDchh/TXTvP9zXUHA5oJOdhEdUrn6U7gAiQ1AXEUrcK6PTU6v5D3byP76BK56fQjoY2WQ2A4pYDCCvoVRqw==",
+      "license": "MIT"
+    },
    "node_modules/@mediapipe/tasks-vision": {
      "version": "0.10.17",
      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
  },
  "dependencies": {
    "@fontsource-variable/orbitron": "^5.2.8",
+    "@gsap/react": "^2.1.2",
+    "@lottiefiles/dotlottie-react": "^0.17.13",
    "@react-three/drei": "^10.7.6",
    "@react-three/fiber": "^9.3.0",
    "@react-three/postprocessing": "^3.0.4",
--- a/src/app/components/AboutUs.jsx
+++ b/src/app/components/AboutUs.jsx
@@ -0,0 +1,169 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useRef, useEffect, useState } from "react";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+
+/* Glow */
+const Glow = ({ className = "" }) => (
+  <div
+    className={`pointer-events-none absolute inset-0 -z-10 opacity-60 blur-2xl 
+    [background:
+    radial-gradient(60%_60%_at_20%_0%,rgba(0,255,255,.15),transparent_60%),
+    radial-gradient(50%_50%_at_90%_20%,rgba(0,255,200,.12),transparent_60%),
+    radial-gradient(40%_40%_at_50%_120%,rgba(0,200,255,.1),transparent_60%)]
+    ${className}`}
+  />
+);
+
+/* Grid */
+function GridPattern() {
+  return (
+    <div className="absolute inset-0 pointer-events-none">
+      <svg className="w-full h-full opacity-30">
+        <defs>
+          <pattern
+            id="grid-about"
+            width="48"
+            height="48"
+            patternUnits="userSpaceOnUse"
+          >
+            <path
+              d="M 48 0 L 0 0 0 48"
+              fill="none"
+              stroke="#00ffee"
+              strokeWidth="0.6"
+            />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill="url(#grid-about)" />
+      </svg>
+    </div>
+  );
+}
+
+export default function AboutUs() {
+  const sectionRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => entry.isIntersecting && setVisible(true),
+      { threshold: 0.15 }
+    );
+
+    if (sectionRef.current) observer.observe(sectionRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section
+      ref={sectionRef}
+      id="about"
+      className="relative min-h-screen bg-[#03070d] py-28 overflow-hidden"
+    >
+      <GridPattern />
+      <Glow />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-6">
+
+        {/* TITLE */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={visible ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.7 }}
+          className="mb-20 text-center"
+        >
+          <h2
+            className="
+            flex justify-center items-center
+            mb-12 text-4xl md:text-6xl
+            font-extrabold tracking-widest
+            font-[Orbitron]
+            text-transparent bg-clip-text
+            bg-gradient-to-r from-green-400 via-cyan-400 to-teal-400
+            drop-shadow-[0_0_15px_rgba(16,185,129,0.5)]
+            "
+          >
+            AB
+
+            {/* LOTTIE O */}
+            <span
+              className="inline-block relative align-middle mx-[-0.15em]"
+              style={{ height: "1em", width: "1em" }}
+            >
+              <DotLottieReact
+                src="https://lottie.host/beca5865-363c-4433-bdf1-ddb5824f8f78/j0Jl3duHmb.lottie"
+                autoplay
+                loop
+              />
+            </span>
+
+            UT&nbsp;US
+          </h2>
+        </motion.div>
+
+        {/* ABOUT CARD */}
+        <motion.div
+          initial={{ opacity: 0, y: 40 }}
+          animate={visible ? { opacity: 1, y: 0 } : {}}
+          transition={{ delay: 0.15, duration: 0.7 }}
+          className="
+          group relative rounded-3xl border border-cyan-400/30
+          cursor-pointer overflow-hidden
+          backdrop-blur-xl p-10 md:p-16
+          shadow-[0_0_80px_rgba(0,255,255,.15)]
+          hover:shadow-[0_0_120px_rgba(0,255,255,.35)]
+          transition-all duration-500
+          bg-gradient-to-br from-[#021526] via-[#0b2c4d] to-[#1a3a5f]
+          "
+        >
+
+          {/* Glow on hover */}
+          <Glow className="opacity-40 group-hover:opacity-80 transition duration-500" />
+
+          {/* Corners */}
+          {["tl", "tr", "bl", "br"].map((p) => (
+            <div
+              key={p}
+              className={`absolute w-10 h-10 border-cyan-300/60
+              ${p === "tl" && "top-0 left-0 border-t border-l"}
+              ${p === "tr" && "top-0 right-0 border-t border-r"}
+              ${p === "bl" && "bottom-0 left-0 border-b border-l"}
+              ${p === "br" && "bottom-0 right-0 border-b border-r"}
+              `}
+            />
+          ))}
+
+          {/* TEXT */}
+          <p
+            className="
+            relative z-10 text-blue-200 leading-relaxed text-lg max-md:text-base
+            transition-all duration-500
+            group-hover:text-cyan-200
+            group-hover:drop-shadow-[0_0_10px_rgba(0,255,255,.4)]
+            "
+          >
+            The Machine Learning for Everyone (ML4E) Club at the National Institute
+            of Technology Rourkela is a dynamic and vibrant community dedicated to
+            fostering knowledge, innovation, and collaboration in the field of
+            machine learning and artificial intelligence. As one of the leading
+            technical clubs on campus, it serves as a hub for students passionate
+            about exploring the cutting-edge advancements in these transformative
+            technologies. The club envisions a future where machine learning is a
+            fundamental skill accessible to all, empowering students to solve
+            real-world problems and innovate across various domains. Membership is
+            open to all students of NIT Rourkela who have an interest in machine
+            learning and artificial intelligence. The club values enthusiasm,
+            curiosity, and a willingness to learn. By joining, members gain access
+            to a wealth of resources, including hackathons, project opportunities,
+            and a network of like-minded peers.
+          </p>
+
+        </motion.div>
+
+      </div>
+    </section>
+  );
+}
+
--- a/src/app/components/Home.jsx
+++ b/src/app/components/Home.jsx
@@ -535,7 +535,7 @@ export default function Home() {
 }

  return (
-    <div className="w-screen min-h-screen border-t border-cyan-500/20 bg-[#0b1117] overflow-y-auto">
+    <div className="relative w-full min-h-screen bg-[#0b1117] overflow-hidden" suppressHydrationWarning>
      <Navbar/>
      
      {/* Content Section */}
--- a/src/app/components/Navbar.jsx
+++ b/src/app/components/Navbar.jsx
@@ -67,13 +67,17 @@ export default function Navbar() {
      }
    };

+    const handleOpenNav = () => setIsOpen(true);
+
    if (typeof window !== "undefined") {
      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("open-navigation", handleOpenNav);
    }

    return () => {
      if (typeof window !== "undefined") {
        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("open-navigation", handleOpenNav);
      }
    };
  }, []);
--- a/src/app/components/WhatWeDo.tsx
+++ b/src/app/components/WhatWeDo.tsx
@@ -0,0 +1,236 @@
+"use client";
+import React, { useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { useGSAP } from "@gsap/react";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+
+gsap.registerPlugin(ScrollTrigger);
+
+const WhatWeDo = () => {
+  const container = useRef<HTMLElement>(null);
+  const blackLine = useRef<HTMLDivElement>(null);
+  const blackLine2 = useRef<HTMLDivElement>(null);
+  const blackLine3 = useRef<HTMLDivElement>(null);
+  const lottieRef1 = useRef<HTMLDivElement>(null);
+  const lottieRef2 = useRef<HTMLDivElement>(null);
+  const lottieRef3 = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      // Header Animation
+      gsap.from("#processhead", {
+        scale: 1.5,
+        scrollTrigger: {
+          trigger: "#processhead",
+          scrub: true,
+        },
+      });
+
+      // Lines Animation - Logic updated to use fromTo for robust animation
+      [blackLine, blackLine2, blackLine3].forEach((ref) => {
+        if (ref.current) {
+          gsap.fromTo(
+            ref.current,
+            { width: "0%" },
+            {
+              width: "100%",
+              scrollTrigger: {
+                trigger: ref.current,
+                scrub: true,
+                start: "top bottom",
+              },
+            }
+          );
+        }
+      });
+
+      // Lottie Scale Animation - Logic aligned with user's reference
+      [lottieRef1, lottieRef2, lottieRef3].forEach((ref) => {
+        if (ref.current) {
+          gsap.from(ref.current, {
+            scale: 0.1,
+            scrollTrigger: {
+              trigger: ref.current,
+              scrub: true,
+              start: "top bottom",
+            },
+          });
+        }
+      });
+
+      // Text Slide Animations - Logic aligned with user's reference
+      gsap.from("#textLeftFirst", {
+        x: -100,
+        scrollTrigger: {
+          trigger: "#textLeftFirst",
+          scrub: true,
+          start: "top bottom",
+        },
+      });
+
+      gsap.from("#textRight", {
+        x: 100,
+        scrollTrigger: {
+          trigger: "#textRight",
+          scrub: true,
+          start: "top bottom",
+        },
+      });
+
+      gsap.from("#textLeftSecond", {
+        x: -100,
+        scrollTrigger: {
+          trigger: "#textLeftSecond",
+          scrub: true,
+          start: "top bottom",
+        },
+      });
+    },
+    { scope: container }
+  );
+
+  return (
+    <section
+      ref={container}
+      className="w-full min-h-screen py-[180px] max-md:py-[80px] relative flex justify-center items-center flex-col overflow-x-hidden"
+    >
+      <div className="w-[1200px] max-lg:w-[90%] max-sm:w-[95%] flex flex-col gap-[64px] items-center">
+        {/* Heading */}
+        <h1
+          id="processhead"
+          className="
+    font-orbitron
+    text-[7vw] max-lg:text-[10vw] max-sm:text-[11vw]
+    font-black
+    leading-[100%]
+    text-center
+    bg-gradient-to-r from-blue-400 via-cyan-300 to-blue-600
+    bg-clip-text text-transparent
+    drop-shadow-[0_0_25px_rgba(0,200,255,0.6)]
+  "
+        >
+          WHAT WE DO
+        </h1>
+
+        {/* Steps */}
+        <div className="flex flex-col gap-[64px]">
+          {/* STEP 1 */}
+          <div className="flex max-md:flex-col-reverse items-center">
+            <div className="w-1/2 max-md:w-full flex flex-col gap-[28px]">
+              <div id="textLeftFirst" className="text-right text-white">
+                <h2 className="font-orbitron text-[36px] font-bold">Open Source</h2>
+                <p className="text-[20px] opacity-90">
+                  Collaborate globally and build real-world machine learning products with developers and researchers.
+                  Work on scalable systems, AI tools, and community-driven innovations used worldwide.
+                  Leave your mark on open-source while accelerating your growth as a machine learning engineer.
+                </p>
+              </div>
+
+              <div className="h-[30px] bg-white rounded-full">
+                <div className="h-full flex justify-end">
+                  <div
+                    ref={blackLine}
+                    className="bg-black w-0 h-full rounded-full"
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            <div
+              ref={lottieRef1}
+              className="w-1/2 max-md:w-full my-24 max-md:my-4"
+            >
+              <DotLottieReact
+                src="https://lottie.host/f1899756-1dc6-496f-a81c-a0104d02d048/UgBJ4PguFT.lottie"
+                loop
+                autoplay
+              />
+            </div>
+          </div>
+
+          {/* STEP 2 */}
+          <div className="flex flex-row-reverse max-md:flex-col-reverse items-center">
+            <div className="w-1/2 max-md:w-full flex flex-col gap-[28px]">
+              <div id="textRight" className="text-left text-white">
+                <h2 className="font-orbitron text-[36px] font-bold">Hackathons</h2>
+                <p className="text-[20px] opacity-90">
+                  Participate in global hackathons, workshops, and collaborative tech events to sharpen your skills.
+                  Build real-world AI solutions, compete with top innovators, and gain hands-on industry experience.
+                  Showcase your talent, expand your network, and turn ideas into impactful projects.
+                </p>
+              </div>
+
+              <div className="h-[30px] bg-white rounded-full">
+                <div className="h-full flex justify-start">
+                  <div
+                    ref={blackLine2}
+                    className="bg-black w-0 h-full rounded-full"
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            <div ref={lottieRef2} className="w-1/2 max-md:w-full">
+              <DotLottieReact
+                src="https://assets10.lottiefiles.com/packages/lf20_tfb3estd.json"
+                loop
+                autoplay
+              />
+            </div>
+          </div>
+
+          {/* STEP 3 */}
+          <div className="flex max-md:flex-col-reverse items-center">
+            <div className="w-1/2 max-md:w-full flex flex-col gap-[28px]">
+              <div id="textLeftSecond" className="text-right text-white">
+                <h2 className="font-orbitron text-[36px] font-bold">
+                  Data Science &  Much More
+                </h2>
+                <p className="text-[20px] opacity-90">
+                  Learn AI, data science, deep learning, MLOps, and many more industry-ready technologies.
+                  Master modern tools, frameworks, and workflows used by top tech companies.
+                  Transform your learning into deployable solutions and job-ready expertise.
+                </p>
+              </div>
+
+              <div className="h-[30px] bg-white rounded-full">
+                <div className="h-full flex justify-end">
+                  <div
+                    ref={blackLine3}
+                    className="bg-black w-0 h-full rounded-full"
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            <div
+              ref={lottieRef3}
+              className="w-1/2 max-md:w-full my-24 max-md:my-4"
+            >
+              <DotLottieReact
+                src="https://assets5.lottiefiles.com/packages/lf20_w51pcehl.json"
+                loop
+                autoplay
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Button */}
+        <button
+          onClick={() => {
+            if (typeof window !== "undefined") {
+              window.dispatchEvent(new Event("open-navigation"));
+            }
+          }}
+          className="mt-12 rounded-full bg-white px-10 py-4 text-[20px] font-orbitron font-bold text-black border-2 border-white hover:bg-transparent hover:text-white transition-all duration-300 cursor-pointer"
+        >
+          LEARN MORE
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default WhatWeDo;
--- a/src/app/form/page.tsx
+++ b/src/app/form/page.tsx
@@ -107,11 +107,12 @@ const AchievementForm: React.FC = () => {
        />
      </div>

-      <div className="w-full md:w-1/2 min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-b from-[#0A0A23] via-[#1B1B3A] to-[#3C4EC0]">
+      <div className="w-full md:w-1/2 min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-b from-[#0A0A23] via-[#1B1B3A] to-[#3C4EC0]" suppressHydrationWarning>
        <form
          onSubmit={handleSubmit}
          className="w-full max-w-xl text-white p-6 sm:p-8 rounded-xl border border-blue-500 shadow-[0_0_15px_2px_rgba(100,149,237,0.4)] backdrop-blur-sm"
          encType="multipart/form-data"
+          suppressHydrationWarning
        >
          <h2 className="text-3xl font-bold mb-8 text-center">Submit Your Achievement</h2>

--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -34,12 +34,13 @@ body {
    font-style: normal;
  }
 }
+
@layer utilities {
-.special-font b {
+  .special-font b {
    font-family: "Zentry";
    font-feature-settings: "ss01" on;
  }
-}  
+}

 /* === Animated Background Helpers === */

@@ -49,10 +50,12 @@ body {
    opacity: 0.34;
    transform: scale(1);
  }
+
  50% {
    opacity: 0.46;
    transform: scale(1.02);
  }
+
  100% {
    opacity: 0.34;
    transform: scale(1);
@@ -69,9 +72,44 @@ body {
 }

 /* apply gentle breathing to radial lights */
-.pointer-events-none > .breath {
+.pointer-events-none>.breath {
  animation: soft-breath 5.5s ease-in-out infinite;
 }
-html {
-  scroll-behavior: smooth;
+
+/* Border Animation */
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes spin {
+  from {
+    --angle: 0deg;
+  }
+
+  to {
+    --angle: 360deg;
+  }
+}
+
+.animate-border::after,
+.animate-border::before {
+  content: '';
+  position: absolute;
+  inset: -5px;
+  /* Extends beyond the container */
+  background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  z-index: -1;
+  border-radius: inherit;
+  /* Inherits rounded-3xl from parent */
+  animation: 3s spin linear infinite;
+}
+
+.animate-border::before {
+  filter: blur(1.5rem);
+  opacity: 0.5;
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { roboto,orbitron } from "./font";
+import { roboto, orbitron } from "./font";
 import Footer from "./components/Footer";


@@ -28,10 +28,11 @@ export default function RootLayout({
  return (
    <html lang="en">
      <body
+        suppressHydrationWarning
        className={`${geistSans.variable} ${geistMono.variable} ${roboto.variable} ${orbitron.variable} antialiased`}
      >
        {children}
-        <Footer/>
+        <Footer />
      </body>
    </html>
  );
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,16 +12,38 @@
 //   );
 // }
 "use client"
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import dynamic from "next/dynamic";
 import { motion, AnimatePresence } from "framer-motion";
-import Footer from "./components/Footer";

 const Home = dynamic(() => import("./components/Home"), { ssr: false });
+const AboutUs = dynamic(() => import("./components/AboutUs"), { ssr: false });
+const WhatWeDo = dynamic(() => import("./components/WhatWeDo"), { ssr: false });

 // Preloader Component
 function Preloader({ onComplete }: { onComplete: () => void }) {
  const [progress, setProgress] = useState(0);
+  const [dots, setDots] = useState<Array<{ left: string; top: string; duration: number; delay: number }>>([]);
+
+  useEffect(() => {
+    // Generate dots only on client-side to avoid hydration mismatch
+    const mulberry32 = (seed: number) => {
+      return () => {
+        let t = (seed += 0x6d2b79f5);
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+      };
+    };
+    const rand = mulberry32(123456); // deterministic seed
+    const generatedDots = Array.from({ length: 20 }).map(() => ({
+      left: `${rand() * 100}%`,
+      top: `${rand() * 100}%`,
+      duration: 2 + rand() * 2,
+      delay: rand() * 2,
+    }));
+    setDots(generatedDots);
+  }, []);

  useEffect(() => {
    // Simulate loading progress
@@ -56,22 +78,22 @@ function Preloader({ onComplete }: { onComplete: () => void }) {

      {/* Neural Network Animation */}
      <div className="absolute inset-0 pointer-events-none opacity-30">
-        {[...Array(20)].map((_, i) => (
+        {dots.map((dot, i) => (
          <motion.div
            key={i}
            className="absolute w-2 h-2 bg-cyan-400 rounded-full"
            style={{
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`,
+              left: dot.left,
+              top: dot.top,
            }}
            animate={{
              scale: [0, 1, 0],
              opacity: [0, 1, 0],
            }}
            transition={{
-              duration: 2 + Math.random() * 2,
+              duration: dot.duration,
              repeat: Infinity,
-              delay: Math.random() * 2,
+              delay: dot.delay,
            }}
          />
        ))}
@@ -91,7 +113,7 @@ function Preloader({ onComplete }: { onComplete: () => void }) {
            ML4E
          </h1>
          <p className="text-xl md:text-2xl text-blue-300 
-            drop-shadow-[0_0_10px_#00d9ff]" 
+            drop-shadow-[0_0_10px_#00d9ff]"
            style={{ fontFamily: "Roboto, sans-serif" }}>
            Machine Learning For Everyone
          </p>
@@ -109,7 +131,7 @@ function Preloader({ onComplete }: { onComplete: () => void }) {
              animate={{ width: `${Math.min(progress, 100)}%` }}
              transition={{ duration: 0.3 }}
            />
-            
+
            {/* Glowing effect on progress bar */}
            <motion.div
              className="absolute inset-y-0 left-0 bg-gradient-to-r 
@@ -178,13 +200,15 @@ export default function App() {
      </AnimatePresence>

      {/* Home component loads in background while preloader shows */}
-      <div style={{ display: isLoading ? "none" : "block" }}>
+      <div style={{ display: isLoading ? "none" : "block" }} className="w-full">
        {showHome && (
-          <>
+          <div className="w-full">
            <Home />
-          </>
+            <AboutUs />
+            <WhatWeDo />
+          </div>
        )}
      </div>
    </>
  );
-}
+}
--- a/src/app/upload/page.tsx
+++ b/src/app/upload/page.tsx
@@ -92,11 +92,12 @@ const UploadPage: React.FC = () => {
        />
      </div>

-      <div className="w-full md:w-1/2 min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-b from-[#0A0A23] via-[#1B1B3A] to-[#3C4EC0]">
+      <div className="w-full md:w-1/2 min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-b from-[#0A0A23] via-[#1B1B3A] to-[#3C4EC0]" suppressHydrationWarning>
        <form
          onSubmit={handleSubmit}
          className="w-full max-w-xl text-white p-6 sm:p-8 rounded-xl border border-blue-500 shadow-[0_0_15px_2px_rgba(100,149,237,0.4)] backdrop-blur-sm"
          encType="multipart/form-data"
+          suppressHydrationWarning
        >
          <h2 className="text-3xl font-bold mb-8 text-center">Submit Your Project</h2>

--- a/src/app/uploadForm/page.tsx
+++ b/src/app/uploadForm/page.tsx
@@ -86,11 +86,12 @@ const UploadPage: React.FC = () => {
        />
      </div>

-      <div className="w-full md:w-1/2 min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-b from-[#0A0A23] via-[#1B1B3A] to-[#3C4EC0]">
+      <div className="w-full md:w-1/2 min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-b from-[#0A0A23] via-[#1B1B3A] to-[#3C4EC0]" suppressHydrationWarning>
        <form
          onSubmit={handleSubmit}
          className="w-full max-w-xl text-white p-6 sm:p-8 rounded-xl border border-blue-500 shadow-[0_0_15px_2px_rgba(100,149,237,0.4)] backdrop-blur-sm"
          encType="multipart/form-data"
+          suppressHydrationWarning
        >
          <h2 className="text-3xl font-bold mb-8 text-center">Submit Event</h2>

--- a/src/app/uploadTeam/page.tsx
+++ b/src/app/uploadTeam/page.tsx
@@ -91,11 +91,12 @@ const UploadPage: React.FC = () => {
        />
      </div>

-      <div className="w-full md:w-1/2 min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-b from-[#0A0A23] via-[#1B1B3A] to-[#3C4EC0]">
+      <div className="w-full md:w-1/2 min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-b from-[#0A0A23] via-[#1B1B3A] to-[#3C4EC0]" suppressHydrationWarning>
        <form
          onSubmit={handleSubmit}
          className="w-full max-w-xl text-white p-6 sm:p-8 rounded-xl border border-blue-500 shadow-[0_0_15px_2px_rgba(100,149,237,0.4)] backdrop-blur-sm"
          encType="multipart/form-data"
+          suppressHydrationWarning
        >
          <h2 className="text-3xl font-bold mb-8 text-center">Submit Your Details</h2>

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {