feat: unified container widths and added magnetic mouse pull to corporate background arcs

components/blocks/CompetenceBentoGrid.tsx

@@ -7,6 +7,8 @@ import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
 import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
+import { Container } from '@/components/ui/Container';
+
 interface CompetenceBentoGridProps {
   badge?: string;
   title?: string;
@@ -58,7 +60,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
   if (!isMounted) {
     return (
       <section className="py-24 bg-neutral text-neutral-dark overflow-hidden relative">
-        <div className="container">
+        <Container>
           <div className="flex flex-col md:flex-row justify-between items-end mb-12">
             <div className="max-w-2xl">
               <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
@@ -68,20 +70,20 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
           <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-[220px]">
              {/* Simplified static grid */}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
   return (
     <section className="py-24 bg-neutral text-neutral-dark relative overflow-hidden">
-      <div className="container relative z-10 px-4">
-        <div className="flex flex-col md:flex-row justify-between items-end mb-12">
+      <Container className="relative z-10 px-0 md:px-12 lg:px-16">
+        <div className="flex flex-col md:flex-row justify-between items-end mb-12 px-4 md:px-0">
           <div className="max-w-2xl">
             <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badge}</h2>
             <h3 className="font-heading text-4xl md:text-5xl font-extrabold text-neutral-dark mb-4">{title}</h3>
           </div>
-          <Button href={ctaHref} variant="ghost" className="mt-6 md:mt-0 bg-primary/5 hover:bg-primary/10">
+          <Button href={ctaHref} variant="ghost" className="mt-6 md:mt-0 bg-primary/5 hover:bg-primary/10 mx-4 md:mx-0">
             {ctaLabel}
             <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
           </Button>
@@ -166,7 +168,7 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
             );
           })}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/blocks/HeroVideo.tsx

@@ -55,6 +55,7 @@ export function HeroVideo(props: HeroVideoProps) {
       
       {videoUrl && (
         <video
+          key={videoUrl}
           className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
           src={videoUrl}
           autoPlay