platform-admin/alva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2026-01-27 19:20:51 +00:00
parent b331aa1a7d
commit a6c19572da
13 changed files with 363 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+37
View File
@@ -0,0 +1,37 @@
const Footer = () => {
return (
<footer className="py-16 px-6 border-t border-border">
<div className="max-w-6xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-center gap-6">
<div className="text-center md:text-left">
<p className="font-display text-xl font-semibold mb-1">
Lennart Svenssons Konditorivaror
</p>
<p className="text-muted-foreground text-sm">
Premium kakor till svenska kontor sedan 1974
</p>
</div>
<div className="flex gap-8 text-sm text-muted-foreground">
<a href="#" className="hover:text-primary transition-colors">
Om oss
</a>
<a href="#" className="hover:text-primary transition-colors">
Kontakt
</a>
<a href="#" className="hover:text-primary transition-colors">
Villkor
</a>
</div>
</div>
<div className="mt-12 pt-8 border-t border-border text-center text-muted-foreground text-sm">
© {new Date().getFullYear()} Lennart Svenssons Konditorivaror — Alla
rättigheter förbehållna
</div>
</div>
</footer>
);
};
export default Footer;
src/components/GallerySection.tsx
+52
View File
@@ -0,0 +1,52 @@
import bakery1 from "@/assets/bakery-1.jpg";
import bakery2 from "@/assets/bakery-2.jpg";
import bakery3 from "@/assets/bakery-3.jpg";
import bakery4 from "@/assets/bakery-4.jpg";
import bakery5 from "@/assets/bakery-5.jpg";
import bakery6 from "@/assets/bakery-6.jpg";
const images = [
{ src: bakery1, alt: "Kanelbullar" },
{ src: bakery2, alt: "Prinsesstårta" },
{ src: bakery3, alt: "Sorterade kakor" },
{ src: bakery4, alt: "Hantverksbageri" },
{ src: bakery5, alt: "Kardemummabullar" },
{ src: bakery6, alt: "Företagsleverans" },
];
const GallerySection = () => {
return (
<section className="py-24 px-6">
<div className="max-w-6xl mx-auto">
<h2 className="font-display text-center text-4xl md:text-5xl font-bold mb-4">
Hantverk. Kvalitet. Leveranssäkerhet.
</h2>
<p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
Varje produkt bakas med kärlek och levereras med precision
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{images.map((image, index) => (
<div
key={index}
className="group relative h-64 md:h-72 rounded-2xl overflow-hidden card-glow bg-card"
style={{ animationDelay: `${index * 100}ms` }}
>
<img
src={image.src}
alt={image.alt}
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<p className="absolute bottom-4 left-4 font-medium text-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-300">
{image.alt}
</p>
</div>
))}
</div>
</div>
</section>
);
};
export default GallerySection;
src/components/HeroSection.tsx
+41
View File
@@ -0,0 +1,41 @@
const HeroSection = () => {
return (
<section className="hero-gradient min-h-screen flex flex-col justify-center items-center text-center px-6 relative overflow-hidden">
{/* Background glow effect */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/10 rounded-full blur-3xl pointer-events-none" />
<div className="relative z-10 animate-fade-up">
<p className="text-primary uppercase tracking-[0.3em] text-sm font-medium mb-6">
Lennart Svenssons Konditorivaror
</p>
<h1 className="font-display text-5xl md:text-7xl font-bold mb-6 leading-tight">
Kakabonnemang <br />
<span className="text-gradient">för företag</span>
</h1>
<p className="max-w-xl text-muted-foreground text-lg md:text-xl mb-12 font-light leading-relaxed">
Premium konditorikakor levererade automatiskt till ert kontor.
<br />
Enkel beställning. Fasta leveranser. Maximal arbetsglädje.
</p>
<a
href="#plans"
className="btn-primary inline-block px-12 py-5 text-lg"
>
Starta ert abonnemang
</a>
</div>
{/* Scroll indicator */}
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-float">
<div className="w-6 h-10 border-2 border-muted-foreground/30 rounded-full flex justify-center pt-2">
<div className="w-1 h-2 bg-primary rounded-full" />
</div>
</div>
</section>
);
};
export default HeroSection;
src/components/PlansSection.tsx
+117
View File
@@ -0,0 +1,117 @@
import { Check } from "lucide-react";
const plans = [
{
name: "Kontorsabonnemang Bas",
price: "1 990 kr",
period: "/mån",
description: "Perfekt för mindre kontor (upp till 15 personer)",
features: [
"2 leveranser per månad",
"Premium konditorikakor",
"Fast leveransdag",
"Företagsfaktura",
],
featured: false,
},
{
name: "Kontorsabonnemang Pro",
price: "3 490 kr",
period: "/mån",
description: "För växande företag (15–40 personer)",
features: [
"4 leveranser per månad",
"Utvalda sortiment",
"Prioriterad hantering",
"Fakturabetalning",
],
featured: true,
},
{
name: "Företagsavtal",
price: "Offert",
period: "",
description: "För stora kontor, event och kedjor",
features: [
"Anpassad volym",
"Möjlighet till branding",
"Avtalspriser",
"Personlig kontakt",
],
featured: false,
},
];
const PlansSection = () => {
return (
<section id="plans" className="py-24 px-6 bg-secondary/50">
<div className="max-w-6xl mx-auto">
<h2 className="font-display text-center text-4xl md:text-5xl font-bold mb-4">
Våra företagsabonnemang
</h2>
<p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
Välj det abonnemang som passar ert företag bäst
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{plans.map((plan, index) => (
<div
key={index}
className={`relative rounded-3xl p-8 flex flex-col card-glow ${
plan.featured
? "bg-gradient-to-b from-primary/20 to-card border-2 border-primary/30"
: "bg-card border border-border"
}`}
>
{plan.featured && (
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
<span className="btn-primary px-4 py-1.5 text-sm rounded-full">
Mest populär
</span>
</div>
)}
<div className="mb-6">
<h3 className="font-display text-2xl font-bold mb-2">
{plan.name}
</h3>
<div className="flex items-baseline gap-1">
<span className="text-4xl font-bold text-gradient">
{plan.price}
</span>
<span className="text-muted-foreground">{plan.period}</span>
</div>
</div>
<p className="text-muted-foreground mb-8">{plan.description}</p>
<ul className="space-y-4 mb-8 flex-grow">
{plan.features.map((feature, i) => (
<li key={i} className="flex items-center gap-3">
<div className="w-5 h-5 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
<Check className="w-3 h-3 text-primary" />
</div>
<span className="text-foreground/80">{feature}</span>
</li>
))}
</ul>
<a
href="#"
className={`text-center py-4 rounded-xl font-semibold transition-all duration-300 ${
plan.featured
? "btn-primary"
: "bg-secondary hover:bg-secondary/80 text-foreground border border-border"
}`}
>
{plan.price === "Offert" ? "Kontakta oss" : "Starta abonnemang"}
</a>
</div>
))}
</div>
</div>
</section>
);
};
export default PlansSection;