8116eee6c1
Comprehensive visual overhaul of the Atlas Landing Site: - Dual-theme token system with light mode support via [data-theme="light"] - Glassmorphism + glow effects across all components (blur, gradient borders, glow shadows) - Theme toggle in navbar with localStorage persistence and system preference detection - Hero section: aurora glow orbs, gradient headline, floating screenshot animation - Animated gradient CTA buttons, glass card hover effects with gradient border reveal - Stagger scroll reveal animations, noise texture overlay, section gradient backgrounds - All 18 component files updated, no new files created
98 lines
2.7 KiB
Plaintext
98 lines
2.7 KiB
Plaintext
---
|
|
interface Props {
|
|
title: string;
|
|
value: string;
|
|
example: string;
|
|
trustCue: string;
|
|
}
|
|
|
|
const { title, value, example, trustCue } = Astro.props;
|
|
---
|
|
|
|
<article class="feature-card fade-in">
|
|
<h3 class="feature-card__title">{title}</h3>
|
|
<p class="feature-card__value">{value}</p>
|
|
<p class="feature-card__example">{example}</p>
|
|
<p class="feature-card__trust">
|
|
<svg class="feature-card__trust-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
|
|
<path d="M11.5 4L5.5 10L2.5 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
{trustCue}
|
|
</p>
|
|
</article>
|
|
|
|
<style>
|
|
.feature-card {
|
|
padding: var(--atlas-space-xl);
|
|
background: var(--atlas-glass-bg);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid var(--atlas-glass-border);
|
|
border-radius: var(--atlas-radius-xl);
|
|
box-shadow: var(--atlas-shadow-raised);
|
|
position: relative;
|
|
transition: transform var(--atlas-motion-fast),
|
|
box-shadow var(--atlas-motion-standard);
|
|
}
|
|
|
|
.feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: var(--atlas-gradient-brand);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity var(--atlas-motion-standard);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: var(--atlas-glow-card-hover);
|
|
}
|
|
|
|
.feature-card:hover::before {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.feature-card__title {
|
|
font-family: var(--atlas-font-display);
|
|
font-size: var(--atlas-text-card-title);
|
|
font-weight: var(--atlas-text-card-title-weight);
|
|
color: var(--atlas-color-text-primary);
|
|
margin-bottom: var(--atlas-space-sm);
|
|
}
|
|
|
|
.feature-card__value {
|
|
font-size: var(--atlas-text-body);
|
|
color: var(--atlas-color-text-primary);
|
|
line-height: var(--atlas-leading-normal);
|
|
margin-bottom: var(--atlas-space-md);
|
|
}
|
|
|
|
.feature-card__example {
|
|
font-size: var(--atlas-text-body-small);
|
|
color: var(--atlas-color-text-secondary);
|
|
line-height: var(--atlas-leading-normal);
|
|
margin-bottom: var(--atlas-space-lg);
|
|
}
|
|
|
|
.feature-card__trust {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--atlas-space-xs);
|
|
font-size: var(--atlas-text-caption);
|
|
font-weight: var(--atlas-text-caption-weight);
|
|
color: var(--atlas-color-accent);
|
|
}
|
|
|
|
.feature-card__trust-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|