238 lines
16 KiB
TypeScript
238 lines
16 KiB
TypeScript
// app/beach/BeachClientPage.tsx
|
||
|
||
'use client';
|
||
|
||
import { useEffect, useState } from 'react';
|
||
import { FaClipboardList, FaClock, FaInfoCircle, FaLock, FaMapMarkerAlt, FaTicketAlt, FaTrophy, FaUsers } from "react-icons/fa";
|
||
import { IoIosMail } from "react-icons/io";
|
||
import Footer from '../components/Footer';
|
||
import Header from '../components/Header';
|
||
import BeachRegistrationForm from './BeachRegistrationForm';
|
||
|
||
export default function BeachClientPage({ config }: { config: any }) {
|
||
const [timeInfo, setTimeInfo] = useState({
|
||
dateStr: 'Laddar...',
|
||
matchStr: 'Laddar...',
|
||
deadlineText: 'Laddar...',
|
||
isClosed: false,
|
||
});
|
||
|
||
const classesData = Array.isArray(config.beachPage?.classes)
|
||
? config.beachPage.classes
|
||
: [
|
||
{ name: 'Grön', color: '#16a34a', desc: 'Nybörjare' },
|
||
{ name: 'Blå', color: '#2563eb', desc: 'Spelat lite' },
|
||
{ name: 'Svart', color: '#111827', desc: 'Spelat mycket' }
|
||
];
|
||
|
||
useEffect(() => {
|
||
const updateTournamentInfo = () => {
|
||
const matchStart = new Date(config.beachPage.matchStart);
|
||
const now = new Date();
|
||
const infoGathering = new Date(matchStart.getTime() - 30 * 60000);
|
||
const closingDate = new Date(matchStart.getTime() - 24 * 60 * 60000);
|
||
const dateOptions: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
|
||
const timeOptions: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' };
|
||
|
||
setTimeInfo({
|
||
dateStr: matchStart.toLocaleDateString('sv-SE', dateOptions),
|
||
matchStr: `Matchstart kl.${matchStart.toLocaleTimeString('sv-SE', timeOptions)} (Infosamling kl.${infoGathering.toLocaleTimeString('sv-SE', timeOptions)})`,
|
||
deadlineText: `Anmälan stänger den ${closingDate.toLocaleDateString('sv-SE', dateOptions)} kl.${closingDate.toLocaleTimeString('sv-SE', timeOptions)} (24 timmar innan start) eller om alla platser har blivit fyllda.`,
|
||
isClosed: config.beachPage.isClosedOverride || now >= closingDate,
|
||
});
|
||
};
|
||
updateTournamentInfo();
|
||
}, [config]);
|
||
|
||
return (
|
||
<div className="min-h-screen flex flex-col font-sans bg-white text-black">
|
||
<Header />
|
||
|
||
<main className="grow flex flex-col items-center bg-[#c8e9f2] bg-[url('/images/volleyball-net.svg')] bg-cover bg-center bg-no-repeat w-full pb-20">
|
||
|
||
<section className="flex flex-col items-center text-center w-full px-4 pt-16">
|
||
{/* Logotyp med subtil hover-effekt */}
|
||
<div className="relative group cursor-default">
|
||
<div className="absolute -inset-4 bg-white/20 blur-2xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
|
||
<img
|
||
className="w-full max-w-62.5 md:max-w-75 relative drop-shadow-2xl transform hover:scale-105 transition-transform duration-500"
|
||
src="/images/hk-mosf.webp"
|
||
alt="Mat- & Sommarfesten"
|
||
/>
|
||
</div>
|
||
|
||
{/* Huvudrubrik med 3D-känsla */}
|
||
<h1 className="font-beachday text-[clamp(45px,9vw,80px)] text-[#fdb84b] uppercase leading-[0.9] mt-8 mb-4 drop-shadow-[0_4px_4px_rgba(64,97,133,0.3)] tracking-wide wrap-break-word w-full max-w-full">
|
||
Beach­turnering
|
||
</h1>
|
||
<p className="text-xl md:text-2xl font-bold text-[#39979f] bg-white/60 px-6 py-2 rounded-full backdrop-blur-sm shadow-sm">
|
||
Samla ihop ett kompisgäng och anmäl er!
|
||
</p>
|
||
|
||
{/* Moderniserad "Stängd"-box */}
|
||
{timeInfo.isClosed && (
|
||
<div className="bg-white/95 backdrop-blur-md p-8 md:p-10 rounded-[30px] w-full max-w-2xl my-10 shadow-2xl border border-red-100 relative overflow-hidden flex flex-col items-center animate-fade-in">
|
||
{/* Röd dekorationslist i toppen */}
|
||
<div className="absolute top-0 left-0 w-full h-2 bg-linear-to-r from-red-500 to-orange-400" />
|
||
|
||
<div className="bg-red-50 p-4 rounded-full mb-4 shadow-inner">
|
||
<FaLock className="text-red-500" size={32} />
|
||
</div>
|
||
|
||
<h3 className="text-red-600 text-[clamp(1.5rem,5vw,2.2rem)] font-black uppercase tracking-widest mb-3">
|
||
Anmälan är stängd
|
||
</h3>
|
||
<p className="text-gray-700 text-lg font-medium leading-relaxed max-w-md">
|
||
{config.beachPage.closeReason}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</section>
|
||
|
||
<section className="flex flex-col items-center text-center w-full px-1.25">
|
||
<div className="bg-white/90 backdrop-blur-sm p-8 md:p-12 rounded-[30px] my-10 mx-2 flex flex-col items-center w-full max-w-4xl shadow-2xl border border-white/50">
|
||
|
||
{/* Större och tydligare badge för Turneringsinfo */}
|
||
<div className="bg-[#39979f] text-white px-8 py-2.5 rounded-full font-beachday tracking-widest text-3xl font-bold uppercase mb-10 shadow-lg">
|
||
Turneringsinfo
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-12 w-full text-left">
|
||
|
||
{/* VAR & NÄR - Logistik */}
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-3 text-[#cc8124]">
|
||
<FaMapMarkerAlt size={24} />
|
||
<h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">Var</h4>
|
||
</div>
|
||
<p className="text-gray-700 text-lg leading-relaxed">
|
||
<a target="_blank" rel="noreferrer" className="font-bold text-[#39979f] hover:underline decoration-2" href="https://maps.app.goo.gl/vJcdSDCbvdGYXPNY6">
|
||
Kvickbadet
|
||
</a> i Höganäs
|
||
</p>
|
||
|
||
<div className="flex items-center gap-3 text-[#cc8124] mt-6">
|
||
<FaClock size={24} />
|
||
<h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">När</h4>
|
||
</div>
|
||
<div className="text-gray-700 text-lg space-y-1">
|
||
<p className="font-bold">{timeInfo.dateStr}</p>
|
||
<p>{timeInfo.matchStr}</p>
|
||
<p className="text-sm italic pt-3 border-t border-blue-100 mt-2">
|
||
Samtidigt som <a target="_blank" rel="noreferrer" className="text-[#39979f] hover:underline" href={config.beachPage.festivalLink}>Höganäs Mat- & Sommarfest</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* REGLER & KLASSER - Spelet */}
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-3 text-[#cc8124]">
|
||
<FaClipboardList size={24} />
|
||
<h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">Regler</h4>
|
||
</div>
|
||
<p className="text-gray-700 text-base leading-relaxed">
|
||
Matcherna spelas 4v4 med <a target="_blank" rel="noreferrer" className="text-[#39979f] font-bold hover:underline" href="https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/volleyboll">inomhusregler</a>,
|
||
förutom poängräkningen som följer reglerna för <a target="_blank" rel="noreferrer" className="text-[#39979f] font-bold hover:underline" href="https://www.volleyboll.se/forbundet/valkommen-till-volleyboll/grenar-och-spelformer/beachvolley">beachvolley</a>.
|
||
Turneringsformen som kommer spelas är <span className='italic'>Double Elimination</span> vilket betyder att alla lag spelar minst två matcher under dagen.
|
||
</p>
|
||
|
||
<div className="flex items-center gap-3 text-[#cc8124] mt-6">
|
||
<FaUsers size={24} />
|
||
<h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">Klasser</h4>
|
||
</div>
|
||
<div className="text-gray-700 text-sm space-y-3">
|
||
<p className="leading-snug">Turneringen kan delas upp i tre klasser beroende på antal anmälda lag och nivå:</p>
|
||
<div className="flex gap-2 flex-wrap">
|
||
{classesData.map((c: any, i: number) => (
|
||
<span
|
||
key={i}
|
||
className="px-2.5 py-1 rounded-md font-bold border text-xs tracking-wider"
|
||
style={{ backgroundColor: `${c.color}15`, color: c.color, borderColor: `${c.color}40` }}
|
||
>
|
||
{c.name.toUpperCase()} {c.desc && <span className="font-normal opacity-80">({c.desc})</span>}
|
||
</span>
|
||
))}
|
||
</div>
|
||
<p className="italic text-xs text-gray-500">Gör en gissning på er nivå i anmälan – skriv gärna om ni är osäkra.</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* KOSTNAD & ANMÄLAN */}
|
||
<div className="space-y-4 md:col-span-2 bg-[#fdb84b]/10 p-6 md:p-8 rounded-2xl border border-[#fdb84b]/20">
|
||
<div className="flex flex-col md:flex-row gap-8">
|
||
<div className="flex-1 space-y-3">
|
||
<div className="flex items-center gap-3 text-[#cc8124]">
|
||
<FaTicketAlt size={24} />
|
||
<h4 className="font-beachday text-2xl uppercase tracking-[0.05em] text-black">Anmälan & Kostnad</h4>
|
||
</div>
|
||
<p className="text-2xl font-black text-green-700 uppercase tracking-wider">Kostnad: Gratis!</p>
|
||
<div className="text-gray-700 text-sm space-y-2">
|
||
<p>Anmälan görs via formuläret nedan. Du får ett bekräftelsemejl när vi granskat er anmälan.</p>
|
||
<p className="font-bold italic text-[#39979f]">{timeInfo.deadlineText}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-4 bg-white/60 p-5 rounded-xl shadow-inner border border-white flex-1">
|
||
<FaInfoCircle className="text-[#39979f] shrink-0 mt-1" size={20} />
|
||
<div className="text-sm text-gray-700">
|
||
<p className="font-bold text-black mb-2 uppercase tracking-wide text-xs">Övrig info:</p>
|
||
<div className="space-y-1.5">
|
||
{(config.beachPage?.otherInfo || "").split('\n').map((line: string, i: number) => (
|
||
line.trim() && <p key={i} className="leading-tight flex gap-2"><span>•</span> {line}</p>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Kompaktare PRIS-BANNER */}
|
||
<div className="mt-10 w-full max-w-2xl bg-linear-to-r from-[#39979f] to-[#62b8bc] py-4 px-8 rounded-2xl shadow-xl border-b-4 border-black/20">
|
||
<div className="flex items-center justify-center gap-4">
|
||
<FaTrophy className="text-[#fdb84b] shrink-0" size={28} />
|
||
<h4 className="font-beachday uppercase text-[clamp(1.1rem,4vw,1.8rem)] tracking-[0.05em] font-medium text-white text-center leading-none">
|
||
{config.beachPage?.prizesText || "Fina priser till alla pallplatser! 🏆"}
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Rendera formuläret endast om anmälan är öppen */}
|
||
{!timeInfo.isClosed && <BeachRegistrationForm config={config} />}
|
||
|
||
<section className="w-full flex justify-center px-4 mt-10 mb-20">
|
||
<div className="bg-linear-to-br from-[#39979f] to-[#62b8bc] p-10 md:p-12 rounded-[40px] shadow-2xl w-full max-w-2xl text-center transform transition-transform duration-500 border border-blue-400/20 relative overflow-hidden group">
|
||
|
||
{/* Dekorativ bakgrundscirkel */}
|
||
<div className="absolute -right-10 -top-10 w-40 h-40 bg-white/5 rounded-full blur-2xl group-hover:bg-white/10 transition-colors duration-700" />
|
||
|
||
{/* Ikon-badge */}
|
||
<div className="bg-linear-to-br from-[#fdb84b] to-[#e69c24] w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg border-4 border-[#62b8bc] relative z-10">
|
||
<IoIosMail className="text-white" size={40} />
|
||
</div>
|
||
|
||
<h3 className="font-beachday text-white text-[clamp(2rem,5vw,3rem)] uppercase tracking-widest mb-3 relative z-10">
|
||
Kontakta oss
|
||
</h3>
|
||
|
||
<p className="text-white mb-8 font-medium max-w-md mx-auto relative z-10">
|
||
Har du frågor om turneringen, regler eller vill ändra något i er anmälan? Tveka inte att höra av dig!
|
||
</p>
|
||
|
||
<a
|
||
href="mailto:beach@lerbergetsvolleyboll.se?subject=Beach%20turnering"
|
||
className="inline-flex items-center gap-3 bg-white text-[#39979f] font-black text-lg px-8 py-4 rounded-2xl hover:bg-[#fdf5e6] hover:scale-105 transition-all shadow-[0_10px_20px_rgba(0,0,0,0.2)] relative z-10"
|
||
>
|
||
<IoIosMail className="text-[#fdb84b]" size={28} />
|
||
<span>Skicka ett mejl</span>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
} |