[#90] Cégek Kezelésehttps://project.mdnd-it.cc/work_packages/90

SerpentRace_Frontend/src/App.jsx

@@ -9,6 +9,11 @@ import ResetPassword from "./pages/Auth/ResetPassword"
 import Landingpage from "./pages/Landing/Landingpage"
 import Home from "./pages/Landing/Home"
 import DeckManagerPage from "./pages/Decks/DeckManagerPage"
+import CompanyHub from "./pages/Companies/Companies"
+
+
+
+
 
 function App() {
   const [isMobile, setIsMobile] = useState(false)
@@ -48,6 +53,8 @@ function App() {
         <Route path="/" element={<Landingpage />} />
         <Route path="/home" element={<Home />} />
         <Route path="/decks" element={<DeckManagerPage />} />
+        <Route path="/companies" element={<CompanyHub />} />
+
         {/* Add more routes as needed */}
       </Routes>
     </Router>

SerpentRace_Frontend/src/assets/backgrounds/Background.jsx

@@ -1,6 +1,3 @@
-// src/assets/backgrounds/Background.jsx
-// Kockás háttér, ami a mousemovera reagál
-
 import React, { useEffect, useState } from "react"
 import { motion } from "framer-motion"
 
@@ -13,8 +10,8 @@ const Background = () => {
     const updateGrid = () => {
       const width = window.innerWidth
       const height = window.innerHeight
-      const cols = Math.max(8, Math.floor(width / 100)) // 100px-es cellák
-      const rows = Math.max(5, Math.floor(height / 100)) // 100px-es cellák
+      const cols = Math.max(8, Math.floor(width / 100))
+      const rows = Math.max(5, Math.floor(height / 100))
       setGridSize({ cols, rows })
     }
 
@@ -37,26 +34,19 @@ const Background = () => {
       const newCol = Math.floor(Math.random() * gridSize.cols)
       const newRow = Math.floor(Math.random() * gridSize.rows)
       setPath((prevPath) => {
-        const newPath = [...prevPath, { col: newCol, row: newRow, opacity: 1 }] // Új pont hozzáadása
-        if (newPath.length > 10) {
-          newPath.shift() // Max 10 pont az útvonalon
-        }
+        const newPath = [...prevPath, { col: newCol, row: newRow, opacity: 1 }]
+        if (newPath.length > 10) newPath.shift()
         return newPath
       })
-    }, 500) // Új pont hozzáadása minden 500ms-ben
+    }, 500)
 
-    // Az útvonal pontjainak fokozatos eltűnése
     const fadeInterval = setInterval(() => {
-      setPath(
-        (prevPath) =>
-          prevPath
-            .map((point) => ({
-              ...point,
-              opacity: Math.max(0, point.opacity - 0.05), // Fokozatosan csökkentjük az opacity-t
-            }))
-            .filter((point) => point.opacity > 0) // Eltávolítjuk a teljesen eltűnt pontokat
+      setPath((prevPath) =>
+        prevPath
+          .map((point) => ({ ...point, opacity: Math.max(0, point.opacity - 0.05) }))
+          .filter((point) => point.opacity > 0)
       )
-    }, 100) // Opacity frissítése minden 100ms-ben
+    }, 100)
 
     return () => {
       clearInterval(interval)
@@ -82,9 +72,8 @@ const Background = () => {
           const dx = cellX - mousePos.x
           const dy = cellY - mousePos.y
           const distance = Math.sqrt(dx * dx + dy * dy)
-          const distanceFactor = Math.max(0, 1 - distance / 300) // Egér hatótávolsága
+          const distanceFactor = Math.max(0, 1 - distance / 300)
 
-          // Az útvonalban lévő pontok opacitása
           const pathPoint = path.find((p) => p.col === col && p.row === row)
           const pathOpacity = pathPoint ? pathPoint.opacity : 0
 
@@ -93,10 +82,10 @@ const Background = () => {
               key={i}
               className="w-full h-full bg-white rounded-lg"
               animate={{
-                opacity: 0.05 + distanceFactor * 0.2 + pathOpacity * 0.5, // Kombinált opacitás
-                scale: 1 + distanceFactor * 0.05 + pathOpacity * 0.1, // Kombinált skálázás
+                opacity: 0.05 + distanceFactor * 0.2 + pathOpacity * 0.5,
+                scale: 1 + distanceFactor * 0.05 + pathOpacity * 0.1,
               }}
-              transition={{ duration: 0.5, ease: "easeOut" }} // Lassú és sima átmenet
+              transition={{ duration: 0.5, ease: "easeOut" }}
             />
           )
         })}

SerpentRace_Frontend/src/components/Userdetails/Userdetails.jsx

@@ -0,0 +1,161 @@
+import React, { useState } from "react"
+import {
+  FaCommentDots,
+  FaUserFriends,
+  FaBriefcase,
+  FaFacebookF,
+  FaTwitter,
+  FaDribbble,
+  FaSun,
+  FaMoon,
+  FaMedal
+} from "react-icons/fa"
+
+const ProfileCard = () => {
+  const [darkMode, setDarkMode] = useState(false)
+  const activityLevel = 87
+  const isPremium = true
+
+  let activityColor = ""
+  let activityEmoji = ""
+  let blocksToColor = 1
+  let celebrationEmoji = ""
+
+  if (activityLevel <= 24) {
+    activityColor = "red-600"
+    activityEmoji = "😞"
+    blocksToColor = 1
+  } else if (activityLevel <= 49) {
+    activityColor = "orange-500"
+    activityEmoji = "😐"
+    blocksToColor = 2
+  } else if (activityLevel <= 74) {
+    activityColor = "yellow-400"
+    activityEmoji = "🙂"
+    blocksToColor = 3
+  } else {
+    activityColor = "emerald-500"
+    activityEmoji = "😄"
+    blocksToColor = 4
+    celebrationEmoji = "🎉"
+  }
+
+  const colorMap = {
+    "red-600": "#dc2626",
+    "orange-500": "#f97316",
+    "yellow-400": "#facc15",
+    "emerald-500": "#10b981"
+  }
+
+  const getBlockStyle = (index) => ({
+    backgroundColor: index < blocksToColor ? colorMap[activityColor] : (darkMode ? "#4b5563" : "#d1d5db")
+  })
+
+  const stats = [
+    { label: "Játékok", value: 1256, icon: <FaCommentDots /> },
+    { label: "Barátok", value: 8562, icon: <FaUserFriends /> },
+    { label: "Győzelmek", value: 189, icon: <FaBriefcase /> },
+    { label: "Badge-ek", value: 6, icon: <FaMedal /> }
+  ]
+
+  const badges = ["🏆", "🔥", "🎯", "🧠", "💎", "🚀"]
+
+  return (
+    <div className={`${darkMode ? "bg-gray-900" : "bg-gray-100"} min-h-screen flex flex-col justify-center items-center px-4 py-12 transition-colors duration-500`}>
+      <div className={`relative max-w-sm w-full rounded-xl shadow-lg overflow-hidden border 
+          ${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
+
+        <button
+          onClick={() => setDarkMode(!darkMode)}
+          className={`absolute top-4 right-4 p-2 rounded-full focus:outline-none 
+            ${darkMode ? "bg-yellow-400 text-gray-900 hover:bg-yellow-300" : "bg-gray-800 text-yellow-400 hover:bg-gray-700"}`}
+          aria-label="Toggle dark mode"
+        >
+          {darkMode ? <FaSun size={24} /> : <FaMoon size={24} />}
+        </button>
+
+        <div className="p-6 text-center space-y-6">
+          <img
+            src="https://i.pravatar.cc/150?img=12"
+            alt="Avatar"
+            className={`w-24 h-24 mx-auto rounded-full border-4 mb-4 ${darkMode ? "border-blue-700" : "border-blue-200"}`}
+          />
+
+          <div className="space-y-2">
+            <h2 className={`text-xl font-semibold ${darkMode ? "text-gray-100" : "text-gray-800"}`}>
+              BÉKAAAAA
+            </h2>
+            <div>
+              <div className={`inline-block px-3 py-1 rounded-full text-xs font-semibold 
+                ${darkMode
+                  ? (isPremium ? "bg-green-600 text-white" : "bg-gray-600 text-gray-200")
+                  : (isPremium ? "bg-green-200 text-green-800" : "bg-blue-200 text-blue-800")}`}>
+                {isPremium ? "Premium Account" : "Free Account"}
+              </div>
+            </div>
+            <p className={`text-sm ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
+              Active | Male | 23.05.1992
+            </p>
+          </div>
+
+          <div className="flex justify-center items-center space-x-2">
+            <p className={`text-sm font-medium flex items-center space-x-1`} style={{ color: colorMap[activityColor] }}>
+              <span>Activity Level: {activityLevel}%</span>
+              <span className="text-xl">{activityEmoji}</span>
+              {celebrationEmoji && <span className="text-xl ml-1">{celebrationEmoji}</span>}
+            </p>
+          </div>
+
+          <div className="flex justify-center space-x-1 mb-4">
+            {[0, 1, 2, 3].map(i => (
+              <div
+                key={i}
+                className="w-8 h-1 rounded-full"
+                style={getBlockStyle(i)}
+              />
+            ))}
+          </div>
+
+          {/* Badge szekció */}
+          <div className={`rounded-lg p-4 ${darkMode ? "bg-blue-900" : "bg-blue-200"}`}>
+            <h3 className={`text-sm font-bold mb-2 ${darkMode ? "text-white" : "text-blue-800"}`}>Badge-ek</h3>
+            <div className="flex justify-center flex-wrap gap-2">
+              {badges.map((badge, i) => (
+                <span key={i} className="text-xl">
+                  {badge}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Statisztikák */}
+          <div className={`flex flex-wrap justify-around items-center rounded-lg py-6 mt-4 text-white ${darkMode ? "bg-blue-700" : "bg-blue-500"}`}>
+            {stats.map((s, i) => (
+              <div key={i} className="text-center px-2 w-1/2 sm:w-1/4 mb-4">
+                <div className="mb-1 flex justify-center">{s.icon}</div>
+                <p className="text-sm font-semibold">{s.value}</p>
+                <p className="text-xs">{s.label}</p>
+              </div>
+            ))}
+          </div>
+
+          <p className={`text-xs mb-4 ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
+            Gyere és játsz velünk!
+          </p>
+
+          <div className={`flex justify-center gap-6 text-2xl ${darkMode ? "text-blue-400" : "text-blue-600"}`}>
+            <FaFacebookF className="cursor-pointer hover:text-blue-600" />
+            <FaTwitter className="cursor-pointer hover:text-sky-400 hover:text-sky-500" />
+            <FaDribbble className="cursor-pointer hover:text-pink-400" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProfileCard
+
+
+import UserProfile from "../../components/Userdetails/Userdetails.jsx"
+

SerpentRace_Frontend/src/pages/Companies/Companies.jsx

@@ -0,0 +1,226 @@
+import React from "react"
+import Navbar from "../../components/Navbar/Navbar.jsx"
+import Footer from "../../components/Footer/Footer.jsx"
+import Background from "../../assets/backgrounds/Background"
+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 = () => {
+  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">
+          <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>
+        </main>
+
+        <Footer />
+      </div>
+    </div>
+  )
+}
+
+export default CompanyHub

SerpentRace_Frontend/src/pages/Testing/Test.jsx

@@ -8,6 +8,9 @@ import PopUp from "../../components/PopUp/PopUp"
 import Logo from "../../assets/pictures/Logo.jsx"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
+import UserProfile from "../../components/Userdetails/Userdetails.jsx"
+import CompanyHub from "../Companies/Companies.jsx"
+
 
 export default function Test() {
   const [showPopup, setShowPopup] = useState(false)
@@ -16,6 +19,9 @@ export default function Test() {
   return (
     <div className="w-full h-screen flex flex-col">
       <Navbar />
+      <UserProfile />
+      <CompanyHub />
+
       <div className="flex-1 flex flex-col items-center justify-center space-y-6">
         <InputBox
           placeholder="E-mail cím"