From a75c14f69cd36cca65a56260d7a3a03fe70f74a4 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 20 May 2026 21:39:21 +0000
Subject: [PATCH] Updated ImageGalleryGrid styling and added
 tag/title/description props.

---
 src/components/custom/ImageGalleryGrid.tsx | 47 ++++++++++++++++++----
 src/pages/HomePage.tsx                     |  3 ++
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/components/custom/ImageGalleryGrid.tsx b/src/components/custom/ImageGalleryGrid.tsx
index d95c7d5..fb0d665 100644
--- a/src/components/custom/ImageGalleryGrid.tsx
+++ b/src/components/custom/ImageGalleryGrid.tsx
@@ -8,30 +8,63 @@ type ImageProps = {
 };
 
 type Props = {
+  tag?: string;
+  title: string;
+  description?: string;
   images: ImageProps[];
 };
 
-export default function ImageGalleryGrid({ images }: Props) {
+export default function ImageGalleryGrid({ tag, title, description, 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 md:py-20"
+      className="container mx-auto py-16 px-4 md:py-24"
     >
-      <h2 className="text-4xl font-bold text-center mb-8 md:text-5xl lg:text-6xl text-foreground">Our Industries</h2>
+      {tag && (
+        <motion.p
+          initial={{ opacity: 0, y: 10 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.2 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+          className="text-center text-sm font-medium text-primary mb-2"
+        >
+          {tag}
+        </motion.p>
+      )}
+      <motion.h2
+        initial={{ opacity: 0, y: 10 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.2 }}
+        transition={{ duration: 0.6, delay: 0.2 }}
+        className="text-4xl font-bold text-center mb-4 md:text-5xl lg:text-6xl text-foreground"
+      >
+        {title}
+      </motion.h2>
+      {description && (
+        <motion.p
+          initial={{ opacity: 0, y: 10 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.2 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+          className="text-center text-lg text-muted-foreground mb-12"
+        >
+          {description}
+        </motion.p>
+      )}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
         {images.map((image, index) => (
-          <div key={index} className="relative group overflow-hidden rounded-lg shadow-lg">
+          <div key={index} className="relative group overflow-hidden rounded-theme 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 className="absolute inset-0 bg-gradient-to-t from-background/80 via-background/60 to-transparent p-4 flex flex-col justify-end">
+              <h3 className="text-foreground text-xl font-semibold">{image.title}</h3>
+              <p className="text-muted-foreground text-sm mt-1">{image.description}</p>
             </div>
           </div>
         ))}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index b5e2ced..52e0199 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -34,6 +34,9 @@ export default function HomePage() {
   <div id="industries" data-section="industries">
     <SectionErrorBoundary name="industries">
       <ImageGalleryGrid
+        tag="Our Practice Areas"
+        title="Explore Our Legal Expertise"
+        description="We provide comprehensive legal services across a wide range of practice areas, ensuring expert guidance for every client."
         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",
-- 
2.49.1