82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
|
|
interface ImpactItem {
|
|
title: string;
|
|
description: string;
|
|
stat1Label: string;
|
|
stat1Value: string;
|
|
stat2Label: string;
|
|
stat2Value: string;
|
|
image: string;
|
|
}
|
|
|
|
interface BusinessImpactProps {
|
|
items: ImpactItem[];
|
|
}
|
|
|
|
export const BusinessImpact: React.FC<BusinessImpactProps> = ({ items }) => {
|
|
const [activeIndex, setActiveIndex] = React.useState(0);
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
<div className="lg:col-span-5 space-y-4">
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`p-6 rounded-xl cursor-pointer transition-all duration-500 border ${
|
|
activeIndex === index
|
|
? 'bg-ui-dark/90 border-primary shadow-lg shadow-primary/10'
|
|
: 'bg-ui-dark/40 border-ui-border hover:border-ui-border/80'
|
|
}`}
|
|
onClick={() => setActiveIndex(index)}
|
|
>
|
|
<h4 className={`text-xl font-semibold mb-2 transition-colors ${
|
|
activeIndex === index ? 'text-white' : 'text-neutral-gray'
|
|
}`}>
|
|
{item.title}
|
|
</h4>
|
|
<p className={`text-sm leading-relaxed transition-colors ${
|
|
activeIndex === index ? 'text-neutral-light' : 'text-neutral-gray/60'
|
|
}`}>
|
|
{activeIndex === index ? item.description : item.description.substring(0, 80) + '...'}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="lg:col-span-7 relative aspect-video rounded-2xl overflow-hidden border border-ui-border shadow-2xl group">
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`absolute inset-0 transition-all duration-700 ease-in-out ${
|
|
activeIndex === index ? 'opacity-100 scale-100' : 'opacity-0 scale-105 pointer-events-none'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={item.image}
|
|
alt={item.title}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
|
|
<div className="absolute inset-0 p-8 flex flex-col justify-end">
|
|
<div className="grid grid-cols-2 gap-8 max-w-md">
|
|
<div>
|
|
<div className="text-3xl font-bold text-primary mb-1">{item.stat1Value}</div>
|
|
<div className="text-xs text-neutral-gray uppercase tracking-wider">{item.stat1Label}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold text-primary mb-1">{item.stat2Value}</div>
|
|
<div className="text-xs text-neutral-gray uppercase tracking-wider">{item.stat2Label}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |