Justerad bakverksektion bilder

Bytte namn på kakor till mandelkubben, kolasnitten och chokladsnitten med -en suffix, tillägnade beskrivningar under varje bild, och removeade tidigare kortlayout så bilderna renderas fritt med textbeskrivningar.

X-Lovable-Edit-ID: edt-e5038124-1675-4696-afbf-26e44897b024
This commit is contained in:
gpt-engineer-app[bot]
2026-01-27 20:15:41 +00:00
+14 -10
View File
@@ -6,16 +6,19 @@ import chokladsnittImage from "@/assets/chokladsnitt.jpg";
const cookies = [ const cookies = [
{ {
name: "Mandelkubb", name: "Mandelkubben",
image: mandelkubbImage, image: mandelkubbImage,
description: "Mjuk och smörig med en härlig mandelsmak som smälter på tungan. Toppas med rostade mandelflagor.",
}, },
{ {
name: "Kolasnitt", name: "Kolasnitten",
image: kolasnittImage, image: kolasnittImage,
description: "Krämig kolakaka med en perfekt balans av sötma och smörighet. En riktig favorit på fikarasten.",
}, },
{ {
name: "Chokladsnitt", name: "Chokladsnitten",
image: chokladsnittImage, image: chokladsnittImage,
description: "Rik och fyllig chokladsmak med en len glasyr. För dig som älskar äkta, mörk choklad.",
}, },
]; ];
@@ -118,19 +121,20 @@ const HeritageSection = () => {
transitionDelay: cookiesVisible ? `${index * 200}ms` : "0ms", transitionDelay: cookiesVisible ? `${index * 200}ms` : "0ms",
}} }}
> >
<div className="bg-card rounded-sm overflow-hidden card-classic"> <div className="text-center">
<div className="aspect-square overflow-hidden"> <div className="aspect-square overflow-hidden rounded-sm mb-6">
<img <img
src={cookie.image} src={cookie.image}
alt={cookie.name} alt={cookie.name}
className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
/> />
</div> </div>
<div className="p-6 text-center"> <h3 className="font-display text-2xl font-semibold text-foreground mb-3">
<h3 className="font-display text-2xl font-semibold text-foreground"> {cookie.name}
{cookie.name} </h3>
</h3> <p className="text-foreground/70 leading-relaxed">
</div> {cookie.description}
</p>
</div> </div>
</div> </div>
))} ))}