Thatsaphorn Atchariyaphap
d9ff535ac0
New Project Structure: - Created reusable UI components (ServiceCard, AnimatedSection, SectionTitle) - Split large components into smaller, focused ones - Extracted shared hooks for common functionality - Organized constants into separate files Key Improvements: - Hooks: useScrollNavigation, useScrollToSection, useCookieSettings - UI Components: Modular components for consistent styling and behavior - Constants: Centralized data management (ServicesData, NavigationData) - Component Split: Navbar, Hero, and Footer broken into logical sub-components
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface ServiceCardProps {
|
|
title: string;
|
|
description: string;
|
|
bullets: string[];
|
|
index: number;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
export const ServiceCard = ({ title, description, bullets, index, children }: ServiceCardProps) => {
|
|
return (
|
|
<motion.div
|
|
className="flex flex-col justify-between h-full p-6 rounded-3xl border bg-muted text-foreground"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.4, delay: index * 0.1 }}
|
|
whileHover={{
|
|
scale: 1.03,
|
|
boxShadow: '0px 12px 30px rgba(0, 0, 0, 0.08)',
|
|
}}
|
|
>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2">{title}</h3>
|
|
<p className="text-muted-foreground mb-4">{description}</p>
|
|
<ul className="space-y-3">
|
|
{bullets.map((point, i) => (
|
|
<li key={i} className="flex items-start gap-2">
|
|
<ChevronRight className="w-4 h-4 text-primary mt-1" />
|
|
<span className="text-sm text-foreground">{point}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{children && <div className="mt-4">{children}</div>}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}; |