120 lines
6.6 KiB
TypeScript
120 lines
6.6 KiB
TypeScript
// app/components/HomeClientContent.tsx
|
|
|
|
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import HeroButton from './HeroButton';
|
|
import InfoCard from './InfoCard';
|
|
import SocialIcon from './SocialIcon';
|
|
import MemberModal from './Modals/Member';
|
|
import SubscribeModal from './Modals/Subscribe';
|
|
import { FaFacebookSquare, FaInstagram } from "react-icons/fa";
|
|
import { IoIosMail } from "react-icons/io";
|
|
import Image from 'next/image';
|
|
import player from "../../public/images/player.svg";
|
|
import laget from "../../public/images/laget.se.svg";
|
|
|
|
export default function HomeClientContent() {
|
|
const [activeModal, setActiveModal] = useState<'member' | 'subscribe' | null>(null);
|
|
const closeModals = () => setActiveModal(null);
|
|
|
|
return (
|
|
<>
|
|
{/* Hero / Info Section */}
|
|
<section className="bg-[#406185] flex justify-center text-white">
|
|
<div className="flex flex-col md:flex-row max-w-300 my-12.5 mx-5 w-full">
|
|
<div className="flex flex-col justify-center flex-1">
|
|
<div className="w-fit">
|
|
{/* Combine the abbreviation and full name for the H1 */}
|
|
<h1 className="uppercase text-[2.5rem] font-bold leading-[1.1] mb-2.5">
|
|
LVS <span className="sr-only">Lerbergets Volleybollsällskap</span>
|
|
</h1>
|
|
<div className="bg-white w-full h-1.5" aria-hidden="true"></div>
|
|
</div>
|
|
<h2 className="italic text-xl my-2.5 font-bold">Lerbergets Volleybollsällskap</h2>
|
|
<p className="max-w-200 leading-[1.1]">
|
|
Klubben startade den 1 mars 2018 och har i snabb takt utvecklats med både <strong>kidsvolley</strong>, <strong>4-mannavolley</strong> och träning för alla nivåer. På sommaren flyttar vi ner till stranden för <strong>beachvolleyboll</strong> i Höganäs.
|
|
</p>
|
|
<div className="flex flex-col gap-2.5 mt-10">
|
|
<HeroButton onClick={() => setActiveModal('member')}>Bli Medlem</HeroButton>
|
|
<HeroButton href="#traningstider">Träningstider</HeroButton>
|
|
<HeroButton href="https://www.basesport.se/category/lerbergets-vbs">Klubbkollektion</HeroButton>
|
|
</div>
|
|
</div>
|
|
<div className="hidden md:flex md:relative w-64 md:w-75 player-animation">
|
|
<Image src={player} alt="Spelare" className="w-full h-auto" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Träningstider Section */}
|
|
<section id="traningstider" className="bg-white flex justify-center">
|
|
<div className="flex flex-col items-center w-full my-7.5 gap-2">
|
|
<InfoCard
|
|
title="Träningstider"
|
|
description="Här hittar du alltid uppdaterade träningstider från Laget.se"
|
|
actionLabel="Se nästa träningstid"
|
|
href="https://www.laget.se/LVS/Event/Month"
|
|
/>
|
|
<InfoCard
|
|
title="Prenumerera på träningstider"
|
|
description="Våra träningstider finns som en kalender man kan prenumerera på"
|
|
actionLabel="Prenumerera"
|
|
onClick={() => setActiveModal('subscribe')}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="bg-[#406185] flex justify-center text-white">
|
|
<div className="flex flex-wrap-reverse justify-center gap-12 w-full max-w-300 my-16 px-5">
|
|
|
|
{/* Sociala Medier Ikoner */}
|
|
<div className="flex flex-wrap justify-center items-center gap-10">
|
|
<SocialIcon title="Instagram" href="https://www.instagram.com/lerbergets_volleyboll/" aria-label="Följ LVS på Instagram">
|
|
<FaInstagram className="h-20 w-20" />
|
|
</SocialIcon>
|
|
|
|
<SocialIcon title="Facebook" href="https://www.facebook.com/lerbergetsvolleyboll" aria-label="Följ LVS på Facebook">
|
|
<FaFacebookSquare className="h-20 w-20" />
|
|
</SocialIcon>
|
|
|
|
<SocialIcon title="Laget.se" href="https://www.laget.se/LVS" aria-label="Kolla träningstider på Laget.se">
|
|
<Image src={laget} alt="Laget.se" className="h-18 w-18" />
|
|
</SocialIcon>
|
|
</div>
|
|
|
|
{/* Kontaktinformation */}
|
|
<div className="text-center p-2.5 flex flex-col justify-center items-center">
|
|
<h3 className="uppercase font-bold text-[1.875rem] leading-[1.2] mb-4">Kontakta oss</h3>
|
|
<p className="text-[1rem] leading-[1.6] opacity-90">Vi finns på Instagram, Facebook och laget.se</p>
|
|
|
|
{/* Klickbar Adress - Länkar till Google Maps */}
|
|
<a
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
href="https://maps.app.goo.gl/W81bT9X44Yfxsnoh7"
|
|
className="text-[1rem] leading-[1.6] my-2 hover:text-[#f1c50e] transition-colors duration-300"
|
|
>
|
|
Höganäs Sportcenter, Friluftsvägen 10, 263 54 Lerberget
|
|
</a>
|
|
|
|
{/* Levande E-postlänk med brand-gul färg */}
|
|
<a
|
|
href="mailto:info@lerbergetsvolleyboll.se?subject=Kontakta%20oss"
|
|
className="group flex justify-center items-center text-[#f1c50e] font-bold text-[1.1rem] mt-2 relative pb-1"
|
|
>
|
|
<IoIosMail className="h-7 w-7 mr-2" size={24} />
|
|
<span>info@lerbergetsvolleyboll.se</span>
|
|
{/* Underlinje som expanderar vid hovring */}
|
|
<span className="absolute bottom-0 left-0 w-full h-0.5 bg-[#f1c50e] transform scale-x-0 transition-transform duration-300 origin-left group-hover:scale-x-100" />
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{activeModal === 'member' && <MemberModal onClose={closeModals} />}
|
|
{activeModal === 'subscribe' && <SubscribeModal onClose={closeModals} />}
|
|
</>
|
|
);
|
|
} |