bender/9e9a2f04-c3bd-42f9-a700-6ac290b329fb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_5_1779313117862 into main #3

Merged
bender merged 1 commits from version_5_1779313117862 into main 2026-05-20 21:40:01 +00:00
Conversation 0 Commits 1 Files Changed 2 +43 -7
2 changed files with 43 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/custom/ImageGalleryGrid.tsx
View File

@@ -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>
))}

3
src/pages/HomePage.tsx
View File

@@ -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",