Bob AI: Add fancy animations across the website including: fade-in a

Merge version_2 into main

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={[
             {

src/app/styles/variables.css

@@ -3,22 +3,22 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #120a00e6;;
-  --primary-cta: #ff8c42;;
-  --secondary-cta: #f9f9f9;;
-  --accent: #e2e2e2;;
-  --background-accent: #c4c4c4;; */
+  --card: #f5f1ed;;
+  --foreground: #0a0603e6;;
+  --primary-cta: #ff6b35;;
+  --secondary-cta: #ffd89b;;
+  --accent: #d4af37;;
+  --background-accent: #8b7355;; */
 
-  --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #120a00e6;;
-  --primary-cta: #ff8c42;;
+  --background: #faf8f5;;
+  --card: #f5f1ed;;
+  --foreground: #0a0603e6;;
+  --primary-cta: #ff6b35;;
   --primary-cta-text: #ffffff;;
-  --secondary-cta: #f9f9f9;;
+  --secondary-cta: #ffd89b;;
   --secondary-cta-text: #120a00e6;;
-  --accent: #e2e2e2;;
-  --background-accent: #c4c4c4;;
+  --accent: #d4af37;;
+  --background-accent: #8b7355;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);