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,31 @@
+// app/components/BeachPromo.tsx
+
+import Link from 'next/link';
+import { FaVolleyballBall } from "react-icons/fa";
+
+export default function BeachPromo() {
+    return (
+        <section className="bg-[#fdb84b] flex justify-center py-4 transition-all duration-500 hover:brightness-105 group/promo cursor-pointer">
+            <div className="p-2.5">
+                <h2 className="font-beachday text-black text-center text-[clamp(1.2rem,6vw,2.25rem)] uppercase tracking-tight flex items-baseline justify-center flex-wrap gap-x-3 md:gap-x-5">
+                    <span className="whitespace-nowrap transition-all duration-300 group-hover/promo:opacity-80">
+                        Kolla in vår
+                    </span>
+                    <Link
+                        href="/beach"
+                        className="relative text-[#406185] transition-all duration-300 inline-flex items-center gap-3 group/link hover:tracking-wider hover:-translate-y-1"
+                    >
+                        <span className="relative">
+                            Beachturnering
+                            <span className="absolute -bottom-1 left-0 w-full h-1 bg-[#406185] transform scale-x-0 transition-transform duration-300 origin-left group-hover/link:scale-x-100" />
+                        </span>
+                        <FaVolleyballBall
+                            className="text-[#406185] transition-all duration-700 ease-out group-hover/promo:rotate-360 group-hover/link:scale-125 group-hover/link:text-black self-center"
+                            size="0.8em"
+                        />
+                    </Link>
+                </h2>
+            </div>
+        </section>
+    );
+}