magdo
248 lines
9.5 KiB
React
248 lines
9.5 KiB
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.jsx"
|
|
import {
|
|
FaBuilding,
|
|
FaEnvelope,
|
|
FaHandshake,
|
|
FaPalette,
|
|
FaTags,
|
|
FaUserCheck,
|
|
FaDollarSign,
|
|
FaChartLine,
|
|
FaVideo,
|
|
FaHandsHelping,
|
|
FaTrophy,
|
|
FaChartBar,
|
|
FaUsers,
|
|
FaHeadset,
|
|
} from "react-icons/fa"
|
|
|
|
const Card = ({ icon, label, description, targetId, className }) => {
|
|
const handleClick = () => {
|
|
const section = document.getElementById(targetId)
|
|
if (section) {
|
|
section.scrollIntoView({ behavior: "smooth" })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
onClick={handleClick}
|
|
className={`cursor-pointer hover:scale-105 transition-all duration-300 border border-gray-400 shadow-lg rounded-2xl p-8 w-72 text-center animate-fadeInUp ${className}`}
|
|
>
|
|
<div className="text-5xl mb-4 flex justify-center">{icon}</div>
|
|
<h3 className="text-2xl font-bold mb-2">{label}</h3>
|
|
<p className="text-white/90 text-sm">{description}</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const SectionContainer = ({ id, title, children }) => {
|
|
return (
|
|
<section
|
|
id={id}
|
|
className="mt-20 mb-28 px-4 md:px-0 opacity-100 animate-fadeInUp"
|
|
>
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-4xl font-bold border-b-4 inline-block border-emerald-400 pb-2 text-white">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
{children}
|
|
</section>
|
|
)
|
|
}
|
|
|
|
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 */}
|
|
<div className="fixed inset-0 -z-10">
|
|
<Background />
|
|
</div>
|
|
|
|
<div className="relative z-10 flex flex-col min-h-screen">
|
|
<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 />}
|
|
label="Mit nyújtunk"
|
|
description="Játékosított tanulási platform cégeknek."
|
|
targetId="intro"
|
|
className="bg-gradient-to-br from-pink-500 via-purple-600 to-purple-800"
|
|
/>
|
|
<Card
|
|
icon={<FaEnvelope />}
|
|
label="Kapcsolat"
|
|
description="Lépj kapcsolatba velünk vagy kérj ajánlatot!"
|
|
targetId="contact"
|
|
className="bg-gradient-to-br from-blue-700 to-blue-500"
|
|
/>
|
|
<Card
|
|
icon={<FaHandshake />}
|
|
label="Csatlakozás"
|
|
description="Legyél partnerünk, és fejlődj velünk!"
|
|
targetId="join"
|
|
className="bg-gradient-to-br from-green-700 to-green-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Mit nyújtunk */}
|
|
<SectionContainer id="intro" title="Mit nyújtunk cégeknek">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
|
{/* Egyénre szabás */}
|
|
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
|
|
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
|
|
<FaPalette className="text-4xl" />
|
|
Egyénre szabás
|
|
</h3>
|
|
<ul className="list-disc ml-6 space-y-4 text-white/90 text-lg">
|
|
<li className="flex items-center gap-4">
|
|
<FaUserCheck className="text-green-400 text-2xl" />
|
|
Testreszabható design és színek
|
|
</li>
|
|
<li className="flex items-center gap-4">
|
|
<FaTrophy className="text-yellow-400 text-2xl" />
|
|
Egyedi badge és jutalmazási rendszer
|
|
</li>
|
|
<li className="flex items-center gap-4">
|
|
<FaChartBar className="text-blue-400 text-2xl" />
|
|
Fejlődési útvonalak
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Árazás */}
|
|
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
|
|
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
|
|
<FaDollarSign className="text-4xl" />
|
|
Árazás
|
|
</h3>
|
|
<ul className="list-disc ml-6 space-y-4 text-white/90 text-lg">
|
|
<li className="flex items-center gap-4">
|
|
<FaUsers className="text-purple-400 text-2xl" />
|
|
Kedvezményes csomagok KKV-knak
|
|
</li>
|
|
<li className="flex items-center gap-4">
|
|
<FaChartLine className="text-indigo-400 text-2xl" />
|
|
Testreszabott megoldások
|
|
</li>
|
|
<li className="flex items-center gap-4">
|
|
<FaTags className="text-pink-400 text-2xl" />
|
|
Nincs rejtett költség
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Demó videó */}
|
|
<div className="bg-white/5 rounded-3xl border border-gray-700 shadow-lg p-10 flex flex-col gap-8">
|
|
<h3 className="text-2xl font-extrabold flex items-center gap-4 text-emerald-400">
|
|
<FaVideo className="text-4xl" />
|
|
Csapatunk videó
|
|
</h3>
|
|
<video controls className="w-full rounded-xl shadow-xl">
|
|
<source src="/demo.mp4" type="video/mp4" />
|
|
A böngésződ nem támogatja a videó lejátszását.
|
|
</video>
|
|
</div>
|
|
</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>
|
|
|
|
{/* 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>
|
|
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CompanyHub
|