From 6809a752653400b8569d464faa404f8df0984d96 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 20 May 2026 21:18:39 +0000
Subject: [PATCH] Add custom ImageGalleryGrid component to HomePage.tsx

---
 src/components/custom/ImageGalleryGrid.tsx | 41 +++++++++++++++++++
 src/pages/HomePage.tsx                     | 46 ++++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 src/components/custom/ImageGalleryGrid.tsx

diff --git a/src/components/custom/ImageGalleryGrid.tsx b/src/components/custom/ImageGalleryGrid.tsx
new file mode 100644
index 0000000..e3c31e6
--- /dev/null
+++ b/src/components/custom/ImageGalleryGrid.tsx
@@ -0,0 +1,41 @@
+import { motion } from "motion/react";
+
+type ImageProps = {
+  src: string;
+  alt: string;
+  title: string;
+  description: string;
+};
+
+type Props = {
+  images: ImageProps[];
+};
+
+export default function ImageGalleryGrid({ images }: Props) {
+  return (
+    <motion.section
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.2 }}
+      transition={{ duration: 0.6 }}
+      className="container mx-auto py-12 px-4"
+    >
+      <h2 className="text-4xl font-bold text-center mb-8">Our Industries</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {images.map((image, index) => (
+          <div key={index} className="relative group overflow-hidden rounded-lg shadow-lg">
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/50 to-transparent p-4 flex flex-col justify-end">
+              <h3 className="text-white text-xl font-semibold">{image.title}</h3>
+              <p className="text-white text-sm mt-1">{image.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </motion.section>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 7e60a9c..b5e2ced 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -3,6 +3,7 @@ import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
 import FeaturesLabeledList from '@/components/sections/features/FeaturesLabeledList';
 import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
+import ImageGalleryGrid from '@/components/custom/ImageGalleryGrid';
 import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
 import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
 import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
@@ -30,6 +31,51 @@ export default function HomePage() {
     </SectionErrorBoundary>
   </div>
 
+  <div id="industries" data-section="industries">
+    <SectionErrorBoundary name="industries">
+      <ImageGalleryGrid
+        images={[
+          {
+            src: "https://images.unsplash.com/photo-1521737711867-e3b973753422?q=80&w=2830&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+            alt: "Corporate Law",
+            title: "Corporate Law",
+            description: "Expert legal counsel for businesses of all sizes.",
+          },
+          {
+            src: "https://images.unsplash.com/photo-1516216673867-542010e820e1?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+            alt: "Real Estate Law",
+            title: "Real Estate Law",
+            description: "Navigating complex property transactions and disputes.",
+          },
+          {
+            src: "https://images.unsplash.com/photo-1521737711867-e3b973753422?q=80&w=2830&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+            alt: "Litigation",
+            title: "Litigation",
+            description: "Aggressive representation in court and alternative dispute resolution.",
+          },
+          {
+            src: "https://images.unsplash.com/photo-1516216673867-542010e820e1?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+            alt: "Family Law",
+            title: "Family Law",
+            description: "Compassionate guidance through sensitive family matters.",
+          },
+          {
+            src: "https://images.unsplash.com/photo-1521737711867-e3b973753422?q=80&w=2830&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+            alt: "Criminal Defense",
+            title: "Criminal Defense",
+            description: "Protecting your rights and ensuring fair legal process.",
+          },
+          {
+            src: "https://images.unsplash.com/photo-1516216673867-542010e820e1?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+            alt: "Environmental Law",
+            title: "Environmental Law",
+            description: "Advising on environmental regulations and sustainability.",
+          },
+        ]}
+      />
+    </SectionErrorBoundary>
+  </div>
+
   <div id="about" data-section="about">
     <SectionErrorBoundary name="about">
           <AboutTextSplit
-- 
2.49.1