Skip to content

Commit 2e81c33

Browse files
thefirstsparkclaude
thefirstspark
and
claude
committed
Add /shop — on-site storefront with direct Whop checkout links
New products featured (Pattern Key $22, Sigilcraft Bundle $33, 7-Day Protocol $7.77) plus the full paid catalog. Every card goes straight to whop.com/checkout, bypassing the community-style Whop store page. Wired into homepage nav + footer and sitemap-core. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 parent c674e96 commit 2e81c33

3 files changed

Lines changed: 326 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1470,6 +1470,7 @@
14701470
<a href="what-is-a-soul-map.html" class="nav-invest">What Is a Soul Map</a>
14711471
<a href="https://frequency.thefirstspark.shop" target="_blank" rel="noopener noreferrer" class="nav-invest">Freq Match</a>
14721472
<a href="/dark-shadows/" class="nav-invest">Dark Shadows</a>
1473+
<a href="shop.html" class="nav-invest">Shop</a>
14731474
<a href="https://sparkverse.thefirstspark.shop/" target="_blank" rel="noopener noreferrer" class="nav-sv">Sparkverse</a>
14741475
<a href="map.html" class="nav-cta">Soul Map · $22</a>
14751476
</div>
@@ -1715,6 +1716,7 @@ <h2 class="sec-title">Forged, not invented.</h2>
17151716
<a href="/" class="footer-logo">THE FIRST SPARK</a>
17161717
<div class="footer-links">
17171718
<a href="map.html">Soul Map · $22</a>
1719+
<a href="shop.html">Shop</a>
17181720
<a href="what-is-a-soul-map.html">What Is a Soul Map</a>
17191721
<a href="https://frequency.thefirstspark.shop" target="_blank" rel="noopener noreferrer">Freq Match</a>
17201722
<a href="https://sparkverse.thefirstspark.shop/" target="_blank" rel="noopener noreferrer">Sparkverse</a>

‎shop.html‎

