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

fix header reveal
All checks were successful
Build & Deploy MB Grid Solutions / build-and-deploy (push) Successful in 1m29s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 17:23:32 +01:00
parent 0eaa47e2c6
commit 765cfd4c69
2 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Layout.tsx
View File

@@ -42,7 +42,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
return ( return (
<div className="min-h-screen flex flex-col font-sans"> <div className="min-h-screen flex flex-col font-sans">
<Reveal direction="down" fullWidth className="fixed top-0 left-0 right-0 z-[100]"> <Reveal direction="down" fullWidth trigger="mount" className="fixed top-0 left-0 right-0 z-[100]">
<header <header
className={`transition-all duration-300 flex items-center py-1 ${ className={`transition-all duration-300 flex items-center py-1 ${
isScrolled isScrolled
@@ -56,7 +56,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
className="relative z-10 flex items-center group" className="relative z-10 flex items-center group"
aria-label="MB Grid Solutions - Zur Startseite" aria-label="MB Grid Solutions - Zur Startseite"
> >
<div className={`relative transition-all duration-300 ${isScrolled ? 'h-[50px] md:h-[80px] w-[120px] md:w-[200px] my-[-5px]' : 'h-[80px] md:h-[140px] w-[180px] md:w-[320px] my-[-10px] md:my-[-20px]'}`}> <div className={`relative transition-all duration-300 ${isScrolled ? 'h-[50px] md:h-[80px] w-[120px] md:w-[200px] mt-0 mb-[-10px]' : 'h-[80px] md:h-[140px] w-[180px] md:w-[320px] mt-2 md:mt-4 mb-[-20px] md:mb-[-40px]'}`}>
<Image <Image
src="/assets/logo.png" src="/assets/logo.png"
alt="MB Grid Solutions" alt="MB Grid Solutions"

33
components/Reveal.tsx
View File

@@ -9,14 +9,18 @@ interface RevealProps {
delay?: number; delay?: number;
direction?: 'up' | 'down' | 'left' | 'right'; direction?: 'up' | 'down' | 'left' | 'right';
fullWidth?: boolean; fullWidth?: boolean;
viewportMargin?: string;
trigger?: 'inView' | 'mount';
} }
export const Reveal = ({ export const Reveal = ({
children, children,
className = '', className = '',
delay = 0, delay = 0,
direction = 'up', direction = 'up',
fullWidth = false fullWidth = false,
viewportMargin = "-50px",
trigger = 'inView'
}: RevealProps) => { }: RevealProps) => {
const directions = { const directions = {
up: { y: 30 }, up: { y: 30 },
@@ -30,14 +34,19 @@ export const Reveal = ({
<m.div <m.div
initial={{ initial={{
opacity: 0, opacity: 0,
...directions[direction] ...directions[direction]
}} }}
whileInView={{ animate={trigger === 'mount' ? {
opacity: 1, opacity: 1,
x: 0, x: 0,
y: 0 y: 0
}} } : undefined}
viewport={{ once: true, margin: "-50px" }} whileInView={trigger === 'inView' ? {
opacity: 1,
x: 0,
y: 0
} : undefined}
viewport={trigger === 'inView' ? { once: true, margin: viewportMargin } : undefined}
transition={{ transition={{
type: "spring", type: "spring",
stiffness: 50, stiffness: 50,