Skip to content

Commit 80e5ab7

Browse files
sethherrsethherr
authored
Home page update (#2992)
1 parent 9aa6dd0 commit 80e5ab7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+2866
-42
lines changed

‎.herb.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ files:
2121
#
2222
# # Patterns to exclude (can exclude defaults too)
2323
exclude:
24+
- '2025_redesign/**/*'
2425
- 'public/**/*'
2526
- 'tmp/**/*'
2627
- 'vendor/**/*'

‎2025_redesign/index.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>The Bike Index</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<nav class="navbar">
11+
<div class="nav-container">
12+
<div class="logo-section">
13+
<img src="assets/bike index logo_white-blue.png" alt="Bike Index Logo" class="logo">
14+
<span class="logo-divider">|</span>
15+
<a href="https://bikeindex.org/news/bike-index--now-a-nonprofit" class="tagline" target="_blank">
16+
<span>the non-profit</span>
17+
<span>bike registry</span>
18+
</a>
19+
</div>
20+
<ul class="nav-menu">
21+
<li class="dropdown">
22+
<a href="about.html">About</a>
23+
<ul class="dropdown-menu">
24+
<li><a href="#who-we-are">Who We Are</a></li>
25+
<li><a href="#who-were-for">Who We're For</a></li>
26+
</ul>
27+
</li>
28+
<li class="dropdown">
29+
<a href="database.html">Search</a>
30+
<ul class="dropdown-menu">
31+
<li><a href="stolen-bike.html">Stolen Bikes</a></li>
32+
<li><a href="#marketplace">Marketplace</a></li>
33+
</ul>
34+
</li>
35+
<li><a href="#news">News</a></li>
36+
<li><a href="stolen-bike.html">Stolen bike?</a></li>
37+
<li><a href="faq.html">FAQ</a></li>
38+
<li class="menu-divider">|</li>
39+
<li><a href="#login" class="login-btn">Login</a></li>
40+
<li><a href="#signup" class="signup-btn">Sign up</a></li>
41+
</ul>
42+
</div>
43+
</nav>
44+
45+
<main>
46+
<!-- Section 1: Hero Section -->
47+
<section class="hero-section">
48+
<div class="bike-tiles-grid" id="bikeTilesGrid"></div>
49+
<div class="hero-content">
50+
<div class="hero-stats">
51+
<div class="stat-box">
52+
<div class="stat-number" data-target="32">$0M+</div>
53+
<div class="stat-label">Total recovery value</div>
54+
</div>
55+
<div class="stat-box">
56+
<div class="stat-label">Since</div>
57+
<div class="stat-number">2013</div>
58+
</div>
59+
<div class="stat-box">
60+
<div class="stat-number" data-target="1795">0+</div>
61+
<div class="stat-label">Trusted organizations</div>
62+
</div>
63+
</div>
64+
<h1>The bike registry that works.</h1>
65+
</div>
66+
</section>
67+
68+
<!-- Section 2: Bike Index is for -->
69+
<section class="for-section">
70+
<div class="container">
71+
<h2>Bike Index is for:</h2>
72+
<div class="buttons-grid">
73+
<div class="category-button">
74+
<div class="img-wrapper">
75+
<img src="assets/bikeshop.gif" alt="Bike Shops">
76+
</div>
77+
<span>Bike Shops</span>
78+
</div>
79+
<div class="category-button">
80+
<div class="img-wrapper">
81+
<img src="assets/cities.gif" alt="Cities">
82+
</div>
83+
<span>Cities</span>
84+
</div>
85+
<div class="category-button">
86+
<div class="img-wrapper">
87+
<img src="assets/unis.gif" alt="Universities">
88+
</div>
89+
<span>Universities</span>
90+
</div>
91+
<div class="category-button">
92+
<div class="img-wrapper">
93+
<img src="assets/community.gif" alt="Community Groups">
94+
</div>
95+
<span>Community Groups</span>
96+
</div>
97+
<div class="category-button">
98+
<div class="img-wrapper">
99+
<img src="assets/theft-victims.gif" alt="Theft Victims">
100+
</div>
101+
<span>Theft Victims</span>
102+
</div>
103+
</div>
104+
</div>
105+
</section>
106+
107+
<!-- Section 3: Stolen Bikes -->
108+
<section class="stolen-bikes-section">
109+
<div class="container">
110+
<h2>Stolen Bikes</h2>
111+
<h3>WE'VE HELPED RECOVER:</h3>
112+
113+
<div class="recovery-showcase">
114+
<div class="bike-container">
115+
<img src="assets/black-box.png" alt="Bike recovery showcase" class="black-box">
116+
<div class="bike-image-placeholder">
117+
<div class="bike-photo" id="bikePhoto">
118+
<!-- Placeholder for bike and owner images -->
119+
<div class="placeholder-content">Bike & Owner Photo</div>
120+
</div>
121+
</div>
122+
</div>
123+
124+
<div class="testimonial-container">
125+
<div class="testimonial-box">
126+
<img src="assets/location-pin_purple.png" alt="Location pin" class="location-pin">
127+
<div class="testimonial-content" id="testimonialContent">
128+
<div class="user-info">
129+
<span class="user-name" id="userName">Sarah Johnson, Seattle</span>
130+
</div>
131+
<div class="recovery-date" id="recoveryDate">
132+
Bike recovered on 03.15.2024
133+
</div>
134+
<div class="testimonial-text" id="testimonialText">
135+
"I couldn't believe it when I got the call that my bike was found! The Bike Index made it so easy to report and helped connect me with the person who found it."
136+
</div>
137+
</div>
138+
<div class="testimonial-nav">
139+
<button class="nav-arrow prev" id="prevTestimonial">‹</button>
140+
<button class="nav-arrow next" id="nextTestimonial">›</button>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
</section>
147+
148+
<!-- Section 4: What happens if my bike gets stolen -->
149+
<section class="stolen-question-section">
150+
<div class="container">
151+
<div class="stolen-question-content">
152+
<div class="bike-animation-container">
153+
<div class="bike-transition">
154+
<img src="assets/bike-index-registered-single-loop.gif" alt="Registered bike animation" class="bike-registered" id="bikeRegistered">
155+
<img src="assets/bike-index-stolen.png" alt="Stolen bike" class="bike-stolen" id="bikeStolen">
156+
</div>
157+
</div>
158+
<div class="question-text">
159+
<h2>What happens if my bike gets stolen?</h2>
160+
</div>
161+
</div>
162+
163+
<!-- Recovery Process Steps -->
164+
<div class="recovery-process">
165+
<div class="crank-animation-container">
166+
<div class="crank-wrapper">
167+
<img src="assets/Step1.gif" alt="Step background" class="step-background" id="stepBackground">
168+
<img src="assets/bike-crank.png" alt="Bike crank" class="bike-crank" id="bikeCrank">
169+
</div>
170+
</div>
171+
<div class="steps-content">
172+
<div class="step-text" id="stepText">
173+
<h3>Step 1: REGISTER YOUR BIKE</h3>
174+
<p>It's simple. Submit your name, bike manufacturer, serial number, and component information to enter your bike into the most widely used bike registry on the planet.</p>
175+
</div>
176+
<div class="step-navigation">
177+
<button class="step-arrow prev" id="prevStep">‹</button>
178+
<span class="step-indicator" id="stepIndicator">1 / 4</span>
179+
<button class="step-arrow next" id="nextStep">›</button>
180+
</div>
181+
</div>
182+
</div>
183+
</div>
184+
</section>
185+
</main>
186+
187+
<script src="script.js"></script>
188+
</body>
189+
</html>

0 commit comments

Comments
 (0)