navbar meg merge

SerpentRace_Frontend/src/pages/About/About.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useState } from "react"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer"
 import Background from "../../assets/backgrounds/Background.jsx"
@@ -9,10 +9,53 @@ 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"
+// ÚJ: kész ikonok használata
+import { FaLightbulb, FaUsers, FaShieldAlt } from "react-icons/fa"
+// ÚJ: framer-motion használata a Landing-hez hasonló megjelenésért
+import { motion } from "framer-motion"
+
+///// ÚJ: központosított motion beállítások /////
+const baseMotion = {
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true, amount: 0.2 },
+  transition: { duration: 0.8 },
+}
+
+const getMotionProps = (overrides = {}) => {
+  const { transition = {}, viewport = {}, ...rest } = overrides
+  return {
+    ...baseMotion,
+    ...rest,
+    transition: { ...baseMotion.transition, ...transition },
+    viewport: { ...baseMotion.viewport, ...viewport },
+  }
+}
+
+///// ÚJ: variánsok a szülő-gyermek animációhoz (stagger) /////
+// container: használható olyan szekciókra, ahol a children együttesen animálódjanak
+const containerVariant = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.06,
+      // delayChildren beállítható egyedi késleltetéshez
+    },
+  },
+}
+// item: alap animáció minden gyermek elemhez
+const itemVariant = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
+}
 
 const About = () => {
-  const [visible, setVisible] = useState(false)
-  const sectionRef = useRef(null)
+  // Új: kontakt űrlap state + státusz
+  const [contactName, setContactName] = useState("")
+  const [contactEmail, setContactEmail] = useState("")
+  const [contactMessage, setContactMessage] = useState("")
+  const [submitting, setSubmitting] = useState(false)
+  const [success, setSuccess] = useState("")
 
   const teamMembers = [
     {
@@ -52,20 +95,35 @@ const About = () => {
     },
   ]
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) setVisible(true)
-      },
-      { threshold: 0.3 }
-    )
-    if (sectionRef.current) observer.observe(sectionRef.current)
-    return () => observer.disconnect()
-  }, [])
+  // Új: egyszerű onSubmit kezelő (nem változott logika)
+  const handleContactSubmit = (e) => {
+    e.preventDefault()
+    if (!contactName.trim() || !contactEmail.trim() || !contactMessage.trim()) {
+      setSuccess("Kérlek tölts ki minden mezőt.")
+      return
+    }
+    // nagyon egyszerű email ellenőrzés
+    const emailRe = /\S+@\S+\.\S+/
+    if (!emailRe.test(contactEmail)) {
+      setSuccess("Kérlek adj meg érvényes email címet.")
+      return
+    }
+
+    setSubmitting(true)
+    setSuccess("")
+    // Itt lehetne API hívás; most csak szimuláljuk
+    setTimeout(() => {
+      setSubmitting(false)
+      setContactName("")
+      setContactEmail("")
+      setContactMessage("")
+      setSuccess("Köszönjük, üzenetedet megkaptuk!")
+      setTimeout(() => setSuccess(""), 5000)
+    }, 900)
+  }
 
   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 />
