import { useEffect, useState } from “react”;
import { motion } from “framer-motion”;

// ————————————————————
// Förstasida – Inspirerad av us.bubs.se men med eget uttryck
// – Tailwind för styling
// – Enbart front-end (ingen backend)
// – Alla bilder är placeholders – byt till egna produktbilder
// – Sektioner: AnnounceBar, Header, Hero, Collections, USP, Grid,
// CTA-banners, Instagram, Nyhetsbrev, Footer
// ————————————————————

const products = [
{
id: 1,
name: “Dizzy Skallar (Sour Mix)”,
price: “€5.90”,
img: “https://images.unsplash.com/photo-1526318472351-c75fcf070305?q=80&w=1600&auto=format&fit=crop”,
badge: “Bestseller”,
},
{
id: 2,
name: “Hallon/Lakrits Skallar”,
price: “€5.50”,
img: “https://images.unsplash.com/photo-1505253758473-96b7015fcd40?q=80&w=1600&auto=format&fit=crop”,
badge: “Vegan”,
},
{
id: 3,
name: “Cola Skallar”,
price: “€4.90”,
img: “https://images.unsplash.com/photo-1530041686259-53d31f0f63a3?q=80&w=1600&auto=format&fit=crop”,
badge: “Nyhet”,
},
{
id: 4,
name: “Sura Jordgubbar”,
price: “€4.50”,
img: “https://images.unsplash.com/photo-1541976076758-347942db1972?q=80&w=1600&auto=format&fit=crop”,
badge: “Limited”,
},
];

const collections = [
{
id: “vegan”,
title: “Vegan Favorites”,
subtitle: “Gelatinfritt & ikoniskt gott”,
img: “https://images.unsplash.com/photo-1532787799187-936116d89958?q=80&w=2000&auto=format&fit=crop”,
},
{
id: “sour”,
title: “Surt & Salt”,
subtitle: “Klassiska skallar med sting”,
img: “https://images.unsplash.com/photo-1590086782792-42dd2350140d?q=80&w=2000&auto=format&fit=crop”,
},
{
id: “mix”,
title: “Pick & Mix”,
subtitle: “Bygg din egen påse”,
img: “https://images.unsplash.com/photo-1595433707802-6b2626ef1c86?q=80&w=2000&auto=format&fit=crop”,
},
];

function AnnouncementBar() {
return (

);
}

function Header() {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener(“scroll”, onScroll);
return () => window.removeEventListener(“scroll”, onScroll);
}, []);

return (

);
}

function Hero() {
return (

Svenska skallar. Global craving.

Ikoniska smaker från Sverige – veganskt, gelatinfritt och oemotståndligt. Handla
dina favoriter eller utforska våra kuraterade kollektioner.

Shoppa nu


Utforska kollektioner

🍬 Gelatinfritt

🌱 Vegan options

🚚 Snabb leverans

);
}

function Collections() {
return (

Kollektioner

Se alla produkter

{collections.map((c) => (

{c.title}

{c.subtitle}

))}

);
}

function USPs() {
const items = [
{ icon: “🚚”, title: “Snabb leverans”, text: “1–3 arbetsdagar inom EU” },
{ icon: “🌱”, title: “Veganvänligt”, text: “Många favoriter utan gelatin” },
{ icon: “🇸🇪”, title: “Svenskt godis”, text: “Smaker som alla känner igen” },
];
return (

);
}

function ProductCard({ p }: { p: typeof products[number] }) {
return (

{p.badge && (

{p.badge}

)}

{p.name}

{p.price}

Snabbkoll

Lägg i varukorg

);
}

function ProductGrid() {
return (

);
}

function WholesaleCTA() {
return (

B2B & Wholesale

Driver du butik eller café? Ansök om ett återförsäljar-konto och få tillgång
till grossistpriser, snabb support och marknadsföringsmaterial.

Ansök nu


Läs mer

);
}

function InstagramStrip() {
const imgs = Array.from({ length: 8 }, (_, i) =>
`https://images.unsplash.com/photo-1504754524776-8f4f37790ca0?q=80&w=1200&auto=format&fit=crop&sig=${i + 1}`
);
return (

@bubsson – Följ oss

Öppna Instagram

{imgs.map((src, idx) => (

))}

);
}

function Newsletter() {
return (

);
}

function Footer() {
return (

);
}

export default function Page() {
return (

);
}