fix: ui component updates and project formatting

components/home/CTA.tsx

@@ -7,7 +7,7 @@ export default function CTA({ data }: { data?: any }) {
   const locale = useLocale();
 
   return (
-    <Section className="bg-primary text-white py-32 relative overflow-hidden">
+    <Section className="bg-primary text-white py-16 md:py-32 relative overflow-hidden">
       <div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
       <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
 

components/home/Experience.tsx

@@ -7,7 +7,7 @@ export default function Experience({ data }: { data?: any }) {
   const t = useTranslations('Home.experience');
 
   return (
-    <Section className="relative py-32 md:py-48 overflow-hidden text-white">
+    <Section className="relative py-16 md:py-48 overflow-hidden text-white">
       <div className="absolute inset-0 z-0">
         <Image
           src="/uploads/2024/12/1694273920124-copy-2.webp"

components/home/GallerySection.tsx

@@ -24,13 +24,13 @@ export default function GallerySection({ data }: { data?: any }) {
   const lightboxIndex = photoParam ? parseInt(photoParam, 10) : 0;
 
   return (
-    <Section className="bg-white text-white py-32">
+    <Section className="bg-white text-white py-16 md:py-32">
       <Container>
         <Heading level={2} subtitle={data?.subtitle || t('subtitle')} align="center">
           {data?.title || t('title')}
         </Heading>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8">
           {images.map((src, idx) => (
             <button
               key={idx}

components/home/Hero.tsx

@@ -87,7 +87,7 @@ export default function Hero({ data }: { data?: any }) {
 
   return (
     <>
-      <Section key={`home-hero-${pathname}`} className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
+      <Section key={`home-hero-${pathname}`} className="relative min-h-[75vh] md:min-h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
         <Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none">
           <div className="max-w-5xl mx-auto md:mx-0">
             <div>
@@ -199,7 +199,7 @@ export default function Hero({ data }: { data?: any }) {
           </div>
         </Container>
 
-        <div className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none animate-in fade-in zoom-in-95 duration-1000 ease-out fill-mode-both">
+        <div className="relative md:absolute inset-0 z-0 w-full h-[35vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none animate-in fade-in zoom-in-95 duration-1000 ease-out fill-mode-both">
           <HeroIllustration />
         </div>
 

components/home/MeetTheTeam.tsx

@@ -9,7 +9,7 @@ export default function MeetTheTeam({ data }: { data?: any }) {
   const locale = useLocale();
 
   return (
-    <Section className="relative py-32 md:py-48 overflow-hidden">
+    <Section className="relative py-16 md:py-48 overflow-hidden">
       <div className="absolute inset-0 z-0">
         <Image
           src="/uploads/2024/12/DSC08036-Large.webp"
@@ -31,7 +31,7 @@ export default function MeetTheTeam({ data }: { data?: any }) {
 
           <div className="relative mb-12">
             <div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
-            <p className="text-xl md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
+            <p className="text-lg md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
               "{data?.description || t('description')}"
             </p>
           </div>

components/home/VideoSection.tsx

@@ -27,7 +27,7 @@ export default function VideoSection({ data }: { data?: any }) {
   }, []);
 
   return (
-    <section ref={sectionRef} className="relative h-[70vh] overflow-hidden bg-primary">
+    <section ref={sectionRef} className="relative h-[50vh] md:h-[70vh] overflow-hidden bg-primary">
       {isVisible && (
         <video className="w-full h-full object-cover opacity-60" autoPlay muted loop playsInline>
           <source