This commit is contained in:
@@ -0,0 +1,163 @@
|
||||
import React, { useEffect, useRef, useState } from "react"
|
||||
import Navbar from "../../components/Navbar/Navbar"
|
||||
import Footer from "../../components/Footer/Footer"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
import Walke from "../../assets/pictures/walke.jpg"
|
||||
import Busi from "../../assets/pictures/busi.jpg"
|
||||
import Gege from "../../assets/pictures/gege.jpg"
|
||||
import Zsola from "../../assets/pictures/zsola.jpg"
|
||||
import Donat from "../../assets/pictures/donat.jpg"
|
||||
import Turo from "../../assets/pictures/turo.jpg"
|
||||
import Piskor from "../../assets/pictures/piskor.jpg"
|
||||
|
||||
const About = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const sectionRef = useRef(null)
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
name: "Magda Donát",
|
||||
role: "Backend fejlesztő",
|
||||
photo: Donat,
|
||||
},
|
||||
{
|
||||
name: "Máté Gergely",
|
||||
role: "UI/UX designer",
|
||||
photo: Gege,
|
||||
},
|
||||
{
|
||||
name: "Walke Gábor",
|
||||
role: "UI/UX designer, Frontend fejlesztő",
|
||||
photo: Walke,
|
||||
},
|
||||
{
|
||||
name: "Piskor Barnabás",
|
||||
role: "Frontend fejlesztő",
|
||||
photo: Piskor,
|
||||
},
|
||||
{
|
||||
name: "Buús Levente",
|
||||
role: "UI/UX designer",
|
||||
photo: Busi,
|
||||
},
|
||||
{
|
||||
name: "Pintér Zsolt",
|
||||
role: "UI/UX designer",
|
||||
photo: Zsola,
|
||||
},
|
||||
{
|
||||
name: "Thuróczy Attila",
|
||||
role: "UI/UX designer",
|
||||
photo: Turo,
|
||||
},
|
||||
]
|
||||
|
||||
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="flex flex-col min-h-screen overflow-y-auto relative">
|
||||
|
||||
{/* Háttér – fix pozíció, a teljes képernyőre */}
|
||||
<div className="fixed top-0 left-0 w-full h-full z-[-10]">
|
||||
<Background />
|
||||
</div>
|
||||
|
||||
{/* Navbar fix */}
|
||||
<div className="fixed top-0 left-0 right-0 z-30">
|
||||
<Navbar />
|
||||
</div>
|
||||
|
||||
{/* Tartalom */}
|
||||
<main className="flex-grow text-white px-6 pt-16 mt-0 mb-20">
|
||||
|
||||
{/* Vissza gomb */}
|
||||
<div className="fixed top-4 left-4 z-50 group">
|
||||
<div className="absolute top-full mt-1 left-1/2 -translate-x-1/2 scale-0 group-hover:scale-100 transition transform bg-zinc-800 text-sm text-white px-3 py-1 rounded shadow-lg">
|
||||
Főoldalra
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
}`}
|
||||
>
|
||||
{/* Rólunk cím */}
|
||||
<h1 className="mt-24 text-5xl font-extrabold text-green-300 mb-10 text-center tracking-wide drop-shadow-lg">
|
||||
<span className="inline-block animate-pulse mr-2"></span> Rólunk
|
||||
</h1>
|
||||
|
||||
{/* Leírás */}
|
||||
<p className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto">
|
||||
Célunk, hogy egy innovatív, közösségorientált platformot építsünk, ahol a versenyzés, játék és technológia találkozik. Elhivatott csapatunk minden nap azon dolgozik, hogy élményt és értéket nyújtson a felhasználóinknak.
|
||||
</p>
|
||||
|
||||
{/* Küldetésünk */}
|
||||
<div className="mt-12">
|
||||
<h2 className="text-2xl font-bold text-green-300 mb-4">Küldetésünk</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
|
||||
<h3 className="text-xl font-semibold mb-2">Innováció</h3>
|
||||
<p className="text-zinc-300">Folyamatosan fejlesztjük rendszereinket a legmodernebb technológiákkal.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
|
||||
<h3 className="text-xl font-semibold mb-2">Közösség</h3>
|
||||
<p className="text-zinc-300">Fontos számunkra, hogy egy összetartó, aktív közösséget építsünk ki.</p>
|
||||
</div>
|
||||
<div className="bg-zinc-800 rounded-xl p-6 shadow-lg hover:scale-105 transition">
|
||||
<h3 className="text-xl font-semibold mb-2">Minőség</h3>
|
||||
<p className="text-zinc-300">Minden részletre figyelünk a felhasználói élmény és biztonság érdekében.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Csapat */}
|
||||
<div className="mt-16">
|
||||
<h2 className="text-2xl font-bold text-green-300 mb-6">Csapatunk</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{teamMembers.map((member, i) => {
|
||||
const isLast = i === teamMembers.length - 1
|
||||
const itemsInLastRow = teamMembers.length % 3
|
||||
const shouldCenter = itemsInLastRow === 1 && isLast
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex flex-col items-center text-center bg-zinc-800 p-6 rounded-xl shadow-lg hover:shadow-green-400/20 hover:scale-105 transition ${
|
||||
shouldCenter ? "md:col-start-2" : ""
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={member.photo}
|
||||
alt={member.name}
|
||||
className="w-24 h-24 rounded-full object-cover mb-4 border-4 border-green-400"
|
||||
/>
|
||||
<h4 className="text-lg font-bold">{member.name}</h4>
|
||||
<p className="text-zinc-400">{member.role}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer (nem scrollozható alá) */}
|
||||
<footer className="mt-auto">
|
||||
<Footer />
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default About
|
||||
Reference in New Issue
Block a user