51 lines
1.0 KiB
JavaScript
51 lines
1.0 KiB
JavaScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const Section = ({
|
|
children,
|
|
className = "",
|
|
background = "dark",
|
|
padding = "large",
|
|
animate = true
|
|
}) => {
|
|
const paddingClasses = {
|
|
small: "py-12 px-6",
|
|
medium: "py-16 px-6",
|
|
large: "py-24 px-6",
|
|
xlarge: "py-32 px-6"
|
|
};
|
|
|
|
const backgroundClasses = {
|
|
dark: "bg-black",
|
|
darker: "bg-gray-900",
|
|
gradient: "bg-gradient-to-br from-gray-900 to-black",
|
|
transparent: "bg-transparent"
|
|
};
|
|
|
|
const content = (
|
|
<section className={`${backgroundClasses[background]} ${paddingClasses[padding]} ${className}`}>
|
|
<div className="max-w-7xl mx-auto">
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
if (animate) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
>
|
|
{content}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
export default Section;
|
|
|