Add subnet guide, layout, nav and embed

1 files changed, 111 insertions, 0 deletions

diff --git a/src/pages/subnet-guide.astro b/src/pages/subnet-guide.astro
new file mode 100644
index 0000000..9a0d67f
--- /dev/null
+++ b/src/pages/subnet-guide.astro
@@ -0,0 +1,111 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Cidr from "../components/Cidr";
+import { faqs } from "../content/faqs.ts";
+import Prose from "../components/Prose.astro";
+
+// ────────────────────────────────────────────────────────────
+// Metadata
+// ────────────────────────────────────────────────────────────
+const title = "CIDR Calculator & Subnet Guide — IP Ranges, Masks & IPv6";
+const description =
+    "Free interactive CIDR calculator and comprehensive plain‑language guide covering subnetting, IP ranges, subnet masks and IPv6 addressing.";
+
+// FAQ structured‑data (kept in sync with UI)
+const faqJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: faqs.map(({ q, a }) => ({
+        "@type": "Question",
+        name: q,
+        acceptedAnswer: { "@type": "Answer", text: a },
+    })),
+};
+
+import { Content as GuideContent } from "../content/cidr-guide.md";
+---
+
+<Layout title={title} description={description}>
+    <header>
+        <div class="mx-auto max-w-7xl px-4 py-2 sm:py-4 lg:px-6 text-center">
+            <h1
+                class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
+            >
+                CIDR Subnet Guide
+            </h1>
+            <p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
+                Convert CIDR blocks to IP ranges and master subnetting for IPv4
+                &amp; IPv6 — in one streamlined resource.
+            </p>
+        </div>
+    </header>
+
+    <section class="hidden sm:block">
+        <Cidr client:load />
+    </section>
+
+    <nav
+        aria-label="Page sections"
+        class="hidden sm:block sticky top-0 z-10 pt-1 my-6 border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md"
+    >
+        <div class="mx-auto max-w-4xl px-4">
+            <ul
+                class="flex flex-wrap justify-center gap-8 py-3 text-base font-medium text-gray-700"
+            >
+                <li>
+                    <a
+                        href="#what-is-cidr"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >What is CIDR?</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#cidr-to-ip"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >CIDR → IP range</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#subnetting-tutorial"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >Subnetting tutorial</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#ipv6"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >IPv6 basics</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#faq"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >FAQ</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#resources"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >Resources</a
+                    >
+                </li>
+            </ul>
+        </div>
+    </nav>
+
+    <Prose>
+        <GuideContent />
+    </Prose>
+
+    {/** Structured‑data block */}
+    <script
+        type="application/ld+json"
+        is:inline
+        set:html={JSON.stringify(faqJsonLd, null, 2)}
+    />
+</Layout>