From 8eea94ceda8afbb41d2db0f1944d35b1a5b7d01f Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Tue, 27 Jan 2026 08:21:55 +0100
Subject: [PATCH] hero

---
 components/home/Hero.tsx             |  9 ++++-----
 components/home/HeroIllustration.tsx | 10 +++++-----
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
index 5a806ad6..15d55247 100644
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -1,10 +1,9 @@
 '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 { useTranslations } from 'next-intl';
-import { Container, Button, Section, Heading } from '@/components/ui';
-import Scribble from '@/components/Scribble';
 import HeroIllustration from './HeroIllustration';
 
 export default function Hero() {
@@ -20,7 +19,7 @@ export default function Hero() {
           variants={containerVariants}
         >
           <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', {
                 green: (chunks) => (
                   <span className="relative inline-block">
@@ -66,7 +65,7 @@ export default function Hero() {
       </Container>
 
       <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)' }}
         animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
         transition={{ duration: 2.2, ease: 'easeOut', delay: 0.05 }}
diff --git a/components/home/HeroIllustration.tsx b/components/home/HeroIllustration.tsx
index 5e8464b2..8a9e2918 100644
--- a/components/home/HeroIllustration.tsx
+++ b/components/home/HeroIllustration.tsx
@@ -163,11 +163,11 @@ const POWER_LINES = [
 
 export default function HeroIllustration() {
   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
-        viewBox="-400 -200 1800 1100"
-        className="w-full h-full opacity-60 md:opacity-100 scale-[1.2] md:scale-100 translate-x-0"
-        preserveAspectRatio="xMidYMid slice"
+        viewBox="400 0 1000 1100"
+        className="w-full h-full opacity-60 md:opacity-100 scale-[1.44] md:scale-100 translate-x-0 overflow-visible"
+        preserveAspectRatio="xMidYMid meet"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -741,7 +741,7 @@ export default function HeroIllustration() {
 
         </g>
       </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>
   );
 }