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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
---
import Layout from "../layouts/Layout.astro";
import Cidr from "../components/Cidr";
import { faqs } from "../content/faqs.ts";
const title = "Interactive visual CIDR and IP range calculator";
const description =
"Instantly compute and visualize CIDR subnets, IP ranges and masks. Free online tool for accurate network design, planning and IT education.";
const faqJsonLd = {
"@context": "https://schema.org",
"@type": "FAQPage",
mainEntity: faqs.map(({ q, a }) => ({
"@type": "Question",
name: q,
acceptedAnswer: { "@type": "Answer", text: a },
})),
};
---
<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 Calculator
</h1>
<p class="mt-4 text-lg sm:text-xl max-w-2xl mx-auto text-gray-700">
Visualize and Calculate Network Ranges with IPv4 CIDR Blocks
</p>
</div>
</header>
<Cidr client:load />
<section id="faq-section" class="mx-auto mt-12 max-w-3xl px-4 sm:px-0">
<h2 id="faq" class="mb-4 text-2xl font-bold">CIDR & Subnetting FAQ</h2>
<dl class="space-y-2">
{
faqs.map(({ q, a }) => (
<details class="group rounded-lg bg-white shadow-sm open:shadow-md transition">
<summary
class="flex cursor-pointer list-none items-center justify-between
rounded-lg px-4 py-3 font-semibold text-gray-900
hover:bg-gray-50"
>
{q}
<svg
class="h-5 w-5 transform text-gray-400 transition group-open:rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<dd class="px-4 pb-4 pt-1 text-gray-700">{a}</dd>
</details>
))
}
</dl>
</section>
<script
type="application/ld+json"
is:inline
set:html={JSON.stringify(faqJsonLd, null, 2)}
/>
</Layout>
|
