76 lines
2.0 KiB
Plaintext
76 lines
2.0 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-color-bg-surface);
|
||
|
|
border: 1px solid var(--atlas-color-border);
|
||
|
|
border-radius: var(--atlas-radius-xl);
|
||
|
|
}
|
||
|
|
|
||
|
|
.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);
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.problem__after {
|
||
|
|
font-size: var(--atlas-text-body);
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--atlas-color-accent);
|
||
|
|
line-height: var(--atlas-leading-normal);
|
||
|
|
}
|
||
|
|
</style>
|