Improve my landing page

components/footer.js

@@ -1,4 +1,116 @@
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-   <link rel="stylesheet" href="style.css">
-   <script src="components/navbar.js"></script>
-   <script src="components/footer.js"></script>
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          background: var(--dark);
+          color: var(--light);
+          padding: 2rem 0;
+        }
+        .footer-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 20px;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 2rem;
+        }
+        .footer-logo {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+        }
+        .footer-logo-img {
+          width: 32px;
+          height: 32px;
+          border-radius: 8px;
+          background: linear-gradient(135deg, var(--primary), var(--secondary));
+        }
+        .footer-logo-text {
+          font-weight: 600;
+        }
+        .footer-about {
+          max-width: 300px;
+        }
+        .footer-heading {
+          font-weight: 600;
+          margin-bottom: 1rem;
+          color: white;
+        }
+        .footer-links {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+        }
+        .footer-link {
+          color: var(--gray);
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-link:hover {
+          color: var(--light);
+        }
+        .footer-bottom {
+          margin-top: 2rem;
+          padding-top: 1rem;
+          border-top: 1px solid rgba(255,255,255,0.1);
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          gap: 1rem;
+        }
+      </style>
+      
+      <div class="footer-container">
+        <div class="footer-about">
+          <div class="footer-logo">
+            <div class="footer-logo-img"></div>
+            <span class="footer-logo-text">SafeSwitch</span>
+          </div>
+          <p>Tryggare bilaffärer för privatpersoner och företag.</p>
+        </div>
+        
+        <div>
+          <h3 class="footer-heading">Produkt</h3>
+          <div class="footer-links">
+            <a href="#privat" class="footer-link">För privatpersoner</a>
+            <a href="#foretag" class="footer-link">För företag</a>
+            <a href="#hur-funkar" class="footer-link">Hur det funkar</a>
+            <a href="#bokademo" class="footer-link">Boka demo</a>
+          </div>
+        </div>
+        
+        <div>
+          <h3 class="footer-heading">Företag</h3>
+          <div class="footer-links">
+            <a href="#om-oss" class="footer-link">Om oss</a>
+            <a href="#" class="footer-link">Karriär</a>
+            <a href="#" class="footer-link">Nyheter</a>
+            <a href="#" class="footer-link">Kontakt</a>
+          </div>
+        </div>
+        
+        <div>
+          <h3 class="footer-heading">Juridik</h3>
+          <div class="footer-links">
+            <a href="#" class="footer-link">Integritetspolicy</a>
+            <a href="#" class="footer-link">Användarvillkor</a>
+            <a href="#" class="footer-link">Cookies</a>
+          </div>
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <span>© ${new Date().getFullYear()} SafeSwitch AB. Alla rättigheter reserverade.</span>
+        <div class="footer-links" style="flex-direction:row;gap:1rem;">
+          <a href="#" class="footer-link">Svenska</a>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/testimonials.js

@@ -0,0 +1,100 @@
+class TestimonialsSlider extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          padding: 2rem 0;
+          background: var(--light);
+        }
+        .testimonials-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 20px;
+        }
+        .testimonials-title {
+          text-align: center;
+          margin-bottom: 2rem;
+          color: var(--dark);
+        }
+        .testimonials-slider {
+          display: flex;
+          overflow-x: auto;
+          scroll-snap-type: x mandatory;
+          gap: 1rem;
+          padding: 1rem 0;
+          -webkit-overflow-scrolling: touch;
+        }
+        .testimonial-card {
+          min-width: 300px;
+          scroll-snap-align: start;
+          background: white;
+          border-radius: 12px;
+          padding: 1.5rem;
+          box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+        }
+        .testimonial-content {
+          font-style: italic;
+          margin-bottom: 1rem;
+          color: var(--dark);
+        }
+        .testimonial-author {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .author-avatar {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          object-fit: cover;
+        }
+        .author-info {
+          display: flex;
+          flex-direction: column;
+        }
+        .author-name {
+          font-weight: 600;
+          color: var(--dark);
+        }
+        .author-role {
+          font-size: 0.8rem;
+          color: var(--gray);
+        }
+      </style>
+      
+      <div class="testimonials-container">
+        <h2 class="testimonials-title">Vad våra kunder säger</h2>
+        <div class="testimonials-slider">
+          <div class="testimonial-card">
+            <p class="testimonial-content">
+              "SafeSwitch har revolutionerat vår bilhandel. Inga mer oro för bedrägerier eller försenade betalningar."
+            </p>
+            <div class="testimonial-author">
+              <img src="http://static.photos/people/120x120/1" alt="Anders" class="author-avatar">
+              <div class="author-info">
+                <span class="author-name">Anders Lundberg</span>
+                <span class="author-role">VD, Lundbergs Bil</span>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial-card">
+            <p class="testimonial-content">
+              "Som privatperson känner jag mig trygg med SafeSwitch. Allt är tydligt och lagligt."
+            </p>
+            <div class="testimonial-author">
+              <img src="http://static.photos/people/120x120/2" alt="Maria" class="author-avatar">
+              <div class="author-info">
+                <span class="author-name">Maria Svensson</span>
+                <span class="author-role">Privatkund</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('testimonials-slider', TestimonialsSlider);

index.html

@@ -7,10 +7,17 @@
   
   <!-- Font -->
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  
   <style>
     :root {
-      --bg: #050816;
+      --primary: #4c32ff;
+      --primary-dark: #3a1eff;
+      --primary-light: #6c5ce7;
+      --secondary: #34ace0;
+      --dark: #050816;
+      --light: #f5f5f7;
+      --gray: #a0a3b1;
+      --success: #2ecc71;
+--bg: #050816;
       --bg-alt: #070b1d;
       --card: #0d1024;
       --accent: #6c5ce7;
@@ -844,44 +851,9 @@
 <div class="page">
   <div class="bg-blob bg-blob--1"></div>
   <div class="bg-blob bg-blob--2"></div>
-
   <!-- HEADER -->
-  <header class="header">
-    <div class="container">
-      <div class="header-inner" id="headerInner">
-        <a href="#" class="logo-wrap">
-          <div class="logo-mark"><span></span></div>
-          <div class="logo-text">
-            SafeSwitch
-            <small>Tryggare bilaffärer</small>
-          </div>
-        </a>
-
-        <nav class="nav">
-          <div class="nav-links" id="navLinks">
-            <a href="#privat" class="nav-link">För privatpersoner</a>
-            <a href="#foretag" class="nav-link">För företag</a>
-            <a href="#hur-funkar" class="nav-link">Hur det funkar</a>
-            <a href="#om-oss" class="nav-link">Om oss</a>
-          </div>
-
-          <div class="nav-actions">
-            <button class="btn btn-ghost" onclick="document.getElementById('kontakt').scrollIntoView({behavior:'smooth'})">
-              Kontakta oss
-            </button>
-            <button class="btn btn-primary" onclick="document.getElementById('bokademo').scrollIntoView({behavior:'smooth'})">
-              Boka demo
-            </button>
-            <button class="nav-toggle" aria-label="Öppna meny" id="navToggle">
-              <span></span>
-            </button>
-          </div>
-        </nav>
-      </div>
-    </div>
-  </header>
-
-  <!-- HERO -->
+  <custom-navbar></custom-navbar>
+<!-- HERO -->
   <main>
     <section class="hero">
       <div class="container hero-grid">
@@ -890,23 +862,38 @@
             <span class="eyebrow-dot"></span>
             <span>Digital trygghet i bilaffären</span>
           </div>
-
           <h1 class="hero-title">
-            Vi gör bilaffärer <span class="highlight">tryggare, smartare och smidigare.</span>
+            Revolutionerande säkerhet för <span class="highlight">bilaffärer</span>
           </h1>
-
           <p class="hero-subtitle">
-            SafeSwitch är mellansteget som skyddar både köpare och säljare i bilaffären –
-            med digital identitetskontroll, betalningsflöde och avtal på samma plats.
+            Säker, enkel och laglig bilhandel mellan privatpersoner och företag. 
+            Vår plattform eliminerar risker med automatiserade kontrakt, säkra betalningar 
+            och verifierade identiteter.
           </p>
-
           <div class="hero-badges">
-            <div class="badge"><strong>BankID</strong> verifiering</div>
-            <div class="badge"><strong>Spårbara</strong> betalningar</div>
-            <div class="badge"><strong>Standardiserade</strong> avtal</div>
+            <div class="badge">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+              </svg>
+              <strong>BankID</strong> verifiering
+            </div>
+            <div class="badge">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+              </svg>
+              <strong>Spårbara</strong> betalningar
+            </div>
+            <div class="badge">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+              </svg>
+              <strong>Standardiserade</strong> avtal
+            </div>
           </div>
-
-          <div class="hero-actions" id="bokademo">
+<div class="hero-actions" id="bokademo">
             <button class="btn btn-primary">
               Boka demo
             </button>
@@ -1116,18 +1103,11 @@
       </div>
     </section>
   </main>
+  <!-- TESTIMONIALS -->
+  <testimonials-slider></testimonials-slider>
 
   <!-- FOOTER -->
-  <footer class="footer">
-    <div class="container footer-inner">
-      <div>© <span id="year"></span> SafeSwitch. Alla rättigheter reserverade.</div>
-      <div class="footer-links">
-        <a href="#">Integritet</a>
-        <a href="#">Cookies</a>
-        <a href="#">Kontakt</a>
-      </div>
-    </div>
-  </footer>
+  <custom-footer></custom-footer>
 </div>
 
 <script>
@@ -1143,5 +1123,8 @@
     headerInner.classList.toggle('nav-menu-open');
   });
 </script>
+  <script src="components/navbar.js"></script>
+  <script src="components/footer.js"></script>
+  <script src="components/testimonials.js"></script>
 </body>
 </html>