Skip to content

Commit d13bba5

Browse files
mheaddmheadd
committed
Add some sizzle to landing page
1 parent f57edea commit d13bba5

1 file changed

Lines changed: 130 additions & 15 deletions

File tree

‎docs/index.html‎

Lines changed: 130 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@
2222
--bg-alt: #f9fafb;
2323
--border: #e5e7eb;
2424
--accent: #8b5cf6;
25+
--header-grad-start: #2563eb;
26+
--header-grad-end: #8b5cf6;
27+
--glow: 0 10px 30px rgba(37, 99, 235, 0.25);
28+
--glass-bg: rgba(255,255,255,0.7);
29+
--glass-border: rgba(255,255,255,0.35);
2530
}
2631

2732
body {
@@ -39,7 +44,8 @@
3944

4045
/* Header */
4146
header {
42-
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
47+
background: radial-gradient(1200px 500px at 20% -10%, rgba(255,255,255,0.15), transparent 60%),
48+
linear-gradient(135deg, var(--header-grad-start) 0%, var(--header-grad-end) 100%);
4349
color: white;
4450
padding: 4rem 0 5rem;
4551
position: relative;
@@ -69,6 +75,22 @@
6975
letter-spacing: -0.025em;
7076
}
7177

78+
/* Gradient animated logo text */
79+
.logo-gradient {
80+
background: linear-gradient(90deg, #fff, #e5e7eb, #fff);
81+
-webkit-background-clip: text;
82+
background-clip: text;
83+
color: transparent;
84+
background-size: 200% auto;
85+
animation: shimmer 6s linear infinite;
86+
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
87+
}
88+
89+
@keyframes shimmer {
90+
0% { background-position: 0% 50%; }
91+
100% { background-position: 200% 50%; }
92+
}
93+
7294
.tagline {
7395
font-size: 1.5rem;
7496
font-weight: 300;
@@ -108,11 +130,14 @@
108130
}
109131

110132
.concept-box {
111-
background: white;
133+
background: var(--glass-bg);
112134
border-radius: 1rem;
113135
padding: 3rem;
114-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.05);
115-
max-width: 900px;
136+
border: 1px solid var(--glass-border);
137+
box-shadow: 0 8px 30px rgba(0,0,0,0.08), var(--glow);
138+
backdrop-filter: saturate(140%) blur(12px);
139+
-webkit-backdrop-filter: saturate(140%) blur(12px);
140+
max-width: 1000px;
116141
margin: 0 auto;
117142
}
118143

@@ -148,7 +173,7 @@
148173
/* Concept Cards */
149174
.concept-cards {
150175
display: grid;
151-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
176+
grid-template-columns: repeat(2, minmax(0, 1fr));
152177
gap: 1.5rem;
153178
margin: 2rem 0;
154179
}
@@ -159,12 +184,22 @@
159184
border-radius: 1rem;
160185
padding: 1.75rem;
161186
transition: all 0.3s ease;
187+
position: relative;
188+
overflow: hidden;
162189
}
163190

164191
.concept-card:hover {
165192
border-color: var(--accent);
166-
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.1);
167-
transform: translateY(-3px);
193+
box-shadow: 0 18px 35px rgba(139, 92, 246, 0.18);
194+
transform: translateY(-4px);
195+
}
196+
197+
.concept-card::after {
198+
content: '';
199+
position: absolute;
200+
inset: 0;
201+
background: linear-gradient(135deg, rgba(139,92,246,0.08), transparent 60%);
202+
pointer-events: none;
168203
}
169204

170205
.concept-icon {
@@ -209,11 +244,13 @@
209244
}
210245

211246
.benefit-card {
212-
background: white;
213-
border: 2px solid var(--border);
247+
background: var(--glass-bg);
248+
border: 1px solid var(--glass-border);
214249
border-radius: 1rem;
215250
padding: 2rem;
216251
transition: all 0.3s ease;
252+
backdrop-filter: saturate(140%) blur(10px);
253+
-webkit-backdrop-filter: saturate(140%) blur(10px);
217254
}
218255

219256
.benefit-card:hover {
@@ -260,12 +297,25 @@
260297
text-decoration: none;
261298
color: var(--text);
262299
display: block;
300+
position: relative;
301+
overflow: hidden;
263302
}
264303

265304
.doc-card:hover {
266305
border-color: var(--secondary);
267-
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
268-
transform: translateY(-2px);
306+
box-shadow: 0 16px 30px rgba(16, 185, 129, 0.2);
307+
transform: translateY(-3px);
308+
}
309+
310+
.doc-card::after {
311+
content: '';
312+
position: absolute;
313+
top: -20%;
314+
right: -20%;
315+
width: 60%;
316+
height: 140%;
317+
background: radial-gradient(closest-side, rgba(16,185,129,0.12), transparent 70%);
318+
transform: rotate(25deg);
269319
}
270320

