LBR/index.html at main · amolsarva/LBR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>LBR Low Back Relief — Cinematic Lumbar Support</title>
    <meta
      name="description"
      content="Low Back Relief Waistband delivers clinical-grade stability wrapped in a cinematic, minimal shopping experience."
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="texture" aria-hidden="true"></div>
    <header class="shell site-header">
      <div class="mark">
        <img src="assets/lbr-logo.png" alt="LBR — Low Back Relief wordmark" />
      </div>
      <button class="text-link" data-scroll="order">Shop Now</button>
    </header>

    <main>
      <section id="hero" class="hero shell">
        <div class="hero-visual">
          <figure class="state">
            <img src="assets/hero-before-after.png" alt="Before and after using the Low Back Relief waistband on a flight" loading="lazy" />
          </figure>
        </div>
        <div class="hero-copy">
          <p class="eyebrow">Clinical calm · Ships in 24h</p>
          <h1>Relief You Can Feel Fast</h1>
          <p class="lede">Stabilize your spine. Move freely again.</p>
          <p class="supporting">
            LBR Low Back Relief Waistband pairs medical-grade compression with architected padding so you stand taller, sit longer, and breathe easier without bulky braces.
          </p>
          <div class="cta-group">
            <a
              class="primary-btn"
              href="https://www.amazon.com/Mueller-Adjustable-Back-Brace-Black/dp/B07ZQVZL2L/ref=sr_1_1_sspa?dib=eyJ2IjoiMSJ9.ZrXnDLWBBVzWbe0TXCRcLEWchq6JNemgSyFm78aMBKF43ineiW4moV5LINsgaq9OAGtGYnk3IHeEeO2RU4UlrvhLmU9-tj_8q-yFuHuyvat9EHADNzY2h2FVf6pEjf0qolKylhqs-o3AVftwOH9h1vhjyKi2TME_684UitCf69PxFSLXG8fBLUkmpAgUw7bFFeVr0lEJsXeM_R4gxqPDJyMl3FeGInj3-wpHQZIo3NjHVoqQNV1odz1qV1aOhJ_GSvj2MiZcW9q-2enftBwK0tKlaxUsqtUEg8NzJdImG8c.lMwH-rjjKnaVgfdckDQHIUXELyTGeaWMbNism4g6mhA&dib_tag=se&keywords=Mueller%2BAdjustable%2BBack%2BBrace&qid=1775666668&sr=8-1-spons&sp_csd=d2lkZ2V0TmFtZT1zcF9hdGY&th=1"
              target="_blank"
              rel="noopener"
            >Shop Now</a>
            <button class="secondary-btn" data-scroll="mechanism">How it works</button>
          </div>
          <ul class="micro-specs">
            <li>Under-clothing thin</li>
            <li>Breathable knit</li>
            <li>Physio-backed</li>
          </ul>
        </div>
      </section>

      <section class="empathy-strip" aria-label="Empathy statements">
        <div class="shell strip-content">
          <p>Sitting hurts.</p>
          <p>Standing too long hurts.</p>
          <p>Even resting doesn’t fix it.</p>
          <p class="anchor">You’re not alone.</p>
        </div>
      </section>

      <section class="product-reveal shell" aria-labelledby="reveal-title">
        <div>
          <p class="eyebrow">Product reveal</p>
          <h2 id="reveal-title">Designed for daily relief.</h2>
          <p>
            Sculpted lumbar ribs glide into the natural curve of your spine while adjustable compression wings hug your core. The result: a barely-there waistband you actually forget you’re wearing.
          </p>
        </div>
        <div class="reveal-gallery">
          <figure>
            <img src="assets/product-macro.png" alt="Macro detail of the LBR waistband clasp and knit" loading="lazy" />
          </figure>
          <figure>
            <img src="assets/flatlay-pouch.png" alt="Folded waistband with travel pouch, passport, and earbuds" loading="lazy" />
          </figure>
        </div>
      </section>

      <section id="mechanism" class="mechanism shell" aria-labelledby="mechanism-title">
        <div class="diagram" role="img" aria-label="Compression, alignment, support diagram">
          <img src="assets/mechanism-diagram.png" alt="Diagram showing compression, alignment, and support arrows around the torso" />
        </div>
        <div class="diagram-copy">
          <p class="eyebrow">Mechanism</p>
          <h2 id="mechanism-title">How it works in 3 steps.</h2>
          <ul>
            <li><strong>Compression:</strong> layered elastic tightens micro-instants to reduce strain.</li>
            <li><strong>Alignment:</strong> tapered panels guide your pelvis upright without rigid stays.</li>
            <li><strong>Support:</strong> floating lumbar pad stabilizes movement so muscles relax.</li>
          </ul>
        </div>
      </section>

      <section class="lifestyle shell" aria-labelledby="lifestyle-title">
        <div class="section-heading">
          <p class="eyebrow">Real life proof</p>
          <h2 id="lifestyle-title">Move like nothing hurts.</h2>
          <p>Versatile enough for remote work, city walks, light training, or parenting—and calm enough to disappear under every outfit.</p>
        </div>
        <div class="lifestyle-grid">
          <article>
            <img src="assets/lifestyle-desk-2.png" alt="Professional standing at a home desk wearing the waistband while working on a laptop" loading="lazy" />
            <p class="quote">“First pain-free workday in months.”</p>
            <p class="author">— Maya, product lead</p>
          </article>
          <article>
            <p class="quote">“I forgot I was wearing it.”</p>
            <p class="author">— Elias, dad of two</p>
          </article>
          <article>
            <p class="quote">“Walking meetings feel effortless.”</p>
            <p class="author">— Noor, founder</p>
          </article>
        </div>
      </section>

      <section id="feature-stack" class="feature-stack shell" aria-labelledby="feature-title">
        <div class="section-heading">
          <p class="eyebrow">Feature stack</p>
          <h2 id="feature-title">Details engineered for trust.</h2>
        </div>
        <div class="feature-grid">
          <article>
            <h3>Adjustable compression</h3>
            <p>Dual sliders personalize tension for sitting, lifting, or traveling.</p>
          </article>
          <article>
            <h3>Breathable fabric</h3>
            <p>Open-cell knit vents heat while soft-touch lining calms skin.</p>
          </article>
          <article>
            <h3>Slim under clothing</h3>
            <p>5 mm profile disappears beneath tailoring without printing.</p>
          </article>
          <article>
            <h3>Reinforced lumbar support</h3>
            <p>Floating pad keeps vertebrae stacked during motion.</p>
          </article>
        </div>
      </section>

      <section class="trust shell" aria-labelledby="trust-title">
        <div class="section-heading">
          <p class="eyebrow">Trust layer</p>
          <h2 id="trust-title">Risk-free reassurance.</h2>
        </div>
        <div class="trust-grid">
          <article>
            <h3>60-day trial</h3>
            <p>Test it through commutes, flights, and workouts.</p>
          </article>
          <article>
            <h3>Free shipping</h3>
            <p>Fast, carbon-neutral delivery across the U.S.</p>
          </article>
          <article>
            <h3>10,000+ customers</h3>
            <p>Feedback loops inform every batch.</p>
          </article>
          <article>
            <h3>Physiotherapy input</h3>
            <p>Designed alongside board-certified PTs.</p>
          </article>
        </div>
      </section>

      <section id="order" class="final shell" aria-labelledby="final-title">
        <div class="final-visual">
          <img src="assets/final-hero.png" alt="Person stretching on a rooftop at sunrise" loading="lazy" />
        </div>
        <div class="final-copy">
          <p class="eyebrow">Final invitation</p>
          <h2 id="final-title">Move like yourself again.</h2>
          <p>Slip into a waistband that listens to your body and meets you where you are. Calm authority. Quiet confidence.</p>
          <a
            class="primary-btn"
            href="https://www.amazon.com/Mueller-Adjustable-Back-Brace-Black/dp/B07ZQVZL2L/ref=sr_1_1_sspa?dib=eyJ2IjoiMSJ9.ZrXnDLWBBVzWbe0TXCRcLEWchq6JNemgSyFm78aMBKF43ineiW4moV5LINsgaq9OAGtGYnk3IHeEeO2RU4UlrvhLmU9-tj_8q-yFuHuyvat9EHADNzY2h2FVf6pEjf0qolKylhqs-o3AVftwOH9h1vhjyKi2TME_684UitCf69PxFSLXG8fBLUkmpAgUw7bFFeVr0lEJsXeM_R4gxqPDJyMl3FeGInj3-wpHQZIo3NjHVoqQNV1odz1qV1aOhJ_GSvj2MiZcW9q-2enftBwK0tKlaxUsqtUEg8NzJdImG8c.lMwH-rjjKnaVgfdckDQHIUXELyTGeaWMbNism4g6mhA&dib_tag=se&keywords=Mueller%2BAdjustable%2BBack%2BBrace&qid=1775666668&sr=8-1-spons&sp_csd=d2lkZ2V0TmFtZT1zcF9hdGY&th=1"
            target="_blank"
            rel="noopener"
            aria-label="Purchase Low Back Relief Waistband"
          >Get Relief Now</a>
          <p class="secondary-cta">
            Prefer Amazon?
            <a
              href="https://www.amazon.com/Mueller-Adjustable-Back-Brace-Black/dp/B07ZQVZL2L/ref=sr_1_1_sspa?dib=eyJ2IjoiMSJ9.ZrXnDLWBBVzWbe0TXCRcLEWchq6JNemgSyFm78aMBKF43ineiW4moV5LINsgaq9OAGtGYnk3IHeEeO2RU4UlrvhLmU9-tj_8q-yFuHuyvat9EHADNzY2h2FVf6pEjf0qolKylhqs-o3AVftwOH9h1vhjyKi2TME_684UitCf69PxFSLXG8fBLUkmpAgUw7bFFeVr0lEJsXeM_R4gxqPDJyMl3FeGInj3-wpHQZIo3NjHVoqQNV1odz1qV1aOhJ_GSvj2MiZcW9q-2enftBwK0tKlaxUsqtUEg8NzJdImG8c.lMwH-rjjKnaVgfdckDQHIUXELyTGeaWMbNism4g6mhA&dib_tag=se&keywords=Mueller%2BAdjustable%2BBack%2BBrace&qid=1775666668&sr=8-1-spons&sp_csd=d2lkZ2V0TmFtZT1zcF9hdGY&th=1"
              target="_blank"
              rel="noopener"
            >Checkout with Prime</a>
          </p>
        </div>
      </section>
    </main>

    <footer class="shell site-footer">
      <p>© <span id="year"></span> LBR Studio. The most elegant solution to a quiet, persistent problem.</p>
      <div class="footer-links">
        <a href="mailto:hello@lbrstudio.com">hello@lbrstudio.com</a>
        <a href="https://instagram.com" target="_blank" rel="noopener">Instagram</a>
      </div>
    </footer>

    <div class="sticky-cta" data-visible="false">
      <span>Low Back Relief Waistband</span>
      <a
        class="primary-btn"
        href="https://www.amazon.com/Mueller-Adjustable-Back-Brace-Black/dp/B07ZQVZL2L/ref=sr_1_1_sspa?dib=eyJ2IjoiMSJ9.ZrXnDLWBBVzWbe0TXCRcLEWchq6JNemgSyFm78aMBKF43ineiW4moV5LINsgaq9OAGtGYnk3IHeEeO2RU4UlrvhLmU9-tj_8q-yFuHuyvat9EHADNzY2h2FVf6pEjf0qolKylhqs-o3AVftwOH9h1vhjyKi2TME_684UitCf69PxFSLXG8fBLUkmpAgUw7bFFeVr0lEJsXeM_R4gxqPDJyMl3FeGInj3-wpHQZIo3NjHVoqQNV1odz1qV1aOhJ_GSvj2MiZcW9q-2enftBwK0tKlaxUsqtUEg8NzJdImG8c.lMwH-rjjKnaVgfdckDQHIUXELyTGeaWMbNism4g6mhA&dib_tag=se&keywords=Mueller%2BAdjustable%2BBack%2BBrace&qid=1775666668&sr=8-1-spons&sp_csd=d2lkZ2V0TmFtZT1zcF9hdGY&th=1"
        target="_blank"
        rel="noopener"
      >Shop Now</a>
    </div>

    <script src="script.js" defer></script>
  </body>
</html>