Merge pull request 'navbar meg merge' (#77) from navbar+aboutű into main

Reviewed-on: #77

SerpentRace_Frontend/src/App.jsx

@@ -19,8 +19,6 @@ import ProfileCard from "./components/Userdetails/Userdetails"
 import { ToastConfig } from "./components/Toastify/toastifyServices" // ✅ fontos: named import, nem default!
 import VerifyEmailPage from "./pages/Auth/VerifyEmailPage"
 
-
-
 function App() {
   const [isMobile, setIsMobile] = useState(false)
 
@@ -66,7 +64,7 @@ function App() {
           <Route path="/deck-creator" element={<DeckCreator />} />
           <Route path="/deck-creator/:deckId" element={<DeckCreator />} />
           <Route path="/game" element={<GameScreen />} />
-          <Route path="/contacts" element={<CompanyHub />} />
+          {/* <Route path="/contacts" element={<CompanyHub />} /> */}
           <Route path="/report" element={<Reports />} />
         </Routes>
       </Router>

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -1,18 +1,17 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
 import { Link } from "react-router-dom"
-import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"// ✅ importáld a navigációs hookot
+import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate" // ✅ importáld a navigációs hookot
+import { FaSignOutAlt, FaChartBar, FaUser, FaBars } from "react-icons/fa"
 
-const navLinkClass =
-  "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
+const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
 const navLinkClassPlay =
   "px-4 py-2 rounded-lg text-white bg-white/12 hover:bg-white/20 transition-all duration-200"
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false)
-  const isLoggedIn = Boolean(
-    localStorage.getItem("authLevel") && localStorage.getItem("username")
-  )
+  const [userMenuOpen, setUserMenuOpen] = useState(false)
+  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
 
   // ✅ Használjuk a HandleNavigate hookot
   const { goLanding, goAbout, goHome, goLogin, goContacts } = HandleNavigate()
@@ -25,7 +24,14 @@ const Navbar = () => {
 
   return (
     <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-0">
+      {/* removed mx-auto and px-* classes; use full width + responsive padding-inline using clamp */}
+      <div
+        className="w-full"
+        style={{
+          /* minimális padding 12px, növel a képernyővel, max 30px */
+          paddingInline: "clamp(12px, calc((100vw - 1024px) / 2), 80px)",
+        }}
+      >
         <div className="flex justify-between h-16 items-center">
           {/* Logo + Brand */}
           <div className="flex-shrink-0 flex items-center gap-2">
@@ -43,22 +49,16 @@ const Navbar = () => {
           {/* Desktop Menu */}
           <div className="hidden md:flex items-center space-x-6">
             {/* Bal oldali linkek */}
-            <button onClick={goLanding} className={navLinkClass}>
-              Főoldal
-            </button>
             <button onClick={goAbout} className={navLinkClass}>
               Rólunk
             </button>
-            <button onClick={goContacts} className={navLinkClass}>
-              Kapcsolat
-            </button>
 
             {/* Csak bejelentkezve */}
             {isLoggedIn && (
               <>
-                <Link to="/decks" className={navLinkClass}>Paklik</Link>
-                <Link to="/report" className={navLinkClass}>Statisztikák</Link>
-                <Link to="/profile" className={navLinkClass}>Profil</Link>
+                <Link to="/decks" className={navLinkClass}>
+                  Paklik
+                </Link>
               </>
             )}
 
@@ -88,26 +88,54 @@ const Navbar = () => {
                 </Link>
               </div>
             ) : (
+              // Ha be van jelentkezve: mutatunk egy kis lenyíló gombot (ikon), ami tartalmazza a Profil, Statisztikák és Kijelentkezés linkeket
+              <div className="relative">
                 <button
-                onClick={handleLogout}
-                className="ml-2 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
-                title="Kijelentkezés"
+                  onClick={() => setUserMenuOpen((s) => !s)}
+                  className="ml-2 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer flex items-center gap-2"
+                  title="Felhasználói menü"
                 >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
-                  />
-                </svg>
+                  <FaBars className="h-5 w-5" />
                 </button>
+
+                {userMenuOpen && (
+                  <div className="absolute right-0 mt-2 w-44 bg-white/5 backdrop-blur-sm border border-gray-700 rounded-lg shadow-lg overflow-hidden z-40">
+                    <button
+                      onClick={() => {
+                        setUserMenuOpen(false)
+                        // navigálás statisztikák
+                        goLanding // fallback, majd ha kell: goReport
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaChartBar className="w-4 h-4" />
+                      <span className="text-sm">Statisztikák</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setUserMenuOpen(false)
+                        // profil
+                        window.location.href = "/profile"
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaUser className="w-4 h-4" />
+                      <span className="text-sm">Profil</span>
+                    </button>
+                    <div className="h-px bg-white/5" />
+                    <button
+                      onClick={() => {
+                        setUserMenuOpen(false)
+                        handleLogout()
+                      }}
+                      className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
+                    >
+                      <FaSignOutAlt className="w-4 h-4" />
+                      <span className="text-sm">Kijelentkezés</span>
+                    </button>
+                  </div>
+                )}
+              </div>
             )}
           </div>
 
@@ -133,12 +161,7 @@ const Navbar = () => {
                     d="M6 18L18 6M6 6l12 12"
                   />
                 ) : (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 8h16M4 16h16"
-                  />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
                 )}
               </svg>
             </button>
@@ -149,24 +172,50 @@ const Navbar = () => {
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <button onClick={() => { goLanding(); setMenuOpen(false) }} className={navLinkClass}>Főoldal</button>
-          <button onClick={() => { goAbout(); setMenuOpen(false) }} className={navLinkClass}>Rólunk</button>
-          <button onClick={() => { goContacts(); setMenuOpen(false) }} className={navLinkClass}>Kapcsolat</button>
+          <button
+            onClick={() => {
+              goAbout()
+              setMenuOpen(false)
+            }}
+            className={navLinkClass}
+          >
+            Rólunk
+          </button>
+          <button
+            onClick={() => {
+              goContacts()
+              setMenuOpen(false)
+            }}
+            className={navLinkClass}
+          >
+            Kapcsolat
+          </button>
 
           {isLoggedIn && (
             <>
-              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>Paklik</Link>
-              <Link to="/report" onClick={() => setMenuOpen(false)} className={navLinkClass}>Statisztikák</Link>
-              <Link to="/profile" onClick={() => setMenuOpen(false)} className={navLinkClass}>Profil</Link>
+              <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>
+                Paklik
+              </Link>
             </>
           )}
 
-          <button onClick={() => { goHome(); setMenuOpen(false) }} className={navLinkClassPlay}>Játék</button>
+          <button
+            onClick={() => {
+              goHome()
+              setMenuOpen(false)
+            }}
+            className={navLinkClassPlay}
+          >
+            Játék
+          </button>
 
           {!isLoggedIn ? (
             <div className="flex flex-col space-y-2">
               <button
-                onClick={() => { goLogin(); setMenuOpen(false) }}
+                onClick={() => {
+                  goLogin()
+                  setMenuOpen(false)
+                }}
                 className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
               >
                 Bejelentkezés
@@ -190,23 +239,10 @@ const Navbar = () => {
                   handleLogout()
                   setMenuOpen(false)
                 }}
-                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
+                className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer flex items-center gap-2"
                 title="Kijelentkezés"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
-                  />
-                </svg>
+                <FaSignOutAlt className="h-6 w-6" />
               </button>
             </div>
           )}

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>
+          </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>
-        </section>
+                  </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á) */}