Oskar Kapala
b7b133647c
- Gradient palette: coral/amber (warm) ↔ indigo/violet/teal (cool) - Hero: radial blob mesh bg, geometric SVG line-art, gradient on 'AI' in H1, gradient primary CTA, per-pillar accent top borders, dot-grid accent - Manifest strip 'AI dla ludzi, przez ludzi' between hero and problem - HowWeWork: per-card accents, icon bg pills, human-tagline note - Offers: gradient top bar per pillar, accent icon containers, abstract SVGs - Process: gradient numbered circles (warm→cool progression) - Contact: 'zawsze rozmawiasz z człowiekiem' guarantee badge, gradient email - Layout: grad-main/grad-cta CSS vars, gradient section hairlines, gradient btn-primary/btn-outline, .grad-text utility
141 lines
4.2 KiB
Plaintext
141 lines
4.2 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,
|
|
accent: '#0b9688',
|
|
icon: `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="4" y="6" width="40" height="16" rx="3"/>
|
|
<rect x="4" y="26" width="40" height="16" rx="3"/>
|
|
<circle cx="12" cy="14" r="2.5" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="12" cy="34" r="2.5" fill="currentColor" opacity="0.5"/>
|
|
<line x1="20" y1="14" x2="36" y2="14" stroke-width="1.2" opacity="0.4"/>
|
|
<line x1="20" y1="34" x2="30" y2="34" stroke-width="1.2" opacity="0.4"/>
|
|
</svg>`,
|
|
},
|
|
{
|
|
key: 'integrations',
|
|
data: tr.how.integrations,
|
|
accent: '#3d35c0',
|
|
icon: `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="24" cy="10" r="5"/>
|
|
<circle cx="8" cy="38" r="5"/>
|
|
<circle cx="40" cy="38" r="5"/>
|
|
<line x1="24" y1="15" x2="8" y2="33"/>
|
|
<line x1="24" y1="15" x2="40" y2="33"/>
|
|
<line x1="13" y1="38" x2="35" y2="38"/>
|
|
</svg>`,
|
|
},
|
|
{
|
|
key: 'human',
|
|
data: tr.how.human,
|
|
accent: '#7b39eb',
|
|
icon: `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="18" cy="14" r="7"/>
|
|
<path d="M4 42v-3a10 10 0 0 1 10-10h8a10 10 0 0 1 10 10v3"/>
|
|
<path d="M32 8a7 7 0 0 1 0 12"/>
|
|
<path d="M44 42v-2a10 10 0 0 0-6-9.1"/>
|
|
</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(({ key, data, accent, icon }) => (
|
|
<article
|
|
class={`feature-card ${key === 'human' ? 'feature-human' : ''}`}
|
|
role="listitem"
|
|
style={`--fa: ${accent}`}
|
|
>
|
|
<div class="feature-icon-wrap">
|
|
<div class="feature-icon" aria-hidden="true" set:html={icon} />
|
|
</div>
|
|
<h3>{data.title}</h3>
|
|
<p>{data.body}</p>
|
|
{key === 'human' && (
|
|
<p class="human-tagline" role="note">
|
|
<span class="tagline-dash" aria-hidden="true">—</span>
|
|
{tr.how.human.tagline}
|
|
</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-top: 2.5px solid var(--fa);
|
|
border-radius: var(--radius-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.feature-human {
|
|
background: linear-gradient(
|
|
160deg,
|
|
rgba(123,57,235,.04) 0%,
|
|
rgba(255,255,255,0) 60%
|
|
);
|
|
}
|
|
|
|
.feature-icon-wrap {
|
|
width: 48px; height: 48px;
|
|
border-radius: var(--radius);
|
|
background: color-mix(in srgb, var(--fa) 10%, transparent);
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 1.1rem;
|
|
}
|
|
|
|
.feature-icon { color: var(--fa); line-height: 0; }
|
|
|
|
.feature-card h3 { margin-bottom: 0.55rem; font-size: 1rem; }
|
|
.feature-card > p { font-size: 0.9rem; line-height: 1.6; max-width: 32ch; }
|
|
|
|
.human-tagline {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
color: var(--c-violet) !important;
|
|
max-width: none;
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
align-items: baseline;
|
|
}
|
|
.tagline-dash { opacity: 0.5; }
|
|
</style>
|