Spaces:

Alexander1337
/

swedish-website-magic

Running

App Files Files Community

Alexander1337 commited on Feb 2

Commit

6a50caf

verified ·

1 Parent(s): d4a413d

<!DOCTYPE html>

Browse files

<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alexander Adolfsson Coaching</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
body { line-height: 1.6; color: #222; background: #f9f9f9; scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
h1,h2,h3,h4,h5 { font-weight: 700; }
.btn { background: #ff4d4f; color: #fff; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 600; transition: 0.3s; display: inline-block; }
.btn:hover { background: #e04344; }
header { background: url('https://res.cloudinary.com/dttivz1il/image/upload/v1770071762/pexels-photo-376464_br5ucq.jpg') center/cover no-repeat; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; position: relative; }
header::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); }
header div { position: relative; z-index: 1; }
header h1 { font-size: 3rem; margin-bottom: 1rem; }
header p { font-size: 1.25rem; margin-bottom: 2rem; }
section { padding: 80px 20px; max-width: 1200px; margin: auto; }
.section-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 2rem; position: relative; }
.section-title::after { content:""; display:block; width:60px; height:4px; background:#ff4d4f; margin:10px auto 0; border-radius:2px; }
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card { background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); text-align: center; transition: 0.3s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.card img { width: 100%; border-radius: 16px; margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
th, td { padding: 15px; text-align: center; border: 1px solid #ddd; }
th { background: #ff4d4f; color: #fff; font-weight: 600; }
footer { background: #222; color: #fff; text-align: center; padding: 40px 20px; }
footer a { color: #ff4d4f; }
.testimonial { background: #fff; padding: 20px; border-radius: 16px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.testimonial img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 1rem; }
.faq-item { background:#fff; padding:20px; border-radius:12px; margin-bottom:10px; box-shadow:0 5px 15px rgba(0,0,0,0.1); cursor:pointer; }
.faq-item p { display:none; margin-top:10px; }
.faq-item.active p { display:block; }
.sticky-btn { position:fixed; bottom:20px; right:20px; z-index:1000; }
.steps { display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); text-align:center; }
.step { background:#fff; padding:20px; border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,0.1); }
.step h4 { margin-bottom:10px; color:#ff4d4f; }
@media (max-width: 768px){ header h1{font-size:2.2rem;} header p{font-size:1rem;} }
</style>
</head>
<body>


<a href="https://calendly.com/alexander-pt-adolfsson/new-me" class="btn sticky-btn">Boka gratis konsultation</a>


<header>
<div>
<h1>Bli starkare. Må bättre. Ta nästa steg.</h1>
<p>Personlig träning & online coaching – med struktur, uppföljning och resultat i fokus.</p>
<a href="https://calendly.com/alexander-pt-adolfsson/new-me" class="btn">Boka gratis konsultation</a>
</div>
</header>


<section>
<h2 class="section-title">Dina mål</h2>
<div class="grid grid-3">
<div class="card">
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770072235/260c3f64-d8ed-477d-b62a-07a174991a39_qa4zui.jpg" alt="Viktminskning">
<h3>Gå ner i vikt</h3>
</div>
<div class="card">
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770072235/260c3f64-d8ed-477d-b62a-07a174991a39_qa4zui.jpg" alt="Bygga muskler">
<h3>Bygg muskler</h3>
</div>
<div class="card">
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770072235/260c3f64-d8ed-477d-b62a-07a174991a39_qa4zui.jpg" alt="Bli starkare">
<h3>Bli starkare – på riktigt</h3>
</div>
</div>
</section>


<section>
<h2 class="section-title">Om mig – Alexander Adolfsson</h2>
<div class="grid grid-2">
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Alexander Adolfsson" style="border-radius:16px;">
<div>
<p>Jag är licensierad personlig tränare och kostrådgivare med över 15 års erfarenhet inom gym. Jag hjälper dig bygga hållbara vanor som ger långsiktiga resultat – utan snabba lösningar eller extrema upplägg.</p>
<ul>
<li>Licensierad Personlig Tränare</li>
<li>Certifierad Kostrådgivare</li>
<li>15+ års erfarenhet</li>
<li>Specialist på hållbara resultat</li>
</ul>
<a href="#" class="btn">Läs mer om mig</a>
</div>
</div>
</section>


<section>
<h2 class="section-title">Så här fungerar coaching</h2>
<div class="steps">
<div class="step">
<h4>1. Konsultation</h4>
<p>Vi diskuterar dina mål, erfarenhet och behov.</p>
</div>
<div class="step">
<h4>2. Personligt program</h4>
<p>Du får ett anpassat tränings- och kostupplägg.</p>
</div>
<div class="step">
<h4>3. Veckovis uppföljning</h4>
<p>Vi följer upp framsteg och justerar programmet.</p>
</div>
<div class="step">
<h4>4. Resultat</h4>
<p>Du når dina mål på ett hållbart sätt.</p>
</div>
</div>
</section>


<section>
<h2 class="section-title">Tjänster</h2>
<div class="grid grid-2">
<div class="card">
<h3>Personlig träning</h3>
<p>Träning på plats eller online med tydlig struktur, teknikfeedback och progression. Fokus på styrka, kondition, rörlighet och hållbar utveckling.</p>
<a href="#" class="btn">Boka PT-pass</a>
</div>
<div class="card">
<h3>Kostupplägg</h3>
<p>Personligt kostschema anpassat efter dina mål, preferenser och vardag – utan extrema dieter.</p>
<a href="#" class="btn">Få kostupplägg</a>
</div>
</div>
</section>


<section>
<h2 class="section-title">Prisplaner</h2>
<table>
<tr>
<th>Plan</th>
<th>Pris</th>
<th>Innehåll</th>
<th>Starta</th>
</tr>
<tr>
<td>Bas</td>
<td>1 495 kr / månad</td>
<td>Träningsprogram, Grundläggande kostråd, App, Veckovis uppföljning</td>
<td><a href="#" class="btn">Starta Bas</a></td>
</tr>
<tr>
<td>Standard (Populär)</td>
<td>2 495 kr / månad</td>
<td>Träningsprogram, Personligt kostupplägg, Veckovis uppföljning, Direktkontakt</td>
<td><a href="#" class="btn">Starta Standard</a></td>
</tr>
<tr>
<td>Premium</td>
<td>3 495 kr / månad</td>
<td>Allt i Standard, Tätare uppföljning, Prioriterad support, Videosamtal</td>
<td><a href="#" class="btn">Starta Premium</a></td>
</tr>
</table>
</section>


<section>
<h2 class="section-title">Online Coaching</h2>
<p>Personlig 1:1-coaching för dig som vill bygga muskler, tappa fett och prestera bättre – med full struktur och uppföljning.</p>
<ul>
<li>Personligt träningsprogram</li>
<li>Koststrategi anpassad efter dina mål</li>
<li>Veckovis uppföljning & justeringar</li>
<li>Direktkontakt med coach</li>
</ul>
<p><strong>Pris:</strong> 1 499 kr / månad</p>
<a href="#" class="btn">Starta min coaching nu</a>
</section>


<section>
<h2 class="section-title">Vad kunder säger</h2>
<div class="grid grid-3">
<div class="testimonial">
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Kund 1">
<p>"Jag har tränat i flera år men aldrig haft så bra struktur."</p>
<strong>- Anna S.</strong>
</div>
<div class="testimonial">
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Kund 2">
<p>"Alexander hjälpte mig gå ner i vikt utan extrema dieter!"</p>
<strong>- Johan L.</strong>
</div>
<div class="testimonial">
<img src="https://res.cloudinary.com/dttivz1il/image/upload/v1770071792/116793853_1720734278103001_2838411385229802706_n_1_amarng.jpg" alt="Kund 3">
<p>"Jag byggde muskler snabbare än jag trodde var möjligt."</p>
<strong>- Sara K.</strong>
</div>
</div>
</section>


<section>
<h2 class="section-title">Vanliga frågor</h2>
<div class="faq-item">
<h4>Hur fungerar online coaching?</h4>
<p>Vi skickar tränings- och kostprogram via appen, med veckovis uppföljning och justeringar.</p>
</div>
<div class="faq-item">
<h4>Kan jag avbryta när som helst?</h4>
<p>Ja, alla planer är 100% online och kan avslutas när som helst.</p>
</div>
<div class="faq-item">
<h4>Måste jag ha gymkort?</h4>
<p>Nej, vi anpassar träningen efter dina förutsättningar – hemma eller på gym.</p>
</div>
</section>


<section style="text-align:center;">
<h2 class="section-title

Files changed (1) hide show

components/steps.js +115 -0

components/steps.js ADDED Viewed

	@@ -0,0 +1,115 @@

+class StepsComponent extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          padding: 3rem 2rem;
+          background: #f8f9fa;
+        }
+        .steps-section {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .section-header {
+          text-align: center;
+          margin-bottom: 3rem;
+        }
+        .section-header h2 {
+          font-size: 2rem;
+          color: #3a0ca3;
+          margin-bottom: 1rem;
+        }
+        .steps-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          gap: 2rem;
+        }
+        .step-card {
+          background: white;
+          border-radius: 1rem;
+          padding: 2rem;
+          text-align: center;
+          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+          transition: all 0.3s ease;
+        }
+        .step-card:hover {
+          transform: translateY(-5px);
+          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .step-number {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 50px;
+          height: 50px;
+          background: #4361ee;
+          color: white;
+          border-radius: 50%;
+          font-size: 1.5rem;
+          font-weight: 700;
+          margin-bottom: 1.5rem;
+        }
+        .step-card h3 {
+          font-size: 1.5rem;
+          color: #3a0ca3;
+          margin-bottom: 1rem;
+        }
+        .step-card p {
+          color: #555;
+          line-height: 1.6;
+        }
+        @media (max-width: 768px) {
+          .steps-grid {
+            grid-template-columns: 1fr;
+          }
+        }
+      </style>
+      <section class="steps-section">
+        <div class="section-header">
+          <h2>Så här fungerar coaching</h2>
+        </div>
+        <div class="steps-grid">
+          <div class="step-card">
+            <div class="step-number">1</div>
+            <h3>Konsultation</h3>
+            <p>Vi diskuterar dina mål, erfarenhet och behov.</p>
+          </div>
+          <div class="step-card">
+            <div class="step-number">2</div>
+            <h3>Personligt program</h3>
+            <p>Du får ett anpassat tränings- och kostupplägg.</p>
+          </div>
+          <div class="step-card">
+            <div class="step-number">3</div>
+            <h3>Veckovis uppföljning</h3>
+            <p>Vi följer upp framsteg och justerar programmet.</p>
+          </div>
+          <div class="step-card">
+            <div class="step-number">4</div>
+            <h3>Resultat</h3>
+            <p>Du når dina mål på ett hållbart sätt.</p>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+}
+customElements.define('steps-component', StepsComponent);