From b49a83baafd1b439d891da0a1c3a002f23d06f98 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Wed, 25 Feb 2026 17:31:17 +0200
Subject: [PATCH] Bob AI: Add fancy animations across the website including:
 fade-in a

---
 src/app/page.tsx | 46 +++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8372438..b22a374 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { useEffect, useRef } from 'react';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import AboutMetric from '@/components/sections/about/AboutMetric';
@@ -11,6 +12,41 @@ import { Users, Calendar, Award, Clock, Sparkles, MessageSquare, MessageCircle,
 import Link from 'next/link';
 
 export default function HomePage() {
+  const heroRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (heroRef.current) {
+        const scrollY = window.scrollY;
+        heroRef.current.style.transform = `translateY(${scrollY * 0.5}px)`;
+      }
+    };
+
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -100px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('animate-fade-in-up');
+        }
+      });
+    }, observerOptions);
+
+    document.querySelectorAll('[data-section]').forEach((section) => {
+      observer.observe(section);
+    });
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      observer.disconnect();
+    };
+  }, []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -38,7 +74,7 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="hero-section" data-section="hero-section">
+      <div id="hero-section" data-section="hero-section" ref={heroRef} className="relative overflow-hidden">
         <HeroBillboardGallery 
           title="Welcome to TechConnect Club"
           description="Where innovation meets community. Join us in exploring the latest in computing, building projects, and connecting with fellow tech enthusiasts."
@@ -59,7 +95,7 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="about-section" data-section="about-section">
+      <div id="about-section" data-section="about-section" className="opacity-0">
         <AboutMetric 
           title="Our Club Impact"
           metrics={[
@@ -73,7 +109,7 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="features-section" data-section="features-section">
+      <div id="features-section" data-section="features-section" className="opacity-0">
         <FeatureCardTwelve 
           title="Empower Your Tech Journey"
           description="Join our computer club to unlock your potential through hands-on learning, collaborative projects, and industry insights tailored for students and tech enthusiasts."
@@ -118,7 +154,7 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="testimonials-section" data-section="testimonials-section">
+      <div id="testimonials-section" data-section="testimonials-section" className="opacity-0">
         <TestimonialCardTwelve 
           testimonials={[
             {id: 'testimonial-1', name: 'Alex Johnson', imageSrc: 'http://img.b2bpic.net/free-photo/medium-shot-smiley-people-celebrating_23-2149008959.jpg?_wi=1'},
@@ -133,7 +169,7 @@ export default function HomePage() {
         />
       </div>
 
-      <div id="contact-section" data-section="contact-section">
+      <div id="contact-section" data-section="contact-section" className="opacity-0">
         <ContactFaq 
           faqs={[
             {
-- 
2.49.1