Skip to Content

Changes for page Data

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

Summary

Details

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