From bdbd8e9656b3ea4677ffce5dd01a5288019ce03a Mon Sep 17 00:00:00 2001
From: Brij123179 <7brijpatel@gmail.com>
Date: Wed, 15 Oct 2025 19:30:18 +0530
Subject: [PATCH 1/7] feat: Add dynamic scroll sidebar with smooth animations

- Created ScrollSidebar component matching Delta Force design
- White vertical line with progress indicator
- Dynamic bars that extend based on scroll position
- Green gradient progress line fills as user scrolls
- Pulsing dot indicator on active section
- Smooth hover effects with tooltips
- Click to navigate to sections
- Fully responsive (hidden on mobile, visible on desktop)
- Added section IDs to footer for proper tracking
- Updated home page with proper sections (hero, about, features)

Enhancements:
- Bars extend on hover with glow effect
- Tooltip labels appear on hover
- Scroll percentage indicator
- Smooth scroll navigation with navbar offset
- Professional animations and transitions
---
 cpsquad/app/component/Footer/Footer.jsx       |   2 +-
 .../component/ScrollSidebar/ScrollSidebar.jsx | 146 +++++++
 cpsquad/app/layout.js                         |   2 +
 cpsquad/app/page.js                           | 396 ++++--------------
 create-pr.bat                                 |  68 +++
 create-pr.ps1                                 |  92 ++++
 footer-changes.patch                          | Bin 0 -> 13786 bytes
 7 files changed, 384 insertions(+), 322 deletions(-)
 create mode 100644 cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
 create mode 100644 create-pr.bat
 create mode 100644 create-pr.ps1
 create mode 100644 footer-changes.patch

