mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

hero on mobile

Browse Source
This commit is contained in:
Marc Mintel
2026-01-27 00:49:19 +01:00
parent 5c71e9a064
commit f54d8277b3
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/home/Hero.tsx
View File

@@ -11,17 +11,8 @@ export default function Hero() {
const t = useTranslations('Home.hero');
return (
<Section className="relative min-h-[85vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
<motion.div
className="absolute inset-0 z-0"
initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
>
<HeroIllustration />
</motion.div>
<Container className="relative z-10 text-left text-white w-full">
<Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
<Container className="relative z-10 text-left text-white w-full order-1">
<motion.div
className="max-w-5xl"
initial="hidden"
@@ -73,6 +64,15 @@ export default function Hero() {
</motion.div>
</motion.div>
</Container>
<motion.div
className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-2 mt-8 md:mt-0"
initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
>
<HeroIllustration />
</motion.div>
<motion.div
className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block"