Hero Animation Updated - Theme Color Set for each event - Unresponsiveness Resolved

app/(home)/components/about.tsx

@@ -1,32 +1,80 @@
-import React from 'react'
-import Dot from './dot'
+'use client'
+import React, { useEffect, useRef } from 'react';
+import Dot from './dot';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
 
 const About = () => {
+    const borderRef = useRef(null);
+    const aboutRef = useRef(null);
+    const visionRef = useRef(null);
+    const missionRef = useRef(null);
+    const linesRef = useRef(null);
+
+    useEffect(() => {
+        gsap.registerPlugin(ScrollTrigger);
+        const tl = gsap.timeline({
+            scrollTrigger: {
+                trigger: '#about',
+                start: 'top 80%',
+                toggleActions: 'play none none none',
+            }
+        });
+        tl.from(linesRef.current, {
+            scaleX: 0,
+            transformOrigin: 'left',
+            duration: 1,
+            ease: 'power2.out',
+        })
+        .from(aboutRef.current, {
+            y: 50,
+            opacity: 0,
+            duration: 0.6,
+        }, '-=0.5')
+        .from(visionRef.current, {
+            x: -50,
+            opacity: 0,
+            duration: 0.6,
+        }, '-=0.3')
+        .from(missionRef.current, {
+            x: 50,
+            opacity: 0,
+            duration: 0.6,
+        }, '-=0.3');
+    }, []);
+
     return (
-        <div className='flex py-20 flex-col screen px-10 ' id='about'>
-            <div className="main flex flex-col">
+        <div className='flex py-20 flex-col screen px-10' id='about'>
+            {/* Animated green border lines */}
+            <div
+                ref={linesRef}
+                className="w-full h-1 bg-primary mb-8"
+                style={{ borderRadius: '2px', transform: 'scaleX(1)' }}
+            ></div>
+            <div className="main flex flex-col" ref={aboutRef}>
                 <span className='text-primary font-semibold text-xl'>ABOUT</span>
                 <span className='text-6xl text-white'>SJCET BOOTCAMP - IEDC</span>
                 <span className='text-white/70 text-xl mt-5 font-light'>
                     The SJCET Startup Bootcamp- IEDC (Innovation and Entrepreneurship Development Centre) was set up on 9th March 2015 as a part of the Kerala Startup Mission (KSUM) initiative to develop a startup culture amongst students. The IEDCs are platforms set up in Engineering, Management, Arts & Science Colleges and Polytechnics with an aim to provide students an opportunity to experiment and innovate. KSUM has set up IEDCs in 226 institutions across the State which provide avenues for creative students to learn.....
                 </span>
             </div>
             <div className="flex sm:flex-row flex-col w-full mt-5 border-t-[0.01rem] border-primary">
-                <div className="w-50 flex flex-col pt-5 pe-5  pb-5 sm:border-b-[0rem] sm:border-r-[0.01rem] border-b-[0.01rem] border-primary">
+                <div className="w-50 flex flex-col pt-5 pe-5 pb-5 sm:border-b-[0rem] sm:border-r-[0.01rem] border-b-[0.01rem] border-primary" ref={visionRef}>
                     <span className='sm:text-6xl text-4xl text-white flex items-end'>VISION<Dot /></span>
                     <span className='text-white/70 text-xl mt-5 font-light'>
                         To create an innovation culture among Innovators by introducing them the State-of-the-art technologies and positioning the Institution as a Learning and Innovation Platform by delivering technically competent and skilled Entrepreneurs.
                     </span>
                 </div>
-                <div className="w-50 flex flex-col mt-5 sm:ps-5">
+                <div className="w-50 flex flex-col mt-5 sm:ps-5" ref={missionRef}>
                     <span className='sm:text-6xl text-4xl text-white flex items-end'>MISSION<Dot /></span>
                     <span className='text-white/70 text-xl mt-5 font-light'>
-                    To create IEDC as an Innovation Platform and to create future founders by promoting Innovation, Technology and Business Learning among student community
+                        To create IEDC as an Innovation Platform and to create future founders by promoting Innovation, Technology and Business Learning among student community
                     </span>
                 </div>
             </div>
         </div>
-    )
+    );
 }
 
