You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import * as React from "react"
|
|
import { motion } from "framer-motion"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface SectionProps {
|
|
id: string
|
|
className?: string
|
|
containerClassName?: string
|
|
eyebrow?: string
|
|
title?: string
|
|
description?: string
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export function Section({
|
|
id,
|
|
className,
|
|
containerClassName,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
children,
|
|
}: SectionProps) {
|
|
return (
|
|
<section id={id} className={cn("scroll-mt-20 py-20 md:py-28", className)}>
|
|
<div className={cn("mx-auto w-full max-w-6xl px-5 md:px-8", containerClassName)}>
|
|
{(eyebrow || title || description) && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 16 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-80px" }}
|
|
transition={{ duration: 0.5, ease: "easeOut" }}
|
|
className="mb-12 max-w-2xl"
|
|
>
|
|
{eyebrow && (
|
|
<span className="text-sm font-semibold uppercase tracking-widest text-brand">
|
|
{eyebrow}
|
|
</span>
|
|
)}
|
|
{title && (
|
|
<h2 className="mt-2 text-3xl font-semibold tracking-tight text-foreground md:text-4xl">
|
|
{title}
|
|
</h2>
|
|
)}
|
|
{description && (
|
|
<p className="mt-4 text-base leading-relaxed text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|