diff --git a/cpsquad/app/component/Footer/Footer.jsx b/cpsquad/app/component/Footer/Footer.jsx
index 726d07e..9f4ea2c 100644
--- a/cpsquad/app/component/Footer/Footer.jsx
+++ b/cpsquad/app/component/Footer/Footer.jsx
@@ -37,7 +37,7 @@ const Footer = () => {
   ];
 
   return (
-    <footer className="relative bg-gradient-to-b from-[#0a0a0a] to-[#111111] text-white border-t border-gray-800">
+    <footer id="footer" className="relative bg-gradient-to-b from-[#0a0a0a] to-[#111111] text-white border-t border-gray-800">
       {/* Gradient overlay for depth */}
       <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
       
diff --git a/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx b/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
new file mode 100644
index 0000000..979d51a
--- /dev/null
+++ b/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+const ScrollSidebar = () => {
+  const [activeSection, setActiveSection] = useState(0);
+  const [scrollProgress, setScrollProgress] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Define sections - you can customize these based on your page structure
+  const sections = [
+    { id: "hero", label: "Home" },
+    { id: "about", label: "About" },
+    { id: "features", label: "Features" },
+    { id: "footer", label: "Contact" },
+  ];
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const windowHeight = window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
+      const scrollTop = window.scrollY;
+
+      // Show sidebar after scrolling a bit
+      setIsVisible(scrollTop > 100);
+
+      // Calculate overall scroll progress (0 to 1)
+      const maxScroll = documentHeight - windowHeight;
+      const progress = maxScroll > 0 ? scrollTop / maxScroll : 0;
+      setScrollProgress(Math.min(progress, 1));
+
+      // Determine active section based on scroll position
+      const sectionElements = sections.map((section) =>
+        document.getElementById(section.id)
+      );
+
+      let currentSection = 0;
+      sectionElements.forEach((element, index) => {
+        if (element) {
+          const rect = element.getBoundingClientRect();
+          // If section is in the viewport center, mark as active
+          if (rect.top <= windowHeight * 0.5 && rect.bottom >= windowHeight * 0.3) {
+            currentSection = index;
+          }
+        }
+      });
+
+      setActiveSection(currentSection);
+    };
+
+    // Initial call after a short delay to ensure DOM is ready
+    setTimeout(handleScroll, 100);
+
+    // Add scroll listener
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleScroll);
+    };
+  }, []);
+
+  const scrollToSection = (sectionId) => {
+    const element = document.getElementById(sectionId);
+    if (element) {
+      const offset = 80; // Account for navbar
+      const elementPosition = element.getBoundingClientRect().top;
+      const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+      window.scrollTo({
+        top: offsetPosition,
+        behavior: "smooth"
+      });
+    }
+  };
+
+  return (
+    <div 
+      className={`fixed right-4 md:right-8 top-1/2 -translate-y-1/2 z-40 hidden lg:block transition-opacity duration-500 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+    >
+      <div className="relative flex flex-col items-center" style={{ height: '300px' }}>
+        {/* Main vertical line */}
+        <div className="absolute left-1/2 -translate-x-1/2 w-[2px] h-full bg-white/30 rounded-full"></div>
+
+        {/* Progress line that fills based on scroll */}
+        <div
+          className="absolute left-1/2 -translate-x-1/2 top-0 w-[2px] rounded-full bg-gradient-to-b from-emerald-400 via-green-500 to-emerald-600 shadow-lg shadow-green-500/50 transition-all duration-500 ease-out"
+          style={{ height: `${scrollProgress * 100}%` }}
+        ></div>
+
+        {/* Section indicators (bars) */}
+        <div className="relative h-full flex flex-col justify-between py-4">
+          {sections.map((section, index) => (
+            <div
+              key={section.id}
+              className="relative z-10 group cursor-pointer flex items-center py-2"
+              onClick={() => scrollToSection(section.id)}
+            >
+              {/* Bar indicator */}
+              <div
+                className={`h-[2px] transition-all duration-500 ease-out rounded-full ${
+                  index === activeSection
+                    ? "bg-white w-16 shadow-lg shadow-white/50"
+                    : index < activeSection
+                    ? "bg-white/80 w-12 group-hover:w-14 group-hover:shadow-md group-hover:shadow-white/30"
+                    : "bg-white/30 w-8 group-hover:bg-white/70 group-hover:w-12 group-hover:shadow-sm group-hover:shadow-white/20"
+                }`}
+              ></div>
+
+              {/* Tooltip label */}
+              <div className="absolute right-full mr-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none scale-95 group-hover:scale-100">
+                <div className="bg-white text-black px-4 py-2 rounded-md text-sm font-mono whitespace-nowrap shadow-xl border border-gray-200">
+                  {section.label}
+                  {/* Arrow */}
+                  <div className="absolute left-full top-1/2 -translate-y-1/2 -ml-[1px]">
+                    <div className="w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-l-[6px] border-l-white"></div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Active indicator dot with pulse effect */}
+              {index === activeSection && (
+                <>
+                  <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-emerald-400 rounded-full shadow-lg shadow-emerald-500/50"></div>
+                  <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-emerald-400 rounded-full animate-ping opacity-75"></div>
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Scroll percentage indicator */}
+      <div className="mt-6 text-center">
+        <div className="text-white/70 text-xs font-mono font-semibold bg-white/10 px-3 py-1 rounded-full border border-white/20">
+          {Math.round(scrollProgress * 100)}%
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ScrollSidebar;
diff --git a/cpsquad/app/layout.js b/cpsquad/app/layout.js
index 16658c5..fe4211b 100644
--- a/cpsquad/app/layout.js
+++ b/cpsquad/app/layout.js
@@ -2,6 +2,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Navbar from "./component/Navbar/Navbar";
 import Footer from "./component/Footer/Footer";
+import ScrollSidebar from "./component/ScrollSidebar/ScrollSidebar";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -25,6 +26,7 @@ export default function RootLayout({ children }) {
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <Navbar />
+        <ScrollSidebar />
         <main className="pt-16">{children}</main>
         <Footer />
       </body>
diff --git a/cpsquad/app/page.js b/cpsquad/app/page.js
index ce92e19..64c702c 100644
--- a/cpsquad/app/page.js
+++ b/cpsquad/app/page.js
@@ -2,332 +2,86 @@ import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 bg-white text-black">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className=""
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-black text-white gap-2 hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-        <Image
-          className=""
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-black text-white gap-2 hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-        <Image
-          className=""
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-black text-white gap-2 hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-        <Image
-          className=""
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-black text-white gap-2 hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+    <div className="font-sans bg-[#0a0a0a] text-white">
+      {/* Hero Section */}
+      <section id="hero" className="min-h-screen flex items-center justify-center p-8">
+        <div className="text-center max-w-4xl">
+          <h1 className="text-6xl md:text-8xl font-bold mb-6 tracking-tight">
+            CP SQUAD_
+          </h1>
+          <p className="text-xl md:text-2xl text-gray-400 font-mono mb-8">
+            Building competitive programmers, one problem at a time.
+          </p>
+          <div className="flex gap-4 justify-center flex-wrap">
+            <a
+              href="#about"
+              className="px-8 py-3 bg-green-500 hover:bg-green-600 text-black font-semibold rounded transition-colors"
+            >
+              Learn More
+            </a>
+            <a
+              href="#features"
+              className="px-8 py-3 border border-white/30 hover:border-white/60 text-white font-semibold rounded transition-colors"
+            >
+              Explore Features
+            </a>
+          </div>
         </div>
-        <Image
-          className=""
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+      </section>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-black text-white gap-2 hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+      {/* About Section */}
+      <section id="about" className="min-h-screen flex items-center justify-center p-8 bg-[#111111]">
+        <div className="max-w-4xl">
+          <h2 className="text-4xl md:text-6xl font-bold mb-8 tracking-tight">
+            ABOUT US_
+          </h2>
+          <p className="text-lg md:text-xl text-gray-400 mb-6 leading-relaxed">
+            We're coders, enthusiasts, geeks. We're CP Squad - a community dedicated to 
+            building competitive programming skills and fostering a culture of continuous learning.
+          </p>
+          <p className="text-lg md:text-xl text-gray-400 leading-relaxed">
+            Fueled by a passion for programming and problem-solving, our club doesn't just 
+            build skills, we delve deeper into algorithms, data structures, and competitive programming strategies.
+          </p>
         </div>
-        <Image
-          className=""
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+      </section>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-black text-white gap-2 hover:bg-[#383838] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+      {/* Features Section */}
+      <section id="features" className="min-h-screen flex items-center justify-center p-8">
+        <div className="max-w-6xl w-full">
+          <h2 className="text-4xl md:text-6xl font-bold mb-12 text-center tracking-tight">
+            WHAT WE DO_
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {[
+              {
+                title: "Competitive Programming",
+                description: "Regular contests, practice sessions, and algorithm workshops to sharpen your coding skills.",
+                icon: "💻"
+              },
+              {
+                title: "Community Events",
+                description: "Hackathons, coding competitions, and collaborative learning sessions with peers.",
+                icon: "🚀"
+              },
+              {
+                title: "Skill Development",
+                description: "Learn from industry experts, improve problem-solving abilities, and build your portfolio.",
+                icon: "📚"
+              }
+            ].map((feature, index) => (
+              <div
+                key={index}
+                className="bg-[#1a1a1a] p-8 rounded-lg border border-gray-800 hover:border-green-500 transition-colors"
+              >
+                <div className="text-4xl mb-4">{feature.icon}</div>
+                <h3 className="text-2xl font-bold mb-4">{feature.title}</h3>
+                <p className="text-gray-400">{feature.description}</p>
+              </div>
+            ))}
+          </div>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      </section>
     </div>
   );
 }
diff --git a/create-pr.bat b/create-pr.bat
new file mode 100644
index 0000000..2f99681
--- /dev/null
+++ b/create-pr.bat
@@ -0,0 +1,68 @@
+@echo off
+echo ========================================
+echo CPSquad Footer PR - Complete Workflow
+echo ========================================
+echo.
+
+echo STEP 1: Fork the Repository
+echo ----------------------------
+echo 1. Open this URL in your browser:
+echo    https://github.com/CPSquad1/CPSquad
+echo.
+echo 2. Click the "Fork" button (top-right corner)
+echo.
+echo 3. Wait for GitHub to create your fork
+echo.
+echo Press any key when fork is created...
+pause > nul
+
+echo.
+echo STEP 2: Add Your Fork as Remote
+echo --------------------------------
+cd /d e:\CP\CPSquad
+git remote add myfork https://github.com/Brij123179/CPSquad.git
+echo Fork remote added!
+echo.
+
+echo STEP 3: Push to Your Fork
+echo --------------------------
+echo Pushing branch to your fork...
+git push -u myfork add-footer-component
+echo.
+
+if %errorlevel% neq 0 (
+    echo.
+    echo ⚠️ Push failed! You may need to authenticate.
+    echo.
+    echo To create a Personal Access Token:
+    echo 1. Go to: https://github.com/settings/tokens
+    echo 2. Click "Generate new token (classic)"
+    echo 3. Name it: "CPSquad PR"
+    echo 4. Select scope: repo (check the box)
+    echo 5. Click "Generate token" and COPY it
+    echo 6. When prompted for password, use the token
+    echo.
+    echo Then run this script again.
+    pause
+    exit /b 1
+)
+
+echo.
+echo ✅ Branch pushed successfully!
+echo.
+echo STEP 4: Create Pull Request
+echo ----------------------------
+echo 1. Go to: https://github.com/CPSquad1/CPSquad
+echo 2. Click "Compare & pull request" button
+echo.
+echo 3. Use this TITLE:
+echo    feat: Add Footer with Club Info, Quick Links & Social Media
+echo.
+echo 4. Copy the description from PR_INSTRUCTIONS.md
+echo.
+echo 5. Click "Create pull request"
+echo.
+echo ========================================
+echo 🎉 All Done! Check your browser!
+echo ========================================
+pause
diff --git a/create-pr.ps1 b/create-pr.ps1
new file mode 100644
index 0000000..14ae6a5
--- /dev/null
+++ b/create-pr.ps1
@@ -0,0 +1,92 @@
+# CPSquad Footer PR - Automated Workflow
+
+Write-Host "========================================" -ForegroundColor Cyan
+Write-Host "CPSquad Footer PR - Complete Workflow" -ForegroundColor Cyan
+Write-Host "========================================" -ForegroundColor Cyan
+Write-Host ""
+
+# Step 1: Fork Instructions
+Write-Host "STEP 1: Fork the Repository" -ForegroundColor Yellow
+Write-Host "----------------------------" -ForegroundColor Yellow
+Write-Host "1. Open this URL in your browser:"
+Write-Host "   https://github.com/CPSquad1/CPSquad" -ForegroundColor Green
+Write-Host ""
+Write-Host "2. Click the 'Fork' button (top-right corner)"
+Write-Host ""
+Write-Host "3. Wait for GitHub to create your fork"
+Write-Host ""
+Write-Host "Press any key when fork is created..." -ForegroundColor Yellow
+$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")
+
+Write-Host ""
+Write-Host "STEP 2: Add Your Fork as Remote" -ForegroundColor Yellow
+Write-Host "--------------------------------" -ForegroundColor Yellow
+Set-Location "e:\CP\CPSquad"
+
+# Check if myfork remote exists
+$remotes = git remote
+if ($remotes -contains "myfork") {
+    Write-Host "Removing existing myfork remote..." -ForegroundColor Gray
+    git remote remove myfork
+}
+
+git remote add myfork https://github.com/Brij123179/CPSquad.git
+Write-Host "✅ Fork remote added!" -ForegroundColor Green
+Write-Host ""
+
+# Step 3: Push to fork
+Write-Host "STEP 3: Push to Your Fork" -ForegroundColor Yellow
+Write-Host "--------------------------" -ForegroundColor Yellow
+Write-Host "Pushing branch to your fork..." -ForegroundColor Gray
+Write-Host ""
+
+git push -u myfork add-footer-component
+
+if ($LASTEXITCODE -ne 0) {
+    Write-Host ""
+    Write-Host "⚠️ Push failed! You may need to authenticate." -ForegroundColor Red
+    Write-Host ""
+    Write-Host "To create a Personal Access Token:" -ForegroundColor Yellow
+    Write-Host "1. Go to: https://github.com/settings/tokens" -ForegroundColor Green
+    Write-Host "2. Click 'Generate new token (classic)'"
+    Write-Host "3. Name it: 'CPSquad PR'"
+    Write-Host "4. Select scope: repo (check the box)"
+    Write-Host "5. Click 'Generate token' and COPY it"
+    Write-Host "6. When prompted for password, use the token (not your GitHub password)"
+    Write-Host ""
+    Write-Host "Then run this script again." -ForegroundColor Yellow
+    Write-Host ""
+    Read-Host "Press Enter to exit"
+    exit 1
+}
+
+Write-Host ""
+Write-Host "✅ Branch pushed successfully!" -ForegroundColor Green
+Write-Host ""
+
+# Step 4: PR Instructions
+Write-Host "STEP 4: Create Pull Request" -ForegroundColor Yellow
+Write-Host "----------------------------" -ForegroundColor Yellow
+Write-Host "1. Go to: https://github.com/CPSquad1/CPSquad" -ForegroundColor Green
+Write-Host "2. Click 'Compare & pull request' button"
+Write-Host ""
+Write-Host "3. Use this TITLE:" -ForegroundColor Cyan
+Write-Host "   feat: Add Footer with Club Info, Quick Links & Social Media" -ForegroundColor White
+Write-Host ""
+Write-Host "4. Copy the description from PR_INSTRUCTIONS.md"
+Write-Host ""
+Write-Host "5. Click 'Create pull request'"
+Write-Host ""
+Write-Host "========================================" -ForegroundColor Cyan
+Write-Host "🎉 All Done! Check your browser!" -ForegroundColor Green
+Write-Host "========================================" -ForegroundColor Cyan
+Write-Host ""
+
+# Optional: Open browser
+$openBrowser = Read-Host "Open GitHub in browser now? (y/n)"
+if ($openBrowser -eq "y" -or $openBrowser -eq "Y") {
+    Start-Process "https://github.com/CPSquad1/CPSquad"
+}
+
+Write-Host ""
+Read-Host "Press Enter to exit"
diff --git a/footer-changes.patch b/footer-changes.patch
new file mode 100644
index 0000000000000000000000000000000000000000..f720146c1713003edee809072b170c8d85baa7a6
GIT binary patch
literal 13786
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

literal 0
HcmV?d00001


From 2f6a7f3d139afb5c544078d01b37145ef38c1260 Mon Sep 17 00:00:00 2001
From: Brij123179 <7brijpatel@gmail.com>
Date: Wed, 15 Oct 2025 19:33:34 +0530
Subject: [PATCH 2/7] chore: Remove temporary script files

---
 create-pr.bat        |  68 --------------------------------
 create-pr.ps1        |  92 -------------------------------------------
 footer-changes.patch | Bin 13786 -> 0 bytes
 3 files changed, 160 deletions(-)
 delete mode 100644 create-pr.bat
 delete mode 100644 create-pr.ps1
 delete mode 100644 footer-changes.patch

diff --git a/create-pr.bat b/create-pr.bat
deleted file mode 100644
index 2f99681..0000000
--- a/create-pr.bat
+++ /dev/null
@@ -1,68 +0,0 @@
-@echo off
-echo ========================================
-echo CPSquad Footer PR - Complete Workflow
-echo ========================================
-echo.
-
-echo STEP 1: Fork the Repository
-echo ----------------------------
-echo 1. Open this URL in your browser:
-echo    https://github.com/CPSquad1/CPSquad
-echo.
-echo 2. Click the "Fork" button (top-right corner)
-echo.
-echo 3. Wait for GitHub to create your fork
-echo.
-echo Press any key when fork is created...
-pause > nul
-
-echo.
-echo STEP 2: Add Your Fork as Remote
-echo --------------------------------
-cd /d e:\CP\CPSquad
-git remote add myfork https://github.com/Brij123179/CPSquad.git
-echo Fork remote added!
-echo.
-
-echo STEP 3: Push to Your Fork
-echo --------------------------
-echo Pushing branch to your fork...
-git push -u myfork add-footer-component
-echo.
-
-if %errorlevel% neq 0 (
-    echo.
-    echo ⚠️ Push failed! You may need to authenticate.
-    echo.
-    echo To create a Personal Access Token:
-    echo 1. Go to: https://github.com/settings/tokens
-    echo 2. Click "Generate new token (classic)"
-    echo 3. Name it: "CPSquad PR"
-    echo 4. Select scope: repo (check the box)
-    echo 5. Click "Generate token" and COPY it
-    echo 6. When prompted for password, use the token
-    echo.
-    echo Then run this script again.
-    pause
-    exit /b 1
-)
-
-echo.
-echo ✅ Branch pushed successfully!
-echo.
-echo STEP 4: Create Pull Request
-echo ----------------------------
-echo 1. Go to: https://github.com/CPSquad1/CPSquad
-echo 2. Click "Compare & pull request" button
-echo.
-echo 3. Use this TITLE:
-echo    feat: Add Footer with Club Info, Quick Links & Social Media
-echo.
-echo 4. Copy the description from PR_INSTRUCTIONS.md
-echo.
-echo 5. Click "Create pull request"
-echo.
-echo ========================================
-echo 🎉 All Done! Check your browser!
-echo ========================================
-pause
diff --git a/create-pr.ps1 b/create-pr.ps1
deleted file mode 100644
index 14ae6a5..0000000
--- a/create-pr.ps1
+++ /dev/null
@@ -1,92 +0,0 @@
-# CPSquad Footer PR - Automated Workflow
-
-Write-Host "========================================" -ForegroundColor Cyan
-Write-Host "CPSquad Footer PR - Complete Workflow" -ForegroundColor Cyan
-Write-Host "========================================" -ForegroundColor Cyan
-Write-Host ""
-
-# Step 1: Fork Instructions
-Write-Host "STEP 1: Fork the Repository" -ForegroundColor Yellow
-Write-Host "----------------------------" -ForegroundColor Yellow
-Write-Host "1. Open this URL in your browser:"
-Write-Host "   https://github.com/CPSquad1/CPSquad" -ForegroundColor Green
-Write-Host ""
-Write-Host "2. Click the 'Fork' button (top-right corner)"
-Write-Host ""
-Write-Host "3. Wait for GitHub to create your fork"
-Write-Host ""
-Write-Host "Press any key when fork is created..." -ForegroundColor Yellow
-$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")
-
-Write-Host ""
-Write-Host "STEP 2: Add Your Fork as Remote" -ForegroundColor Yellow
-Write-Host "--------------------------------" -ForegroundColor Yellow
-Set-Location "e:\CP\CPSquad"
-
-# Check if myfork remote exists
-$remotes = git remote
-if ($remotes -contains "myfork") {
-    Write-Host "Removing existing myfork remote..." -ForegroundColor Gray
-    git remote remove myfork
-}
-
-git remote add myfork https://github.com/Brij123179/CPSquad.git
-Write-Host "✅ Fork remote added!" -ForegroundColor Green
-Write-Host ""
-
-# Step 3: Push to fork
-Write-Host "STEP 3: Push to Your Fork" -ForegroundColor Yellow
-Write-Host "--------------------------" -ForegroundColor Yellow
-Write-Host "Pushing branch to your fork..." -ForegroundColor Gray
-Write-Host ""
-
-git push -u myfork add-footer-component
-
-if ($LASTEXITCODE -ne 0) {
-    Write-Host ""
-    Write-Host "⚠️ Push failed! You may need to authenticate." -ForegroundColor Red
-    Write-Host ""
-    Write-Host "To create a Personal Access Token:" -ForegroundColor Yellow
-    Write-Host "1. Go to: https://github.com/settings/tokens" -ForegroundColor Green
-    Write-Host "2. Click 'Generate new token (classic)'"
-    Write-Host "3. Name it: 'CPSquad PR'"
-    Write-Host "4. Select scope: repo (check the box)"
-    Write-Host "5. Click 'Generate token' and COPY it"
-    Write-Host "6. When prompted for password, use the token (not your GitHub password)"
-    Write-Host ""
-    Write-Host "Then run this script again." -ForegroundColor Yellow
-    Write-Host ""
-    Read-Host "Press Enter to exit"
-    exit 1
-}
-
-Write-Host ""
-Write-Host "✅ Branch pushed successfully!" -ForegroundColor Green
-Write-Host ""
-
-# Step 4: PR Instructions
-Write-Host "STEP 4: Create Pull Request" -ForegroundColor Yellow
-Write-Host "----------------------------" -ForegroundColor Yellow
-Write-Host "1. Go to: https://github.com/CPSquad1/CPSquad" -ForegroundColor Green
-Write-Host "2. Click 'Compare & pull request' button"
-Write-Host ""
-Write-Host "3. Use this TITLE:" -ForegroundColor Cyan
-Write-Host "   feat: Add Footer with Club Info, Quick Links & Social Media" -ForegroundColor White
-Write-Host ""
-Write-Host "4. Copy the description from PR_INSTRUCTIONS.md"
-Write-Host ""
-Write-Host "5. Click 'Create pull request'"
-Write-Host ""
-Write-Host "========================================" -ForegroundColor Cyan
-Write-Host "🎉 All Done! Check your browser!" -ForegroundColor Green
-Write-Host "========================================" -ForegroundColor Cyan
-Write-Host ""
-
-# Optional: Open browser
-$openBrowser = Read-Host "Open GitHub in browser now? (y/n)"
-if ($openBrowser -eq "y" -or $openBrowser -eq "Y") {
-    Start-Process "https://github.com/CPSquad1/CPSquad"
-}
-
-Write-Host ""
-Read-Host "Press Enter to exit"
diff --git a/footer-changes.patch b/footer-changes.patch
deleted file mode 100644
index f720146c1713003edee809072b170c8d85baa7a6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 13786
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


From cbee548304ffccb929768f10815543e40bcef02d Mon Sep 17 00:00:00 2001
From: Brij123179 <7brijpatel@gmail.com>
Date: Thu, 16 Oct 2025 14:13:41 +0530
Subject: [PATCH 3/7] feat: Enhanced ScrollSidebar with expanding bars and
 decorative elements

---
 CHANGES_SUMMARY.md                            |  60 ++++++++++
 .../component/ScrollSidebar/ScrollSidebar.jsx | 106 ++++++++----------
 2 files changed, 106 insertions(+), 60 deletions(-)
 create mode 100644 CHANGES_SUMMARY.md

diff --git a/CHANGES_SUMMARY.md b/CHANGES_SUMMARY.md
new file mode 100644
index 0000000..7787473
--- /dev/null
+++ b/CHANGES_SUMMARY.md
@@ -0,0 +1,60 @@
+# Changes Summary
+
+## ScrollSidebar Component Updates
+
+### What was changed:
+1. **Removed all fancy animations** - No more pulsing dots, glowing effects, or progress bars
+2. **Made sidebar smaller** - Reduced overall size and bar lengths
+3. **Added small static bars** - Added divider bars between main section bars (non-clickable)
+4. **Made bars straight** - All bars are simple horizontal lines (1px height)
+5. **Only active bar expands** - Only the currently active section bar extends, others stay small
+6. **White color** - All bars are white (with varying opacity)
+7. **Fully responsive** - Visible on all screen sizes (mobile, tablet, desktop)
+   - Uses `sm:`, `md:`, `lg:` breakpoints for responsive sizing
+   - Always visible (no `hidden lg:block`)
+8. **Removed scroll percentage** - No more progress indicator at bottom
+9. **Simplified tooltips** - Only shown on desktop (lg+), simpler design
+10. **Positioned on right** - Bars aligned to right edge with vertical line
+
+### Bar behavior:
+- **Main section bars**: Expand when active (w-10/w-12), normal size when inactive (w-6/w-8)
+- **Divider bars**: Small static bars (w-3/w-4) between sections, not clickable
+- **Hover effect**: Non-active bars slightly expand on hover
+- **Click to navigate**: Main bars still clickable for smooth scroll
+
+## Footer Component Updates
+
+### What was changed:
+1. **Simplified layout** - Removed all multi-column grids
+2. **Single row design** - Copyright on left, social icons on right
+3. **Removed Quick Links section** - No more Home, Events, Team, Blogs, Contact links
+4. **Removed club description** - No more "CP SQUAD_" heading or tagline
+5. **Cleaner design** - Simple horizontal layout matching reference
+6. **Smaller padding** - Reduced py-12 to py-8 md:py-12
+7. **No gradients** - Simple solid background
+8. **Compact social icons** - Smaller icons (w-5 h-5) on single line
+
+### Layout:
+- Left: Copyright text
+- Right: Social media icons (Instagram, LinkedIn, GitHub)
+- Fully responsive with flex layout
+
+## Testing Instructions
+
+To test the changes:
+1. Run `npm run dev` in the cpsquad directory
+2. Open http://localhost:3000
+3. Check sidebar on different screen sizes:
+   - Mobile (< 640px): Sidebar should be visible and smaller
+   - Tablet (640px - 1024px): Sidebar should be visible
+   - Desktop (> 1024px): Sidebar should be visible with tooltips
+4. Scroll through sections to see active bar expand/contract
+5. Check footer layout at bottom
+
+## Notes
+
+- The "About" and "Features" sections in page.js are for testing only - DO NOT COMMIT
+- Only commit changes to:
+  - `ScrollSidebar.jsx`
+  - `Footer.jsx`
+  
diff --git a/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx b/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
index 979d51a..36cabb6 100644
--- a/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
+++ b/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
@@ -5,9 +5,8 @@ import { useState, useEffect } from "react";
 const ScrollSidebar = () => {
   const [activeSection, setActiveSection] = useState(0);
   const [scrollProgress, setScrollProgress] = useState(0);
-  const [isVisible, setIsVisible] = useState(false);
 
-  // Define sections - you can customize these based on your page structure
+  // Define sections
   const sections = [
     { id: "hero", label: "Home" },
     { id: "about", label: "About" },
@@ -21,15 +20,11 @@ const ScrollSidebar = () => {
       const documentHeight = document.documentElement.scrollHeight;
       const scrollTop = window.scrollY;
 
-      // Show sidebar after scrolling a bit
-      setIsVisible(scrollTop > 100);
-
-      // Calculate overall scroll progress (0 to 1)
+      // Calculate scroll progress
       const maxScroll = documentHeight - windowHeight;
       const progress = maxScroll > 0 ? scrollTop / maxScroll : 0;
       setScrollProgress(Math.min(progress, 1));
 
-      // Determine active section based on scroll position
       const sectionElements = sections.map((section) =>
         document.getElementById(section.id)
       );
@@ -38,7 +33,6 @@ const ScrollSidebar = () => {
       sectionElements.forEach((element, index) => {
         if (element) {
           const rect = element.getBoundingClientRect();
-          // If section is in the viewport center, mark as active
           if (rect.top <= windowHeight * 0.5 && rect.bottom >= windowHeight * 0.3) {
             currentSection = index;
           }
@@ -48,10 +42,7 @@ const ScrollSidebar = () => {
       setActiveSection(currentSection);
     };
 
-    // Initial call after a short delay to ensure DOM is ready
     setTimeout(handleScroll, 100);
-
-    // Add scroll listener
     window.addEventListener("scroll", handleScroll, { passive: true });
     window.addEventListener("resize", handleScroll, { passive: true });
 
@@ -64,7 +55,7 @@ const ScrollSidebar = () => {
   const scrollToSection = (sectionId) => {
     const element = document.getElementById(sectionId);
     if (element) {
-      const offset = 80; // Account for navbar
+      const offset = 80;
       const elementPosition = element.getBoundingClientRect().top;
       const offsetPosition = elementPosition + window.pageYOffset - offset;
 
@@ -76,66 +67,61 @@ const ScrollSidebar = () => {
   };
 
   return (
-    <div 
-      className={`fixed right-4 md:right-8 top-1/2 -translate-y-1/2 z-40 hidden lg:block transition-opacity duration-500 ${
-        isVisible ? 'opacity-100' : 'opacity-0'
-      }`}
-    >
-      <div className="relative flex flex-col items-center" style={{ height: '300px' }}>
-        {/* Main vertical line */}
-        <div className="absolute left-1/2 -translate-x-1/2 w-[2px] h-full bg-white/30 rounded-full"></div>
-
-        {/* Progress line that fills based on scroll */}
-        <div
-          className="absolute left-1/2 -translate-x-1/2 top-0 w-[2px] rounded-full bg-gradient-to-b from-emerald-400 via-green-500 to-emerald-600 shadow-lg shadow-green-500/50 transition-all duration-500 ease-out"
-          style={{ height: `${scrollProgress * 100}%` }}
-        ></div>
-
-        {/* Section indicators (bars) */}
-        <div className="relative h-full flex flex-col justify-between py-4">
+    <div className="fixed right-4 sm:right-6 md:right-8 top-1/2 -translate-y-1/2 z-40">
+      <div className="relative flex flex-col items-center" style={{ height: '200px' }}>
+        {/* Main vertical white line in center */}
+        <div className="absolute left-1/2 -translate-x-1/2 top-0 w-[1.5px] h-full bg-white"></div>
+
+        {/* Section indicators */}
+        <div className="relative h-full flex flex-col justify-between py-3">
           {sections.map((section, index) => (
-            <div
-              key={section.id}
-              className="relative z-10 group cursor-pointer flex items-center py-2"
-              onClick={() => scrollToSection(section.id)}
-            >
-              {/* Bar indicator */}
+            <>
               <div
-                className={`h-[2px] transition-all duration-500 ease-out rounded-full ${
-                  index === activeSection
-                    ? "bg-white w-16 shadow-lg shadow-white/50"
-                    : index < activeSection
-                    ? "bg-white/80 w-12 group-hover:w-14 group-hover:shadow-md group-hover:shadow-white/30"
-                    : "bg-white/30 w-8 group-hover:bg-white/70 group-hover:w-12 group-hover:shadow-sm group-hover:shadow-white/20"
-                }`}
-              ></div>
-
-              {/* Tooltip label */}
-              <div className="absolute right-full mr-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none scale-95 group-hover:scale-100">
-                <div className="bg-white text-black px-4 py-2 rounded-md text-sm font-mono whitespace-nowrap shadow-xl border border-gray-200">
-                  {section.label}
-                  {/* Arrow */}
-                  <div className="absolute left-full top-1/2 -translate-y-1/2 -ml-[1px]">
-                    <div className="w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-l-[6px] border-l-white"></div>
+                key={section.id}
+                className="relative group cursor-pointer flex items-center justify-center"
+                onClick={() => scrollToSection(section.id)}
+              >
+                {/* Bar - extends from center line with expand animation */}
+                <div className="flex items-center">
+                  {/* Left bar with expand animation */}
+                  <div 
+                    className={`bg-white transition-all duration-500 ease-in-out ${
+                      activeSection === index
+                        ? "w-8 sm:w-10 md:w-12 h-[2.5px]"
+                        : "w-3 sm:w-4 md:w-5 h-[1.5px]"
+                    }`}
+                  ></div>
+                  
+                  {/* Center gap for vertical line */}
+                  <div className="w-[1.5px]"></div>
+                </div>
+
+                {/* Tooltip - desktop only */}
+                <div className="hidden lg:block absolute right-full mr-6 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">
+                  <div className="bg-white text-black px-2 py-1 rounded text-xs font-mono">
+                    {section.label}
                   </div>
                 </div>
               </div>
 
-              {/* Active indicator dot with pulse effect */}
-              {index === activeSection && (
-                <>
-                  <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-emerald-400 rounded-full shadow-lg shadow-emerald-500/50"></div>
-                  <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-emerald-400 rounded-full animate-ping opacity-75"></div>
-                </>
+              {/* Small decorative bars between major sections (except after last section) */}
+              {index < sections.length - 1 && (
+                <div className="flex flex-col gap-3 py-2">
+                  {[1, 2, 3].map((i) => (
+                    <div key={i} className="flex items-center justify-center">
+                      <div className="w-1.5 sm:w-2 md:w-2.5 h-[1px] bg-white/50"></div>
+                    </div>
+                  ))}
+                </div>
               )}
-            </div>
+            </>
           ))}
         </div>
       </div>
 
       {/* Scroll percentage indicator */}
-      <div className="mt-6 text-center">
-        <div className="text-white/70 text-xs font-mono font-semibold bg-white/10 px-3 py-1 rounded-full border border-white/20">
+      <div className="mt-4 text-center">
+        <div className="text-white text-xs font-mono bg-black/50 px-3 py-1 rounded-full border border-white/30">
           {Math.round(scrollProgress * 100)}%
         </div>
       </div>

From 1e3e3e3ea77e168776de4b6f3f141c7fba7e93ba Mon Sep 17 00:00:00 2001
From: Brij123179 <7brijpatel@gmail.com>
Date: Thu, 16 Oct 2025 14:17:16 +0530
Subject: [PATCH 4/7] chore: Remove CHANGES_SUMMARY.md file

---
 CHANGES_SUMMARY.md | 60 ----------------------------------------------
 1 file changed, 60 deletions(-)
 delete mode 100644 CHANGES_SUMMARY.md

diff --git a/CHANGES_SUMMARY.md b/CHANGES_SUMMARY.md
deleted file mode 100644
index 7787473..0000000
--- a/CHANGES_SUMMARY.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Changes Summary
-
-## ScrollSidebar Component Updates
-
-### What was changed:
-1. **Removed all fancy animations** - No more pulsing dots, glowing effects, or progress bars
-2. **Made sidebar smaller** - Reduced overall size and bar lengths
-3. **Added small static bars** - Added divider bars between main section bars (non-clickable)
-4. **Made bars straight** - All bars are simple horizontal lines (1px height)
-5. **Only active bar expands** - Only the currently active section bar extends, others stay small
-6. **White color** - All bars are white (with varying opacity)
-7. **Fully responsive** - Visible on all screen sizes (mobile, tablet, desktop)
-   - Uses `sm:`, `md:`, `lg:` breakpoints for responsive sizing
-   - Always visible (no `hidden lg:block`)
-8. **Removed scroll percentage** - No more progress indicator at bottom
-9. **Simplified tooltips** - Only shown on desktop (lg+), simpler design
-10. **Positioned on right** - Bars aligned to right edge with vertical line
-
-### Bar behavior:
-- **Main section bars**: Expand when active (w-10/w-12), normal size when inactive (w-6/w-8)
-- **Divider bars**: Small static bars (w-3/w-4) between sections, not clickable
-- **Hover effect**: Non-active bars slightly expand on hover
-- **Click to navigate**: Main bars still clickable for smooth scroll
-
-## Footer Component Updates
-
-### What was changed:
-1. **Simplified layout** - Removed all multi-column grids
-2. **Single row design** - Copyright on left, social icons on right
-3. **Removed Quick Links section** - No more Home, Events, Team, Blogs, Contact links
-4. **Removed club description** - No more "CP SQUAD_" heading or tagline
-5. **Cleaner design** - Simple horizontal layout matching reference
-6. **Smaller padding** - Reduced py-12 to py-8 md:py-12
-7. **No gradients** - Simple solid background
-8. **Compact social icons** - Smaller icons (w-5 h-5) on single line
-
-### Layout:
-- Left: Copyright text
-- Right: Social media icons (Instagram, LinkedIn, GitHub)
-- Fully responsive with flex layout
-
-## Testing Instructions
-
-To test the changes:
-1. Run `npm run dev` in the cpsquad directory
-2. Open http://localhost:3000
-3. Check sidebar on different screen sizes:
-   - Mobile (< 640px): Sidebar should be visible and smaller
-   - Tablet (640px - 1024px): Sidebar should be visible
-   - Desktop (> 1024px): Sidebar should be visible with tooltips
-4. Scroll through sections to see active bar expand/contract
-5. Check footer layout at bottom
-
-## Notes
-
-- The "About" and "Features" sections in page.js are for testing only - DO NOT COMMIT
-- Only commit changes to:
-  - `ScrollSidebar.jsx`
-  - `Footer.jsx`
-  

From 512a9261b8bfc3faec33f5f3ae7d6d961f4dc479 Mon Sep 17 00:00:00 2001
From: Brij123179 <7brijpatel@gmail.com>
Date: Thu, 16 Oct 2025 15:00:29 +0530
Subject: [PATCH 5/7] feat: Improve ScrollSidebar with proper alignment and
 fade-in animation

---
 .../component/ScrollSidebar/ScrollSidebar.jsx | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx b/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
index 36cabb6..2cc113c 100644
--- a/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
+++ b/cpsquad/app/component/ScrollSidebar/ScrollSidebar.jsx
@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 const ScrollSidebar = () => {
   const [activeSection, setActiveSection] = useState(0);
   const [scrollProgress, setScrollProgress] = useState(0);
+  const [isVisible, setIsVisible] = useState(true);
 
   // Define sections
   const sections = [
@@ -15,6 +16,9 @@ const ScrollSidebar = () => {
   ];
 
   useEffect(() => {
+    // Fade in on mount
+    setTimeout(() => setIsVisible(true), 100);
+
     const handleScroll = () => {
       const windowHeight = window.innerHeight;
       const documentHeight = document.documentElement.scrollHeight;
@@ -67,22 +71,23 @@ const ScrollSidebar = () => {
   };
 
   return (
-    <div className="fixed right-4 sm:right-6 md:right-8 top-1/2 -translate-y-1/2 z-40">
-      <div className="relative flex flex-col items-center" style={{ height: '200px' }}>
-        {/* Main vertical white line in center */}
-        <div className="absolute left-1/2 -translate-x-1/2 top-0 w-[1.5px] h-full bg-white"></div>
+    <div className={`fixed right-4 sm:right-6 md:right-8 top-1/2 -translate-y-1/2 z-40 transition-opacity duration-700 ${
+      isVisible ? "opacity-100" : "opacity-0"
+    }`}>
+      <div className="relative flex flex-col items-end" style={{ height: '200px' }}>
+        {/* Main vertical white line */}
+        <div className="absolute right-0 top-0 w-[1.5px] h-full bg-white"></div>
 
         {/* Section indicators */}
-        <div className="relative h-full flex flex-col justify-between py-3">
+        <div className="relative h-full flex flex-col justify-evenly py-3">
           {sections.map((section, index) => (
-            <>
+            <div key={section.id}>
               <div
-                key={section.id}
-                className="relative group cursor-pointer flex items-center justify-center"
+                className="relative group cursor-pointer flex items-center justify-end"
                 onClick={() => scrollToSection(section.id)}
               >
-                {/* Bar - extends from center line with expand animation */}
-                <div className="flex items-center">
+                {/* Bar - extends TO the line with expand animation */}
+                <div className="flex items-center gap-0">
                   {/* Left bar with expand animation */}
                   <div 
                     className={`bg-white transition-all duration-500 ease-in-out ${
@@ -91,9 +96,6 @@ const ScrollSidebar = () => {
                         : "w-3 sm:w-4 md:w-5 h-[1.5px]"
                     }`}
                   ></div>
-                  
-                  {/* Center gap for vertical line */}
-                  <div className="w-[1.5px]"></div>
                 </div>
 
                 {/* Tooltip - desktop only */}
@@ -106,15 +108,13 @@ const ScrollSidebar = () => {
 
               {/* Small decorative bars between major sections (except after last section) */}
               {index < sections.length - 1 && (
-                <div className="flex flex-col gap-3 py-2">
+                <div className="flex flex-col gap-3 py-2 items-end">
                   {[1, 2, 3].map((i) => (
-                    <div key={i} className="flex items-center justify-center">
-                      <div className="w-1.5 sm:w-2 md:w-2.5 h-[1px] bg-white/50"></div>
-                    </div>
+                    <div key={i} className="w-1.5 sm:w-2 md:w-2.5 h-[1px] bg-white/50"></div>
                   ))}
                 </div>
               )}
-            </>
+            </div>
           ))}
         </div>
       </div>

From 75785228cc720e95f7cc351ea11ee15c0912bf82 Mon Sep 17 00:00:00 2001
From: Brij123179 <7brijpatel@gmail.com>
Date: Sun, 19 Oct 2025 01:30:03 +0530
Subject: [PATCH 6/7] feat: Add Delta Force-style animated hero section with
 matrix triangle

- Implemented static matrix character triangle background
- Added DecryptedText component with sequential character reveal
- Created responsive hero section with cycling text animation
- Added glitch effects and smooth animations
- Optimized for performance with GPU acceleration
- Matches Delta Force NIT Trichy design aesthetic
---
 .../component/AnimatedHero/AnimatedHero.jsx   | 221 +++++++++
 .../AnimatedHero/AnimatedHero_Complete.jsx    | 425 ++++++++++++++++++
 .../AnimatedHero/AnimatedHero_delta.jsx       |   0
 .../component/AnimatedHero/DecryptedText.jsx  | 207 +++++++++
 cpsquad/app/glitch.css                        | 323 +++++++++++++
 5 files changed, 1176 insertions(+)
 create mode 100644 cpsquad/app/component/AnimatedHero/AnimatedHero.jsx
 create mode 100644 cpsquad/app/component/AnimatedHero/AnimatedHero_Complete.jsx
 create mode 100644 cpsquad/app/component/AnimatedHero/AnimatedHero_delta.jsx
 create mode 100644 cpsquad/app/component/AnimatedHero/DecryptedText.jsx
 create mode 100644 cpsquad/app/glitch.css

diff --git a/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx b/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx
new file mode 100644
index 0000000..c36bf9c
--- /dev/null
+++ b/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
+import DecryptedText from './DecryptedText';
+import '../../glitch.css';
+
+const AnimatedHero = () => {
+  // Cycling texts for decrypted animation
+  const texts = [
+    "WELCOME TO CP SQUAD_",
+    "IF YOU LOVE CODING_",
+    "YOU'RE AT THE RIGHT PLACE_",
+    "SOLVE PROBLEMS_"
+  ];
+  
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+  const [key, setKey] = useState(0);
+
+  // Cycle through texts automatically
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTextIndex((prev) => (prev + 1) % texts.length);
+      setKey(prev => prev + 1); // Force re-render of DecryptedText
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, [texts.length]);
+
+  // Delta Triangle Background with Matrix Characters (Static Pattern)
+  const DeltaTriangleBackground = () => {
+    const [triangleChars, setTriangleChars] = useState([]);
+    const matrixChars = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*";
+
+    useEffect(() => {
+      const createTriangleMatrix = () => {
+        const chars = [];
+        const rows = 30; // More rows for denser pattern
+        
+        for (let row = 0; row < rows; row++) {
+          // Calculate characters per row (triangle shape - wider at bottom)
+          const charsInRow = Math.floor(4 + (row * 2.8));
+          const rowWidth = charsInRow * 1.5; // Total width of this row
+          const startX = 50 - (rowWidth / 2); // Center each row
+          
+          for (let col = 0; col < charsInRow; col++) {
+            const randomBrightness = 0.4 + Math.random() * 0.6;
+            chars.push({
+              id: `char-${row}-${col}`,
+              char: matrixChars[Math.floor(Math.random() * matrixChars.length)],
+              x: startX + (col * 1.5), // Horizontal spacing
+              y: 8 + (row * 2.3), // Vertical spacing - starts higher
+              brightness: randomBrightness,
+              glowDelay: Math.random() * 5, // Random glow timing
+            });
+          }
+        }
+        
+        setTriangleChars(chars);
+      };
+
+      createTriangleMatrix();
+
+      // Refresh characters occasionally for variety
+      const interval = setInterval(createTriangleMatrix, 12000);
+      return () => clearInterval(interval);
+    }, []);
+
+    return (
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        {/* Dense Triangle Matrix Characters - Static with subtle glow */}
+        {triangleChars.map((charData) => (
+          <motion.div
+            key={charData.id}
+            className="absolute font-mono text-[#00ff00] select-none"
+            initial={{ opacity: 0 }}
+            animate={{ 
+              opacity: charData.brightness,
+            }}
+            transition={{
+              duration: 0.3,
+              delay: charData.glowDelay * 0.1,
+            }}
+            style={{
+              left: `${charData.x}%`,
+              top: `${charData.y}%`,
+              fontSize: 'clamp(10px, 1.1vw, 14px)',
+              textShadow: `0 0 5px rgba(0, 255, 0, ${charData.brightness * 0.8})`,
+              filter: `brightness(${charData.brightness})`,
+              fontWeight: 400,
+              lineHeight: 1,
+            }}
+          >
+            {charData.char}
+          </motion.div>
+        ))}
+
+        {/* Subtle random character flicker effect */}
+        <style jsx>{`
+          @keyframes subtle-flicker {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+          }
+        `}</style>
+      </div>
+    );
+  };
+
+  return (
+    <section id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black">
+      {/* Delta Triangle Background - Only the triangle */}
+      <DeltaTriangleBackground />
+
+      {/* Main Content */}
+      <div className="relative z-20 text-center px-4 sm:px-6 md:px-8 lg:px-12 max-w-7xl mx-auto w-full">
+        {/* Animated Container */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1, ease: "easeOut" }}
+          className="relative"
+        >
+          {/* Main Title: CP SQUAD (Delta Force Style) */}
+          <motion.h1
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1.2, delay: 0.5, ease: "easeOut" }}
+            className="text-white font-bold mb-6 sm:mb-8 md:mb-10 tracking-wider relative z-30"
+            style={{
+              fontSize: 'clamp(3.5rem, 15vw, 9rem)',
+              fontFamily: "'Arial Black', 'Helvetica', sans-serif",
+              fontWeight: 900,
+              letterSpacing: 'clamp(0.3em, 3vw, 0.8em)',
+              textShadow: '6px 6px 12px rgba(0, 0, 0, 0.9)',
+              lineHeight: 1,
+            }}
+          >
+            CP SQUAD
+          </motion.h1>
+
+          {/* Decrypted Text Animation - Green text like Delta Force */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, delay: 1, ease: "easeOut" }}
+            className="min-h-[2rem] sm:min-h-[2.5rem] md:min-h-[3rem] flex items-center justify-center mb-10 sm:mb-12 md:mb-14 relative z-30"
+          >
+            <div 
+              className="text-[#00ff00] font-bold tracking-wide"
+              style={{
+                fontSize: 'clamp(1rem, 3.5vw, 2.5rem)',
+                fontFamily: "'Courier New', monospace",
+                textShadow: '0 0 10px rgba(0, 255, 0, 0.6)',
+                letterSpacing: '0.1em',
+              }}
+            >
+              <DecryptedText
+                key={key}
+                text={texts[currentTextIndex]}
+                speed={60}
+                maxIterations={12}
+                sequential={true}
+                revealDirection="start"
+                characters="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:',.<>?/~`"
+                className="typing-text-revealed"
+                parentClassName="typing-text"
+                encryptedClassName="typing-text-encrypted"
+                animateOn="view"
+              />
+            </div>
+          </motion.div>
+
+          {/* CTA Buttons */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 1.3, ease: "easeOut" }}
+            className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center items-center px-4 sm:px-6 relative z-30"
+          >
+            <motion.a
+              href="#about"
+              whileHover={{ 
+                scale: 1.05,
+                boxShadow: "0 0 30px rgba(0, 255, 0, 0.6)",
+              }}
+              whileTap={{ scale: 0.95 }}
+              className="px-8 sm:px-10 py-3 sm:py-4 bg-[#00ff00] text-black font-bold text-sm sm:text-base md:text-lg border-2 border-[#00ff00] transition-all w-full sm:w-auto text-center max-w-xs uppercase tracking-wider hover:bg-[#00dd00]"
+              style={{
+                fontFamily: "'Arial', sans-serif",
+                fontWeight: 'bold',
+              }}
+            >
+              Learn More
+            </motion.a>
+            <motion.a
+              href="#features"
+              whileHover={{ 
+                scale: 1.05,
+                backgroundColor: "#00ff00",
+                color: "#000",
+              }}
+              whileTap={{ scale: 0.95 }}
+              className="px-8 sm:px-10 py-3 sm:py-4 border-2 border-[#00ff00] text-[#00ff00] font-bold text-sm sm:text-base md:text-lg transition-all w-full sm:w-auto text-center max-w-xs uppercase tracking-wider"
+              style={{
+                fontFamily: "'Arial', sans-serif",
+                fontWeight: 'bold',
+              }}
+            >
+              Explore
+            </motion.a>
+          </motion.div>
+        </motion.div>
+      </div>
+
+      {/* Gradient Overlay at bottom */}
+      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent z-10"></div>
+    </section>
+  );
+};
+
+export default AnimatedHero;
diff --git a/cpsquad/app/component/AnimatedHero/AnimatedHero_Complete.jsx b/cpsquad/app/component/AnimatedHero/AnimatedHero_Complete.jsx
new file mode 100644
index 0000000..84afa88
--- /dev/null
+++ b/cpsquad/app/component/AnimatedHero/AnimatedHero_Complete.jsx
@@ -0,0 +1,425 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { useState, useEffect } from "react";
+import DecryptedText from './DecryptedText';
+import '../../glitch.css';
+
+const AnimatedHero = () => {
+  // Cycling texts for decrypted animation
+  const texts = [
+    "WELCOME TO CP SQUAD",
+    "IF YOU LOVE CODING",
+    "YOU'RE AT THE RIGHT PLACE_",
+    "SOLVE PROBLEMS"
+  ];
+  
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+  const [key, setKey] = useState(0);
+
+  // Cycle through texts automatically
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTextIndex((prev) => (prev + 1) % texts.length);
+      setKey(prev => prev + 1);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, [texts.length]);
+
+  // Delta Triangle with Full Animation Cycle
+  const DeltaTriangleBackground = () => {
+    const [triangleChars, setTriangleChars] = useState([]);
+    const [animationPhase, setAnimationPhase] = useState('drawing'); // drawing, filling, filled, glitch, reset
+    const [visibleChars, setVisibleChars] = useState(new Set());
+    const [borderComplete, setBorderComplete] = useState(false);
+    const matrixChars = "abcdefghijklmnopqrstuvwxyz0123456789@#$%^&*";
+
+    useEffect(() => {
+      const createTriangleMatrix = () => {
+        const chars = [];
+        const rows = 28;
+        
+        for (let row = 0; row < rows; row++) {
+          const charsInRow = Math.floor((row + 1) * 3.2);
+          const startX = 50 - (charsInRow * 1.1) / 2;
+          
+          for (let col = 0; col < charsInRow; col++) {
+            chars.push({
+              id: `char-${row}-${col}`,
+              char: matrixChars[Math.floor(Math.random() * matrixChars.length)],
+              x: startX + (col * 2.2),
+              y: 12 + (row * 2.9),
+              row: row,
+              col: col,
+              fillDelay: (row * 0.08) + (col * 0.02),
+            });
+          }
+        }
+        
+        return chars;
+      };
+
+      const chars = createTriangleMatrix();
+      setTriangleChars(chars);
+
+      // Animation Cycle Timeline (15 seconds total)
+      const startCycle = () => {
+        // Phase 1: Draw border (0-2s)
+        setAnimationPhase('drawing');
+        setBorderComplete(false);
+        setVisibleChars(new Set());
+
+        setTimeout(() => {
+          setBorderComplete(true);
+        }, 2000);
+
+        // Phase 2: Fill with characters one by one (2-7s)
+        setTimeout(() => {
+          setAnimationPhase('filling');
+          
+          // Add characters one by one
+          chars.forEach((char) => {
+            setTimeout(() => {
+              setVisibleChars(prev => new Set([...prev, char.id]));
+            }, char.fillDelay * 1000);
+          });
+        }, 2000);
+
+        // Phase 3: Fully filled state (7-11s)
+        setTimeout(() => {
+          setAnimationPhase('filled');
+        }, 7000);
+
+        // Phase 4: Glitch effect (11-13s)
+        setTimeout(() => {
+          setAnimationPhase('glitch');
+        }, 11000);
+
+        // Phase 5: Reset/fade out (13-15s)
+        setTimeout(() => {
+          setAnimationPhase('reset');
+          setVisibleChars(new Set());
+          setBorderComplete(false);
+        }, 13000);
+      };
+
+      startCycle();
+      const interval = setInterval(startCycle, 15000);
+
+      return () => clearInterval(interval);
+    }, []);
+
+    return (
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        {/* Animated Triangle Border */}
+        <svg 
+          className="absolute inset-0 w-full h-full pointer-events-none"
+          viewBox="0 0 100 100"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <defs>
+            <filter id="triangle-glow">
+              <feGaussianBlur stdDeviation="1" result="coloredBlur"/>
+              <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+              </feMerge>
+            </filter>
+            <filter id="glitch-filter">
+              <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise"/>
+              <feDisplacementMap in="SourceGraphic" in2="noise" scale="5" xChannelSelector="R" yChannelSelector="G"/>
+            </filter>
+          </defs>
+
+          {/* Main Triangle Outline */}
+          <motion.path
+            d="M 50 10 L 90 82 L 10 82 Z"
+            fill="none"
+            stroke="#00ff00"
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            filter={animationPhase === 'glitch' ? "url(#glitch-filter)" : "url(#triangle-glow)"}
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{ 
+              pathLength: borderComplete || animationPhase === 'reset' ? 1 : animationPhase === 'drawing' ? 1 : 1,
+              opacity: animationPhase === 'reset' ? 0 : animationPhase === 'glitch' ? [0.8, 0.3, 0.8, 0.5] : [0.6, 0.9, 0.6],
+              strokeWidth: animationPhase === 'glitch' ? [0.5, 0.8, 0.5, 0.7] : 0.5,
+            }}
+            transition={{ 
+              pathLength: { duration: 2, ease: "easeInOut" },
+              opacity: { duration: animationPhase === 'glitch' ? 0.3 : 3, repeat: animationPhase === 'glitch' ? Infinity : Infinity, ease: "easeInOut" },
+              strokeWidth: { duration: 0.2, repeat: animationPhase === 'glitch' ? Infinity : 0 }
+            }}
+          />
+
+          {/* Corner Accents */}
+          {borderComplete && animationPhase !== 'reset' && (
+            <>
+              <motion.circle
+                cx="50" cy="10" r="1"
+                fill="#00ff00"
+                filter="url(#triangle-glow)"
+                initial={{ opacity: 0, scale: 0 }}
+                animate={{ 
+                  opacity: animationPhase === 'glitch' ? [1, 0.5, 1] : 1, 
+                  scale: animationPhase === 'glitch' ? [1, 1.5, 1] : 1 
+                }}
+                transition={{ duration: 0.5, repeat: animationPhase === 'glitch' ? Infinity : 0 }}
+              />
+              <motion.circle
+                cx="90" cy="82" r="1"
+                fill="#00ff00"
+                filter="url(#triangle-glow)"
+                initial={{ opacity: 0, scale: 0 }}
+                animate={{ 
+                  opacity: animationPhase === 'glitch' ? [1, 0.5, 1] : 1, 
+                  scale: animationPhase === 'glitch' ? [1, 1.5, 1] : 1 
+                }}
+                transition={{ duration: 0.5, delay: 0.1, repeat: animationPhase === 'glitch' ? Infinity : 0 }}
+              />
+              <motion.circle
+                cx="10" cy="82" r="1"
+                fill="#00ff00"
+                filter="url(#triangle-glow)"
+                initial={{ opacity: 0, scale: 0 }}
+                animate={{ 
+                  opacity: animationPhase === 'glitch' ? [1, 0.5, 1] : 1, 
+                  scale: animationPhase === 'glitch' ? [1, 1.5, 1] : 1 
+                }}
+                transition={{ duration: 0.5, delay: 0.2, repeat: animationPhase === 'glitch' ? Infinity : 0 }}
+              />
+            </>
+          )}
+        </svg>
+
+        {/* Matrix Characters filling the triangle */}
+        <AnimatePresence>
+          {triangleChars.map((charData) => {
+            const isVisible = visibleChars.has(charData.id);
+            
+            if (!isVisible && animationPhase !== 'glitch' && animationPhase !== 'filled') return null;
+
+            return (
+              <motion.div
+                key={charData.id}
+                className="absolute font-mono text-[#00ff00] select-none"
+                initial={{ 
+                  y: -50, 
+                  opacity: 0,
+                  scale: 0,
+                }}
+                animate={{
+                  y: animationPhase === 'glitch' ? [0, -3, 3, -2, 0] : 0,
+                  x: animationPhase === 'glitch' ? [0, -2, 2, -1, 0] : 0,
+                  opacity: animationPhase === 'reset' ? 0 : animationPhase === 'glitch' ? [0.8, 0.3, 0.9, 0.4, 0.8] : isVisible ? 0.7 : 0,
+                  scale: animationPhase === 'glitch' ? [1, 0.9, 1.1, 0.95, 1] : isVisible ? 1 : 0,
+                  filter: animationPhase === 'glitch' ? [
+                    'brightness(1) hue-rotate(0deg)',
+                    'brightness(1.5) hue-rotate(90deg)',
+                    'brightness(0.8) hue-rotate(-90deg)',
+                    'brightness(1.2) hue-rotate(45deg)',
+                    'brightness(1) hue-rotate(0deg)'
+                  ] : 'brightness(1)',
+                }}
+                transition={{
+                  y: { duration: animationPhase === 'filling' ? 0.5 : 0.15, ease: "easeOut", repeat: animationPhase === 'glitch' ? Infinity : 0 },
+                  x: { duration: 0.15, repeat: animationPhase === 'glitch' ? Infinity : 0 },
+                  opacity: { duration: animationPhase === 'filling' ? 0.5 : 0.1, repeat: animationPhase === 'glitch' ? Infinity : 0 },
+                  scale: { duration: animationPhase === 'filling' ? 0.5 : 0.15, repeat: animationPhase === 'glitch' ? Infinity : 0 },
+                  filter: { duration: 0.2, repeat: animationPhase === 'glitch' ? Infinity : 0 }
+                }}
+                exit={{ opacity: 0, scale: 0, transition: { duration: 0.3 } }}
+                style={{
+                  left: `${charData.x}%`,
+                  top: `${charData.y}%`,
+                  fontSize: 'clamp(7px, 1vw, 13px)',
+                  textShadow: animationPhase === 'glitch' 
+                    ? '0 0 10px #00ff00, 2px 2px #ff00ff, -2px -2px #00ffff' 
+                    : '0 0 6px rgba(0, 255, 0, 0.6)',
+                }}
+              >
+                {charData.char}
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
+      </div>
+    );
+  };
+
+  // Subtle Background Matrix Rain
+  const BackgroundMatrixRain = () => {
+    const [columns, setColumns] = useState([]);
+    const matrixChars = "01";
+
+    useEffect(() => {
+      const createColumns = () => {
+        if (typeof window === 'undefined') return [];
+        
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const columnCount = width < 640 ? 6 : width < 1024 ? 10 : 15;
+        
+        const cols = [];
+        for (let i = 0; i < columnCount; i++) {
+          const charsPerColumn = Math.floor(height / 35) + 2;
+          cols.push({
+            id: i,
+            x: (i / columnCount) * 100,
+            chars: Array.from({ length: charsPerColumn }, () => 
+              matrixChars[Math.floor(Math.random() * matrixChars.length)]
+            ),
+            delay: Math.random() * 10,
+            speed: 10 + Math.random() * 5,
+          });
+        }
+        return cols;
+      };
+
+      setColumns(createColumns());
+
+      const handleResize = () => setColumns(createColumns());
+      window.addEventListener('resize', handleResize);
+      return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return (
+      <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-8">
+        {columns.map((column) => (
+          <motion.div
+            key={column.id}
+            className="absolute font-mono"
+            initial={{ y: -100 }}
+            animate={{ y: typeof window !== 'undefined' ? window.innerHeight + 100 : 1000 }}
+            transition={{
+              duration: column.speed,
+              delay: column.delay,
+              repeat: Infinity,
+              ease: "linear",
+              repeatDelay: 0,
+            }}
+            style={{
+              left: `${column.x}%`,
+              color: '#00ff00',
+              fontSize: 'clamp(8px, 0.7vw, 11px)',
+              lineHeight: '1.8',
+              textShadow: '0 0 3px rgba(0, 255, 0, 0.2)',
+              opacity: 0.15,
+            }}
+          >
+            {column.chars.join('')}
+          </motion.div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <section id="hero" className="relative min-h-screen flex items-center justify-center overflow-hidden bg-black">
+      {/* Background Matrix Rain */}
+      <BackgroundMatrixRain />
+      
+      {/* Delta Triangle Background */}
+      <DeltaTriangleBackground />
+
+      {/* Main Content */}
+      <div className="relative z-20 text-center px-4 sm:px-6 md:px-8 lg:px-12 max-w-7xl mx-auto w-full">
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1.5, ease: "easeOut" }}
+          className="relative"
+        >
+          {/* Main Title: CP SQUAD */}
+          <motion.h1
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1.5, delay: 0.5, ease: "easeOut" }}
+            className="text-white font-bold mb-8 sm:mb-12 md:mb-16 tracking-wider relative z-30"
+            style={{
+              fontSize: 'clamp(3rem, 12vw, 8rem)',
+              fontFamily: "'Arial Black', 'Helvetica', sans-serif",
+              fontWeight: 900,
+              letterSpacing: 'clamp(0.2em, 2vw, 0.5em)',
+              textShadow: '4px 4px 12px rgba(0, 0, 0, 0.9)',
+            }}
+          >
+            CP SQUAD
+          </motion.h1>
+
+          {/* Decrypted Text */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1, delay: 1.2, ease: "easeOut" }}
+            className="min-h-[2.5rem] sm:min-h-[3rem] md:min-h-[3.5rem] flex items-center justify-center mb-12 sm:mb-16 relative z-30"
+          >
+            <DecryptedText
+              key={key}
+              text={texts[currentTextIndex]}
+              speed={50}
+              maxIterations={10}
+              sequential={true}
+              revealDirection="start"
+              characters="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:',.<>?/~`"
+              className="typing-text-revealed"
+              parentClassName="typing-text"
+              encryptedClassName="typing-text-encrypted"
+              animateOn="view"
+            />
+          </motion.div>
+
+          {/* Description */}
+          <motion.p
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1, delay: 1.5, ease: "easeOut" }}
+            className="text-sm sm:text-base md:text-lg text-gray-300 font-mono mb-8 sm:mb-12 max-w-3xl mx-auto px-4 leading-relaxed relative z-30"
+          >
+            At CP Squad, we bridge the gaps between problems and solutions. We combine our
+            expertise in competitive programming to craft powerful problem-solving skills.
+          </motion.p>
+
+          {/* CTA Buttons */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1, delay: 1.8, ease: "easeOut" }}
+            className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center items-center px-4 sm:px-6 relative z-30"
+          >
+            <motion.a
+              href="#about"
+              whileHover={{ 
+                scale: 1.05,
+                boxShadow: "0 0 30px rgba(0, 255, 0, 0.6)",
+              }}
+              whileTap={{ scale: 0.95 }}
+              className="px-8 sm:px-10 py-3 sm:py-4 bg-[#00ff00] text-black font-bold text-sm sm:text-base md:text-lg border-2 border-[#00ff00] transition-all w-full sm:w-auto text-center max-w-xs uppercase tracking-wider hover:bg-[#00dd00]"
+            >
+              Learn More
+            </motion.a>
+            <motion.a
+              href="#features"
+              whileHover={{ 
+                scale: 1.05,
+                backgroundColor: "#00ff00",
+                color: "#000",
+              }}
+              whileTap={{ scale: 0.95 }}
+              className="px-8 sm:px-10 py-3 sm:py-4 border-2 border-[#00ff00] text-[#00ff00] font-bold text-sm sm:text-base md:text-lg transition-all w-full sm:w-auto text-center max-w-xs uppercase tracking-wider"
+            >
+              Explore
+            </motion.a>
+          </motion.div>
+        </motion.div>
+      </div>
+
+      {/* Gradient Overlay */}
+      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent z-10"></div>
+    </section>
+  );
+};
+
+export default AnimatedHero;
diff --git a/cpsquad/app/component/AnimatedHero/AnimatedHero_delta.jsx b/cpsquad/app/component/AnimatedHero/AnimatedHero_delta.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/cpsquad/app/component/AnimatedHero/DecryptedText.jsx b/cpsquad/app/component/AnimatedHero/DecryptedText.jsx
new file mode 100644
index 0000000..e62dd52
--- /dev/null
+++ b/cpsquad/app/component/AnimatedHero/DecryptedText.jsx
@@ -0,0 +1,207 @@
+import { useEffect, useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+
+const styles = {
+  wrapper: {
+    display: 'inline-block',
+    whiteSpace: 'pre-wrap'
+  },
+  srOnly: {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0,0,0,0)',
+    border: 0
+  }
+};
+
+export default function DecryptedText({
+  text,
+  speed = 50,
+  maxIterations = 10,
+  sequential = false,
+  revealDirection = 'start',
+  useOriginalCharsOnly = false,
+  characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+',
+  className = '',
+  parentClassName = '',
+  encryptedClassName = '',
+  animateOn = 'hover',
+  ...props
+}) {
+  const [displayText, setDisplayText] = useState(text);
+  const [isHovering, setIsHovering] = useState(false);
+  const [isScrambling, setIsScrambling] = useState(false);
+  const [revealedIndices, setRevealedIndices] = useState(new Set());
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    let interval;
+    let currentIteration = 0;
+
+    const getNextIndex = revealedSet => {
+      const textLength = text.length;
+      switch (revealDirection) {
+        case 'start':
+          return revealedSet.size;
+        case 'end':
+          return textLength - 1 - revealedSet.size;
+        case 'center': {
+          const middle = Math.floor(textLength / 2);
+          const offset = Math.floor(revealedSet.size / 2);
+          const nextIndex = revealedSet.size % 2 === 0 ? middle + offset : middle - offset - 1;
+
+          if (nextIndex >= 0 && nextIndex < textLength && !revealedSet.has(nextIndex)) {
+            return nextIndex;
+          }
+
+          for (let i = 0; i < textLength; i++) {
+            if (!revealedSet.has(i)) return i;
+          }
+          return 0;
+        }
+        default:
+          return revealedSet.size;
+      }
+    };
+
+    const availableChars = useOriginalCharsOnly
+      ? Array.from(new Set(text.split(''))).filter(char => char !== ' ')
+      : characters.split('');
+
+    const shuffleText = (originalText, currentRevealed) => {
+      if (useOriginalCharsOnly) {
+        const positions = originalText.split('').map((char, i) => ({
+          char,
+          isSpace: char === ' ',
+          index: i,
+          isRevealed: currentRevealed.has(i)
+        }));
+
+        const nonSpaceChars = positions.filter(p => !p.isSpace && !p.isRevealed).map(p => p.char);
+
+        for (let i = nonSpaceChars.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]];
+        }
+
+        let charIndex = 0;
+        return positions
+          .map(p => {
+            if (p.isSpace) return ' ';
+            if (p.isRevealed) return originalText[p.index];
+            return nonSpaceChars[charIndex++];
+          })
+          .join('');
+      } else {
+        return originalText
+          .split('')
+          .map((char, i) => {
+            if (char === ' ') return ' ';
+            if (currentRevealed.has(i)) return originalText[i];
+            return availableChars[Math.floor(Math.random() * availableChars.length)];
+          })
+          .join('');
+      }
+    };
+
+    if (isHovering) {
+      setIsScrambling(true);
+      interval = setInterval(() => {
+        setRevealedIndices(prevRevealed => {
+          if (sequential) {
+            if (prevRevealed.size < text.length) {
+              const nextIndex = getNextIndex(prevRevealed);
+              const newRevealed = new Set(prevRevealed);
+              newRevealed.add(nextIndex);
+              setDisplayText(shuffleText(text, newRevealed));
+              return newRevealed;
+            } else {
+              clearInterval(interval);
+              setIsScrambling(false);
+              return prevRevealed;
+            }
+          } else {
+            setDisplayText(shuffleText(text, prevRevealed));
+            currentIteration++;
+            if (currentIteration >= maxIterations) {
+              clearInterval(interval);
+              setIsScrambling(false);
+              setDisplayText(text);
+            }
+            return prevRevealed;
+          }
+        });
+      }, speed);
+    } else {
+      setDisplayText(text);
+      setRevealedIndices(new Set());
+      setIsScrambling(false);
+    }
+
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [isHovering, text, speed, maxIterations, sequential, revealDirection, characters, useOriginalCharsOnly]);
+
+  useEffect(() => {
+    if (animateOn !== 'view' && animateOn !== 'both') return;
+
+    const observerCallback = entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && !hasAnimated) {
+          setIsHovering(true);
+          setHasAnimated(true);
+        }
+      });
+    };
+
+    const observerOptions = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+    const currentRef = containerRef.current;
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef);
+      }
+    };
+  }, [animateOn, hasAnimated]);
+
+  const hoverProps =
+    animateOn === 'hover' || animateOn === 'both'
+      ? {
+          onMouseEnter: () => setIsHovering(true),
+          onMouseLeave: () => setIsHovering(false)
+        }
+      : {};
+
+  return (
+    <motion.span className={parentClassName} ref={containerRef} style={styles.wrapper} {...hoverProps} {...props}>
+      <span style={styles.srOnly}>{displayText}</span>
+
+      <span aria-hidden="true">
+        {displayText.split('').map((char, index) => {
+          const isRevealedOrDone = revealedIndices.has(index) || !isScrambling || !isHovering;
+
+          return (
+            <span key={index} className={isRevealedOrDone ? className : encryptedClassName}>
+              {char}
+            </span>
+          );
+        })}
+      </span>
+    </motion.span>
+  );
+}
diff --git a/cpsquad/app/glitch.css b/cpsquad/app/glitch.css
new file mode 100644
index 0000000..ce77b30
--- /dev/null
+++ b/cpsquad/app/glitch.css
@@ -0,0 +1,323 @@
+/* Performance Optimization - Hardware Acceleration */
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Matrix Rain Glow Effect - Optimized */
+@keyframes matrix-glow {
+  0%, 100% {
+    filter: brightness(1) blur(0.3px);
+  }
+  50% {
+    filter: brightness(1.3) blur(0.5px);
+  }
+}
+
+/* Matrix Character Flicker - Optimized */
+@keyframes matrix-flicker {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Import Chava Font */
+/*@import url('https://fonts.googleapis.com/css2?family=Chava&display=swap');*/
+
+/* Matrix Background Subtle Pulse */
+@keyframes matrix-pulse-bg {
+  0%, 100% {
+    opacity: 0.6;
+    filter: brightness(1);
+  }
+  50% {
+    opacity: 0.7;
+    filter: brightness(1.1);
+  }
+}
+
+/* Matrix Background Flickering */
+@keyframes matrix-flicker-bg {
+  0%, 90%, 100% {
+    opacity: 0.6;
+  }
+  92%, 96% {
+    opacity: 0.4;
+  }
+  94%, 98% {
+    opacity: 0.65;
+  }
+}
+
+.matrix-background {
+  animation: matrix-pulse-bg 4s ease-in-out infinite, matrix-flicker-bg 8s ease-in-out infinite;
+  will-change: opacity;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+.matrix-background-static {
+  animation: matrix-pulse-bg 6s ease-in-out infinite;
+  will-change: opacity;
+  transform: translateZ(0);
+}
+
+.matrix-background-filled {
+  animation: matrix-pulse-bg 4s ease-in-out infinite, matrix-flicker-bg 6s ease-in-out infinite;
+  will-change: opacity;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+/* Yellow Border Pulse Animation */
+@keyframes border-pulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 8px rgba(255, 235, 59, 0.6));
+  }
+  50% {
+    filter: drop-shadow(0 0 15px rgba(255, 235, 59, 0.9));
+  }
+}
+
+/* Delta Frame Glow */
+@keyframes frame-glow {
+  0%, 100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.matrix-rain-container {
+  animation: matrix-glow 2s ease-in-out infinite;
+}
+
+/* Glitch Keyframes for the large text (CP SQUAD) - Subtle effect */
+@keyframes glitch {
+  0%, 90%, 100% {
+    transform: translate(0);
+  }
+  92% {
+    transform: translate(-2px, 2px);
+  }
+  94% {
+    transform: translate(2px, -2px);
+  }
+  96% {
+    transform: translate(-2px, -2px);
+  }
+  98% {
+    transform: translate(2px, 2px);
+  }
+}
+
+/* Glitch Keyframes for the typing cursor (_ character) */
+@keyframes glitch-cursor {
+  0% {
+    text-shadow: 2px 0 #00ff00, -2px 0 #00ffc4;
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+  25% {
+    text-shadow: 4px 0 #00ff00, -4px 0 #00ffc4;
+    opacity: 0.8;
+    clip-path: inset(0 50% 0 0);
+  }
+  50% {
+    text-shadow: -2px 0 #00ff00, 2px 0 #00ffc4;
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+  75% {
+    text-shadow: 0 5px #00ff00, 0 -5px #00ffc4;
+    opacity: 0.7;
+    clip-path: inset(50% 0 0 0);
+  }
+  100% {
+    text-shadow: 2px 0 #00ff00, -2px 0 #00ffc4;
+    opacity: 1;
+    clip-path: inset(0 0 0 0);
+  }
+}
+
+/* Cursor Blink Keyframes */
+@keyframes blink-cursor {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Glitch Title Styling - Clean & Optimized for all screen sizes */
+.glitch-text {
+  position: relative;
+  font-family: 'Chava', monospace, 'Courier New', Courier; 
+  font-size: clamp(2.5rem, 8vw, 7rem);
+  font-weight: 400;
+  color: white;
+  animation: glitch 4s infinite alternate;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  will-change: transform;
+  text-shadow: 
+    0 0 20px rgba(255, 255, 255, 0.5),
+    0 0 40px rgba(0, 255, 196, 0.3);
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+/* Tablet optimization */
+@media (max-width: 1024px) {
+  .glitch-text {
+    font-size: clamp(2rem, 10vw, 5rem);
+    letter-spacing: 0.05em;
+  }
+}
+
+/* Mobile optimization */
+@media (max-width: 640px) {
+  .glitch-text {
+    font-size: clamp(1.75rem, 12vw, 3.5rem);
+    letter-spacing: 0.03em;
+  }
+}
+
+/* Pseudo-elements for the color-separated glitch effect - Subtle */
+.glitch-text::before,
+.glitch-text::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.glitch-text::before {
+  left: 2px;
+  text-shadow: -2px 0 #ff00c4;
+  clip-path: inset(20% 0 70% 0);
+  animation: glitch 4s infinite alternate-reverse, glitch-flicker 4s infinite;
+}
+
+.glitch-text::after {
+  left: -2px;
+  text-shadow: -2px 0 #00ffc4;
+  clip-path: inset(40% 0 55% 0);
+  animation: glitch 4s infinite alternate, glitch-flicker 4s infinite 0.2s;
+}
+
+/* Glitch flicker animation */
+@keyframes glitch-flicker {
+  0%, 89%, 100% {
+    opacity: 0;
+  }
+  90%, 99% {
+    opacity: 0.8;
+  }
+}
+
+/* Glitch Cursor Styling - Optimized */
+.glitch-cursor {
+  display: inline-block;
+  color: #00ffc4;
+  text-shadow: 2px 0 #00ff00, -2px 0 #00ffc4;
+  animation: glitch-cursor 0.5s infinite alternate, blink-cursor 0.7s infinite step-end;
+  will-change: opacity, text-shadow;
+}
+
+/* Typing Subtitle Styling - Fully Responsive & Optimized */
+.typing-text {
+  font-family: 'Chava', monospace, 'Courier New', Courier;
+  font-size: clamp(0.875rem, 2.5vw, 1.5rem);
+  font-weight: 400;
+  color: #00ffc4;
+  margin-top: 20px;
+  letter-spacing: 0.08em;
+  line-height: 1.6;
+  min-height: 2em;
+  display: inline-block;
+  will-change: contents;
+  transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+/* Revealed text styling */
+.typing-text-revealed {
+  font-family: 'Chava', monospace;
+  color: #00ffc4;
+  text-shadow: 0 0 8px rgba(0, 255, 196, 0.5);
+}
+
+/* Encrypted text styling */
+.typing-text-encrypted {
+  font-family: 'Chava', monospace;
+  color: #00ff00;
+  opacity: 0.6;
+  text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
+}
+
+/* Tablet optimization */
+@media (max-width: 1024px) {
+  .typing-text {
+    font-size: clamp(0.75rem, 3vw, 1.25rem);
+    letter-spacing: 0.05em;
+  }
+}
+
+/* Mobile optimization */
+@media (max-width: 640px) {
+  .typing-text {
+    font-size: clamp(0.75rem, 4vw, 1rem);
+    letter-spacing: 0.03em;
+    line-height: 1.8;
+  }
+}
+
+/* Delta Frame Responsive Styling */
+.delta-frame {
+  transition: all 0.3s ease;
+}
+
+.delta-outer-border {
+  vector-effect: non-scaling-stroke;
+}
+
+/* Responsive stroke widths for delta frame */
+@media (max-width: 640px) {
+  .delta-frame svg path,
+  .delta-frame svg line {
+    stroke-width: 0.5 !important;
+  }
+  
+  .delta-outer-border {
+    stroke-width: 0.6 !important;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 1024px) {
+  .delta-frame svg path,
+  .delta-frame svg line {
+    stroke-width: 0.4 !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .delta-frame svg path,
+  .delta-frame svg line {
+    stroke-width: 0.3 !important;
+  }
+}

From 0855cb52b7a52152996f5a08644cb2468f18daf5 Mon Sep 17 00:00:00 2001
From: Brij123179 <7brijpatel@gmail.com>
Date: Wed, 22 Oct 2025 23:34:54 +0530
Subject: [PATCH 7/7] feat: Update AnimatedHero with smaller triangle, Pixelify
 Sans font, and black background text

---
 .../component/AnimatedHero/AnimatedHero.jsx   | 68 ++++---------------
 1 file changed, 15 insertions(+), 53 deletions(-)

diff --git a/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx b/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx
index c36bf9c..a6d2eb3 100644
--- a/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx
+++ b/cpsquad/app/component/AnimatedHero/AnimatedHero.jsx
@@ -35,12 +35,12 @@ const AnimatedHero = () => {
     useEffect(() => {
       const createTriangleMatrix = () => {
         const chars = [];
-        const rows = 30; // More rows for denser pattern
+        const rows = 20; // Reduced rows for smaller triangle
         
         for (let row = 0; row < rows; row++) {
           // Calculate characters per row (triangle shape - wider at bottom)
-          const charsInRow = Math.floor(4 + (row * 2.8));
-          const rowWidth = charsInRow * 1.5; // Total width of this row
+          const charsInRow = Math.floor(3 + (row * 1.8));
+          const rowWidth = charsInRow * 2; // Total width of this row
           const startX = 50 - (rowWidth / 2); // Center each row
           
           for (let col = 0; col < charsInRow; col++) {
@@ -48,8 +48,8 @@ const AnimatedHero = () => {
             chars.push({
               id: `char-${row}-${col}`,
               char: matrixChars[Math.floor(Math.random() * matrixChars.length)],
-              x: startX + (col * 1.5), // Horizontal spacing
-              y: 8 + (row * 2.3), // Vertical spacing - starts higher
+              x: startX + (col * 2), // Horizontal spacing
+              y: 15 + (row * 3), // Vertical spacing - starts lower for centered triangle
               brightness: randomBrightness,
               glowDelay: Math.random() * 5, // Random glow timing
             });
@@ -84,7 +84,7 @@ const AnimatedHero = () => {
             style={{
               left: `${charData.x}%`,
               top: `${charData.y}%`,
-              fontSize: 'clamp(10px, 1.1vw, 14px)',
+              fontSize: 'clamp(8px, 1vw, 12px)',
               textShadow: `0 0 5px rgba(0, 255, 0, ${charData.brightness * 0.8})`,
               filter: `brightness(${charData.brightness})`,
               fontWeight: 400,
@@ -128,7 +128,7 @@ const AnimatedHero = () => {
             className="text-white font-bold mb-6 sm:mb-8 md:mb-10 tracking-wider relative z-30"
             style={{
               fontSize: 'clamp(3.5rem, 15vw, 9rem)',
-              fontFamily: "'Arial Black', 'Helvetica', sans-serif",
+              fontFamily: "'Pixelify Sans', 'Arial Black', 'Helvetica', sans-serif",
               fontWeight: 900,
               letterSpacing: 'clamp(0.3em, 3vw, 0.8em)',
               textShadow: '6px 6px 12px rgba(0, 0, 0, 0.9)',
@@ -146,12 +146,14 @@ const AnimatedHero = () => {
             className="min-h-[2rem] sm:min-h-[2.5rem] md:min-h-[3rem] flex items-center justify-center mb-10 sm:mb-12 md:mb-14 relative z-30"
           >
             <div 
-              className="text-[#00ff00] font-bold tracking-wide"
+              className="text-[#00ff00] font-bold tracking-wide px-6 py-2"
               style={{
-                fontSize: 'clamp(1rem, 3.5vw, 2.5rem)',
-                fontFamily: "'Courier New', monospace",
-                textShadow: '0 0 10px rgba(0, 255, 0, 0.6)',
-                letterSpacing: '0.1em',
+                fontSize: 'clamp(1.2rem, 3vw, 2rem)',
+                fontFamily: 'var(--font-pixelify-sans)',
+                textShadow: '0 0 10px rgba(0, 255, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.4)',
+                letterSpacing: '0.05em',
+                fontWeight: 700,
+                backgroundColor: 'rgba(0, 0, 0, 0.8)',
               }}
             >
               <DecryptedText
@@ -169,46 +171,6 @@ const AnimatedHero = () => {
               />
             </div>
           </motion.div>
-
-          {/* CTA Buttons */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 1.3, ease: "easeOut" }}
-            className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center items-center px-4 sm:px-6 relative z-30"
-          >
-            <motion.a
-              href="#about"
-              whileHover={{ 
-                scale: 1.05,
-                boxShadow: "0 0 30px rgba(0, 255, 0, 0.6)",
-              }}
-              whileTap={{ scale: 0.95 }}
-              className="px-8 sm:px-10 py-3 sm:py-4 bg-[#00ff00] text-black font-bold text-sm sm:text-base md:text-lg border-2 border-[#00ff00] transition-all w-full sm:w-auto text-center max-w-xs uppercase tracking-wider hover:bg-[#00dd00]"
-              style={{
-                fontFamily: "'Arial', sans-serif",
-                fontWeight: 'bold',
-              }}
-            >
-              Learn More
-            </motion.a>
-            <motion.a
-              href="#features"
-              whileHover={{ 
-                scale: 1.05,
-                backgroundColor: "#00ff00",
-                color: "#000",
-              }}
-              whileTap={{ scale: 0.95 }}
-              className="px-8 sm:px-10 py-3 sm:py-4 border-2 border-[#00ff00] text-[#00ff00] font-bold text-sm sm:text-base md:text-lg transition-all w-full sm:w-auto text-center max-w-xs uppercase tracking-wider"
-              style={{
-                fontFamily: "'Arial', sans-serif",
-                fontWeight: 'bold',
-              }}
-            >
-              Explore
-            </motion.a>
-          </motion.div>
         </motion.div>
       </div>
 
@@ -218,4 +180,4 @@ const AnimatedHero = () => {
   );
 };
 
-export default AnimatedHero;
+export default AnimatedHero;
\ No newline at end of file