Vula Builder
63 lines
3.2 KiB
TypeScript
63 lines
3.2 KiB
TypeScript
import Image from "next/image"
|
||
import Link from "next/link"
|
||
import Button from "@/components/ui/Button"
|
||
|
||
export default function CaseStudiesSection() {
|
||
const caseStudies = [
|
||
{
|
||
id: "1",
|
||
title: "Commercial Real Estate Acquisition – R120M Portfolio",
|
||
description: "Represented a property developer in acquiring a mixed-use portfolio in Sandton, navigating complex zoning regulations and financing.",
|
||
imageUrl: "https://images.pexels.com/photos/16282318/pexels-photo-16282318.jpeg?auto=compress&cs=tinysrgb&h=350",
|
||
},
|
||
{
|
||
id: "2",
|
||
title: "Shareholder Dispute – Tech Startup Exit",
|
||
description: "Achieved a favourable buy-out for minority shareholders in a high-growth tech company, preserving value through strategic negotiation.",
|
||
imageUrl: "https://images.pexels.com/photos/9700836/pexels-photo-9700836.jpeg?auto=compress&cs=tinysrgb&h=350",
|
||
},
|
||
{
|
||
id: "3",
|
||
title: "Cross-Border Merger – Mining Sector",
|
||
description: "Advised on a cross-border merger between a South African mining firm and an Australian partner, handling regulatory approvals and BEE compliance.",
|
||
imageUrl: "https://images.pexels.com/photos/8939052/pexels-photo-8939052.jpeg?auto=compress&cs=tinysrgb&h=350",
|
||
},
|
||
]
|
||
|
||
return (
|
||
<section data-vula-section="casestudies" id="case-studies" className="py-20 bg-white">
|
||
<div className="container mx-auto px-4 max-w-7xl">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl md:text-4xl font-serif italic text-[#000080] mb-4">Client Success Stories</h2>
|
||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||
Real results from our corporate, real estate, and litigation practice.
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{caseStudies.map((cs) => (
|
||
<div key={cs.id} className="group relative overflow-hidden rounded-xl shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] transition-all duration-200 ease-out">
|
||
<div className="aspect-video overflow-hidden">
|
||
<Image
|
||
src={cs.imageUrl}
|
||
alt={cs.title}
|
||
width={600}
|
||
height={400}
|
||
className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500 ease-out"
|
||
/>
|
||
</div>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
|
||
<h3 className="text-white font-semibold text-lg mb-2">{cs.title}</h3>
|
||
<p className="text-white/80 text-sm mb-3 line-clamp-2">{cs.description}</p>
|
||
<Link href={"/case-studies/" + cs.id}>
|
||
<Button variant="ghost" size="sm" className="text-white underline-offset-4 hover:underline bg-transparent border border-white/30 hover:bg-white/10">
|
||
Read Full Case Study
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
} |