To The Top
This commit is contained in:
magdo
@@ -1,4 +1,4 @@
|
|||||||
import React from "react"
|
import React, { useEffect, useRef, useState } from "react"
|
||||||
import Navbar from "../../components/Navbar/Navbar.jsx"
|
import Navbar from "../../components/Navbar/Navbar.jsx"
|
||||||
import Footer from "../../components/Footer/Footer.jsx"
|
import Footer from "../../components/Footer/Footer.jsx"
|
||||||
import Background from "../../assets/backgrounds/Background"
|
import Background from "../../assets/backgrounds/Background"
|
||||||
@@ -56,6 +56,20 @@ const SectionContainer = ({ id, title, children }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const CompanyHub = () => {
|
const CompanyHub = () => {
|
||||||
|
|
||||||
|
const [visible, setVisible] = useState(false)
|
||||||
|
const sectionRef = useRef(null)
|
||||||
|
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 (
|
return (
|
||||||
<div className="relative min-h-screen text-white">
|
<div className="relative min-h-screen text-white">
|
||||||
{/* Background fixed behind everything */}
|
{/* Background fixed behind everything */}
|
||||||
@@ -67,6 +81,12 @@ const CompanyHub = () => {
|
|||||||
<Navbar />
|
<Navbar />
|
||||||
|
|
||||||
<main className="flex-grow relative px-4 py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth">
|
<main className="flex-grow relative px-4 py-8 md:px-12 md:py-16 overflow-y-auto scroll-smooth">
|
||||||
|
<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"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<div className="flex justify-center gap-6 mt-8 flex-wrap">
|
<div className="flex justify-center gap-6 mt-8 flex-wrap">
|
||||||
<Card
|
<Card
|
||||||
icon={<FaBuilding />}
|
icon={<FaBuilding />}
|
||||||
@@ -152,68 +172,69 @@ const CompanyHub = () => {
|
|||||||
</div>
|
</div>
|
||||||
</SectionContainer>
|
</SectionContainer>
|
||||||
|
|
||||||
{/* Contact + Join Section */}
|
{/* 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">
|
<section className="grid md:grid-cols-2 gap-10 max-w-6xl mx-auto mt-20 mb-28 px-4 md:px-0">
|
||||||
{/* Contact */}
|
{/* Contact */}
|
||||||
<div
|
<div
|
||||||
id="contact"
|
id="contact"
|
||||||
className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
|
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">
|
<h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
|
||||||
Kapcsolatfelvétel cégeknek
|
Kapcsolatfelvétel cégeknek
|
||||||
</h2>
|
</h2>
|
||||||
<form className="grid gap-6 md:grid-cols-2">
|
<form className="grid gap-6 md:grid-cols-2">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Cég neve"
|
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"
|
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
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
placeholder="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"
|
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
|
<textarea
|
||||||
placeholder="Üzenet"
|
placeholder="Üzenet"
|
||||||
rows="6"
|
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"
|
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
|
<button
|
||||||
type="submit"
|
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"
|
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
|
Küldés
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Join */}
|
{/* Join */}
|
||||||
<div
|
<div
|
||||||
id="join"
|
id="join"
|
||||||
className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
|
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">
|
<h2 className="text-3xl font-bold mb-6 text-center border-b-4 border-emerald-400 pb-2 text-white">
|
||||||
Csatlakozz partnerként
|
Csatlakozz partnerként
|
||||||
</h2>
|
</h2>
|
||||||
<ul className="list-disc space-y-4 ml-8 text-base text-white/90">
|
<ul className="list-disc space-y-4 ml-8 text-base text-white/90">
|
||||||
<li className="flex gap-3 items-center">
|
<li className="flex gap-3 items-center">
|
||||||
<FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
|
<FaHandsHelping className="text-green-400 text-xl flex-shrink-0" />
|
||||||
Gamification a vállalati kultúrában
|
Gamification a vállalati kultúrában
|
||||||
</li>
|
</li>
|
||||||
<li className="flex gap-3 items-center">
|
<li className="flex gap-3 items-center">
|
||||||
<FaChartBar className="text-blue-400 text-xl flex-shrink-0" />
|
<FaChartBar className="text-blue-400 text-xl flex-shrink-0" />
|
||||||
Teljesítménymérés játékosan
|
Teljesítménymérés játékosan
|
||||||
</li>
|
</li>
|
||||||
<li className="flex gap-3 items-center">
|
<li className="flex gap-3 items-center">
|
||||||
<FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" />
|
<FaUserCheck className="text-yellow-400 text-xl flex-shrink-0" />
|
||||||
Személyre szabott riportok
|
Személyre szabott riportok
|
||||||
</li>
|
</li>
|
||||||
<li className="flex gap-3 items-center">
|
<li className="flex gap-3 items-center">
|
||||||
<FaHeadset className="text-pink-400 text-xl flex-shrink-0" />
|
<FaHeadset className="text-pink-400 text-xl flex-shrink-0" />
|
||||||
Dedikált ügyfélszolgálat
|
Dedikált ügyfélszolgálat
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user