Bob AI: In the 'Our Work' (portfolio) section, add a project name la

Merge version_5_1780322825608 into main

src/pages/HomePage.tsx

@@ -6,6 +6,7 @@ import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards
 import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 import ScrollReveal from "@/components/ui/ScrollReveal";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
 
 export default function HomePage() {
   return (
@@ -51,7 +52,7 @@ export default function HomePage() {
   <div id="about" data-section="about">
     <SectionErrorBoundary name="about">
       <section className="bg-background flex flex-col items-center justify-center text-center px-6">
-        <div className="max-w-content-width mx-auto">
+        <div className="w-full max-w-content-width mx-auto">
           <ScrollReveal variant="slide-up">
             <h2 className="text-3xl md:text-5xl font-bold text-foreground tracking-tight">
               Your Trusted Partner for Outdoor Beauty
@@ -103,7 +104,7 @@ export default function HomePage() {
   <div id="portfolio" data-section="portfolio">
     <SectionErrorBoundary name="portfolio">
       <section className="bg-background relative">
-        <div className="max-w-content-width mx-auto px-6">
+        <div className="w-full max-w-content-width mx-auto px-6">
           <div className="flex flex-col items-center text-center">
             <ScrollReveal variant="slide-up">
               <div className="inline-flex items-center rounded-full border border-primary-cta/20 bg-primary-cta/10 px-3 py-1 text-sm font-medium text-primary-cta mb-4">
@@ -156,22 +157,24 @@ export default function HomePage() {
                 className: "md:col-span-1 md:row-span-1"
               },
             ].map((item, i) => (
-              <ScrollReveal 
-                key={i} 
-                variant="fade-blur" 
-                delay={i * 0.1} 
-                className={`relative group overflow-hidden rounded-theme ${item.className ||''}`}
-              >
-                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10 opacity-80 group-hover:opacity-100 transition-opacity duration-300" />
-                <img 
-                  src={item.imageSrc} 
-                  alt={item.title}
-                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-                />
-                <div className="absolute bottom-0 left-0 right-0 p-6 z-20">
-                  <h3 className="text-white text-lg md:text-xl font-bold translate-y-2 group-hover:translate-y-0 transition-transform duration-300">{item.title}</h3>
-                </div>
-              </ScrollReveal>
+              <div key={i} className={item.className}>
+                <ScrollReveal 
+                  variant="fade-blur" 
+                  delay={i * 0.1} 
+                  className="w-full h-full"
+                >
+                  <div className="relative group overflow-hidden rounded-lg shadow-lg w-full h-full">
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent z-10 opacity-80 group-hover:opacity-100 transition-opacity duration-300" />
+                    <ImageOrVideo 
+                      imageSrc={item.imageSrc} 
+                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                    />
+                    <div className="absolute bottom-0 left-0 right-0 p-6 z-20">
+                      <h3 className="text-white text-lg md:text-xl font-bold translate-y-2 group-hover:translate-y-0 transition-transform duration-300">{item.title}</h3>
+                    </div>
+                  </div>
+                </ScrollReveal>
+              </div>
             ))}
           </div>
         </div>