Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'telos nezet landing, home, navbar, footer' (#98) from ujgege into main

Browse Source 
Reviewed-on: #98
This commit was merged in pull request #98.
This commit is contained in:
Donat
2025-11-14 00:39:00 +00:00
parent 714900d4e9 322059ace0
commit 7371900fc3
6 changed files with 211 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx
+35 -32
View File
@@ -18,19 +18,21 @@ const LandingPage = () => {
<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"
className="min-h-[80vh] flex flex-col items-center justify-center text-center px-4 sm:px-6 py-12 sm:py-16 md:py-20"
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<div className="max-w-4xl mx-auto">
<div className="max-w-4xl mx-auto w-full">
{/* Animált logo és cím */}
<div className="mb-8">
<SerpentRaceAnimation sizePercentage={70} />
<div className="mb-6 sm:mb-8 flex justify-center">
<div className="w-full max-w-[90%] sm:max-w-[70%] md:max-w-full">
<SerpentRaceAnimation sizePercentage={70} />
</div>
</div>
<motion.h1
className="text-3xl md:text-5xl font-bold text-white mb-4 leading-tight"
className="text-2xl sm:text-3xl md:text-5xl font-bold text-white mb-3 sm:mb-4 leading-tight px-2"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.4 }}
@@ -39,7 +41,7 @@ const LandingPage = () => {
</motion.h1>
<motion.p
className="text-lg md:text-xl text-gray-300 mb-4 max-w-3xl mx-auto leading-relaxed"
className="text-base sm:text-lg md:text-xl text-gray-300 mb-3 sm:mb-4 max-w-3xl mx-auto leading-relaxed px-2"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.6 }}
@@ -49,7 +51,7 @@ const LandingPage = () => {
</motion.p>
<motion.div
className="text-xl md:text-2xl font-bold text-emerald-400 mb-10"
className="text-lg sm:text-xl md:text-2xl font-bold text-emerald-400 mb-6 sm:mb-8 md:mb-10 px-2"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 0.8 }}
@@ -58,7 +60,7 @@ const LandingPage = () => {
</motion.div>
<motion.div
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center px-2"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7, delay: 1 }}
@@ -66,12 +68,12 @@ const LandingPage = () => {
{/* If not authenticated show Login/Register; if authenticated show Home button */}
{!auth ? (
<>
<ButtonGreen text="Bejelentkezés" onClick={goLogin} width="w-60" />
<ButtonGreen text="Regisztráció" onClick={goAuth} width="w-60" />
<ButtonGreen text="Játék" onClick={goHome} width="w-60" />
<ButtonGreen text="Bejelentkezés" onClick={goLogin} width="w-full sm:w-60" />
<ButtonGreen text="Regisztráció" onClick={goAuth} width="w-full sm:w-60" />
<ButtonGreen text="Játék" onClick={goHome} width="w-full sm:w-60" />
</>
) : (
<ButtonGreen text="Játék" onClick={goHome} width="w-60" />
<ButtonGreen text="Játék" onClick={goHome} width="w-full sm:w-60" />
)}
</motion.div>
</div>
@@ -79,7 +81,7 @@ const LandingPage = () => {
{/* Features Section */}
<motion.section
className="py-20 px-4"
className="py-12 sm:py-16 md:py-20 px-4 sm:px-6"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, amount: 0.2 }}
@@ -87,7 +89,7 @@ const LandingPage = () => {
>
<div className="max-w-6xl mx-auto">
<motion.h2
className="text-2xl md:text-3xl font-bold text-white text-center mb-12"
className="text-xl sm:text-2xl md:text-3xl font-bold text-white text-center mb-8 sm:mb-10 md:mb-12 px-2"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
@@ -96,19 +98,19 @@ const LandingPage = () => {
Miért a SerpentRace a legjobb választás?
</motion.h2>
<div className="grid md:grid-cols-3 gap-8">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
{/* Feature 1 */}
<motion.div
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
className="bg-white/10 backdrop-blur-lg rounded-xl sm:rounded-2xl p-6 sm: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 className="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-4 sm:mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
<FaUsers className="w-6 h-6 sm:w-8 sm:h-8 text-white" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">Közösségi élmény</h3>
<h3 className="text-base sm:text-lg font-semibold text-white mb-2">Közösségi élmény</h3>
<p className="text-gray-300 text-sm">
Ismerkedj, nevess, tanulj! A SerpentRace összehozza a társaságot, legyen szó baráti
összejövetelről vagy csapatépítésről.
@@ -117,16 +119,16 @@ const LandingPage = () => {
{/* Feature 2 */}
<motion.div
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
className="bg-white/10 backdrop-blur-lg rounded-xl sm:rounded-2xl p-6 sm: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 className="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-4 sm:mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
<FaPaintBrush className="w-6 h-6 sm:w-8 sm:h-8 text-white" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">Személyre szabható</h3>
<h3 className="text-base sm:text-lg font-semibold text-white mb-2">Személyre szabható</h3>
<p className="text-gray-300 text-sm">
Kérdéskártyák, szabályok, design – minden a te igényeidhez igazítható, akár céges brandinggel
is!
@@ -135,16 +137,16 @@ const LandingPage = () => {
{/* Feature 3 */}
<motion.div
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
className="bg-white/10 backdrop-blur-lg rounded-xl sm:rounded-2xl p-6 sm: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 className="w-12 h-12 sm:w-16 sm:h-16 mx-auto mb-4 sm:mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
<FaHeadset className="w-6 h-6 sm:w-8 sm:h-8 text-white" />
</div>
<h3 className="text-lg font-semibold text-white mb-2">Folyamatos támogatás</h3>
<h3 className="text-base sm:text-lg font-semibold text-white mb-2">Folyamatos támogatás</h3>
<p className="text-gray-300 text-sm">
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!
@@ -156,7 +158,7 @@ const LandingPage = () => {
{/* Call to Action Section */}
<motion.section
className="py-20 px-4"
className="py-12 sm:py-16 md:py-20 px-4 sm:px-6"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
@@ -164,17 +166,17 @@ const LandingPage = () => {
>
<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"
className="bg-gradient-to-r from-emerald-500/20 to-green-500/20 backdrop-blur-lg rounded-2xl sm:rounded-3xl p-6 sm:p-8 md: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-2xl md:text-3xl font-bold text-white mb-4">
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-white mb-3 sm:mb-4 px-2">
Próbáld ki te is a SerpentRace-t!
</h2>
<p className="text-lg text-gray-300 mb-6">
<p className="text-base sm:text-lg text-gray-300 mb-4 sm:mb-6 px-2">
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>
@@ -182,7 +184,8 @@ const LandingPage = () => {
<ButtonGreen
text="Kapcsolatfelvétel"
onClick={goAbout}
className="px-12 py-4 text-xl font-bold"
className="px-8 sm:px-12 py-3 sm:py-4 text-lg sm:text-xl font-bold"
width="w-full sm:w-auto"
/>
</motion.div>
</div>
SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx
+26 -24
View File
@@ -55,43 +55,45 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
return (
<section
className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl overflow-hidden"
className="w-[95%] max-w-6xl mx-auto my-8 md:my-16 flex flex-col md:flex-row items-center justify-center rounded-2xl md:rounded-3xl shadow-2xl overflow-hidden"
style={{
background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
}}
>
{/* Bal oldali animáció/kép */}
<div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
<LogoCard
imageSrc={logoImg}
containerHeight="420px"
containerWidth="420px"
imageHeight="420px"
imageWidth="420px"
rotateAmplitude={7}
scaleOnHover={1.03}
showMobileWarning={false}
showTooltip={false}
displayOverlayContent={false}
/>
<div className="flex-1 flex items-center justify-center w-full h-full py-6 md:py-10 md:pl-10">
<div className="w-[200px] h-[200px] sm:w-[300px] sm:h-[300px] md:w-[420px] md:h-[420px]">
<LogoCard
imageSrc={logoImg}
containerHeight="100%"
containerWidth="100%"
imageHeight="100%"
imageWidth="100%"
rotateAmplitude={7}
scaleOnHover={1.03}
showMobileWarning={false}
showTooltip={false}
displayOverlayContent={false}
/>
</div>
</div>
{/* Jobb oldali panel */}
<div className="flex-1 w-full flex items-center justify-center px-6 md:px-12 py-8">
<div className="flex-1 w-full flex items-center justify-center px-4 sm:px-6 md:px-12 py-6 md:py-8">
<div
className="w-full max-w-md rounded-2xl p-6 md:p-8 flex flex-col gap-6"
className="w-full max-w-md rounded-xl md:rounded-2xl p-4 sm:p-6 md:p-8 flex flex-col gap-4 md:gap-6"
style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
>
<div className="flex items-center justify-between">
{username ? (
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 md:gap-3">
<div
className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
className="w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center text-xs md:text-sm font-semibold"
style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
>
{initials}
</div>
<div className="text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
<div className="text-xl sm:text-2xl md:text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
<span className="font-medium" style={{ color: "var(--color-text, #fff)" }}>
{username}
</span>
@@ -99,7 +101,7 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
</div>
) : (
<div className="w-full">
<div className="font-semibold mb-3 text-text">Nincs bejelentkezve — játssz vendégként:</div>
<div className="font-semibold mb-2 md:mb-3 text-sm md:text-base text-text">Nincs bejelentkezve — játssz vendégként:</div>
<InputBoxDark
type="text"
placeholder="Nickname..."
@@ -116,7 +118,7 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
</div>
<div>
<h2 className="font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
<h2 className="font-semibold mb-2 md:mb-3 text-sm md:text-base text-text">Csatlakozás játékhoz</h2>
<div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
<InputBoxDark
type="text"
@@ -127,15 +129,15 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
/>
</div>
{error && <div className="text-xs mt-2 text-error">{error}</div>}
<div className="mt-4">
<div className="mt-3 md:mt-4">
<ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
</div>
</div>
{username ? (
<div className="border-t border-white/10 pt-4">
<div className="border-t border-white/10 pt-3 md:pt-4">
{username && (
<div>
<h3 className="font-semibold mb-3 text-text">Új játék létrehozása</h3>
<h3 className="font-semibold mb-2 md:mb-3 text-sm md:text-base text-text">Új játék létrehozása</h3>
<ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
</div>
)}