Skip to Content

Wiki source code of Data

Version 2.1 by Aaron Blackburn on 2026/09/02 15:08
Hide last authors
Aaron Blackburn 1.2 1 {{html clean="false"}}
2 <!-- Data Services Landing Page Component -->
3 <style>
4 @import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500;600;700;800&display=swap');
5 .fd-data-page, .fd-data-page * { box-sizing: border-box; }
6 .fd-data-page {
7 --fd-navy: #003366;
8 --fd-dark-navy: #001a33;
9 --fd-blue: #307ab2;
10 --fd-sky: #38b2e3;
11 --fd-bright-cyan: #5ed2ff;
12 --fd-slate: #2e404d;
13 --fd-grey: #8f9499;
14 --fd-lightgrey: #e2e8f0;
15 --fd-offwhite: #f8fafc;
16 --fd-max-w: 1140px;
17 font-family: 'Host Grotesk', system-ui, -apple-system, sans-serif;
18 color: var(--fd-slate);
19 background: #ffffff;
20 max-width: var(--fd-max-w);
21 margin: 0 auto;
22 padding: 24px 16px;
23 }
24 /* Header Banner */
25 .fd-data-page .hero-banner {
26 background: radial-gradient(circle at 50% 35%, rgba(13, 71, 128, 0.85) 0%, rgba(0, 51, 102, 0.95) 60%, rgba(0, 26, 51, 0.98) 100%);
27 padding: 48px 32px;
28 border-radius: 20px;
29 text-align: center;
30 color: #ffffff;
31 box-shadow: 0 12px 32px rgba(0, 51, 102, 0.12);
32 margin-bottom: 36px;
33 }
34 .fd-data-page .hero-banner p.kicker {
35 color: var(--fd-bright-cyan);
36 font-weight: 800;
37 font-size: .85rem;
38 text-transform: uppercase;
39 letter-spacing: .18em;
40 margin: 0 0 10px;
41 }
42 .fd-data-page .hero-banner h1 {
43 font-weight: 800;
44 font-size: 2.5rem;
45 margin: 0 0 12px;
46 letter-spacing: -0.02em;
47 }
48 .fd-data-page .hero-banner p.sub {
49 color: #f8fafc;
50 font-size: 1.05rem;
51 max-width: 680px;
52 margin: 0 auto;
53 line-height: 1.5;
54 }
55 /* Grid Layout */
56 .fd-data-page .services-grid {
57 display: grid;
58 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
59 gap: 20px;
60 margin-bottom: 36px;
61 }
62 /* Service Card */
63 .fd-data-page .service-card {
64 background: #ffffff;
65 border: 1px solid var(--fd-lightgrey);
66 border-radius: 16px;
67 padding: 28px 24px;
68 display: flex;
69 flex-direction: column;
70 justify-content: space-between;
71 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
72 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
73 }
74 .fd-data-page .service-card:hover {
75 transform: translateY(-4px);
76 border-color: var(--fd-blue);
77 box-shadow: 0 12px 24px rgba(0, 51, 102, 0.08);
78 }
79 .fd-data-page .card-icon {
80 width: 48px;
81 height: 48px;
82 border-radius: 12px;
83 background: var(--fd-offwhite);
84 border: 1px solid var(--fd-lightgrey);
85 display: flex;
86 align-items: center;
87 justify-content: center;
88 margin-bottom: 20px;
89 }
90 .fd-data-page .card-icon svg {
91 width: 24px;
92 height: 24px;
93 stroke: var(--fd-navy);
94 }
95 .fd-data-page .card-title {
96 font-size: 1.25rem;
97 font-weight: 700;
98 color: var(--fd-navy);
99 margin: 0 0 10px;
100 }
101 .fd-data-page .card-desc {
102 font-size: 0.9rem;
103 line-height: 1.5;
104 color: var(--fd-slate);
105 margin-bottom: 20px;
106 flex-grow: 1;
107 }
108 /* Key Details / Bullets */
109 .fd-data-page .card-features {
110 list-style: none;
111 padding: 0;
112 margin: 0 0 24px;
113 font-size: 0.85rem;
114 border-top: 1px solid var(--fd-lightgrey);
115 padding-top: 16px;
116 }
117 .fd-data-page .card-features li {
118 position: relative;
119 padding-left: 18px;
120 margin-bottom: 8px;
121 line-height: 1.4;
122 }
123 .fd-data-page .card-features li::before {
124 content: "•";
125 color: var(--fd-blue);
126 font-weight: bold;
127 position: absolute;
128 left: 4px;
129 }
130 /* Action Buttons */
131 .fd-data-page .btn-action {
132 display: inline-block;
133 text-align: center;
134 background: var(--fd-offwhite);
135 color: var(--fd-navy);
136 font-weight: 700;
137 font-size: 0.88rem;
138 padding: 10px 16px;
139 border-radius: 8px;
140 text-decoration: none;
141 border: 1px solid var(--fd-lightgrey);
142 transition: all 0.2s ease;
143 }
144 .fd-data-page .btn-action:hover {
145 background: var(--fd-navy);
146 color: #ffffff;
147 border-color: var(--fd-navy);
148 }
149 @media (max-width: 768px) {
150 .fd-data-page .hero-banner { padding: 32px 20px; }
151 .fd-data-page .hero-banner h1 { font-size: 1.85rem; }
152 }
153 </style>
154 <div class="fd-data-page">
155 <!-- Main Hero Banner -->
156 <div class="hero-banner">
157 <p class="kicker">Network Solutions</p>
158 <h1>Data & Enterprise Connectivity</h1>
159 <p class="sub">High-performance dedicated internet, intelligent WAN management, local network infrastructure, and round-the-clock technical support.</p>
160 </div>
161 <!-- 4-Option Services Grid -->
162 <div class="services-grid">
163 <!-- Option 1: Direct Internet Access (DIA) -->
164 <div class="service-card">
165 <div>
166 <div class="card-icon">
167 <svg fill="none" viewBox="0 0 24 24" stroke-width="2">
168 <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
169 </svg>
170 </div>
171 <h2 class="card-title">Direct Internet Access</h2>
172 <p class="card-desc">Symmetrical, enterprise-grade fiber internet with guaranteed bandwidth and strict service level agreements.</p>
173 <ul class="card-features">
174 <li>Dedicated 1:1 bandwidth ratio</li>
175 <li>Symmetrical upload & download speeds</li>
176 <li>Guaranteed SLAs & high uptime</li>
177 </ul>
178 </div>
179 <a href="#dia-details" class="btn-action">View DIA Specs</a>
180 </div>
181 <!-- Option 2: SD-WAN -->
182 <div class="service-card">
183 <div>
184 <div class="card-icon">
185 <svg fill="none" viewBox="0 0 24 24" stroke-width="2">
186 <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
187 </svg>
188 </div>
189 <h2 class="card-title">SD-WAN</h2>
190 <p class="card-desc">Intelligent software-defined networking that optimizes traffic routing, failover, and multi-site connectivity.</p>
191 <ul class="card-features">
192 <li>Dynamic path selection & failover</li>
193 <li>Centralized cloud management</li>
194 <li>Optimized application performance</li>
195 </ul>
196 </div>
197 <a href="#sdwan-details" class="btn-action">Explore SD-WAN</a>
198 </div>
199 <!-- Option 3: Managed LAN -->
200 <div class="service-card">
201 <div>
202 <div class="card-icon">
203 <svg fill="none" viewBox="0 0 24 24" stroke-width="2">
204 <path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m14-6h2m-2 6h2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
205 </svg>
206 </div>
207 <h2 class="card-title">Managed LAN</h2>
208 <p class="card-desc">End-to-end management of internal network hardware, switches, Wi-Fi access points, and security policies.</p>
209 <ul class="card-features">
210 <li>Switching & Wi-Fi deployment</li>
211 <li>Proactive monitoring & maintenance</li>
212 <li>VLAN segmenting & local security</li>
213 </ul>
214 </div>
215 <a href="#managed-lan-details" class="btn-action">Learn About Managed LAN</a>
216 </div>
217 <!-- Option 4: Technical Support -->
218 <div class="service-card">
219 <div>
220 <div class="card-icon">
221 <svg fill="none" viewBox="0 0 24 24" stroke-width="2">
222 <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
223 </svg>
224 </div>
225 <h2 class="card-title">Technical Support</h2>
226 <p class="card-desc">Dedicated 24/7 engineering assistance, troubleshooting guides, network diagnostics, and ticketing.</p>
227 <ul class="card-features">
228 <li>24/7 NOC monitoring & response</li>
229 <li>Direct access to network engineers</li>
230 <li>Ticketing & resolution tracking</li>
231 </ul>
232 </div>
233 <a href="#support-details" class="btn-action">Access Support Portal</a>
234 </div>
235 </div>
236 </div>
237 {{/html}}