Almost done

2026-03-05 17:35:27 +01:00
parent 278471e53b
commit e44fceaf32
30 changed files with 1077 additions and 572 deletions
@@ -0,0 +1,114 @@
+// 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";
+
+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">
+                            <h1 className="uppercase text-[2.5rem] font-bold leading-[1.1] mb-2.5">LVS</h1>
+                            <div className="bg-white w-full h-1.5"></div>
+                        </div>
+                        <h4 className="italic text-xl my-2.5 font-bold">Lerbergets Volleybollsällskap</h4>
+                        <p className="max-w-200 leading-[1.1]">
+                            Klubben startade den 1 mars 2018 och har i snabb takt utvecklats...
+                        </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-vbk">Klubbkollektion</HeroButton>
+                        </div>
+                    </div>
+                    <div className="hidden md:flex items-center p-2.5 justify-end">
+                        <img src="/images/player.webp" alt="Spelare" className="max-h-112.5 player-animation" />
+                    </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/">
+                            <FaInstagram className="h-20 w-20" />
+                        </SocialIcon>
+
+                        <SocialIcon title="Facebook" href="https://www.facebook.com/lerbergetsvolleyboll">
+                            <FaFacebookSquare className="h-20 w-20" />
+                        </SocialIcon>
+
+                        <SocialIcon title="Laget.se" href="https://www.laget.se/LVS">
+                            <img src="/images/laget.se.svg" 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} />}
+        </>
+    );
+}