From 92a734352773e002c1636ea2d6d5a941bccd9fe1 Mon Sep 17 00:00:00 2001
From: devaraj3 <devarajhello@gmail.com>
Date: Sun, 23 Aug 2026 10:08:13 +0530
Subject: [PATCH] feat: expand homepage with About page and enhance CAD viewer
 features

---
 index.html                   |  22 ++++-
 public/llms.txt              |  18 +++-
 public/sitemap.xml           |  14 ++-
 src/main.tsx                 |   2 +
 src/pages/About.module.css   | 126 ++++++++++++++++++++++++++
 src/pages/About.tsx          | 128 ++++++++++++++++++++++++++
 src/pages/Landing.module.css | 168 +++++++++++++++++++++++++++++++++++
 src/pages/Landing.tsx        | 149 ++++++++++++++++++++++++++++++-
 src/siteRoutes.json          |   1 +
 9 files changed, 614 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/About.module.css
 create mode 100644 src/pages/About.tsx

diff --git a/index.html b/index.html
index a2d6dbb..7cc676c 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
         "@context": "https://schema.org",
         "@type": "SoftwareApplication",
         "name": "CAD Viewer",
-        "description": "Open STEP, IGES, STL, OBJ, and more CAD formats instantly in your browser. Orbit, measure edges, apply section planes, and export snapshots — no install required.",
+        "description": "Open STEP, IGES, STL, OBJ, and more CAD formats instantly in your browser, then generate a fully dimensioned, true-to-scale 2D engineering drawing — no install required.",
         "url": "https://cadviewer.xyz/",
         "applicationCategory": "DesignApplication",
         "operatingSystem": "Web",
@@ -39,10 +39,11 @@
         },
         "featureList": [
           "3D viewing for CAD and mesh formats",
+          "Automatic 2D engineering drawing generation with true-to-scale PDF export",
+          "Assembly explode and disassemble with per-part STEP export",
           "Measurement tools",
           "Section/cross-section controls",
           "Snapshot capture (normal and outline)",
-          "Assembly/part-focused workflows",
           "DXF preview support"
         ]
       }
@@ -56,6 +57,23 @@
         "url": "https://cadviewer.xyz/"
       }
     </script>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "name": "CADViewer",
+        "url": "https://cadviewer.xyz/",
+        "logo": "https://cadviewer.xyz/favicon.svg",
+        "founder": {
+          "@type": "Person",
+          "name": "Devaraj"
+        },
+        "sameAs": [
+          "https://github.com/devaraj3/cad_viewer",
+          "https://www.linkedin.com/in/devaraj1/"
+        ]
+      }
+    </script>
     <style>
       html, body, #root { height: 100%; }
       body { margin: 0; overflow: hidden; }
diff --git a/public/llms.txt b/public/llms.txt
index 6474302..0004532 100644
--- a/public/llms.txt
+++ b/public/llms.txt
@@ -1,27 +1,37 @@
 # CAD Viewer
 
-> Free, browser-based 3D CAD viewer supporting STEP, IGES, STL, OBJ, 3MF, BREP, GLB, and DXF files — no install, no account, no subscription.
+> Free, browser-based 3D CAD viewer and 2D engineering drawing generator
+> supporting STEP, IGES, STL, OBJ, 3MF, BREP, GLB, and DXF files — no
+> install, no account, no subscription.
 
-CAD Viewer is an open-source, in-browser CAD file viewer built on the OpenCascade (OCCT) engine. It runs entirely client-side and requires no software installation or account signup.
+CAD Viewer is an open-source, in-browser CAD file viewer built on the
+OpenCascade (OCCT) engine. It runs entirely client-side and requires no
+software installation or account signup.
 
 ## Features
 - 3D viewing for CAD and mesh formats
+- Automatic 2D engineering drawing generation with true-to-scale PDF export
+  (third-angle projection, standard dimensioning)
+- Assembly explode/disassemble with per-part STEP export
 - Measurement tools
 - Section/cross-section controls
 - Snapshot capture (normal and outline)
-- Assembly/part-focused workflows
 - DXF preview support
 
 ## Supported formats
 - CAD solids: STEP, STP, IGES, IGS, BREP
 - Mesh/assembly formats: STL, OBJ, 3MF, GLTF, GLB
