103 lines
2.8 KiB
Plaintext
103 lines
2.8 KiB
Plaintext
|
---
|
||
|
|
import type { Locale } from '../i18n/index.ts';
|
||
|
|
import { t } from '../i18n/index.ts';
|
||
|
|
|
||
|
|
interface Props { locale: Locale }
|
||
|
|
const { locale } = Astro.props;
|
||
|
|
const tr = t(locale);
|
||
|
|
|
||
|
|
const features = [
|
||
|
|
{
|
||
|
|
key: 'local',
|
||
|
|
data: tr.how.local,
|
||
|
|
icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
|
||
|
|
<line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
|
||
|
|
</svg>`,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'integrations',
|
||
|
|
data: tr.how.integrations,
|
||
|
|
icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
|
||
|
|
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
|
||
|
|
</svg>`,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'human',
|
||
|
|
data: tr.how.human,
|
||
|
|
icon: `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||
|
|
<circle cx="9" cy="7" r="4"/>
|
||
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||
|
|
</svg>`,
|
||
|
|
},
|
||
|
|
] as const;
|
||
|
|
---
|
||
|
|
|
||
|
|
<section class="how-section" aria-labelledby="how-heading">
|
||
|
|
<div class="container">
|
||
|
|
<span class="section-label" aria-hidden="true">
|
||
|
|
{locale === 'en' ? 'Our approach' : 'Nasze podejście'}
|
||
|
|
</span>
|
||
|
|
<h2 id="how-heading">{tr.how.h2}</h2>
|
||
|
|
|
||
|
|
<div class="features-grid" role="list">
|
||
|
|
{features.map(({ data, icon }) => (
|
||
|
|
<article class="feature-card" role="listitem">
|
||
|
|
<div class="feature-icon" aria-hidden="true" set:html={icon} />
|
||
|
|
<h3>{data.title}</h3>
|
||
|
|
<p>{data.body}</p>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.how-section {
|
||
|
|
background: var(--color-surface);
|
||
|
|
}
|
||
|
|
|
||
|
|
.how-section h2 {
|
||
|
|
max-width: 40ch;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.features-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
gap: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 640px) {
|
||
|
|
.features-grid {
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card {
|
||
|
|
padding: 1.75rem;
|
||
|
|
background: var(--color-bg);
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-icon {
|
||
|
|
color: var(--color-accent);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
line-height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card h3 {
|
||
|
|
margin-bottom: 0.6rem;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-card p {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
max-width: 32ch;
|
||
|
|
}
|
||
|
|
</style>
|