Changes

src/components/PlansSection.tsx

@@ -2,44 +2,50 @@ import { Check } from "lucide-react";
 
 const plans = [
   {
-    name: "Bas",
+    name: "Starter",
-    subtitle: "Kontorsabonnemang",
+    subtitle: "Abonnemang",
-    price: "1 990",
+    kgPerWeek: "3 kg",
-    period: "kr/månad",
+    priceWeekExclVat: "1 350",
-    description: "Perfekt för mindre kontor med upp till 15 personer",
+    priceWeekInclVat: "1 687,50",
+    priceMonthExclVat: "5 400",
+    priceMonthInclVat: "6 750",
     features: [
-      "2 leveranser per månad",
+      "3 kg kakor per vecka",
-      "Premium konditorikakor",
+      "Veckoleverans",
-      "Fast leveransdag",
       "Företagsfaktura",
+      "Flexibelt upplägg",
     ],
     featured: false,
   },
   {
-    name: "Pro",
+    name: "Standard",
-    subtitle: "Kontorsabonnemang",
+    subtitle: "Abonnemang",
-    price: "3 490",
+    kgPerWeek: "5 kg",
-    period: "kr/månad",
+    priceWeekExclVat: "2 250",
-    description: "För växande företag med 15–40 personer",
+    priceWeekInclVat: "2 812,50",
+    priceMonthExclVat: "9 000",
+    priceMonthInclVat: "11 250",
     features: [
-      "4 leveranser per månad",
+      "5 kg kakor per vecka",
-      "Utvalda sortiment",
+      "Veckoleverans",
       "Prioriterad hantering",
-      "Fakturabetalning",
+      "Företagsfaktura",
     ],
     featured: true,
   },
   {
-    name: "Avtal",
+    name: "Pro / Office Plus",
-    subtitle: "Företagsanpassat",
+    subtitle: "Abonnemang",
-    price: "Offert",
+    kgPerWeek: "10 kg",
-    period: "",
+    priceWeekExclVat: "4 500",
-    description: "För stora kontor, event och kedjor",
+    priceWeekInclVat: "5 625",
+    priceMonthExclVat: "18 000",
+    priceMonthInclVat: "22 500",
     features: [
-      "Anpassad volym",
+      "10 kg kakor per vecka",
-      "Möjlighet till branding",
+      "Veckoleverans",
-      "Avtalspriser",
       "Personlig kontakt",
+      "Anpassade sortiment",
     ],
     featured: false,
   },
@@ -89,20 +95,25 @@ const PlansSection = () => {
                 </h3>
               </div>
 
-              {/* Price */}
+              {/* Price info */}
-              <div className="text-center mb-6">
+              <div className="text-center mb-6 space-y-2">
-                <span className="font-display text-4xl font-bold text-primary">
+                <div className="text-muted-foreground text-sm">
-                  {plan.price}
+                  {plan.kgPerWeek}/vecka
-                </span>
+                </div>
-                {plan.period && (
+                <div>
-                  <span className="text-muted-foreground ml-1">{plan.period}</span>
+                  <span className="font-display text-3xl font-bold text-primary">
-                )}
+                    {plan.priceMonthInclVat}
+                  </span>
+                  <span className="text-muted-foreground ml-1">kr/mån</span>
+                </div>
+                <div className="text-muted-foreground text-xs">
+                  ({plan.priceMonthExclVat} kr exkl. moms)
+                </div>
+                <div className="text-muted-foreground text-xs border-t border-border pt-2 mt-2">
+                  Veckopris: {plan.priceWeekInclVat} kr inkl. moms
+                </div>
               </div>
 
-              <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) => (
@@ -122,7 +133,7 @@ const PlansSection = () => {
                     : "btn-outline-classic"
                 }`}
               >
-                {plan.price === "Offert" ? "Begär offert" : "Välj abonnemang"}
+                Välj abonnemang
               </a>
             </div>
           ))}