From e2bcaa5c81b92d4e40efc2c91951fa4c597df299 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sat, 18 Apr 2026 12:54:13 +0000
Subject: [PATCH] Bob AI: Add complex animations to interactive elements like
 hover ef

---
 src/App.tsx               | 40 ++++++++++++++++++++++++-------
 src/hooks/useOnScreen.ts  | 30 +++++++++++++++++++++++
 src/styles/animations.css | 50 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 9 deletions(-)
 create mode 100644 src/hooks/useOnScreen.ts

diff --git a/src/App.tsx b/src/App.tsx
index 3b93060..1c72062 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+import useOnScreen from '@/hooks/useOnScreen';
 import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
@@ -12,6 +14,26 @@ import { Award, CheckCircle, Zap } from "lucide-react";
 import './styles/animations.css';
 
 export default function App() {
+  const heroRef = useRef<HTMLDivElement>(null);
+  const aboutRef = useRef<HTMLDivElement>(null);
+  const servicesRef = useRef<HTMLDivElement>(null);
+  const metricsRef = useRef<HTMLDivElement>(null);
+  const testimonialsRef = useRef<HTMLDivElement>(null);
+  const pricingRef = useRef<HTMLDivElement>(null);
+  const faqRef = useRef<HTMLDivElement>(null);
+  const contactRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
+
+  const heroOnScreen = useOnScreen(heroRef, "-100px");
+  const aboutOnScreen = useOnScreen(aboutRef, "-100px");
+  const servicesOnScreen = useOnScreen(servicesRef, "-100px");
+  const metricsOnScreen = useOnScreen(metricsRef, "-100px");
+  const testimonialsOnScreen = useOnScreen(testimonialsRef, "-100px");
+  const pricingOnScreen = useOnScreen(pricingRef, "-100px");
+  const faqOnScreen = useOnScreen(faqRef, "-100px");
+  const contactOnScreen = useOnScreen(contactRef, "-100px");
+  const footerOnScreen = useOnScreen(footerRef, "-100px");
+
   return (
     <>
   <div id="nav" data-section="nav">
@@ -42,7 +64,7 @@ export default function App() {
     />
   </div>
 
-  <div id="hero" data-section="hero">
+  <div ref={heroRef} id="hero" data-section="hero" className={`animate-on-scroll ${heroOnScreen ? 'is-visible' : ''}`}>
       <HeroSplit
       tag="Serving Greater LA"
       title="Beat the Heat: Expert AC Service, Today"
@@ -59,7 +81,7 @@ export default function App() {
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div ref={aboutRef} id="about" data-section="about" className={`animate-on-scroll ${aboutOnScreen ? 'is-visible' : ''}`}>
       <AboutMediaOverlay
       tag="About Us"
       title="Trusted LA Cooling Experts"
@@ -68,7 +90,7 @@ export default function App() {
     />
   </div>
 
-  <div id="services" data-section="services" className="texture-noise">
+  <div ref={servicesRef} id="services" data-section="services" className={`texture-noise animate-on-scroll ${servicesOnScreen ? 'is-visible' : ''}`}>
       <FeaturesTimelineCards
       tag="Our Expertise"
       title="Comprehensive Cooling Solutions"
@@ -93,7 +115,7 @@ export default function App() {
     />
   </div>
 
-  <div id="metrics" data-section="metrics">
+  <div ref={metricsRef} id="metrics" data-section="metrics" className={`animate-on-scroll ${metricsOnScreen ? 'is-visible' : ''}`}>
       <MetricsIconCards
       tag="Reliability Metrics"
       title="Why LA Homeowners Trust Us"
@@ -118,7 +140,7 @@ export default function App() {
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
+  <div ref={testimonialsRef} id="testimonials" data-section="testimonials" className={`animate-on-scroll ${testimonialsOnScreen ? 'is-visible' : ''}`}>
       <TestimonialOverlayCards
       tag="Customer Reviews"
       title="Proven Quality Service"
@@ -163,7 +185,7 @@ export default function App() {
     />
   </div>
 
-  <div id="pricing" data-section="pricing" className="gradient-card">
+  <div ref={pricingRef} id="pricing" data-section="pricing" className={`gradient-card animate-on-scroll ${pricingOnScreen ? 'is-visible' : ''}`}>
       <PricingHighlightedCards
       tag="Fair Pricing"
       title="Simple, Upfront Pricing"
@@ -217,7 +239,7 @@ export default function App() {
     />
   </div>
 
-  <div id="faq" data-section="faq" className="texture-noise">
+  <div ref={faqRef} id="faq" data-section="faq" className={`texture-noise animate-on-scroll ${faqOnScreen ? 'is-visible' : ''}`}>
       <FaqTwoColumn
       tag="Frequently Asked Questions"
       title="Questions Answered"
@@ -243,7 +265,7 @@ export default function App() {
     />
   </div>
 
-  <div id="contact" data-section="contact">
+  <div ref={contactRef} id="contact" data-section="contact" className={`animate-on-scroll ${contactOnScreen ? 'is-visible' : ''}`}>
       <ContactSplitForm
       tag="Contact Us"
       title="Schedule Your Service"
@@ -278,7 +300,7 @@ export default function App() {
     />
   </div>
 
-  <div id="footer" data-section="footer">
+  <div ref={footerRef} id="footer" data-section="footer" className={`animate-on-scroll ${footerOnScreen ? 'is-visible' : ''}`}>
       <FooterBasic
       columns={[
         {
diff --git a/src/hooks/useOnScreen.ts b/src/hooks/useOnScreen.ts
new file mode 100644
index 0000000..41b517b
--- /dev/null
+++ b/src/hooks/useOnScreen.ts
@@ -0,0 +1,30 @@
+import { useState, useEffect, RefObject } from 'react';
+
+export default function useOnScreen(ref: RefObject<HTMLElement>, rootMargin = '0px') {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIntersecting(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      {
+        rootMargin,
+      }
+    );
+    const currentRef = ref.current;
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef);
+      }
+    };
+  }, [ref, rootMargin]);
+
+  return isIntersecting;
+}
\ No newline at end of file
diff --git a/src/styles/animations.css b/src/styles/animations.css
index 0d1a505..4558ac2 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -172,3 +172,53 @@
 .animated-gradient-button:hover {
   animation: gradient-shift 4s ease infinite;
 }
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-on-scroll {
+  opacity: 0;
+}
+
+.animate-on-scroll.is-visible {
+  animation: fade-in-up 0.8s ease-out forwards;
+}
+
+/* Hover effects */
+.card, .primary-button, .secondary-button {
+  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: color-mix(in srgb, var(--color-foreground) 8%, transparent) 0px 8px 40px 0px;
+}
+
+.primary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 8px 16px -4px color-mix(in srgb, var(--color-accent) 45%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
+}
+
+.secondary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.08);
+}