feat: add guide for splitting STEP assemblies into separate part files

public/llms.txt

@@ -20,5 +20,8 @@ CAD Viewer is an open-source, in-browser CAD file viewer built on the OpenCascad
 ## Pricing
 Free to use, no subscription required.
 
+## Guides
+- How to Split a STEP Assembly Into Separate Part Files (Free, Online): https://cadviewer.xyz/guides/split-step-assembly
+
 ## Live app
 https://cadviewer.xyz/

public/sitemap.xml

@@ -12,4 +12,10 @@
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
+  <url>
+    <loc>https://cadviewer.xyz/guides/split-step-assembly</loc>
+    <lastmod>2026-07-26</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
 </urlset>

src/main.tsx

@@ -2,6 +2,7 @@ import { ClientOnly, Head, ViteReactSSG } from "vite-react-ssg";
 import type { RouteRecord } from "vite-react-ssg";
 import App from "./ui/App";
 import Landing from "./pages/Landing";
+import SplitStepAssembly from "./pages/guides/SplitStepAssembly";
 
 function NotFound() {
   return (
@@ -28,6 +29,7 @@ function NotFound() {
 
 export const routes: RouteRecord[] = [
   { path: "/", element: <Landing /> },
+  { path: "/guides/split-step-assembly", Component: SplitStepAssembly },
   {
     path: "/viewer",
     element: (

src/pages/Landing.module.css

@@ -86,6 +86,17 @@
   text-decoration: none;
 }
 
+.guideLink {
+  margin-top: 0.5rem;
+  color: #93c5fd;
+  font-size: 0.85rem;
+  text-decoration: none;
+}
+
+.guideLink:hover {
+  color: #3b82f6;
+}
+
 .supported {
   margin: 0.3rem 0 0;
   color: #4b5563;

src/pages/Landing.tsx

@@ -171,6 +171,10 @@ export default function Landing() {
               or drag a file anywhere on the page
             </a>
 
+            <a className={styles.guideLink} href="/guides/split-step-assembly">
+              Need to split an assembly into parts? Read the guide →
+            </a>
+
             <p className={styles.supported}>
               Supported: STEP · IGES · STL · OBJ · 3MF · BREP · GLB · DXF
             </p>

src/pages/guides/SplitStepAssembly.module.css

@@ -0,0 +1,290 @@
+:global(body.guide-page) {
+  overflow-y: auto;
+  height: auto;
+  min-height: 100vh;
+}
+
+:global(body.guide-page #root) {
+  height: auto;
+  min-height: 100vh;
+}
+
+.page {
+  min-height: 100vh;
+  background: #fafafa;
+  color: #1a1a1a;
+  display: flex;
+  justify-content: center;
+  padding: 4rem 1.5rem 6rem;
+}
+
+.article {
+  width: min(720px, 100%);
+  display: flex;
+  flex-direction: column;
+  gap: clamp(3rem, 5vw, 4rem);
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.breadcrumb {
+  display: inline-flex;
+  align-self: flex-start;
+  color: #4b5563;
+  font-size: 0.9rem;
+  text-decoration: none;
+}
+
+.breadcrumb:hover {
+  color: #3b82f6;
+}
+
+.eyebrow {
+  margin: 0;
+  color: #6b7280;
+  font-family:
+    "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.headline {
+  margin: 0.5rem 0 0;
+  color: #1a1a1a;
+  font-size: 2.25rem;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.intro {
+  margin: 0;
+  color: #4b5563;
+  font-size: 1.1rem;
+  line-height: 1.7;
+}
+
+.lede {
+  margin: 0;
+  color: #1f2937;
+  font-size: 1.1rem;
+  line-height: 1.7;
+}
+
+.sectionHeading {
+  margin: 0;
+  color: #1a1a1a;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.paragraph {
+  margin: 0;
+  color: #4b5563;
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+
+.list {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: #4b5563;
+  font-size: 1.05rem;
+  line-height: 1.7;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.externalLink {
+  color: #2563eb;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.externalLink:hover {
+  color: #1d4ed8;
+}
+
+/* "Why you'd need to do this" cards */
+.cardList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.reasonCard {
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 1.1rem 1.4rem;
+  color: #374151;
+  font-size: 1.02rem;
+  line-height: 1.6;
+}
+
+/* Numbered step cards */
+.stepList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+.stepCard {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.1rem;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 1.25rem 1.5rem;
+}
+
+.stepNumber {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #3b82f6;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.stepBody {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.stepTitle {
+  margin: 0;
+  color: #1a1a1a;
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+
+.stepDescription {
+  margin: 0;
+  color: #4b5563;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.stepImageWrap {
+  margin: 0.5rem 0;
+}
+
+/* FAQ accordion */
+.faqGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.faqItem {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 0.35rem 1.5rem;
+}
+
+.faqItem[open] {
+  padding-bottom: 1.25rem;
+}
+
+.faqQuestion {
+  margin: 0;
+  padding: 1rem 0;
+  color: #1a1a1a;
+  font-size: 1.05rem;
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.faqQuestion::-webkit-details-marker {
+  display: none;
+}
+
+.faqQuestion::after {
+  content: "+";
+  flex: none;
+  color: #3b82f6;
+  font-size: 1.3rem;
+  font-weight: 400;
+  transition: transform 0.15s ease;
+}
+
+.faqItem[open] .faqQuestion::after {
+  transform: rotate(45deg);
+}
+
+.faqAnswer {
+  margin: 0.25rem 0 0;
+  color: #4b5563;
+  font-size: 1rem;
+  line-height: 1.65;
+}
+
+.ctaRow {
+  margin-top: 0.25rem;
+}
+
+.cta {
+  display: inline-block;
+  background: #3b82f6;
+  color: #ffffff;
+  border: none;
+  border-radius: 8px;
+  padding: 0.85rem 2.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.45);
+  transition:
+    background 0.15s ease,
+    transform 0.15s ease;
+}
+
+.cta:hover {
+  background: #2563eb;
+  transform: translateY(-1px);
+}
+
+@media (max-width: 768px) {
+  .page {
+    padding: 2.5rem 1.25rem 4rem;
+  }
+
+  .article {
+    gap: clamp(2.25rem, 8vw, 3rem);
+  }
+
+  .headline {
+    font-size: 1.75rem;
+  }
+
+  .stepCard {
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+}