From 5722846da3cb2c84271b1bfbf1b0e27a4348f8ee Mon Sep 17 00:00:00 2001
From: magdo <m.donat@mdnd-it.hu>
Date: Fri, 24 Oct 2025 19:52:11 +0200
Subject: [PATCH] To The Top

---
 .../src/pages/Companies/Companies.jsx         | 145 ++++++++++--------
 1 file changed, 83 insertions(+), 62 deletions(-)

diff --git a/SerpentRace_Frontend/src/pages/Companies/Companies.jsx b/SerpentRace_Frontend/src/pages/Companies/Companies.jsx
index 0a73794b..8d64cb8c 100644
--- a/SerpentRace_Frontend/src/pages/Companies/Companies.jsx
+++ b/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 />}
@@ -152,68 +172,69 @@ const CompanyHub = () => {
             </div>
           </SectionContainer>
 
-          {/* Contact + Join Section */}
-          <section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0">
-            {/* Contact */}
-            <div
-              id="contact"
-              className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
-            >
-              <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
-                Kapcsolatfelvétel cégeknek
-              </h2>
-              <form className="grid gap-6 md:grid-cols-2">
-                <input
-                  type="text"
-                  placeholder="Cég neve"
-                  className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
-                />
-                <input
-                  type="email"
-                  placeholder="Email"
-                  className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1"
-                />
-                <textarea
-                  placeholder="Üzenet"
-                  rows="6"
-                  className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
-                />
-                <button
-                  type="submit"
-                  className="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition"
-                >
-                  Küldés
-                </button>
-              </form>
-            </div>
+            {/* Contact + Join Section */}
+            <section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0">
+              {/* Contact */}
+              <div
+                id="contact"
+                className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
+              >
+                <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+                  Kapcsolatfelvétel cégeknek
+                </h2>
+                <form className="grid gap-6 md:grid-cols-2">
+                  <input
+                    type="text"
+                    placeholder="Cég neve"
+                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
+                  />
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1"
+                  />
+                  <textarea
+                    placeholder="Üzenet"
+                    rows="6"
+                    className="bg-white/20 text-white placeholder-white px-5 py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2"
+                  />
+                  <button
+                    type="submit"
+                    className="bg-emerald-500 hover:bg-emerald-400 text-white px-8 py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition"
+                  >
+                    Küldés
+                  </button>
+                </form>
+              </div>
 
-            {/* Join */}
-            <div
-              id="join"
-              className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
-            >
-              <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
-                Csatlakozz partnerként
-              </h2>
-              <ul className="list-disc space-y-4 ml-8 text-base text-white/90">
-                <li className="flex gap-3 items-center">
-                  <FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
-                  Gamification a vállalati kultúrában
-                </li>
-                <li className="flex gap-3 items-center">
-                  <FaChartBar className="text-blue-400 text-xl flex-shrink-0" />
-                  Teljesítménymérés játékosan
-                </li>
-                <li className="flex gap-3 items-center">
-                  <FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" />
-                  Személyre szabott riportok
-                </li>
-                <li className="flex gap-3 items-center">
-                  <FaHeadset className="text-pink-400 text-xl flex-shrink-0" />
-                  Dedikált ügyfélszolgálat
-                </li>
-              </ul>
-            </div>
+              {/* Join */}
+              <div
+                id="join"
+                className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
+              >
+                <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+                  Csatlakozz partnerként
+                </h2>
+                <ul className="list-disc space-y-4 ml-8 text-base text-white/90">
+                  <li className="flex gap-3 items-center">
+                    <FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
+                    Gamification a vállalati kultúrában
+                  </li>
+                  <li className="flex gap-3 items-center">
+                    <FaChartBar className="text-blue-400 text-xl flex-shrink-0" />
+                    Teljesítménymérés játékosan
+                  </li>
+                  <li className="flex gap-3 items-center">
+                    <FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" />
+                    Személyre szabott riportok
+                  </li>
+                  <li className="flex gap-3 items-center">
+                    <FaHeadset className="text-pink-400 text-xl flex-shrink-0" />
+                    Dedikált ügyfélszolgálat
+                  </li>
+                </ul>
+              </div>
+            </section>
           </section>
         </main>