@@ -78,7 +136,6 @@ const About = () => {
 
       {/* 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">
@@ -86,56 +143,109 @@ const About = () => {
           </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"
-          }`}
-        >
+        {/* Általános konténer — framer-motion mint a Landingnél */}
+        <motion.section className="max-w-5xl mx-auto" {...getMotionProps({ transition: { duration: 0.7 } })}>
           {/* Rólunk cím */}
-          <h1 className="mt-24 text-5xl font-extrabold text-green-300 mb-10 text-center tracking-wide drop-shadow-lg">
+          <motion.h1
+            className="mt-24 text-5xl font-extrabold text-green-300 mb-10 text-center tracking-wide drop-shadow-lg"
+            {...getMotionProps({ transition: { duration: 0.8, delay: 0.1 } })}
+          >
             <span className="inline-block animate-pulse mr-2"></span> Rólunk
-          </h1>
+          </motion.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>
+          <motion.p
+            className="text-lg leading-relaxed text-zinc-200 mb-10 text-center max-w-3xl mx-auto"
+            {...getMotionProps({ transition: { duration: 0.8, delay: 0.2 } })}
+          >
+            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.
+          </motion.p>
 
-          {/* Küldetésünk */}
-          <div className="mt-12">
+          {/* Küldetésünk — most szülő variánssal, hogy a kártyák ne triggereljenek külön és ne ugorjanak */}
+          <motion.div
+            className="mt-12"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.2 }}
+            variants={{
+              hidden: {},
+              visible: { transition: { staggerChildren: 0.08, delayChildren: 0.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">
+            {/* Új: stilizált kártyák (egyenként animálva a szülőből) */}
+            <div className="grid gap-6 md:grid-cols-3">
+              <motion.div
+                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                variants={itemVariant}
+              >
+                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-emerald-400 to-green-600 flex items-center justify-center mb-4">
+                  {/* ICON: Lightbulb */}
+                  <FaLightbulb className="w-8 h-8 text-black" />
+                </div>
+                <h3 className="text-lg font-semibold text-center mb-2">Innováció</h3>
+                <p className="text-zinc-300 text-center">
+                  Modern megoldásokkal gyorsítjuk a fejlődést — moduláris, skálázható rendszereket építünk.
+                </p>
+              </motion.div>
+
+              <motion.div
+                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                variants={itemVariant}
+              >
+                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-sky-400 to-blue-600 flex items-center justify-center mb-4">
+                  {/* ICON: Users */}
+                  <FaUsers className="w-8 h-8 text-black" />
+                </div>
+                <h3 className="text-lg font-semibold text-center mb-2">Közösség</h3>
+                <p className="text-zinc-300 text-center">
+                  Közösségépítés és együttműködés—eszközök, amik bevonják és motiválják a felhasználókat.
+                </p>
+              </motion.div>
+
+              <motion.div
+                className="group bg-zinc-900/40 border border-gray-700 rounded-2xl p-6 shadow-lg transform transition hover:-translate-y-2"
+                variants={itemVariant}
+              >
+                <div className="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center mb-4">
+                  {/* ICON: Shield/Quality */}
+                  <FaShieldAlt className="w-8 h-8 text-black" />
+                </div>
+                <h3 className="text-lg font-semibold text-center mb-2">Minőség</h3>
+                <p className="text-zinc-300 text-center">
+                  Biztonság, megbízhatóság és gondosan tervezett UX — minden részlet számít.
+                </p>
+              </motion.div>
+            </div>
+          </motion.div>
+
+          {/* Csapat — a szülő kezeli a gyermekek animációját (stagger), így nincs külön "belülről" trigger */}
+          <motion.div
+            className="mt-16"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.2 }}
+            variants={{
+              hidden: {},
+              visible: { transition: { staggerChildren: 0.06, delayChildren: 0.25 } },
+            }}
+          >
             <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
+                  <motion.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" : ""
                     }`}
+                    variants={itemVariant}
                   >
                     <img
                       src={member.photo}
@@ -144,12 +254,94 @@ const About = () => {
                     />
                     <h4 className="text-lg font-bold">{member.name}</h4>
                     <p className="text-zinc-400">{member.role}</p>
-                  </div>
+                  </motion.div>
                 )
               })}
             </div>
-          </div>
-        </section>
+          </motion.div>
+
+          {/* Új: Kapcsolat szekció — egységes megjelenés (animálva) */}
+          <motion.section
+            id="contact"
+            className="mt-16 bg-transparent"
+            {...getMotionProps({ transition: { duration: 0.8, delay: 0.25 } })}
+          >
+            <div className="max-w-5xl mx-auto bg-white/5 rounded-2xl border border-gray-700 p-8 shadow-lg">
+              <h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
+                Kapcsolat
+              </h2>
+
+              <div className="grid md:grid-cols-2 gap-8">
+                {/* Bal: elérhetőségek */}
+                <div className="flex flex-col justify-center gap-6">
+                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">✉️</div>
+                    <div>
+                      <div className="font-semibold">Email</div>
+                      <div className="text-zinc-300">hello@serpentrace.hu</div>
+                    </div>
+                  </div>
+
+                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📞</div>
+                    <div>
+                      <div className="font-semibold">Telefon</div>
+                      <div className="text-zinc-300">+36 20 123 4567</div>
+                    </div>
+                  </div>
+
+                  <div className="bg-zinc-800 rounded-xl p-5 shadow-md flex items-start gap-4">
+                    <div className="bg-emerald-500 text-black rounded-lg p-3 text-xl flex-shrink-0">📍</div>
+                    <div>
+                      <div className="font-semibold">Iroda</div>
+                      <div className="text-zinc-300">Budapest, Magyarország</div>
+                    </div>
+                  </div>
+
+                  <p className="text-zinc-400 mt-2 text-sm">
+                    Általános megkeresésekre 48 órán belül válaszolunk. Ha céges együttműködésről van szó,
+                    kérjük, írj részletesen a projektedről.
+                  </p>
+                </div>
+
+                {/* Jobb: űrlap */}
+                <form onSubmit={handleContactSubmit} className="space-y-4">
+                  <input
+                    value={contactName}
+                    onChange={(e) => setContactName(e.target.value)}
+                    type="text"
+                    placeholder="Név"
+                    className="w-full bg-white/10 text-white placeholder-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400"
+                  />
+                  <input
+                    value={contactEmail}
+                    onChange={(e) => setContactEmail(e.target.value)}
+                    type="email"
+                    placeholder="Email"
+                    className="w-full bg-white/10 text-white placeholder-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400"
+                  />
+                  <textarea
+                    value={contactMessage}
+                    onChange={(e) => setContactMessage(e.target.value)}
+                    placeholder="Üzenet"
+                    rows="5"
+                    className="w-full bg-white/10 text-white placeholder-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400"
+                  />
+                  <div className="flex items-center gap-4">
+                    <button
+                      type="submit"
+                      disabled={submitting}
+                      className="bg-emerald-500 hover:bg-emerald-400 text-black px-6 py-3 rounded-lg font-bold transition disabled:opacity-60"
+                    >
+                      {submitting ? "Küldés..." : "Küldés"}
+                    </button>
+                    {success && <div className="text-sm text-zinc-300">{success}</div>}
+                  </div>
+                </form>
+              </div>
+            </div>
+          </motion.section>
+        </motion.section>
       </main>
 
       {/* Footer (nem scrollozható alá) */}