cyclecad 3.10.4 → 3.11.0
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/.github/workflows/pages.yml +34 -0
- package/.nojekyll +0 -0
- package/CLAUDE.md +348 -3
- package/HANDOFF-2026-04-24-session-2.md +239 -0
- package/HANDOFF-2026-04-24.md +90 -0
- package/app/index.html +9 -0
- package/app/js/modules/ai-copilot.js +195 -2
- package/app/js/modules/ai-engineer.js +613 -0
- package/app/js/modules/pentacad-bridge.js +216 -0
- package/app/js/modules/pentacad-cam.js +184 -0
- package/app/js/modules/pentacad-sim.js +215 -0
- package/app/js/modules/pentacad.js +233 -0
- package/app/pentacad.html +240 -0
- package/index-agent-first.html.bak +1306 -0
- package/machines/v2-50-chb/kinematics.json +51 -0
- package/mockups/cyclecad-suite-mockup.html +1746 -0
- package/package.json +1 -1
|
@@ -0,0 +1,1306 @@
|
|
|
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>cycleCAD — The Agent-First OS for Manufacturing</title>
|
|
7
|
+
<meta name="description" content="cycleCAD is the OS of Manufacturing — CAD built for AI agents. No GUI. No mouse. Agents are the only interface. The missing common language that connects design through end of life.">
|
|
8
|
+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚙️</text></svg>">
|
|
9
|
+
<style>
|
|
10
|
+
/* ============================================================
|
|
11
|
+
RESET & BASE
|
|
12
|
+
============================================================ */
|
|
13
|
+
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
|
14
|
+
|
|
15
|
+
:root, [data-theme="dark"] {
|
|
16
|
+
--bg-primary: #0A1628;
|
|
17
|
+
--bg-card: #122240;
|
|
18
|
+
--bg-card-hover: #1A2D50;
|
|
19
|
+
--border-card: #1E3A5F;
|
|
20
|
+
--text-primary: #F0F0E8;
|
|
21
|
+
--text-secondary: #8B9AB5;
|
|
22
|
+
--text-muted: #5A6B85;
|
|
23
|
+
--accent-gold: #D4A843;
|
|
24
|
+
--accent-gold-light: #E8C065;
|
|
25
|
+
--accent-blue: #2E86DE;
|
|
26
|
+
--accent-purple: #8B6FC0;
|
|
27
|
+
--accent-teal: #3AAFA9;
|
|
28
|
+
--accent-warn: #E8963A;
|
|
29
|
+
--accent-coral: #E05555;
|
|
30
|
+
--accent-gradient: linear-gradient(135deg, #D4A843, #2E86DE);
|
|
31
|
+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
32
|
+
--max-width: 1200px;
|
|
33
|
+
--nav-bg: rgba(10, 22, 40, 0.9);
|
|
34
|
+
--btn-secondary-border: #1E3A5F;
|
|
35
|
+
--btn-secondary-hover-bg: rgba(255,255,255,0.05);
|
|
36
|
+
--mockup-bg: #0D1E38;
|
|
37
|
+
--mockup-toolbar: #122240;
|
|
38
|
+
--mockup-toolbar-border: #1E3A5F;
|
|
39
|
+
--mockup-sidebar: #0F1B32;
|
|
40
|
+
--mockup-sidebar-border: #1E3A5F;
|
|
41
|
+
--mockup-viewport-center: #0D1E38;
|
|
42
|
+
--mockup-viewport-edge: #0A1628;
|
|
43
|
+
--mockup-tree: #1E3A5F;
|
|
44
|
+
--mockup-grid-line: rgba(255,255,255,0.035);
|
|
45
|
+
--cube-border: rgba(212, 168, 67, 0.5);
|
|
46
|
+
--cube-bg: rgba(212, 168, 67, 0.06);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
[data-theme="light"] {
|
|
50
|
+
--bg-primary: #f5f6f8;
|
|
51
|
+
--bg-card: #ffffff;
|
|
52
|
+
--bg-card-hover: #f0f1f3;
|
|
53
|
+
--border-card: #d8dae0;
|
|
54
|
+
--text-primary: #111128;
|
|
55
|
+
--text-secondary: #44445a;
|
|
56
|
+
--text-muted: #6e6e88;
|
|
57
|
+
--accent-gold: #B8860B;
|
|
58
|
+
--accent-gold-light: #D4A843;
|
|
59
|
+
--accent-blue: #2060B0;
|
|
60
|
+
--accent-gradient: linear-gradient(135deg, #B8860B, #2060B0);
|
|
61
|
+
--nav-bg: rgba(248, 249, 250, 0.9);
|
|
62
|
+
--btn-secondary-border: #d0d2d6;
|
|
63
|
+
--btn-secondary-hover-bg: rgba(0,0,0,0.03);
|
|
64
|
+
--mockup-bg: #ffffff;
|
|
65
|
+
--mockup-toolbar: #f0f0f4;
|
|
66
|
+
--mockup-toolbar-border: #e0e0e6;
|
|
67
|
+
--mockup-sidebar: #f5f5f8;
|
|
68
|
+
--mockup-sidebar-border: #e0e2e6;
|
|
69
|
+
--mockup-viewport-center: #eaeaf0;
|
|
70
|
+
--mockup-viewport-edge: #dddde4;
|
|
71
|
+
--mockup-tree: #d0d0da;
|
|
72
|
+
--mockup-grid-line: rgba(0,0,0,0.04);
|
|
73
|
+
--cube-border: rgba(184, 134, 11, 0.5);
|
|
74
|
+
--cube-bg: rgba(184, 134, 11, 0.08);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
html { scroll-behavior: smooth; }
|
|
78
|
+
|
|
79
|
+
body {
|
|
80
|
+
font-family: var(--font-sans);
|
|
81
|
+
background: var(--bg-primary);
|
|
82
|
+
color: var(--text-primary);
|
|
83
|
+
line-height: 1.6;
|
|
84
|
+
overflow-x: hidden;
|
|
85
|
+
-webkit-font-smoothing: antialiased;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
|
89
|
+
|
|
90
|
+
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
|
|
91
|
+
|
|
92
|
+
.gradient-text {
|
|
93
|
+
background: var(--accent-gradient);
|
|
94
|
+
-webkit-background-clip: text;
|
|
95
|
+
-webkit-text-fill-color: transparent;
|
|
96
|
+
background-clip: text;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
[data-theme="light"] .gradient-text {
|
|
100
|
+
background: linear-gradient(135deg, #8B6914, #184080);
|
|
101
|
+
-webkit-background-clip: text;
|
|
102
|
+
background-clip: text;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-theme="light"] .nav-cta { color: #fff !important; }
|
|
106
|
+
[data-theme="light"] .btn-primary { color: #fff; }
|
|
107
|
+
[data-theme="light"] .section-label { color: #B8860B; }
|
|
108
|
+
[data-theme="light"] .hero-badge { background: rgba(184,134,11,0.06); border-color: rgba(184,134,11,0.15); }
|
|
109
|
+
[data-theme="light"] .feature-card, [data-theme="light"] .problem-card, [data-theme="light"] .cap-item, [data-theme="light"] .persona-card, [data-theme="light"] .dna-card { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
|
|
110
|
+
|
|
111
|
+
.section-label {
|
|
112
|
+
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em;
|
|
113
|
+
text-transform: uppercase; color: var(--accent-gold); margin-bottom: 16px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* ============================================================
|
|
117
|
+
LAYOUT
|
|
118
|
+
============================================================ */
|
|
119
|
+
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
|
|
120
|
+
section { padding: 120px 0; }
|
|
121
|
+
|
|
122
|
+
/* ============================================================
|
|
123
|
+
NAVIGATION
|
|
124
|
+
============================================================ */
|
|
125
|
+
nav {
|
|
126
|
+
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
|
127
|
+
padding: 16px 0; background: var(--nav-bg);
|
|
128
|
+
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
|
|
129
|
+
border-bottom: 1px solid var(--border-card); transition: all 0.3s;
|
|
130
|
+
}
|
|
131
|
+
nav .container { display: flex; justify-content: space-between; align-items: center; }
|
|
132
|
+
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); font-size: 1.3rem; font-weight: 700; }
|
|
133
|
+
.nav-logo-icon { width: 32px; height: 32px; background: var(--accent-gradient); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
|
|
134
|
+
.nav-logo .cycle { color: var(--text-secondary); font-weight: 400; }
|
|
135
|
+
.nav-logo .cad { color: var(--text-primary); font-weight: 800; }
|
|
136
|
+
.nav-links { display: flex; gap: 32px; align-items: center; list-style: none; }
|
|
137
|
+
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
|
|
138
|
+
.nav-links a:hover { color: var(--text-primary); }
|
|
139
|
+
.nav-cta { padding: 8px 20px; background: var(--accent-gradient); color: #000 !important; border-radius: 8px; font-weight: 600 !important; font-size: 0.85rem !important; transition: opacity 0.2s !important; }
|
|
140
|
+
.nav-cta:hover { opacity: 0.9; }
|
|
141
|
+
|
|
142
|
+
/* ============================================================
|
|
143
|
+
HERO
|
|
144
|
+
============================================================ */
|
|
145
|
+
.hero {
|
|
146
|
+
min-height: 100vh; display: flex; flex-direction: column;
|
|
147
|
+
align-items: center; justify-content: center; text-align: center;
|
|
148
|
+
padding-top: 80px; position: relative; overflow: hidden;
|
|
149
|
+
}
|
|
150
|
+
.hero::before {
|
|
151
|
+
content: ''; position: absolute; top: -200px; left: -200px;
|
|
152
|
+
width: 600px; height: 600px;
|
|
153
|
+
background: radial-gradient(circle, rgba(212,168,67,0.1) 0%, transparent 70%);
|
|
154
|
+
animation: pulse1 8s ease-in-out infinite;
|
|
155
|
+
}
|
|
156
|
+
.hero::after {
|
|
157
|
+
content: ''; position: absolute; bottom: -200px; right: -200px;
|
|
158
|
+
width: 600px; height: 600px;
|
|
159
|
+
background: radial-gradient(circle, rgba(46,134,222,0.08) 0%, transparent 70%);
|
|
160
|
+
animation: pulse2 10s ease-in-out infinite;
|
|
161
|
+
}
|
|
162
|
+
@keyframes pulse1 { 0%,100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
|
|
163
|
+
@keyframes pulse2 { 0%,100% { transform: scale(1.1); opacity: 0.5; } 50% { transform: scale(0.9); opacity: 0.8; } }
|
|
164
|
+
|
|
165
|
+
.hero-badge {
|
|
166
|
+
display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px;
|
|
167
|
+
background: rgba(212,168,67,0.08); border: 1px solid rgba(212,168,67,0.2);
|
|
168
|
+
border-radius: 100px; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 32px;
|
|
169
|
+
position: relative; z-index: 1;
|
|
170
|
+
}
|
|
171
|
+
.hero-badge span { color: var(--accent-gold); font-weight: 600; }
|
|
172
|
+
.hero h1 { font-size: clamp(3rem, 7vw, 5rem); max-width: 900px; margin-bottom: 24px; position: relative; z-index: 1; }
|
|
173
|
+
.hero p { font-size: 1.2rem; color: var(--text-secondary); max-width: 640px; margin-bottom: 40px; line-height: 1.7; position: relative; z-index: 1; }
|
|
174
|
+
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
|
|
175
|
+
|
|
176
|
+
.btn-primary {
|
|
177
|
+
display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
|
|
178
|
+
background: var(--accent-gradient); color: #000; border: none; border-radius: 10px;
|
|
179
|
+
font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.2s;
|
|
180
|
+
}
|
|
181
|
+
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
|
|
182
|
+
|
|
183
|
+
.btn-secondary {
|
|
184
|
+
display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
|
|
185
|
+
background: transparent; color: var(--text-primary); border: 1px solid var(--btn-secondary-border);
|
|
186
|
+
border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.2s;
|
|
187
|
+
}
|
|
188
|
+
.btn-secondary:hover { border-color: var(--text-muted); background: var(--btn-secondary-hover-bg); }
|
|
189
|
+
|
|
190
|
+
.theme-toggle {
|
|
191
|
+
width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-card);
|
|
192
|
+
background: var(--bg-card); color: var(--text-secondary); font-size: 18px; cursor: pointer;
|
|
193
|
+
display: flex; align-items: center; justify-content: center; transition: all 0.2s; margin-left: 8px;
|
|
194
|
+
}
|
|
195
|
+
.theme-toggle:hover { border-color: var(--accent-gold); color: var(--accent-gold); background: var(--bg-card-hover); }
|
|
196
|
+
|
|
197
|
+
/* Brand logos in hero */
|
|
198
|
+
.hero-brands {
|
|
199
|
+
display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;
|
|
200
|
+
position: relative; z-index: 1;
|
|
201
|
+
}
|
|
202
|
+
.hero-brands .brand { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
|
|
203
|
+
.hero-brands .wash { color: var(--accent-blue); }
|
|
204
|
+
.hero-brands .times { color: var(--text-muted); font-weight: 300; font-size: 1.2rem; }
|
|
205
|
+
.hero-brands .cad { color: var(--accent-gold); }
|
|
206
|
+
|
|
207
|
+
/* Cycle symbol */
|
|
208
|
+
.cycle-symbol { width: 120px; height: 120px; margin-bottom: 1.5rem; position: relative; z-index: 1; animation: spinSlow 20s linear infinite; }
|
|
209
|
+
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
210
|
+
|
|
211
|
+
/* ============================================================
|
|
212
|
+
BRAND STORY SECTION
|
|
213
|
+
============================================================ */
|
|
214
|
+
.brand-story { text-align: center; }
|
|
215
|
+
.brand-story h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 20px; }
|
|
216
|
+
.brand-story > .container > .subtitle { color: var(--text-secondary); max-width: 700px; margin: 0 auto 60px; font-size: 1.1rem; }
|
|
217
|
+
|
|
218
|
+
.story-cards {
|
|
219
|
+
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto;
|
|
220
|
+
}
|
|
221
|
+
.story-card {
|
|
222
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
223
|
+
padding: 2.5rem; text-align: left; transition: all 0.3s; position: relative; overflow: hidden;
|
|
224
|
+
}
|
|
225
|
+
.story-card::before {
|
|
226
|
+
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
|
|
227
|
+
}
|
|
228
|
+
.story-card.wash::before { background: var(--accent-blue); }
|
|
229
|
+
.story-card.cad::before { background: var(--accent-gold); }
|
|
230
|
+
.story-card:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
231
|
+
.story-card .card-brand { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.5rem; }
|
|
232
|
+
.story-card .card-role { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; }
|
|
233
|
+
.story-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }
|
|
234
|
+
.story-card p strong { color: var(--text-primary); }
|
|
235
|
+
|
|
236
|
+
.story-connector {
|
|
237
|
+
text-align: center; padding: 2rem 0; font-size: 0.85rem; color: var(--accent-gold);
|
|
238
|
+
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* ============================================================
|
|
242
|
+
DNA GRID
|
|
243
|
+
============================================================ */
|
|
244
|
+
.dna-section { text-align: center; }
|
|
245
|
+
.dna-section h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 20px; }
|
|
246
|
+
.dna-section > .container > .subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.05rem; }
|
|
247
|
+
.dna-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
|
248
|
+
.dna-card {
|
|
249
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px;
|
|
250
|
+
padding: 2rem; text-align: left; transition: border-color 0.3s;
|
|
251
|
+
}
|
|
252
|
+
.dna-card:hover { border-color: var(--accent-gold); }
|
|
253
|
+
.dna-icon {
|
|
254
|
+
width: 48px; height: 48px; border-radius: 12px; display: flex;
|
|
255
|
+
align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem;
|
|
256
|
+
}
|
|
257
|
+
.dna-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
258
|
+
.dna-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
|
|
259
|
+
|
|
260
|
+
/* ============================================================
|
|
261
|
+
PROBLEM & SOLUTION
|
|
262
|
+
============================================================ */
|
|
263
|
+
.problem { text-align: center; }
|
|
264
|
+
.problem h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 60px; }
|
|
265
|
+
.problem-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
|
|
266
|
+
.problem-card {
|
|
267
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
268
|
+
padding: 32px; text-align: left; transition: all 0.3s;
|
|
269
|
+
}
|
|
270
|
+
.problem-card:hover { border-color: rgba(212,168,67,0.15); background: var(--bg-card-hover); }
|
|
271
|
+
.problem-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
|
|
272
|
+
.problem-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }
|
|
273
|
+
|
|
274
|
+
.solution { text-align: center; }
|
|
275
|
+
.solution h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 60px; }
|
|
276
|
+
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|
277
|
+
.feature-card {
|
|
278
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
279
|
+
padding: 32px; text-align: left; transition: all 0.3s;
|
|
280
|
+
}
|
|
281
|
+
.feature-card:hover { border-color: rgba(212,168,67,0.15); background: var(--bg-card-hover); transform: translateY(-2px); }
|
|
282
|
+
.feature-icon {
|
|
283
|
+
width: 48px; height: 48px; border-radius: 12px; display: flex;
|
|
284
|
+
align-items: center; justify-content: center; font-size: 22px; margin-bottom: 20px;
|
|
285
|
+
}
|
|
286
|
+
.feature-icon.gold { background: rgba(212,168,67,0.12); }
|
|
287
|
+
.feature-icon.blue { background: rgba(46,134,222,0.12); }
|
|
288
|
+
.feature-icon.teal { background: rgba(58,175,169,0.12); }
|
|
289
|
+
.feature-icon.purple { background: rgba(139,111,192,0.12); }
|
|
290
|
+
.feature-icon.warn { background: rgba(232,150,58,0.12); }
|
|
291
|
+
.feature-icon.coral { background: rgba(224,85,85,0.12); }
|
|
292
|
+
.feature-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 12px; }
|
|
293
|
+
.feature-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; }
|
|
294
|
+
|
|
295
|
+
/* ============================================================
|
|
296
|
+
EVERYONE IS A DESIGNER (PERSONAS)
|
|
297
|
+
============================================================ */
|
|
298
|
+
.personas { text-align: center; }
|
|
299
|
+
.personas h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 20px; }
|
|
300
|
+
.personas > .container > .subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.05rem; }
|
|
301
|
+
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
|
|
302
|
+
.persona-card {
|
|
303
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px;
|
|
304
|
+
padding: 2rem; text-align: left; transition: all 0.3s;
|
|
305
|
+
}
|
|
306
|
+
.persona-card:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
307
|
+
.persona-card .persona-icon { font-size: 2rem; margin-bottom: 0.8rem; }
|
|
308
|
+
.persona-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
309
|
+
.persona-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
|
|
310
|
+
|
|
311
|
+
/* ============================================================
|
|
312
|
+
OS OF THINGS PIPELINE
|
|
313
|
+
============================================================ */
|
|
314
|
+
.os-pipeline { text-align: center; position: relative; overflow: hidden; }
|
|
315
|
+
.os-pipeline::before {
|
|
316
|
+
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
|
317
|
+
background: radial-gradient(circle at 30% 50%, rgba(212,168,67,0.06) 0%, transparent 50%),
|
|
318
|
+
radial-gradient(circle at 70% 50%, rgba(46,134,222,0.06) 0%, transparent 50%);
|
|
319
|
+
}
|
|
320
|
+
.os-pipeline h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 16px; position: relative; z-index: 1; }
|
|
321
|
+
.os-pipeline > .container > .subtitle { color: var(--text-secondary); max-width: 700px; margin: 0 auto 50px; font-size: 1.05rem; position: relative; z-index: 1; }
|
|
322
|
+
|
|
323
|
+
.pipeline-flow {
|
|
324
|
+
display: flex; align-items: center; justify-content: center; gap: 0.6rem;
|
|
325
|
+
flex-wrap: wrap; position: relative; z-index: 1; max-width: 1000px; margin: 0 auto 3rem;
|
|
326
|
+
}
|
|
327
|
+
.pipeline-step {
|
|
328
|
+
background: var(--bg-card); border-radius: 14px; padding: 1.2rem 1.6rem;
|
|
329
|
+
border: 1px solid var(--border-card); text-align: center; min-width: 140px;
|
|
330
|
+
transition: all 0.3s;
|
|
331
|
+
}
|
|
332
|
+
.pipeline-step:hover { transform: translateY(-3px); border-color: var(--accent-gold); }
|
|
333
|
+
.pipeline-step .step-icon { font-size: 1.8rem; margin-bottom: 0.3rem; }
|
|
334
|
+
.pipeline-step .step-label { font-weight: 700; font-size: 0.95rem; }
|
|
335
|
+
.pipeline-step .step-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
|
|
336
|
+
.pipeline-arrow { color: var(--text-muted); font-size: 1.2rem; }
|
|
337
|
+
|
|
338
|
+
.os-pipeline .vision-text {
|
|
339
|
+
max-width: 700px; margin: 0 auto; font-size: 1.1rem; color: var(--text-secondary);
|
|
340
|
+
line-height: 1.7; position: relative; z-index: 1;
|
|
341
|
+
}
|
|
342
|
+
.os-pipeline .vision-text strong { color: var(--text-primary); }
|
|
343
|
+
|
|
344
|
+
/* ============================================================
|
|
345
|
+
MACHINES CREATING MACHINES
|
|
346
|
+
============================================================ */
|
|
347
|
+
.machines-section { text-align: center; position: relative; overflow: hidden; }
|
|
348
|
+
.machines-section::before {
|
|
349
|
+
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
|
350
|
+
background: radial-gradient(circle at 50% 50%, rgba(139,111,192,0.06) 0%, transparent 60%);
|
|
351
|
+
}
|
|
352
|
+
.machines-section h2 { font-size: clamp(2rem, 4.5vw, 3rem); position: relative; z-index: 1; margin-bottom: 1.5rem; }
|
|
353
|
+
.machines-section p { position: relative; z-index: 1; }
|
|
354
|
+
.machines-flow {
|
|
355
|
+
display: flex; align-items: center; justify-content: center; gap: 0.8rem;
|
|
356
|
+
flex-wrap: wrap; position: relative; z-index: 1; max-width: 900px; margin: 2.5rem auto;
|
|
357
|
+
}
|
|
358
|
+
.machine-step {
|
|
359
|
+
text-align: center; padding: 1rem 1.5rem; background: var(--bg-card);
|
|
360
|
+
border-radius: 12px; border: 1px solid var(--border-card);
|
|
361
|
+
}
|
|
362
|
+
.machine-step .m-label { font-size: 1.3rem; font-weight: 800; }
|
|
363
|
+
.machine-step .m-desc { font-size: 0.8rem; color: var(--text-muted); }
|
|
364
|
+
|
|
365
|
+
/* ============================================================
|
|
366
|
+
CAPABILITIES GRID
|
|
367
|
+
============================================================ */
|
|
368
|
+
.capabilities { text-align: center; }
|
|
369
|
+
.capabilities h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 20px; }
|
|
370
|
+
.capabilities > .container > p { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.1rem; }
|
|
371
|
+
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
|
372
|
+
.cap-item {
|
|
373
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px;
|
|
374
|
+
padding: 20px 16px; text-align: center; transition: all 0.2s;
|
|
375
|
+
}
|
|
376
|
+
.cap-item:hover { border-color: rgba(212,168,67,0.2); background: var(--bg-card-hover); }
|
|
377
|
+
.cap-item .cap-icon { font-size: 24px; margin-bottom: 10px; }
|
|
378
|
+
.cap-item h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
|
|
379
|
+
.cap-item p { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
|
|
380
|
+
|
|
381
|
+
/* ============================================================
|
|
382
|
+
PRICING SECTION
|
|
383
|
+
============================================================ */
|
|
384
|
+
.pricing { text-align: center; }
|
|
385
|
+
.pricing h2 { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 800px; margin: 0 auto 20px; }
|
|
386
|
+
.pricing > .container > .subtitle { color: var(--text-secondary); max-width: 600px; margin: 0 auto 60px; font-size: 1.05rem; }
|
|
387
|
+
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 960px; margin: 0 auto; }
|
|
388
|
+
.pricing-card {
|
|
389
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
390
|
+
padding: 2.5rem 2rem; text-align: center; transition: all 0.3s; position: relative; overflow: hidden;
|
|
391
|
+
}
|
|
392
|
+
.pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
|
|
393
|
+
.pricing-card.starter::before { background: var(--text-muted); }
|
|
394
|
+
.pricing-card.pro::before { background: var(--accent-blue); }
|
|
395
|
+
.pricing-card.enterprise::before { background: var(--accent-gold); }
|
|
396
|
+
.pricing-card.pro { border-color: rgba(46,134,222,0.3); }
|
|
397
|
+
.pricing-card:hover { transform: translateY(-3px); }
|
|
398
|
+
.pricing-card .tier-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
|
|
399
|
+
.pricing-card .tier-price { font-size: 2.2rem; font-weight: 900; margin-bottom: 0.3rem; }
|
|
400
|
+
.pricing-card .tier-period { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }
|
|
401
|
+
.pricing-card .tier-features { list-style: none; text-align: left; }
|
|
402
|
+
.pricing-card .tier-features li {
|
|
403
|
+
padding: 0.5rem 0; font-size: 0.9rem; color: var(--text-secondary);
|
|
404
|
+
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
405
|
+
}
|
|
406
|
+
.pricing-card .tier-features li::before { content: ""; margin-right: 0.5rem; }
|
|
407
|
+
.launch-badge {
|
|
408
|
+
display: inline-block; padding: 0.4rem 1rem; background: rgba(232,150,58,0.15);
|
|
409
|
+
border: 1px solid rgba(232,150,58,0.3); border-radius: 20px;
|
|
410
|
+
font-size: 0.8rem; color: var(--accent-warn); font-weight: 600; margin-top: 1rem;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* ============================================================
|
|
414
|
+
SHOWCASE
|
|
415
|
+
============================================================ */
|
|
416
|
+
.showcase { text-align: center; }
|
|
417
|
+
.showcase h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 800px; margin: 0 auto 60px; }
|
|
418
|
+
.showcase-visual {
|
|
419
|
+
max-width: 900px; margin: 0 auto; aspect-ratio: 16/9;
|
|
420
|
+
background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 16px;
|
|
421
|
+
overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative;
|
|
422
|
+
}
|
|
423
|
+
.showcase-visual .app-mockup { width: 100%; height: 100%; }
|
|
424
|
+
|
|
425
|
+
/* ============================================================
|
|
426
|
+
FINAL CTA
|
|
427
|
+
============================================================ */
|
|
428
|
+
.final-cta { text-align: center; padding: 160px 0; position: relative; }
|
|
429
|
+
.final-cta::before {
|
|
430
|
+
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
|
|
431
|
+
width: 600px; height: 400px;
|
|
432
|
+
background: radial-gradient(ellipse, rgba(212,168,67,0.1) 0%, transparent 70%);
|
|
433
|
+
pointer-events: none;
|
|
434
|
+
}
|
|
435
|
+
.final-cta h2 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 800px; margin: 0 auto 24px; }
|
|
436
|
+
.final-cta p { color: var(--text-secondary); font-size: 1.1rem; max-width: 500px; margin: 0 auto 40px; }
|
|
437
|
+
|
|
438
|
+
/* ============================================================
|
|
439
|
+
FOOTER
|
|
440
|
+
============================================================ */
|
|
441
|
+
footer { padding: 32px 0; border-top: 1px solid var(--border-card); text-align: center; }
|
|
442
|
+
footer .container { display: flex; justify-content: space-between; align-items: center; }
|
|
443
|
+
footer .nav-logo { font-size: 1rem; }
|
|
444
|
+
footer p { color: var(--text-muted); font-size: 0.8rem; }
|
|
445
|
+
footer .footer-links { display: flex; gap: 24px; list-style: none; }
|
|
446
|
+
footer .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; transition: color 0.2s; }
|
|
447
|
+
footer .footer-links a:hover { color: var(--text-secondary); }
|
|
448
|
+
|
|
449
|
+
/* Mockup */
|
|
450
|
+
.hero-visual { margin-top: 60px; width: 100%; max-width: 900px; aspect-ratio: 16/9; background: radial-gradient(ellipse at center bottom, rgba(212,168,67,0.08) 0%, transparent 70%); border-radius: 16px; border: 1px solid var(--border-card); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; z-index: 1; }
|
|
451
|
+
.app-mockup { width: 100%; height: 100%; background: var(--mockup-bg); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
|
|
452
|
+
.mockup-toolbar { height: 36px; background: var(--mockup-toolbar); border-bottom: 1px solid var(--mockup-toolbar-border); display: flex; align-items: center; padding: 0 12px; gap: 6px; }
|
|
453
|
+
.mockup-dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
454
|
+
.mockup-dot.red { background: #ff5f57; } .mockup-dot.yellow { background: #febc2e; } .mockup-dot.green { background: #28c840; }
|
|
455
|
+
.mockup-toolbar-items { display: flex; gap: 8px; margin-left: 16px; }
|
|
456
|
+
.mockup-toolbar-item { width: 40px; height: 6px; background: var(--mockup-tree); border-radius: 3px; }
|
|
457
|
+
.mockup-body { flex: 1; display: flex; }
|
|
458
|
+
.mockup-sidebar { width: 160px; background: var(--mockup-sidebar); border-right: 1px solid var(--mockup-sidebar-border); padding: 12px 8px; }
|
|
459
|
+
.mockup-tree-item { height: 5px; background: var(--mockup-tree); border-radius: 3px; margin-bottom: 6px; }
|
|
460
|
+
.mockup-tree-item.active { background: var(--accent-gold); opacity: 0.6; }
|
|
461
|
+
.mockup-tree-item.indent { margin-left: 12px; width: calc(100% - 12px); }
|
|
462
|
+
.mockup-viewport { flex: 1; background: radial-gradient(ellipse at center, var(--mockup-viewport-center) 0%, var(--mockup-viewport-edge) 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
|
|
463
|
+
.mockup-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 30px 30px; transform: perspective(600px) rotateX(45deg); transform-origin: center 70%; }
|
|
464
|
+
.mockup-3d-shape { position: relative; z-index: 1; }
|
|
465
|
+
.cube-container { width: 120px; height: 120px; perspective: 400px; }
|
|
466
|
+
.cube { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-25deg) rotateY(40deg); animation: cubeRotate 20s linear infinite; }
|
|
467
|
+
@keyframes cubeRotate { 0% { transform: rotateX(-25deg) rotateY(40deg); } 100% { transform: rotateX(-25deg) rotateY(400deg); } }
|
|
468
|
+
.cube-face { position: absolute; width: 100px; height: 100px; border: 1.5px solid var(--cube-border); background: var(--cube-bg); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); }
|
|
469
|
+
.cube-face.front { transform: translateZ(50px) translateX(10px) translateY(10px); }
|
|
470
|
+
.cube-face.back { transform: rotateY(180deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
471
|
+
.cube-face.right { transform: rotateY(90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
472
|
+
.cube-face.left { transform: rotateY(-90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
473
|
+
.cube-face.top { transform: rotateX(90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
474
|
+
.cube-face.bottom { transform: rotateX(-90deg) translateZ(50px) translateX(10px) translateY(10px); }
|
|
475
|
+
.mockup-props { width: 180px; background: var(--mockup-sidebar); border-left: 1px solid var(--mockup-sidebar-border); padding: 12px 8px; }
|
|
476
|
+
.mockup-prop-label { height: 4px; width: 40px; background: var(--mockup-tree); border-radius: 2px; margin-bottom: 8px; }
|
|
477
|
+
.mockup-prop-value { height: 4px; width: 70px; background: var(--mockup-tree); border-radius: 2px; margin-bottom: 12px; }
|
|
478
|
+
|
|
479
|
+
/* ============================================================
|
|
480
|
+
RESPONSIVE
|
|
481
|
+
============================================================ */
|
|
482
|
+
@media (max-width: 900px) {
|
|
483
|
+
.story-cards { grid-template-columns: 1fr; }
|
|
484
|
+
.problem-cards { grid-template-columns: 1fr; }
|
|
485
|
+
.feature-cards { grid-template-columns: 1fr; }
|
|
486
|
+
.dna-grid { grid-template-columns: 1fr; }
|
|
487
|
+
.persona-grid { grid-template-columns: 1fr; }
|
|
488
|
+
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
|
|
489
|
+
.cap-grid { grid-template-columns: repeat(2, 1fr); }
|
|
490
|
+
.mockup-props, .mockup-sidebar { display: none; }
|
|
491
|
+
nav .nav-links { display: none; }
|
|
492
|
+
.pipeline-flow { gap: 0.4rem; }
|
|
493
|
+
.pipeline-step { min-width: 100px; padding: 0.8rem 1rem; }
|
|
494
|
+
.pipeline-arrow { display: none; }
|
|
495
|
+
}
|
|
496
|
+
@media (max-width: 600px) {
|
|
497
|
+
section { padding: 80px 0; }
|
|
498
|
+
.cap-grid { grid-template-columns: 1fr 1fr; }
|
|
499
|
+
.hero-ctas { flex-direction: column; align-items: center; }
|
|
500
|
+
footer .container { flex-direction: column; gap: 16px; }
|
|
501
|
+
footer .footer-links { gap: 16px; }
|
|
502
|
+
.hero-brands .brand { font-size: 1.1rem; }
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
/* Animations */
|
|
506
|
+
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
|
507
|
+
.fade-up { opacity: 0; animation: fadeUp 0.8s ease forwards; }
|
|
508
|
+
.fade-up.d1 { animation-delay: 0.1s; } .fade-up.d2 { animation-delay: 0.2s; }
|
|
509
|
+
.fade-up.d3 { animation-delay: 0.3s; } .fade-up.d4 { animation-delay: 0.4s; }
|
|
510
|
+
.fade-up.d5 { animation-delay: 0.5s; }
|
|
511
|
+
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
512
|
+
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
513
|
+
</style>
|
|
514
|
+
</head>
|
|
515
|
+
<body>
|
|
516
|
+
|
|
517
|
+
<!-- NAVIGATION -->
|
|
518
|
+
<nav>
|
|
519
|
+
<div class="container">
|
|
520
|
+
<a href="#" class="nav-logo">
|
|
521
|
+
<div class="nav-logo-icon">⚙</div>
|
|
522
|
+
<span class="cycle">cycle</span><span class="cad">CAD</span>
|
|
523
|
+
</a>
|
|
524
|
+
<ul class="nav-links">
|
|
525
|
+
<li><a href="#story">Story</a></li>
|
|
526
|
+
<li><a href="#features">Features</a></li>
|
|
527
|
+
<li><a href="#vision">Vision</a></li>
|
|
528
|
+
<li><a href="#token-economy">Token Economy</a></li>
|
|
529
|
+
<li><a href="https://github.com/vvlars-cmd/cyclecad" target="_blank">GitHub</a></li>
|
|
530
|
+
<li><a href="/app/" class="nav-cta">Launch App</a></li>
|
|
531
|
+
<li><button class="theme-toggle" id="theme-toggle" title="Toggle dark/light mode" aria-label="Toggle theme">☀️</button></li>
|
|
532
|
+
</ul>
|
|
533
|
+
</div>
|
|
534
|
+
</nav>
|
|
535
|
+
|
|
536
|
+
<!-- ============================================================
|
|
537
|
+
HERO — cycleWASH × cycleCAD
|
|
538
|
+
============================================================ -->
|
|
539
|
+
<section class="hero" id="hero">
|
|
540
|
+
<div class="cycle-symbol fade-up d1">
|
|
541
|
+
<svg viewBox="0 0 200 200">
|
|
542
|
+
<defs>
|
|
543
|
+
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
544
|
+
<stop offset="0%" style="stop-color:#2E86DE;stop-opacity:1" />
|
|
545
|
+
<stop offset="50%" style="stop-color:#D4A843;stop-opacity:1" />
|
|
546
|
+
<stop offset="100%" style="stop-color:#3AAFA9;stop-opacity:1" />
|
|
547
|
+
</linearGradient>
|
|
548
|
+
</defs>
|
|
549
|
+
<path d="M 100 20 A 80 80 0 0 1 169 60" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
550
|
+
<polygon points="172,55 165,68 158,55" fill="#D4A843"/>
|
|
551
|
+
<path d="M 169 140 A 80 80 0 0 1 31 140" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
552
|
+
<polygon points="28,136 35,148 22,148" fill="#3AAFA9"/>
|
|
553
|
+
<path d="M 31 60 A 80 80 0 0 1 100 20" fill="none" stroke="url(#grad1)" stroke-width="4" stroke-linecap="round"/>
|
|
554
|
+
<polygon points="96,17 103,28 90,28" fill="#2E86DE"/>
|
|
555
|
+
<text x="100" y="95" text-anchor="middle" fill="#F0F0E8" font-family="Inter, sans-serif" font-weight="800" font-size="22">cycle</text>
|
|
556
|
+
<text x="100" y="118" text-anchor="middle" fill="#8B9AB5" font-family="Inter, sans-serif" font-weight="400" font-size="11" letter-spacing="3">ENGINEERING</text>
|
|
557
|
+
</svg>
|
|
558
|
+
</div>
|
|
559
|
+
|
|
560
|
+
<div class="hero-brands fade-up d2">
|
|
561
|
+
<span class="brand wash">cycleWASH</span>
|
|
562
|
+
<span class="times">×</span>
|
|
563
|
+
<span class="brand cad">cycleCAD</span>
|
|
564
|
+
</div>
|
|
565
|
+
|
|
566
|
+
<h1 class="fade-up d2">
|
|
567
|
+
<span class="gradient-text">The Agent-First OS for Manufacturing</span>
|
|
568
|
+
</h1>
|
|
569
|
+
|
|
570
|
+
<p class="fade-up d3">
|
|
571
|
+
CAD was built for humans with a mouse. We built it for AI agents.<br>
|
|
572
|
+
12 killer features. 46 modules. 52,000+ lines of code. Zero install.<br>
|
|
573
|
+
Every agent — from GPT to Claude to Gemini — designs, simulates, and manufactures through cycleCAD.
|
|
574
|
+
</p>
|
|
575
|
+
|
|
576
|
+
<div class="hero-ctas fade-up d4">
|
|
577
|
+
<a href="/app/" class="btn-primary">Explore the Platform</a>
|
|
578
|
+
<a href="#story" class="btn-secondary">Our Story</a>
|
|
579
|
+
</div>
|
|
580
|
+
|
|
581
|
+
<div class="hero-visual fade-up d5">
|
|
582
|
+
<div class="app-mockup">
|
|
583
|
+
<div class="mockup-toolbar">
|
|
584
|
+
<div class="mockup-dot red"></div>
|
|
585
|
+
<div class="mockup-dot yellow"></div>
|
|
586
|
+
<div class="mockup-dot green"></div>
|
|
587
|
+
<div class="mockup-toolbar-items">
|
|
588
|
+
<div class="mockup-toolbar-item"></div>
|
|
589
|
+
<div class="mockup-toolbar-item"></div>
|
|
590
|
+
<div class="mockup-toolbar-item" style="width:50px"></div>
|
|
591
|
+
<div class="mockup-toolbar-item"></div>
|
|
592
|
+
<div class="mockup-toolbar-item" style="width:30px"></div>
|
|
593
|
+
<div class="mockup-toolbar-item"></div>
|
|
594
|
+
<div class="mockup-toolbar-item" style="width:60px;background:rgba(212,168,67,0.3);"></div>
|
|
595
|
+
</div>
|
|
596
|
+
</div>
|
|
597
|
+
<div class="mockup-body">
|
|
598
|
+
<div class="mockup-sidebar">
|
|
599
|
+
<div style="height:4px;width:50px;background:#D4A843;opacity:0.5;border-radius:2px;margin-bottom:10px;"></div>
|
|
600
|
+
<div class="mockup-tree-item" style="width:80%"></div>
|
|
601
|
+
<div class="mockup-tree-item indent active"></div>
|
|
602
|
+
<div class="mockup-tree-item indent" style="width:60%"></div>
|
|
603
|
+
<div class="mockup-tree-item indent" style="width:70%"></div>
|
|
604
|
+
<div class="mockup-tree-item" style="width:75%"></div>
|
|
605
|
+
<div class="mockup-tree-item indent" style="width:55%"></div>
|
|
606
|
+
<div class="mockup-tree-item indent active" style="width:65%"></div>
|
|
607
|
+
<div class="mockup-tree-item" style="width:85%"></div>
|
|
608
|
+
<div class="mockup-tree-item indent" style="width:50%"></div>
|
|
609
|
+
</div>
|
|
610
|
+
<div class="mockup-viewport">
|
|
611
|
+
<div class="mockup-grid"></div>
|
|
612
|
+
<div class="mockup-3d-shape">
|
|
613
|
+
<div class="cube-container">
|
|
614
|
+
<div class="cube">
|
|
615
|
+
<div class="cube-face front"></div>
|
|
616
|
+
<div class="cube-face back"></div>
|
|
617
|
+
<div class="cube-face right"></div>
|
|
618
|
+
<div class="cube-face left"></div>
|
|
619
|
+
<div class="cube-face top"></div>
|
|
620
|
+
<div class="cube-face bottom"></div>
|
|
621
|
+
</div>
|
|
622
|
+
</div>
|
|
623
|
+
</div>
|
|
624
|
+
</div>
|
|
625
|
+
<div class="mockup-props">
|
|
626
|
+
<div style="height:4px;width:50px;background:#2E86DE;opacity:0.4;border-radius:2px;margin-bottom:10px;"></div>
|
|
627
|
+
<div class="mockup-prop-label"></div>
|
|
628
|
+
<div class="mockup-prop-value"></div>
|
|
629
|
+
<div class="mockup-prop-label" style="width:50px"></div>
|
|
630
|
+
<div class="mockup-prop-value" style="width:55px"></div>
|
|
631
|
+
<div class="mockup-prop-label" style="width:35px"></div>
|
|
632
|
+
<div class="mockup-prop-value" style="width:60px"></div>
|
|
633
|
+
<div style="height:1px;background:var(--border-card);margin:16px 0;"></div>
|
|
634
|
+
<div class="mockup-prop-label" style="width:55px"></div>
|
|
635
|
+
<div class="mockup-prop-value" style="width:80px"></div>
|
|
636
|
+
</div>
|
|
637
|
+
</div>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
</section>
|
|
641
|
+
|
|
642
|
+
<!-- ============================================================
|
|
643
|
+
BRAND STORY — One Prefix. One Philosophy.
|
|
644
|
+
============================================================ -->
|
|
645
|
+
<section class="brand-story" id="story">
|
|
646
|
+
<div class="container">
|
|
647
|
+
<div class="section-label reveal">OUR STORY</div>
|
|
648
|
+
<h2 class="reveal">One Prefix. <span class="gradient-text">One Philosophy.</span></h2>
|
|
649
|
+
<p class="subtitle reveal">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>
|
|
650
|
+
|
|
651
|
+
<div class="story-cards">
|
|
652
|
+
<div class="story-card wash reveal">
|
|
653
|
+
<div class="card-brand" style="color:var(--accent-blue);">cycleWASH</div>
|
|
654
|
+
<div class="card-role">Circular Engineering</div>
|
|
655
|
+
<p>cycleWASH builds <strong>industrial bicycle washing machines</strong> — real hardware that keeps bikes in circulation longer. Complex machines with hundreds of precision-engineered parts across multiple sub-assemblies, designed in Autodesk Inventor and built in Germany.</p>
|
|
656
|
+
<p style="margin-top:1rem;">Every part is designed for <strong>disassembly, repair, and reuse</strong>. That's circular engineering — designing products that fight the throwaway economy from the first sketch.</p>
|
|
657
|
+
</div>
|
|
658
|
+
<div class="story-card cad reveal">
|
|
659
|
+
<div class="card-brand" style="color:var(--accent-gold);">cycleCAD</div>
|
|
660
|
+
<div class="card-role">Democratizing Design</div>
|
|
661
|
+
<p>Designing complex machines meant fighting <strong>$4,000/year CAD licenses</strong>, proprietary file formats, and tools that lock you into one vendor's ecosystem. We built cycleCAD to solve our own problem — and to power the <strong>circular economy</strong>.</p>
|
|
662
|
+
<p style="margin-top:1rem;"><strong>Browser-based, zero-install, AI-agent-ready.</strong> Built so AI agents can design autonomously, unskilled workers can build with confidence, and anyone with a browser can participate in the circular economy.</p>
|
|
663
|
+
</div>
|
|
664
|
+
</div>
|
|
665
|
+
</div>
|
|
666
|
+
</section>
|
|
667
|
+
|
|
668
|
+
<!-- ============================================================
|
|
669
|
+
SHARED BRAND DNA
|
|
670
|
+
============================================================ -->
|
|
671
|
+
<section class="dna-section" id="dna">
|
|
672
|
+
<div class="container">
|
|
673
|
+
<div class="section-label reveal">SHARED DNA</div>
|
|
674
|
+
<h2 class="reveal">What makes it a <span class="gradient-text">"cycle" product</span></h2>
|
|
675
|
+
<p class="subtitle reveal">Six principles that define everything we build.</p>
|
|
676
|
+
|
|
677
|
+
<div class="dna-grid">
|
|
678
|
+
<div class="dna-card reveal">
|
|
679
|
+
<div class="dna-icon" style="background:rgba(46,134,222,0.12);">🔄</div>
|
|
680
|
+
<h4>Circular by Design</h4>
|
|
681
|
+
<p>cycleWASH machines are built for disassembly and repair. cycleCAD's rebuild guides and maintenance tools encode that philosophy into software.</p>
|
|
682
|
+
</div>
|
|
683
|
+
<div class="dna-card reveal">
|
|
684
|
+
<div class="dna-icon" style="background:rgba(212,168,67,0.12);">🌍</div>
|
|
685
|
+
<h4>Accessible to All</h4>
|
|
686
|
+
<p>No gatekeeping. cycleWASH publishes its part data openly. cycleCAD runs in any browser — no download, no license key, no barrier to entry.</p>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="dna-card reveal">
|
|
689
|
+
<div class="dna-icon" style="background:rgba(139,111,192,0.12);">🏭</div>
|
|
690
|
+
<h4>Real-World Proven</h4>
|
|
691
|
+
<p>cycleCAD isn't academic software — it's been tested with complex cycleWASH machines. Every feature exists because a real engineering team needed it.</p>
|
|
692
|
+
</div>
|
|
693
|
+
<div class="dna-card reveal">
|
|
694
|
+
<div class="dna-icon" style="background:rgba(232,150,58,0.12);">🧠</div>
|
|
695
|
+
<h4>AI-Native Intelligence</h4>
|
|
696
|
+
<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>
|
|
697
|
+
</div>
|
|
698
|
+
<div class="dna-card reveal">
|
|
699
|
+
<div class="dna-icon" style="background:rgba(58,175,169,0.12);">👥</div>
|
|
700
|
+
<h4>Community-Driven</h4>
|
|
701
|
+
<p>cycleWASH grew from the bike community. cycleCAD grows from the maker community. Both believe the best products are built with their users, not just for them.</p>
|
|
702
|
+
</div>
|
|
703
|
+
<div class="dna-card reveal">
|
|
704
|
+
<div class="dna-icon" style="background:rgba(224,85,85,0.12);">🇩🇪</div>
|
|
705
|
+
<h4>German Engineering, Global Reach</h4>
|
|
706
|
+
<p>Designed in Germany, deployed everywhere. cycleWASH machines operate across Europe. cycleCAD runs in any browser, any country, 6 languages.</p>
|
|
707
|
+
</div>
|
|
708
|
+
</div>
|
|
709
|
+
</div>
|
|
710
|
+
</section>
|
|
711
|
+
|
|
712
|
+
<!-- ============================================================
|
|
713
|
+
THE PROBLEM
|
|
714
|
+
============================================================ -->
|
|
715
|
+
<section class="problem" id="problem">
|
|
716
|
+
<div class="container">
|
|
717
|
+
<div class="section-label reveal">THE PROBLEM</div>
|
|
718
|
+
<h2 class="reveal">CAD software is <span class="gradient-text">stuck in the past</span></h2>
|
|
719
|
+
<div class="problem-cards">
|
|
720
|
+
<div class="problem-card reveal">
|
|
721
|
+
<h3>Requires screen, mouse, keyboard</h3>
|
|
722
|
+
<p>Traditional CAD demands a trained human sitting at a workstation. An AI agent can't use SolidWorks. An unskilled worker can't use Inventor. The interface IS the bottleneck.</p>
|
|
723
|
+
</div>
|
|
724
|
+
<div class="problem-card reveal">
|
|
725
|
+
<h3>$680 — $6,000 per year</h3>
|
|
726
|
+
<p>Professional CAD tools cost thousands per seat per year. Small teams, field workers, and developing nations are priced out of designing their own products.</p>
|
|
727
|
+
</div>
|
|
728
|
+
<div class="problem-card reveal">
|
|
729
|
+
<h3>No intelligence built in</h3>
|
|
730
|
+
<p>Traditional CAD is a dumb drawing tool. No AI analysis, no maintenance planning, no autonomous design. Every action requires a trained human operator.</p>
|
|
731
|
+
</div>
|
|
732
|
+
<div class="problem-card reveal">
|
|
733
|
+
<h3>Designed for the throwaway economy</h3>
|
|
734
|
+
<p>No tool helps you design for disassembly, repair, or reuse. No wear prediction, no maintenance scheduling, no circular economy thinking. Design once, throw away, repeat.</p>
|
|
735
|
+
</div>
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
</section>
|
|
739
|
+
|
|
740
|
+
<!-- ============================================================
|
|
741
|
+
THE SOLUTION / FEATURES
|
|
742
|
+
============================================================ -->
|
|
743
|
+
<section class="solution" id="features">
|
|
744
|
+
<div class="container">
|
|
745
|
+
<div class="section-label reveal">THE PLATFORM</div>
|
|
746
|
+
<h2 class="reveal">12 killer features. <span class="gradient-text">Zero competition.</span></h2>
|
|
747
|
+
<p class="subtitle reveal">No other browser CAD has all of these. Most desktop tools don't either. v3.9.0 — 52,000+ lines of module code across 46 modules.</p>
|
|
748
|
+
|
|
749
|
+
<!-- Stats Bar -->
|
|
750
|
+
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:2.5rem 0;text-align:center;" class="reveal">
|
|
751
|
+
<div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:20px;">
|
|
752
|
+
<div style="font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">12</div>
|
|
753
|
+
<div style="color:var(--text-secondary);font-size:0.85rem;margin-top:4px;">Killer Features</div>
|
|
754
|
+
</div>
|
|
755
|
+
<div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:20px;">
|
|
756
|
+
<div style="font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">52K+</div>
|
|
757
|
+
<div style="color:var(--text-secondary);font-size:0.85rem;margin-top:4px;">Lines of Code</div>
|
|
758
|
+
</div>
|
|
759
|
+
<div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:20px;">
|
|
760
|
+
<div style="font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">46</div>
|
|
761
|
+
<div style="color:var(--text-secondary);font-size:0.85rem;margin-top:4px;">JS Modules</div>
|
|
762
|
+
</div>
|
|
763
|
+
<div style="background:var(--bg-card);border:1px solid var(--border-card);border-radius:12px;padding:20px;">
|
|
764
|
+
<div style="font-size:2rem;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">200+</div>
|
|
765
|
+
<div style="color:var(--text-secondary);font-size:0.85rem;margin-top:4px;">Standard Parts</div>
|
|
766
|
+
</div>
|
|
767
|
+
</div>
|
|
768
|
+
|
|
769
|
+
<div class="feature-cards" style="grid-template-columns:repeat(3,1fr);">
|
|
770
|
+
<!-- Row 1: AI-Powered Design -->
|
|
771
|
+
<div class="feature-card reveal">
|
|
772
|
+
<div class="feature-icon gold">⚡</div>
|
|
773
|
+
<h3>Text-to-CAD (AI)</h3>
|
|
774
|
+
<p>Type "flanged cylinder 50mm with 4 bolt holes on 70mm PCD" and watch it appear in real-time. 18 shape types, NLP parser, live ghost preview, multi-step builder.</p>
|
|
775
|
+
</div>
|
|
776
|
+
<div class="feature-card reveal">
|
|
777
|
+
<div class="feature-icon blue">📷</div>
|
|
778
|
+
<h3>Photo-to-CAD</h3>
|
|
779
|
+
<p>Take a photo of any part — edge detection, contour extraction, and 3D reconstruction. Sobel + Hough transforms, reference scaling, Gemini Vision AI enhancement.</p>
|
|
780
|
+
</div>
|
|
781
|
+
<div class="feature-card reveal">
|
|
782
|
+
<div class="feature-icon teal">🏭</div>
|
|
783
|
+
<h3>Manufacturability (DFM)</h3>
|
|
784
|
+
<p>Instant feedback for 9 processes: CNC, FDM, SLA, SLS, injection molding, sheet metal, sand/investment/die casting. 20+ materials database with cost estimator.</p>
|
|
785
|
+
</div>
|
|
786
|
+
|
|
787
|
+
<!-- Row 2: Simulation & Optimization -->
|
|
788
|
+
<div class="feature-card reveal">
|
|
789
|
+
<div class="feature-icon purple">🧬</div>
|
|
790
|
+
<h3>Generative Design</h3>
|
|
791
|
+
<p>SIMP topology optimization with live voxel visualization. Define loads and constraints, watch material dissolve away. Marching cubes isosurface, STL export.</p>
|
|
792
|
+
</div>
|
|
793
|
+
<div class="feature-card reveal">
|
|
794
|
+
<div class="feature-icon warn">🔬</div>
|
|
795
|
+
<h3>Multi-Physics Simulation</h3>
|
|
796
|
+
<p>Structural FEA (Von Mises), thermal analysis, modal frequency, drop test — all in-browser. Conjugate gradient solver, heatmap overlay, deformation visualization.</p>
|
|
797
|
+
</div>
|
|
798
|
+
<div class="feature-card reveal">
|
|
799
|
+
<div class="feature-icon coral">🔩</div>
|
|
800
|
+
<h3>Smart Parts Library</h3>
|
|
801
|
+
<p>200+ standard parts: ISO fasteners, bearings, linear rails, extrusions, motors, PCBs. AI-powered fuzzy search, BOM management, McMaster/Misumi/DigiKey cross-ref.</p>
|
|
802
|
+
</div>
|
|
803
|
+
|
|
804
|
+
<!-- Row 3: Assembly & Automation -->
|
|
805
|
+
<div class="feature-card reveal">
|
|
806
|
+
<div class="feature-icon gold">🧲</div>
|
|
807
|
+
<h3>Smart Assembly Mating</h3>
|
|
808
|
+
<p>Drag parts near each other — auto-detect 8 constraint types (coincident, concentric, tangent, gear). Motion study with joint animation, interference detection.</p>
|
|
809
|
+
</div>
|
|
810
|
+
<div class="feature-card reveal">
|
|
811
|
+
<div class="feature-icon blue">🤖</div>
|
|
812
|
+
<h3>Auto-Assemble Parts</h3>
|
|
813
|
+
<p>AI geometry fingerprinting matches shafts to holes, faces to faces, bolts to bores. One-click assembly with animated placement, collision detection, validation.</p>
|
|
814
|
+
</div>
|
|
815
|
+
<div class="feature-card reveal">
|
|
816
|
+
<div class="feature-icon teal">📊</div>
|
|
817
|
+
<h3>Parametric from Example</h3>
|
|
818
|
+
<p>Upload 2-5 design variants — AI infers which dimensions are parameters, detects relationships, generates a full parametric family with morphing animation.</p>
|
|
819
|
+
</div>
|
|
820
|
+
|
|
821
|
+
<!-- Row 4: Connected Manufacturing -->
|
|
822
|
+
<div class="feature-card reveal">
|
|
823
|
+
<div class="feature-icon purple">📡</div>
|
|
824
|
+
<h3>Digital Twin Live Data</h3>
|
|
825
|
+
<p>Connect IoT sensors (MQTT/REST/WebSocket) to your 3D model. Live temperature heatmaps, vibration animation, predictive maintenance, alert dashboard. cycleWASH-ready.</p>
|
|
826
|
+
</div>
|
|
827
|
+
<div class="feature-card reveal">
|
|
828
|
+
<div class="feature-icon warn">🖨️</div>
|
|
829
|
+
<h3>Machine Control (CNC/3DP)</h3>
|
|
830
|
+
<p>Built-in G-code generator for FDM, CNC milling, and laser cutting. Connect to OctoPrint, Klipper, or Moonraker. Jog controls, temp monitoring, job tracking.</p>
|
|
831
|
+
</div>
|
|
832
|
+
<div class="feature-card reveal">
|
|
833
|
+
<div class="feature-icon coral">📓</div>
|
|
834
|
+
<h3>Engineering Notebook</h3>
|
|
835
|
+
<p>Auto-logs every design action. Rich text entries, AI-powered summaries, version snapshots with visual diff, decision tracking. Export as HTML/Markdown/JSON report.</p>
|
|
836
|
+
</div>
|
|
837
|
+
</div>
|
|
838
|
+
|
|
839
|
+
<!-- Plus the foundations -->
|
|
840
|
+
<div style="margin-top:2rem;text-align:center;" class="reveal">
|
|
841
|
+
<p style="color:var(--text-secondary);font-size:0.95rem;max-width:700px;margin:0 auto;"><strong>Plus the foundations:</strong> Full parametric modeling, native Inventor file parsing, ExplodeView 3D viewer, MCP server + CLI + REST API, $CYCLE token economy, model marketplace, 30+ tutorials, and comprehensive documentation.</p>
|
|
842
|
+
</div>
|
|
843
|
+
</div>
|
|
844
|
+
</section>
|
|
845
|
+
|
|
846
|
+
<!-- ============================================================
|
|
847
|
+
EVERYONE IS A DESIGNER
|
|
848
|
+
============================================================ -->
|
|
849
|
+
<section class="personas" id="personas">
|
|
850
|
+
<div class="container">
|
|
851
|
+
<div class="section-label reveal">AGENTS ARE THE INTERFACE</div>
|
|
852
|
+
<h2 class="reveal"><span class="gradient-text">CAD built for agents.</span> Used by everyone.</h2>
|
|
853
|
+
<p class="subtitle reveal">Everyone uses cycleCAD — but nobody opens it. Your AI agent is the interface. Tell it what you need. It designs through cycleCAD.</p>
|
|
854
|
+
|
|
855
|
+
<div class="persona-grid" style="grid-template-columns: repeat(4, 1fr);">
|
|
856
|
+
<div class="persona-card reveal">
|
|
857
|
+
<div class="persona-icon">🤖</div>
|
|
858
|
+
<h4>Any AI Agent</h4>
|
|
859
|
+
<p>GPT, Claude, Gemini, Llama, Mistral — any LLM can design, validate, and manufacture through cycleCAD's API. The agent IS the interface.</p>
|
|
860
|
+
</div>
|
|
861
|
+
<div class="persona-card reveal">
|
|
862
|
+
<div class="persona-icon">🔧</div>
|
|
863
|
+
<h4>Field Technician</h4>
|
|
864
|
+
<p>"I need a replacement bracket for the DUO." Their agent designs it, validates DFM, sends G-code to the printer. No CAD skills needed.</p>
|
|
865
|
+
</div>
|
|
866
|
+
<div class="persona-card reveal">
|
|
867
|
+
<div class="persona-icon">💼</div>
|
|
868
|
+
<h4>Product Manager</h4>
|
|
869
|
+
<p>"Make the frame 10% lighter." Their agent runs topology optimization through cycleCAD, presents three options.</p>
|
|
870
|
+
</div>
|
|
871
|
+
<div class="persona-card reveal">
|
|
872
|
+
<div class="persona-icon">📊</div>
|
|
873
|
+
<h4>Sales Engineer</h4>
|
|
874
|
+
<p>"Configure this for the client's specs." Their agent modifies the parametric model, exports a spec sheet, shares a 3D link.</p>
|
|
875
|
+
</div>
|
|
876
|
+
<div class="persona-card reveal">
|
|
877
|
+
<div class="persona-icon">🏭</div>
|
|
878
|
+
<h4>Factory Floor</h4>
|
|
879
|
+
<p>Machine sensors detect wear. An agent designs the replacement, validates tolerances, generates G-code. No human touched a mouse.</p>
|
|
880
|
+
</div>
|
|
881
|
+
<div class="persona-card reveal">
|
|
882
|
+
<div class="persona-icon">🔬</div>
|
|
883
|
+
<h4>Researcher</h4>
|
|
884
|
+
<p>"Design a centrifuge mount for 12,000 RPM." Their agent runs stress analysis through cycleCAD, iterates until it passes.</p>
|
|
885
|
+
</div>
|
|
886
|
+
<div class="persona-card reveal">
|
|
887
|
+
<div class="persona-icon">♻️</div>
|
|
888
|
+
<h4>Circular Economy</h4>
|
|
889
|
+
<p>End-of-life agent scans a product, identifies reusable parts, redesigns what's worn, routes recycling. The loop closes automatically.</p>
|
|
890
|
+
</div>
|
|
891
|
+
<div class="persona-card reveal">
|
|
892
|
+
<div class="persona-icon">🌐</div>
|
|
893
|
+
<h4>Agent Swarms</h4>
|
|
894
|
+
<p>Hundreds of agents working in parallel — designing, validating, manufacturing, repairing. 24/7. No GUI. No breaks. Just $CYCLE tokens flowing.</p>
|
|
895
|
+
</div>
|
|
896
|
+
</div>
|
|
897
|
+
</div>
|
|
898
|
+
</section>
|
|
899
|
+
|
|
900
|
+
<!-- ============================================================
|
|
901
|
+
THE OS OF THINGS — Pipeline
|
|
902
|
+
============================================================ -->
|
|
903
|
+
<section class="os-pipeline" id="vision">
|
|
904
|
+
<div class="container">
|
|
905
|
+
<div class="section-label reveal">THE VISION</div>
|
|
906
|
+
<h2 class="reveal"><span class="gradient-text">The Agent-First OS for Manufacturing</span></h2>
|
|
907
|
+
<p class="subtitle reveal">Just like a computer OS connects hardware, drivers, and applications — cycleCAD connects CAD, CAM, analysis, scanning, VR, drawings, manufacturing, and end of life into one system. AI agents are the users. The API is the interface. $CYCLE tokens are the currency.</p>
|
|
908
|
+
|
|
909
|
+
<!-- The disconnected islands — BEFORE -->
|
|
910
|
+
<p style="color:var(--accent-warn);font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.5rem;position:relative;z-index:1;" class="reveal">TODAY: DISCONNECTED ISLANDS</p>
|
|
911
|
+
<div class="pipeline-flow reveal" style="opacity:0.5;margin-bottom:3rem;">
|
|
912
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
913
|
+
<div class="step-icon">📐</div>
|
|
914
|
+
<div class="step-label" style="color:var(--accent-coral);">CAD</div>
|
|
915
|
+
</div>
|
|
916
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
917
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
918
|
+
<div class="step-icon">⚙️</div>
|
|
919
|
+
<div class="step-label" style="color:var(--accent-coral);">CAM</div>
|
|
920
|
+
</div>
|
|
921
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
922
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
923
|
+
<div class="step-icon">🔬</div>
|
|
924
|
+
<div class="step-label" style="color:var(--accent-coral);">Analysis</div>
|
|
925
|
+
</div>
|
|
926
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
927
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
928
|
+
<div class="step-icon">📷</div>
|
|
929
|
+
<div class="step-label" style="color:var(--accent-coral);">Scanning</div>
|
|
930
|
+
</div>
|
|
931
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
932
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
933
|
+
<div class="step-icon">🥽</div>
|
|
934
|
+
<div class="step-label" style="color:var(--accent-coral);">VR</div>
|
|
935
|
+
</div>
|
|
936
|
+
<div class="pipeline-arrow" style="color:var(--accent-coral);">✕</div>
|
|
937
|
+
<div class="pipeline-step" style="border-color:rgba(224,85,85,0.3);">
|
|
938
|
+
<div class="step-icon">📄</div>
|
|
939
|
+
<div class="step-label" style="color:var(--accent-coral);">Drawings</div>
|
|
940
|
+
</div>
|
|
941
|
+
</div>
|
|
942
|
+
|
|
943
|
+
<!-- The unified OS — AFTER -->
|
|
944
|
+
<p style="color:var(--accent-gold);font-weight:700;font-size:0.9rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.5rem;position:relative;z-index:1;" class="reveal">cycleCAD: ONE OS, ONE LANGUAGE</p>
|
|
945
|
+
<div class="pipeline-flow reveal">
|
|
946
|
+
<div class="pipeline-step" style="border-color:rgba(139,111,192,0.3);">
|
|
947
|
+
<div class="step-icon">💬</div>
|
|
948
|
+
<div class="step-label" style="color:var(--accent-purple);">Intent</div>
|
|
949
|
+
<div class="step-desc">Human or<br>AI agent</div>
|
|
950
|
+
</div>
|
|
951
|
+
<div class="pipeline-arrow">→</div>
|
|
952
|
+
<div class="pipeline-step" style="border-color:rgba(46,134,222,0.3);">
|
|
953
|
+
<div class="step-icon">📐</div>
|
|
954
|
+
<div class="step-label" style="color:var(--accent-blue);">Design</div>
|
|
955
|
+
<div class="step-desc">CAD + CAM<br>unified</div>
|
|
956
|
+
</div>
|
|
957
|
+
<div class="pipeline-arrow">→</div>
|
|
958
|
+
<div class="pipeline-step" style="border-color:rgba(232,150,58,0.3);">
|
|
959
|
+
<div class="step-icon">🔬</div>
|
|
960
|
+
<div class="step-label" style="color:var(--accent-warn);">Validate</div>
|
|
961
|
+
<div class="step-desc">Analysis, DFM<br>cost, tolerance</div>
|
|
962
|
+
</div>
|
|
963
|
+
<div class="pipeline-arrow">→</div>
|
|
964
|
+
<div class="pipeline-step" style="border-color:rgba(58,175,169,0.3);">
|
|
965
|
+
<div class="step-icon">🏭</div>
|
|
966
|
+
<div class="step-label" style="color:var(--accent-teal);">Manufacture</div>
|
|
967
|
+
<div class="step-desc">G-code, STEP<br>to factory</div>
|
|
968
|
+
</div>
|
|
969
|
+
<div class="pipeline-arrow">→</div>
|
|
970
|
+
<div class="pipeline-step" style="border-color:rgba(212,168,67,0.3);">
|
|
971
|
+
<div class="step-icon">📦</div>
|
|
972
|
+
<div class="step-label" style="color:var(--accent-gold);">Product</div>
|
|
973
|
+
<div class="step-desc">Assembled &<br>delivered</div>
|
|
974
|
+
</div>
|
|
975
|
+
<div class="pipeline-arrow">→</div>
|
|
976
|
+
<div class="pipeline-step" style="border-color:rgba(46,134,222,0.3);">
|
|
977
|
+
<div class="step-icon">♻️</div>
|
|
978
|
+
<div class="step-label" style="color:var(--accent-blue);">End of Life</div>
|
|
979
|
+
<div class="step-desc">Repair, recycle<br>redesign</div>
|
|
980
|
+
</div>
|
|
981
|
+
</div>
|
|
982
|
+
|
|
983
|
+
<p class="vision-text reveal" style="margin-top:2rem;">AI is the glue. Parametric modeling was the first right step — but to truly automate manufacturing, every component needs to speak the same language. cycleCAD provides that language. <strong>From intent to product to end of life — one continuous, AI-driven cycle.</strong></p>
|
|
984
|
+
</div>
|
|
985
|
+
</section>
|
|
986
|
+
|
|
987
|
+
<!-- ============================================================
|
|
988
|
+
MACHINES CREATING MACHINES
|
|
989
|
+
============================================================ -->
|
|
990
|
+
<section class="machines-section">
|
|
991
|
+
<div class="container">
|
|
992
|
+
<div class="section-label reveal">THE ONLY INTERFACE</div>
|
|
993
|
+
<h2 class="reveal"><span class="gradient-text">Machines Creating Machines</span></h2>
|
|
994
|
+
<p class="reveal" style="max-width:750px;margin:0 auto;font-size:1.1rem;color:var(--text-secondary);line-height:1.7;">
|
|
995
|
+
Traditional CAD has a GUI because it was designed for humans with a mouse. cycleCAD has no GUI because it was designed for AI agents with an API. A sensor detects wear. An agent designs the replacement. Another agent validates manufacturability. A third generates G-code and routes it to the factory floor. The machine improved itself. No human touched anything.
|
|
996
|
+
</p>
|
|
997
|
+
|
|
998
|
+
<div class="machines-flow reveal">
|
|
999
|
+
<div class="machine-step" style="border-color:rgba(139,111,192,0.3);">
|
|
1000
|
+
<div class="m-label" style="color:var(--accent-purple);">AI Agent</div>
|
|
1001
|
+
<div class="m-desc">detects need</div>
|
|
1002
|
+
</div>
|
|
1003
|
+
<span class="pipeline-arrow">→</span>
|
|
1004
|
+
<div class="machine-step" style="border-color:rgba(212,168,67,0.3);">
|
|
1005
|
+
<div class="m-label" style="color:var(--accent-gold);">cycleCAD</div>
|
|
1006
|
+
<div class="m-desc">designs & validates</div>
|
|
1007
|
+
</div>
|
|
1008
|
+
<span class="pipeline-arrow">→</span>
|
|
1009
|
+
<div class="machine-step" style="border-color:rgba(232,150,58,0.3);">
|
|
1010
|
+
<div class="m-label" style="color:var(--accent-warn);">Factory</div>
|
|
1011
|
+
<div class="m-desc">produces the parts</div>
|
|
1012
|
+
</div>
|
|
1013
|
+
<span class="pipeline-arrow">→</span>
|
|
1014
|
+
<div class="machine-step" style="border-color:rgba(58,175,169,0.3);">
|
|
1015
|
+
<div class="m-label" style="color:var(--accent-teal);">Product</div>
|
|
1016
|
+
<div class="m-desc">assembled & delivered</div>
|
|
1017
|
+
</div>
|
|
1018
|
+
<span class="pipeline-arrow">→</span>
|
|
1019
|
+
<div class="machine-step" style="border-color:rgba(46,134,222,0.3);">
|
|
1020
|
+
<div class="m-label" style="color:var(--accent-blue);">♻️ Recycle</div>
|
|
1021
|
+
<div class="m-desc">circular economy</div>
|
|
1022
|
+
</div>
|
|
1023
|
+
</div>
|
|
1024
|
+
|
|
1025
|
+
<p class="reveal" style="max-width:750px;margin:0 auto;font-size:1.05rem;color:var(--accent-gold);font-weight:600;position:relative;z-index:1;">
|
|
1026
|
+
Every step consumes $CYCLE tokens. Every repaired part mints new ones. AI agents design. Factories produce. Products get repaired, not discarded. The token economy mirrors the circular economy — value flows in circles, forever.
|
|
1027
|
+
</p>
|
|
1028
|
+
</div>
|
|
1029
|
+
</section>
|
|
1030
|
+
|
|
1031
|
+
<!-- ============================================================
|
|
1032
|
+
CAPABILITIES GRID
|
|
1033
|
+
============================================================ -->
|
|
1034
|
+
<section class="capabilities" id="capabilities">
|
|
1035
|
+
<div class="container">
|
|
1036
|
+
<div class="section-label reveal">40+ API ENDPOINTS</div>
|
|
1037
|
+
<h2 class="reveal">Everything an agent needs, <span class="gradient-text">nothing it doesn't</span></h2>
|
|
1038
|
+
<p class="reveal">Every capability is agent-callable. Sketch, model, validate, export — all through one unified API.</p>
|
|
1039
|
+
<div class="cap-grid">
|
|
1040
|
+
<div class="cap-item reveal"><div class="cap-icon">✏️</div><h4>Sketch & Constrain</h4><p>Lines, arcs, rectangles, circles</p></div>
|
|
1041
|
+
<div class="cap-item reveal"><div class="cap-icon">📦</div><h4>Extrude & Revolve</h4><p>Solid body creation</p></div>
|
|
1042
|
+
<div class="cap-item reveal"><div class="cap-icon">✂️</div><h4>Boolean Ops</h4><p>Cut, union, intersect</p></div>
|
|
1043
|
+
<div class="cap-item reveal"><div class="cap-icon">📏</div><h4>Measurement</h4><p>Distance, angle, 3-point</p></div>
|
|
1044
|
+
<div class="cap-item reveal"><div class="cap-icon">🔍</div><h4>Smart Search</h4><p>Natural language queries</p></div>
|
|
1045
|
+
<div class="cap-item reveal"><div class="cap-icon">🎯</div><h4>AI Identify</h4><p>Auto-classify parts</p></div>
|
|
1046
|
+
<div class="cap-item reveal"><div class="cap-icon">📋</div><h4>Smart BOM</h4><p>AI-generated bill of materials</p></div>
|
|
1047
|
+
<div class="cap-item reveal"><div class="cap-icon">🔥</div><h4>Maint. Heatmap</h4><p>Urgency color coding</p></div>
|
|
1048
|
+
<div class="cap-item reveal"><div class="cap-icon">📖</div><h4>Auto Manual</h4><p>Step-by-step instructions</p></div>
|
|
1049
|
+
<div class="cap-item reveal"><div class="cap-icon">📊</div><h4>Tech Reports</h4><p>Full HTML export</p></div>
|
|
1050
|
+
<div class="cap-item reveal"><div class="cap-icon">🔩</div><h4>McMaster Links</h4><p>Direct part sourcing</p></div>
|
|
1051
|
+
<div class="cap-item reveal"><div class="cap-icon">📸</div><h4>Screenshot Export</h4><p>High-res PNG capture</p></div>
|
|
1052
|
+
<div class="cap-item reveal"><div class="cap-icon">🔄</div><h4>Section Cut</h4><p>X/Y/Z clipping planes</p></div>
|
|
1053
|
+
<div class="cap-item reveal"><div class="cap-icon">📐</div><h4>Annotations</h4><p>Click-to-place pins</p></div>
|
|
1054
|
+
<div class="cap-item reveal"><div class="cap-icon">🖨️</div><h4>3D Print Slicer</h4><p>G-code generation</p></div>
|
|
1055
|
+
<div class="cap-item reveal"><div class="cap-icon">🌐</div><h4>6 Languages</h4><p>EN DE FR ES IT NL</p></div>
|
|
1056
|
+
</div>
|
|
1057
|
+
</div>
|
|
1058
|
+
</section>
|
|
1059
|
+
|
|
1060
|
+
<!-- ============================================================
|
|
1061
|
+
PRICING
|
|
1062
|
+
============================================================ -->
|
|
1063
|
+
<section class="pricing" id="pricing">
|
|
1064
|
+
<div class="container">
|
|
1065
|
+
<div class="section-label reveal">PRICING</div>
|
|
1066
|
+
<h2 class="reveal">Simple, transparent <span class="gradient-text">pricing.</span></h2>
|
|
1067
|
+
<p class="subtitle reveal">Start free. Upgrade when your team needs more power.</p>
|
|
1068
|
+
<div class="pricing-grid">
|
|
1069
|
+
<div class="pricing-card starter reveal">
|
|
1070
|
+
<div class="tier-name">Free</div>
|
|
1071
|
+
<div class="tier-price">€0</div>
|
|
1072
|
+
<div class="tier-period">Forever</div>
|
|
1073
|
+
<ul class="tier-features">
|
|
1074
|
+
<li>All 12 killer features</li>
|
|
1075
|
+
<li>Text-to-CAD + Photo-to-CAD</li>
|
|
1076
|
+
<li>DFM analysis + cost estimator</li>
|
|
1077
|
+
<li>Multi-physics simulation</li>
|
|
1078
|
+
<li>200+ standard parts library</li>
|
|
1079
|
+
<li>STL / OBJ / glTF export</li>
|
|
1080
|
+
<li>Community support</li>
|
|
1081
|
+
</ul>
|
|
1082
|
+
</div>
|
|
1083
|
+
<div class="pricing-card pro reveal">
|
|
1084
|
+
<div class="tier-name" style="color:var(--accent-blue);">ExplodeView Pro</div>
|
|
1085
|
+
<div class="tier-price" style="color:var(--accent-blue);">€49</div>
|
|
1086
|
+
<div class="tier-period">per month</div>
|
|
1087
|
+
<ul class="tier-features">
|
|
1088
|
+
<li>Everything in Free</li>
|
|
1089
|
+
<li>STEP import / export</li>
|
|
1090
|
+
<li>Real-time collaboration</li>
|
|
1091
|
+
<li>Cloud storage + versioning</li>
|
|
1092
|
+
<li>Machine control (CNC/3DP)</li>
|
|
1093
|
+
<li>Digital twin + IoT sensors</li>
|
|
1094
|
+
<li>Priority support</li>
|
|
1095
|
+
</ul>
|
|
1096
|
+
<div class="launch-badge">Most Popular</div>
|
|
1097
|
+
</div>
|
|
1098
|
+
<div class="pricing-card enterprise reveal">
|
|
1099
|
+
<div class="tier-name" style="color:var(--accent-gold);">ExplodeView Enterprise</div>
|
|
1100
|
+
<div class="tier-price" style="color:var(--accent-gold);">€299</div>
|
|
1101
|
+
<div class="tier-period">per month</div>
|
|
1102
|
+
<ul class="tier-features">
|
|
1103
|
+
<li>Everything in Pro</li>
|
|
1104
|
+
<li>Self-hosted deployment</li>
|
|
1105
|
+
<li>SSO / SAML authentication</li>
|
|
1106
|
+
<li>SLA guarantee</li>
|
|
1107
|
+
<li>MCP server + REST API</li>
|
|
1108
|
+
<li>Custom agent integrations</li>
|
|
1109
|
+
<li>Dedicated support</li>
|
|
1110
|
+
</ul>
|
|
1111
|
+
</div>
|
|
1112
|
+
</div>
|
|
1113
|
+
</div>
|
|
1114
|
+
</section>
|
|
1115
|
+
|
|
1116
|
+
<!-- ============================================================
|
|
1117
|
+
TOKEN ECONOMY
|
|
1118
|
+
============================================================ -->
|
|
1119
|
+
<section class="pricing" id="token-economy">
|
|
1120
|
+
<div class="container">
|
|
1121
|
+
<div class="section-label reveal">TOKEN ECONOMY</div>
|
|
1122
|
+
<h2 class="reveal">Consume tokens. <span class="gradient-text">Create value.</span></h2>
|
|
1123
|
+
<p class="subtitle reveal">Dollars are legacy. cycleCAD runs on $CYCLE tokens — AI agents consume tokens to design, humans and machines earn them by creating value in the circular economy.</p>
|
|
1124
|
+
|
|
1125
|
+
<div class="pricing-grid">
|
|
1126
|
+
<div class="pricing-card starter reveal" style="text-align:left;">
|
|
1127
|
+
<div class="tier-name" style="color:var(--accent-teal);">Consume</div>
|
|
1128
|
+
<div style="font-size:2.8rem;margin:0.5rem 0;">🪙</div>
|
|
1129
|
+
<div class="tier-period" style="color:var(--accent-teal);font-weight:600;font-size:0.95rem;">Spend $CYCLE tokens</div>
|
|
1130
|
+
<ul class="tier-features" style="margin-top:1rem;">
|
|
1131
|
+
<li>AI agents pay tokens per design operation</li>
|
|
1132
|
+
<li>Parametric modeling, AI analysis, validation</li>
|
|
1133
|
+
<li>STEP export, G-code generation</li>
|
|
1134
|
+
<li>Manufacturing routing & DFM checks</li>
|
|
1135
|
+
<li>Usage-based — pay only for what you use</li>
|
|
1136
|
+
</ul>
|
|
1137
|
+
</div>
|
|
1138
|
+
<div class="pricing-card pro reveal" style="text-align:left;border-color:rgba(212,168,67,0.3);">
|
|
1139
|
+
<div class="tier-name" style="color:var(--accent-gold);">Create</div>
|
|
1140
|
+
<div style="font-size:2.8rem;margin:0.5rem 0;">⛏️</div>
|
|
1141
|
+
<div class="tier-period" style="color:var(--accent-gold);font-weight:600;font-size:0.95rem;">Earn $CYCLE coins</div>
|
|
1142
|
+
<ul class="tier-features" style="margin-top:1rem;">
|
|
1143
|
+
<li>Design reusable parts → earn tokens</li>
|
|
1144
|
+
<li>Validate designs for others → earn tokens</li>
|
|
1145
|
+
<li>Contribute to the circular economy → earn tokens</li>
|
|
1146
|
+
<li>Repair/refurbish data → earn tokens</li>
|
|
1147
|
+
<li>Value creation = value capture</li>
|
|
1148
|
+
</ul>
|
|
1149
|
+
</div>
|
|
1150
|
+
<div class="pricing-card enterprise reveal" style="text-align:left;">
|
|
1151
|
+
<div class="tier-name" style="color:var(--accent-purple);">The Cycle</div>
|
|
1152
|
+
<div style="font-size:2.8rem;margin:0.5rem 0;">♻️</div>
|
|
1153
|
+
<div class="tier-period" style="color:var(--accent-purple);font-weight:600;font-size:0.95rem;">Circular token flow</div>
|
|
1154
|
+
<ul class="tier-features" style="margin-top:1rem;">
|
|
1155
|
+
<li>AI agents design → tokens consumed</li>
|
|
1156
|
+
<li>Manufactured products → tokens minted</li>
|
|
1157
|
+
<li>Parts repaired/reused → tokens earned</li>
|
|
1158
|
+
<li>Economy grows with every cycle</li>
|
|
1159
|
+
<li>The more circular, the more valuable</li>
|
|
1160
|
+
</ul>
|
|
1161
|
+
</div>
|
|
1162
|
+
</div>
|
|
1163
|
+
|
|
1164
|
+
<div style="margin-top:3rem;text-align:center;" class="reveal">
|
|
1165
|
+
<p style="color:var(--accent-gold);font-weight:700;font-size:1.2rem;">$CYCLE — the currency of the circular economy</p>
|
|
1166
|
+
<p style="color:var(--text-secondary);font-size:0.95rem;margin-top:0.5rem;max-width:600px;margin-left:auto;margin-right:auto;">Every design, every validation, every manufactured part, every repair — tokenized. AI agents and humans transact on the same network. No invoices. No subscriptions. Just value flowing in circles.</p>
|
|
1167
|
+
</div>
|
|
1168
|
+
</div>
|
|
1169
|
+
</section>
|
|
1170
|
+
|
|
1171
|
+
<!-- ============================================================
|
|
1172
|
+
SHOWCASE — cycleWASH DUO
|
|
1173
|
+
============================================================ -->
|
|
1174
|
+
<section class="showcase" id="showcase">
|
|
1175
|
+
<div class="container">
|
|
1176
|
+
<div class="section-label reveal">BUILT FOR REAL PRODUCTS</div>
|
|
1177
|
+
<h2 class="reveal">Tested with <span class="gradient-text">complex cycleWASH machines</span></h2>
|
|
1178
|
+
<div class="showcase-visual reveal">
|
|
1179
|
+
<div class="app-mockup">
|
|
1180
|
+
<div class="mockup-toolbar">
|
|
1181
|
+
<div class="mockup-dot red"></div>
|
|
1182
|
+
<div class="mockup-dot yellow"></div>
|
|
1183
|
+
<div class="mockup-dot green"></div>
|
|
1184
|
+
<div class="mockup-toolbar-items">
|
|
1185
|
+
<div class="mockup-toolbar-item" style="width:32px"></div>
|
|
1186
|
+
<div class="mockup-toolbar-item" style="width:32px"></div>
|
|
1187
|
+
<div class="mockup-toolbar-item" style="width:32px"></div>
|
|
1188
|
+
<div class="mockup-toolbar-item" style="width:24px"></div>
|
|
1189
|
+
<div style="margin-left:auto;display:flex;gap:6px;">
|
|
1190
|
+
<div class="mockup-toolbar-item" style="width:50px;background:rgba(212,168,67,0.3);"></div>
|
|
1191
|
+
<div class="mockup-toolbar-item" style="width:50px;background:rgba(46,134,222,0.2);"></div>
|
|
1192
|
+
</div>
|
|
1193
|
+
</div>
|
|
1194
|
+
</div>
|
|
1195
|
+
<div class="mockup-body">
|
|
1196
|
+
<div class="mockup-sidebar">
|
|
1197
|
+
<div style="height:4px;width:70px;background:#D4A843;opacity:0.5;border-radius:2px;margin-bottom:12px;"></div>
|
|
1198
|
+
<div style="font-size:8px;color:var(--text-muted);margin-bottom:4px;font-family:monospace;">Assembly Tree</div>
|
|
1199
|
+
<div class="mockup-tree-item" style="width:90%;background:rgba(212,168,67,0.2);"></div>
|
|
1200
|
+
<div class="mockup-tree-item indent" style="width:65%"></div>
|
|
1201
|
+
<div class="mockup-tree-item indent" style="width:70%"></div>
|
|
1202
|
+
<div class="mockup-tree-item indent active" style="width:55%"></div>
|
|
1203
|
+
<div class="mockup-tree-item" style="width:80%"></div>
|
|
1204
|
+
<div class="mockup-tree-item indent" style="width:60%"></div>
|
|
1205
|
+
<div class="mockup-tree-item indent" style="width:65%"></div>
|
|
1206
|
+
<div class="mockup-tree-item" style="width:85%"></div>
|
|
1207
|
+
<div class="mockup-tree-item indent" style="width:50%"></div>
|
|
1208
|
+
<div class="mockup-tree-item indent" style="width:70%"></div>
|
|
1209
|
+
<div class="mockup-tree-item" style="width:75%"></div>
|
|
1210
|
+
<div class="mockup-tree-item indent" style="width:55%"></div>
|
|
1211
|
+
<div style="font-size:7px;color:var(--text-muted);margin-top:12px;font-family:monospace;">Parts loaded</div>
|
|
1212
|
+
</div>
|
|
1213
|
+
<div class="mockup-viewport">
|
|
1214
|
+
<div class="mockup-grid"></div>
|
|
1215
|
+
<div style="position:relative;z-index:1;text-align:center;">
|
|
1216
|
+
<div style="font-size:48px;opacity:0.7;">🚲</div>
|
|
1217
|
+
<div style="color:var(--text-muted);font-size:11px;margin-top:8px;">cycleWASH Machine — Hundreds of Parts, Multiple Assemblies</div>
|
|
1218
|
+
</div>
|
|
1219
|
+
</div>
|
|
1220
|
+
<div class="mockup-props">
|
|
1221
|
+
<div style="font-size:8px;color:#2E86DE;font-family:monospace;margin-bottom:8px;">AI Identified</div>
|
|
1222
|
+
<div class="mockup-prop-label"></div>
|
|
1223
|
+
<div class="mockup-prop-value" style="background:rgba(58,175,169,0.2);"></div>
|
|
1224
|
+
<div class="mockup-prop-label" style="width:50px"></div>
|
|
1225
|
+
<div class="mockup-prop-value" style="width:65px;background:rgba(212,168,67,0.2);"></div>
|
|
1226
|
+
<div style="height:1px;background:var(--border-card);margin:12px 0;"></div>
|
|
1227
|
+
<div style="font-size:8px;color:#2E86DE;font-family:monospace;margin-bottom:8px;">McMaster-Carr</div>
|
|
1228
|
+
<div class="mockup-prop-value" style="background:rgba(46,134,222,0.15);width:80px;"></div>
|
|
1229
|
+
<div class="mockup-prop-value" style="background:rgba(46,134,222,0.15);width:65px;"></div>
|
|
1230
|
+
</div>
|
|
1231
|
+
</div>
|
|
1232
|
+
</div>
|
|
1233
|
+
</div>
|
|
1234
|
+
</div>
|
|
1235
|
+
</section>
|
|
1236
|
+
|
|
1237
|
+
<!-- ============================================================
|
|
1238
|
+
FINAL CTA
|
|
1239
|
+
============================================================ -->
|
|
1240
|
+
<section class="final-cta" id="try">
|
|
1241
|
+
<div class="container">
|
|
1242
|
+
<h2 class="reveal">Let your agents<br><span class="gradient-text">design through us.</span></h2>
|
|
1243
|
+
<p class="reveal">The Agent-First OS for Manufacturing. Agents are the interface. $CYCLE tokens are the currency. The circular economy is the outcome.</p>
|
|
1244
|
+
<div class="hero-ctas reveal">
|
|
1245
|
+
<a href="/app/" class="btn-primary">Explore the Platform</a>
|
|
1246
|
+
<a href="https://github.com/vvlars-cmd/cyclecad" target="_blank" class="btn-secondary">View on GitHub</a>
|
|
1247
|
+
</div>
|
|
1248
|
+
</div>
|
|
1249
|
+
</section>
|
|
1250
|
+
|
|
1251
|
+
<!-- FOOTER -->
|
|
1252
|
+
<footer>
|
|
1253
|
+
<div class="container">
|
|
1254
|
+
<a href="#" class="nav-logo">
|
|
1255
|
+
<div class="nav-logo-icon" style="width:24px;height:24px;font-size:14px;border-radius:6px;">⚙</div>
|
|
1256
|
+
<span class="cycle">cycle</span><span class="cad">CAD</span>
|
|
1257
|
+
</a>
|
|
1258
|
+
<ul class="footer-links">
|
|
1259
|
+
<li><a href="https://cyclewash.de/en" target="_blank">cycleWASH</a></li>
|
|
1260
|
+
<li><a href="https://github.com/vvlars-cmd/cyclecad" target="_blank">GitHub</a></li>
|
|
1261
|
+
<li><a href="mailto:sachin.kumar@cyclewash.com">Contact</a></li>
|
|
1262
|
+
</ul>
|
|
1263
|
+
<p>© 2026 cycleCAD by cycleWASH. All rights reserved.</p>
|
|
1264
|
+
</div>
|
|
1265
|
+
</footer>
|
|
1266
|
+
|
|
1267
|
+
<!-- SCRIPTS -->
|
|
1268
|
+
<script>
|
|
1269
|
+
// Scroll reveal
|
|
1270
|
+
const observer = new IntersectionObserver((entries) => {
|
|
1271
|
+
entries.forEach(entry => {
|
|
1272
|
+
if (entry.isIntersecting) {
|
|
1273
|
+
entry.target.classList.add('visible');
|
|
1274
|
+
observer.unobserve(entry.target);
|
|
1275
|
+
}
|
|
1276
|
+
});
|
|
1277
|
+
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
1278
|
+
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
1279
|
+
|
|
1280
|
+
// Theme toggle
|
|
1281
|
+
const themeToggle = document.getElementById('theme-toggle');
|
|
1282
|
+
const html = document.documentElement;
|
|
1283
|
+
const savedTheme = (() => { try { return localStorage.getItem('cyclecad-theme'); } catch { return null; } })();
|
|
1284
|
+
const initialTheme = savedTheme || 'dark';
|
|
1285
|
+
html.setAttribute('data-theme', initialTheme);
|
|
1286
|
+
themeToggle.textContent = initialTheme === 'dark' ? '☀️' : '🌙';
|
|
1287
|
+
|
|
1288
|
+
themeToggle.addEventListener('click', () => {
|
|
1289
|
+
const current = html.getAttribute('data-theme') || 'dark';
|
|
1290
|
+
const next = current === 'dark' ? 'light' : 'dark';
|
|
1291
|
+
html.setAttribute('data-theme', next);
|
|
1292
|
+
themeToggle.textContent = next === 'dark' ? '☀️' : '🌙';
|
|
1293
|
+
try { localStorage.setItem('cyclecad-theme', next); } catch {}
|
|
1294
|
+
});
|
|
1295
|
+
|
|
1296
|
+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
1297
|
+
if (!localStorage.getItem('cyclecad-theme')) {
|
|
1298
|
+
const theme = e.matches ? 'dark' : 'light';
|
|
1299
|
+
html.setAttribute('data-theme', theme);
|
|
1300
|
+
themeToggle.textContent = theme === 'dark' ? '☀️' : '🌙';
|
|
1301
|
+
}
|
|
1302
|
+
});
|
|
1303
|
+
</script>
|
|
1304
|
+
|
|
1305
|
+
</body>
|
|
1306
|
+
</html>
|