[#90] Cégek Kezelésehttps://project.mdnd-it.cc/work_packages/90
This commit is contained in:
@@ -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
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user