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-25 13:38:14 +01:00
parent a0cfa8ef62
commit 4dbf566f0c
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/home/Hero.tsx
View File

@@ -8,12 +8,12 @@ export default function Hero() {
const t = useTranslations('Home.hero');
return (
<Section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary py-0 md:py-0 lg:py-0">
<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">
<HeroIllustration />
<Container className="relative z-10 text-left text-white w-full">
<div className="max-w-5xl animate-slide-up">
<Heading level={1} className="mb-4 md:mb-8 max-w-[15ch] md:max-w-none text-white">
<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">
{t.rich('title', {
green: (chunks) => (
<span className="relative inline-block">
@@ -23,15 +23,15 @@ export default function Hero() {
)
})}
</Heading>
<p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
<p className="text-lg md:text-xl text-white/90 leading-relaxed max-w-2xl mb-10 md:mb-12">
{t('subtitle')}
</p>
<div className="flex flex-col md:flex-row gap-3 md:gap-6">
<Button href="/contact" variant="accent" size="lg" className="group w-full md:w-auto md:h-16 md:px-10 md:text-lg">
<div className="flex flex-col sm:flex-row gap-4 md:gap-6">
<Button href="/contact" variant="accent" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg">
{t('cta')}
<span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
</Button>
<Button href="/products" variant="ghost" size="lg" className="group w-full md:w-auto text-white hover:bg-white/10 md:bg-white md:text-saturated md:hover:bg-neutral-light md:h-16 md:px-10 md:text-lg">
<Button href="/products" variant="ghost" size="lg" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg text-white border-white/20 hover:bg-white/10 md:bg-white md:text-saturated md:hover:bg-neutral-light md:border-none">
{t('exploreProducts')}
</Button>
</div>

2
components/home/HeroIllustration.tsx
View File

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