Skip to Content

Changes for page Data

Last modified by Aaron Blackburn on 2026/09/02 15:09
From version 1.1
edited by Aaron Blackburn
on 2026/09/02 14:54
Change comment: There is no comment for this version
To version 2.1
edited by Aaron Blackburn
on 2026/09/02 15:08
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,0 +1,237 @@
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}}