salttide/about.html at main · sp4mm4ge/salttide · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About — SALT & TIDE</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500;600&family=Bebas+Neue&display=swap" rel="stylesheet">
</head>
<body>

  <!-- Navigation -->
  <nav class="main-nav" id="mainNav">
    <div class="nav-inner">
      <a href="index.html" class="nav-logo">SALT<span>&</span>TIDE</a>
      <div class="nav-links">
        <a href="index.html">Home</a>
        <a href="shop.html">Shop</a>
        <a href="lookbook.html">Lookbook</a>
        <a href="about.html" class="active">About</a>
        <a href="contact.html">Contact</a>
      </div>
      <div class="nav-actions">
        <button class="nav-menu-btn" id="menuToggle" aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </div>
    </div>
  </nav>

  <div class="mobile-menu" id="mobileMenu">
    <div class="mobile-menu-inner">
      <a href="index.html">Home</a>
      <a href="shop.html">Shop</a>
      <a href="lookbook.html">Lookbook</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </div>
  </div>

  <!-- About Hero -->
  <header class="about-hero">
    <div class="container">
      <div class="about-hero-content">
        <span class="section-tag anim-up" style="--delay: 0.2s">Our Story</span>
        <h1 class="about-hero-title anim-up" style="--delay: 0.4s">
          Built on the belief that the best sessions<br>
          start with <em>better</em> gear.
        </h1>
      </div>
    </div>
  </header>

  <!-- Story Section -->
  <section class="about-story">
    <div class="container">
      <div class="story-grid">
        <div class="story-visual anim-reveal">
            <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&h=800&fit=crop&auto=format" alt="Tropical ocean wave breaking" loading="lazy">

        </div>
        <div class="story-text">
          <h2 class="anim-reveal">The Beginning</h2>
          <p class="anim-reveal">Salt & Tide started in a garage in San Clemente in 2021 — two surfers, a shaping bay, and a deep frustration with mass-produced boards that couldn't hold a line. The idea was simple: why settle for off-the-rack when you could ride something shaped with intention?</p>
          <p class="anim-reveal">We set out to close that gap. Every board we shape starts with a blank — sourced from the best foam in the industry — and ends with a ride that feels like an extension of your body. That's the whole idea: gear that performs so well, you stop thinking about equipment and start thinking about the wave.</p>
          <p class="anim-reveal">Five years in, we've grown from two shapers to a crew of twelve, but the approach hasn't changed. Each board is shaped in-house, glassed by hand, and produced in small runs so we can stay close to every detail. Our wetsuits and apparel follow the same philosophy — performance-first, built to last.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Values -->
  <section class="about-values">
    <div class="container">
      <div class="section-header">
        <span class="section-tag anim-reveal">What We Stand For</span>
        <h2 class="section-title anim-reveal">Our Principles</h2>
      </div>
      <div class="values-grid">
        <div class="value-card anim-reveal" style="--delay: 0.1s">
          <span class="value-number">01</span>
          <h3>Shape First</h3>
          <p>Great rides start with great shaping. We work with premium Clark and US Blanks foam and hand-shape every board to ensure it performs exactly the way it should in the water.</p>
        </div>
        <div class="value-card anim-reveal" style="--delay: 0.2s">
          <span class="value-number">02</span>
          <h3>Small Batch Runs</h3>
          <p>We produce in small batches — typically 20 to 50 units per model. It means we sell out, but it also means every board gets the attention it deserves from blank to fin box.</p>
        </div>
        <div class="value-card anim-reveal" style="--delay: 0.3s">
          <span class="value-number">03</span>
          <h3>Performance Over Hype</h3>
          <p>No flashy logos. No gimmick tech. Our gear is designed to perform in the water for years, not sit in a rack looking pretty. The goal is equipment you trust, not equipment you baby.</p>
        </div>
        <div class="value-card anim-reveal" style="--delay: 0.4s">
          <span class="value-number">04</span>
          <h3>Direct Pricing</h3>
          <p>We sell direct. No surf shop markups, no distributor margins. What you pay reflects the actual cost of shaping something well — nothing more, nothing less.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Marquee -->
  <section class="about-marquee">
    <div class="marquee-track">
      <div class="marquee-content">
        <span>Shaped in San Clemente</span>
        <span class="marquee-dot"></span>
        <span>Premium Foam & Resin</span>
        <span class="marquee-dot"></span>
        <span>Small Batch Production</span>
        <span class="marquee-dot"></span>
        <span>Direct to You</span>
        <span class="marquee-dot"></span>
        <span>Shaped in San Clemente</span>
        <span class="marquee-dot"></span>
        <span>Premium Foam & Resin</span>
        <span class="marquee-dot"></span>
        <span>Small Batch Production</span>
        <span class="marquee-dot"></span>
        <span>Direct to You</span>
        <span class="marquee-dot"></span>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="about-cta">
    <div class="container">
      <div class="about-cta-inner anim-reveal">
        <h2>See what we've been shaping.</h2>
        <div class="about-cta-buttons">
          <a href="shop.html" class="btn btn-primary">Shop the Collection</a>
          <a href="lookbook.html" class="btn btn-outline">View Lookbook</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a href="index.html" class="footer-logo">SALT<span>&</span>TIDE</a>
          <p>Premium surf gear for those who live by the tide. Shaped with care in Southern California.</p>
        </div>
        <div class="footer-col">
          <h4>Shop</h4>
          <a href="shop.html">All Products</a>
          <a href="#" data-shop-link="surfboards">Surfboards</a>
          <a href="#" data-shop-link="wetsuits">Wetsuits</a>
          <a href="#" data-shop-link="boardshorts">Boardshorts</a>
          <a href="#" data-shop-link="accessories">Accessories</a>
        </div>
        <div class="footer-col">
          <h4>Company</h4>
          <a href="about.html">Our Story</a>
          <a href="lookbook.html">Lookbook</a>
          <a href="contact.html">Contact</a>
          <a href="#">Careers</a>
        </div>
        <div class="footer-col">
          <h4>Help</h4>
          <a href="#">Shipping & Returns</a>
          <a href="#">Size Guide</a>
          <a href="#">FAQ</a>
          <a href="#">Terms of Service</a>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2026 Salt & Tide. All rights reserved.</p>
        <div class="footer-social">
          <a href="#" aria-label="Instagram">IG</a>
          <a href="#" aria-label="Twitter">TW</a>
          <a href="#" aria-label="TikTok">TK</a>
        </div>
      </div>
    </div>
  </footer>

  <script src="config.js"></script>
  <script src="main.js"></script>
</body>
</html>