init

apps/website/src/components/BusinessImpact.tsx

@@ -0,0 +1,82 @@
+"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>
+  );
+};