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"

4
components/home/HeroIllustration.tsx
View File

@@ -163,10 +163,10 @@ const POWER_LINES = [
export default function HeroIllustration() {
return (
<div className="absolute inset-0 z-0 overflow-hidden bg-primary">
<div className="absolute md:inset-0 z-0 overflow-hidden bg-primary w-full h-full">
<svg
viewBox="-400 -200 1800 1100"
className="w-full h-full opacity-30 md:opacity-100 scale-[2] md:scale-100 translate-x-1/3 md:translate-x-0"
className="w-full h-full opacity-60 md:opacity-100 scale-[1.5] md:scale-100 translate-x-0"
preserveAspectRatio="xMidYMid slice"
fill="none"
xmlns="http://www.w3.org/2000/svg"