- Startsida
- Välkom fr dezzy
import React from "react"; import { motion } from "framer-motion"; import { ShoppingCart, Search, Star, Truck, Gift, Leaf, Sparkles, Cookie, Mail, Shield } from "lucide-react"; /** * Startsida-layout – Pepparkaksformar.se * * Designmål * - Varm, mysig estetik: pepparkaksbrun (#8A4B2A), mörk choklad (#4B2E24), gräddvit (#F6F1EA), kanel (#B76538), salviagrön (#7E8D63). * - Svensk, enkel och ren typografi med varma rubriker. * - Luftig grid, stora rundningar, mjuka skuggor, subtila animationer. * - Säsongsflexibel: Jul (standard), men lätt att byta ut hero/banners. * * Teknisk not * - Tailwind CSS-klasser används direkt. * - Ikoner från lucide-react. * - Framer Motion för övergångar. */ // Hjälpkomponenter const Container: React.FC<{ className?: string; children: React.ReactNode }> = ({ className = "", children }) => (
{children}
); const SectionTitle: React.FC<{ kicker?: string; title: string; subtitle?: string }>=({ kicker, title, subtitle })=> (
{kicker &&
{kicker}
}
{title}
{subtitle &&
{subtitle}
}
); const Badge: React.FC<{ icon: React.ReactNode; text: string }>=({ icon, text })=> (
{icon} {text}
); const ProductCard: React.FC<{ title: string; price: string; tag?: string }>=({ title, price, tag })=> (
{tag && (
{tag} )}
); export default function HomepageLayout() { return (
{/* Announce bar */}
} text="Fri frakt över 499 kr" /> } text="Julpaket & presentinslagning" />
Leverans 1–3 dagar • Fri retur till 31/1
{/* Header */}
{/* Hero */}
Julkollektionen 2025 är här ✨
Baka minnen med våra pepparkaksformar
Svensk design, naturvänliga material och former för alla tillfällen – från klassiska hjärtan till personliga bokstäver.
} text="BPA-fritt & återvunnet stål" /> } text="Trygg e-handel" />
4.9/5 av 2 431 bakälskare
{/* Kategori-snabbval */}
{[ { name: "Jul & vinter", img: "https://images.unsplash.com/photo-1609766857041-1043cd7fba69?q=80&w=800&auto=format&fit=crop" }, { name: "Djur", img: "https://images.unsplash.com/photo-1481391032119-d89fee407e44?q=80&w=800&auto=format&fit=crop" }, { name: "Bokstäver", img: "https://images.unsplash.com/photo-1517685352821-92cf88aee5a5?q=80&w=800&auto=format&fit=crop" }, { name: "Klassiker", img: "https://images.unsplash.com/photo-1631882439234-8ac31842e1fc?q=80&w=800&auto=format&fit=crop" }, { name: "Barnens favoriter", img: "https://images.unsplash.com/photo-1541795795328-f4d8b4c5b39a?q=80&w=800&auto=format&fit=crop" }, { name: "Temafester", img: "https://images.unsplash.com/photo-1509440159596-0249088772ff?q=80&w=800&auto=format&fit=crop" }, ].map((cat) => (
{/* Nyheter / produktgrid */}
{/* Säsongsbanner */}
Skapa ditt pepparkakshus
Mall, formset och 3D-stöd för väggar – allt du behöver för årets finaste hus.
{/* Baka-set / Bygg din samling */}
1. Välj tema
Jul, dop, kalas eller eget motiv. Vi guidar dig med smarta förslag.
2. Kombinera formar
Bokstäver + figurer + dekorer. Se hur de passar ihop i vår layoutvy.
3. Beställ i ett klick
Vi paketerar hållbart och skickar snabbt. Dela din lista med vänner.
{/* Omdömen */}
{[1,2,3].map((i)=> (
{Array.from({length:5}).map((_,i)=>())}
“Underbar kvalitet och så fin service. Barnen älskar djurformarna!”
– Elin, Växjö
))}
{/* Inspiration / Recept */}
{["Dekorera snöflingor som ett proffs","Pepparkaksbokstäver till kalaset","Veganska pepparkakor – recept"].map((title,idx)=> (
{/* Nyhetsbrev */}
Få 10% på första köpet
Anmäl dig till nyhetsbrevet för recept, guider och tidiga släpp.
{/* Footer */}
); } // Design Tokens (för dokumentation) // Brun (pepparkaka): #8A4B2A // Mörk choklad: #4B2E24 // Gräddvit: #F6F1EA // Kanel: #B76538 // Salviagrön: #7E8D63 // Accent (guldton): #C9A77C // Ytstruktur/linjer: #E7D8CE
0
