Changes

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