-export default About
+export default About;

app/(home)/components/animation.tsx

@@ -1,45 +1,146 @@
 'use client'
-import React from 'react'
-import { motion, AnimatePresence } from 'motion/react'
-import Image from 'next/image'
+import React, { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { MotionPathPlugin } from 'gsap/MotionPathPlugin';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+// GSAP-based hero animation: draws the path and moves the airplane along it.
+// Optimizations:
+// - Uses transforms (MotionPathPlugin) for smooth GPU-accelerated motion.
+// - Pauses animation when the section leaves the viewport via ScrollTrigger.
+// - Cleans up tweens and triggers on unmount.
+
+const pathD = `M1 279.361C56.8159 160.506 211.609 58.3054 423.016 269.767C499.347 363.705 782.689 559.976 908.975 309.742C1035.26 59.5074 784.288 -69.2102 714.351 40.3178C644.415 149.846 709.156 357.71 908.975 378.496C1068.83 395.125 1242.14 276.03 1321 207.009`;
 
-const transition = { duration: 3, yoyo: Infinity, ease: "easeInOut" }
 const HeroAnimation = () => {
-    const box: React.CSSProperties = {
-        width: 100,
-        height: 100,
-        position: "absolute",
-        top: 0,
-        left: 0,
-        offsetPath: `path("M1 279.361C56.8159 160.506 211.609 58.3054 423.016 269.767C499.347 363.705 782.689 559.976 908.975 309.742C1035.26 59.5074 784.288 -69.2102 714.351 40.3178C644.415 149.846 709.156 357.71 908.975 378.496C1068.83 395.125 1242.14 276.03 1321 207.009")`,
-    }
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const pathRef = useRef<SVGPathElement | null>(null);
+    const planeRef = useRef<SVGImageElement | null>(null);
+
+    useEffect(() => {
+        gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
+
+        const path = pathRef.current;
+        const plane = planeRef.current as unknown as SVGElement | null;
+        const container = containerRef.current;
+        if (!path || !plane || !container) return;
+
+        const pathLength = (path as SVGPathElement).getTotalLength();
+
+        // prepare stroke for drawing animation (smoother caps/joins)
+        gsap.set(path, {
+            strokeDasharray: pathLength,
+            strokeDashoffset: pathLength,
+            stroke: 'rgba(0,0,0,0.12)',
+            strokeWidth: 2.5,
+            fill: 'transparent',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            vectorEffect: 'non-scaling-stroke',
+        });
+
+        // draw animation
+        const drawTween = gsap.to(path, {
+            strokeDashoffset: 0,
+            duration: 3,
+            ease: 'power2.out',
+            paused: true,
+        });
+
+        // airplane motion along path (paused initially)
+        const planeTween = gsap.to(plane, {
+            motionPath: {
+                path: path,
+                align: path,
+                alignOrigin: [0.5, 0.5],
+                autoRotate: true,
+            },
+            duration: 5,
+            ease: 'power1.inOut',
+            repeat: -1,
+            paused: true,
+        });
+
+        // Use ScrollTrigger to play/pause the animations when visible
+        const st = ScrollTrigger.create({
+            trigger: container,
+            start: 'top 85%',
+            end: 'bottom top',
+            onEnter: () => {
+                drawTween.play();
+                // give draw a small headstart for perceived smoothness
+                gsap.delayedCall(0.2, () => planeTween.play());
+            },
+            onEnterBack: () => {
+                drawTween.play();
+                gsap.delayedCall(0.2, () => planeTween.play());
+            },
+            onLeave: () => {
+                planeTween.pause();
+                drawTween.pause();
+            },
+            onLeaveBack: () => {
+                planeTween.pause();
+                drawTween.pause();
+            },
+        });
+
+        // minor performance hint: ensure will-change set on plane (SVG)
+        try {
+            if (plane && 'style' in plane) {
+                (plane as any).style.willChange = 'transform';
+            }
+        } catch (e) {
+            // ignore
+        }
+
+        return () => {
+            planeTween.kill();
+            drawTween.kill();
+            st.kill();
+        };
+    }, []);
+
     return (
-        <div className='bottom-0 left-0 top-0 right-0 absolute z-[1] mt-[250px] w-full'>
-            <div style={{ position: "relative" }}>
-                <svg xmlns="http://www.w3.org/2000/svg" width={800} height={800} className='w-full min-h-[500px]'>
-                    <motion.path
-                        d="M1 279.361C56.8159 160.506 211.609 58.3054 423.016 269.767C499.347 363.705 782.689 559.976 908.975 309.742C1035.26 59.5074 784.288 -69.2102 714.351 40.3178C644.415 149.846 709.156 357.71 908.975 378.496C1068.83 395.125 1242.14 276.03 1321 207.009"
-                        fill="transparent"
-                        strokeWidth="2"
-                        stroke="rgba(0,0,0,0.1)"
-                        strokeDasharray="5,5"
+        <div
+            ref={containerRef}
+            className="bottom-0 left-0 top-0 right-0 absolute z-[1] mt-[250px] w-full pointer-events-none overflow-visible"
+            style={{ overflow: 'visible' }}
+        >
+            <div style={{ position: 'relative', overflow: 'visible' }}>
+                {/* widen viewBox so the curve has horizontal breathing room on desktop */}
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={1400}
+                    height={420}
+                    viewBox="0 0 1400 420"
+                    preserveAspectRatio="xMinYMid meet"
+                    className="w-full h-auto"
+                    style={{ overflow: 'visible' }}
+                >
+                    <path
+                        ref={pathRef}
+                        d={pathD}
+                        fill="none"
+                        stroke="rgba(0,0,0,0.12)"
+                        strokeWidth={2.5}
                         strokeLinecap="round"
-                        initial={{ pathLength: 0.001 }}
-                        animate={{ pathLength: 1 }}
-                        transition={transition}
+                        strokeLinejoin="round"
+                        vectorEffect="non-scaling-stroke"
+                    />
+                    {/* airplane as SVG image so it moves in SVG coordinate space and scales responsively */}
+                    <image
+                        ref={planeRef}
+                        href="/smallairplane.png"
+                        width={80}
+                        height={80}
+                        preserveAspectRatio="xMidYMid meet"
+                        style={{ transform: 'translate(-40px, -40px)', pointerEvents: 'none' }}
                     />
                 </svg>
-                <motion.div
-                    style={box}
-                    initial={{ offsetDistance: "0%", scale: 1 }}
-                    animate={{ offsetDistance: "100%", scale: 3 }}
-                    transition={transition}
-                >
-                    <Image src={'/smallairplane.png'} alt='' width={200} height={200} />
-                </motion.div>
             </div>
         </div>
-    )
-}
+    );
+};
 
