Merge branch 'main' of https://git.mdnd-it.cc/Donat/SerpentRace into 1024zsola

2025-10-24 20:39:51 +02:00
parent cea9062f91 e3f752ce8a
commit 6867cb2b72
13 changed files with 203 additions and 133 deletions
@@ -1,7 +1,7 @@
-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"
+import Background from "../../assets/backgrounds/Background.jsx"
 import {
  FaBuilding,
  FaEnvelope,
@@ -56,8 +56,22 @@ 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">
+    <div className=" relative min-h-screen text-white">
      {/* Background fixed behind everything */}
      <div className="fixed inset-0 -z-10">
        <Background />
@@ -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>

@@ -2,7 +2,7 @@
 // Főoldal - Landing Page


-import { useNavigate } from "react-router-dom"
+import { data, useNavigate } from "react-router-dom"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
@@ -12,15 +12,22 @@ export default function LandingPageMain() {
  const navigate = useNavigate();

  const handleNavigateToPlay = () => {
-    navigate("/login"); 
+    navigate("/login", { preventScrollReset: false });
+    window.scrollTo(0, 0);
  };

  const handleNavigateToAuth = () => {
-    navigate("/register");
+    navigate("/companies", { preventScrollReset: false });
+    window.scrollTo(0, 0);
  };

  const handleNavigateToGame = () => {
-    navigate("/home"); 
+    navigate("/home", { preventScrollReset: false });
+    window.scrollTo(0, 0);
+  };
+
+  const handleNavigateToContacts = () => {
+    navigate("/contacts"); 
  };

  return (
@@ -32,7 +39,7 @@ export default function LandingPageMain() {
        <Navbar />
      </div>
      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <LandingPage onNavigateToPlay={handleNavigateToPlay} onNavigateToAuth={handleNavigateToAuth} onNavigateToGame={handleNavigateToGame} />
+        <LandingPage onNavigateToContacts={handleNavigateToContacts} onNavigateToPlay={handleNavigateToPlay} onNavigateToAuth={handleNavigateToAuth} onNavigateToGame={handleNavigateToGame} />
      </main>
      <Footer />
    </div>
@@ -6,7 +6,7 @@ import Logo from "../../assets/pictures/Logo.jsx"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import UserProfile from "../../components/Userdetails/Userdetails.jsx"
-import CompanyHub from "../Companies/Companies.jsx"
+import CompanyHub from "../Contacts/Contacts.jsx"

 import RatingSet from "../../components/PopUp/RatingSet" // <- statisztikai komponens