Skip to content

Commit 974a8d1

Browse files
devaraj3devaraj3
authored
Merge pull request #89 from devaraj3/feature/landing-page-performance
feat: add guide for splitting STEP assemblies into separate part files
2 parents 4661663 + ddecc36 commit 974a8d1

8 files changed

Lines changed: 625 additions & 0 deletions

File tree

‎public/guides/split-step-assembly-demo.png‎

1.95 MB
Loading

‎public/llms.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,8 @@ CAD Viewer is an open-source, in-browser CAD file viewer built on the OpenCascad
2020
## Pricing
2121
Free to use, no subscription required.
2222

23+
## Guides
24+
- How to Split a STEP Assembly Into Separate Part Files (Free, Online): https://cadviewer.xyz/guides/split-step-assembly
25+
2326
## Live app
2427
https://cadviewer.xyz/

‎public/sitemap.xml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,10 @@
1212
<changefreq>monthly</changefreq>
1313
<priority>0.8</priority>
1414
</url>
15+
<url>
16+
<loc>https://cadviewer.xyz/guides/split-step-assembly</loc>
17+
<lastmod>2026-07-26</lastmod>
18+
<changefreq>monthly</changefreq>
19+
<priority>0.9</priority>
20+
</url>
1521
</urlset>

‎src/main.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { ClientOnly, Head, ViteReactSSG } from "vite-react-ssg";
22
import type { RouteRecord } from "vite-react-ssg";
33
import App from "./ui/App";
44
import Landing from "./pages/Landing";
5+
import SplitStepAssembly from "./pages/guides/SplitStepAssembly";
56

