[#56] Landing Pagehttps://project.mdnd-it.cc/work_packages/56
This commit is contained in:
@@ -0,0 +1,178 @@
|
||||
import React from "react"
|
||||
import SerpentRaceAnimation from "../../assets/SerpentRace_Animation/SerpentRace_Animation.jsx"
|
||||
import LogoCard from "../../assets/pictures/LogoCard.jsx"
|
||||
import logoImg from "../../assets/pictures/Logo.png"
|
||||
import ButtonGreen from "../Buttons/ButtonGreen.jsx"
|
||||
import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* Hero Section */}
|
||||
<motion.section
|
||||
className="min-h-[80vh] flex flex-col items-center justify-center text-center px-4 py-20"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Animált logo és cím */}
|
||||
<div className="mb-8">
|
||||
<SerpentRaceAnimation sizePercentage={70} />
|
||||
</div>
|
||||
|
||||
<motion.h1
|
||||
className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4 }}
|
||||
>
|
||||
A társasjáték, ami <span className="text-emerald-400">összeköt</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-xl md:text-2xl text-gray-300 mb-6 max-w-3xl mx-auto leading-relaxed"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.6 }}
|
||||
>
|
||||
A SerpentRace egy társasjáték, ahol új barátokra lelhetsz, közösséget építhetsz és tanulhatsz –
|
||||
mindezt szórakozva!
|
||||
</motion.p>
|
||||
<motion.div
|
||||
className="text-2xl md:text-3xl font-bold text-emerald-400 mb-12"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.8 }}
|
||||
>
|
||||
WE ARE READY, ARE YOU?
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 1 }}
|
||||
>
|
||||
<ButtonGreen text="Játék" onClick={onNavigateToPlay} />
|
||||
<ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} />
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* Features Section */}
|
||||
<motion.section
|
||||
className="py-20 px-4"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.h2
|
||||
className="text-3xl md:text-4xl font-bold text-white text-center mb-16"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
>
|
||||
Miért a SerpentRace a legjobb választás?
|
||||
</motion.h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{/* Feature 1 */}
|
||||
<motion.div
|
||||
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.3 }}
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
|
||||
<FaUsers className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Közösségi élmény</h3>
|
||||
<p className="text-gray-300">
|
||||
Ismerkedj, nevess, tanulj! A SerpentRace összehozza a társaságot, legyen szó baráti
|
||||
összejövetelről vagy csapatépítésről.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<motion.div
|
||||
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.5 }}
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
|
||||
<FaPaintBrush className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Személyre szabható</h3>
|
||||
<p className="text-gray-300">
|
||||
Kérdéskártyák, szabályok, design – minden a te igényeidhez igazítható, akár céges brandinggel
|
||||
is!
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<motion.div
|
||||
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.7 }}
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
|
||||
<FaHeadset className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4">Folyamatos támogatás</h3>
|
||||
<p className="text-gray-300">
|
||||
Gyors, segítőkész ügyfélszolgálat – ha bármilyen kérdésed vagy problémád van, mindig
|
||||
számíthatsz ránk!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<motion.section
|
||||
className="py-20 px-4"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-emerald-500/20 to-green-500/20 backdrop-blur-lg rounded-3xl p-12"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.3 }}
|
||||
>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
|
||||
Próbáld ki te is a SerpentRace-t!
|
||||
</h2>
|
||||
|
||||
<p className="text-xl text-gray-300 mb-8">
|
||||
Legyél részese egy új közösségi élménynek, vagy rendeld meg saját, személyre szabott
|
||||
társasjátékodat – mi mindenben segítünk!
|
||||
</p>
|
||||
|
||||
<ButtonGreen
|
||||
text="Kapcsolatfelvétel"
|
||||
onClick={onNavigateToAuth}
|
||||
className="px-12 py-4 text-xl font-bold"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LandingPage
|
||||
Reference in New Issue
Block a user