WIP: dark mode Modale

This commit is contained in:
ISA
2025-09-08 15:33:26 +02:00
parent fefff9419d
commit af21b180f1
23 changed files with 209 additions and 95 deletions

View File

@@ -55,14 +55,16 @@ function Footer() {
}, [showSlider]);
return (
<footer className="relative bg-[var(--color-surface-alt)] border-t border-base p-4 xl:p-2 2xl:p-4 overflow-hidden text-[var(--color-fg)] laptop:h-[5vh] theme-transition">
<footer className="relative bg-[var(--color-surface-alt)] border-t border-base p-4 xl:p-2 2xl:p-4 overflow-hidden text-[var(--color-fg)] laptop:h-[5vh] theme-transition">
<div className="container mx-auto flex justify-between">
<div className="flex flex-row space-x-2 items-center">
<Icon
icon="material-symbols:factory-outline"
className="text-xl text-accent"
/>
<p className="text-sm text-fg-muted">Littwin Systemtechnik GmbH & Co. KG</p>
<p className="text-sm text-fg-muted">
Littwin Systemtechnik GmbH & Co. KG
</p>
</div>
<div className="flex flex-row space-x-2 items-center">
<Icon icon="charm:phone" className="text-xl text-accent" />
@@ -70,14 +72,21 @@ function Footer() {
</div>
<div className="flex flex-row space-x-2 items-center">
<Icon icon="mdi:email-outline" className="text-xl text-accent" />
<p className="text-sm text-fg-muted">kontakt@littwin-systemtechnik.de</p>
<p className="text-sm text-fg-muted">
kontakt@littwin-systemtechnik.de
</p>
</div>
<div
className="flex flex-row space-x-2 cursor-pointer items-center group"
onClick={() => setShowSlider(true)}
>
<Icon icon="bi:book" className="text-xl text-accent group-hover:brightness-110 transition" />
<p className="text-sm text-fg-muted group-hover:text-[var(--color-fg)] transition">Handbücher</p>
<Icon
icon="bi:book"
className="text-xl text-accent group-hover:brightness-110 transition"
/>
<p className="text-sm text-fg-muted group-hover:text-[var(--color-fg)] transition">
Handbücher
</p>
</div>
</div>
@@ -88,7 +97,9 @@ function Footer() {
}`}
>
<div className="p-4 flex justify-between items-center border-b border-base">
<h3 className="text-base font-semibold text-[var(--color-fg)]">PDF Handbücher</h3>
<h3 className="text-base font-semibold text-[var(--color-fg)]">
PDF Handbücher
</h3>
<button
className="text-[var(--color-muted)] hover:text-[var(--color-fg)] transition"
onClick={() => setShowSlider(false)}