67
function NotFound() {
78
return (
@@ -28,6 +29,7 @@ function NotFound() {
2829

2930
export const routes: RouteRecord[] = [
3031
{ path: "/", element: <Landing /> },
32+
{ path: "/guides/split-step-assembly", Component: SplitStepAssembly },
3133
{
3234
path: "/viewer",
3335
element: (

‎src/pages/Landing.module.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,17 @@
8686
text-decoration: none;
8787
}
8888

89+
.guideLink {
90+
margin-top: 0.5rem;
91+
color: #93c5fd;
92+
font-size: 0.85rem;
93+
text-decoration: none;
94+
}
95+
96+
.guideLink:hover {
97+
color: #3b82f6;
98+
}
99+
89100
.supported {
90101
margin: 0.3rem 0 0;
91102
color: #4b5563;

‎src/pages/Landing.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,10 @@ export default function Landing() {
171171
or drag a file anywhere on the page
172172
</a>
173173

174+
<a className={styles.guideLink} href="/guides/split-step-assembly">
175+
Need to split an assembly into parts? Read the guide →
176+
</a>
177+
174178
<p className={styles.supported}>
175179
Supported: STEP · IGES · STL · OBJ · 3MF · BREP · GLB · DXF
176180
</p>

‎src/pages/guides/SplitStepAssembly.module.css‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
:global(body.guide-page) {
2+
overflow-y: auto;
3+
height: auto;
4+
min-height: 100vh;
5+
}
6+
7+
:global(body.guide-page #root) {
8+
height: auto;
9+
min-height: 100vh;
10+
}
11+
12+
.page {
13+
min-height: 100vh;
14+
background: #fafafa;
15+
color: #1a1a1a;
16+
display: flex;
17+
justify-content: center;
18+
padding: 4rem 1.5rem 6rem;
19+
}
20+
21+
.article {
22+
width: min(720px, 100%);
23+
display: flex;
24+
flex-direction: column;
25+
gap: clamp(3rem, 5vw, 4rem);
26+
}
27+
28+
.section {
29+
display: flex;
30+
flex-direction: column;
31+
gap: 1.25rem;
32+
}
33+
34+
.breadcrumb {
35+
display: inline-flex;
36+
align-self: flex-start;
37+
color: #4b5563;
38+
font-size: 0.9rem;
39+
text-decoration: none;
40+
}
41+
42+
.breadcrumb:hover {
43+
color: #3b82f6;
44+
}
45+
46+
.eyebrow {
47+
margin: 0;
48+
color: #6b7280;
49+
font-family:
50+
"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
51+
"Courier New", monospace;
52+
font-size: 0.75rem;
53+
letter-spacing: 0.12em;
54+
text-transform: uppercase;
55+
}
56+
57+
.headline {
58+
margin: 0.5rem 0 0;
59+
color: #1a1a1a;
60+
font-size: 2.25rem;
61+
line-height: 1.2;
62+
font-weight: 700;
63+
}
64+
65+
.intro {
66+
margin: 0;
67+
color: #4b5563;
68+
font-size: 1.1rem;
69+
line-height: 1.7;
70+
}
71+
72+
.lede {
73+
margin: 0;
74+
color: #1f2937;
75+
font-size: 1.1rem;
76+
line-height: 1.7;
77+
}
78+
79+
.sectionHeading {
80+
margin: 0;
81+
color: #1a1a1a;
82+
font-size: 1.5rem;
83+
font-weight: 700;
84+
}
85+
86+
.paragraph {
87+
margin: 0;
88+
color: #4b5563;
89+
font-size: 1.05rem;
90+
line-height: 1.7;
91+
}
92+
93+
.list {
94+
margin: 0;
95+
padding-left: 1.25rem;
96+
color: #4b5563;
97+
font-size: 1.05rem;
98+
line-height: 1.7;
99+
display: flex;
100+
flex-direction: column;
101+
gap: 0.65rem;
102+
}
103+
104+
.externalLink {
105+
color: #2563eb;
106+
text-decoration: underline;
107+
text-underline-offset: 2px;
108+
}
109+
110+
.externalLink:hover {
111+
color: #1d4ed8;
112+
}
113+
114+
/* "Why you'd need to do this" cards */
115+
.cardList {
116+
margin: 0;
117+
padding: 0;
118+
list-style: none;
119+
display: flex;
120+
flex-direction: column;
121+
gap: 0.85rem;
122+
}
123+
124+
.reasonCard {
125+
background: #f3f4f6;
126+
border: 1px solid #e5e7eb;
127+
border-radius: 12px;
128+
padding: 1.1rem 1.4rem;
129+
color: #374151;
130+
font-size: 1.02rem;
131+
line-height: 1.6;
132+
}
133+
134+
/* Numbered step cards */
135+
.stepList {
136+
margin: 0;
137+
padding: 0;
138+
list-style: none;
139+
display: flex;
140+
flex-direction: column;
141+
gap: 0.85rem;
142+
}
143+
144+
.stepCard {
145+
display: flex;
146+
align-items: flex-start;
147+
gap: 1.1rem;
148+
background: #ffffff;
149+
border: 1px solid #e5e7eb;
150+
border-radius: 12px;
151+
padding: 1.25rem 1.5rem;
152+
}
153+
154+
.stepNumber {
155+
flex: none;
156+
display: inline-flex;
157+
align-items: center;
158+
justify-content: center;
159+
width: 2.5rem;
160+
height: 2.5rem;
161+
border-radius: 999px;
162+
background: #eff6ff;
163+
color: #3b82f6;
164+
font-size: 1.15rem;
165+
font-weight: 700;
166+
}
167+
168+
.stepBody {
169+
display: flex;
170+
flex-direction: column;
171+
gap: 0.3rem;
172+
}
173+
174+
.stepTitle {
175+
margin: 0;
176+
color: #1a1a1a;
177+
font-size: 1.05rem;
178+
font-weight: 700;
179+
}
180+
181+
.stepDescription {
182+
margin: 0;
183+
color: #4b5563;
184+
font-size: 1rem;
185+
line-height: 1.6;
186+
}
187+
188+
.stepImageWrap {
189+
margin: 0.5rem 0;
190+
}
191+
192+
/* FAQ accordion */
193+
.faqGrid {
194+
display: flex;
195+
flex-direction: column;
196+
gap: 0.75rem;
197+
}
198+
199+
.faqItem {
200+
background: #ffffff;
201+
border: 1px solid #e5e7eb;
202+
border-radius: 12px;
203+
padding: 0.35rem 1.5rem;
204+
}
205+
206+
.faqItem[open] {
207+
padding-bottom: 1.25rem;
208+
}
209+
210+
.faqQuestion {
211+
margin: 0;
212+
padding: 1rem 0;
213+
color: #1a1a1a;
214+
font-size: 1.05rem;
215+
font-weight: 600;
216+
cursor: pointer;
217+
list-style: none;
218+
display: flex;
219+
align-items: center;
220+
justify-content: space-between;
221+
gap: 1rem;
222+
}
223+
224+
.faqQuestion::-webkit-details-marker {
225+
display: none;
226+
}
227+
228+
.faqQuestion::after {
229+
content: "+";
230+
flex: none;
231+
color: #3b82f6;
232+
font-size: 1.3rem;
233+
font-weight: 400;
234+
transition: transform 0.15s ease;
235+
}
236+
237+
.faqItem[open] .faqQuestion::after {
238+
transform: rotate(45deg);
239+
}
240+
241+
.faqAnswer {
242+
margin: 0.25rem 0 0;
243+
color: #4b5563;
244+
font-size: 1rem;
245+
line-height: 1.65;
246+
}
247+
248+
.ctaRow {
249+
margin-top: 0.25rem;
250+
}
251+
252+
.cta {
253+
display: inline-block;
254+
background: #3b82f6;
255+
color: #ffffff;
256+
border: none;
257+
border-radius: 8px;
258+
padding: 0.85rem 2.25rem;
259+
font-size: 1rem;
260+
font-weight: 600;
261+
text-decoration: none;
262+
box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.45);
263+
transition:
264+
background 0.15s ease,
265+
transform 0.15s ease;
266+
}
267+
268+
.cta:hover {
269+
background: #2563eb;
270+
transform: translateY(-1px);
271+
}
272+
273+
@media (max-width: 768px) {
274+
.page {
275+
padding: 2.5rem 1.25rem 4rem;
276+
}
277+
278+
.article {
279+
gap: clamp(2.25rem, 8vw, 3rem);
280+
}
281+
282+
.headline {
283+
font-size: 1.75rem;
284+
}
285+
286+
.stepCard {
287+
flex-direction: column;
288+
gap: 0.6rem;
289+
}
290+
}

0 commit comments

Comments
 (0)