src/pages/subnet-guide.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

---
import Layout from "../layouts/Layout.astro";
import Cidr from "../components/Cidr";
import Prose from "../components/Prose.astro";

const title = "Subnet Guide — IP Ranges and Masks";
const description =
    "Free interactive CIDR calculator and comprehensive guide covering subnetting, IP ranges, subnet masks and addressing.";

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
                — in one streamlined resource.
            </p>
        </div>
    </header>

    <section class="hidden sm:block">
        <Cidr client:load />
    </section>

    <Prose>
        <GuideContent />
    </Prose>
</Layout>