74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
|
// components/PortfolioCoreFeatures.tsx
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import { ReactNode } from "react";
|
||
|
|
import { Card, CardContent } from "@/components/ui/card"; // adjust path as per your project
|
||
|
|
|
||
|
|
interface Feature {
|
||
|
|
icon: ReactNode;
|
||
|
|
title: string;
|
||
|
|
description: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface PortfolioCoreFeaturesProps {
|
||
|
|
title: string;
|
||
|
|
subtitle: string;
|
||
|
|
features: Feature[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PortfolioCoreFeatures({
|
||
|
|
title,
|
||
|
|
subtitle,
|
||
|
|
features,
|
||
|
|
}: PortfolioCoreFeaturesProps) {
|
||
|
|
return (
|
||
|
|
<section className="py-24 bg-card/30">
|
||
|
|
<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"
|
||
|
|
>
|
||
|
|
{/* Section 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>
|
||
|
|
|
||
|
|
{/* Features Grid */}
|
||
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
|
|
{features.map((feature, index) => (
|
||
|
|
<motion.div
|
||
|
|
key={feature.title}
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
>
|
||
|
|
<Card className="h-full bg-card/50 border-border/50 hover:border-accent/30 transition-all duration-300 group">
|
||
|
|
<CardContent className="p-8">
|
||
|
|
<div className="text-accent mb-4 group-hover:scale-110 transition-transform duration-300">
|
||
|
|
{feature.icon}
|
||
|
|
</div>
|
||
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
|
|
{feature.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-muted-foreground leading-relaxed">
|
||
|
|
{feature.description}
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|