frostline/index.html at master · Sam-May-Futurelab/frostline · 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
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FROSTLINE - Premium Snowboard Gear</title>
    <meta name="description" content="Experience the mountains like never before with FROSTLINE premium snowboard gear. High-performance boards and equipment for every rider.">
    <!-- Google Fonts -->
    <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=Oswald:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <!-- Navigation -->
      <nav>
        <div class="container">
          <div class="flex items-center justify-between">
            <h1 class="font-heading text-charcoal" style="font-size: 1.5rem; font-weight: bold;">FROSTLINE</h1>
            <div class="flex items-center" style="gap: 2rem;">
              <a href="#gear">Gear</a>
              <a href="#about">About</a>
              <a href="#testimonials">Reviews</a>
              <a href="#contact">Contact</a>
              <button class="btn-primary">Shop Now</button>
            </div>
          </div>
        </div>
      </nav>

      <!-- Hero Section -->
      <section id="hero">
        <!-- Enhanced snow effects container -->
        <div id="snow-container" class="absolute inset-0"></div>
        <div id="hero-snow-trails" class="absolute inset-0"></div>
        <div id="hero-aurora" class="absolute inset-0"></div>

        <!-- Mountain landscape background -->
        <div class="hero-mountain-landscape"></div>

        <!-- Snowboard trail effects -->
        <div class="snowboard-trails">
          <div class="trail trail-1"></div>
          <div class="trail trail-2"></div>
          <div class="trail trail-3"></div>
        </div>

        <!-- Hero content -->
        <div class="container">
          <h1 class="font-heading hero-title-enhanced" id="hero-title" style="opacity: 0;">
            FROSTLINE
          </h1>
          <p id="hero-subtitle" style="opacity: 0;">
            Experience the mountains like never before with premium snowboard gear designed for champions
          </p>
          <div id="hero-buttons" style="opacity: 0; display: flex; gap: 1rem; justify-content: center; margin-top: 2rem;">
            <button class="btn-primary hero-btn-enhanced">Explore Collection</button>
            <button class="btn-secondary hero-btn-enhanced">Watch Video</button>
          </div>
        </div>

        <!-- Enhanced snowboarder action image -->
        <div id="snowboarder" style="position: absolute; bottom: 5rem; right: 2.5rem; opacity: 0;">
          <div class="snowboarder-container">
            <img src="src/hero-images/snowboarder-action.png" alt="Snowboarder in Action" class="snowboarder-image">
            <!-- Speed lines for dynamic effect -->
            <div class="speed-lines">
              <div class="speed-line speed-line-1"></div>
              <div class="speed-line speed-line-2"></div>
              <div class="speed-line speed-line-3"></div>
            </div>
          </div>
        </div>

        <!-- Floating snow crystals -->
        <div class="hero-snow-crystals">
          <div class="snow-crystal crystal-1">❄</div>
          <div class="snow-crystal crystal-2">❅</div>
          <div class="snow-crystal crystal-3">❄</div>
          <div class="snow-crystal crystal-4">❅</div>
          <div class="snow-crystal crystal-5">❄</div>
          <div class="snow-crystal crystal-6">❅</div>
        </div>

        <!-- Wind effect -->
        <div class="hero-wind-effect"></div>
      </section>

      <!-- Gear Showcase -->
      <section id="gear" class="section-padding bg-gradient-to-b from-snow-white to-frost">
        <div class="container">
          <h2 class="font-heading text-4xl font-bold text-center text-charcoal mb-4 reveal-element">
            Premium <span class="bg-gradient-to-r from-ice-blue to-deep-blue bg-clip-text text-transparent">Gear</span>
          </h2>
          <p class="text-center text-gray-600 mb-12 reveal-element">Engineered for perfection, built for champions</p>

          <!-- Gear carousel -->
          <div class="gear-carousel reveal-element">
            <div class="gear-track">
              <div class="gear-card">
                <div class="gear-image">
                  <img src="src/gear-images/alpine-pro-snowboard.jpg" alt="Alpine Pro Snowboard" class="gear-product-image">
                  <span class="gear-label">ALPINE PRO</span>
                </div>
                <h3 class="font-heading text-xl font-bold text-charcoal mb-2">Alpine Pro</h3>
                <p class="text-gray-600 mb-4">Precision-engineered for speed demons. Carbon fiber core with titanal reinforcement delivers explosive edge control and unwavering stability at high speeds.</p>
                <div class="flex items-center justify-between mb-4">
                  <span class="text-2xl font-bold text-charcoal">$899</span>
                  <div class="flex text-yellow-400">
                    <span>★★★★★</span>
                  </div>
                </div>
                <button class="btn-primary w-full">View Details</button>
              </div>
              <div class="gear-card">
                <div class="gear-image">
                  <img src="src/gear-images/freestyle-x-snowboard.jpg" alt="Freestyle X Snowboard" class="gear-product-image">
                  <span class="gear-label">FREESTYLE X</span>
                </div>
                <h3 class="font-heading text-xl font-bold text-charcoal mb-2">Freestyle X</h3>
                <p class="text-gray-600 mb-4">Built for park legends. Twin directional shape with pop-enhancing bamboo core lets you stomp landings and butter rails with unmatched style.</p>
                <div class="flex items-center justify-between mb-4">
                  <span class="text-2xl font-bold text-charcoal">$649</span>
                  <div class="flex text-yellow-400">
                    <span>★★★★★</span>
                  </div>
                </div>
                <button class="btn-primary w-full">View Details</button>
              </div>
              <div class="gear-card">
                <div class="gear-image">
                  <img src="src/gear-images/all-mountain-snowboard.jpg" alt="All-Mountain Snowboard" class="gear-product-image">
                  <span class="gear-label">ALL-MOUNTAIN</span>
                </div>
                <h3 class="font-heading text-xl font-bold text-charcoal mb-2">All-Mountain</h3>
                <p class="text-gray-600 mb-4">Your passport to every terrain. Hybrid camber profile with responsive wood core conquers powder, groomers, and everything in between with confidence.</p>
                <div class="flex items-center justify-between mb-4">
                  <span class="text-2xl font-bold text-charcoal">$549</span>
                  <div class="flex text-yellow-400">
                    <span>★★★★☆</span>
                  </div>
                </div>
                <button class="btn-primary w-full">View Details</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- About Us Section -->
      <section id="about" class="section-padding overflow-hidden">
        <div class="container">
          <div class="grid lg:grid-cols-2 gap-12 items-center">
            <div class="reveal-element">
              <h2 class="font-heading text-4xl font-bold mb-6">
                Crafting <span class="text-ice-blue">Excellence</span> Since 2020
              </h2>
              <p class="text-lg mb-6 text-slate-800 font-medium">
                Born in the heart of the Alps, FROSTLINE emerged from a passion for pushing boundaries.
                Our team of engineers and pro riders work tirelessly to create boards that don't just
                perform—they inspire.
              </p>
              <div class="grid grid-cols-2 gap-6 mb-8">
                <div class="stat-card">
                  <h3 class="font-heading text-3xl font-bold text-ice-blue">15K+</h3>
                  <p class="text-sm text-slate-600">Happy Riders</p>
                </div>
                <div class="stat-card">
                  <h3 class="font-heading text-3xl font-bold text-ice-blue">50+</h3>
                  <p class="text-sm text-slate-600">Countries</p>
                </div>
                <div class="stat-card">
                  <h3 class="font-heading text-3xl font-bold text-ice-blue">100%</h3>
                  <p class="text-sm text-slate-600">Sustainable</p>
                </div>
                <div class="stat-card">
                  <h3 class="font-heading text-3xl font-bold text-ice-blue">24/7</h3>
                  <p class="text-sm text-slate-600">Support</p>
                </div>
              </div>
              <button class="btn-secondary">Learn More</button>
            </div>
            <div class="reveal-element">
              <div class="about-image-container">
                <div class="about-image bg-gradient-to-br from-ice-blue/20 to-deep-blue/20 backdrop-blur-sm">
                  <div class="snowboarder-spotlight"></div>
                  <div class="mountain-silhouette"></div>
                  <div class="about-logo-on-mountain flex items-center justify-center">
                    <img src="src/assets/frostline-logo.svg" alt="FROSTLINE Logo" class="about-frostline-logo">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Testimonials Section -->
      <section id="testimonials" class="section-padding bg-gradient-to-b from-snow-white to-soft-gray">
        <div class="container">
          <h2 class="font-heading text-4xl font-bold text-center text-charcoal mb-4 reveal-element">
            What <span class="text-ice-blue">Riders</span> Say
          </h2>
          <p class="text-center text-gray-600 mb-12 reveal-element">Join thousands who've elevated their ride with FROSTLINE</p>

          <div class="testimonial-grid">
            <div class="testimonial-card reveal-element">
              <div class="testimonial-stars">
                ⭐⭐⭐⭐⭐
              </div>
              <p class="testimonial-text">
                "The Alpine Pro completely transformed my riding. The precision and control are unmatched.
                Every turn feels effortless, every landing perfect."
              </p>
              <div class="testimonial-author">
                <div class="author-avatar">
                  <img src="src/avatars/sarah-chen-avatar.jpg" alt="Sarah Chen" class="avatar-image">
                </div>
                <div>
                  <h4 class="font-semibold text-charcoal">Sarah Chen</h4>
                  <p class="text-sm text-gray-500">Pro Snowboarder</p>
                </div>
              </div>
            </div>

            <div class="testimonial-card reveal-element">
              <div class="testimonial-stars">
                ⭐⭐⭐⭐⭐
              </div>
              <p class="testimonial-text">
                "FROSTLINE boards are in a league of their own. The build quality is exceptional,
                and the performance speaks for itself on every mountain."
              </p>
              <div class="testimonial-author">
                <div class="author-avatar">
                  <img src="src/avatars/marcus-rodriguez-avatar.jpg" alt="Marcus Rodriguez" class="avatar-image">
                </div>
                <div>
                  <h4 class="font-semibold text-charcoal">Marcus Rodriguez</h4>
                  <p class="text-sm text-gray-500">Olympic Athlete</p>
                </div>
              </div>
            </div>

            <div class="testimonial-card reveal-element">
              <div class="testimonial-stars">
                ⭐⭐⭐⭐⭐
              </div>
              <p class="testimonial-text">
                "From beginner to expert, FROSTLINE has been with me every step.
                The customer service is as impressive as their boards."
              </p>
              <div class="testimonial-author">
                <div class="author-avatar">
                  <img src="src/avatars/emma-thompson-avatar.jpg" alt="Emma Thompson" class="avatar-image">
                </div>
                <div>
                  <h4 class="font-semibold text-charcoal">Emma Thompson</h4>
                  <p class="text-sm text-gray-500">Weekend Warrior</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Call to Action -->
      <section id="cta" class="section-padding cta-snow-theme relative overflow-hidden">
        <div class="cta-background-effect"></div>
        <div class="cta-snow-overlay"></div>
        <div class="container text-center relative z-10">
          <div class="cta-frost-glow">
            <h2 class="font-heading text-5xl font-bold mb-6 reveal-element cta-title">
              Ready to Elevate Your Ride?
            </h2>
            <p class="text-xl mb-8 reveal-element cta-subtitle">
              Join thousands of riders who trust FROSTLINE for their mountain adventures
            </p>
            <div class="flex flex-col sm:flex-row gap-6 justify-center reveal-element">
              <button class="btn-cta-primary group">
                <span class="relative z-10">Explore Collection</span>
                <div class="btn-snow-effect"></div>
              </button>
              <button class="btn-cta-secondary group">
                <span class="relative z-10">Find a Dealer</span>
                <div class="btn-ice-effect"></div>
              </button>
            </div>
          </div>
        </div>
        <div class="cta-mountain-silhouette"></div>
      </section>

      <!-- Footer -->
      <footer id="footer" class="section-padding footer-snow-theme relative overflow-hidden">
        <div class="footer-background-pattern"></div>
        <div class="footer-aurora"></div>
        <div class="container text-center relative z-10">
          <div class="footer-content-wrapper">
            <div class="footer-logo-section mb-8">
              <h3 class="font-heading text-4xl font-bold text-white mb-4 footer-logo">
                FROSTLINE
              </h3>
              <div class="footer-tagline">
                <p class="text-lg text-blue-100 italic">
                  Crafting premium snowboard experiences since 2020
                </p>
              </div>
            </div>

            <div class="footer-social-section">
              <div class="social-links-wrapper">
                <a href="#" class="social-link instagram-link">
                  <div class="social-icon">
                    <span>📸</span>
                  </div>
                  <span>Instagram</span>
                  <div class="social-hover-effect"></div>
                </a>
                <a href="#" class="social-link twitter-link">
                  <div class="social-icon">
                    <span>🐦</span>
                  </div>
                  <span>Twitter</span>
                  <div class="social-hover-effect"></div>
                </a>
                <a href="#" class="social-link youtube-link">
                  <div class="social-icon">
                    <span>📺</span>
                  </div>
                  <span>YouTube</span>
                  <div class="social-hover-effect"></div>
                </a>
              </div>
            </div>

            <div class="footer-bottom mt-8 pt-10 border-t border-blue-300/20">
              <p class="text-sm text-white">
                © 2025 FROSTLINE. All rights reserved. | Ride responsibly, adventure boldly.
              </p>
            </div>
          </div>
        </div>
        <div class="footer-snowflakes"></div>
      </footer>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>