Remove hero gap below header
Drop min-h-screen vertical centering on hero; use compact top padding so copy and photos sit directly under the nav in light and dark mode. Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Binary file not shown.
+3
-6
@@ -810,11 +810,10 @@ function Hero() {
|
||||
offset: ['start start', 'end start']
|
||||
})
|
||||
|
||||
const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '50%'])
|
||||
const contentY = useTransform(scrollYProgress, [0, 1], ['0%', '100%'])
|
||||
const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '30%'])
|
||||
|
||||
return (
|
||||
<section ref={containerRef} className="relative isolate overflow-hidden min-h-screen flex items-center">
|
||||
<section ref={containerRef} className="hero-section relative isolate overflow-hidden">
|
||||
{/* Enhanced 3D Background Layers */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-br from-[var(--mim-cream)] via-white to-secondary-50/40 dark:from-gray-900/30 dark:via-gray-800/30 dark:to-gray-900/30"
|
||||
@@ -843,10 +842,8 @@ function Hero() {
|
||||
<Floating3DShapes />
|
||||
</motion.div>
|
||||
|
||||
{/* Content Layer with Parallax */}
|
||||
<motion.div
|
||||
className="mx-auto grid max-w-7xl items-center gap-16 px-4 py-20 sm:px-6 lg:grid-cols-12 lg:gap-8 lg:py-28 lg:px-8 relative z-10"
|
||||
style={{ y: contentY }}
|
||||
className="mx-auto grid max-w-7xl items-start gap-10 px-4 pb-14 pt-6 sm:px-6 sm:pt-8 lg:grid-cols-12 lg:gap-10 lg:px-8 lg:pb-16 lg:pt-10 relative z-10"
|
||||
>
|
||||
<div className="lg:col-span-7">
|
||||
<ParallaxContainer depth={0.3}>
|
||||
|
||||
+8
-3
@@ -219,12 +219,17 @@
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.mim-site-nav {
|
||||
min-height: 5rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
min-height: 4.5rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hero sits flush under sticky header — no full-viewport vertical centering gap */
|
||||
.hero-section {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.nav-brand-link:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user