mmintel/mb-grid-solutions.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 01:06:56 +01:00
parent 912e430725
commit 510e1d5332
5 changed files with 135 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/Layout.tsx
View File

@@ -35,7 +35,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
const navLinks = [
{ href: '/', label: 'Startseite', icon: Home },
{ href: '/ueber-uns', label: 'Über uns', icon: Info },
{ href: '/kontakt', label: 'Kontakt', icon: Mail },
];
return (
@@ -45,12 +44,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
animate={{ opacity: 1 }}
transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${
isScrolled
? 'bg-white/80 backdrop-blur-lg border-b border-slate-200'
: 'bg-gradient-to-b from-white/50 to-transparent'
isScrolled
? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm'
: 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
}`}
>
<div className="container-custom flex justify-between items-center w-full">
<div className="container-custom flex justify-between items-center w-full relative z-10">
<Link
href="/"
className="relative z-10 flex items-center group"
@@ -65,18 +64,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
</Link>
{/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-1" aria-label="Hauptnavigation">
<nav className="hidden md:flex items-center gap-8" aria-label="Hauptnavigation">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
className={`relative px-2 py-1 text-sm font-bold tracking-tight transition-all group ${
isActive(link.href)
? 'text-accent bg-accent/5'
: `${isScrolled ? 'text-slate-600' : 'text-slate-900'} hover:text-primary hover:bg-slate-50`
? 'text-primary'
: `${isScrolled ? 'text-slate-600' : 'text-slate-900'} hover:text-primary`
}`}
>
{link.label}
<span className={`absolute -bottom-1 left-0 w-full h-0.5 bg-accent transition-transform duration-300 origin-left ${isActive(link.href) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'}`} />
</Link>
))}
<Link
@@ -105,7 +105,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
className="fixed inset-0 z-[90] bg-white pt-24 px-6 md:hidden"
className="fixed inset-0 z-[90] bg-white pt-32 px-6 md:hidden"
>
<nav className="flex flex-col gap-4">
{navLinks.map((link) => (
@@ -147,7 +147,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
<ArrowUp size={20} strokeWidth={2.5} />
</button>
<motion.footer
<motion.footer
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
@@ -179,6 +179,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
{link.label}
</Link>
))}
<Link href="/kontakt" className="hover:text-accent transition-colors">Kontakt</Link>
</nav>
</div>