cyclecad 0.1.5 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +165 -34
- package/app/agent-demo.html +1049 -0
- package/app/index.html +15 -0
- package/app/js/agent-api.js +1048 -0
- package/app/mobile.html +1276 -0
- package/brand-identity.html +918 -0
- package/competitive-analysis.html +629 -0
- package/cycleCAD-Investor-Deck.pptx +0 -0
- package/index.html +746 -776
- package/logo-concepts.html +167 -0
- package/package.json +1 -1
- package/~$cycleCAD-Investor-Deck.pptx +0 -0
|
@@ -0,0 +1,918 @@
|
|
|
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>cycleWASH × cycleCAD — Brand Identity</title>
|
|
7
|
+
<style>
|
|
8
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
/* Shared "cycle" brand colors */
|
|
12
|
+
--cycle-blue: #58A6FF;
|
|
13
|
+
--cycle-green: #3FB950;
|
|
14
|
+
--cycle-dark: #0D1117;
|
|
15
|
+
--cycle-navy: #161B22;
|
|
16
|
+
--cycle-card: #1C2333;
|
|
17
|
+
--cycle-text: #F0F6FC;
|
|
18
|
+
--cycle-muted: #8B949E;
|
|
19
|
+
--cycle-purple: #A371F7;
|
|
20
|
+
--cycle-orange: #F0883E;
|
|
21
|
+
--cycle-coral: #F85149;
|
|
22
|
+
--cycle-teal: #39D353;
|
|
23
|
+
|
|
24
|
+
/* cycleWASH brand */
|
|
25
|
+
--wash-primary: #0EA5E9; /* water blue */
|
|
26
|
+
--wash-accent: #22D3EE; /* cyan splash */
|
|
27
|
+
--wash-glow: #06B6D4;
|
|
28
|
+
|
|
29
|
+
/* cycleCAD brand */
|
|
30
|
+
--cad-primary: #58A6FF; /* tech blue */
|
|
31
|
+
--cad-accent: #3FB950; /* open-source green */
|
|
32
|
+
--cad-glow: #A371F7; /* AI purple */
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
36
|
+
body {
|
|
37
|
+
font-family: 'Inter', -apple-system, sans-serif;
|
|
38
|
+
background: var(--cycle-dark);
|
|
39
|
+
color: var(--cycle-text);
|
|
40
|
+
overflow-x: hidden;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* === HERO === */
|
|
44
|
+
.hero {
|
|
45
|
+
min-height: 100vh;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
position: relative;
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
text-align: center;
|
|
53
|
+
padding: 2rem;
|
|
54
|
+
}
|
|
55
|
+
.hero::before {
|
|
56
|
+
content: '';
|
|
57
|
+
position: absolute;
|
|
58
|
+
top: -200px; left: -200px;
|
|
59
|
+
width: 600px; height: 600px;
|
|
60
|
+
background: radial-gradient(circle, rgba(14,165,233,0.15) 0%, transparent 70%);
|
|
61
|
+
animation: pulse1 8s ease-in-out infinite;
|
|
62
|
+
}
|
|
63
|
+
.hero::after {
|
|
64
|
+
content: '';
|
|
65
|
+
position: absolute;
|
|
66
|
+
bottom: -200px; right: -200px;
|
|
67
|
+
width: 600px; height: 600px;
|
|
68
|
+
background: radial-gradient(circle, rgba(88,166,255,0.12) 0%, transparent 70%);
|
|
69
|
+
animation: pulse2 10s ease-in-out infinite;
|
|
70
|
+
}
|
|
71
|
+
@keyframes pulse1 { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
|
|
72
|
+
@keyframes pulse2 { 0%,100% { transform: scale(1.1); opacity: 0.5; } 50% { transform: scale(0.9); opacity: 0.8; } }
|
|
73
|
+
|
|
74
|
+
.hero-content { position: relative; z-index: 1; max-width: 900px; }
|
|
75
|
+
|
|
76
|
+
/* Circular arrows animation */
|
|
77
|
+
.cycle-symbol {
|
|
78
|
+
width: 180px; height: 180px;
|
|
79
|
+
margin: 0 auto 2rem;
|
|
80
|
+
position: relative;
|
|
81
|
+
animation: spinSlow 20s linear infinite;
|
|
82
|
+
}
|
|
83
|
+
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
84
|
+
|
|
85
|
+
.cycle-symbol svg { width: 100%; height: 100%; }
|
|
86
|
+
|
|
87
|
+
.hero h1 {
|
|
88
|
+
font-size: 3.5rem;
|
|
89
|
+
font-weight: 900;
|
|
90
|
+
letter-spacing: -0.03em;
|
|
91
|
+
line-height: 1.1;
|
|
92
|
+
margin-bottom: 0.5rem;
|
|
93
|
+
}
|
|
94
|
+
.hero h1 .wash { color: var(--wash-primary); }
|
|
95
|
+
.hero h1 .times { color: var(--cycle-muted); font-weight: 300; margin: 0 0.3em; }
|
|
96
|
+
.hero h1 .cad { color: var(--cad-primary); }
|
|
97
|
+
|
|
98
|
+
.hero .tagline {
|
|
99
|
+
font-size: 1.5rem;
|
|
100
|
+
font-weight: 300;
|
|
101
|
+
color: var(--cycle-muted);
|
|
102
|
+
margin-bottom: 1rem;
|
|
103
|
+
letter-spacing: 0.02em;
|
|
104
|
+
}
|
|
105
|
+
.hero .mission {
|
|
106
|
+
font-size: 1.15rem;
|
|
107
|
+
color: var(--cad-accent);
|
|
108
|
+
font-weight: 600;
|
|
109
|
+
text-transform: uppercase;
|
|
110
|
+
letter-spacing: 0.15em;
|
|
111
|
+
margin-bottom: 3rem;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* === BRAND STORY === */
|
|
115
|
+
.section {
|
|
116
|
+
max-width: 1100px;
|
|
117
|
+
margin: 0 auto;
|
|
118
|
+
padding: 5rem 2rem;
|
|
119
|
+
}
|
|
120
|
+
.section-title {
|
|
121
|
+
font-size: 2.2rem;
|
|
122
|
+
font-weight: 800;
|
|
123
|
+
text-align: center;
|
|
124
|
+
margin-bottom: 0.5rem;
|
|
125
|
+
letter-spacing: -0.02em;
|
|
126
|
+
}
|
|
127
|
+
.section-subtitle {
|
|
128
|
+
text-align: center;
|
|
129
|
+
color: var(--cycle-muted);
|
|
130
|
+
font-size: 1.1rem;
|
|
131
|
+
margin-bottom: 3rem;
|
|
132
|
+
max-width: 700px;
|
|
133
|
+
margin-left: auto;
|
|
134
|
+
margin-right: auto;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Circular Engineering narrative */
|
|
138
|
+
.circle-narrative {
|
|
139
|
+
display: flex;
|
|
140
|
+
align-items: center;
|
|
141
|
+
gap: 4rem;
|
|
142
|
+
margin-bottom: 4rem;
|
|
143
|
+
}
|
|
144
|
+
.circle-narrative.reverse { flex-direction: row-reverse; }
|
|
145
|
+
.circle-visual {
|
|
146
|
+
flex: 0 0 320px;
|
|
147
|
+
height: 320px;
|
|
148
|
+
position: relative;
|
|
149
|
+
}
|
|
150
|
+
.circle-ring {
|
|
151
|
+
width: 300px; height: 300px;
|
|
152
|
+
border: 3px solid;
|
|
153
|
+
border-radius: 50%;
|
|
154
|
+
position: absolute;
|
|
155
|
+
top: 10px; left: 10px;
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
flex-direction: column;
|
|
160
|
+
}
|
|
161
|
+
.circle-ring.wash-ring {
|
|
162
|
+
border-color: var(--wash-primary);
|
|
163
|
+
box-shadow: 0 0 40px rgba(14,165,233,0.15), inset 0 0 40px rgba(14,165,233,0.05);
|
|
164
|
+
}
|
|
165
|
+
.circle-ring.cad-ring {
|
|
166
|
+
border-color: var(--cad-primary);
|
|
167
|
+
box-shadow: 0 0 40px rgba(88,166,255,0.15), inset 0 0 40px rgba(88,166,255,0.05);
|
|
168
|
+
}
|
|
169
|
+
.circle-ring .brand-name {
|
|
170
|
+
font-size: 1.6rem;
|
|
171
|
+
font-weight: 800;
|
|
172
|
+
}
|
|
173
|
+
.circle-ring .brand-desc {
|
|
174
|
+
font-size: 0.85rem;
|
|
175
|
+
color: var(--cycle-muted);
|
|
176
|
+
margin-top: 0.3rem;
|
|
177
|
+
}
|
|
178
|
+
.circle-text { flex: 1; }
|
|
179
|
+
.circle-text h3 {
|
|
180
|
+
font-size: 1.5rem;
|
|
181
|
+
font-weight: 700;
|
|
182
|
+
margin-bottom: 0.8rem;
|
|
183
|
+
}
|
|
184
|
+
.circle-text p {
|
|
185
|
+
color: var(--cycle-muted);
|
|
186
|
+
font-size: 1.05rem;
|
|
187
|
+
line-height: 1.7;
|
|
188
|
+
}
|
|
189
|
+
.circle-text .highlight {
|
|
190
|
+
color: var(--cycle-text);
|
|
191
|
+
font-weight: 600;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* Arrow connector */
|
|
195
|
+
.connector {
|
|
196
|
+
text-align: center;
|
|
197
|
+
padding: 1rem 0;
|
|
198
|
+
position: relative;
|
|
199
|
+
}
|
|
200
|
+
.connector svg { width: 60px; height: 100px; }
|
|
201
|
+
.connector .label {
|
|
202
|
+
position: absolute;
|
|
203
|
+
left: 50%;
|
|
204
|
+
top: 50%;
|
|
205
|
+
transform: translate(-50%, -50%);
|
|
206
|
+
background: var(--cycle-card);
|
|
207
|
+
padding: 0.3rem 1rem;
|
|
208
|
+
border-radius: 20px;
|
|
209
|
+
font-size: 0.8rem;
|
|
210
|
+
color: var(--cad-accent);
|
|
211
|
+
font-weight: 600;
|
|
212
|
+
letter-spacing: 0.1em;
|
|
213
|
+
text-transform: uppercase;
|
|
214
|
+
border: 1px solid rgba(63,185,80,0.3);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* === COLOR SYSTEM === */
|
|
218
|
+
.color-system {
|
|
219
|
+
background: var(--cycle-navy);
|
|
220
|
+
padding: 5rem 2rem;
|
|
221
|
+
}
|
|
222
|
+
.color-grid {
|
|
223
|
+
display: grid;
|
|
224
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
225
|
+
gap: 2rem;
|
|
226
|
+
max-width: 1100px;
|
|
227
|
+
margin: 0 auto;
|
|
228
|
+
}
|
|
229
|
+
.color-group h4 {
|
|
230
|
+
font-size: 0.85rem;
|
|
231
|
+
text-transform: uppercase;
|
|
232
|
+
letter-spacing: 0.12em;
|
|
233
|
+
color: var(--cycle-muted);
|
|
234
|
+
margin-bottom: 1rem;
|
|
235
|
+
}
|
|
236
|
+
.color-swatch {
|
|
237
|
+
display: flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
gap: 1rem;
|
|
240
|
+
padding: 0.8rem 0;
|
|
241
|
+
border-bottom: 1px solid rgba(139,148,158,0.1);
|
|
242
|
+
}
|
|
243
|
+
.swatch-box {
|
|
244
|
+
width: 48px; height: 48px;
|
|
245
|
+
border-radius: 10px;
|
|
246
|
+
flex-shrink: 0;
|
|
247
|
+
}
|
|
248
|
+
.swatch-info .name { font-weight: 600; font-size: 0.95rem; }
|
|
249
|
+
.swatch-info .hex { color: var(--cycle-muted); font-size: 0.85rem; font-family: 'SF Mono', monospace; }
|
|
250
|
+
.swatch-info .use { color: var(--cycle-muted); font-size: 0.8rem; margin-top: 2px; }
|
|
251
|
+
|
|
252
|
+
/* === BRAND MARKS === */
|
|
253
|
+
.brand-marks {
|
|
254
|
+
max-width: 1100px;
|
|
255
|
+
margin: 0 auto;
|
|
256
|
+
padding: 5rem 2rem;
|
|
257
|
+
}
|
|
258
|
+
.marks-grid {
|
|
259
|
+
display: grid;
|
|
260
|
+
grid-template-columns: 1fr 1fr;
|
|
261
|
+
gap: 3rem;
|
|
262
|
+
}
|
|
263
|
+
.mark-card {
|
|
264
|
+
background: var(--cycle-card);
|
|
265
|
+
border-radius: 16px;
|
|
266
|
+
padding: 3rem;
|
|
267
|
+
text-align: center;
|
|
268
|
+
border: 1px solid rgba(139,148,158,0.1);
|
|
269
|
+
}
|
|
270
|
+
.mark-card .logo-text {
|
|
271
|
+
font-size: 2.8rem;
|
|
272
|
+
font-weight: 900;
|
|
273
|
+
letter-spacing: -0.03em;
|
|
274
|
+
margin-bottom: 0.5rem;
|
|
275
|
+
}
|
|
276
|
+
.mark-card .logo-sub {
|
|
277
|
+
font-size: 0.9rem;
|
|
278
|
+
color: var(--cycle-muted);
|
|
279
|
+
text-transform: uppercase;
|
|
280
|
+
letter-spacing: 0.15em;
|
|
281
|
+
}
|
|
282
|
+
.mark-card .logo-tagline {
|
|
283
|
+
margin-top: 1.5rem;
|
|
284
|
+
padding-top: 1.5rem;
|
|
285
|
+
border-top: 1px solid rgba(139,148,158,0.15);
|
|
286
|
+
font-size: 1rem;
|
|
287
|
+
color: var(--cycle-muted);
|
|
288
|
+
font-style: italic;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* === SHARED DNA === */
|
|
292
|
+
.shared-dna {
|
|
293
|
+
background: var(--cycle-navy);
|
|
294
|
+
padding: 5rem 2rem;
|
|
295
|
+
}
|
|
296
|
+
.dna-grid {
|
|
297
|
+
display: grid;
|
|
298
|
+
grid-template-columns: repeat(3, 1fr);
|
|
299
|
+
gap: 2rem;
|
|
300
|
+
max-width: 1100px;
|
|
301
|
+
margin: 0 auto;
|
|
302
|
+
}
|
|
303
|
+
.dna-card {
|
|
304
|
+
background: var(--cycle-card);
|
|
305
|
+
border-radius: 14px;
|
|
306
|
+
padding: 2rem;
|
|
307
|
+
border: 1px solid rgba(139,148,158,0.1);
|
|
308
|
+
transition: border-color 0.3s;
|
|
309
|
+
}
|
|
310
|
+
.dna-card:hover { border-color: var(--cad-primary); }
|
|
311
|
+
.dna-icon {
|
|
312
|
+
width: 48px; height: 48px;
|
|
313
|
+
border-radius: 12px;
|
|
314
|
+
display: flex;
|
|
315
|
+
align-items: center;
|
|
316
|
+
justify-content: center;
|
|
317
|
+
font-size: 1.5rem;
|
|
318
|
+
margin-bottom: 1rem;
|
|
319
|
+
}
|
|
320
|
+
.dna-card h4 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
321
|
+
.dna-card p { color: var(--cycle-muted); font-size: 0.95rem; line-height: 1.6; }
|
|
322
|
+
|
|
323
|
+
/* === DEMOCRATIZATION === */
|
|
324
|
+
.democratization {
|
|
325
|
+
padding: 6rem 2rem;
|
|
326
|
+
text-align: center;
|
|
327
|
+
position: relative;
|
|
328
|
+
overflow: hidden;
|
|
329
|
+
}
|
|
330
|
+
.democratization::before {
|
|
331
|
+
content: '';
|
|
332
|
+
position: absolute;
|
|
333
|
+
top: 0; left: 0; right: 0; bottom: 0;
|
|
334
|
+
background:
|
|
335
|
+
radial-gradient(circle at 20% 50%, rgba(14,165,233,0.08) 0%, transparent 50%),
|
|
336
|
+
radial-gradient(circle at 80% 50%, rgba(88,166,255,0.08) 0%, transparent 50%);
|
|
337
|
+
}
|
|
338
|
+
.demo-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
|
|
339
|
+
.demo-content h2 {
|
|
340
|
+
font-size: 3rem;
|
|
341
|
+
font-weight: 900;
|
|
342
|
+
letter-spacing: -0.03em;
|
|
343
|
+
margin-bottom: 1.5rem;
|
|
344
|
+
background: linear-gradient(135deg, var(--wash-primary), var(--cad-primary), var(--cad-accent));
|
|
345
|
+
-webkit-background-clip: text;
|
|
346
|
+
-webkit-text-fill-color: transparent;
|
|
347
|
+
background-clip: text;
|
|
348
|
+
}
|
|
349
|
+
.demo-content p {
|
|
350
|
+
font-size: 1.2rem;
|
|
351
|
+
color: var(--cycle-muted);
|
|
352
|
+
line-height: 1.8;
|
|
353
|
+
margin-bottom: 1.5rem;
|
|
354
|
+
}
|
|
355
|
+
.demo-pillars {
|
|
356
|
+
display: flex;
|
|
357
|
+
gap: 2rem;
|
|
358
|
+
justify-content: center;
|
|
359
|
+
margin-top: 3rem;
|
|
360
|
+
flex-wrap: wrap;
|
|
361
|
+
}
|
|
362
|
+
.pillar {
|
|
363
|
+
background: var(--cycle-card);
|
|
364
|
+
border: 1px solid rgba(139,148,158,0.15);
|
|
365
|
+
border-radius: 14px;
|
|
366
|
+
padding: 1.5rem 2rem;
|
|
367
|
+
min-width: 200px;
|
|
368
|
+
text-align: center;
|
|
369
|
+
}
|
|
370
|
+
.pillar .num {
|
|
371
|
+
font-size: 2.5rem;
|
|
372
|
+
font-weight: 900;
|
|
373
|
+
margin-bottom: 0.3rem;
|
|
374
|
+
}
|
|
375
|
+
.pillar .label {
|
|
376
|
+
font-size: 0.85rem;
|
|
377
|
+
color: var(--cycle-muted);
|
|
378
|
+
text-transform: uppercase;
|
|
379
|
+
letter-spacing: 0.1em;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* === FOOTER === */
|
|
383
|
+
footer {
|
|
384
|
+
text-align: center;
|
|
385
|
+
padding: 3rem 2rem;
|
|
386
|
+
border-top: 1px solid rgba(139,148,158,0.1);
|
|
387
|
+
}
|
|
388
|
+
footer .brands {
|
|
389
|
+
font-size: 1.5rem;
|
|
390
|
+
font-weight: 700;
|
|
391
|
+
margin-bottom: 0.5rem;
|
|
392
|
+
}
|
|
393
|
+
footer .brands .wash { color: var(--wash-primary); }
|
|
394
|
+
footer .brands .cad { color: var(--cad-primary); }
|
|
395
|
+
footer p { color: var(--cycle-muted); font-size: 0.9rem; }
|
|
396
|
+
|
|
397
|
+
@media (max-width: 768px) {
|
|
398
|
+
.hero h1 { font-size: 2.2rem; }
|
|
399
|
+
.circle-narrative, .circle-narrative.reverse { flex-direction: column; gap: 2rem; }
|
|
400
|
+
.circle-visual { flex: 0 0 200px; height: 200px; }
|
|
401
|
+
.circle-ring { width: 180px; height: 180px; top: 10px; left: 10px; }
|
|
402
|
+
.marks-grid { grid-template-columns: 1fr; }
|
|
403
|
+
.dna-grid { grid-template-columns: 1fr; }
|
|
404
|
+
.demo-content h2 { font-size: 2rem; }
|
|
405
|
+
}
|
|
406
|
+
</style>
|
|
407
|
+
</head>
|
|
408
|
+
<body>
|
|
409
|
+
|
|
410
|
+
<!-- ========== HERO ========== -->
|
|
411
|
+
<section class="hero">
|
|
412
|
+
<div class="hero-content">
|
|
413
|
+
<div class="cycle-symbol">
|
|
414
|
+
<svg viewBox="0 0 200 200">
|
|
415
|
+
<!-- Circular arrows representing the cycle -->
|
|
416
|
+
<defs>
|
|
417
|
+
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
418
|
+
<stop offset="0%" style="stop-color:#0EA5E9;stop-opacity:1" />
|
|
419
|
+
<stop offset="50%" style="stop-color:#58A6FF;stop-opacity:1" />
|
|
420
|
+
<stop offset="100%" style="stop-color:#3FB950;stop-opacity:1" />
|
|
421
|
+
</linearGradient>
|
|
422
|
+
</defs>
|
|
423
|
+
<!-- Three curved arrows forming a cycle -->
|
|
424
|
+
<path d="M 100 20 A 80 80 0 0 1 169 60" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
425
|
+
<polygon points="172,55 165,68 158,55" fill="#58A6FF"/>
|
|
426
|
+
<path d="M 169 140 A 80 80 0 0 1 31 140" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
427
|
+
<polygon points="28,136 35,148 22,148" fill="#3FB950"/>
|
|
428
|
+
<path d="M 31 60 A 80 80 0 0 1 100 20" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
429
|
+
<polygon points="96,17 103,28 90,28" fill="#0EA5E9"/>
|
|
430
|
+
<!-- Center text -->
|
|
431
|
+
<text x="100" y="95" text-anchor="middle" fill="#F0F6FC" font-family="Inter, sans-serif" font-weight="800" font-size="22">cycle</text>
|
|
432
|
+
<text x="100" y="118" text-anchor="middle" fill="#8B949E" font-family="Inter, sans-serif" font-weight="400" font-size="11" letter-spacing="3">ENGINEERING</text>
|
|
433
|
+
</svg>
|
|
434
|
+
</div>
|
|
435
|
+
|
|
436
|
+
<h1><span class="wash">cycleWASH</span><span class="times">×</span><span class="cad">cycleCAD</span></h1>
|
|
437
|
+
<p class="tagline">Circular Engineering. Open Tools. Zero Barriers.</p>
|
|
438
|
+
<p class="mission">The OS of Things</p>
|
|
439
|
+
</div>
|
|
440
|
+
</section>
|
|
441
|
+
|
|
442
|
+
<!-- ========== BRAND STORY ========== -->
|
|
443
|
+
<section class="section">
|
|
444
|
+
<h2 class="section-title">One Prefix. One Philosophy.</h2>
|
|
445
|
+
<p class="section-subtitle">The "cycle" in both brands isn't coincidence — it's the DNA of everything we build. Circular thinking applied to machines, and now to the tools that design them.</p>
|
|
446
|
+
|
|
447
|
+
<!-- cycleWASH story -->
|
|
448
|
+
<div class="circle-narrative">
|
|
449
|
+
<div class="circle-visual">
|
|
450
|
+
<div class="circle-ring wash-ring">
|
|
451
|
+
<span class="brand-name" style="color:var(--wash-primary)">cycleWASH</span>
|
|
452
|
+
<span class="brand-desc">Circular Engineering</span>
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
<div class="circle-text">
|
|
456
|
+
<h3 style="color:var(--wash-primary)">Born from Circular Engineering</h3>
|
|
457
|
+
<p>cycleWASH builds <span class="highlight">industrial bicycle washing machines</span> — real hardware that keeps bikes in circulation longer. The DUO machine has <span class="highlight">473 precision-engineered parts</span> across 6 sub-assemblies, designed in Autodesk Inventor and built in Germany.</p>
|
|
458
|
+
<p style="margin-top:1rem;">Every part is designed for <span class="highlight">disassembly, repair, and reuse</span>. That's circular engineering — designing products that fight the throwaway economy from the first sketch.</p>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
<!-- Connector -->
|
|
463
|
+
<div class="connector" style="margin: 2rem 0;">
|
|
464
|
+
<svg viewBox="0 0 60 100">
|
|
465
|
+
<line x1="30" y1="0" x2="30" y2="100" stroke="#8B949E" stroke-width="1" stroke-dasharray="4,4"/>
|
|
466
|
+
</svg>
|
|
467
|
+
<span class="label">Gave Birth To</span>
|
|
468
|
+
</div>
|
|
469
|
+
|
|
470
|
+
<!-- cycleCAD story -->
|
|
471
|
+
<div class="circle-narrative reverse">
|
|
472
|
+
<div class="circle-visual">
|
|
473
|
+
<div class="circle-ring cad-ring">
|
|
474
|
+
<span class="brand-name" style="color:var(--cad-primary)">cycleCAD</span>
|
|
475
|
+
<span class="brand-desc">Democratizing Design</span>
|
|
476
|
+
</div>
|
|
477
|
+
</div>
|
|
478
|
+
<div class="circle-text">
|
|
479
|
+
<h3 style="color:var(--cad-primary)">The Tool We Needed — Now Free for Everyone</h3>
|
|
480
|
+
<p>Designing the DUO machine meant fighting <span class="highlight">$4,000/year CAD licenses</span>, proprietary file formats, and tools that lock you into one vendor's ecosystem. We built cycleCAD to solve our own problem — and then open-sourced it.</p>
|
|
481
|
+
<p style="margin-top:1rem;"><span class="highlight">Browser-based, zero-install, MIT-licensed.</span> The same parametric modeling power that designed a production machine, now accessible to anyone with a web browser. That's the democratization of CAD.</p>
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
</section>
|
|
485
|
+
|
|
486
|
+
<!-- ========== SHARED DNA ========== -->
|
|
487
|
+
<section class="shared-dna">
|
|
488
|
+
<div style="max-width:1100px; margin:0 auto;">
|
|
489
|
+
<h2 class="section-title">Shared Brand DNA</h2>
|
|
490
|
+
<p class="section-subtitle">What makes something a "cycle" product.</p>
|
|
491
|
+
|
|
492
|
+
<div class="dna-grid">
|
|
493
|
+
<div class="dna-card">
|
|
494
|
+
<div class="dna-icon" style="background:rgba(14,165,233,0.15);">
|
|
495
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0EA5E9" stroke-width="2" stroke-linecap="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/><circle cx="12" cy="12" r="4"/></svg>
|
|
496
|
+
</div>
|
|
497
|
+
<h4>Circular by Design</h4>
|
|
498
|
+
<p>cycleWASH machines are built for disassembly and repair. cycleCAD's rebuild guides and maintenance tools encode that philosophy into software. Design for longevity, not obsolescence.</p>
|
|
499
|
+
</div>
|
|
500
|
+
<div class="dna-card">
|
|
501
|
+
<div class="dna-icon" style="background:rgba(63,185,80,0.15);">
|
|
502
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3FB950" stroke-width="2" stroke-linecap="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
|
503
|
+
</div>
|
|
504
|
+
<h4>Open & Accessible</h4>
|
|
505
|
+
<p>No gatekeeping. cycleWASH publishes its part data openly. cycleCAD is MIT-licensed, browser-native, zero-cost. The cycle brand stands for removing barriers, not building them.</p>
|
|
506
|
+
</div>
|
|
507
|
+
<div class="dna-card">
|
|
508
|
+
<div class="dna-icon" style="background:rgba(163,113,247,0.15);">
|
|
509
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#A371F7" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
510
|
+
</div>
|
|
511
|
+
<h4>Real-World Proven</h4>
|
|
512
|
+
<p>cycleCAD isn't academic software — it's born from designing a production machine with 473 parts. Every feature exists because a real engineering team needed it.</p>
|
|
513
|
+
</div>
|
|
514
|
+
<div class="dna-card">
|
|
515
|
+
<div class="dna-icon" style="background:rgba(240,136,62,0.15);">
|
|
516
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F0883E" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8v8"/></svg>
|
|
517
|
+
</div>
|
|
518
|
+
<h4>AI-Native Intelligence</h4>
|
|
519
|
+
<p>Both products leverage AI: cycleWASH uses smart diagnostics for predictive maintenance. cycleCAD integrates AI for part identification, cost estimation, and natural-language modeling.</p>
|
|
520
|
+
</div>
|
|
521
|
+
<div class="dna-card">
|
|
522
|
+
<div class="dna-icon" style="background:rgba(88,166,255,0.15);">
|
|
523
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#58A6FF" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
524
|
+
</div>
|
|
525
|
+
<h4>Community-Driven</h4>
|
|
526
|
+
<p>cycleWASH grew from the bike community. cycleCAD grows from the maker community. Both believe the best products are built with — not just for — their users.</p>
|
|
527
|
+
</div>
|
|
528
|
+
<div class="dna-card">
|
|
529
|
+
<div class="dna-icon" style="background:rgba(57,211,83,0.15);">
|
|
530
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#39D353" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
531
|
+
</div>
|
|
532
|
+
<h4>German Engineering, Global Reach</h4>
|
|
533
|
+
<p>Designed in Germany, deployed everywhere. cycleWASH machines operate across Europe. cycleCAD runs in any browser, any country, any language (EN/DE/FR/ES/IT/NL).</p>
|
|
534
|
+
</div>
|
|
535
|
+
</div>
|
|
536
|
+
</div>
|
|
537
|
+
</section>
|
|
538
|
+
|
|
539
|
+
<!-- ========== COLOR SYSTEM ========== -->
|
|
540
|
+
<section class="color-system">
|
|
541
|
+
<div style="max-width:1100px; margin:0 auto;">
|
|
542
|
+
<h2 class="section-title">Unified Color System</h2>
|
|
543
|
+
<p class="section-subtitle">A shared palette that adapts to each product's personality while maintaining family recognition.</p>
|
|
544
|
+
|
|
545
|
+
<div class="color-grid">
|
|
546
|
+
<!-- Shared -->
|
|
547
|
+
<div class="color-group">
|
|
548
|
+
<h4>Shared Foundation</h4>
|
|
549
|
+
<div class="color-swatch">
|
|
550
|
+
<div class="swatch-box" style="background:#0D1117; border:1px solid #30363D;"></div>
|
|
551
|
+
<div class="swatch-info">
|
|
552
|
+
<div class="name">Dark Base</div>
|
|
553
|
+
<div class="hex">#0D1117</div>
|
|
554
|
+
<div class="use">Backgrounds, both products</div>
|
|
555
|
+
</div>
|
|
556
|
+
</div>
|
|
557
|
+
<div class="color-swatch">
|
|
558
|
+
<div class="swatch-box" style="background:#161B22;"></div>
|
|
559
|
+
<div class="swatch-info">
|
|
560
|
+
<div class="name">Surface</div>
|
|
561
|
+
<div class="hex">#161B22</div>
|
|
562
|
+
<div class="use">Cards, panels, elevated surfaces</div>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
<div class="color-swatch">
|
|
566
|
+
<div class="swatch-box" style="background:#F0F6FC;"></div>
|
|
567
|
+
<div class="swatch-info">
|
|
568
|
+
<div class="name">Text Primary</div>
|
|
569
|
+
<div class="hex">#F0F6FC</div>
|
|
570
|
+
<div class="use">Headings, body text</div>
|
|
571
|
+
</div>
|
|
572
|
+
</div>
|
|
573
|
+
<div class="color-swatch">
|
|
574
|
+
<div class="swatch-box" style="background:#8B949E;"></div>
|
|
575
|
+
<div class="swatch-info">
|
|
576
|
+
<div class="name">Text Muted</div>
|
|
577
|
+
<div class="hex">#8B949E</div>
|
|
578
|
+
<div class="use">Descriptions, secondary text</div>
|
|
579
|
+
</div>
|
|
580
|
+
</div>
|
|
581
|
+
</div>
|
|
582
|
+
|
|
583
|
+
<!-- cycleWASH -->
|
|
584
|
+
<div class="color-group">
|
|
585
|
+
<h4>cycleWASH Identity</h4>
|
|
586
|
+
<div class="color-swatch">
|
|
587
|
+
<div class="swatch-box" style="background:#0EA5E9;"></div>
|
|
588
|
+
<div class="swatch-info">
|
|
589
|
+
<div class="name">Water Blue</div>
|
|
590
|
+
<div class="hex">#0EA5E9</div>
|
|
591
|
+
<div class="use">Primary — water, cleaning, freshness</div>
|
|
592
|
+
</div>
|
|
593
|
+
</div>
|
|
594
|
+
<div class="color-swatch">
|
|
595
|
+
<div class="swatch-box" style="background:#22D3EE;"></div>
|
|
596
|
+
<div class="swatch-info">
|
|
597
|
+
<div class="name">Cyan Splash</div>
|
|
598
|
+
<div class="hex">#22D3EE</div>
|
|
599
|
+
<div class="use">Accents, hover states, highlights</div>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
<div class="color-swatch">
|
|
603
|
+
<div class="swatch-box" style="background:#06B6D4;"></div>
|
|
604
|
+
<div class="swatch-info">
|
|
605
|
+
<div class="name">Teal Glow</div>
|
|
606
|
+
<div class="hex">#06B6D4</div>
|
|
607
|
+
<div class="use">CTAs, interactive elements</div>
|
|
608
|
+
</div>
|
|
609
|
+
</div>
|
|
610
|
+
<div class="color-swatch">
|
|
611
|
+
<div class="swatch-box" style="background:linear-gradient(135deg, #0EA5E9, #22D3EE);"></div>
|
|
612
|
+
<div class="swatch-info">
|
|
613
|
+
<div class="name">Water Gradient</div>
|
|
614
|
+
<div class="hex">#0EA5E9 → #22D3EE</div>
|
|
615
|
+
<div class="use">Hero backgrounds, brand moments</div>
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<!-- cycleCAD -->
|
|
621
|
+
<div class="color-group">
|
|
622
|
+
<h4>cycleCAD Identity</h4>
|
|
623
|
+
<div class="color-swatch">
|
|
624
|
+
<div class="swatch-box" style="background:#58A6FF;"></div>
|
|
625
|
+
<div class="swatch-info">
|
|
626
|
+
<div class="name">Tech Blue</div>
|
|
627
|
+
<div class="hex">#58A6FF</div>
|
|
628
|
+
<div class="use">Primary — technology, precision</div>
|
|
629
|
+
</div>
|
|
630
|
+
</div>
|
|
631
|
+
<div class="color-swatch">
|
|
632
|
+
<div class="swatch-box" style="background:#3FB950;"></div>
|
|
633
|
+
<div class="swatch-info">
|
|
634
|
+
<div class="name">Open-Source Green</div>
|
|
635
|
+
<div class="hex">#3FB950</div>
|
|
636
|
+
<div class="use">Accent — free, open, accessible</div>
|
|
637
|
+
</div>
|
|
638
|
+
</div>
|
|
639
|
+
<div class="color-swatch">
|
|
640
|
+
<div class="swatch-box" style="background:#A371F7;"></div>
|
|
641
|
+
<div class="swatch-info">
|
|
642
|
+
<div class="name">AI Purple</div>
|
|
643
|
+
<div class="hex">#A371F7</div>
|
|
644
|
+
<div class="use">AI features, intelligence, copilot</div>
|
|
645
|
+
</div>
|
|
646
|
+
</div>
|
|
647
|
+
<div class="color-swatch">
|
|
648
|
+
<div class="swatch-box" style="background:linear-gradient(135deg, #58A6FF, #3FB950);"></div>
|
|
649
|
+
<div class="swatch-info">
|
|
650
|
+
<div class="name">CAD Gradient</div>
|
|
651
|
+
<div class="hex">#58A6FF → #3FB950</div>
|
|
652
|
+
<div class="use">Hero backgrounds, brand moments</div>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
<!-- Semantic -->
|
|
658
|
+
<div class="color-group">
|
|
659
|
+
<h4>Shared Semantic Colors</h4>
|
|
660
|
+
<div class="color-swatch">
|
|
661
|
+
<div class="swatch-box" style="background:#3FB950;"></div>
|
|
662
|
+
<div class="swatch-info">
|
|
663
|
+
<div class="name">Success / Go</div>
|
|
664
|
+
<div class="hex">#3FB950</div>
|
|
665
|
+
<div class="use">Confirmations, active states</div>
|
|
666
|
+
</div>
|
|
667
|
+
</div>
|
|
668
|
+
<div class="color-swatch">
|
|
669
|
+
<div class="swatch-box" style="background:#F0883E;"></div>
|
|
670
|
+
<div class="swatch-info">
|
|
671
|
+
<div class="name">Warning / Attention</div>
|
|
672
|
+
<div class="hex">#F0883E</div>
|
|
673
|
+
<div class="use">Alerts, maintenance due</div>
|
|
674
|
+
</div>
|
|
675
|
+
</div>
|
|
676
|
+
<div class="color-swatch">
|
|
677
|
+
<div class="swatch-box" style="background:#F85149;"></div>
|
|
678
|
+
<div class="swatch-info">
|
|
679
|
+
<div class="name">Error / Critical</div>
|
|
680
|
+
<div class="hex">#F85149</div>
|
|
681
|
+
<div class="use">Errors, urgent maintenance</div>
|
|
682
|
+
</div>
|
|
683
|
+
</div>
|
|
684
|
+
<div class="color-swatch">
|
|
685
|
+
<div class="swatch-box" style="background:#A371F7;"></div>
|
|
686
|
+
<div class="swatch-info">
|
|
687
|
+
<div class="name">AI / Intelligence</div>
|
|
688
|
+
<div class="hex">#A371F7</div>
|
|
689
|
+
<div class="use">AI features across both products</div>
|
|
690
|
+
</div>
|
|
691
|
+
</div>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
</div>
|
|
695
|
+
</section>
|
|
696
|
+
|
|
697
|
+
<!-- ========== BRAND MARKS ========== -->
|
|
698
|
+
<section class="brand-marks">
|
|
699
|
+
<h2 class="section-title">Brand Marks</h2>
|
|
700
|
+
<p class="section-subtitle">Two products, one family. The lowercase "cycle" prefix and shared dark aesthetic create instant brand recognition.</p>
|
|
701
|
+
|
|
702
|
+
<div class="marks-grid">
|
|
703
|
+
<div class="mark-card">
|
|
704
|
+
<div class="logo-text" style="color:var(--wash-primary);">cycleWASH</div>
|
|
705
|
+
<div class="logo-sub">Industrial Bike Care</div>
|
|
706
|
+
<div class="logo-tagline">"Circular engineering for sustainable mobility"</div>
|
|
707
|
+
</div>
|
|
708
|
+
<div class="mark-card">
|
|
709
|
+
<div class="logo-text" style="color:var(--cad-primary);">cycleCAD</div>
|
|
710
|
+
<div class="logo-sub">Open-Source Browser CAD</div>
|
|
711
|
+
<div class="logo-tagline">"Democratizing design for the world"</div>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
|
|
715
|
+
<!-- Combined mark -->
|
|
716
|
+
<div style="margin-top:3rem; text-align:center;">
|
|
717
|
+
<div class="mark-card" style="max-width:600px; margin:0 auto;">
|
|
718
|
+
<div style="font-size:0.8rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--cycle-muted); margin-bottom:1.5rem;">Parent Brand</div>
|
|
719
|
+
<div style="display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;">
|
|
720
|
+
<span style="font-size:2rem; font-weight:900; color:var(--wash-primary);">cycleWASH</span>
|
|
721
|
+
<span style="font-size:1.5rem; color:var(--cycle-muted); font-weight:300;">|</span>
|
|
722
|
+
<span style="font-size:2rem; font-weight:900; color:var(--cad-primary);">cycleCAD</span>
|
|
723
|
+
</div>
|
|
724
|
+
<div style="margin-top:1rem; font-size:0.85rem; color:var(--cycle-muted);">Shared prefix "cycle" — from Latin <em>cyclus</em>, Greek <em>kyklos</em>: circle, wheel, recurring sequence</div>
|
|
725
|
+
<div style="margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(139,148,158,0.15);">
|
|
726
|
+
<div style="display:flex; gap:2rem; justify-content:center; flex-wrap:wrap;">
|
|
727
|
+
<div><span style="font-weight:700; color:var(--wash-primary);">cycle</span> + WASH = <span style="color:var(--cycle-muted);">circular bike care</span></div>
|
|
728
|
+
<div><span style="font-weight:700; color:var(--cad-primary);">cycle</span> + CAD = <span style="color:var(--cycle-muted);">circular design tools</span></div>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
</div>
|
|
732
|
+
</div>
|
|
733
|
+
</section>
|
|
734
|
+
|
|
735
|
+
<!-- ========== DEMOCRATIZATION ========== -->
|
|
736
|
+
<section class="democratization">
|
|
737
|
+
<div class="demo-content">
|
|
738
|
+
<h2>The Democratization of CAD</h2>
|
|
739
|
+
<p>For decades, 3D design has been locked behind thousand-dollar licenses, mandatory installs, and a priesthood of specialists. cycleCAD asks a different question: <strong style="color:var(--cycle-text);">What if everyone could design?</strong></p>
|
|
740
|
+
<p>What if the product manager could prototype her own idea. The marketer could spin a 3D product shot without waiting two weeks. The sales engineer could customize a demo on the fly. The architect, the scientist, the student — all designing, all building, all from a browser tab.</p>
|
|
741
|
+
<p style="color:var(--cad-accent); font-weight:600; font-size:1.3rem; margin-top:1.5rem;">CAD for the masses. Omnipresent. Zero barriers. A gift to every profession.</p>
|
|
742
|
+
|
|
743
|
+
<div class="demo-pillars">
|
|
744
|
+
<div class="pillar">
|
|
745
|
+
<div class="num" style="color:var(--cad-accent);">$0</div>
|
|
746
|
+
<div class="label">License Cost</div>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="pillar">
|
|
749
|
+
<div class="num" style="color:var(--cad-primary);">0</div>
|
|
750
|
+
<div class="label">Install Required</div>
|
|
751
|
+
</div>
|
|
752
|
+
<div class="pillar">
|
|
753
|
+
<div class="num" style="color:var(--cycle-purple);">MIT</div>
|
|
754
|
+
<div class="label">Open Source</div>
|
|
755
|
+
</div>
|
|
756
|
+
<div class="pillar">
|
|
757
|
+
<div class="num" style="color:var(--wash-primary);">6</div>
|
|
758
|
+
<div class="label">Languages</div>
|
|
759
|
+
</div>
|
|
760
|
+
</div>
|
|
761
|
+
</div>
|
|
762
|
+
</section>
|
|
763
|
+
|
|
764
|
+
<!-- ========== OMNIPRESENT ========== -->
|
|
765
|
+
<section class="shared-dna" style="background:var(--cycle-dark);">
|
|
766
|
+
<div style="max-width:1100px; margin:0 auto;">
|
|
767
|
+
<h2 class="section-title" style="background:linear-gradient(135deg, var(--wash-primary), var(--cad-primary), var(--cad-accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;">Everyone Is a Designer</h2>
|
|
768
|
+
<p class="section-subtitle">cycleCAD isn't a tool for engineers. It's a tool for anyone who thinks in three dimensions.</p>
|
|
769
|
+
|
|
770
|
+
<div class="dna-grid">
|
|
771
|
+
<div class="dna-card">
|
|
772
|
+
<div class="dna-icon" style="background:rgba(88,166,255,0.15);">
|
|
773
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#58A6FF" stroke-width="2" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
|
|
774
|
+
</div>
|
|
775
|
+
<h4>Product Managers</h4>
|
|
776
|
+
<p>Prototype ideas without filing a ticket. Spin up a 3D concept in minutes, share it with a link. Speak the language of design, not just specs.</p>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="dna-card">
|
|
779
|
+
<div class="dna-icon" style="background:rgba(240,136,62,0.15);">
|
|
780
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F0883E" stroke-width="2" stroke-linecap="round"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>
|
|
781
|
+
</div>
|
|
782
|
+
<h4>Sales Engineers</h4>
|
|
783
|
+
<p>Customize a demo live on a call. Swap parts, change materials, export a spec sheet — all from the browser, no CAD license needed.</p>
|
|
784
|
+
</div>
|
|
785
|
+
<div class="dna-card">
|
|
786
|
+
<div class="dna-icon" style="background:rgba(163,113,247,0.15);">
|
|
787
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#A371F7" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
788
|
+
</div>
|
|
789
|
+
<h4>Marketers</h4>
|
|
790
|
+
<p>Generate 3D product shots, exploded views, and interactive embeds without a render farm. Create content that sells, directly from the source model.</p>
|
|
791
|
+
</div>
|
|
792
|
+
<div class="dna-card">
|
|
793
|
+
<div class="dna-icon" style="background:rgba(14,165,233,0.15);">
|
|
794
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0EA5E9" stroke-width="2" stroke-linecap="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
|
795
|
+
</div>
|
|
796
|
+
<h4>Scientists & Researchers</h4>
|
|
797
|
+
<p>Design lab equipment, visualize molecular structures, build custom apparatus. Parametric modeling meets the scientific method.</p>
|
|
798
|
+
</div>
|
|
799
|
+
<div class="dna-card">
|
|
800
|
+
<div class="dna-icon" style="background:rgba(63,185,80,0.15);">
|
|
801
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3FB950" stroke-width="2" stroke-linecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg>
|
|
802
|
+
</div>
|
|
803
|
+
<h4>Architects & Makers</h4>
|
|
804
|
+
<p>From furniture to buildings to art installations. Browser-based means you sketch on a tablet at the job site, then refine on your desktop at home.</p>
|
|
805
|
+
</div>
|
|
806
|
+
<div class="dna-card">
|
|
807
|
+
<div class="dna-icon" style="background:rgba(248,81,73,0.15);">
|
|
808
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F85149" stroke-width="2" stroke-linecap="round"><path d="M22 10v6M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></svg>
|
|
809
|
+
</div>
|
|
810
|
+
<h4>Students & Educators</h4>
|
|
811
|
+
<p>No lab required. No license budget. Every student gets the same professional-grade tools as a Fortune 500 engineer. Just open a URL.</p>
|
|
812
|
+
</div>
|
|
813
|
+
</div>
|
|
814
|
+
</div>
|
|
815
|
+
</section>
|
|
816
|
+
|
|
817
|
+
<!-- ========== THE OPERATING SYSTEM ========== -->
|
|
818
|
+
<section class="section" style="text-align:center; padding-bottom:2rem;">
|
|
819
|
+
<h2 class="section-title">The OS of Things</h2>
|
|
820
|
+
<p class="section-subtitle" style="max-width:750px;">IoT connected devices to the internet. We connect human intent to manufacturing. cycleCAD is the operating system for physical things — from idea to finished product, just by talking.</p>
|
|
821
|
+
|
|
822
|
+
<div style="display:flex; align-items:center; justify-content:center; gap:0.8rem; flex-wrap:wrap; margin:3rem auto; max-width:900px;">
|
|
823
|
+
<div style="background:var(--cycle-card); border-radius:14px; padding:1.2rem 1.8rem; border:1px solid rgba(163,113,247,0.3); text-align:center;">
|
|
824
|
+
<div style="font-size:1.8rem; margin-bottom:0.3rem;">💬</div>
|
|
825
|
+
<div style="font-weight:700; font-size:1rem; color:var(--cycle-purple);">Speak</div>
|
|
826
|
+
<div style="font-size:0.8rem; color:var(--cycle-muted); margin-top:0.2rem;">"I need a bracket<br/>with 4 bolt holes"</div>
|
|
827
|
+
</div>
|
|
828
|
+
<svg width="36" height="20" viewBox="0 0 36 20"><path d="M0 10 L26 10 M21 5 L26 10 L21 15" fill="none" stroke="#8B949E" stroke-width="2"/></svg>
|
|
829
|
+
<div style="background:var(--cycle-card); border-radius:14px; padding:1.2rem 1.8rem; border:1px solid rgba(88,166,255,0.3); text-align:center;">
|
|
830
|
+
<div style="font-size:1.8rem; margin-bottom:0.3rem;">🧠</div>
|
|
831
|
+
<div style="font-weight:700; font-size:1rem; color:var(--cad-primary);">AI Models It</div>
|
|
832
|
+
<div style="font-size:0.8rem; color:var(--cycle-muted); margin-top:0.2rem;">Parametric CAD<br/>generated instantly</div>
|
|
833
|
+
</div>
|
|
834
|
+
<svg width="36" height="20" viewBox="0 0 36 20"><path d="M0 10 L26 10 M21 5 L26 10 L21 15" fill="none" stroke="#8B949E" stroke-width="2"/></svg>
|
|
835
|
+
<div style="background:var(--cycle-card); border-radius:14px; padding:1.2rem 1.8rem; border:1px solid rgba(240,136,62,0.3); text-align:center;">
|
|
836
|
+
<div style="font-size:1.8rem; margin-bottom:0.3rem;">⚙️</div>
|
|
837
|
+
<div style="font-weight:700; font-size:1rem; color:var(--cycle-orange);">Validate</div>
|
|
838
|
+
<div style="font-size:0.8rem; color:var(--cycle-muted); margin-top:0.2rem;">DFM check, cost<br/>estimate, tolerance</div>
|
|
839
|
+
</div>
|
|
840
|
+
<svg width="36" height="20" viewBox="0 0 36 20"><path d="M0 10 L26 10 M21 5 L26 10 L21 15" fill="none" stroke="#8B949E" stroke-width="2"/></svg>
|
|
841
|
+
<div style="background:var(--cycle-card); border-radius:14px; padding:1.2rem 1.8rem; border:1px solid rgba(63,185,80,0.3); text-align:center;">
|
|
842
|
+
<div style="font-size:1.8rem; margin-bottom:0.3rem;">🏭</div>
|
|
843
|
+
<div style="font-weight:700; font-size:1rem; color:var(--cad-accent);">Manufacture</div>
|
|
844
|
+
<div style="font-size:0.8rem; color:var(--cycle-muted); margin-top:0.2rem;">G-code, DXF, STEP<br/>sent to factory</div>
|
|
845
|
+
</div>
|
|
846
|
+
</div>
|
|
847
|
+
|
|
848
|
+
<p style="font-size:1.1rem; color:var(--cycle-muted); max-width:700px; margin:0 auto; line-height:1.7;">No mouse required. No training needed. No license purchased. Just describe what you need, and cycleCAD handles the rest — from parametric geometry to manufacturing output. <strong style="color:var(--cycle-text);">The full cycle, from idea to reality.</strong></p>
|
|
849
|
+
</section>
|
|
850
|
+
|
|
851
|
+
<!-- ========== MACHINES CREATE MACHINES ========== -->
|
|
852
|
+
<section class="democratization" style="padding: 6rem 2rem 4rem;">
|
|
853
|
+
<div class="demo-content" style="max-width:850px;">
|
|
854
|
+
<div style="margin-bottom:2rem;">
|
|
855
|
+
<svg width="80" height="80" viewBox="0 0 80 80" style="opacity:0.9;">
|
|
856
|
+
<defs>
|
|
857
|
+
<linearGradient id="loopGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
858
|
+
<stop offset="0%" style="stop-color:#0EA5E9"/>
|
|
859
|
+
<stop offset="33%" style="stop-color:#58A6FF"/>
|
|
860
|
+
<stop offset="66%" style="stop-color:#A371F7"/>
|
|
861
|
+
<stop offset="100%" style="stop-color:#3FB950"/>
|
|
862
|
+
</linearGradient>
|
|
863
|
+
</defs>
|
|
864
|
+
<circle cx="40" cy="40" r="35" fill="none" stroke="url(#loopGrad)" stroke-width="3" stroke-dasharray="8,4"/>
|
|
865
|
+
<text x="40" y="38" text-anchor="middle" fill="#F0F6FC" font-family="Inter" font-weight="800" font-size="13">AI</text>
|
|
866
|
+
<text x="40" y="52" text-anchor="middle" fill="#A371F7" font-family="Inter" font-weight="400" font-size="8" letter-spacing="2">LOOP</text>
|
|
867
|
+
</svg>
|
|
868
|
+
</div>
|
|
869
|
+
<h2 style="font-size:2.5rem;">Machines Creating Machines</h2>
|
|
870
|
+
<p style="font-size:1.15rem; margin-top:1.5rem;">Here's the endgame: if AI can do CAD, then a machine can design its own replacement parts. Its own upgrades. Its own next generation.</p>
|
|
871
|
+
<p style="font-size:1.15rem;">A cycleWASH machine scans its worn brush assembly. The AI copilot in cycleCAD analyzes the geometry, identifies the wear pattern, redesigns the part for longer life, generates the G-code, and sends it to the 3D printer on the factory floor. No human touched a mouse.</p>
|
|
872
|
+
<p style="font-size:1.15rem;"><strong style="color:var(--cycle-text);">That's the true cycle.</strong> Machine → AI understands the machine → AI improves the design → better machine. Circular engineering at the speed of thought.</p>
|
|
873
|
+
<p style="font-size:1.15rem; margin-top:1rem;"><strong style="color:var(--cad-accent);">Humans tell what they want. Machines produce the parts, assemble them, and deliver the final product.</strong> No drawings. No factories full of people interpreting blueprints. Just intent in, product out. cycleCAD is the bridge between human imagination and autonomous manufacturing.</p>
|
|
874
|
+
|
|
875
|
+
<div style="margin-top:3rem; display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;">
|
|
876
|
+
<div style="text-align:center; padding:1rem 1.5rem; background:var(--cycle-card); border-radius:12px; border:1px solid rgba(163,113,247,0.3);">
|
|
877
|
+
<div style="font-size:1.5rem; font-weight:800; color:var(--cycle-purple);">Human</div>
|
|
878
|
+
<div style="font-size:0.8rem; color:var(--cycle-muted);">says what they want</div>
|
|
879
|
+
</div>
|
|
880
|
+
<svg width="36" height="20" viewBox="0 0 36 20"><path d="M0 10 L26 10 M21 5 L26 10 L21 15" fill="none" stroke="#8B949E" stroke-width="2"/></svg>
|
|
881
|
+
<div style="text-align:center; padding:1rem 1.5rem; background:var(--cycle-card); border-radius:12px; border:1px solid rgba(88,166,255,0.3);">
|
|
882
|
+
<div style="font-size:1.5rem; font-weight:800; color:var(--cad-primary);">cycleCAD</div>
|
|
883
|
+
<div style="font-size:0.8rem; color:var(--cycle-muted);">designs & validates</div>
|
|
884
|
+
</div>
|
|
885
|
+
<svg width="36" height="20" viewBox="0 0 36 20"><path d="M0 10 L26 10 M21 5 L26 10 L21 15" fill="none" stroke="#8B949E" stroke-width="2"/></svg>
|
|
886
|
+
<div style="text-align:center; padding:1rem 1.5rem; background:var(--cycle-card); border-radius:12px; border:1px solid rgba(240,136,62,0.3);">
|
|
887
|
+
<div style="font-size:1.5rem; font-weight:800; color:var(--cycle-orange);">Machines</div>
|
|
888
|
+
<div style="font-size:0.8rem; color:var(--cycle-muted);">produce the parts</div>
|
|
889
|
+
</div>
|
|
890
|
+
<svg width="36" height="20" viewBox="0 0 36 20"><path d="M0 10 L26 10 M21 5 L26 10 L21 15" fill="none" stroke="#8B949E" stroke-width="2"/></svg>
|
|
891
|
+
<div style="text-align:center; padding:1rem 1.5rem; background:var(--cycle-card); border-radius:12px; border:1px solid rgba(63,185,80,0.3);">
|
|
892
|
+
<div style="font-size:1.5rem; font-weight:800; color:var(--cad-accent);">Product</div>
|
|
893
|
+
<div style="font-size:0.8rem; color:var(--cycle-muted);">assembled & delivered</div>
|
|
894
|
+
</div>
|
|
895
|
+
</div>
|
|
896
|
+
<div style="margin-top:2rem;">
|
|
897
|
+
<svg width="200" height="30" viewBox="0 0 200 30" style="opacity:0.4;">
|
|
898
|
+
<path d="M170 25 C 190 25, 200 15, 200 5 L200 0 C200 0, 190 -5, 170 5 L30 5 C10 5, 0 15, 0 25 L0 30 C0 30, 10 35, 30 25 Z" fill="none" stroke="#3FB950" stroke-width="1" stroke-dasharray="4,3"/>
|
|
899
|
+
<text x="100" y="18" text-anchor="middle" fill="#3FB950" font-family="Inter" font-size="7" letter-spacing="3">CYCLE REPEATS</text>
|
|
900
|
+
</svg>
|
|
901
|
+
</div>
|
|
902
|
+
</div>
|
|
903
|
+
</section>
|
|
904
|
+
|
|
905
|
+
<!-- ========== FOOTER ========== -->
|
|
906
|
+
<footer>
|
|
907
|
+
<div class="brands">
|
|
908
|
+
<span class="wash">cycleWASH</span>
|
|
909
|
+
<span style="color:var(--cycle-muted); font-weight:300; margin:0 0.5em;">×</span>
|
|
910
|
+
<span class="cad">cycleCAD</span>
|
|
911
|
+
</div>
|
|
912
|
+
<p>Circular Engineering. Open Tools. Zero Barriers.</p>
|
|
913
|
+
<p style="margin-top:0.8rem; font-size:1.1rem; color:var(--cad-accent); font-weight:600; letter-spacing:0.05em;">The New Language. The OS of Things.</p>
|
|
914
|
+
<p style="margin-top:0.5rem; font-size:0.8rem;">cyclecad.com — cyclewash.de — MIT License — Made in Germany</p>
|
|
915
|
+
</footer>
|
|
916
|
+
|
|
917
|
+
</body>
|
|
918
|
+
</html>
|