This commit is contained in:
magdo
2025-10-24 20:01:32 +02:00
3 changed files with 90 additions and 68 deletions
+1 -2
View File
@@ -76,8 +76,7 @@ services:
- NODE_ENV=development - NODE_ENV=development
- VITE_API_URL=http://localhost:3000 - VITE_API_URL=http://localhost:3000
volumes: volumes:
- ../SerpentRace_Frontend:/app []
- /app/node_modules
develop: develop:
watch: watch:
- action: sync - action: sync
@@ -56,7 +56,20 @@ const SectionContainer = ({ id, title, children }) => {
} }
const CompanyHub = () => { 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 ( return (
<div className=" relative min-h-screen text-white"> <div className=" relative min-h-screen text-white">
{/* Background fixed behind everything */} {/* Background fixed behind everything */}
@@ -68,6 +81,12 @@ const CompanyHub = () => {
<Navbar /> <Navbar />
<main className="flex-grow relative px-4 py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth"> <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"> <div className="flex justify-center gap-6 mt-8 flex-wrap">
<Card <Card
icon={<FaBuilding />} icon={<FaBuilding />}
@@ -153,68 +172,69 @@ const CompanyHub = () => {
</div> </div>
</SectionContainer> </SectionContainer>
{/* Contact + Join Section */} {/* 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"> <section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0">
{/* Contact */} {/* Contact */}
<div <div
id="contact" id="contact"
className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg" 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"> <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
Kapcsolatfelvétel cégeknek Kapcsolatfelvétel cégeknek
</h2> </h2>
<form className="grid gap-6 md:grid-cols-2"> <form className="grid gap-6 md:grid-cols-2">
<input <input
type="text" type="text"
placeholder="Cég neve" 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" 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 <input
type="email" type="email"
placeholder="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" 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 <textarea
placeholder="Üzenet" placeholder="Üzenet"
rows="6" 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" 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 <button
type="submit" 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" 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 Küldés
</button> </button>
</form> </form>
</div> </div>
{/* Join */} {/* Join */}
<div <div
id="join" id="join"
className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg" 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"> <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
Csatlakozz partnerként Csatlakozz partnerként
</h2> </h2>
<ul className="list-disc space-y-4 ml-8 text-base text-white/90"> <ul className="list-disc space-y-4 ml-8 text-base text-white/90">
<li className="flex gap-3 items-center"> <li className="flex gap-3 items-center">
<FaHandsHelping className="text-green-400 text-xl flex-shrink-0" /> <FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
Gamification a vállalati kultúrában Gamification a vállalati kultúrában
</li> </li>
<li className="flex gap-3 items-center"> <li className="flex gap-3 items-center">
<FaChartBar className="text-blue-400 text-xl flex-shrink-0" /> <FaChartBar className="text-blue-400 text-xl flex-shrink-0" />
Teljesítménymérés játékosan Teljesítménymérés játékosan
</li> </li>
<li className="flex gap-3 items-center"> <li className="flex gap-3 items-center">
<FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" /> <FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" />
Személyre szabott riportok Személyre szabott riportok
</li> </li>
<li className="flex gap-3 items-center"> <li className="flex gap-3 items-center">
<FaHeadset className="text-pink-400 text-xl flex-shrink-0" /> <FaHeadset className="text-pink-400 text-xl flex-shrink-0" />
Dedikált ügyfélszolgálat Dedikált ügyfélszolgálat
</li> </li>
</ul> </ul>
</div> </div>
</section>
</section> </section>
</main> </main>
@@ -2,7 +2,7 @@
// Főoldal - Landing Page // Főoldal - Landing Page
import { useNavigate } from "react-router-dom" import { data, useNavigate } from "react-router-dom"
import Navbar from "../../components/Navbar/Navbar" import Navbar from "../../components/Navbar/Navbar"
import Footer from "../../components/Footer/Footer.jsx" import Footer from "../../components/Footer/Footer.jsx"
import Background from "../../assets/backgrounds/Background.jsx" import Background from "../../assets/backgrounds/Background.jsx"
@@ -12,15 +12,18 @@ export default function LandingPageMain() {
const navigate = useNavigate(); const navigate = useNavigate();
const handleNavigateToPlay = () => { const handleNavigateToPlay = () => {
navigate("/login"); navigate("/login", { preventScrollReset: false });
window.scrollTo(0, 0);
}; };
const handleNavigateToAuth = () => { const handleNavigateToAuth = () => {
navigate("/register"); navigate("/companies", { preventScrollReset: false });
window.scrollTo(0, 0);
}; };
const handleNavigateToGame = () => { const handleNavigateToGame = () => {
navigate("/home"); navigate("/home", { preventScrollReset: false });
window.scrollTo(0, 0);
}; };
const handleNavigateToContacts = () => { const handleNavigateToContacts = () => {