Changes

src/components/Footer.tsx

@@ -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

@@ -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

@@ -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

@@ -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;

src/index.css

@@ -2,95 +2,55 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
+/* Lennart Svenssons Konditorivaror - Premium Dark Design System */
-All colors MUST be HSL.
+
-*/
+@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%;
+    --background: 0 0% 4%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 0 0% 98%;
 
-    --card: 0 0% 100%;
+    --card: 0 0% 8%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 0 0% 98%;
 
-    --popover: 0 0% 100%;
+    --popover: 0 0% 8%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 0 0% 98%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 24 95% 53%;
-    --primary-foreground: 210 40% 98%;
+    --primary-foreground: 0 0% 100%;
 
-    --secondary: 210 40% 96.1%;
+    --secondary: 0 0% 12%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary-foreground: 0 0% 98%;
 
-    --muted: 210 40% 96.1%;
+    --muted: 0 0% 15%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted-foreground: 0 0% 60%;
 
-    --accent: 210 40% 96.1%;
+    --accent: 30 100% 50%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent-foreground: 0 0% 100%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 214.3 31.8% 91.4%;
+    --border: 0 0% 18%;
-    --input: 214.3 31.8% 91.4%;
+    --input: 0 0% 18%;
-    --ring: 222.2 84% 4.9%;
+    --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%;
+    --font-display: 'Playfair Display', serif;
-
+    --font-body: 'Inter', sans-serif;
-    --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%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 0 0% 4%;
-    --foreground: 210 40% 98%;
+    --foreground: 0 0% 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%;
   }
 }
 
@@ -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);
+    }
   }
 }

src/pages/Index.tsx

@@ -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="bg-background text-foreground min-h-screen">
-      <div className="text-center">
+      <HeroSection />
-        <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
+      <GallerySection />
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
+      <PlansSection />
-      </div>
+      <Footer />
     </div>
   );
 };

tailwind.config.ts

@@ -13,6 +13,10 @@ export default {
       },
     },
     extend: {
+      fontFamily: {
+        display: ["Playfair Display", "serif"],
+        body: ["Inter", "sans-serif"],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -65,20 +69,12 @@ export default {
       },
       keyframes: {
         "accordion-down": {
-          from: {
+          from: { height: "0" },
-            height: "0",
+          to: { height: "var(--radix-accordion-content-height)" },
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
         },
         "accordion-up": {
-          from: {
+          from: { height: "var(--radix-accordion-content-height)" },
-            height: "var(--radix-accordion-content-height)",
+          to: { height: "0" },
-          },
-          to: {
-            height: "0",
-          },
         },
       },
       animation: {