src/pages/HomePage.tsx

@@ -13,7 +13,8 @@ import FaqSection from './HomePage/sections/Faq';
 import SocialProofSection from './HomePage/sections/SocialProof';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import GallerySection from './HomePage/sections/Gallery';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -31,6 +32,7 @@ export default function HomePage(): React.JSX.Element {
   <SocialProofSection />
 
   <ContactSection />
+          <GallerySection />
     </>
   );
 }

src/pages/HomePage/sections/Gallery.tsx

@@ -0,0 +1,83 @@
+import { motion } from "motion/react";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import TextAnimation from "@/components/ui/TextAnimation";
+import Tag from "@/components/ui/Tag";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+export default function GallerySection() {
+  const projects = [
+    {
+      title: "Residential Painting",
+      description: "Exterior and interior painting for modern homes.",
+      imageSrc: "https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Commercial Spaces",
+      description: "Durable coatings for high-traffic commercial buildings.",
+      imageSrc: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Industrial Projects",
+      description: "Specialized protective paints for industrial facilities.",
+      imageSrc: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Interior Decor",
+      description: "Premium finishes for elegant interior spaces.",
+      imageSrc: "https://images.unsplash.com/photo-1562663474-6cbb3eaa4d14?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Exterior Facades",
+      description: "Weather-resistant paints for long-lasting exterior beauty.",
+      imageSrc: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&q=80&w=800",
+    },
+    {
+      title: "Custom Finishes",
+      description: "Unique textures and colors tailored to client needs.",
+      imageSrc: "https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&q=80&w=800",
+    }
+  ];
+
+  return (
+    <section data-webild-section="gallery" id="gallery" className="relative w-full py-24 bg-background">
+      <div className="w-content-width mx-auto">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Gallery" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation
+            text="Our Real-Life Projects"
+            variant="fade-blur"
+            tag="h2"
+            gradientText={false}
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+          />
+          <ScrollReveal variant="fade" delay={0.2}>
+            <p className="text-lg text-accent max-w-2xl mx-auto">
+              Take a look at some of the projects we've completed using Comet Paints and Allied Products.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {projects.map((project, index) => (
+            <ScrollReveal variant="fade" key={index} delay={0.1 * index}>
+              <div className="card overflow-hidden group h-full flex flex-col">
+                <div className="relative aspect-[4/3] overflow-hidden">
+                  <ImageOrVideo
+                    imageSrc={project.imageSrc}
+                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                  />
+                </div>
+                <div className="p-6 flex-1 flex flex-col">
+                  <h3 className="text-xl font-semibold text-foreground mb-2">{project.title}</h3>
+                  <p className="text-accent">{project.description}</p>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}