Implementt gammaldags svensk stil

Förändringar till konsolen: bytte till traditionell konditoriestetik med äldre typsnitt, varmare palett och klassiska designelement; uppdaterade komponenter (HeroSection, GallerySection, PlansSection, Footer) för en mer vintage/svensk konditori-look och anpassade texter/etiketter genom hela sidan.

X-Lovable-Edit-ID: edt-15025a71-6881-4807-be04-f68a4b6ecdc5

src/components/Footer.tsx

@@ -1,33 +1,45 @@
 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>
+    <footer className="py-16 px-6 bg-card border-t border-border">
+      <div className="max-w-5xl mx-auto">
+        {/* Main footer content */}
+        <div className="text-center mb-12">
+          <p className="font-display text-3xl font-semibold mb-2 italic text-foreground">
+            Lennart Svenssons
+          </p>
+          <p className="font-display text-xl text-primary mb-4">
+            Konditorivaror
+          </p>
+          <p className="text-muted-foreground italic">
+            "Äkta svenskt hantverk sedan 1974"
+          </p>
         </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
+        {/* Divider */}
+        <div className="divider-ornament mb-8">
+          <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>
     </footer>

src/components/GallerySection.tsx

@@ -16,34 +16,49 @@ const images = [
 
 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>
+    <section className="py-24 px-6 bg-card">
+      <div className="max-w-5xl mx-auto">
+        {/* Section header */}
+        <div className="text-center mb-16">
+          <div className="divider-ornament mb-6">
+            <span className="ornament">✦</span>
+          </div>
+          <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) => (
             <div
               key={index}
-              className="group relative h-64 md:h-72 rounded-2xl overflow-hidden card-glow bg-card"
-              style={{ animationDelay: `${index * 100}ms` }}
+              className="group"
             >
-              <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>
+              {/* Classic frame effect */}
+              <div className="relative p-3 bg-background border border-border card-classic">
+                <div className="overflow-hidden">
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-105 sepia-[.15]"
+                  />
+                </div>
+                <p className="text-center mt-3 font-display text-lg text-muted-foreground italic">
+                  {image.alt}
+                </p>
+              </div>
             </div>
           ))}
         </div>
+
+        {/* Bottom ornament */}
+        <div className="text-center mt-16 text-primary/40 font-display text-2xl">
+          ❦
+        </div>
       </div>
     </section>
   );

src/components/HeroSection.tsx

@@ -1,38 +1,53 @@
 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" />
+    <section className="hero-gradient min-h-screen flex flex-col justify-center items-center text-center px-6 py-20 relative">
+      {/* Decorative top border */}
+      <div className="absolute top-0 left-0 right-0 h-2 bg-primary/20" />
       
-      <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
+      <div className="animate-fade-up max-w-4xl">
+        {/* Ornamental divider */}
+        <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>
 
-        <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 className="font-display text-5xl md:text-7xl font-semibold mb-4 leading-tight text-foreground italic">
+          Lennart Svenssons
         </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">
-          Premium konditorikakor levererade automatiskt till ert kontor.
+        <div className="divider-ornament my-8">
+          <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 />
-          Enkel beställning. Fasta leveranser. Maximal arbetsglädje.
+          <em>Smaken av äkta svenskt hantverk.</em>
         </p>
 
         <a
           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
         </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>
+      {/* Bottom ornament */}
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-primary/40 font-display text-2xl">
+        ❦
       </div>
     </section>
   );

src/components/PlansSection.tsx

