57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { m } from 'framer-motion';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface SectionProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
background?: 'white' | 'cream' | 'dark';
|
|
padding?: 'sm' | 'md' | 'lg' | 'xl';
|
|
id?: string;
|
|
}
|
|
|
|
export default function Section({
|
|
children,
|
|
className = '',
|
|
background = 'white',
|
|
padding = 'lg',
|
|
id
|
|
}: SectionProps) {
|
|
const backgroundClasses = {
|
|
white: 'bg-white',
|
|
cream: 'bg-[#F8F6F5]',
|
|
dark: 'bg-[#3C2A21]'
|
|
};
|
|
|
|
const paddingClasses = {
|
|
sm: 'py-6 md:py-8',
|
|
md: 'py-8 md:py-12',
|
|
lg: 'py-12 md:py-16 lg:py-20',
|
|
xl: 'py-16 md:py-24 lg:py-32'
|
|
};
|
|
|
|
const classes = `${backgroundClasses[background]} ${paddingClasses[padding]} ${className} section-premium`;
|
|
|
|
return (
|
|
<section id={id} className={classes}>
|
|
<m.div
|
|
initial={{ opacity: 0, y: 60 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{
|
|
duration: 1.2,
|
|
ease: [0.25, 0.46, 0.45, 0.94],
|
|
delay: 0.1
|
|
}}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"
|
|
>
|
|
{/* Premium section decoration */}
|
|
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-16 md:w-24 h-1 bg-gradient-to-r from-transparent via-[#8B4513]/30 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500" />
|
|
|
|
{children}
|
|
</m.div>
|
|
</section>
|
|
);
|
|
}
|
|
|