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

hero
All checks were successful
Build & Deploy KLZ Cables / build-and-deploy (push) Successful in 3m35s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-27 08:21:55 +01:00
parent 05b10018a6
commit 8eea94ceda
2 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/home/Hero.tsx
View File

@@ -1,10 +1,9 @@
'use client'; 'use client';
import React from 'react'; import Scribble from '@/components/Scribble';
import { Button, Container, Heading, Section } from '@/components/ui';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { Container, Button, Section, Heading } from '@/components/ui';
import Scribble from '@/components/Scribble';
import HeroIllustration from './HeroIllustration'; import HeroIllustration from './HeroIllustration';
export default function Hero() { export default function Hero() {
@@ -20,7 +19,7 @@ export default function Hero() {
variants={containerVariants} variants={containerVariants}
> >
<motion.div variants={headingVariants}> <motion.div variants={headingVariants}>
<Heading level={1} className="mb-6 md:mb-8 max-w-[12ch] md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl"> <Heading level={1} className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl">
{t.rich('title', { {t.rich('title', {
green: (chunks) => ( green: (chunks) => (
<span className="relative inline-block"> <span className="relative inline-block">
@@ -66,7 +65,7 @@ export default function Hero() {
</Container> </Container>
<motion.div <motion.div
className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-8 md:mb-0" className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none md:mb-0 mt-32 scale-[1.2] md:scale-0 -mb-24 md:mt-0 overflow-visible"
initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }} initial={{ opacity: 0, scale: 0.95, filter: 'blur(20px)' }}
animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }} animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }} transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}

10
components/home/HeroIllustration.tsx
View File

@@ -163,11 +163,11 @@ const POWER_LINES = [
export default function HeroIllustration() { export default function HeroIllustration() {
return ( return (
<div className="absolute md:inset-0 z-0 overflow-hidden bg-primary w-full h-full"> <div className="absolute md:inset-0 z-0 overflow-visible bg-primary w-full h-full">
<svg <svg
viewBox="-400 -200 1800 1100" viewBox="400 0 1000 1100"
className="w-full h-full opacity-60 md:opacity-100 scale-[1.2] md:scale-100 translate-x-0" className="w-full h-full opacity-60 md:opacity-100 scale-[1.44] md:scale-100 translate-x-0 overflow-visible"
preserveAspectRatio="xMidYMid slice" preserveAspectRatio="xMidYMid meet"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
@@ -741,7 +741,7 @@ export default function HeroIllustration() {
</g> </g>
</svg> </svg>
<div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/90" /> <div className="absolute inset-0 bg-gradient-to-b from-primary/10 via-transparent to-primary/90 pointer-events-none" />
</div> </div>
); );
} }