diff --git a/src/App.jsx b/src/App.jsx
index b52a34c..54f6b6c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,16 +12,72 @@ import MoreEvents from './pages/MoreEvents'
 const App = () => {
   return (
     <BrowserRouter>
-      <NavbarDemo />
+      {/* Render NavbarDemo for all routes except Home */}
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/members" element={<Member />} />
-        <Route path="/developers" element={<Developers />} />
-        <Route path="/wings" element={<Wings />} />
-        <Route path="/events" element={<Events />} />
-        <Route path="/events/:slug" element={<MoreEvents />} />
-        <Route path="/editorials" element={<EditorialsComingSoon />} />
-        <Route path="/login" element={<Login />} /> {/* Added Login route */}
+        <Route
+          path="/members"
+          element={
+            <>
+              <NavbarDemo />
+              <Member />
+            </>
+          }
+        />
+        <Route
+          path="/developers"
+          element={
+            <>
+              <NavbarDemo />
+              <Developers />
+            </>
+          }
+        />
+        <Route
+          path="/wings"
+          element={
+            <>
+              <NavbarDemo />
+              <Wings />
+            </>
+          }
+        />
+        <Route
+          path="/events"
+          element={
+            <>
+              <NavbarDemo />
+              <Events />
+            </>
+          }
+        />
+        <Route
+          path="/events/:slug"
+          element={
+            <>
+              <NavbarDemo />
+              <MoreEvents />
+            </>
+          }
+        />
+        <Route
+          path="/editorials"
+          element={
+            <>
+              <NavbarDemo />
+              <EditorialsComingSoon />
+            </>
+          }
+        />
+        <Route
+          path="/login"
+          element={
+            <>
+              <NavbarDemo />
+              <Login />
+            </>
+          }
+        />
       </Routes>
     </BrowserRouter>
   )
diff --git a/src/pages/Developers.jsx b/src/pages/Developers.jsx
index 758dcaa..c54ea22 100644
--- a/src/pages/Developers.jsx
+++ b/src/pages/Developers.jsx
@@ -18,12 +18,12 @@ import teamData from '../jsonData/developers.json' // Fetch data from JSON
 import '../styles/developers.css'
 import { NavbarDemo } from '../components/Navbar'
 
-// Default options for Tilt component
+// Default options for Tilt component with no scale
 const defaultTiltOptions = {
   reverse: true,
   max: 35,
   perspective: 1000,
-  scale: 1.05,
+  scale: 1.0,
   speed: 1000,
   transition: true,
   axis: null,
@@ -40,7 +40,10 @@ const MemberCard = ({ member, index }) => {
 
   return (
     <Tilt options={defaultTiltOptions}>
-      <div className="group perspective h-96 w-full" onClick={handleFlip}>
+      <div
+        className="group perspective h-96 w-full sm:w-80 md:w-72 lg:w-64"
+        onClick={handleFlip}
+      >
         <div
           className={`relative w-full h-full transition-transform duration-700 preserve-3d ${
             flipped ? 'rotate-y-180' : ''
@@ -198,38 +201,40 @@ const Carousel = ({ children, className }) => {
     return <p className="text-center text-cyan-300">No members found</p>
 
   return (
-    <div className={`relative px-8 ${className}`}>
-      <div
-        {...handlers}
-        className="overflow-hidden cursor-grab active:cursor-grabbing"
-      >
-        <motion.div
-          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6"
-          initial={false}
-          animate={{ x: 0, opacity: 1 }}
-          transition={{
-            type: 'tween',
-            ease: 'easeOut',
-            duration: 0.3,
-          }}
+    <div className={`relative ${className}`}>
+      <div className="relative flex items-center px-8 sm:px-12 lg:px-16">
+        <button
+          onClick={prev}
+          className="absolute top-1/2 -translate-y-1/2 left-2 sm:-left-8 lg:-left-16 bg-cyan-900/70 border border-cyan-500 text-cyan-300 p-2 sm:p-3 lg:p-4 rounded-full hover:bg-cyan-800/80 hover:text-cyan-200 hover:scale-110 transition-all duration-300 shadow-lg shadow-cyan-500/30 z-10"
+          aria-label="Previous slide"
+        >
+          <FaChevronLeft className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6" />
+        </button>
+        <div
+          {...handlers}
+          className="flex-1 overflow-visible cursor-grab active:cursor-grabbing"
         >
-          {visibleItems}
-        </motion.div>
+          <motion.div
+            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 sm:gap-16 lg:gap-20"
+            initial={false}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{
+              type: 'tween',
+              ease: 'easeOut',
+              duration: 0.3,
+            }}
+          >
+            {visibleItems}
+          </motion.div>
+        </div>
+        <button
+          onClick={next}
+          className="absolute top-1/2 -translate-y-1/2 right-2 sm:-right-20 lg:-right-24 bg-cyan-900/70 border border-cyan-500 text-cyan-300 p-2 sm:p-3 lg:p-4 rounded-full hover:bg-cyan-800/80 hover:text-cyan-200 hover:scale-110 transition-all duration-300 shadow-lg shadow-cyan-500/30 z-10"
+          aria-label="Next slide"
+        >
+          <FaChevronRight className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6" />
+        </button>
       </div>
-      <button
-        onClick={prev}
-        className="absolute top-1/2 -translate-y-1/2 bg-cyan-900/70 border border-cyan-500 text-cyan-300 p-2 sm:p-3 lg:p-4 rounded-full hover:bg-cyan-800/80 hover:text-cyan-200 hover:scale-110 transition-all duration-300 shadow-lg shadow-cyan-500/30 z-10 left-8 sm:left-10 lg:left-12"
-        aria-label="Previous slide"
-      >
-        <FaChevronLeft className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6" />
-      </button>
-      <button
-        onClick={next}
-        className="absolute top-1/2 -translate-y-1/2 bg-cyan-900/70 border border-cyan-500 text-cyan-300 p-2 sm:p-3 lg:p-4 rounded-full hover:bg-cyan-800/80 hover:text-cyan-200 hover:scale-110 transition-all duration-300 shadow-lg shadow-cyan-500/30 z-10 right-8 sm:right-10 lg:right-12"
-        aria-label="Next slide"
-      >
-        <FaChevronRight className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6" />
-      </button>
       <div className="flex justify-center mt-6 space-x-2">
         {Array.from({ length: totalSlides }).map((_, idx) => (
           <button
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 432f7b7..192c929 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,312 +1,303 @@
-import React, { useState, useEffect, useRef } from "react";
-import { useGSAP } from "@gsap/react";
-import gsap from "gsap";
-
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import LiquidEther from "../components/ui/LiquidEther";
-import Carousel from "../components/ui/Carousel";
-import Chatbot from "../components/ui/Chatbot";
-gsap.registerPlugin(ScrollTrigger);
-
-
+import React, { useState, useEffect, useRef } from 'react'
+import { useGSAP } from '@gsap/react'
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import LiquidEther from '../components/ui/LiquidEther'
+import Carousel from '../components/ui/Carousel'
+import Chatbot from '../components/ui/Chatbot'
+import { NavbarDemo } from '../components/Navbar'
+gsap.registerPlugin(ScrollTrigger)
 
 function Home() {
-  const [showContent, setShowContent] = useState(false);
-  const [input, setInput] = useState("");
-  const svgRef = useRef(null);
-  const animationRef = useRef(null);
+  const [showContent, setShowContent] = useState(false)
+  const [input, setInput] = useState('')
+  const svgRef = useRef(null)
+  const animationRef = useRef(null)
 
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      setInput("");
-    }
-  };
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      setInput('')
+    }
+  }
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-    
-    // Refresh ScrollTrigger after a short delay to ensure DOM is fully rendered
-    const timer = setTimeout(() => {
-      ScrollTrigger.refresh();
-    }, 300);
-    
-    return () => clearTimeout(timer);
-  }, []);
+  useEffect(() => {
+    window.scrollTo(0, 0) // Refresh ScrollTrigger after a short delay to ensure DOM is fully rendered
+    const timer = setTimeout(() => {
+      ScrollTrigger.refresh()
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [])
 
-  // Function to properly detect mobile devices
-  const isMobileDevice = () => {
-    return (
-      typeof window.orientation !== "undefined" || 
-      navigator.userAgent.indexOf('IEMobile') !== -1 ||
-      window.innerWidth < 768
-    );
-  };
+  // Function to properly detect mobile devices
+  const isMobileDevice = () => {
+    return (
+      typeof window.orientation !== 'undefined' ||
+      navigator.userAgent.indexOf('IEMobile') !== -1 ||
+      window.innerWidth < 768
+    )
+  }
 
   // --- CORRECTED: Adjusted desktop/tablet font size to prevent overflow ---
-  const cssFontSize = isMobileDevice() ? "250" : "320";
-
-
-  useGSAP(() => {
-    // Kill any existing animation to prevent conflicts
-    if (animationRef.current) {
-      animationRef.current.kill();
-    }
-    
-    const isMobile = isMobileDevice();
-    
-    // Better mobile detection with more specific scaling
-    let initialScale, finalScale;
-    
-    if (isMobile) {
-      // For mobile, use a more appropriate scale based on screen size
-      const screenRatio = window.innerHeight / window.innerWidth;
-      initialScale = screenRatio > 1.6 ? 0.4 : 0.6; // Adjust for portrait vs landscape
-      finalScale = Math.max(window.innerWidth / 30, 20); // More controlled final scale
-    } else {
-      initialScale = 1.15;
-      finalScale = 15;
-    }
-    
-    // Set initial state
-    gsap.set(".vi-mask-group", {
-      scale: initialScale,
-      transformOrigin: "center center",
-    });
-    
-    // Create the animation
-    animationRef.current = gsap.to(".vi-mask-group", {
-      rotate: 10,
-      scale: finalScale,
-      transformOrigin: "50% 50%",
-      ease: "none",
-      scrollTrigger: {
-        trigger: ".svg-container",
-        start: "top top",
-        end: "bottom top",
-        scrub: true,
-        pin: true,
-        onEnter: () => setShowContent(true),
-        onLeaveBack: () => setShowContent(false),
-      },
-    });
-
-    // Fade out background video gradually when About starts
-    gsap.to(".bg-video", {
-      opacity: 0.5,
-      scrollTrigger: {
-        trigger: ".about",
-        start: "top center",
-        end: "top top",
-        scrub: true,
-      },
-    });
+  const cssFontSize = isMobileDevice() ? '250' : '320'
 
-    gsap.to(".chat-launcher", {
-      autoAlpha: 1, // Fades in and handles visibility
-      scale: 1, // Scales it from its default 0.5 to 1
-      duration: 0.5,
-      scrollTrigger: {
-        trigger: ".about", // The element that triggers the animation
-        start: "top center", // Starts when the top of ".about" hits the viewport center
-        toggleActions: "play none none reverse", // Fades in on scroll down, fades out on scroll up
-      },
-    });
-    
-    // Add resize event listener to refresh ScrollTrigger on orientation changes
-    const handleResize = () => {
-      ScrollTrigger.refresh();
-    };
-    
-    window.addEventListener('resize', handleResize);
-    
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
+  useGSAP(() => {
+    // Kill any existing animation to prevent conflicts
+    if (animationRef.current) {
+      animationRef.current.kill()
+    }
 
- 
-  return (
-    <div className="w-full relative bg-black">
-      <Chatbot />
-      <div className="svg-container sticky top-0 z-[100] w-full h-screen flex items-center justify-center bg-black">
-        <svg 
-          ref={svgRef}
-          viewBox="0 0 800 600" 
-          preserveAspectRatio="xMidYMid slice" 
-          className="w-full h-full"
-        >
-          <defs>
-            <mask id="viMask">
-              <rect width="100%" height="100%" fill="black" />
-              <g className="vi-mask-group">
-                <text
-                  x="50%"
-                  y="50%"
-                  fontSize={cssFontSize}
-                  textAnchor="middle"
-                  fill="white"
-                  dominantBaseline="middle"
-                  fontFamily="Arial Black"
-                >
-                  CSS
-                </text>
-              </g>
-            </mask>
-          </defs>
-          <foreignObject width="100%" height="100%" mask="url(#viMask)">
-            <video
-              autoPlay
-              loop
-              muted
-              playsInline
-              className="w-full h-full object-cover bg-video"
-            >
-              <source src="videos/video.mp4" type="video/mp4" />
-              {/* Add fallback for mobile browsers that might block autoplay */}
-            </video>
-          </foreignObject>
-        </svg>
-      </div>
-      
-      {/* Add a simple fallback for mobile if video doesn't play */}
-      <div className="mobile-fallback hidden absolute inset-0 bg-gradient-to-b from-blue-900 to-purple-900">
-        <div className="flex items-center justify-center h-full">
-          <h1 className="text-4xl font-bold text-white">CSS</h1>
-        </div>
-      </div>
+    const isMobile = isMobileDevice() // Better mobile detection with more specific scaling
+    let initialScale, finalScale
+    if (isMobile) {
+      // For mobile, use a more appropriate scale based on screen size
+      const screenRatio = window.innerHeight / window.innerWidth
+      initialScale = screenRatio > 1.6 ? 0.4 : 0.6 // Adjust for portrait vs landscape
+      finalScale = Math.max(window.innerWidth / 30, 20) // More controlled final scale
+    } else {
+      initialScale = 1.15
+      finalScale = 15
+    }
 
-      {/* About Section */}
-      
-      <section className="about relative min-h-screen bg-[linear-gradient(to_right,#000000_55%,#021547_100%)] text-white flex items-center justify-center px-6 py-16 overflow-hidden">
-        <div className="relative z-10 max-w-6xl w-full flex flex-col md:flex-row items-center gap-10">
-          <div className="flex-1 bg-black/70 rounded-xl border border-cyan-500/20 p-8 md:p-12 backdrop-blur-md shadow-lg shadow-cyan-500/10">
-            <div className="flex items-center mb-6">
-              <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
-              <span className="text-cyan-400 font-mono text-md">ABOUT_TERMINAL</span>
-            </div>
-            <div className="space-y-6 font-mono">
-              <p className="text-2xl md:text-3xl font-bold text-green-400 tracking-wide">
-                <span className="text-cyan-400">$~ </span> mkdir <span className="text-3xl">Computer-Science-Society</span>
-            	</p>
-            	<p className="text-lg md:text-xl text-gray-300 leading-relaxed">
-            	  <span className="text-emerald-400 font-mono">$~</span> cat <span className="text-white">About.txt</span>
-            	  <br />
-            	  The{" "}
-            	  <span className="highlight font-semibold text-2xl text-white">
-            	    Computer Science Society
-            	  </span>, run by the CSE department of
-            	  <span className="highlight font-semibold text-2xl text-white">
-            	    {" "}NIT Silchar
-            	  </span>, aims to impart academic, technical, and socio-cultural awareness
-            	  to the students of our college.
-            	</p>
+    // Set initial state
+    gsap.set('.vi-mask-group', {
+      scale: initialScale,
+      transformOrigin: 'center center',
+    })
 
-            </div>
-            <div className="flex items-center mt-6">
-              <span className="text-cyan-400 font-mono text-lg mr-2">$~</span>
-              <input
-                type="text"
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                onKeyDown={handleKeyDown}
-                className="bg-transparent outline-none border-none text-lg font-mono text-white w-full caret-cyan-400"
-                placeholder="type a command..."
-                autoFocus
-              />
-            </div>
-          </div>
-          <div className="flex-1 flex justify-center">
-            <img
-              src="images/about.png"
-              alt="About Us"
-            	className="rounded-2xl shadow-lg shadow-cyan-500/20 border border-cyan-500/20 object-cover max-h-[400px]"
-            />
-          </div>
-        </div>
-    </section>
+    // Create the animation
+    animationRef.current = gsap.to('.vi-mask-group', {
+      rotate: 10,
+      scale: finalScale,
+      transformOrigin: '50% 50%',
+      ease: 'none',
+      scrollTrigger: {
+        trigger: '.svg-container',
+        start: 'top top',
+        end: 'bottom top',
+        scrub: true,
+        pin: true,
+        onEnter: () => setShowContent(true),
+        onLeaveBack: () => setShowContent(false),
+      },
+    })
 
-    {/* Announcement Section */}
-    <section className="relative min-h-screen bg-[linear-gradient(to_right,#000000_55%,#021547_100%)] text-white flex flex-col items-center justify-center px-5 py-16 overflow-hidden">
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+    // Fade out background video gradually when About starts
+    gsap.to('.bg-video', {
+      opacity: 0.5,
+      scrollTrigger: {
+        trigger: '.about',
+        start: 'top center',
+        end: 'top top',
+        scrub: true,
+      },
+    })
 
-          <div className="absolute inset-0 opacity-40 mix-blend-screen">
-            <LiquidEther resolution={0.4} colors={["#0f172a", "#1e3a8a", "#38bdf8"]} />
-          </div>
-          <div className="absolute inset-0 opacity-20">
-            {[...Array(30)].map((_, i) => (
-              <div
-                key={i}
-                className="absolute text-green-400 text-xs animate-[fall_6s_linear_infinite]"
-                style={{
-                  left: `${Math.random() * 100}%`,
-                  animationDelay: `${Math.random() * 6}s`,
-                  top: "-20px",
-                }}
-              >
-                {Math.random() > 0.5 ? "1" : "0"}
-              </div>
-            ))}
-          </div>
-        <svg width="100%" height="100%" className="absolute inset-0 opacity-10">
-          <path
-            d="M0,100 Q200,50 400,150 T800,50 T1200,200 T1600,0"
-            stroke="cyan"
-            strokeWidth="2"
-            fill="none"
-            strokeDasharray="10,10"
-          >
-            <animate
-              attributeName="stroke-dashoffset"
-              from="0"
-              to="20"
-            	dur="4s"
-            	repeatCount="indefinite"
-            />
-          </path>
-        </svg>
-      </div>
+    gsap.to('.chat-launcher', {
+      autoAlpha: 1, // Fades in and handles visibility
+      scale: 1, // Scales it from its default 0.5 to 1
+      duration: 0.5,
+      scrollTrigger: {
+        trigger: '.about', // The element that triggers the animation
+        start: 'top center', // Starts when the top of ".about" hits the viewport center
+        toggleActions: 'play none none reverse', // Fades in on scroll down, fades out on scroll up
+      },
+    })
 
-      {/* Foreground Terminal Box */}
-      <div className="relative z-10 w-full max-w-[1200px] bg-black/70 rounded-xl border border-cyan-500/20 p-3 md:p-10 backdrop-blur-md shadow-lg shadow-cyan-500/10">
-        {/* Terminal Header */}
-        <div className="flex items-center mb-4">
-          <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
-          <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
-          <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
-          <span className="text-cyan-400 font-mono text-sm">ANNOUNCEMENTS_TERMINAL</span>
-        </div>
+    // Add resize event listener to refresh ScrollTrigger on orientation changes
+    const handleResize = () => {
+      ScrollTrigger.refresh()
+    }
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
 
-        {/* Terminal Title */}
-        <h2 className="text-2xl md:text-3xl font-mono font-bold text-green-400 mb-4">
-          <span className="text-cyan-400">$~ </span> Announcements
-        </h2>
-
-        {/* Carousel */}
-        <div className="w-full flex justify-center">
-          <Carousel
-            baseWidth={650} // bigger images
-            autoplay={true}
-            autoplayDelay={3000}
-            pauseOnHover={true}
-            loop={true}
-            round={false}
-          />
-        </div>
-        <div className="flex items-center mt-6">
-          <span className="text-cyan-400 font-mono text-lg mr-2">$~</span>
-          <div className="w-[2px] h-6 bg-cyan-400 animate-blink"></div>
-        </div>
-      </div>
-    </section>
-
-
-
-    {/* Pillars Section */}
-   
-    </div>
-  );
+  return (
+    <div className="w-full relative bg-black">
+      <Chatbot />
+      <div className="svg-container sticky top-0 z-[100] w-full h-screen flex items-center justify-center bg-black">
+        <svg
+          ref={svgRef}
+          viewBox="0 0 800 600"
+          preserveAspectRatio="xMidYMid slice"
+          className="w-full h-full"
+        >
+          <defs>
+            <mask id="viMask">
+              <rect width="100%" height="100%" fill="black" />
+              <g className="vi-mask-group">
+                <text
+                  x="50%"
+                  y="50%"
+                  fontSize={cssFontSize}
+                  textAnchor="middle"
+                  fill="white"
+                  dominantBaseline="middle"
+                  fontFamily="Arial Black"
+                >
+                  CSS
+                </text>
+              </g>
+            </mask>
+          </defs>
+          <foreignObject width="100%" height="100%" mask="url(#viMask)">
+            <video
+              autoPlay
+              loop
+              muted
+              playsInline
+              className="w-full h-full object-cover bg-video"
+            >
+              <source src="videos/video.mp4" type="video/mp4" />
+              {/* Add fallback for mobile browsers that might block autoplay */}
+            </video>
+          </foreignObject>
+        </svg>
+      </div>
+      {/* Add NavbarDemo after the video section */}
+      <NavbarDemo />
+      {/* Add a simple fallback for mobile if video doesn't play */}
+      <div className="mobile-fallback hidden absolute inset-0 bg-gradient-to-b from-blue-900 to-purple-900">
+        <div className="flex items-center justify-center h-full">
+          <h1 className="text-4xl font-bold text-white">CSS</h1>
+        </div>
+      </div>
+      {/* About Section */}
+      <section className="about relative min-h-screen bg-[linear-gradient(to_right,#000000_55%,#021547_100%)] text-white flex items-center justify-center px-6 py-16 overflow-hidden">
+        <div className="relative z-10 max-w-6xl w-full flex flex-col md:flex-row items-center gap-10">
+          <div className="flex-1 bg-black/70 rounded-xl border border-cyan-500/20 p-8 md:p-12 backdrop-blur-md shadow-lg shadow-cyan-500/10">
+            <div className="flex items-center mb-6">
+              <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
+              <span className="text-cyan-400 font-mono text-md">
+                ABOUT_TERMINAL
+              </span>
+            </div>
+            <div className="space-y-6 font-mono">
+              <p className="text-2xl md:text-3xl font-bold text-green-400 tracking-wide">
+                <span className="text-cyan-400">$~ </span> mkdir{' '}
+                <span className="text-3xl">Computer-Science-Society</span>
+              </p>
+              <p className="text-lg md:text-xl text-gray-300 leading-relaxed">
+                <span className="text-emerald-400 font-mono">$~</span> cat{' '}
+                <span className="text-white">About.txt</span>
+                <br />
+                The
+                <span className="highlight font-semibold text-2xl text-white">
+                  Computer Science Society
+                </span>
+                , run by the CSE department of
+                <span className="highlight font-semibold text-2xl text-white">
+                  NIT Silchar
+                </span>
+                , aims to impart academic, technical, and socio-cultural
+                awareness to the students of our college.
+              </p>
+            </div>
+            <div className="flex items-center mt-6">
+              <span className="text-cyan-400 font-mono text-lg mr-2">$~</span>
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className="bg-transparent outline-none border-none text-lg font-mono text-white w-full caret-cyan-400"
+                placeholder="type a command..."
+                autoFocus
+              />
+            </div>
+          </div>
+          <div className="flex-1 flex justify-center">
+            <img
+              src="images/about.png"
+              alt="About Us"
+              className="rounded-2xl shadow-lg shadow-cyan-500/20 border border-cyan-500/20 object-cover max-h-[400px]"
+            />
+          </div>
+        </div>
+      </section>
+      {/* Announcement Section */}
+      <section className="relative min-h-screen bg-[linear-gradient(to_right,#000000_55%,#021547_100%)] text-white flex flex-col items-center justify-center px-5 py-16 overflow-hidden">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute inset-0 opacity-40 mix-blend-screen">
+            <LiquidEther
+              resolution={0.4}
+              colors={['#0f172a', '#1e3a8a', '#38bdf8']}
+            />
+          </div>
+          <div className="absolute inset-0 opacity-20">
+            {[...Array(30)].map((_, i) => (
+              <div
+                key={i}
+                className="absolute text-green-400 text-xs animate-[fall_6s_linear_infinite]"
+                style={{
+                  left: `${Math.random() * 100}%`,
+                  animationDelay: `${Math.random() * 6}s`,
+                  top: '-20px',
+                }}
+              >
+                {Math.random() > 0.5 ? '1' : '0'}
+              </div>
+            ))}
+          </div>
+          <svg
+            width="100%"
+            height="100%"
+            className="absolute inset-0 opacity-10"
+          >
+            <path
+              d="M0,100 Q200,50 400,150 T800,50 T1200,200 T1600,0"
+              stroke="cyan"
+              strokeWidth="2"
+              fill="none"
+              strokeDasharray="10,10"
+            >
+              <animate
+                attributeName="stroke-dashoffset"
+                from="0"
+                to="20"
+                dur="4s"
+                repeatCount="indefinite"
+              />
+            </path>
+          </svg>
+        </div>
+        {/* Foreground Terminal Box */}
+        <div className="relative z-10 w-full max-w-[1200px] bg-black/70 rounded-xl border border-cyan-500/20 p-3 md:p-10 backdrop-blur-md shadow-lg shadow-cyan-500/10">
+          {/* Terminal Header */}
+          <div className="flex items-center mb-4">
+            <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
+            <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
+            <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+            <span className="text-cyan-400 font-mono text-sm">
+              ANNOUNCEMENTS_TERMINAL
+            </span>
+          </div>
+          {/* Terminal Title */}
+          <h2 className="text-2xl md:text-3xl font-mono font-bold text-green-400 mb-4">
+            <span className="text-cyan-400">$~ </span> Announcements
+          </h2>
+          {/* Carousel */}
+          <div className="w-full flex justify-center">
+            <Carousel
+              baseWidth={650} // bigger images
+              autoplay={true}
+              autoplayDelay={3000}
+              pauseOnHover={true}
+              loop={true}
+              round={false}
+            />
+          </div>
+          <div className="flex items-center mt-6">
+            <span className="text-cyan-400 font-mono text-lg mr-2">$~</span>
+            <div className="w-[2px] h-6 bg-cyan-400 animate-blink"></div>
+          </div>
+        </div>
+      </section>
+      {/* Pillars Section */}
+    </div>
+  )
 }
 
-export default Home;
-
+export default Home
diff --git a/src/pages/Wings.jsx b/src/pages/Wings.jsx
index 0d71996..400c50f 100644
--- a/src/pages/Wings.jsx
+++ b/src/pages/Wings.jsx
@@ -1,47 +1,46 @@
-"use client";
-import { useScroll, useTransform, motion, useInView } from "framer-motion";
-import React, { useEffect, useRef, useState } from "react";
-import { SparklesCore } from "../components/ui/sparkles";
+'use client'
+import { useScroll, useTransform, motion } from 'framer-motion'
+import React, { useEffect, useRef, useState } from 'react'
+import { SparklesCore } from '../components/ui/sparkles'
 
 const Wings = () => {
-  const ref = useRef(null);
-  const containerRef = useRef(null);
-  const [height, setHeight] = useState(0);
-  const [activeTerminal, setActiveTerminal] = useState(null);
-  const [scrollDirection, setScrollDirection] = useState("down");
-  const terminalRefs = useRef([]);
-  const lastScrollY = useRef(0);
+  const ref = useRef(null)
+  const containerRef = useRef(null)
+  const [height, setHeight] = useState(0)
+  const [activeTerminal, setActiveTerminal] = useState(null)
+  const [scrollDirection, setScrollDirection] = useState('down')
+  const lastScrollY = useRef(0)
 
   useEffect(() => {
     if (ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-      setHeight(rect.height);
+      const rect = ref.current.getBoundingClientRect()
+      setHeight(rect.height)
     }
-  }, [ref]);
+  }, [ref])
 
   // Track scroll direction
   useEffect(() => {
     const handleScroll = () => {
-      const currentScrollY = window.scrollY;
+      const currentScrollY = window.scrollY
       if (currentScrollY > lastScrollY.current) {
-        setScrollDirection("down");
+        setScrollDirection('down')
       } else if (currentScrollY < lastScrollY.current) {
-        setScrollDirection("up");
+        setScrollDirection('up')
       }
-      lastScrollY.current = currentScrollY;
-    };
+      lastScrollY.current = currentScrollY
+    }
 
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
 
   const { scrollYProgress } = useScroll({
     target: containerRef,
-    offset: ["start 10%", "end 50%"],
-  });
+    offset: ['start 10%', 'end 50%'],
+  })
 
-  const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height]);
-  const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
+  const heightTransform = useTransform(scrollYProgress, [0, 1], [0, height])
+  const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1])
 
   // Font definitions for each wing
   const wingFonts = [
@@ -52,112 +51,115 @@ const Wings = () => {
     "font-bold font-['Goldman']", // PR Wing
     "font-bold font-['Goldman']", // Design Wing
     "font-bold font-['Goldman']", // Literature Wing
-  ];
+  ]
 
-  // Icons for each wing
-  const wingIcons = [
-    "👑", // Executive Wing - crown
-    "💻", // Dev Wing - laptop
-    "⚡", // CP Wing - lightning bolt
-    "🤖", // ML Wing - robot
-    "📢", // PR Wing - megaphone
-    "🎨", // Design Wing - artist palette
-    "📚", // Literature Wing - books
-  ];
+  // Emojis for each wing
+  const wingImages = [
+    '👑', // Executive Wing
+    '💻', // Dev Wing
+    '🧠', // CP Wing
+    '🤖', // ML Wing
+    '📢', // PR Wing
+    '🎨', // Design Wing
+    '📝', // Literature Wing
+  ]
 
   // Animation variants for timeline markers
-  // Update your marker variants
-const markerVariants = {
-  hidden: { scale: 0, opacity: 0 },
-  visible: { 
-    scale: 1, 
-    opacity: 1,
-    transition: { 
-      type: "spring", 
-      stiffness: 300, 
-      damping: 15,
-      delay: 0.2
-    }
-  },
-  active: {
-    scale: 1.3,
-    boxShadow: "0 0 20px rgba(34, 211, 238, 0.8)",
-    transition: { 
-      duration: 0.3,
-      repeat: Infinity,
-      repeatType: "reverse"
-    }
-  }
-};
-
-// Add connection lines between markers
-const connectionVariants = {
-  hidden: { scaleY: 0, opacity: 0 },
-  visible: { 
-    scaleY: 1, 
-    opacity: 1,
-    transition: { 
-      duration: 0.8,
-      ease: "easeOut"
-    }
+  const markerVariants = {
+    hidden: { scale: 0, opacity: 0 },
+    visible: {
+      scale: 1,
+      opacity: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 300,
+        damping: 15,
+        delay: 0.2,
+      },
+    },
+    active: {
+      scale: 1.3,
+      boxShadow: '0 0 20px rgba(34, 211, 238, 0.8)',
+      transition: {
+        duration: 0.3,
+        repeat: Infinity,
+        repeatType: 'reverse',
+      },
+    },
   }
-};
 
   // Animation variants for terminal entries
   const terminalVariants = {
-    hidden: { 
-      opacity: 0, 
-      y: scrollDirection === "down" ? 50 : -50,
-      rotateX: -15 
+    hidden: {
+      opacity: 0,
+      y: scrollDirection === 'down' ? 50 : -50,
+      rotateX: -15,
     },
-    visible: { 
-      opacity: 1, 
+    visible: {
+      opacity: 1,
       y: 0,
       rotateX: 0,
-      transition: { 
-        duration: 0.8, 
-        ease: "easeOut",
-        staggerChildren: 0.1
-      }
-    }
-  };
+      transition: {
+        duration: 0.8,
+        ease: 'easeOut',
+        staggerChildren: 0.1,
+      },
+    },
+  }
 
   // Terminal content animation
   const contentVariants = {
-    hidden: { opacity: 0, y: scrollDirection === "down" ? 20 : -20 },
-    visible: { 
-      opacity: 1, 
+    hidden: { opacity: 0, y: scrollDirection === 'down' ? 20 : -20 },
+    visible: {
+      opacity: 1,
       y: 0,
-      transition: { duration: 0.5 }
-    }
-  };
+      transition: { duration: 0.5 },
+    },
+  }
+
+  // Header animation
+  const headerVariants = {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.8,
+        ease: 'easeOut',
+        delay: 0.2,
+      },
+    },
+  }
 
   // Data for the 7 wings of the Computer Science Society
   const wingsData = [
     {
-      title: "Executive Wing",
+      title: 'Executive Wing',
       content: (
-        <motion.div 
+        <motion.div
           className="terminal-theme p-6 rounded-lg border border-cyan-500/30 bg-black/80 text-cyan-300 font-mono backdrop-blur-sm relative overflow-hidden cursor-pointer"
-          whileHover={{ scale: 1.02, boxShadow: "0 0 20px rgba(34, 211, 238, 0.5)" }}
+          whileHover={{
+            scale: 1.02,
+            boxShadow: '0 0 20px rgba(34, 211, 238, 0.5)',
+          }}
           whileTap={{ scale: 0.99 }}
           onClick={() => setActiveTerminal(activeTerminal === 0 ? null : 0)}
-          animate={{ 
+          animate={{
             y: activeTerminal === 0 ? [0, -5, 0] : 0,
-            transition: { duration: 0.3 }
+            transition: { duration: 0.3 },
           }}
           variants={terminalVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: '-100px' }}
           custom={scrollDirection}
         >
-          {/* Animated background elements */}
           <div className="absolute inset-0 bg-circuit-pattern opacity-10"></div>
           <div className="absolute top-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
-          
-          {/* Terminal header */}
-          <motion.div className="flex mb-4 items-center" variants={contentVariants}>
+          <motion.div
+            className="flex mb-4 items-center"
+            variants={contentVariants}
+          >
             <div className="flex mr-3">
               <div className="w-3 h-3 bg-red-500 rounded-full mr-2 shadow-lg shadow-red-500/40"></div>
               <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2 shadow-lg shadow-yellow-500/40"></div>
@@ -165,52 +167,69 @@ const connectionVariants = {
             </div>
             <span className="text-cyan-400 text-xs">EXECUTIVE_TERMINAL</span>
           </motion.div>
-          
-          {/* Terminal content */}
-          <motion.p className="mb-2 text-green-400" variants={contentVariants}>$ executive --about</motion.p>
-          <motion.p className="text-cyan-200/80 mb-2" variants={contentVariants}>// Focuses on leadership, management, and organizational strategies.</motion.p>
-          <motion.p className="text-white" variants={contentVariants}>The Executive Wing of CSS is considered to be the backbone of the entire Computer Science Society. With the goal of making each and every event, module, and session organized under the banner of CSS a grand success, the wing manages, coordinates, and arranges resources and assets to ensure a smooth workflow among all the individual wings. The wing thus forms the binding force between the various sub-wings, thereby making every inch of hard work a grand success.</motion.p>
-          
-          {/* Command prompt */}
-          <motion.div className="flex items-center mt-4" variants={contentVariants}>
+          <motion.p className="mb-2 text-green-400" variants={contentVariants}>
+            $ executive --about
+          </motion.p>
+          <motion.p
+            className="text-cyan-200/80 mb-2"
+            variants={contentVariants}
+          >
+            // Focuses on leadership, management, and organizational strategies.
+          </motion.p>
+          <motion.p className="text-white" variants={contentVariants}>
+            The Executive Wing of CSS is considered to be the backbone of the
+            entire Computer Science Society. With the goal of making each and
+            every event, module, and session organized under the banner of CSS a
+            grand success, the wing manages, coordinates, and arranges resources
+            and assets to ensure a smooth workflow among all the individual
+            wings. The wing thus forms the binding force between the various
+            sub-wings, thereby making every inch of hard work a grand success.
+          </motion.p>
+          <motion.div
+            className="flex items-center mt-4"
+            variants={contentVariants}
+          >
             <span className="text-green-400 mr-2">$~</span>
-            <motion.div 
+            <motion.div
               className="w-2 h-4 bg-green-400"
               animate={{ opacity: [1, 0, 1] }}
               transition={{ duration: 1, repeat: Infinity }}
             ></motion.div>
           </motion.div>
-          
-          {/* Cyberpunk corner indicators */}
           <div className="absolute top-1 left-1 w-2 h-2 border-t border-l border-cyan-400"></div>
           <div className="absolute top-1 right-1 w-2 h-2 border-t border-r border-cyan-400"></div>
           <div className="absolute bottom-1 left-1 w-2 h-2 border-b border-l border-cyan-400"></div>
           <div className="absolute bottom-1 right-1 w-2 h-2 border-b border-r border-cyan-400"></div>
         </motion.div>
-      )
+      ),
     },
     {
-      title: "Dev Wing",
+      title: 'Dev Wing',
       content: (
-        <motion.div 
+        <motion.div
           className="terminal-theme p-6 rounded-lg border border-cyan-500/30 bg-black/80 text-cyan-300 font-mono backdrop-blur-sm relative overflow-hidden cursor-pointer"
-          whileHover={{ scale: 1.02, boxShadow: "0 0 20px rgba(34, 211, 238, 0.5)" }}
+          whileHover={{
+            scale: 1.02,
+            boxShadow: '0 0 20px rgba(34, 211, 238, 0.5)',
+          }}
           whileTap={{ scale: 0.99 }}
           onClick={() => setActiveTerminal(activeTerminal === 1 ? null : 1)}
-          animate={{ 
+          animate={{
             y: activeTerminal === 1 ? [0, -5, 0] : 0,
-            transition: { duration: 0.3 }
+            transition: { duration: 0.3 },
           }}
           variants={terminalVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: '-100px' }}
           custom={scrollDirection}
         >
           <div className="absolute inset-0 bg-circuit-pattern opacity-10"></div>
           <div className="absolute bottom-2 left-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse delay-1000"></div>
-          
-          <motion.div className="flex mb-4 items-center" variants={contentVariants}>
+          <motion.div
+            className="flex mb-4 items-center"
+            variants={contentVariants}
+          >
             <div className="flex mr-3">
               <div className="w-3 h-3 bg-red-500 rounded-full mr-2 shadow-lg shadow-red-500/40"></div>
               <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2 shadow-lg shadow-yellow-500/40"></div>
@@ -218,49 +237,71 @@ const connectionVariants = {
             </div>
             <span className="text-cyan-400 text-xs">DEV_TERMINAL</span>
           </motion.div>
-          
-          <motion.p className="mb-2 text-green-400" variants={contentVariants}>$ dev --about</motion.p>
-          <motion.p className="text-cyan-200/80 mb-2" variants={contentVariants}>// Building practical solutions</motion.p>
-          <motion.p className="text-white" variants={contentVariants}>The Developers-Wing of CSS is one of the most significant parts of the society and is responsible for maintaining and upgrading the official Website and App of the Society. The wing is targeted to provide a platform for the junior members of the CSE branch to showcase and upskill their technical knowledge while working on industry-standard projects. It is an ever-growing and expanding group of enthusiastic developers that take pride in building real-world projects and contributing to the proper functioning of our society.</motion.p>
-          
-          <motion.div className="flex items-center mt-4" variants={contentVariants}>
+          <motion.p className="mb-2 text-green-400" variants={contentVariants}>
+            $ dev --about
+          </motion.p>
+          <motion.p
+            className="text-cyan-200/80 mb-2"
+            variants={contentVariants}
+          >
+            // Building practical solutions
+          </motion.p>
+          <motion.p className="text-white" variants={contentVariants}>
+            The Developers-Wing of CSS is one of the most significant parts of
+            the society and is responsible for maintaining and upgrading the
+            official Website and App of the Society. The wing is targeted to
+            provide a platform for the junior members of the CSE branch to
+            showcase and upskill their technical knowledge while working on
+            industry-standard projects. It is an ever-growing and expanding
+            group of enthusiastic developers that take pride in building
+            real-world projects and contributing to the proper functioning of
+            our society.
+          </motion.p>
+          <motion.div
+            className="flex items-center mt-4"
+            variants={contentVariants}
+          >
             <span className="text-green-400 mr-2">$~</span>
-            <motion.div 
+            <motion.div
               className="w-2 h-4 bg-green-400"
               animate={{ opacity: [1, 0, 1] }}
               transition={{ duration: 1, repeat: Infinity }}
             ></motion.div>
           </motion.div>
-          
           <div className="absolute top-1 left-1 w-2 h-2 border-t border-l border-cyan-400"></div>
           <div className="absolute top-1 right-1 w-2 h-2 border-t border-r border-cyan-400"></div>
           <div className="absolute bottom-1 left-1 w-2 h-2 border-b border-l border-cyan-400"></div>
           <div className="absolute bottom-1 right-1 w-2 h-2 border-b border-r border-cyan-400"></div>
         </motion.div>
-      )
+      ),
     },
     {
-      title: "CP Wing",
+      title: 'CP Wing',
       content: (
-        <motion.div 
+        <motion.div
           className="terminal-theme p-6 rounded-lg border border-cyan-500/30 bg-black/80 text-cyan-300 font-mono backdrop-blur-sm relative overflow-hidden cursor-pointer"
-          whileHover={{ scale: 1.02, boxShadow: "0 0 20px rgba(34, 211, 238, 0.5)" }}
+          whileHover={{
+            scale: 1.02,
+            boxShadow: '0 0 20px rgba(34, 211, 238, 0.5)',
+          }}
           whileTap={{ scale: 0.99 }}
           onClick={() => setActiveTerminal(activeTerminal === 2 ? null : 2)}
-          animate={{ 
+          animate={{
             y: activeTerminal === 2 ? [0, -5, 0] : 0,
-            transition: { duration: 0.3 }
+            transition: { duration: 0.3 },
           }}
           variants={terminalVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: '-100px' }}
           custom={scrollDirection}
         >
           <div className="absolute inset-0 bg-circuit-pattern opacity-10"></div>
           <div className="absolute top-2 left-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse delay-1500"></div>
-          
-          <motion.div className="flex mb-4 items-center" variants={contentVariants}>
+          <motion.div
+            className="flex mb-4 items-center"
+            variants={contentVariants}
+          >
             <div className="flex mr-3">
               <div className="w-3 h-3 bg-red-500 rounded-full mr-2 shadow-lg shadow-red-500/40"></div>
               <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2 shadow-lg shadow-yellow-500/40"></div>
@@ -268,49 +309,69 @@ const connectionVariants = {
             </div>
             <span className="text-cyan-400 text-xs">CP_TERMINAL</span>
           </motion.div>
-          
-          <motion.p className="mb-2 text-green-400" variants={contentVariants}>$ cp --about</motion.p>
-          <motion.p className="text-cyan-200/80 mb-2" variants={contentVariants}>// Enhancing problem-solving skills</motion.p>
-          <motion.p className="text-white" variants={contentVariants}>The CP-Wing is a crucial part of CSS which is responsible for the improvement of problem-solving skills, along with the strengthening of the core DSA concepts which also serves as a torchbearer for students in the field of CP. The CP-Wing works hard to produce better and more efficient coders, who will then be able to help take the world to even greater heights, exclusively for the benefit of our students.</motion.p>
-          
-          <motion.div className="flex items-center mt-4" variants={contentVariants}>
+          <motion.p className="mb-2 text-green-400" variants={contentVariants}>
+            $ cp --about
+          </motion.p>
+          <motion.p
+            className="text-cyan-200/80 mb-2"
+            variants={contentVariants}
+          >
+            // Enhancing problem-solving skills
+          </motion.p>
+          <motion.p className="text-white" variants={contentVariants}>
+            The CP-Wing is a crucial part of CSS which is responsible for the
+            improvement of problem-solving skills, along with the strengthening
+            of the core DSA concepts which also serves as a torchbearer for
+            students in the field of CP. The CP-Wing works hard to produce
+            better and more efficient coders, who will then be able to help take
+            the world to even greater heights, exclusively for the benefit of
+            our students.
+          </motion.p>
+          <motion.div
+            className="flex items-center mt-4"
+            variants={contentVariants}
+          >
             <span className="text-green-400 mr-2">$~</span>
-            <motion.div 
+            <motion.div
               className="w-2 h-4 bg-green-400"
               animate={{ opacity: [1, 0, 1] }}
               transition={{ duration: 1, repeat: Infinity }}
             ></motion.div>
           </motion.div>
-          
           <div className="absolute top-1 left-1 w-2 h-2 border-t border-l border-cyan-400"></div>
           <div className="absolute top-1 right-1 w-2 h-2 border-t border-r border-cyan-400"></div>
           <div className="absolute bottom-1 left-1 w-2 h-2 border-b border-l border-cyan-400"></div>
           <div className="absolute bottom-1 right-1 w-2 h-2 border-b border-r border-cyan-400"></div>
         </motion.div>
-      )
+      ),
     },
     {
-      title: "ML Wing",
+      title: 'ML Wing',
       content: (
-        <motion.div 
+        <motion.div
           className="terminal-theme p-6 rounded-lg border border-cyan-500/30 bg-black/80 text-cyan-300 font-mono backdrop-blur-sm relative overflow-hidden cursor-pointer"
-          whileHover={{ scale: 1.02, boxShadow: "0 0 20px rgba(34, 211, 238, 0.5)" }}
+          whileHover={{
+            scale: 1.02,
+            boxShadow: '0 0 20px rgba(34, 211, 238, 0.5)',
+          }}
           whileTap={{ scale: 0.99 }}
           onClick={() => setActiveTerminal(activeTerminal === 3 ? null : 3)}
-          animate={{ 
+          animate={{
             y: activeTerminal === 3 ? [0, -5, 0] : 0,
-            transition: { duration: 0.3 }
+            transition: { duration: 0.3 },
           }}
           variants={terminalVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: '-100px' }}
           custom={scrollDirection}
         >
           <div className="absolute inset-0 bg-circuit-pattern opacity-10"></div>
           <div className="absolute bottom-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse delay-2000"></div>
-          
-          <motion.div className="flex mb-4 items-center" variants={contentVariants}>
+          <motion.div
+            className="flex mb-4 items-center"
+            variants={contentVariants}
+          >
             <div className="flex mr-3">
               <div className="w-3 h-3 bg-red-500 rounded-full mr-2 shadow-lg shadow-red-500/40"></div>
               <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2 shadow-lg shadow-yellow-500/40"></div>
@@ -318,49 +379,69 @@ const connectionVariants = {
             </div>
             <span className="text-cyan-400 text-xs">ML_TERMINAL</span>
           </motion.div>
-          
-          <motion.p className="mb-2 text-green-400" variants={contentVariants}>$ ml --about</motion.p>
-          <motion.p className="text-cyan-200/80 mb-2" variants={contentVariants}>// Advancing machine learning techniques</motion.p>
-          <motion.p className="text-white" variants={contentVariants}>The ML Wing of CSS is mainly responsible for developing a culture of machine learning and other aspects of artificial intelligence in our college. In order to help budding ML and AI enthusiasts, the wing also organize different events, workshops, speaker sessions, etc. in the domains of AI and ML. All the members of ML Wing are highly motivated and enthusiastic to work towards the greater good of the CSS society.</motion.p>
-          
-          <motion.div className="flex items-center mt-4" variants={contentVariants}>
+          <motion.p className="mb-2 text-green-400" variants={contentVariants}>
+            $ ml --about
+          </motion.p>
+          <motion.p
+            className="text-cyan-200/80 mb-2"
+            variants={contentVariants}
+          >
+            // Advancing machine learning techniques
+          </motion.p>
+          <motion.p className="text-white" variants={contentVariants}>
+            The ML Wing of CSS is mainly responsible for developing a culture of
+            machine learning and other aspects of artificial intelligence in our
+            college. In order to help budding ML and AI enthusiasts, the wing
+            also organize different events, workshops, speaker sessions, etc. in
+            the domains of AI and ML. All the members of ML Wing are highly
+            motivated and enthusiastic to work towards the greater good of the
+            CSS society.
+          </motion.p>
+          <motion.div
+            className="flex items-center mt-4"
+            variants={contentVariants}
+          >
             <span className="text-green-400 mr-2">$~</span>
-            <motion.div 
+            <motion.div
               className="w-2 h-4 bg-green-400"
               animate={{ opacity: [1, 0, 1] }}
               transition={{ duration: 1, repeat: Infinity }}
             ></motion.div>
           </motion.div>
-          
           <div className="absolute top-1 left-1 w-2 h-2 border-t border-l border-cyan-400"></div>
           <div className="absolute top-1 right-1 w-2 h-2 border-t border-r border-cyan-400"></div>
           <div className="absolute bottom-1 left-1 w-2 h-2 border-b border-l border-cyan-400"></div>
           <div className="absolute bottom-1 right-1 w-2 h-2 border-b border-r border-cyan-400"></div>
         </motion.div>
-      )
+      ),
     },
     {
-      title: "PR Wing",
+      title: 'PR Wing',
       content: (
-        <motion.div 
+        <motion.div
           className="terminal-theme p-6 rounded-lg border border-cyan-500/30 bg-black/80 text-cyan-300 font-mono backdrop-blur-sm relative overflow-hidden cursor-pointer"
-          whileHover={{ scale: 1.02, boxShadow: "0 0 20px rgba(34, 211, 238, 0.5)" }}
+          whileHover={{
+            scale: 1.02,
+            boxShadow: '0 0 20px rgba(34, 211, 238, 0.5)',
+          }}
           whileTap={{ scale: 0.99 }}
           onClick={() => setActiveTerminal(activeTerminal === 4 ? null : 4)}
-          animate={{ 
+          animate={{
             y: activeTerminal === 4 ? [0, -5, 0] : 0,
-            transition: { duration: 0.3 }
+            transition: { duration: 0.3 },
           }}
           variants={terminalVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: '-100px' }}
           custom={scrollDirection}
         >
           <div className="absolute inset-0 bg-circuit-pattern opacity-10"></div>
           <div className="absolute bottom-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse delay-2000"></div>
-          
-          <motion.div className="flex mb-4 items-center" variants={contentVariants}>
+          <motion.div
+            className="flex mb-4 items-center"
+            variants={contentVariants}
+          >
             <div className="flex mr-3">
               <div className="w-3 h-3 bg-red-500 rounded-full mr-2 shadow-lg shadow-red-500/40"></div>
               <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2 shadow-lg shadow-yellow-500/40"></div>
@@ -368,49 +449,69 @@ const connectionVariants = {
             </div>
             <span className="text-cyan-400 text-xs">PR_TERMINAL</span>
           </motion.div>
-          
-          <motion.p className="mb-2 text-green-400" variants={contentVariants}>$ pr --about</motion.p>
-          <motion.p className="text-cyan-200/80 mb-2" variants={contentVariants}>// Advancing public relations strategies</motion.p>
-          <motion.p className="text-white" variants={contentVariants}>The Public Relations Wing of the Computer Science Society, NIT Silchar Society is the division responsible for maintaining Relations of the Society with External Entities, Organizations, and Individuals. The PR Wing of the CSS, NIT Silchar works closely with other Wings of the society to ensure that all of the society's activities are effectively carried out and hereby make an impression on the image of the Society holistically.</motion.p>
-          
-          <motion.div className="flex items-center mt-4" variants={contentVariants}>
+          <motion.p className="mb-2 text-green-400" variants={contentVariants}>
+            $ pr --about
+          </motion.p>
+          <motion.p
+            className="text-cyan-200/80 mb-2"
+            variants={contentVariants}
+          >
+            // Advancing public relations strategies
+          </motion.p>
+          <motion.p className="text-white" variants={contentVariants}>
+            The Public Relations Wing of the Computer Science Society, NIT
+            Silchar Society is the division responsible for maintaining
+            Relations of the Society with External Entities, Organizations, and
+            Individuals. The PR Wing of the CSS, NIT Silchar works closely with
+            other Wings of the society to ensure that all of the society's
+            activities are effectively carried out and hereby make an impression
+            on the image of the Society holistically.
+          </motion.p>
+          <motion.div
+            className="flex items-center mt-4"
+            variants={contentVariants}
+          >
             <span className="text-green-400 mr-2">$~</span>
-            <motion.div 
+            <motion.div
               className="w-2 h-4 bg-green-400"
               animate={{ opacity: [1, 0, 1] }}
               transition={{ duration: 1, repeat: Infinity }}
             ></motion.div>
           </motion.div>
-          
           <div className="absolute top-1 left-1 w-2 h-2 border-t border-l border-cyan-400"></div>
           <div className="absolute top-1 right-1 w-2 h-2 border-t border-r border-cyan-400"></div>
           <div className="absolute bottom-1 left-1 w-2 h-2 border-b border-l border-cyan-400"></div>
           <div className="absolute bottom-1 right-1 w-2 h-2 border-b border-r border-cyan-400"></div>
         </motion.div>
-      )
+      ),
     },
     {
-      title: "Design Wing",
+      title: 'Design Wing',
       content: (
-        <motion.div 
+        <motion.div
           className="terminal-theme p-6 rounded-lg border border-cyan-500/30 bg-black/80 text-cyan-300 font-mono backdrop-blur-sm relative overflow-hidden cursor-pointer"
-          whileHover={{ scale: 1.02, boxShadow: "0 0 20px rgba(34, 211, 238, 0.5)" }}
+          whileHover={{
+            scale: 1.02,
+            boxShadow: '0 0 20px rgba(34, 211, 238, 0.5)',
+          }}
           whileTap={{ scale: 0.99 }}
           onClick={() => setActiveTerminal(activeTerminal === 5 ? null : 5)}
-          animate={{ 
+          animate={{
             y: activeTerminal === 5 ? [0, -5, 0] : 0,
-            transition: { duration: 0.3 }
+            transition: { duration: 0.3 },
           }}
           variants={terminalVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: '-100px' }}
           custom={scrollDirection}
         >
           <div className="absolute inset-0 bg-circuit-pattern opacity-10"></div>
           <div className="absolute top-1/2 left-1/2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse delay-2500 transform -translate-x-1/2 -translate-y-1/2"></div>
-          
-          <motion.div className="flex mb-4 items-center" variants={contentVariants}>
+          <motion.div
+            className="flex mb-4 items-center"
+            variants={contentVariants}
+          >
             <div className="flex mr-3">
               <div className="w-3 h-3 bg-red-500 rounded-full mr-2 shadow-lg shadow-red-500/40"></div>
               <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2 shadow-lg shadow-yellow-500/40"></div>
@@ -418,92 +519,127 @@ const connectionVariants = {
             </div>
             <span className="text-cyan-400 text-xs">DESIGN_TERMINAL</span>
           </motion.div>
-          
-          <motion.p className="mb-2 text-green-400" variants={contentVariants}>$ design --about</motion.p>
-          <motion.p className="text-cyan-200/80 mb-2" variants={contentVariants}>// Crafting user experiences</motion.p>
-          <motion.p className="text-white" variants={contentVariants}>The Design Wing of CSS is a community of designers whose goal is to provide a good environment for designers to grow their existing talent and sharpen it by working on real-world projects for our society. It focuses on conducting introductory sessions on the basics of design and industry-standard tools such as Adobe Illustrator, Adobe Photoshop, Adobe Premiere Pro, Adobe After Effects, Figma, etc. The wing believes in the fact that everyone can be a designer with just a little bit of practice and dedication.</motion.p>
-          
-          <motion.div className="flex items-center mt-4" variants={contentVariants}>
+          <motion.p className="mb-2 text-green-400" variants={contentVariants}>
+            $ design --about
+          </motion.p>
+          <motion.p
+            className="text-cyan-200/80 mb-2"
+            variants={contentVariants}
+          >
+            // Crafting user experiences
+          </motion.p>
+          <motion.p className="text-white" variants={contentVariants}>
+            The Design Wing of CSS is a community of designers whose goal is to
+            provide a good environment for designers to grow their existing
+            talent and sharpen it by working on real-world projects for our
+            society. It focuses on conducting introductory sessions on the
+            basics of design and industry-standard tools such as Adobe
+            Illustrator, Adobe Photoshop, Adobe Premiere Pro, Adobe After
+            Effects, Figma, etc. The wing believes in the fact that everyone can
+            be a designer with just a little bit of practice and dedication.
+          </motion.p>
+          <motion.div
+            className="flex items-center mt-4"
+            variants={contentVariants}
+          >
             <span className="text-green-400 mr-2">$~</span>
-            <motion.div 
+            <motion.div
               className="w-2 h-4 bg-green-400"
               animate={{ opacity: [1, 0, 1] }}
               transition={{ duration: 1, repeat: Infinity }}
             ></motion.div>
           </motion.div>
-          
           <div className="absolute top-1 left-1 w-2 h-2 border-t border-l border-cyan-400"></div>
           <div className="absolute top-1 right-1 w-2 h-2 border-t border-r border-cyan-400"></div>
           <div className="absolute bottom-1 left-1 w-2 h-2 border-b border-l border-cyan-400"></div>
           <div className="absolute bottom-1 right-1 w-2 h-2 border-b border-r border-cyan-400"></div>
         </motion.div>
-      )
+      ),
     },
     {
-      title: "Literature Wing",
+      title: 'Literature Wing',
       content: (
-        <motion.div 
+        <motion.div
           className="terminal-theme p-6 rounded-lg border border-cyan-500/30 bg-black/80 text-cyan-300 font-mono backdrop-blur-sm relative overflow-hidden cursor-pointer"
-          whileHover={{ scale: 1.02, boxShadow: "0 0 20px rgba(34, 211, 238, 0.5)" }}
+          whileHover={{
+            scale: 1.02,
+            boxShadow: '0 0 20px rgba(34, 211, 238, 0.5)',
+          }}
           whileTap={{ scale: 0.99 }}
           onClick={() => setActiveTerminal(activeTerminal === 6 ? null : 6)}
-          animate={{ 
+          animate={{
             y: activeTerminal === 6 ? [0, -5, 0] : 0,
-            transition: { duration: 0.3 }
+            transition: { duration: 0.3 },
           }}
           variants={terminalVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
+          viewport={{ once: true, margin: '-100px' }}
           custom={scrollDirection}
         >
           <div className="absolute inset-0 bg-circuit-pattern opacity-10"></div>
           <div className="absolute bottom-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse delay-2000"></div>
-          
-          <motion.div className="flex mb-4 items-center" variants={contentVariants}>
+          <motion.div
+            className="flex mb-4 items-center"
+            variants={contentVariants}
+          >
             <div className="flex mr-3">
               <div className="w-3 h-3 bg-red-500 rounded-full mr-2 shadow-lg shadow-red-500/40"></div>
               <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2 shadow-lg shadow-yellow-500/40"></div>
               <div className="w-3 h-3 bg-green-500 rounded-full shadow-lg shadow-green-500/40"></div>
             </div>
-            <span className="text-cyan-400 text-xs">Literature_TERMINAL</span>
+            <span className="text-cyan-400 text-xs">LITERATURE_TERMINAL</span>
           </motion.div>
-          
-          <motion.p className="mb-2 text-green-400" variants={contentVariants}>$ Literature --about</motion.p>
-          <motion.p className="text-cyan-200/80 mb-2" variants={contentVariants}>// Exploring the world of literature</motion.p>
-          <motion.p className="text-white" variants={contentVariants}>The Literary wing of CSS takes care of all the literary work published and managed by the Computer Science Society of NIT Silchar. From social media posts, technical and website content for the official CSS website and Play Store application to description taglines of social media handles, the literary wing handles it all. BITSCRIBE, the annual magazine of the Computer Science Society, is also compiled and published by the literary wing.</motion.p>
-          
-          <motion.div className="flex items-center mt-4" variants={contentVariants}>
+          <motion.p className="mb-2 text-green-400" variants={contentVariants}>
+            $ literature --about
+          </motion.p>
+          <motion.p
+            className="text-cyan-200/80 mb-2"
+            variants={contentVariants}
+          >
+            // Exploring the world of literature
+          </motion.p>
+          <motion.p className="text-white" variants={contentVariants}>
+            The Literary wing of CSS takes care of all the literary work
+            published and managed by the Computer Science Society of NIT
+            Silchar. From social media posts, technical and website content for
+            the official CSS website and Play Store application to description
+            taglines of social media handles, the literary wing handles it all.
+            BITSCRIBE, the annual magazine of the Computer Science Society, is
+            also compiled and published by the literary wing.
+          </motion.p>
+          <motion.div
+            className="flex items-center mt-4"
+            variants={contentVariants}
+          >
             <span className="text-green-400 mr-2">$~</span>
-            <motion.div 
+            <motion.div
               className="w-2 h-4 bg-green-400"
               animate={{ opacity: [1, 0, 1] }}
               transition={{ duration: 1, repeat: Infinity }}
             ></motion.div>
           </motion.div>
-          
           <div className="absolute top-1 left-1 w-2 h-2 border-t border-l border-cyan-400"></div>
           <div className="absolute top-1 right-1 w-2 h-2 border-t border-r border-cyan-400"></div>
           <div className="absolute bottom-1 left-1 w-2 h-2 border-b border-l border-cyan-400"></div>
           <div className="absolute bottom-1 right-1 w-2 h-2 border-b border-r border-cyan-400"></div>
         </motion.div>
-      )
+      ),
     },
-  ];
+  ]
 
   return (
     <div
       className="w-full min-h-screen bg-[linear-gradient(to_right,#000000_55%,#021547_100%)] text-white font-sans md:px-10 relative overflow-hidden"
-      ref={containerRef}>
-      
+      ref={containerRef}
+    >
       {/* Animated background elements */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        {/* Binary rain animation */}
         <div className="absolute inset-0 opacity-20">
           {[...Array(30)].map((_, i) => (
             <div
               key={i}
-              className="absolute text-green-400 text-xs animate-[fall_5s_linear_infinite]"
+              className="absolute text-green-400/70 text-xs animate-[fall_6s_linear_infinite] font-mono"
               style={{
                 left: `${Math.random() * 100}%`,
                 animationDelay: `${Math.random() * 5}s`,
@@ -514,71 +650,76 @@ const connectionVariants = {
             </div>
           ))}
         </div>
-
-        {/* Grid lines */}
         <div className="absolute inset-0 bg-grid-pattern bg-[length:50px_50px] opacity-10"></div>
-
-        {/* Pulsing circles */}
         <div className="absolute w-72 h-72 bg-cyan-600/10 rounded-full blur-xl animate-[pulse_4s_ease-in-out_infinite] top-10 left-10"></div>
         <div className="absolute w-96 h-96 bg-purple-600/10 rounded-full blur-xl animate-[pulse_5s_ease-in-out_infinite_1s] bottom-20 right-10"></div>
       </div>
 
-      <div className="relative max-w-7xl mx-auto py-10 px-4 md:px-8 lg:px-10 z-10 mt-15">
-        {/* Header with centered WINGS title and sparkle effect */}
-        <div className="text-center mb-5 relative">
+      <div className="relative max-w-7xl mx-auto py-12 px-4 md:px-8 lg:px-10 z-10 mt-15">
+        {/* Enhanced Header Section */}
+        <motion.div
+          className="text-center mb-8 relative"
+          initial="hidden"
+          animate="visible"
+          variants={headerVariants}
+        >
           <div className="relative inline-block">
-            <h1 
-              className="text-7xl font-bold mb-2 text-white"
+            <h1
+              className="text-6xl md:text-8xl font-extrabold mb-3 text-white tracking-tight drop-shadow-[0_0_20px_rgba(34,211,238,0.5)]"
               style={{ fontFamily: 'Goldman, sans-serif' }}
             >
               WINGS
             </h1>
-            {/* Sparkle effect */}
-            <div className="absolute -inset-10 -z-10">
+            <div className="absolute -inset-12 -z-10">
               <SparklesCore
                 background="transparent"
-                minSize={0.4}
-                maxSize={1}
-                particleDensity={100}
+                minSize={0.5}
+                maxSize={1.2}
+                particleDensity={120}
                 className="w-full h-full"
-                particleColor="#FFFFFF"
+                particleColor="#38BDF8"
               />
             </div>
           </div>
-          <p className="text-cyan-300/80 text-sm md:text-base max-w-sm mx-auto font-mono">
-            The specialized divisions of our Computer Science Society
+          <p className="text-cyan-300/90 text-base md:text-lg max-w-md mx-auto font-mono leading-relaxed">
+            Discover the specialized divisions powering our Computer Science
+            Society
           </p>
-          <div className="relative flex justify-center items-center mt-4">
-            <div className="absolute inset-x-20  bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm" />
-            <div className="absolute inset-x-20  bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
-            <div className="absolute inset-x-60  bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm" />
-            <div className="absolute inset-x-60  bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />
+          <div className="relative flex justify-center items-center mt-6">
+            <div className="absolute inset-x-10 bg-gradient-to-r from-transparent via-cyan-500 to-transparent h-[3px] w-5/6 blur-sm" />
+            <div className="absolute inset-x-10 bg-gradient-to-r from-transparent via-cyan-500 to-transparent h-px w-5/6" />
+            <div className="absolute inset-x-40 bg-gradient-to-r from-transparent via-blue-500 to-transparent h-[6px] w-2/5 blur-sm" />
+            <div className="absolute inset-x-40 bg-gradient-to-r from-transparent via-blue-500 to-transparent h-px w-2/5" />
           </div>
-        </div>
+        </motion.div>
       </div>
-      
+
       <div ref={ref} className="relative max-w-7xl mx-auto pb-20 z-10">
         {wingsData.map((item, index) => (
-          <div key={index} className="flex justify-start pt-10 md:pt-40 md:gap-10">
-            <div className="sticky flex flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
-              <motion.div 
+          <div
+            key={index}
+            className="flex justify-start pt-10 md:pt-40 md:gap-10"
+          >
+            <div className="hidden md:flex sticky flex-col md:flex-row z-40 items-center top-40 self-start max-w-xs lg:max-w-sm md:w-full">
+              <motion.div
                 className="h-10 absolute left-3 md:left-3 w-10 rounded-full bg-black flex items-center justify-center border border-cyan-500/50"
                 variants={markerVariants}
                 initial="hidden"
                 whileInView="visible"
-                viewport={{ once: true, margin: "-100px" }}
-                animate={activeTerminal === index ? "active" : ""}
+                viewport={{ once: true, margin: '-100px' }}
+                animate={activeTerminal === index ? 'active' : ''}
               >
-                <motion.div 
-                  className="h-8 w-8 rounded-full bg-cyan-900/30 border border-cyan-500/30 flex items-center justify-center text-xl shadow-lg shadow-cyan-400/20"
+                <motion.div
+                  className="h-8 w-8 rounded-full bg-cyan-900/30 border border-cyan-500/30 flex items-center justify-center shadow-lg shadow-cyan-400/20"
                   whileHover={{ scale: 1.2 }}
-                  transition={{ type: "spring", stiffness: 400, damping: 10 }}
+                  transition={{ type: 'spring', stiffness: 400, damping: 10 }}
                 >
-                  {wingIcons[index]}
+                  <span className="text-lg">{wingImages[index]}</span>
                 </motion.div>
               </motion.div>
-              <h3 className={`hidden md:block text-xl md:pl-20 md:text-5xl text-cyan-300/90 relative ${wingFonts[index]}`}>
-                {/* Sparkles effect for each wing title */}
+              <h3
+                className={`hidden md:block text-xl md:pl-20 md:text-5xl text-cyan-300/90 relative ${wingFonts[index]}`}
+              >
                 <div className="absolute -inset-6 -z-10">
                   <SparklesCore
                     background="transparent"
@@ -593,30 +734,34 @@ const connectionVariants = {
               </h3>
             </div>
 
-            <div className="relative pl-20 pr-4 md:pl-4 w-full">
-              <h3 className={`md:hidden block text-2xl mb-4 text-left text-cyan-300/90 relative ${wingFonts[index]}`}>
-                {/* Sparkles effect for mobile view */}
-                <div className="absolute -inset-4 -z-10">
-                  <SparklesCore
-                    background="transparent"
-                    minSize={0.2}
-                    maxSize={0.6}
-                    particleDensity={30}
-                    className="w-full h-full"
-                    particleColor="#38BDF8"
-                  />
-                </div>
-                {item.title}
-              </h3>
-              {item.content}
+            <div className="flex justify-center md:justify-start px-4 md:pl-4 md:pr-4 w-full">
+              <div className="w-full max-w-md md:max-w-none">
+                <h3
+                  className={`md:hidden block text-2xl mb-4 text-center md:text-left text-cyan-300/90 relative ${wingFonts[index]}`}
+                >
+                  <div className="absolute -inset-4 -z-10">
+                    <SparklesCore
+                      background="transparent"
+                      minSize={0.2}
+                      maxSize={0.6}
+                      particleDensity={30}
+                      className="w-full h-full"
+                      particleColor="#38BDF8"
+                    />
+                  </div>
+                  {item.title} {wingImages[index]}
+                </h3>
+                {item.content}
+              </div>
             </div>
           </div>
         ))}
         <div
+          className="hidden md:block absolute md:left-8 left-8 top-0 overflow-hidden w-[2px] bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-[0%] via-cyan-700 to-transparent to-[99%] [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)]"
           style={{
-            height: height + "px",
+            height: height + 'px',
           }}
-          className="absolute md:left-8 left-8 top-0 overflow-hidden w-[2px] bg-[linear-gradient(to_bottom,var(--tw-gradient-stops))] from-transparent from-[0%] via-cyan-700 to-transparent to-[99%] [mask-image:linear-gradient(to_bottom,transparent_0%,black_10%,black_90%,transparent_100%)]">
+        >
           <motion.div
             style={{
               height: heightTransform,
@@ -627,7 +772,7 @@ const connectionVariants = {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Wings;
\ No newline at end of file
+export default Wings