components

components/home/Hero.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTranslations } from 'next-intl';
-import { Container, Button } from '@/components/ui';
+import { Container, Button, Section, Heading } from '@/components/ui';
 import Scribble from '@/components/Scribble';
 import HeroIllustration from './HeroIllustration';
 
@@ -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-dark">
+    <Section className="relative h-[70vh] md:h-[90vh] flex items-center justify-center overflow-hidden bg-primary-dark py-0 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">
-          <h1 className="text-4xl md:text-7xl lg:text-8xl font-extrabold mb-4 md:mb-8 tracking-tight leading-[1.05] max-w-[15ch] md:max-w-none">
+          <Heading level={1} className="mb-4 md:mb-8 tracking-tight leading-[1.05] max-w-[15ch] md:max-w-none">
             {t.rich('title', {
               green: (chunks) => (
                 <span className="relative inline-block">
@@ -22,7 +22,7 @@ export default function Hero() {
                 </span>
               )
             })}
-          </h1>
+          </Heading>
           <p className="text-lg md:text-2xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
             {t('subtitle')}
           </p>
@@ -43,6 +43,6 @@ export default function Hero() {
           <div className="w-1 h-2 bg-white rounded-full" />
         </div>
       </div>
-    </section>
+    </Section>
   );
 }