-- 2D drawing format: DXF
+- 2D drawing format: DXF (import), PDF (drawing export)
 
 ## 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)
+- [How to Turn a STEP File into a 2D Engineering Drawing (Free)](https://cadviewer.xyz/guides/step-file-to-2d-drawing)
+
+## About
+[About CADViewer](https://cadviewer.xyz/about)
 
 ## Live app
 [CAD Viewer](https://cadviewer.xyz/)
diff --git a/public/sitemap.xml b/public/sitemap.xml
index bcf6973..6e28627 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -2,25 +2,31 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://cadviewer.xyz/</loc>
-    <lastmod>2026-08-22</lastmod>
+    <lastmod>2026-08-23</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1</priority>
   </url>
+  <url>
+    <loc>https://cadviewer.xyz/about</loc>
+    <lastmod>2026-08-23</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
   <url>
     <loc>https://cadviewer.xyz/viewer</loc>
-    <lastmod>2026-08-22</lastmod>
+    <lastmod>2026-08-23</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://cadviewer.xyz/guides/split-step-assembly</loc>
-    <lastmod>2026-08-22</lastmod>
+    <lastmod>2026-08-23</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.9</priority>
   </url>
   <url>
     <loc>https://cadviewer.xyz/guides/step-file-to-2d-drawing</loc>
-    <lastmod>2026-08-22</lastmod>
+    <lastmod>2026-08-23</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.9</priority>
   </url>
diff --git a/src/main.tsx b/src/main.tsx
index b0a0af8..ede221c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
 import { lazy, Suspense } from "react";
 import { ClientOnly, Head, ViteReactSSG } from "vite-react-ssg";
 import type { RouteRecord } from "vite-react-ssg";
+import About from "./pages/About";
 import Landing from "./pages/Landing";
 import SplitStepAssembly from "./pages/guides/SplitStepAssembly";
 import StepFileTo2dDrawing from "./pages/guides/StepFileTo2dDrawing";
@@ -50,6 +51,7 @@ function NotFound() {
 
 export const routes: RouteRecord[] = [
   { path: "/", element: <Landing /> },
+  { path: "/about", Component: About },
   { path: "/guides/split-step-assembly", Component: SplitStepAssembly },
   {
     path: "/guides/step-file-to-2d-drawing",
diff --git a/src/pages/About.module.css b/src/pages/About.module.css
new file mode 100644
index 0000000..17cb754
--- /dev/null
+++ b/src/pages/About.module.css
@@ -0,0 +1,126 @@
+:global(body.about-page) {
+  overflow-y: auto;
+  height: auto;
+  min-height: 100vh;
+}
+
+:global(body.about-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;
+}
+
+.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;
+}
+
+.externalLink {
+  color: #2563eb;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.externalLink:hover {
+  color: #1d4ed8;
+}
+
+.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;
+  }
+}
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..599db0c
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,128 @@
+import { Link } from "react-router-dom";
+import { Head } from "vite-react-ssg";
+import styles from "./About.module.css";
+
+export default function About() {
+  return (
+    <>
+      <Head>
+        <title>About CADViewer</title>
+        <meta
+          name="description"
+          content="Why CADViewer exists, how it works, and who's building it."
+        />
+        <link rel="canonical" href="https://cadviewer.xyz/about" />
+        <meta property="og:title" content="About CADViewer" />
+        <meta
+          property="og:description"
+          content="Why CADViewer exists, how it works, and who's building it."
+        />
+        <meta property="og:url" content="https://cadviewer.xyz/about" />
+        <meta property="og:type" content="website" />
+        <meta name="twitter:title" content="About CADViewer" />
+        <meta
+          name="twitter:description"
+          content="Why CADViewer exists, how it works, and who's building it."
+        />
+        <body className="about-page" />
+      </Head>
+      <main className={styles.page}>
+        <article className={styles.article}>
+          <section className={styles.section}>
+            <Link to="/" className={styles.breadcrumb}>
+              ← Back to CAD Viewer
+            </Link>
+            <p className={styles.eyebrow}>About</p>
+            <h1 className={styles.headline}>About CADViewer</h1>
+          </section>
+
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>Why this exists</h2>
+            <p className={styles.paragraph}>
+              Viewing a CAD file usually means installing something —
+              SolidWorks, Fusion 360, or at minimum a dedicated viewer app.
+              If you just need to look at a STEP file someone sent you, or
+              turn a 3D model into a drawing you can hand to a machine shop,
+              that's a lot of friction for an occasional task.
+            </p>
+            <p className={styles.paragraph}>
+              CADViewer is built to remove that friction: open the file in a
+              browser tab, view it, measure it, and generate a real
+              engineering drawing from it — no install, no account, no cost.
+            </p>
+          </section>
+
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>How it works</h2>
+            <p className={styles.paragraph}>
+              The viewer runs on OpenCascade (OCCT), the open-source CAD
+              kernel, compiled to WebAssembly so it runs directly in your
+              browser. Your file is never uploaded to a server — everything
+              from geometry parsing to drawing generation happens on your
+              own machine.
+            </p>
+            <p className={styles.paragraph}>
+              The 2D drawing generator specifically follows standard
+              drafting convention — third-angle projection, proper
+              dimension placement, correct scale selection — rather than
+              just capturing a picture of the model from three angles.
+              Getting that right took real iteration; a drawing that looks
+              plausible but is missing a dimension or duplicates one isn't
+              actually useful to whoever has to build the part from it.
+            </p>
+          </section>
+
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>Who's building this</h2>
+            <p className={styles.paragraph}>
+              CADViewer is built and maintained by Devaraj, working solo.
+              The project started from a simple frustration: needing to
+              open and document CAD files without paying for a SolidWorks
+              or Fusion 360 seat.
+            </p>
+            <p className={styles.paragraph}>
+              Most of the implementation has been built through iterative,
+              AI-assisted development — but every drafting decision, every
+              dimensioning rule, and every generated drawing has been
+              checked by hand against real drafting standards and tested on
+              real parts before shipping. The goal was never just "does it
+              run," it was "would this hold up if someone actually built
+              the part from it."
+            </p>
+          </section>
+
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>What's next</h2>
+            <p className={styles.paragraph}>
+              Sheet-metal unfold and flattening, exploded assembly views,
+              and BOM tables are next on the list. And more unexpected
+              features to come.
+            </p>
+          </section>
+
+          <section className={styles.section}>
+            <h2 className={styles.sectionHeading}>Get in touch</h2>
+            <p className={styles.paragraph}>
+              Found a bug, or need a format that isn't supported yet?{" "}
+              <a
+                href="mailto:devarajhello@gmail.com"
+                className={styles.externalLink}
+              >
+                Get in touch
+              </a>
+              .
+            </p>
+          </section>
+
+          <section className={styles.section}>
+            <div className={styles.ctaRow}>
+              <a className={styles.cta} href="/viewer">
+                Try CADViewer now
+              </a>
+            </div>
+          </section>
+        </article>
+      </main>
+    </>
+  );
+}
diff --git a/src/pages/Landing.module.css b/src/pages/Landing.module.css
index 8416494..1c2fc75 100644
--- a/src/pages/Landing.module.css
+++ b/src/pages/Landing.module.css
@@ -1,3 +1,14 @@
+:global(body.landing-page) {
+  overflow-y: auto;
+  height: auto;
+  min-height: 100vh;
+}
+
+:global(body.landing-page #root) {
+  height: auto;
+  min-height: 100vh;
+}
+
 .page {
   width: 100vw;
   height: 100vh;
@@ -103,6 +114,155 @@
   font-size: 0.75rem;
 }
 
+/* Below-the-fold sections */
+
+.section {
+  background: #f7f8fa;
+  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.sectionAlt {
+  background: #eef1f5;
+  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.sectionInner {
+  width: min(960px, 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.sectionHeading {
+  margin: 0;
+  color: #12161c;
+  font-size: 1.75rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.sectionParagraph {
+  margin: 0 auto;
+  max-width: 720px;
+  color: #5b6472;
+  font-size: 1.05rem;
+  line-height: 1.7;
+  text-align: center;
+}
+
+.capabilityGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem;
+}
+
+.capabilityCard {
+  background: #ffffff;
+  border: 1px solid #d7dce3;
+  border-radius: 12px;
+  padding: 1.5rem 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.capabilityTitle {
+  margin: 0;
+  color: #12161c;
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+
+.capabilityDescription {
+  margin: 0;
+  color: #5b6472;
+  font-size: 0.95rem;
+  line-height: 1.65;
+}
+
+.faqGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.faqItem {
+  background: #ffffff;
+  border: 1px solid #d7dce3;
+  border-radius: 12px;
+  padding: 0.35rem 1.5rem;
+}
+
+.faqItem[open] {
+  padding-bottom: 1.25rem;
+}
+
+.faqQuestion {
+  margin: 0;
+  padding: 1rem 0;
+  color: #12161c;
+  font-size: 1rem;
+  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: #5b6472;
+  font-size: 0.95rem;
+  line-height: 1.65;
+}
+
+.footer {
+  background: #f7f8fa;
+  padding: 2rem 1.5rem 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+.footerLink {
+  color: #8891a0;
+  font-size: 0.85rem;
+  text-decoration: none;
+}
+
+.footerLink:hover {
+  color: #3b82f6;
+}
+
+.footerDivider {
+  color: #d7dce3;
+  font-size: 0.85rem;
+}
+
 @media (max-width: 768px) {
   .page {
     padding: 1.25rem;
@@ -115,4 +275,12 @@
   .subheadline {
     font-size: 1rem;
   }
+
+  .capabilityGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .sectionHeading {
+    font-size: 1.4rem;
+  }
 }
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 5de6319..4bf7bc7 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -11,9 +11,72 @@ const FEATURE_PILLS = [
   "Orbit & Pan",
   "Edge Measurements",
   "Section Planes",
-  "Snapshot Export",
+  "2D Drawing Export",
 ];
 
+const CAPABILITIES: { title: string; description: string }[] = [
+  {
+    title: "View any CAD format, instantly.",
+    description:
+      "STEP, IGES, STL, OBJ, 3MF, BREP, and GLB open directly in the browser. Orbit, pan, section, and measure edges — no plugin, no viewer app to install separately.",
+  },
+  {
+    title: "Generate a real 2D engineering drawing.",
+    description:
+      "Click Generate 2D Drawing and get Front, Top, and Right orthographic views in third-angle projection, an isometric reference view, and automatic dimensioning — hole sizes, locations, and overall dimensions placed per standard drafting convention, not just wherever fits visually. Export as a true-to-scale PDF: printed at 100%, the dimensions on the page match the real part.",
+  },
+  {
+    title: "Work with assemblies.",
+    description:
+      "Explode and disassemble multi-part files, and export any individual part as its own STEP file.",
+  },
+  {
+    title: "Measure what matters.",
+    description:
+      "Click-to-measure edges, apply section planes, and compare scale against common reference objects.",
+  },
+];
+
+const FAQS: { question: string; answer: string }[] = [
+  {
+    question: "Is my file uploaded anywhere?",
+    answer:
+      "No. Everything is processed client-side in your browser. Files never touch a server.",
+  },
+  {
+    question: "What file formats are supported?",
+    answer:
+      "STEP, STP, IGES, IGS, BREP, STL, OBJ, 3MF, GLTF, GLB for viewing, and DXF for 2D preview. Generated drawings export as PDF.",
+  },
+  {
+    question: "Can I use the generated drawing for actual manufacturing?",
+    answer:
+      "For getting a dimensioned drawing for a quote, a personal project, or a student assignment — yes, it's true-to-scale and follows standard drafting convention. For full GD&T with feature control frames and formal revision control, a dedicated CAD package is still the right tool.",
+  },
+  {
+    question: "Is there a catch — will this become paid later?",
+    answer: "The viewing and drawing generation tools you see today are free to use.",
+  },
+  {
+    question: "Does this work offline?",
+    answer:
+      "Yes, once the page and your file are loaded, the viewer runs entirely client-side.",
+  },
+];
+
+const FAQ_JSON_LD = {
+  "@context": "https://schema.org",
+  "@type": "FAQPage",
+  mainEntity: FAQS.slice(0, 4).map((faq) => ({
+    "@type": "Question",
+    name: faq.question,
+    acceptedAnswer: {
+      "@type": "Answer",
+      text: faq.answer,
+    },
+  })),
+};
+
 export default function Landing() {
   const navigate = useNavigate();
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -45,13 +108,17 @@ export default function Landing() {
     <>
       <Head>
         <title>
-          CAD Viewer — View STEP, IGES, STL & OBJ Files in Your Browser
+          CAD Viewer — View STEP/IGES Files & Generate 2D Drawings Free
         </title>
         <meta
           name="description"
-          content="Free browser-based CAD viewer. Drop a STEP, IGES, STL, OBJ, 3MF, BREP, GLB, or DXF file to orbit, pan, measure edges, apply section planes, and export snapshots — no install, works offline."
+          content="Free browser-based CAD viewer. View STEP, IGES, STL, OBJ, 3MF, BREP, GLB, and DXF files, then generate a fully dimensioned, true-to-scale 2D engineering drawing — no install, no signup, runs entirely in your browser."
         />
         <link rel="canonical" href="https://cadviewer.xyz/" />
+        <body className="landing-page" />
+        <script type="application/ld+json">
+          {JSON.stringify(FAQ_JSON_LD)}
+        </script>
       </Head>
       <div
         onDragOver={handleDragOver}
@@ -129,7 +196,8 @@ export default function Landing() {
             </h1>
             <p className={styles.subheadline}>
               Drop a STEP, IGES, STL, OBJ, 3MF, BREP, or GLB file and orbit,
-              measure, and snapshot in seconds.
+              measure, and snapshot in seconds — or generate a dimensioned 2D
+              engineering drawing straight from the model.
             </p>
 
             <div className={styles.pillRow}>
@@ -191,6 +259,79 @@ export default function Landing() {
           </motion.section>
         </main>
       </div>
+
+      <section className={styles.section}>
+        <div className={styles.sectionInner}>
+          <h2 className={styles.sectionHeading}>What you can do with it</h2>
+          <div className={styles.capabilityGrid}>
+            {CAPABILITIES.map((capability) => (
+              <div key={capability.title} className={styles.capabilityCard}>
+                <h3 className={styles.capabilityTitle}>{capability.title}</h3>
+                <p className={styles.capabilityDescription}>
+                  {capability.description}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className={styles.sectionAlt}>
+        <div className={styles.sectionInner}>
+          <h2 className={styles.sectionHeading}>Why it&rsquo;s free</h2>
+          <p className={styles.sectionParagraph}>
+            Every file you load is processed entirely in your browser —
+            nothing is uploaded to a server. That&rsquo;s not a privacy
+            feature bolted on top; it&rsquo;s the whole architecture, built
+            on OpenCascade compiled to WebAssembly. Because nothing runs
+            server-side, there&rsquo;s no hosting cost that scales with
+            usage, which is what makes it possible to keep this free rather
+            than metered or subscription-gated.
+          </p>
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionInner}>
+          <h2 className={styles.sectionHeading}>
+            Frequently asked questions
+          </h2>
+          <div className={styles.faqGrid}>
+            {FAQS.map((faq) => (
+              <details className={styles.faqItem} key={faq.question}>
+                <summary className={styles.faqQuestion}>
+                  {faq.question}
+                </summary>
+                <p className={styles.faqAnswer}>{faq.answer}</p>
+              </details>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <footer className={styles.footer}>
+        <a className={styles.footerLink} href="/about">
+          About
+        </a>
+        <span className={styles.footerDivider} aria-hidden="true">
+          ·
+        </span>
+        <a
+          className={styles.footerLink}
+          href="/guides/step-file-to-2d-drawing"
+        >
+          Guides
+        </a>
+        <span className={styles.footerDivider} aria-hidden="true">
+          ·
+        </span>
+        <a
+          className={styles.footerLink}
+          href="mailto:devarajhello@gmail.com"
+        >
+          Report an issue
+        </a>
+      </footer>
     </>
   );
 }
diff --git a/src/siteRoutes.json b/src/siteRoutes.json
index 4eb4c21..a5e02f0 100644
--- a/src/siteRoutes.json
+++ b/src/siteRoutes.json
@@ -3,6 +3,7 @@
     "_comment": "Whenever you add a new route to main.tsx's routes array, add a matching entry here too — this file drives sitemap.xml and IndexNow generation automatically."
   },
   { "path": "/", "changefreq": "weekly", "priority": 1.0 },
+  { "path": "/about", "changefreq": "monthly", "priority": 0.6 },
   { "path": "/viewer", "changefreq": "monthly", "priority": 0.8 },
   { "path": "/guides/split-step-assembly", "changefreq": "monthly", "priority": 0.9 },
   { "path": "/guides/step-file-to-2d-drawing", "changefreq": "monthly", "priority": 0.9 }