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:24:01 +00:00
parent b7bf358981
commit 9d9ea09772
5 changed files with 259 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+38 -26
View File
@@ -1,33 +1,45 @@
const Footer = () => { const Footer = () => {
return ( return (
<footer className="py-16 px-6 border-t border-border"> <footer className="py-16 px-6 bg-card border-t border-border">
<div className="max-w-6xl mx-auto"> <div className="max-w-5xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-center gap-6"> {/* Main footer content */}
<div className="text-center md:text-left"> <div className="text-center mb-12">
<p className="font-display text-xl font-semibold mb-1"> <p className="font-display text-3xl font-semibold mb-2 italic text-foreground">
Lennart Svenssons Konditorivaror Lennart Svenssons
</p> </p>
<p className="text-muted-foreground text-sm"> <p className="font-display text-xl text-primary mb-4">
Premium kakor till svenska kontor sedan 1974 Konditorivaror
</p> </p>
</div> <p className="text-muted-foreground italic">
"Äkta svenskt hantverk sedan 1974"
<div className="flex gap-8 text-sm text-muted-foreground"> </p>
<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>
<div className="mt-12 pt-8 border-t border-border text-center text-muted-foreground text-sm"> {/* Divider */}
© {new Date().getFullYear()} Lennart Svenssons Konditorivaror — Alla <div className="divider-ornament mb-8">
rättigheter förbehållna <span className="ornament text-lg">✦</span>
</div>
{/* Links */}
<div className="flex flex-wrap justify-center gap-8 text-sm text-muted-foreground mb-12">
<a href="#" className="hover:text-primary transition-colors">
Om konditoriet
</a>
<a href="#" className="hover:text-primary transition-colors">
Vårt sortiment
</a>
<a href="#" className="hover:text-primary transition-colors">
Kontakta oss
</a>
<a href="#" className="hover:text-primary transition-colors">
Allmänna villkor
</a>
</div>
{/* Copyright */}
<div className="text-center text-muted-foreground text-sm">
<p>© {new Date().getFullYear()} Lennart Svenssons Konditorivaror</p>
<p className="mt-1 italic">Alla rättigheter förbehållna</p>
</div> </div>
</div> </div>
</footer> </footer>
src/components/GallerySection.tsx
+35 -20
View File
@@ -16,34 +16,49 @@ const images = [
const GallerySection = () => { const GallerySection = () => {
return ( return (
<section className="py-24 px-6"> <section className="py-24 px-6 bg-card">
<div className="max-w-6xl mx-auto"> <div className="max-w-5xl mx-auto">
<h2 className="font-display text-center text-4xl md:text-5xl font-bold mb-4"> {/* Section header */}
Hantverk. Kvalitet. Leveranssäkerhet. <div className="text-center mb-16">
</h2> <div className="divider-ornament mb-6">
<p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto"> <span className="ornament">✦</span>
Varje produkt bakas med kärlek och levereras med precision </div>
</p> <h2 className="font-display text-4xl md:text-5xl font-semibold mb-4 italic">
Hantverk & Kvalitet
</h2>
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
Varje produkt bakas med samma recept och omsorg som i vår lilla verkstad sedan 1974
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {/* Image grid with classic frames */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{images.map((image, index) => ( {images.map((image, index) => (
<div <div
key={index} key={index}
className="group relative h-64 md:h-72 rounded-2xl overflow-hidden card-glow bg-card" className="group"
style={{ animationDelay: `${index * 100}ms` }}
> >
<img {/* Classic frame effect */}
src={image.src} <div className="relative p-3 bg-background border border-border card-classic">
alt={image.alt} <div className="overflow-hidden">
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" <img
/> src={image.src}
<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" /> alt={image.alt}
<p className="absolute bottom-4 left-4 font-medium text-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-300"> className="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-105 sepia-[.15]"
{image.alt} />
</p> </div>
<p className="text-center mt-3 font-display text-lg text-muted-foreground italic">
{image.alt}
</p>
</div>
</div> </div>
))} ))}
</div> </div>
{/* Bottom ornament */}
<div className="text-center mt-16 text-primary/40 font-display text-2xl">
❦
</div>
</div> </div>
</section> </section>
); );
src/components/HeroSection.tsx
+33 -18
View File
@@ -1,38 +1,53 @@
const HeroSection = () => { const HeroSection = () => {
return ( return (
<section className="hero-gradient min-h-screen flex flex-col justify-center items-center text-center px-6 relative overflow-hidden"> <section className="hero-gradient min-h-screen flex flex-col justify-center items-center text-center px-6 py-20 relative">
{/* Background glow effect */} {/* Decorative top border */}
<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="absolute top-0 left-0 right-0 h-2 bg-primary/20" />
<div className="relative z-10 animate-fade-up"> <div className="animate-fade-up max-w-4xl">
<p className="text-primary uppercase tracking-[0.3em] text-sm font-medium mb-6"> {/* Ornamental divider */}
Lennart Svenssons Konditorivaror <div className="divider-ornament mb-8">
<span className="ornament">✦</span>
</div>
<p className="text-primary uppercase tracking-[0.4em] text-sm font-semibold mb-4">
Sedan 1974
</p> </p>
<h1 className="font-display text-5xl md:text-7xl font-bold mb-6 leading-tight"> <h1 className="font-display text-5xl md:text-7xl font-semibold mb-4 leading-tight text-foreground italic">
Kakabonnemang <br /> Lennart Svenssons
<span className="text-gradient">för företag</span>
</h1> </h1>
<p className="font-display text-3xl md:text-4xl mb-2 text-primary font-medium">
Konditorivaror
</p>
<p className="max-w-xl text-muted-foreground text-lg md:text-xl mb-12 font-light leading-relaxed"> <div className="divider-ornament my-8">
Premium konditorikakor levererade automatiskt till ert kontor. <span className="ornament">❧</span>
</div>
<h2 className="font-display text-2xl md:text-3xl font-medium mb-6 text-foreground">
Kakabonnemang för företag
</h2>
<p className="max-w-xl mx-auto text-muted-foreground text-lg mb-12 leading-relaxed">
Genuina konditorikakor bakade med tradition och omsorg,
levererade direkt till ert kontor.
<br /> <br />
Enkel beställning. Fasta leveranser. Maximal arbetsglädje. <em>Smaken av äkta svenskt hantverk.</em>
</p> </p>
<a <a
href="#plans" href="#plans"
className="btn-primary inline-block px-12 py-5 text-lg" className="btn-classic inline-block px-10 py-4 text-lg rounded-sm"
> >
Starta ert abonnemang Starta ert abonnemang
</a> </a>
</div> </div>
{/* Scroll indicator */} {/* Bottom ornament */}
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-float"> <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-primary/40 font-display text-2xl">
<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> </div>
</section> </section>
); );
src/components/PlansSection.tsx
+66 -43
View File
@@ -2,10 +2,11 @@ import { Check } from "lucide-react";
const plans = [ const plans = [
{ {
name: "Kontorsabonnemang Bas", name: "Bas",
price: "1 990 kr", subtitle: "Kontorsabonnemang",
period: "/mån", price: "1 990",
description: "Perfekt för mindre kontor (upp till 15 personer)", period: "kr/månad",
description: "Perfekt för mindre kontor med upp till 15 personer",
features: [ features: [
"2 leveranser per månad", "2 leveranser per månad",
"Premium konditorikakor", "Premium konditorikakor",
@@ -15,10 +16,11 @@ const plans = [
featured: false, featured: false,
}, },
{ {
name: "Kontorsabonnemang Pro", name: "Pro",
price: "3 490 kr", subtitle: "Kontorsabonnemang",
period: "/mån", price: "3 490",
description: "För växande företag (15–40 personer)", period: "kr/månad",
description: "För växande företag med 15–40 personer",
features: [ features: [
"4 leveranser per månad", "4 leveranser per månad",
"Utvalda sortiment", "Utvalda sortiment",
@@ -28,7 +30,8 @@ const plans = [
featured: true, featured: true,
}, },
{ {
name: "Företagsavtal", name: "Avtal",
subtitle: "Företagsanpassat",
price: "Offert", price: "Offert",
period: "", period: "",
description: "För stora kontor, event och kedjor", description: "För stora kontor, event och kedjor",
@@ -44,71 +47,91 @@ const plans = [
const PlansSection = () => { const PlansSection = () => {
return ( return (
<section id="plans" className="py-24 px-6 bg-secondary/50"> <section id="plans" className="py-24 px-6 bg-background">
<div className="max-w-6xl mx-auto"> <div className="max-w-5xl mx-auto">
<h2 className="font-display text-center text-4xl md:text-5xl font-bold mb-4"> {/* Section header */}
Våra företagsabonnemang <div className="text-center mb-16">
</h2> <div className="divider-ornament mb-6">
<p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto"> <span className="ornament">✦</span>
Välj det abonnemang som passar ert företag bäst </div>
</p> <h2 className="font-display text-4xl md:text-5xl font-semibold mb-4 italic">
Våra Abonnemang
</h2>
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
Välj det abonnemang som passar ert företag bäst
</p>
</div>
{/* Plans grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{plans.map((plan, index) => ( {plans.map((plan, index) => (
<div <div
key={index} key={index}
className={`relative rounded-3xl p-8 flex flex-col card-glow ${ className={`relative bg-card p-8 card-classic rounded-sm ${
plan.featured plan.featured ? "border-2 border-primary" : ""
? "bg-gradient-to-b from-primary/20 to-card border-2 border-primary/30"
: "bg-card border border-border"
}`} }`}
> >
{plan.featured && ( {plan.featured && (
<div className="absolute -top-4 left-1/2 -translate-x-1/2"> <div className="absolute -top-3 left-1/2 -translate-x-1/2">
<span className="btn-primary px-4 py-1.5 text-sm rounded-full"> <span className="bg-primary text-primary-foreground px-4 py-1 text-sm font-semibold rounded-sm">
Mest populär Rekommenderad
</span> </span>
</div> </div>
)} )}
<div className="mb-6"> {/* Plan header */}
<h3 className="font-display text-2xl font-bold mb-2"> <div className="text-center mb-6 pb-6 border-b border-border">
<p className="text-muted-foreground text-sm uppercase tracking-wider mb-1">
{plan.subtitle}
</p>
<h3 className="font-display text-3xl font-semibold text-foreground italic">
{plan.name} {plan.name}
</h3> </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> </div>
<p className="text-muted-foreground mb-8">{plan.description}</p> {/* Price */}
<div className="text-center mb-6">
<span className="font-display text-4xl font-bold text-primary">
{plan.price}
</span>
{plan.period && (
<span className="text-muted-foreground ml-1">{plan.period}</span>
)}
</div>
<ul className="space-y-4 mb-8 flex-grow"> <p className="text-muted-foreground text-center mb-8 text-sm">
{plan.description}
</p>
{/* Features */}
<ul className="space-y-3 mb-8">
{plan.features.map((feature, i) => ( {plan.features.map((feature, i) => (
<li key={i} className="flex items-center gap-3"> <li key={i} className="flex items-start gap-3">
<div className="w-5 h-5 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0"> <Check className="w-4 h-4 text-primary mt-1 flex-shrink-0" />
<Check className="w-3 h-3 text-primary" /> <span className="text-foreground/80 text-sm">{feature}</span>
</div>
<span className="text-foreground/80">{feature}</span>
</li> </li>
))} ))}
</ul> </ul>
{/* CTA Button */}
<a <a
href="#" href="#"
className={`text-center py-4 rounded-xl font-semibold transition-all duration-300 ${ className={`block text-center py-3 px-6 rounded-sm font-semibold transition-all duration-300 ${
plan.featured plan.featured
? "btn-primary" ? "btn-classic"
: "bg-secondary hover:bg-secondary/80 text-foreground border border-border" : "btn-outline-classic"
}`} }`}
> >
{plan.price === "Offert" ? "Kontakta oss" : "Starta abonnemang"} {plan.price === "Offert" ? "Begär offert" : "Välj abonnemang"}
</a> </a>
</div> </div>
))} ))}
</div> </div>
{/* Bottom ornament */}
<div className="text-center mt-16 text-primary/40 font-display text-2xl">
❦
</div>
</div> </div>
</section> </section>
); );
src/index.css
+87 -56
View File
@@ -2,55 +2,63 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* Lennart Svenssons Konditorivaror - Premium Dark Design System */ /* Lennart Svenssons Konditorivaror - Traditionell Svensk Konditoristil */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');
@layer base { @layer base {
:root { :root {
--background: 0 0% 4%; --background: 38 25% 96%;
--foreground: 0 0% 98%; --foreground: 25 30% 12%;
--card: 0 0% 8%; --card: 40 30% 94%;
--card-foreground: 0 0% 98%; --card-foreground: 25 30% 12%;
--popover: 0 0% 8%; --popover: 40 30% 94%;
--popover-foreground: 0 0% 98%; --popover-foreground: 25 30% 12%;
--primary: 24 95% 53%; --primary: 25 65% 35%;
--primary-foreground: 0 0% 100%; --primary-foreground: 40 30% 96%;
--secondary: 0 0% 12%; --secondary: 35 20% 88%;
--secondary-foreground: 0 0% 98%; --secondary-foreground: 25 30% 18%;
--muted: 0 0% 15%; --muted: 35 15% 85%;
--muted-foreground: 0 0% 60%; --muted-foreground: 25 15% 45%;
--accent: 30 100% 50%; --accent: 18 70% 45%;
--accent-foreground: 0 0% 100%; --accent-foreground: 40 30% 96%;
--destructive: 0 84.2% 60.2%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--border: 0 0% 18%; --border: 30 20% 80%;
--input: 0 0% 18%; --input: 30 20% 80%;
--ring: 24 95% 53%; --ring: 25 65% 35%;
--radius: 0.75rem; --radius: 0.25rem;
/* Custom tokens */ /* Custom tokens */
--gradient-warm: linear-gradient(135deg, hsl(24 95% 53%) 0%, hsl(35 100% 55%) 100%); --gradient-warm: linear-gradient(180deg, hsl(40 30% 94%) 0%, hsl(35 25% 90%) 100%);
--gradient-dark: linear-gradient(180deg, hsl(0 0% 4%) 0%, hsl(0 0% 7%) 100%); --shadow-classic: 0 4px 20px -4px hsl(25 30% 12% / 0.15);
--shadow-glow: 0 0 60px -15px hsl(24 95% 53% / 0.4); --shadow-card: 0 2px 8px hsl(25 30% 12% / 0.08);
--shadow-card: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
--font-display: 'Playfair Display', serif; --font-display: 'Cormorant Garamond', serif;
--font-body: 'Inter', sans-serif; --font-body: 'Crimson Text', serif;
} }
.dark { .dark {
--background: 0 0% 4%; --background: 25 20% 8%;
--foreground: 0 0% 98%; --foreground: 38 25% 92%;
--card: 25 18% 12%;
--card-foreground: 38 25% 92%;
--primary: 30 50% 55%;
--primary-foreground: 25 20% 8%;
--secondary: 25 15% 18%;
--secondary-foreground: 38 25% 92%;
--muted: 25 12% 22%;
--muted-foreground: 30 15% 60%;
--border: 25 15% 25%;
} }
} }
@@ -75,47 +83,66 @@
@layer components { @layer components {
.hero-gradient { .hero-gradient {
background: var(--gradient-dark);
}
.text-gradient {
background: var(--gradient-warm); background: var(--gradient-warm);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
.card-glow { .text-accent-warm {
color: hsl(var(--accent));
}
.card-classic {
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid hsl(var(--border));
transition: all 0.3s ease;
} }
.card-glow:hover { .card-classic:hover {
box-shadow: var(--shadow-glow); box-shadow: var(--shadow-classic);
transform: translateY(-8px); transform: translateY(-4px);
} }
.btn-primary { .btn-classic {
background: var(--gradient-warm); @apply bg-primary text-primary-foreground font-semibold transition-all duration-300;
@apply text-primary-foreground font-semibold rounded-xl transition-all duration-300; border: 2px solid hsl(var(--primary));
} }
.btn-primary:hover { .btn-classic:hover {
transform: translateY(-2px); @apply bg-transparent;
box-shadow: 0 10px 40px -10px hsl(24 95% 53% / 0.5); color: hsl(var(--primary));
}
.btn-outline-classic {
@apply bg-transparent font-semibold transition-all duration-300;
color: hsl(var(--primary));
border: 2px solid hsl(var(--primary));
}
.btn-outline-classic:hover {
@apply bg-primary text-primary-foreground;
}
.divider-ornament {
display: flex;
align-items: center;
gap: 1rem;
}
.divider-ornament::before,
.divider-ornament::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
}
.ornament {
color: hsl(var(--primary));
font-family: var(--font-display);
font-size: 1.5rem;
} }
} }
@layer utilities { @layer utilities {
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-fade-up { .animate-fade-up {
animation: fadeUp 0.8s ease-out forwards; animation: fadeUp 0.8s ease-out forwards;
} }
@@ -123,11 +150,15 @@
@keyframes fadeUp { @keyframes fadeUp {
from { from {
opacity: 0; opacity: 0;
transform: translateY(30px); transform: translateY(20px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
.text-balance {
text-wrap: balance;
}
} }