Changes
This commit is contained in:
gpt-engineer-app[bot]
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
+99
-71
@@ -2,95 +2,55 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
||||
All colors MUST be HSL.
|
||||
*/
|
||||
/* Lennart Svenssons Konditorivaror - Premium Dark Design System */
|
||||
|
||||
@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');
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--background: 0 0% 4%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 8%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 8%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary: 24 95% 53%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 0 0% 12%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--muted: 0 0% 15%;
|
||||
--muted-foreground: 0 0% 60%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--accent: 30 100% 50%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--border: 0 0% 18%;
|
||||
--input: 0 0% 18%;
|
||||
--ring: 24 95% 53%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
--radius: 0.75rem;
|
||||
|
||||
--sidebar-background: 0 0% 98%;
|
||||
/* Custom tokens */
|
||||
--gradient-warm: linear-gradient(135deg, hsl(24 95% 53%) 0%, hsl(35 100% 55%) 100%);
|
||||
--gradient-dark: linear-gradient(180deg, hsl(0 0% 4%) 0%, hsl(0 0% 7%) 100%);
|
||||
--shadow-glow: 0 0 60px -15px hsl(24 95% 53% / 0.4);
|
||||
--shadow-card: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
|
||||
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
|
||||
--sidebar-border: 220 13% 91%;
|
||||
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--font-display: 'Playfair Display', serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
--background: 0 0% 4%;
|
||||
--foreground: 0 0% 98%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,7 +59,75 @@ All colors MUST be HSL.
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground antialiased;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.hero-gradient {
|
||||
background: var(--gradient-dark);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: var(--gradient-warm);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
box-shadow: var(--shadow-card);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-glow:hover {
|
||||
box-shadow: var(--shadow-glow);
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-warm);
|
||||
@apply text-primary-foreground font-semibold rounded-xl transition-all duration-300;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 40px -10px hsl(24 95% 53% / 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
animation: fadeUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+9
-6
@@ -1,12 +1,15 @@
|
||||
// Update this page (the content is just a fallback if you fail to update the page)
|
||||
import HeroSection from "@/components/HeroSection";
|
||||
import GallerySection from "@/components/GallerySection";
|
||||
import PlansSection from "@/components/PlansSection";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
|
||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
||||
</div>
|
||||
<div className="bg-background text-foreground min-h-screen">
|
||||
<HeroSection />
|
||||
<GallerySection />
|
||||
<PlansSection />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user