animations

components/home/Hero.tsx

@@ -2,26 +2,14 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import { Container, Button } from '@/components/ui';
 import Scribble from '@/components/Scribble';
+import HeroIllustration from './HeroIllustration';
 
 export default function Hero() {
   const t = useTranslations('Home.hero');
 
   return (
     <section className="relative h-[90vh] flex items-center justify-center overflow-hidden bg-primary-dark">
-      <div className="absolute inset-0 z-0">
-        <video 
-          className="w-full h-full object-cover scale-105 animate-slow-zoom"
-          autoPlay 
-          muted 
-          loop 
-          playsInline
-          poster="/uploads/2025/02/Still-2025-02-10-104337_1.1.1.webp"
-        >
-          <source src="/uploads/2025/02/header.webm" type="video/webm" />
-          <source src="/uploads/2025/02/header.mp4" type="video/mp4" />
-        </video>
-        <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/40 via-primary-dark/20 to-primary-dark/60" />
-      </div>
+      <HeroIllustration />
       
       <Container className="relative z-10 text-left text-white w-full">
         <div className="max-w-5xl animate-slide-up">
@@ -41,7 +29,7 @@ export default function Hero() {
               <span className="ml-3 transition-transform group-hover:translate-x-1">&rarr;</span>
             </Button>
             <Button href="/products" variant="white" size="xl" className="group">
-              Explore Products
+              {t('exploreProducts')}
             </Button>
           </div>
         </div>