fklement/homepage_relaunch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added product page

Browse Source
This commit is contained in:
Felix Klement committed 2026-09-18 16:56:44 +02:00
1 parent 4cda1ca41b
commit d97f541738
27 files changed
+1004 -69
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/home/Method.astro
+6 -3
View File
@@ -2,7 +2,7 @@
import { Picture } from 'astro:assets';
import MethodDiagram from './MethodDiagram.astro';
import engineer from '../../assets/images/engineer-glass.jpg';
import { t, type Lang } from '../../i18n/ui';
import { localePath, t, type Lang } from '../../i18n/ui';
interface Props { lang: Lang }
const { lang } = Astro.props;
const ui = t(lang);
@@ -25,7 +25,10 @@ const ui = t(lang);
<h2 id="method-title" class="h2 method__title">
{ui.method.lines.map((line, i) => <span class:list={['line', { 'line--muted': i > 0 }]}>{line}</span>)}
</h2>
<p class="method__body">{ui.method.body}</p>
<div class="method__body">
<p>{ui.method.body}</p>
<a class="button" href={localePath(lang, '/cipherverifier')}>{ui.method.cta}</a>
</div>
</div>
<div class="container method__figure">
@@ -48,7 +51,7 @@ const ui = t(lang);
align-items: start;
}
.method__title { grid-column: 1 / -1; }
.method__body { grid-column: 1 / -1; max-width: 30em; }
.method__body { grid-column: 1 / -1; max-width: 30em; display: grid; gap: var(--space-5); justify-items: start; }
.method__figure { padding-bottom: var(--section); }
.method__figure :global(.diagram) { max-width: 78rem; margin-inline: auto; }
@media (min-width: 48rem) {
src/components/home/Sectors.astro
+3 -27
View File
@@ -61,7 +61,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
loading="lazy"
decoding="async"
class="sectors__img img-doc"
pictureAttributes={{ class: 'sectors__picture sectors__picture--stage', 'data-image': String(i), 'data-active': i === 0 ? '' : undefined }}
pictureAttributes={{ class: 'sectors__picture sectors__picture--stage', 'data-stage-item': '', 'data-active': i === 0 ? '' : undefined }}
/>
))}
</div>
@@ -136,31 +136,7 @@ const items = ui.sectors.items.map((item, i) => ({ ...item, image: images[i], id
</style>
<script>
import { initTabs } from '../../scripts/tabs';
const root = document.querySelector<HTMLElement>('[data-sectors]');
if (root) {
const tabs = Array.from(root.querySelectorAll<HTMLButtonElement>('[role="tab"]'));
const panels = tabs.map((t) => document.getElementById(t.getAttribute('aria-controls')!)!);
const images = Array.from(root.querySelectorAll<HTMLElement>('[data-image]'));
const select = (index: number, focus = false) => {
tabs.forEach((tab, i) => {
const on = i === index;
tab.setAttribute('aria-selected', String(on));
if (on) tab.removeAttribute('tabindex'); else tab.setAttribute('tabindex', '-1');
if (on) panels[i].setAttribute('data-open', ''); else panels[i].removeAttribute('data-open');
if (on) images[i]?.setAttribute('data-active', ''); else images[i]?.removeAttribute('data-active');
});
if (focus) tabs[index].focus();
};
tabs.forEach((tab, i) => {
tab.addEventListener('click', () => select(i));
tab.addEventListener('keydown', (e) => {
const n = tabs.length;
if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { e.preventDefault(); select((i + 1) % n, true); }
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { e.preventDefault(); select((i - 1 + n) % n, true); }
if (e.key === 'Home') { e.preventDefault(); select(0, true); }
if (e.key === 'End') { e.preventDefault(); select(n - 1, true); }
});
});
select(0);
}
if (root) initTabs(root);
</script>