@@ -2,10 +2,11 @@ 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)",
+    name: "Bas",
+    subtitle: "Kontorsabonnemang",
+    price: "1 990",
+    period: "kr/månad",
+    description: "Perfekt för mindre kontor med upp till 15 personer",
     features: [
       "2 leveranser per månad",
       "Premium konditorikakor",
@@ -15,10 +16,11 @@ const plans = [
     featured: false,
   },
   {
-    name: "Kontorsabonnemang Pro",
-    price: "3 490 kr",
-    period: "/mån",
-    description: "För växande företag (15–40 personer)",
+    name: "Pro",
+    subtitle: "Kontorsabonnemang",
+    price: "3 490",
+    period: "kr/månad",
+    description: "För växande företag med 15–40 personer",
     features: [
       "4 leveranser per månad",
       "Utvalda sortiment",
@@ -28,7 +30,8 @@ const plans = [
     featured: true,
   },
   {
-    name: "Företagsavtal",
+    name: "Avtal",
+    subtitle: "Företagsanpassat",
     price: "Offert",
     period: "",
     description: "För stora kontor, event och kedjor",
@@ -44,71 +47,91 @@ const plans = [
 
 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>
+    <section id="plans" className="py-24 px-6 bg-background">
+      <div className="max-w-5xl mx-auto">
+        {/* Section header */}
+        <div className="text-center mb-16">
+          <div className="divider-ornament mb-6">
+            <span className="ornament">✦</span>
+          </div>
+          <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">
           {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"
+              className={`relative bg-card p-8 card-classic rounded-sm ${
+                plan.featured ? "border-2 border-primary" : ""
               }`}
             >
               {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
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+                  <span className="bg-primary text-primary-foreground px-4 py-1 text-sm font-semibold rounded-sm">
+                    Rekommenderad
                   </span>
                 </div>
               )}
 
-              <div className="mb-6">
-                <h3 className="font-display text-2xl font-bold mb-2">
+              {/* Plan header */}
+              <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}
                 </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>
+              {/* 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) => (
-                  <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 key={i} className="flex items-start gap-3">
+                    <Check className="w-4 h-4 text-primary mt-1 flex-shrink-0" />
+                    <span className="text-foreground/80 text-sm">{feature}</span>
                   </li>
                 ))}
               </ul>
 
+              {/* CTA Button */}
               <a
                 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
-                    ? "btn-primary"
-                    : "bg-secondary hover:bg-secondary/80 text-foreground border border-border"
+                    ? "btn-classic"
+                    : "btn-outline-classic"
                 }`}
               >
-                {plan.price === "Offert" ? "Kontakta oss" : "Starta abonnemang"}
+                {plan.price === "Offert" ? "Begär offert" : "Välj abonnemang"}
               </a>
             </div>
           ))}
         </div>
+
+        {/* Bottom ornament */}
+        <div className="text-center mt-16 text-primary/40 font-display text-2xl">
+          ❦
+        </div>
       </div>
     </section>
   );

src/index.css

@@ -2,55 +2,63 @@
 @tailwind components;
 @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 {
   :root {
-    --background: 0 0% 4%;
-    --foreground: 0 0% 98%;
+    --background: 38 25% 96%;
+    --foreground: 25 30% 12%;
 
-    --card: 0 0% 8%;
-    --card-foreground: 0 0% 98%;
+    --card: 40 30% 94%;
+    --card-foreground: 25 30% 12%;
 
-    --popover: 0 0% 8%;
-    --popover-foreground: 0 0% 98%;
+    --popover: 40 30% 94%;
+    --popover-foreground: 25 30% 12%;
 
-    --primary: 24 95% 53%;
-    --primary-foreground: 0 0% 100%;
+    --primary: 25 65% 35%;
+    --primary-foreground: 40 30% 96%;
 
-    --secondary: 0 0% 12%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary: 35 20% 88%;
+    --secondary-foreground: 25 30% 18%;
 
-    --muted: 0 0% 15%;
-    --muted-foreground: 0 0% 60%;
+    --muted: 35 15% 85%;
+    --muted-foreground: 25 15% 45%;
 
-    --accent: 30 100% 50%;
-    --accent-foreground: 0 0% 100%;
+    --accent: 18 70% 45%;
+    --accent-foreground: 40 30% 96%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 0 0% 18%;
-    --input: 0 0% 18%;
-    --ring: 24 95% 53%;
+    --border: 30 20% 80%;
+    --input: 30 20% 80%;
+    --ring: 25 65% 35%;
 
-    --radius: 0.75rem;
+    --radius: 0.25rem;
 
     /* 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);
+    --gradient-warm: linear-gradient(180deg, hsl(40 30% 94%) 0%, hsl(35 25% 90%) 100%);
+    --shadow-classic: 0 4px 20px -4px hsl(25 30% 12% / 0.15);
+    --shadow-card: 0 2px 8px hsl(25 30% 12% / 0.08);
 
-    --font-display: 'Playfair Display', serif;
-    --font-body: 'Inter', sans-serif;
+    --font-display: 'Cormorant Garamond', serif;
+    --font-body: 'Crimson Text', serif;
   }
 
   .dark {
-    --background: 0 0% 4%;
-    --foreground: 0 0% 98%;
+    --background: 25 20% 8%;
+    --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 {
   .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 {
+  .text-accent-warm {
+    color: hsl(var(--accent));
+  }
+
+  .card-classic {
     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 {
-    box-shadow: var(--shadow-glow);
-    transform: translateY(-8px);
+  .card-classic:hover {
+    box-shadow: var(--shadow-classic);
+    transform: translateY(-4px);
   }
 
-  .btn-primary {
-    background: var(--gradient-warm);
-    @apply text-primary-foreground font-semibold rounded-xl transition-all duration-300;
+  .btn-classic {
+    @apply bg-primary text-primary-foreground font-semibold transition-all duration-300;
+    border: 2px solid hsl(var(--primary));
   }
 
-  .btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 40px -10px hsl(24 95% 53% / 0.5);
+  .btn-classic:hover {
+    @apply bg-transparent;
+    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 {
-  .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;
   }
@@ -123,11 +150,15 @@
   @keyframes fadeUp {
     from {
       opacity: 0;
-      transform: translateY(30px);
+      transform: translateY(20px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
+
+  .text-balance {
+    text-wrap: balance;
+  }
 }