93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
// components/PortfolioResultsImpact.tsx
|
|
import { motion } from "framer-motion";
|
|
import { CheckCircle } from "lucide-react";
|
|
|
|
interface Metric {
|
|
value: string;
|
|
label: string;
|
|
description: string;
|
|
}
|
|
|
|
interface PortfolioResultsImpactProps {
|
|
title: string;
|
|
subtitle: string;
|
|
metrics: Metric[];
|
|
achievements: string[];
|
|
}
|
|
|
|
export function PortfolioResultsImpact({
|
|
title,
|
|
subtitle,
|
|
metrics,
|
|
achievements,
|
|
}: PortfolioResultsImpactProps) {
|
|
return (
|
|
<section className="py-24 bg-background">
|
|
<div className="container mx-auto px-4 lg:px-6">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-6xl mx-auto"
|
|
>
|
|
{/* Heading */}
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
{title}
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Metrics */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
|
{metrics.map((metric, index) => (
|
|
<motion.div
|
|
key={metric.label}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 text-center"
|
|
>
|
|
<div className="text-3xl font-bold text-accent mb-2">
|
|
{metric.value}
|
|
</div>
|
|
<div className="text-lg font-semibold text-foreground mb-2">
|
|
{metric.label}
|
|
</div>
|
|
<div className="text-muted-foreground text-sm">
|
|
{metric.description}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Achievements */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="bg-background/50 rounded-2xl p-8 border border-border/50"
|
|
>
|
|
<h3 className="text-2xl font-semibold text-foreground mb-6">
|
|
Technical Achievements
|
|
</h3>
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
{achievements.map((achievement, index) => (
|
|
<div key={index} className="flex items-start gap-3">
|
|
<CheckCircle className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
|
|
<span className="text-muted-foreground">{achievement}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|