BaseVan/index.html at main · Navaneeth223/BaseVan · 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Project Snowflake 2 by BaseVan. A limited-release platform of refurbished ex-NHS Fiat Ducato ambulance vans with long-term parts support and community access.">
  <meta name="theme-color" content="#111723">
  <title>BaseVan | Project Snowflake 2</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%23111723'/%3E%3Cpath d='M18 18h14c8 0 14 6 14 14s-6 14-14 14H18V18Zm12 20c4 0 7-3 7-7s-3-7-7-7h-4v14h4Z' fill='%23d4a574'/%3E%3C/svg%3E">
  <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=Barlow:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body data-state="prelaunch">
  <a class="skip-link" href="#main-content">Skip to content</a>
  <header class="site-header">
    <div class="container nav-wrap">
      <a class="brand" href="#top" aria-label="BaseVan home">
        <span class="brand-mark">BV</span>
        <span class="brand-copy">
          <strong>BaseVan</strong>
          <span>Project Snowflake 2</span>
        </span>
      </a>
      <button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">
        <span></span>
        <span></span>
        <span></span>
        <span class="sr-only">Toggle navigation</span>
      </button>
      <nav class="site-nav" id="site-nav" aria-label="Primary">
        <a href="#benefits">Benefits</a>
        <a href="#difference">Why Snowflake</a>
        <a href="#community">Community</a>
        <a href="#final-cta">Reserve</a>
        <div class="variant-toggle" role="tablist" aria-label="Launch state">
          <button class="variant-button is-active" type="button" data-variant="prelaunch" role="tab" aria-selected="true">Pre-Launch</button>
          <button class="variant-button" type="button" data-variant="launch" role="tab" aria-selected="false">Launch</button>
        </div>
      </nav>
    </div>
  </header>

  <main id="main-content">
    <section class="hero section-dark" id="top">
      <div class="container hero-grid">
        <div class="hero-copy">
          <p class="eyebrow">Limited release platform | 150 vans only</p>
          <h1>Modern reliability. Old-school durability.</h1>
          <p class="subheadline" data-content="prelaunch">See why 500k+ viewers chose Snowflake. Be first through the gate when Project Snowflake 2 goes live.</p>
          <p class="subheadline" data-content="launch">See why 500k+ viewers chose Snowflake. Secure your build platform before the remaining vans are spoken for.</p>
          <div class="hero-meta">
            <div>
              <strong>2.3L Fiat Ducato</strong>
              <span>No AdBlue. Proven mechanical simplicity.</span>
            </div>
            <div>
              <strong>Ex-NHS foundations</strong>
              <span>Purpose-built, restored, and backed by BaseVan.</span>
            </div>
          </div>
          <div class="hero-actions">
            <a class="button button-primary" href="#scarcity" data-content="prelaunch">Register Interest</a>
            <a class="button button-primary" href="#scarcity" data-content="launch">Reserve Now - GBP 500 Deposit</a>
            <a class="button button-secondary" href="#benefits">See the full specs</a>
          </div>
          <div class="hero-trust">
            <span>Direct decommissioning</span>
            <span>Parts network in place</span>
            <span>Community-backed builds</span>
          </div>
        </div>

        <div class="hero-visual" aria-label="Illustration of Project Snowflake 2 vehicle platform">
          <div class="vehicle-card">
            <div class="vehicle-badge">Snowflake 2</div>
            <svg viewBox="0 0 640 360" role="img" aria-label="Luxury vehicle silhouette illustration">
              <defs>
                <linearGradient id="vanGlow" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#d4a574"></stop>
                  <stop offset="100%" stop-color="#7c4c2f"></stop>
                </linearGradient>
              </defs>
              <path d="M118 232h43l31-95c7-20 25-34 46-34h150c15 0 30 7 39 19l49 64h29c23 0 41 18 41 41v26H92v-14c0-4 2-7 6-7h20z" fill="#202838"></path>
              <path d="M142 234h346c26 0 47 21 47 47v8H95v-8c0-26 21-47 47-47z" fill="#151b27"></path>
              <path d="M205 121h163c9 0 18 4 23 12l41 54H175l17-50c3-9 11-16 13-16z" fill="rgba(212,165,116,0.16)" stroke="url(#vanGlow)" stroke-width="3"></path>
              <circle cx="191" cy="286" r="42" fill="#0b1019" stroke="#d4a574" stroke-width="6"></circle>
              <circle cx="458" cy="286" r="42" fill="#0b1019" stroke="#d4a574" stroke-width="6"></circle>
              <circle cx="191" cy="286" r="16" fill="#d4a574"></circle>
              <circle cx="458" cy="286" r="16" fill="#d4a574"></circle>
              <path d="M218 144h118v42H204z" fill="#8fa4bf"></path>
              <path d="M348 144h58l28 42h-86z" fill="#a7bad2"></path>
              <path d="M112 210h45" stroke="#d4a574" stroke-width="8" stroke-linecap="round"></path>
              <path d="M500 207h17" stroke="#d4a574" stroke-width="8" stroke-linecap="round"></path>
            </svg>
            <div class="vehicle-spec-strip">
              <div><strong>150</strong><span>Total release</span></div>
              <div><strong>Square shell</strong><span>Easy conversion</span></div>
              <div><strong>Heavy-duty electrics</strong><span>Already in place</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="scarcity section-light" id="scarcity">
      <div class="container scarcity-grid">
        <div class="section-heading">
          <p class="eyebrow">Early access</p>
          <h2 data-content="prelaunch">A limited release. An informed start.</h2>
          <h2 data-content="launch">A limited release. A narrow window.</h2>
          <p data-content="prelaunch">Project Snowflake 2 opens after the reveal. Secure your early access slot now and receive first notice when the vans unlock.</p>
          <p data-content="launch">Each GBP 500 deposit reserves your place against remaining stock. Inventory is finite and updates in real time.</p>
        </div>
        <div class="scarcity-panel">
          <div class="panel-topline">
            <span data-content="prelaunch">Launch countdown</span>
            <span data-content="launch">Availability window</span>
          </div>
          <div class="countdown" aria-live="polite" data-target-date="2026-04-21T18:00:00+05:30">
            <div><strong data-unit="days">00</strong><span>Days</span></div>
            <div><strong data-unit="hours">00</strong><span>Hours</span></div>
            <div><strong data-unit="minutes">00</strong><span>Minutes</span></div>
            <div><strong data-unit="seconds">00</strong><span>Seconds</span></div>
          </div>
          <div class="scarcity-stats">
            <div class="stat-card">
              <span>Release size</span>
              <strong>150 vans</strong>
            </div>
            <div class="stat-card" data-content="prelaunch">
              <span>Priority access</span>
              <strong>Early list only</strong>
            </div>
            <div class="stat-card" data-content="launch">
              <span>Vans remaining</span>
              <strong id="inventory-count">87</strong>
            </div>
          </div>
          <form class="lead-form" id="interest-form" novalidate data-content="prelaunch">
            <label>
              Full name
              <input type="text" name="name" autocomplete="name" placeholder="Your name" required>
            </label>
            <label>
              Email address
              <input type="email" name="email" autocomplete="email" placeholder="name@email.com" required>
            </label>
            <button class="button button-primary" type="submit">Secure Early Access</button>
            <p class="form-note">No spam. Launch notice and spec pack only.</p>
            <p class="form-feedback" aria-live="polite"></p>
          </form>
          <form class="lead-form" id="deposit-form" novalidate data-content="launch">
            <label>
              Full name
              <input type="text" name="name" autocomplete="name" placeholder="Your name" required>
            </label>
            <label>
              Email address
              <input type="email" name="email" autocomplete="email" placeholder="name@email.com" required>
            </label>
            <label>
              Preferred build use
              <select name="use" required>
                <option value="">Select one</option>
                <option value="camper">Camper conversion</option>
                <option value="expedition">Expedition vehicle</option>
                <option value="workshop">Mobile workshop</option>
              </select>
            </label>
            <button class="button button-accent" type="submit">Reserve Now - GBP 500 Deposit</button>
            <p class="form-note">Secure payment placeholder. Deposit remains refundable before allocation.</p>
            <p class="form-feedback" aria-live="polite"></p>
          </form>
        </div>
      </div>
    </section>

    <section class="benefits section-dark" id="benefits">
      <div class="container">
        <div class="section-heading section-heading-center">
          <p class="eyebrow">Why this platform</p>
          <h2>Designed for builders who value mechanical honesty.</h2>
          <p>Every advantage here is practical. Fewer complexity traps, stronger foundations, and a cleaner route from base vehicle to finished build.</p>
        </div>
        <div class="benefit-grid">
          <article class="benefit-card">
            <div class="icon-wrap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 14V9l3-3h4l2 2h4l3 3v3M6 14h12M7 18a2 2 0 1 0 0 .1V18Zm10 0a2 2 0 1 0 0 .1V18Z"></path></svg></div>
            <h3>Modern, Simple Engine</h3>
            <p>2.3L Fiat Ducato. Proven reliable, no AdBlue, and no unnecessary electronic complexity in the ownership path.</p>
          </article>
          <article class="benefit-card">
            <div class="icon-wrap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 5 6v5c0 5 3.4 9.4 7 10 3.6-.6 7-5 7-10V6l-7-3Zm-3 9 2 2 4-4"></path></svg></div>
            <h3>NHS-Built Foundation</h3>
            <p>Engineered for emergency service use. These are service-grade shells designed to survive real-duty life, not casual retail cycles.</p>
          </article>
          <article class="benefit-card">
            <div class="icon-wrap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m13 2-7 12h5l-1 8 8-13h-5l1-7Z"></path></svg></div>
            <h3>Heavy-Duty Electrics</h3>
            <p>Professional-grade electrical systems, lighting circuits, controls, and inverter-ready architecture already give you a serious head start.</p>
          </article>
          <article class="benefit-card">
            <div class="icon-wrap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 11.5 12 4l9 7.5M6 10v9h12v-9M9 19v-5h6v5"></path></svg></div>
            <h3>Insulated & Easy to Convert</h3>
            <p>Insulation is already fitted and the square rear box creates a cleaner, more usable footprint for camper and expedition layouts.</p>
          </article>
          <article class="benefit-card">
            <div class="icon-wrap"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h10v10H4zM14 10h6v7h-6M7 4h10v6"></path></svg></div>
            <h3>Strong Parts Network</h3>
            <p>Thousands of spare parts are already in the BaseVan ecosystem, with direct support designed to stay useful long after purchase.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="difference section-light" id="difference">
      <div class="container difference-grid">
        <div class="section-heading">
          <p class="eyebrow">Why Project Snowflake is different</p>
          <h2>The last van you'll ever need to buy.</h2>
          <p>This is not a random auction gamble. It is a supported platform built around continuity, restoration discipline, and future-proof ownership.</p>
        </div>
        <div class="compare-card">
          <div class="compare-column compare-muted">
            <h3>Traditional Van Purchase</h3>
            <ul>
              <li>Auction uncertainty and unknown service history</li>
              <li>Electrical work that may have been stripped or butchered</li>
              <li>Parts support depends on chance</li>
              <li>You solve the difficult bits alone</li>
            </ul>
          </div>
          <div class="compare-column compare-highlight">
            <h3>Project Snowflake 2</h3>
            <ul>
              <li>Direct decommissioning instead of breaker-yard roulette</li>
              <li>Electrical restoration handled with system integrity in mind</li>
              <li>Long-term support backed by stocked components</li>
              <li>A visible builder community sharing methods and lessons</li>
            </ul>
          </div>
        </div>
        <div class="process-strip" aria-label="Project Snowflake care process">
          <div><span>01</span><p>Direct service exit</p></div>
          <div><span>02</span><p>Electrical restoration</p></div>
          <div><span>03</span><p>Parts continuity</p></div>
          <div><span>04</span><p>Community-backed ownership</p></div>
        </div>
      </div>
    </section>

    <section class="community section-dark" id="community">
      <div class="container">
        <div class="section-heading section-heading-center">
          <p class="eyebrow">Join a growing network</p>
          <h2>You're not buying a van. You're joining a platform.</h2>
          <p>Builders, creators, and long-term owners already treat Snowflake as a shared engineering ecosystem, not a one-off purchase.</p>
        </div>
        <div class="community-layout">
          <div class="community-stats">
            <article><strong>420+</strong><span>active owners following the platform</span></article>
            <article><strong>180+</strong><span>shared builds and walkthroughs</span></article>
            <article><strong>3,000+</strong><span>parts catalogued for long-term support</span></article>
            <article><strong>95</strong><span>knowledge-base articles in progress</span></article>
          </div>
          <div class="testimonial-rail">
            <article class="testimonial-card">
              <p>"The appeal was mechanical honesty. We started with a shell that already made sense."</p>
              <span>Tom A. | family camper build | Bristol</span>
            </article>
            <article class="testimonial-card">
              <p>"BaseVan support mattered more than the sale. The parts continuity changed the risk profile entirely."</p>
              <span>Rachel M. | mobile workshop | Leeds</span>
            </article>
            <article class="testimonial-card">
              <p>"It feels like joining a group of people solving the same platform, not being left to guess."</p>
              <span>Imran K. | overland build | Glasgow</span>
            </article>
          </div>
        </div>
      </div>
    </section>

    <section class="video-strip section-light" id="video">
      <div class="container video-card">
        <div>
          <p class="eyebrow">Launch film</p>
          <h2>Watch the full Project Snowflake 2 release story.</h2>
          <p>Place the official YouTube launch video here for the handoff. The embed is intentionally click-to-play only.</p>
        </div>
        <a class="video-link" href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer" aria-label="Open YouTube launch video">
          <span class="play-button" aria-hidden="true"></span>
          <span>Open YouTube launch video</span>
        </a>
      </div>
    </section>

    <section class="final-cta section-dark" id="final-cta">
      <div class="container cta-card">
        <div>
          <p class="eyebrow">Secure your place</p>
          <h2>Secure your place in Project Snowflake 2.</h2>
          <p data-content="prelaunch">Limited to 150 vans. Register now for early access, launch alerts, and the first spec release.</p>
          <p data-content="launch">Limited to 150 vans. A GBP 500 deposit reserves your early allocation slot while stock remains available.</p>
        </div>
        <div class="cta-actions">
          <a class="button button-primary" href="#scarcity" data-content="prelaunch">Register Interest</a>
          <a class="button button-accent" href="#scarcity" data-content="launch">Reserve Now - GBP 500 Deposit</a>
          <div class="trust-row">
            <span>Secure checkout</span>
            <span>No spam</span>
            <span>Refundable before allocation</span>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-wrap">
      <p>BaseVan | Project Snowflake 2</p>
      <p>Luxury launch prototype with pre-launch and live-sale modes.</p>
    </div>
  </footer>
  <script src="script.js"></script>
</body>
</html>