Initial guide

1 files changed, 113 insertions, 0 deletions

diff --git a/src/pages/cidr-calculator-subnet-guide.astro b/src/pages/cidr-calculator-subnet-guide.astro
new file mode 100644
index 0000000..09b553a
--- /dev/null
+++ b/src/pages/cidr-calculator-subnet-guide.astro
@@ -0,0 +1,113 @@
+---
+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}>
+    {
+        /**
+    ────────────────────────────────────────────────────────────
+    Hero
+    ────────────────────────────────────────────────────────────*/
+    }
+    <header
+        class="relative isolate overflow-hidden bg-gradient-to-br from-blue-50 via-indigo-50 to-white rounded-xl shadow-sm"
+    >
+        <div class="mx-auto max-w-7xl px-4 py-20 sm:py-24 lg:px-6 text-center">
+            <h1
+                class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
+            >
+                CIDR Calculator &amp; 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>
+
+    {
+        /**
+    ────────────────────────────────────────────────────────────
+    Calculator block
+    ────────────────────────────────────────────────────────────*/
+    }
+    <section class="mx-auto mt-12 max-w-4xl px-2 sm:px-4">
+        <Cidr client:load />
+    </section>
+
+    {
+        /**
+    ────────────────────────────────────────────────────────────
+    Table of Contents (desktop only for cleanliness)
+    ────────────────────────────────────────────────────────────*/
+    }
+    <nav
+        aria-label="Page sections"
+        class="hidden lg:block sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-gray-200"
+    >
+        <div class="mx-auto max-w-4xl px-4">
+            <ul
+                class="flex flex-wrap justify-center gap-6 py-3 text-sm font-medium text-gray-600"
+            >
+                <li>
+                    <a href="#what-is-cidr" class="hover:text-blue-600"
+                        >What is CIDR?</a
+                    >
+                </li>
+                <li>
+                    <a href="#cidr-to-ip" class="hover:text-blue-600"
+                        >CIDR → IP range</a
+                    >
+                </li>
+                <li>
+                    <a href="#subnetting-tutorial" class="hover:text-blue-600"
+                        >Subnetting tutorial</a
+                    >
+                </li>
+                <li>
+                    <a href="#ipv6" class="hover:text-blue-600">IPv6 basics</a>
+                </li>
+                <li><a href="#faq" class="hover:text-blue-600">FAQ</a></li>
+                <li>
+                    <a href="#resources" class="hover:text-blue-600"
+                        >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>