This commit is contained in:
magdo
2025-10-24 20:01:32 +02:00
3 changed files with 90 additions and 68 deletions
@@ -56,7 +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 */}
@@ -68,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 />}
@@ -153,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,18 @@ 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 = () => {