271321
.doc-card-header {
@@ -305,6 +355,7 @@
305355
.cta {
306356
padding: 4rem 0;
307357
text-align: center;
358+
background: linear-gradient(0deg, rgba(37, 99, 235, 0.05), transparent 40%);
308359
}
309360

310361
.cta-buttons {
@@ -329,6 +380,7 @@
329380
.btn-primary {
330381
background: var(--primary);
331382
color: white;
383+
box-shadow: var(--glow);
332384
}
333385

334386
.btn-primary:hover {
@@ -341,6 +393,7 @@
341393
background: white;
342394
color: var(--primary);
343395
border-color: var(--primary);
396+
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
344397
}
345398

346399
.btn-secondary:hover {
@@ -357,6 +410,42 @@
357410
padding: 2rem 0;
358411
text-align: center;
359412
}
413+
/* Scroll reveal animation */
414+
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
415+
.reveal.in-view { opacity: 1; transform: none; }
416+
417+
/* Decorative header blobs */
418+
.header-blob {
419+
position: absolute;
420+
filter: blur(40px);
421+
opacity: 0.35;
422+
z-index: 0;
423+
pointer-events: none;
424+
}
425+
.header-blob.b1 { width: 320px; height: 320px; background: #60a5fa; top: -60px; left: -40px; border-radius: 50%; }
426+
.header-blob.b2 { width: 420px; height: 420px; background: #a78bfa; top: -80px; right: -80px; border-radius: 50%; }
427+
428+
/* Section title accent underline */
429+
.section-title { position: relative; }
430+
.section-title::after {
431+
content: '';
432+
position: absolute;
433+
left: 50%;
434+
transform: translateX(-50%);
435+
bottom: -12px;
436+
width: 120px;
437+
height: 4px;
438+
border-radius: 999px;
439+
background: linear-gradient(90deg, var(--primary), var(--accent));
440+
opacity: 0.6;
441+
}
442+
443+
/* Respect users who prefer reduced motion */
444+
@media (prefers-reduced-motion: reduce) {
445+
.logo-gradient { animation: none; }
446+
.reveal { opacity: 1 !important; transform: none !important; }
447+
.concept-card:hover, .doc-card:hover, .benefit-card:hover { transform: none; }
448+
}
360449

361450
footer a {
362451
color: var(--secondary);
@@ -388,13 +477,18 @@
388477
.doc-grid {
389478
grid-template-columns: 1fr;
390479
}
480+
.concept-cards {
481+
grid-template-columns: 1fr;
482+
}
391483
}
392484
</style>
393485
</head>
394486
<body>
395487
<header>
488+
<div class="header-blob b1"></div>
489+
<div class="header-blob b2"></div>
396490
<div class="container">
397-
<h1>⚡ SpecOps</h1>
491+
<h1 class="logo-gradient">⚡ SpecOps</h1>
398492
<p class="tagline">Specification-Driven Legacy System Modernization</p>
399493
<p class="hero-description">
400494
SpecOps uses AI not just to transform legacy code, but to preserve institutional knowledge and create verified software specifications—reducing risk, speeding modernization efforts, and future-proofing your mission critical systems.
@@ -456,10 +550,10 @@ <h4>GitOps Thinking</h4>
456550
<div class="highlight-box" style="margin-top: 2rem;">
457551
<strong>How it works:</strong>
458552
<ul style="margin-top: 0.75rem; margin-bottom: 0;">
459-
<li style="margin-bottom: 0.5rem;">AI analyzes legacy systems and generates specifications in plain language</li>
553+
<li style="margin-bottom: 0.5rem;">AI analyzes legacy systems and generates comprehensive software specifications in plain language</li>
460554
<li style="margin-bottom: 0.5rem;">Domain experts—policy makers, program administrators, business stakeholders—verify these specifications before any modern code is written</li>
461-
<li style="margin-bottom: 0.5rem;">Once verified, the specification becomes the source of truth that guides implementation and future changes</li>
462-
<li>All changes flow through the specification first, ensuring proper review and approval</li>
555+
<li style="margin-bottom: 0.5rem;">Once verified, the specification becomes the source of truth that guides AI-assisted implementation and future changes</li>
556+
<li>All changes to the system flow through the specification document first, ensuring proper review and approval</li>
463557
</ul>
464558
</div>
465559

@@ -652,5 +746,26 @@ <h2 class="section-title">Get Started</h2>
652746
</p>
653747
</div>
654748
</footer>
749+
<script>
750+
// Lightweight scroll reveal for key elements (no text changes)
751+
(function() {
752+
var els = document.querySelectorAll('.concept-card, .benefit-card, .doc-card, .section-title, .concept-box, .hero-description');
753+
els.forEach(function(el){ el.classList.add('reveal'); });
754+
if ('IntersectionObserver' in window) {
755+
var observer = new IntersectionObserver(function(entries){
756+
entries.forEach(function(entry){
757+
if (entry.isIntersecting) {
758+
entry.target.classList.add('in-view');
759+
observer.unobserve(entry.target);
760+
}
761+
});
762+
}, { threshold: 0.15 });
763+
els.forEach(function(el){ observer.observe(el); });
764+
} else {
765+
// Fallback: show all
766+
els.forEach(function(el){ el.classList.add('in-view'); });
767+
}
768+
})();
769+
</script>
655770
</body>
656771
</html>

0 commit comments

Comments
 (0)