SerpentRace_Frontend/src/pages/Companies/Companies.jsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
 import Navbar from "../../components/Navbar/Navbar.jsx"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background"
@@ -56,6 +56,20 @@ const SectionContainer = ({ id, title, children }) => {
 }
 
 const CompanyHub = () => {
+
+  const [visible, setVisible] = useState(false)
+  const sectionRef = useRef(null)
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) setVisible(true)
+      },
+      { threshold: 0.3 }
+    )
+    if (sectionRef.current) observer.observe(sectionRef.current)
+    return () => observer.disconnect()
+  }, [])
+
   return (
     <div className="relative min-h-screen text-white">
       {/* Background fixed behind everything */}
@@ -67,6 +81,12 @@ const CompanyHub = () => {
         <Navbar />
 
         <main className="flex-grow relative px-4 py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth">
+          <section
+          ref={sectionRef}
+          className={`max-w-5xl mx-auto transition-all duration-1000 ease-out ${
+            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+          }`}
+        >
           <div className="flex justify-center gap-6 mt-8 flex-wrap">
             <Card
               icon={<FaBuilding />}
@@ -215,6 +235,7 @@ const CompanyHub = () => {
                 </ul>
               </div>
             </section>
+          </section>
         </main>
 
         <Footer />