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
107 lines
2.8 KiB
Plaintext
107 lines
2.8 KiB
Plaintext
---
|
|
import { t, type Locale } from '../i18n/utils';
|
|
|
|
interface Props {
|
|
locale: Locale;
|
|
}
|
|
|
|
const { locale } = Astro.props;
|
|
const copy = t(locale);
|
|
---
|
|
|
|
<section class="problem section band--dark fade-in" id="why">
|
|
<div class="problem__inner container">
|
|
<h2 class="problem__title">{copy.problem.sectionTitle}</h2>
|
|
|
|
<div class="problem__grid">
|
|
{copy.problem.scenarios.map((scenario) => (
|
|
<div class="problem__card">
|
|
<p class="problem__before">{scenario.before}</p>
|
|
<div class="problem__arrow" aria-hidden="true">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 5V19M12 19L5 12M12 19L19 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<p class="problem__after">{scenario.after}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.problem__title {
|
|
font-size: var(--atlas-text-section);
|
|
font-weight: var(--atlas-text-section-weight);
|
|
text-align: center;
|
|
margin-bottom: var(--atlas-space-section-gap);
|
|
}
|
|
|
|
.problem__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--atlas-space-xxl);
|
|
}
|
|
|
|
.problem__card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: var(--atlas-space-lg);
|
|
padding: var(--atlas-space-xxl);
|
|
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);
|
|
position: relative;
|
|
transition: box-shadow var(--atlas-motion-standard);
|
|
}
|
|
|
|
.problem__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);
|
|
}
|
|
|
|
.problem__card:hover::before {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.problem__card:hover {
|
|
box-shadow: var(--atlas-glow-card-hover);
|
|
}
|
|
|
|
.problem__before {
|
|
font-size: var(--atlas-text-body);
|
|
color: var(--atlas-color-text-secondary);
|
|
line-height: var(--atlas-leading-normal);
|
|
}
|
|
|
|
.problem__arrow {
|
|
color: var(--atlas-color-brand);
|
|
}
|
|
|
|
.problem__arrow svg {
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.problem__after {
|
|
font-size: var(--atlas-text-body);
|
|
font-weight: 500;
|
|
color: var(--atlas-color-accent);
|
|
line-height: var(--atlas-leading-normal);
|
|
}
|
|
</style>
|