Spaces:

Alexander1337
/

fitflow-coaching

Running

App Files Files Community

Alexander1337 commited on Feb 7

Commit

5fd8736

verified ·

1 Parent(s): a35b94d

🐳 07/02 - 23:56 - help me to do complete online coachning page

Browse files

Files changed (2) hide show

components/navbar.js +2 -0
online-coaching.html +603 -0

components/navbar.js CHANGED Viewed

@@ -87,6 +87,7 @@ class CustomNavbar extends HTMLElement {
         <nav class="nav-links">
           <a href="/">Hem</a>
           <a href="profil.html">Om mig</a>
           <a href="#services">Tjänster</a>
           <a href="#pricing">Priser</a>
           <a href="padel.html">Padel</a>
@@ -102,6 +103,7 @@ class CustomNavbar extends HTMLElement {
         <div class="mobile-menu">
           <a href="/">Hem</a>
           <a href="profil.html">Om mig</a>
           <a href="#services">Tjänster</a>
           <a href="#pricing">Priser</a>
           <a href="padel.html">Padel</a>

         <nav class="nav-links">
           <a href="/">Hem</a>
           <a href="profil.html">Om mig</a>
+          <a href="online-coaching.html">Online Coaching</a>
           <a href="#services">Tjänster</a>
           <a href="#pricing">Priser</a>
           <a href="padel.html">Padel</a>
         <div class="mobile-menu">
           <a href="/">Hem</a>
           <a href="profil.html">Om mig</a>
+          <a href="online-coaching.html">Online Coaching</a>
           <a href="#services">Tjänster</a>
           <a href="#pricing">Priser</a>
           <a href="padel.html">Padel</a>

online-coaching.html ADDED Viewed

	@@ -0,0 +1,603 @@

+<!DOCTYPE html>
+<html lang="sv">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Online Coaching | Alexander Adolfsson Coaching</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    html { scroll-behavior: smooth; }
+    .gradient-text {
+      background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .glass-card {
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .feature-icon {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    }
+    .pulse-ring {
+      animation: pulse-ring 2s infinite;
+    }
+    @keyframes pulse-ring {
+      0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+      70% { box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+    }
+    .hover-lift {
+      transition: all 0.3s ease;
+    }
+    .hover-lift:hover {
+      transform: translateY(-10px);
+    }
+    .checkmark {
+      color: #10b981;
+    }
+    .testimonial-card {
+      background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+    }
+    .process-line {
+      background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
+    }
+    @media (max-width: 768px) {
+      .hero-title {
+        font-size: 2.5rem;
+      }
+    }
+  </style>
+</head>
+<body class="bg-gray-900 text-white font-sans">
+  <custom-navbar></custom-navbar>
+  <!-- Hero Section -->
+  <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+    <!-- Background Image -->
+    <div class="absolute inset-0">
+      <img src="http://static.photos/fitness/1200x630/42" alt="Online Coaching" class="w-full h-full object-cover opacity-40">
+      <div class="absolute inset-0 bg-gradient-to-b from-gray-900/80 via-gray-900/90 to-gray-900"></div>
+    </div>
+    <div class="relative z-10 text-center px-4 max-w-5xl mx-auto">
+      <div class="inline-flex items-center gap-2 bg-emerald-500/20 border border-emerald-500/30 rounded-full px-4 py-2 mb-6">
+        <span class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></span>
+        <span class="text-emerald-400 text-sm font-medium">Tillgänglig över hela världen</span>
+      </div>
+      <h1 class="hero-title text-5xl md:text-7xl font-bold mb-6 leading-tight">
+        Online Coaching<br>
+        <span class="gradient-text">Förändra ditt liv</span>
+      </h1>
+      <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
+        Personlig träning och kostrådgivning – oavsett var du befinner dig.
+        Få expertguidning, struktur och motivation direkt i din telefon.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <a href="#pricing" class="pulse-ring bg-emerald-500 text-gray-900 font-bold py-4 px-8 rounded-full text-lg hover:bg-emerald-400 transition-all">
+          Välj ditt paket
+        </a>
+        <a href="#how-it-works" class="border-2 border-white/30 text-white font-bold py-4 px-8 rounded-full text-lg hover:bg-white/10 transition-all">
+          Så fungerar det
+        </a>
+      </div>
+      <!-- Stats -->
+      <div class="grid grid-cols-3 gap-8 mt-16 max-w-2xl mx-auto">
+        <div>
+          <div class="text-3xl md:text-4xl font-bold text-emerald-400">500+</div>
+          <div class="text-gray-400 text-sm">Nöjda klienter</div>
+        </div>
+        <div>
+          <div class="text-3xl md:text-4xl font-bold text-emerald-400">15+</div>
+          <div class="text-gray-400 text-sm">Års erfarenhet</div>
+        </div>
+        <div>
+          <div class="text-3xl md:text-4xl font-bold text-emerald-400">100%</div>
+          <div class="text-gray-400 text-sm">Personligt anpassat</div>
+        </div>
+      </div>
+    </div>
+    <!-- Scroll indicator -->
+    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+      <i class="fas fa-chevron-down text-2xl text-emerald-400"></i>
+    </div>
+  </section>
+  <!-- Why Online Coaching -->
+  <section class="py-20 px-4">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-4xl md:text-5xl font-bold mb-4">Varför välja <span class="gradient-text">online coaching?</span></h2>
+        <p class="text-gray-400 text-xl max-w-2xl mx-auto">
+          Flexibilitet, kontinuitet och resultat – utan kompromisser
+        </p>
+      </div>
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <div class="glass-card rounded-2xl p-6 hover-lift">
+          <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4">
+            <i class="fas fa-clock text-2xl text-white"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">Träna när du vill</h3>
+          <p class="text-gray-400">Inga tidsbegränsningar eller resor till gymmet. Träna på dina villkor, när det passar dig.</p>
+        </div>
+        <div class="glass-card rounded-2xl p-6 hover-lift">
+          <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4">
+            <i class="fas fa-globe text-2xl text-white"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">Var som helst</h3>
+          <p class="text-gray-400">Oavsett om du är hemma, på resande fot eller på semester – din coachning följer med dig.</p>
+        </div>
+        <div class="glass-card rounded-2xl p-6 hover-lift">
+          <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4">
+            <i class="fas fa-comments text-2xl text-white"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">Direktkontakt</h3>
+          <p class="text-gray-400">Ställ frågor, få feedback och justeringar i realtid via app och meddelanden.</p>
+        </div>
+        <div class="glass-card rounded-2xl p-6 hover-lift">
+          <div class="feature-icon w-14 h-14 rounded-xl flex items-center justify-center mb-4">
+            <i class="fas fa-chart-line text-2xl text-white"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-2">Följ din utveckling</h3>
+          <p class="text-gray-400">Detaljerad statistik, progress tracking och tydliga målsättningar hela vägen.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- How It Works -->
+  <section id="how-it-works" class="py-20 px-4 bg-gray-800/50">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-4xl md:text-5xl font-bold mb-4">Så här <span class="gradient-text">fungerar det</span></h2>
+        <p class="text-gray-400 text-xl">Fyra enkla steg till din nya livsstil</p>
+      </div>
+      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 relative">
+        <!-- Connecting line (desktop) -->
+        <div class="hidden lg:block absolute top-24 left-0 right-0 h-1 process-line rounded-full mx-12"></div>
+        <div class="relative text-center">
+          <div class="w-16 h-16 bg-emerald-500 rounded-full flex items-center justify-center text-2xl font-bold text-gray-900 mx-auto mb-6 relative z-10">
+            1
+          </div>
+          <h3 class="text-xl font-bold mb-3">Gratis konsultation</h3>
+          <p class="text-gray-400">Vi börjar med ett samtal där vi går igenom dina mål, förutsättningar och önskemål.</p>
+        </div>
+        <div class="relative text-center">
+          <div class="w-16 h-16 bg-emerald-500 rounded-full flex items-center justify-center text-2xl font-bold text-gray-900 mx-auto mb-6 relative z-10">
+            2
+          </div>
+          <h3 class="text-xl font-bold mb-3">Skräddarsytt program</h3>
+          <p class="text-gray-400">Jag skapar ett personligt tränings- och kostprogram baserat på dina unika behov.</p>
+        </div>
+        <div class="relative text-center">
+          <div class="w-16 h-16 bg-emerald-500 rounded-full flex items-center justify-center text-2xl font-bold text-gray-900 mx-auto mb-6 relative z-10">
+            3
+          </div>
+          <h3 class="text-xl font-bold mb-3">Veckovis uppföljning</h3>
+          <p class="text-gray-400">Regelbunden kontakt för att justera, motivera och säkerställa att du når dina mål.</p>
+        </div>
+        <div class="relative text-center">
+          <div class="w-16 h-16 bg-emerald-500 rounded-full flex items-center justify-center text-2xl font-bold text-gray-900 mx-auto mb-6 relative z-10">
+            4
+          </div>
+          <h3 class="text-xl font-bold mb-3">Resultat & fortsättning</h3>
+          <p class="text-gray-400">Fira dina framsteg och sätt nya mål. Jag finns med dig hela resan.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- What's Included -->
+  <section class="py-20 px-4">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-4xl md:text-5xl font-bold mb-4">Detta ingår i <span class="gradient-text">alla paket</span></h2>
+      </div>
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="flex items-start gap-4 p-4">
+          <div class="checkmark text-2xl mt-1"><i class="fas fa-check-circle"></i></div>
+          <div>
+            <h4 class="font-bold text-lg">Personligt träningsprogram</h4>
+            <p class="text-gray-400">Anpassat efter dina mål, utrustning och erfarenhet</p>
+          </div>
+        </div>
+        <div class="flex items-start gap-4 p-4">
+          <div class="checkmark text-2xl mt-1"><i class="fas fa-check-circle"></i></div>
+          <div>
+            <h4 class="font-bold text-lg">Kostrådgivning</h4>
+            <p class="text-gray-400">Realistiska kostplaner utan extrema dieter</p>
+          </div>
+        </div>
+        <div class="flex items-start gap-4 p-4">
+          <div class="checkmark text-2xl mt-1"><i class="fas fa-check-circle"></i></div>
+          <div>
+            <h4 class="font-bold text-lg">Videoanalys</h4>
+            <p class="text-gray-400">Skicka videos för feedback på din teknik</p>
+          </div>
+        </div>
+        <div class="flex items-start gap-4 p-4">
+          <div class="checkmark text-2xl mt-1"><i class="fas fa-check-circle"></i></div>
+          <div>
+            <h4 class="font-bold text-lg">24/7 Meddelandesupport</h4>
+            <p class="text-gray-400">Svar inom 24 timmar på alla dina frågor</p>
+          </div>
+        </div>
+        <div class="flex items-start gap-4 p-4">
+          <div class="checkmark text-2xl mt-1"><i class="fas fa-check-circle"></i></div>
+          <div>
+            <h4 class="font-bold text-lg">Progress tracking</h4>
+            <p class="text-gray-400">Följ din utveckling med detaljerad statistik</p>
+          </div>
+        </div>
+        <div class="flex items-start gap-4 p-4">
+          <div class="checkmark text-2xl mt-1"><i class="fas fa-check-circle"></i></div>
+          <div>
+            <h4 class="font-bold text-lg">App-baserad träning</h4>
+            <p class="text-gray-400">Allt i en smidig app med övningar och instruktioner</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Pricing -->
+  <section id="pricing" class="py-20 px-4 bg-gray-800/50">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-4xl md:text-5xl font-bold mb-4">Välj ditt <span class="gradient-text">paket</span></h2>
+        <p class="text-gray-400 text-xl">Investera i dig själv – välj det paket som passar dig bäst</p>
+      </div>
+      <div class="grid md:grid-cols-3 gap-8">
+        <!-- Basic -->
+        <div class="glass-card rounded-2xl p-8 hover-lift">
+          <h3 class="text-2xl font-bold mb-2">Online Bas</h3>
+          <p class="text-gray-400 mb-6">Perfekt för dig som vill komma igång</p>
+          <div class="mb-6">
+            <span class="text-5xl font-bold">1 495</span>
+            <span class="text-gray-400"> kr/mån</span>
+          </div>
+          <ul class="space-y-4 mb-8">
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Personligt träningsprogram</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Kostrådgivning</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Veckovis uppföljning</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>App-tillgång</span>
+            </li>
+            <li class="flex items-center gap-3 text-gray-500">
+              <i class="fas fa-times"></i>
+              <span>Videoanalys</span>
+            </li>
+            <li class="flex items-center gap-3 text-gray-500">
+              <i class="fas fa-times"></i>
+              <span>Samtal varannan vecka</span>
+            </li>
+          </ul>
+          <a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" target="_blank" class="block w-full text-center border-2 border-emerald-500 text-emerald-400 font-bold py-3 rounded-full hover:bg-emerald-500 hover:text-gray-900 transition-all">
+            Välj Bas
+          </a>
+        </div>
+        <!-- Standard (Popular) -->
+        <div class="glass-card rounded-2xl p-8 hover-lift relative border-2 border-emerald-500">
+          <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
+            <span class="bg-emerald-500 text-gray-900 font-bold px-4 py-1 rounded-full text-sm">Mest populär</span>
+          </div>
+          <h3 class="text-2xl font-bold mb-2">Online Standard</h3>
+          <p class="text-gray-400 mb-6">För dig som vill ha extra stöd</p>
+          <div class="mb-6">
+            <span class="text-5xl font-bold text-emerald-400">2 495</span>
+            <span class="text-gray-400"> kr/mån</span>
+          </div>
+          <ul class="space-y-4 mb-8">
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Allt i Bas-paketet</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Videoanalys av övningar</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Samtal varannan vecka</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Direktkontakt & justeringar</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Prioriterad support</span>
+            </li>
+            <li class="flex items-center gap-3 text-gray-500">
+              <i class="fas fa-times"></i>
+              <span>Veckosamtal</span>
+            </li>
+          </ul>
+          <a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" target="_blank" class="block w-full text-center bg-emerald-500 text-gray-900 font-bold py-3 rounded-full hover:bg-emerald-400 transition-all pulse-ring">
+            Välj Standard
+          </a>
+        </div>
+        <!-- Premium -->
+        <div class="glass-card rounded-2xl p-8 hover-lift">
+          <h3 class="text-2xl font-bold mb-2">Online Premium</h3>
+          <p class="text-gray-400 mb-6">Maximalt stöd för snabbaste resultaten</p>
+          <div class="mb-6">
+            <span class="text-5xl font-bold">3 995</span>
+            <span class="text-gray-400"> kr/mån</span>
+          </div>
+          <ul class="space-y-4 mb-8">
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Allt i Standard-paketet</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Veckosamtal (30 min)</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Obegränsad videoanalys</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Nutritionist-samråd</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>24/7 WhatsApp-support</span>
+            </li>
+            <li class="flex items-center gap-3">
+              <i class="fas fa-check text-emerald-400"></i>
+              <span>Exklusivt innehåll</span>
+            </li>
+          </ul>
+          <a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" target="_blank" class="block w-full text-center border-2 border-emerald-500 text-emerald-400 font-bold py-3 rounded-full hover:bg-emerald-500 hover:text-gray-900 transition-all">
+            Välj Premium
+          </a>
+        </div>
+      </div>
+      <!-- 3-month package -->
+      <div class="mt-12 glass-card rounded-2xl p-8 max-w-2xl mx-auto text-center">
+        <h3 class="text-2xl font-bold mb-4">💎 3-månaders transformationspaket</h3>
+        <p class="text-gray-400 mb-6">Spara 20% genom att binda dig i 3 månader. Inkluderar allt i Premium plus en gratis startkonsultation på plats (Borås).</p>
+        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+          <div>
+            <span class="text-4xl font-bold text-emerald-400">9 590 kr</span>
+            <span class="text-gray-500 line-through ml-2">11 985 kr</span>
+          </div>
+          <a href="https://buy.stripe.com/3cI5kF0fk5ew9Ry7Bx7EQ03" target="_blank" class="bg-emerald-500 text-gray-900 font-bold py-3 px-8 rounded-full hover:bg-emerald-400 transition-all">
+            Boka nu
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Testimonials -->
+  <section class="py-20 px-4">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-4xl md:text-5xl font-bold mb-4">Det här säger <span class="gradient-text">mina klienter</span></h2>
+      </div>
+      <div class="grid md:grid-cols-3 gap-8">
+        <div class="testimonial-card rounded-2xl p-6">
+          <div class="flex text-emerald-400 mb-4">
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+          </div>
+          <p class="text-gray-300 mb-6">"Jag har gått ner 12 kg på 4 månader med Alexanders online coaching. Flexibiliteten passar perfekt för mitt hektiska liv som småbarnsförälder."</p>
+          <div class="flex items-center gap-4">
+            <img src="http://static.photos/people/200x200/101" alt="Maria" class="w-12 h-12 rounded-full object-cover">
+            <div>
+              <div class="font-bold">Maria L.</div>
+              <div class="text-gray-500 text-sm">Online Standard</div>
+            </div>
+          </div>
+        </div>
+        <div class="testimonial-card rounded-2xl p-6">
+          <div class="flex text-emerald-400 mb-4">
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+          </div>
+          <p class="text-gray-300 mb-6">"Som person som reser mycket i jobbet är online coaching perfekt. Alexander anpassar alltid programmet efter mitt schema och hotellgym."</p>
+          <div class="flex items-center gap-4">
+            <img src="http://static.photos/people/200x200/102" alt="Anders" class="w-12 h-12 rounded-full object-cover">
+            <div>
+              <div class="font-bold">Anders K.</div>
+              <div class="text-gray-500 text-sm">Online Premium</div>
+            </div>
+          </div>
+        </div>
+        <div class="testimonial-card rounded-2xl p-6">
+          <div class="flex text-emerald-400 mb-4">
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+            <i class="fas fa-star"></i>
+          </div>
+          <p class="text-gray-300 mb-6">"Bästa investeringen jag gjort! Har byggt muskler jag aldrig trodde var möjliga. Videoanalysen hjälpte mig korrigera tekniken direkt."</p>
+          <div class="flex items-center gap-4">
+            <img src="http://static.photos/people/200x200/103" alt="Lisa" class="w-12 h-12 rounded-full object-cover">
+            <div>
+              <div class="font-bold">Lisa S.</div>
+              <div class="text-gray-500 text-sm">Online Standard</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- FAQ -->
+  <section class="py-20 px-4 bg-gray-800/50">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-4xl md:text-5xl font-bold mb-4">Vanliga <span class="gradient-text">frågor</span></h2>
+      </div>
+      <div class="space-y-4">
+        <details class="glass-card rounded-xl overflow-hidden group">
+          <summary class="p-6 cursor-pointer font-bold flex justify-between items-center">
+            Behöver jag tillgång till gym?
+            <i class="fas fa-chevron-down transform group-open:rotate-180 transition-transform"></i>
+          </summary>
+          <div class="px-6 pb-6 text-gray-400">
+            Nej! Jag anpassar programmet efter din utrustning. Oavsett om du har tillgång till ett fullt utrustat gym, hemmagym eller bara kroppsviktsträning – jag skapar ett program som fungerar för dig.
+          </div>
+        </details>
+        <details class="glass-card rounded-xl overflow-hidden group">
+          <summary class="p-6 cursor-pointer font-bold flex justify-between items-center">
+            Hur ofta kommunicerar vi?
+            <i class="fas fa-chevron-down transform group-open:rotate-180 transition-transform"></i>
+          </summary>
+          <div class="px-6 pb-6 text-gray-400">
+            Det beror på ditt paket. Bas inkluderar veckovis uppföljning via meddelanden, Standard har samtal varannan vecka, och Premium har veckosamtal plus obegränsad meddelandekontakt.
+          </div>
+        </details>
+        <details class="glass-card rounded-xl overflow-hidden group">
+          <summary class="p-6 cursor-pointer font-bold flex justify-between items-center">
+            Kan jag pausa mitt medlemskap?
+            <i class="fas fa-chevron-down transform group-open:rotate-180 transition-transform"></i>
+          </summary>
+          <div class="px-6 pb-6 text-gray-400">
+            Ja, vid sjukdom eller semester kan vi pausa upp till 4 veckor per år. Meddela mig i förväg så justerar vi programmet.
+          </div>
+        </details>
+        <details class="glass-card rounded-xl overflow-hidden group">
+          <summary class="p-6 cursor-pointer font-bold flex justify-between items-center">
+            Vilken app använder vi?
+            <i class="fas fa-chevron-down transform group-open:rotate-180 transition-transform"></i>
+          </summary>
+          <div class="px-6 pb-6 text-gray-400">
+            Jag använder professionella plattformar som Trainerize eller TrueCoach där du får tillgång till ditt program, kan logga träning, se videos på övningar och kommunicera direkt med mig.
+          </div>
+        </details>
+        <details class="glass-card rounded-xl overflow-hidden group">
+          <summary class="p-6 cursor-pointer font-bold flex justify-between items-center">
+            Hur snabbt ser jag resultat?
+            <i class="fas fa-chevron-down transform group-open:rotate-180 transition-transform"></i>
+          </summary>
+          <div class="px-6 pb-6 text-gray-400">
+            De flesta ser märkbara förändringar inom 4-6 veckor med konsekvent träning och kosthållning. Viktigast är att skapa hållbara vanor som varar livet ut, inte snabba quick fixes.
+          </div>
+        </details>
+      </div>
+    </div>
+  </section>
+  <!-- CTA Section -->
+  <section class="py-20 px-4">
+    <div class="max-w-4xl mx-auto text-center">
+      <h2 class="text-4xl md:text-5xl font-bold mb-6">Redo att förändra ditt liv?</h2>
+      <p class="text-xl text-gray-400 mb-8">
+        Boka en gratis konsultation idag. Inga förpliktelser – bara en chans att se om vi är en match.
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <a href="https://calendly.com/alexander-pt-adolfsson/new-meeting" target="_blank" class="pulse-ring bg-emerald-500 text-gray-900 font-bold py-4 px-10 rounded-full text-lg hover:bg-emerald-400 transition-all inline-flex items-center justify-center gap-2">
+          <i class="fas fa-calendar-check"></i>
+          Boka gratis konsultation
+        </a>
+        <a href="kontakt.html" class="border-2 border-white/30 text-white font-bold py-4 px-10 rounded-full text-lg hover:bg-white/10 transition-all inline-flex items-center justify-center gap-2">
+          <i class="fas fa-envelope"></i>
+          Ställ en fråga
+        </a>
+      </div>
+      <p class="text-gray-500 mt-6 text-sm">
+        <i class="fas fa-shield-alt mr-2"></i>
+        100% nöjd-kund-garanti. Avbryt när du vill.
+      </p>
+    </div>
+  </section>
+  <custom-footer></custom-footer>
+  <script src="components/navbar.js"></script>
+  <script src="components/footer.js"></script>
+  <script src="script.js"></script>
+  <script>
+    // FAQ toggle animation
+    document.querySelectorAll('details').forEach(detail => {
+      detail.addEventListener('toggle', () => {
+        if (detail.open) {
+          detail.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+      });
+    });
+  </script>
+</body>
+</html>