AlpineRoboticsWebsite/index.html at main · AlpineRobotics25710/AlpineRoboticsWebsite · 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
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine Robotics - Home</title>
  <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=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap"
    rel="stylesheet">
  <link rel="icon" type="image/png" href="./images/GreenAlpineLogo.png">
  <link rel="stylesheet" href="./assets/css/main.css">
  <link rel="stylesheet" href="./assets/css/pages.css">
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-J0RD2S0XPZ"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-J0RD2S0XPZ');
  </script>
</head>

<body data-theme="light">
  <div class="page">
    <header class="site-header">
      <div class="container nav">
        <a class="nav__brand" href="index.html">
          <img src="./images/GreenAlpineLogo.png" alt="Alpine Robotics logo" width="52" height="52" decoding="async">
        </a>
        <button class="nav__toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"
          aria-controls="nav-menu" role="button" tabindex="0">
          <span class="nav__toggle-bar"></span>
          <span class="nav__toggle-bar"></span>
          <span class="nav__toggle-bar"></span>
        </button>
        <div class="nav__menu" id="nav-menu">
          <div class="nav__center">
            <nav class="nav__links" aria-label="Primary">
              <a class="nav__link nav__link--active" href="index.html">Home</a>
              <a class="nav__link" href="./pages/seasons.html">Seasons</a>
              <a class="nav__link" href="./pages/openvault.html">OpenVault</a>
              <a class="nav__link" href="./pages/team.html">Meet the Team</a>
              <a class="nav__link" href="./pages/gallery.html">Gallery</a>
              <a class="nav__link" href="./pages/sponsors.html">Sponsors</a>
            </nav>
          </div>
          <div class="nav__right">
            <button class="theme-toggle" type="button" aria-label="Toggle light or dark mode">
              <span class="theme-toggle__sun" aria-hidden="true">☀️</span>
              <span class="theme-toggle__moon" aria-hidden="true">🌙</span>
            </button>
            <a class="nav__cta" href="mailto:alpineroboticsftc@gmail.com">
              Contact Us
            </a>
          </div>
        </div>
      </div>
    </header>

    <main>
      <section id="hero" class="hero">
        <div class="hero__bg"></div>
        <div class="container hero-content">
          <div class="hero__copy">
            <span class="hero__eyebrow">FTC Robotics</span>
            <h1 class="hero__title">Alpine Robotics Team #25710</h1>
            <p class="hero__subtitle">
              Fast, reliable FTC robots from West Windsor. Mentoring future engineers and inspiring 500+ students.
            </p>
            <div class="hero__actions">
              <a class="btn btn--primary" href="./pages/seasons.html" data-gtag="cta-season">See the 2025&ndash;26
                Season</a>
              <a class="btn btn--ghost" href="./pages/seasons.html" data-gtag="cta-robots">View Previous Robots</a>
              <a class="btn btn--ghost" href="mailto:alpineroboticsftc@gmail.com" data-gtag="cta-email">Email the
                team</a>
            </div>
            <div class="metrics">
              <div class="metric">
                <div class="metric__value">FTC #25710</div>
                <div class="metric__label">Based in West Windsor</div>
              </div>
              <div class="metric">
                <div class="metric__value">2025&ndash;26</div>
                <div class="metric__label">DECODE season focus</div>
              </div>
              <div class="metric">
                <div class="metric__value">2nd Year</div>
                <div class="metric__label">
                  Competing since 2024
                </div>
              </div>
            </div>
          </div>

          <div class="hero__visual">
            <div class="orbital"></div>
            <div class="hero__card">
              <div class="hero__badge">DECODE 2025&ndash;26</div>
              <div class="hero__data">
                <div class="hero__data-row">
                  <span>Focus</span>
                  <strong>Auton + fast cycles</strong>
                </div>
                <div class="hero__data-row">
                  <span>Goal</span>
                  <strong>Inspire 500+ students</strong>
                </div>
                <div class="hero__data-row">
                  <span>FTC</span>
                  <strong>Team #25710</strong>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="hero-illustration">
          <svg class="forest-svg" viewBox="0 0 1600 520" preserveAspectRatio="xMidYMax slice" aria-hidden="true">
            <defs>
              <linearGradient id="foregroundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="var(--foreground-start)" />
                <stop offset="100%" stop-color="var(--foreground-end)" />
              </linearGradient>
              <symbol id="treeBack" viewBox="0 0 60 120">
                <path class="tree__shape" d="M30 0 L55 78 L30 60 L5 78 Z" />
                <path class="tree__shape--trunk" d="M26 60 h8 v34 a2 2 0 0 1-8 0z" />
              </symbol>
              <symbol id="treeFront" viewBox="0 0 70 140">
                <path class="tree__shape" d="M35 0 L67 95 L35 76 L3 95 Z" />
                <path class="tree__shape--trunk" d="M30 76 h10 v40 a2 2 0 0 1-10 0z" />
              </symbol>
            </defs>

            <g class="parallax-layer layer0" id="mountains-far">
              <!-- Main 3-peak Alpine ridge -->
              <path class="mountain-main"
                d="M0 300 L280 210 L460 260 L800 90 L1120 260 L1350 200 L1520 280 L1600 320 L1600 520 L0 520 Z " />

              <!-- Simple two-tone shadow on the right-hand faces -->
              <path class="mountain-shade"
                d="M800 90 L920 180 L1120 260 L1350 200 L1520 280 L1600 320 L1600 520 L700 520 Z" />
            </g>

            <g class="parallax-layer layer1" id="mountains-back">
              <path fill="var(--mountain-back)"
                d="M0 360 L240 320 L520 340 L780 322 L1040 342 L1300 328 L1600 340 L1600 520 L0 520 Z" />
              <use href="#treeBack" x="0" y="280" transform="scale(0.82)" opacity="0.72" />
              <use href="#treeBack" x="140" y="296" transform="scale(0.78)" opacity="0.7" />
              <use href="#treeBack" x="280" y="288" transform="scale(0.86)" opacity="0.76" />
              <use href="#treeBack" x="420" y="300" transform="scale(0.8)" opacity="0.72" />
              <use href="#treeBack" x="560" y="284" transform="scale(0.9)" opacity="0.78" />
              <use href="#treeBack" x="700" y="294" transform="scale(0.84)" opacity="0.74" />
              <use href="#treeBack" x="840" y="286" transform="scale(0.92)" opacity="0.8" />
              <use href="#treeBack" x="980" y="298" transform="scale(0.86)" opacity="0.76" />
              <use href="#treeBack" x="1120" y="286" transform="scale(0.9)" opacity="0.78" />
              <use href="#treeBack" x="1260" y="300" transform="scale(0.82)" opacity="0.74" />
              <use href="#treeBack" x="1400" y="288" transform="scale(0.88)" opacity="0.76" />
              <use href="#treeBack" x="1540" y="296" transform="scale(0.84)" opacity="0.72" />
            </g>
            <g class="parallax-layer layer2" id="mountains-mid">
              <path fill="var(--mountain-mid)"
                d="M0 390 L220 358 L460 372 L700 360 L960 378 L1220 366 L1460 382 L1600 372 L1600 520 L0 520 Z" />
              <use href="#treeBack" x="20" y="318" transform="scale(0.94)" opacity="0.8" />
              <use href="#treeBack" x="160" y="332" transform="scale(1.0)" opacity="0.84" />
              <use href="#treeBack" x="300" y="322" transform="scale(0.92)" opacity="0.82" />
              <use href="#treeBack" x="440" y="336" transform="scale(1.04)" opacity="0.86" />
              <use href="#treeBack" x="580" y="326" transform="scale(0.98)" opacity="0.84" />
              <use href="#treeBack" x="720" y="340" transform="scale(1.06)" opacity="0.88" />
              <use href="#treeBack" x="860" y="330" transform="scale(0.98)" opacity="0.84" />
              <use href="#treeBack" x="1000" y="344" transform="scale(1.08)" opacity="0.9" />
              <use href="#treeBack" x="1140" y="334" transform="scale(1.0)" opacity="0.86" />
              <use href="#treeBack" x="1280" y="348" transform="scale(1.1)" opacity="0.92" />
              <use href="#treeBack" x="1420" y="338" transform="scale(1.02)" opacity="0.86" />
              <use href="#treeBack" x="1560" y="352" transform="scale(1.08)" opacity="0.9" />
            </g>
            <g class="parallax-layer layer3" id="trees-back" opacity="0.9">
              <use href="#treeBack" x="0" y="340" transform="scale(0.96)" />
              <use href="#treeBack" x="120" y="332" transform="scale(0.9)" />
              <use href="#treeBack" x="240" y="346" transform="scale(1.0)" />
              <use href="#treeBack" x="360" y="338" transform="scale(0.92)" />
              <use href="#treeBack" x="480" y="350" transform="scale(0.98)" />
              <use href="#treeBack" x="600" y="334" transform="scale(0.9)" />
              <use href="#treeBack" x="720" y="346" transform="scale(1.0)" />
              <use href="#treeBack" x="840" y="336" transform="scale(0.94)" />
              <use href="#treeBack" x="960" y="350" transform="scale(0.98)" />
              <use href="#treeBack" x="1080" y="334" transform="scale(0.9)" />
              <use href="#treeBack" x="1200" y="348" transform="scale(0.96)" />
              <use href="#treeBack" x="1320" y="338" transform="scale(0.92)" />
              <use href="#treeBack" x="1440" y="352" transform="scale(1.0)" />
              <use href="#treeBack" x="1560" y="336" transform="scale(0.94)" />
            </g>
            <g class="parallax-layer layer4" id="trees-mid" opacity="0.95">
              <use href="#treeBack" x="40" y="360" transform="scale(1.12)" />
              <use href="#treeBack" x="160" y="352" transform="scale(1.06)" />
              <use href="#treeBack" x="280" y="368" transform="scale(1.16)" />
              <use href="#treeBack" x="400" y="356" transform="scale(1.08)" />
              <use href="#treeBack" x="520" y="372" transform="scale(1.18)" />
              <use href="#treeBack" x="640" y="360" transform="scale(1.1)" />
              <use href="#treeBack" x="760" y="376" transform="scale(1.2)" />
              <use href="#treeBack" x="880" y="364" transform="scale(1.12)" />
              <use href="#treeBack" x="1000" y="380" transform="scale(1.22)" />
              <use href="#treeBack" x="1120" y="368" transform="scale(1.16)" />
              <use href="#treeBack" x="1240" y="384" transform="scale(1.24)" />
              <use href="#treeBack" x="1360" y="370" transform="scale(1.14)" />
              <use href="#treeBack" x="1480" y="386" transform="scale(1.26)" />
              <use href="#treeBack" x="1600" y="372" transform="scale(1.18)" />
            </g>
            <g class="parallax-layer layer5" id="trees-front" opacity="1">
              <use href="#treeFront" x="0" y="410" transform="scale(1.32)" />
              <use href="#treeFront" x="140" y="422" transform="scale(1.26)" />
              <use href="#treeFront" x="280" y="434" transform="scale(1.36)" />
              <use href="#treeFront" x="420" y="420" transform="scale(1.3)" />
              <use href="#treeFront" x="560" y="438" transform="scale(1.38)" />
              <use href="#treeFront" x="700" y="424" transform="scale(1.32)" />
              <use href="#treeFront" x="840" y="440" transform="scale(1.42)" />
              <use href="#treeFront" x="980" y="428" transform="scale(1.34)" />
              <use href="#treeFront" x="1120" y="446" transform="scale(1.44)" />
              <use href="#treeFront" x="1260" y="432" transform="scale(1.36)" />
              <use href="#treeFront" x="1400" y="448" transform="scale(1.46)" />
              <use href="#treeFront" x="1540" y="436" transform="scale(1.38)" />
            </g>
            <g class="parallax-layer layer6" id="foreground-gradient">
              <rect x="0" y="470" width="1600" height="90" fill="url(#foregroundGradient)" />
            </g>
          </svg>
        </div>
      </section>

      <section class="section section--first-info">
        <div class="container">
          <div class="section__header">
            <h2 class="section__title">What is FIRST?</h2>
            <p class="section__description first-desc">
              FIRST (For Inspiration and Recognition of Science and Technology) is an international robotics program
              that prepares students for the future through hands-on engineering, teamwork, and real-world problem
              solving. FIRST inspires students to pursue STEM by offering a progression of programs for all ages,
              including FTC, the league our team competes in.
            </p>
          </div>

          <div class="card-grid">
            <article class="card">
              <h3 class="card__title">Inspiration</h3>
              <p class="card__text">
                FIRST encourages innovation, creativity, and leadership by giving students opportunities to solve
                technical challenges in real teams.
              </p>
            </article>

            <article class="card">
              <h3 class="card__title">Coopertition</h3>
              <p class="card__text">
                Coopertition® encourages teams to help one another, even as they compete, showing kindness, sharing
                knowledge, and lifting others up to improve the entire robotics community.
              </p>
            </article>

            <article class="card">
              <h3 class="card__title">Gracious Professionalism</h3>
              <p class="card__text">
                Gracious Professionalism® combines high-quality work with empathy, respect, and integrity, encouraging
                teams to compete fiercely while treating others with kindness and respect.
              </p>
            </article>

            <article class="card">
              <h3 class="card__title">Community</h3>
              <p class="card__text">
                FIRST emphasizes outreach, mentorship, and volunteerism, helping students strengthen STEM access in
                their communities.
              </p>
            </article>
          </div>
        </div>
      </section>

      <section class="section mission-section">
        <div class="container">
          <div class="mission-statement__inner">
            <h2 class="section__title mission-title">Mission Statement</h2>
            <p class="mission-subtitle">Engineering with a passion.</p>
            <p class="mission-text">
              We, at Alpine Robotics, wish to reach a total of 500 students in the next 3 years, we call this goal
              engineering with a passion. Even if we inspire just one child to pursue a STEM career, our journey in FTC
              will have been worthwhile.
              <span class="mission-tagline">It's not just about us— it's about shaping the future we envision.</span>
            </p>
          </div>
        </div>
      </section>

      <section class="section section--whats-next">
        <div class="container">
          <div class="section__header">
            <h2 class="section__title">What's next</h2>
            <p class="section__description">
              Follow our DECODE season, see past bots and the people building them, and get involved as a sponsor or
              mentor.
            </p>
          </div>

          <div class="card-grid">
            <!-- 1. Seasons -->
            <article class="card whats-next-card">
              <h3 class="card__title">Seasons</h3>
              <p class="card__text">
                Explore the 2025–26 DECODE season, match schedule, robots, and build logs.
              </p>
              <a class="card__link" href="./pages/seasons.html">
                Go to the Seasons page
              </a>
            </article>

            <!-- 2. OpenVault -->
            <article class="card whats-next-card">
              <h3 class="card__title">OpenVault</h3>
              <p class="card__text">
                Our open-source hub with CAD, code, and resources for FTC teams around the world.
              </p>
              <a class="card__link" href="./pages/openvault.html">
                Visit OpenVault
              </a>
            </article>

            <!-- 3. Meet the Team -->
            <article class="card whats-next-card">
              <h3 class="card__title">Meet the Team</h3>
              <p class="card__text">
                Drivers, builders, programmers, and outreach — meet the people behind Alpine.
              </p>
              <a class="card__link" href="./pages/team.html">
                Meet the team
              </a>
            </article>

            <!-- 4. Gallery -->
            <article class="card whats-next-card">
              <h3 class="card__title">Gallery</h3>
              <p class="card__text">
                Competition highlights, build sessions, community events, and behind-the-scenes moments.
              </p>
              <a class="card__link" href="./pages/gallery.html">
                Open the gallery
              </a>
            </article>

            <!-- 5. Sponsors -->
            <article class="card whats-next-card">
              <h3 class="card__title">Sponsors &amp; Partners</h3>
              <p class="card__text">
                See the companies and organizations that power our season and student outreach.
              </p>
              <a class="card__link" href="./pages/sponsors.html">
                View sponsors &amp; partners
              </a>
            </article>
          </div>
        </div>
      </section>

    </main>

    <footer class="site-footer">
      <div class="container footer__content">
        <span>Alpine Robotics &bull; FTC Team #25710</span>
        <span>Contact: <a href="mailto:alpineroboticsftc@gmail.com">alpineroboticsftc@gmail.com</a></span>
      </div>
    </footer>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
  <script src="./assets/js/main.js" type="module"></script>
</body>

</html>