Lines changed: 318 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,318 @@
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 Shop — The First Spark</title>
7+
<meta name="description" content="Instruments, not merch. Workbooks, protocols, bundles, and readings from The First Spark — instant digital delivery, yours forever.">
8+
<link rel="canonical" href="https://thefirstspark.shop/shop.html">
9+
<link rel="icon" href="/favicon.ico">
10+
<meta property="og:type" content="website">
11+
<meta property="og:title" content="The Shop — The First Spark">
12+
<meta property="og:description" content="Instruments, not merch. Workbooks, protocols, bundles, and readings — instant digital delivery, yours forever.">
13+
<meta property="og:url" content="https://thefirstspark.shop/shop.html">
14+
<meta property="og:image" content="https://thefirstspark.shop/og-home.png">
15+
<meta name="twitter:card" content="summary_large_image">
16+
17+
<!-- Google Tag Manager -->
18+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-K4TKPMG9');</script>
19+
<!-- End Google Tag Manager -->
20+
21+
<!-- Whop Pixel -->
22+
<script>!function(w,d,s,u,n,a,b){if(w[n])return;a=w[n]={q:[],t:+new Date,s:[],o:u,track:function(){a.q.push([+new Date].concat([].slice.call(arguments)))},setScope:function(){a.s=[].slice.call(arguments).filter(function(x){return typeof x==="string"});a.q.push([+new Date,"setScope"].concat(a.s))},scope:function(){var c=[].slice.call(arguments);return{track:function(){a.q.push([+new Date].concat([].slice.call(arguments)).concat([{__scope:c}]))}}}};b=d.createElement(s);b.async=1;b.src=u+"/s.js";d.getElementsByTagName(s)[0].parentNode.insertBefore(b,d.getElementsByTagName(s)[0])}(window,document,"script","https://t.whop.tw","whop");whop.setScope("biz_0xcayhWXVnKO9y");whop.track("page");</script>
23+
24+
<link rel="preconnect" href="https://fonts.googleapis.com">
25+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
26+
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
27+
28+
<style>
29+
:root {
30+
--void: #05060a;
31+
--void-2: #0a0c14;
32+
--bone: #f4ede0;
33+
--ember: #ff5a1f;
34+
--gold: #ffc857;
35+
--plasma: #7df9ff;
36+
--violet: #b794ff;
37+
--ash: #6b6a6e;
38+
--line: rgba(244, 237, 224, 0.12);
39+
}
40+
* { margin: 0; padding: 0; box-sizing: border-box; }
41+
html { scroll-behavior: smooth; }
42+
body {
43+
background: var(--void);
44+
color: var(--bone);
45+
font-family: 'Cormorant Garamond', serif;
46+
font-weight: 300;
47+
line-height: 1.6;
48+
-webkit-font-smoothing: antialiased;
49+
}
50+
.mono {
51+
font-family: 'JetBrains Mono', monospace;
52+
font-size: 10px;
53+
letter-spacing: .35em;
54+
text-transform: uppercase;
55+
}
56+
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
57+
58+
/* NAV */
59+
nav {
60+
position: sticky; top: 0; z-index: 50;
61+
display: flex; justify-content: space-between; align-items: center;
62+
padding: 18px 28px;
63+
background: rgba(5, 6, 10, 0.8);
64+
backdrop-filter: blur(12px);
65+
border-bottom: 1px solid var(--line);
66+
}
67+
nav a { text-decoration: none; }
68+
.nav-logo {
69+
font-family: 'JetBrains Mono', monospace;
70+
font-size: 11px; letter-spacing: .4em; color: var(--bone);
71+
}
72+
.nav-links { display: flex; gap: 26px; align-items: center; }
73+
.nav-links a {
74+
font-family: 'JetBrains Mono', monospace;
75+
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
76+
color: var(--ash); transition: color .2s;
77+
}
78+
.nav-links a:hover { color: var(--gold); }
79+
.nav-links a.cta {
80+
color: var(--void); background: var(--gold);
81+
padding: 8px 14px; border-radius: 2px;
82+
}
83+
.nav-links a.cta:hover { background: var(--ember); color: var(--bone); }
84+
85+
/* HEADER */
86+
header { padding: 96px 0 64px; text-align: center; }
87+
.sec-label { color: var(--ember); margin-bottom: 22px; }
88+
.sec-label::before {
89+
content: ''; display: inline-block; width: 7px; height: 7px;
90+
border-radius: 50%; background: var(--ember); margin-right: 12px;
91+
vertical-align: 1px; animation: pulse 2.4s infinite;
92+
}
93+
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
94+
h1 {
95+
font-size: clamp(2.6rem, 6vw, 4.4rem);
96+
font-weight: 300; line-height: 1.1; margin-bottom: 20px;
97+
}
98+
h1 em { font-style: italic; color: var(--gold); }
99+
.header-sub {
100+
font-size: 1.25rem; color: var(--ash);
101+
max-width: 560px; margin: 0 auto;
102+
}
103+
.header-sub a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(255,200,87,.35); }
104+
105+
/* SECTIONS */
106+
section { padding: 48px 0 72px; }
107+
.section-head {
108+
display: flex; align-items: baseline; gap: 18px;
109+
border-bottom: 1px solid var(--line);
110+
padding-bottom: 14px; margin-bottom: 36px;
111+
}
112+
.section-head .num { color: var(--ember); }
113+
.section-head h2 {
114+
font-size: 1.9rem; font-weight: 300; font-style: italic;
115+
}
116+
117+
/* PRODUCT GRID */
118+
.grid {
119+
display: grid;
120+
grid-template-columns: repeat(3, 1fr);
121+
gap: 1px;
122+
background: var(--line);
123+
border: 1px solid var(--line);
124+
}
125+
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
126+
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
127+
.product {
128+
display: flex; flex-direction: column;
129+
background: var(--void-2);
130+
padding: 30px 26px 26px;
131+
text-decoration: none; color: var(--bone);
132+
transition: background .25s;
133+
position: relative;
134+
}
135+
.product:hover { background: #10131f; }
136+
.product .kind { color: var(--ash); margin-bottom: 16px; }
137+
.product .new {
138+
position: absolute; top: 30px; right: 26px;
139+
color: var(--ember);
140+
}
141+
.product h3 {
142+
font-size: 1.55rem; font-weight: 400; line-height: 1.2;
143+
margin-bottom: 10px;
144+
}
145+
.product h3 em { font-style: italic; color: var(--gold); }
146+
.product p {
147+
font-size: 1.05rem; color: var(--ash); flex-grow: 1;
148+
margin-bottom: 22px;
149+
}
150+
.product .row {
151+
display: flex; justify-content: space-between; align-items: center;
152+
border-top: 1px solid var(--line); padding-top: 16px;
153+
}
154+
.product .price {
155+
font-family: 'JetBrains Mono', monospace;
156+
font-size: 13px; letter-spacing: .1em; color: var(--bone);
157+
}
158+
.product .price small { color: var(--ash); font-size: 10px; }
159+
.product .go {
160+
font-family: 'JetBrains Mono', monospace;
161+
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
162+
color: var(--gold);
163+
}
164+
.product:hover .go { color: var(--ember); }
165+
166+
/* FREE STRIP */
167+
.free-strip {
168+
border: 1px solid var(--line);
169+
padding: 30px 28px;
170+
display: flex; justify-content: space-between; align-items: center;
171+
gap: 20px; flex-wrap: wrap;
172+
}
173+
.free-strip .txt { font-size: 1.15rem; color: var(--ash); }
174+
.free-strip .txt strong { color: var(--bone); font-weight: 400; }
175+
.free-strip a.btn {
176+
font-family: 'JetBrains Mono', monospace;
177+
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
178+
color: var(--void); background: var(--gold);
179+
padding: 12px 20px; text-decoration: none; border-radius: 2px;
180+
white-space: nowrap;
181+
}
182+
.free-strip a.btn:hover { background: var(--ember); color: var(--bone); }
183+
184+
.delivery-note {
185+
text-align: center; color: var(--ash);
186+
font-size: .95rem; margin-top: 40px;
187+
}
188+
189+
/* FOOTER */
190+
footer {
191+
border-top: 1px solid var(--line);
192+
padding: 40px 0 56px; text-align: center;
193+
}
194+
footer .mono { color: var(--ash); }
195+
footer a { color: var(--gold); text-decoration: none; }
196+
</style>
197+
</head>
198+
<body>
199+
<!-- Google Tag Manager (noscript) -->
200+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K4TKPMG9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
201+
<!-- End Google Tag Manager (noscript) -->
202+
203+
<nav>
204+
<a href="/" class="nav-logo">THE FIRST SPARK</a>
205+
<div class="nav-links">
206+
<a href="/">Home</a>
207+
<a href="/dark-shadows/">Dark Shadows</a>
208+
<a href="https://sparkverse.thefirstspark.shop/" target="_blank" rel="noopener noreferrer">Sparkverse</a>
209+
<a href="map.html" class="cta">Soul Map · $22</a>
210+
</div>
211+
</nav>
212+
213+
<header>
214+
<div class="wrap">
215+
<div class="sec-label mono">The Shop</div>
216+
<h1>Instruments, <em>not merch.</em></h1>
217+
<p class="header-sub">Every item below is digital, delivered instantly, and yours forever. Checkout is secure via Whop — card, Apple&nbsp;Pay, or crypto.</p>
218+
</div>
219+
</header>
220+
221+
<section id="new">
222+
<div class="wrap">
223+
<div class="section-head">
224+
<span class="num mono">001</span>
225+
<h2>Just dropped</h2>
226+
</div>
227+
<div class="grid">
228+
<a class="product" href="https://whop.com/checkout/plan_CrdQjQTmpyv9Q">
229+
<span class="new mono">New</span>
230+
<div class="kind mono">Interactive App</div>
231+
<h3>The Pattern Key — <em>Frequency Journal</em></h3>
232+
<p>A daily frequency journal you own outright — one self-contained app that runs entirely in your browser. No account. No subscription. Your data never leaves your device.</p>
233+
<div class="row"><span class="price">$22 <small>· once</small></span><span class="go">Get it →</span></div>
234+
</a>
235+
<a class="product" href="https://whop.com/checkout/plan_olxu91Sf5xUZ6">
236+
<span class="new mono">New</span>
237+
<div class="kind mono">Bundle</div>
238+
<h3>Sigilcraft <em>System Bundle</em></h3>
239+
<p>The complete system: the Sigilcraft workbook — your first 10 sigils — plus the companion guide. Intention, in ink. The full method in one bundle.</p>
240+
<div class="row"><span class="price">$33 <small>· once</small></span><span class="go">Get it →</span></div>
241+
</a>
242+
<a class="product" href="https://whop.com/checkout/plan_U9QOoYunRt4hZ">
243+
<span class="new mono">New</span>
244+
<div class="kind mono">Protocol · PDF</div>
245+
<h3>7-Day <em>Starter Protocol</em></h3>
246+
<p>Seven days. One clear action a day. The fastest on-ramp into the work — a printable protocol that takes you from static to signal.</p>
247+
<div class="row"><span class="price">$7.77 <small>· once</small></span><span class="go">Get it →</span></div>
248+
</a>
249+
</div>
250+
</div>
251+
</section>
252+
253+
<section id="catalog">
254+
<div class="wrap">
255+
<div class="section-head">
256+
<span class="num mono">002</span>
257+
<h2>The catalog</h2>
258+
</div>
259+
<div class="grid">
260+
<a class="product" href="map.html">
261+
<div class="kind mono">Reading</div>
262+
<h3>Soul Map — <em>Founders Edition</em></h3>
263+
<p>Your numbers, decoded. A personalized numerology + astrology reading built from your name and birth date, live at your own private link in about 5 minutes.</p>
264+
<div class="row"><span class="price">$22 <small>· once</small></span><span class="go">Get yours →</span></div>
265+
</a>
266+
<a class="product" href="https://whop.com/checkout/plan_PAVoGUlPeFZgG">
267+
<div class="kind mono">Book · PDF</div>
268+
<h3>Dark Shadows — <em>Print Edition</em></h3>
269+
<p>The five-chapter passage through grief, formatted to print and keep. The full series is free to read online — this is the edition you hold.</p>
270+
<div class="row"><span class="price">$11.11 <small>· once</small></span><span class="go">Get it →</span></div>
271+
</a>
272+
<a class="product" href="https://whop.com/checkout/plan_fKwR6rSqXS4X5">
273+
<div class="kind mono">Novel</div>
274+
<h3>THE FIRST SPARK: <em>Genesis</em></h3>
275+
<p>The novel where the whole universe begins. The origin story of the Sparkverse — reality is programmable, and someone just found the console.</p>
276+
<div class="row"><span class="price">$11.11 <small>· once</small></span><span class="go">Get it →</span></div>
277+
</a>
278+
<a class="product" href="https://whop.com/checkout/plan_c25a7JjHbpeFF">
279+
<div class="kind mono">Tool</div>
280+
<h3>Karma Debugger — <em>Control Center</em></h3>
281+
<p>Trace the pattern. Patch the loop. A control center for finding the repeating code in your life and rewriting it on purpose.</p>
282+
<div class="row"><span class="price">$6.99 <small>· once</small></span><span class="go">Get it →</span></div>
283+
</a>
284+
<a class="product" href="https://frequency.thefirstspark.shop" target="_blank" rel="noopener noreferrer">
285+
<div class="kind mono">Tool · Free to try</div>
286+
<h3>Frequency Match <em>Pro</em></h3>
287+
<p>Collide two soul maps and get a compatibility score. Try it free — go Pro for unlimited matches.</p>
288+
<div class="row"><span class="price">$4.99<small>/mo</small></span><span class="go">Try it →</span></div>
289+
</a>
290+
<a class="product" href="https://whop.com/checkout/plan_okFWwlpgnc2bQ">
291+
<div class="kind mono">Membership</div>
292+
<h3>The Players <em>Lounge</em></h3>
293+
<p>The inner circle. Live drops, member-only tools, and the room where the next things ship first. First 3 days free.</p>
294+
<div class="row"><span class="price">$33<small>/mo · 3-day free trial</small></span><span class="go">Enter →</span></div>
295+
</a>
296+
</div>
297+
298+
<p class="delivery-note">All digital. All instant. Every checkout is handled by Whop — you'll get access the moment payment clears.</p>
299+
</div>
300+
</section>
301+
302+
<section id="free">
303+
<div class="wrap">
304+
<div class="free-strip">
305+
<div class="txt"><strong>Not ready to buy?</strong> The SparkVerse Lobby is free — step in, look around, meet the sparks.</div>
306+
<a class="btn" href="https://whop.com/checkout/plan_GdMjwOncpn0Ap">Join free →</a>
307+
</div>
308+
</div>
309+
</section>
310+
311+
<footer>
312+
<div class="wrap">
313+
<p class="mono">THE FIRST SPARK · KATE'S PAINT LLC</p>
314+
<p style="margin-top:14px; color:var(--ash);">Questions before you buy? <a href="mailto:kate@thefirstspark.shop">kate@thefirstspark.shop</a></p>
315+
</div>
316+
</footer>
317+
</body>
318+
</html>

‎sitemap-core.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
<changefreq>weekly</changefreq>
88
<priority>1.0</priority>
99
</url>
10+
<url>
11+
<loc>https://thefirstspark.shop/shop.html</loc>
12+
<lastmod>2026-08-27</lastmod>
13+
<changefreq>weekly</changefreq>
14+
<priority>0.97</priority>
15+
</url>
1016
<url>
1117
<loc>https://thefirstspark.shop/map.html</loc>
1218
<lastmod>2026-08-21</lastmod>

0 commit comments

Comments
 (0)