telefonos nezet
This commit is contained in:
@@ -30,11 +30,11 @@ const Card = ({ icon, label, description, targetId, className }) => {
|
||||
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}`}
|
||||
className={`cursor-pointer hover:scale-105 transition-all duration-300 border border-gray-400 shadow-lg rounded-xl sm:rounded-2xl p-4 sm:p-6 lg:p-8 w-full sm: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 className="text-3xl sm:text-4xl lg:text-5xl mb-3 sm:mb-4 flex justify-center">{icon}</div>
|
||||
<h3 className="text-xl sm:text-2xl font-bold mb-2">{label}</h3>
|
||||
<p className="text-white/90 text-xs sm:text-sm">{description}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -43,10 +43,10 @@ const SectionContainer = ({ id, title, children }) => {
|
||||
return (
|
||||
<section
|
||||
id={id}
|
||||
className="mt-20 mb-28 px-4 md:px-0 opacity-100 animate-fadeInUp"
|
||||
className="mt-12 sm:mt-16 lg:mt-20 mb-16 sm:mb-20 lg: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">
|
||||
<div className="text-center mb-8 sm:mb-10 lg:mb-12">
|
||||
<h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold border-b-4 inline-block border-emerald-400 pb-2 text-white">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
@@ -80,14 +80,14 @@ const CompanyHub = () => {
|
||||
<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">
|
||||
<main className="flex-grow relative px-4 py-6 sm: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 flex-col sm:flex-row justify-center gap-4 sm:gap-6 mt-6 sm:mt-8">
|
||||
<Card
|
||||
icon={<FaBuilding />}
|
||||
label="Mit nyújtunk"
|
||||
@@ -113,16 +113,16 @@ const CompanyHub = () => {
|
||||
|
||||
{/* Mit nyújtunk */}
|
||||
<SectionContainer id="intro" title="Mit nyújtunk cégeknek">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 lg: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" />
|
||||
<div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
|
||||
<h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
|
||||
<FaPalette className="text-3xl sm: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" />
|
||||
<ul className="list-disc ml-6 space-y-3 sm:space-y-4 text-white/90 text-sm sm:text-base lg:text-lg">
|
||||
<li className="flex items-center gap-3 sm:gap-4">
|
||||
<FaUserCheck className="text-green-400 text-xl sm:text-2xl" />
|
||||
Testreszabható design és színek
|
||||
</li>
|
||||
<li className="flex items-center gap-4">
|
||||
@@ -137,12 +137,12 @@ const CompanyHub = () => {
|
||||
</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" />
|
||||
<div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
|
||||
<h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
|
||||
<FaDollarSign className="text-3xl sm:text-4xl" />
|
||||
Árazás
|
||||
</h3>
|
||||
<ul className="list-disc ml-6 space-y-4 text-white/90 text-lg">
|
||||
<ul className="list-disc ml-6 space-y-3 sm:space-y-4 text-white/90 text-sm sm:text-base lg:text-lg">
|
||||
<li className="flex items-center gap-4">
|
||||
<FaUsers className="text-purple-400 text-2xl" />
|
||||
Kedvezményes csomagok KKV-knak
|
||||
@@ -159,9 +159,9 @@ const CompanyHub = () => {
|
||||
</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" />
|
||||
<div className="bg-white/5 rounded-2xl sm:rounded-3xl border border-gray-700 shadow-lg p-6 sm:p-8 lg:p-10 flex flex-col gap-6 sm:gap-8">
|
||||
<h3 className="text-xl sm:text-2xl font-extrabold flex items-center gap-3 sm:gap-4 text-emerald-400">
|
||||
<FaVideo className="text-3xl sm:text-4xl" />
|
||||
Csapatunk videó
|
||||
</h3>
|
||||
<video controls className="w-full rounded-xl shadow-xl">
|
||||
@@ -173,34 +173,34 @@ const CompanyHub = () => {
|
||||
</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">
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10 max-w-6xl mx-auto mt-12 sm:mt-16 lg:mt-20 mb-16 sm:mb-20 lg: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"
|
||||
className="bg-white/10 p-6 sm: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-2xl sm:text-3xl font-bold mb-4 sm: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">
|
||||
<form className="grid gap-4 sm: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"
|
||||
className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 text-sm sm:text-base"
|
||||
/>
|
||||
<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"
|
||||
className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 md:col-span-1 text-sm sm:text-base"
|
||||
/>
|
||||
<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"
|
||||
className="bg-white/20 text-white placeholder-white px-4 sm:px-5 py-3 sm:py-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-400 col-span-2 text-sm sm:text-base"
|
||||
/>
|
||||
<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"
|
||||
className="bg-emerald-500 hover:bg-emerald-400 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold col-span-2 md:col-span-1 transition text-sm sm:text-base"
|
||||
>
|
||||
Küldés
|
||||
</button>
|
||||
@@ -210,14 +210,14 @@ const CompanyHub = () => {
|
||||
{/* Join */}
|
||||
<div
|
||||
id="join"
|
||||
className="bg-white/10 p-8 rounded-xl border border-gray-500 shadow-lg"
|
||||
className="bg-white/10 p-6 sm: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-2xl sm:text-3xl font-bold mb-4 sm: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" />
|
||||
<ul className="list-disc space-y-3 sm:space-y-4 ml-6 sm:ml-8 text-sm sm:text-base text-white/90">
|
||||
<li className="flex gap-2 sm:gap-3 items-center">
|
||||
<FaHandsHelping className="text-green-400 text-lg sm:text-xl flex-shrink-0" />
|
||||
Gamification a vállalati kultúrában
|
||||
</li>
|
||||
<li className="flex gap-3 items-center">
|
||||
|
||||
Reference in New Issue
Block a user