-export default HeroAnimation
+export default HeroAnimation;

app/(home)/components/events.tsx

@@ -17,7 +17,7 @@ const EventsHome = () => {
     return (
         <div className="pt-20 pb-10">
             <div className='screen sm:px-10 px-5'>
-                <h4 className='text-7xl text-white p-0 m-0'><span className='font-semibold text-primary'>BOOTCAMP</span> EVENTS</h4>
+                <h4 className='text-7xl text-white p-0 m-0'><span className='font-semibold sm:text-7xl text-2xl text-primary'>BOOTCAMP</span> EVENTS</h4>
             </div>
             <Carousel  />
         </div>

app/(home)/components/hero.tsx

@@ -4,8 +4,8 @@ import FadeContent from '@/app/components/FadeContent';
 import SplitText from '@/app/components/SplitText';
 import Image from 'next/image'
 import Link from 'next/link'
-import HeroAnimation from './animation';
 import React, { useState, useEffect } from 'react'
+import HeroAnimation from './animation';
 
 const handleAnimationComplete = () => {
     console.log('All letters have animated!');
@@ -52,7 +52,7 @@ export default function Hero() {
                     scale={1.4}
                     threshold={0.2}
                 >
-                    <h2 className='md:text-7xl sm:text-6xl text-6xl mb-10 px-10 text-start font-regular p-0 mt-[-10px]'>
+                    <h2 className='md:text-7xl sm:text-6xl text-5xl mb-10 px-10 text-start font-regular p-0 mt-[-10px]'>
                         Discovering
                         <br />
                         <span className='font-semibold text-primary tracking-tight'>
@@ -93,8 +93,8 @@ export default function Hero() {
                 </FadeContent>
 
             </div>
-            {/* <Image className='absolute z-[1] pt-[150px] wiggle' src={'/airplane.png'} alt='' height={3000} width={4000} /> */}
             <HeroAnimation />
+            {/* <Image className='absolute z-[1] pt-[150px] wiggle' src={'/airplane.png'} alt='' height={2000} width={2000} /> */}
         </div>
     </section>
 }

app/(home)/components/navbar.tsx

@@ -45,7 +45,7 @@ const Navbar = () => {
                 <Image className='md:w-[280px] sm:w-[240px] w-[190px] ps-10' src={'/logo.png'} alt='logo' width={800} height={800} />
             </FadeContent>
             <div className='flex items-center'>
-                <Link className="border-r-[0.01rem] hover:bg-zinc-100 flex items-center px-10 h-[90px]" href={'https://iedc-admin.vercel.app/'}>LOGIN</Link>
+                <Link className="border-r-[0.01rem] hover:bg-zinc-100 sm:flex hidden items-center px-10 h-[90px]" href={'https://iedc-admin.vercel.app/'}>LOGIN</Link>
 
                 <button type='button' onClick={() => toggleOpen()} className='w-[90px] flex justify-center hover:bg-zinc-100 items-center h-[90px] p-5'><Image alt='' src={'/Menu.png'} width={400} height={400} className='w-[50]' /></button>
             </div>

app/(home)/components/whyiedc.tsx

@@ -34,8 +34,8 @@ const data = [
 ]
 const WhyIedc = () => {
     return (
-        <div id='whyiedc' className="bg-white p-10 rounded-b-[120px]">
-            <section className="py-10 screen px-10 mt-10 border-[0.05rem] rounded-[95px] border-primary bg-white">
+        <div id='whyiedc' className="bg-white md:p-10 p-4 rounded-b-[120px]">
+            <section className="md:p-10 px-5 py-10 screen mt-10 border-[0.05rem] rounded-[95px] border-primary bg-white">
                 <h1 className="w-full text-center text-6xl">WHY <span className="text-primary font-semibold">IEDC</span>?</h1>
 
                 <TextGenerateEffect duration={1} className="font-medium text-center text-md" words="Here students take their first step as innovators and entrepreneurs" />

app/(home)/page.tsx

@@ -14,7 +14,7 @@ import EventsHome from "./components/events";
 
 export default function Home() {
   return (
-    <main className="min-h-screen">
+    <main className="min-h-screen overflow-x-hidden relative">
 
       <Navbar />
       <Hero />

app/components/MenuItem.tsx

@@ -62,7 +62,7 @@ export const MenuItem = ({ i, toggleon }: { i: number, toggleon: Cycle }) => {
       border-b-[0.01rem] hover:border-zinc-400 border-zinc-200 sm:mt-3 mt-6"
     >
       {/* <div className="icon-placeholder" style={style} /> */}
-      <Link onClick={() => toggleon()} href={Links[i].link} target={Links[i].link.startsWith("http") ? "_blank" : undefined} className=" text-black w-full md:text-7xl text-5xl mb-5">
+      <Link onClick={() => toggleon()} href={Links[i].link} target={Links[i].link.startsWith("http") ? "_blank" : undefined} className=" text-black w-full md:text-7xl text-4xl mb-5">
         <span className="inline-flex items-end gap-2">
           {Links[i].title}<Dot />
         </span>