104 lines
4.3 KiB
TypeScript
104 lines
4.3 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card } from "@/components/ui/card"
|
|
import { cn } from "@/lib/utils"
|
|
import Link from "next/link"
|
|
|
|
interface FeatureSectionProps {
|
|
title: string
|
|
oversizedTitle: string
|
|
description: string
|
|
ctaText?: string
|
|
reversed?: boolean
|
|
accentColor?: string
|
|
children?: React.ReactNode
|
|
href?: string
|
|
customCTA?: React.ReactNode
|
|
externalLink?: boolean
|
|
}
|
|
|
|
const FeatureSection = ({
|
|
title,
|
|
oversizedTitle,
|
|
description,
|
|
ctaText,
|
|
reversed = false,
|
|
accentColor = "text-primary",
|
|
children,
|
|
href,
|
|
customCTA,
|
|
externalLink = false
|
|
}: FeatureSectionProps) => {
|
|
return (
|
|
<section className="py-12 md:py-16 overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className={cn(
|
|
"flex flex-col lg:flex-row items-center gap-12 lg:gap-16",
|
|
reversed && "lg:flex-row-reverse"
|
|
)}>
|
|
{/* Content */}
|
|
<div className="flex-1 space-y-8 w-full">
|
|
<div className="space-y-2">
|
|
<span aria-hidden="true" className={cn("text-6xl md:text-8xl font-black uppercase tracking-tighter opacity-20", accentColor)}>
|
|
{oversizedTitle}
|
|
</span>
|
|
<h2 className="text-3xl md:text-4xl font-bold tracking-tight -mt-8 md:-mt-12 ml-2">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
|
|
<p className="text-lg md:text-xl text-slate-600 leading-relaxed max-w-xl">
|
|
{description}
|
|
</p>
|
|
|
|
{customCTA ? (
|
|
customCTA
|
|
) : (ctaText && (
|
|
href ? (
|
|
<Button asChild variant="pill" className={cn("px-8 bg-white border-none shadow-xl hover:shadow-2xl text-lg font-black uppercase tracking-widest", accentColor)}>
|
|
{externalLink ? (
|
|
<a href={href}>{ctaText}</a>
|
|
) : (
|
|
<Link href={href}>{ctaText}</Link>
|
|
)}
|
|
</Button>
|
|
) : (
|
|
<Button variant="pill" className={cn("px-8 bg-white border-none shadow-xl hover:shadow-2xl text-lg font-black uppercase tracking-widest", accentColor)}>
|
|
{ctaText}
|
|
</Button>
|
|
)
|
|
))}
|
|
</div>
|
|
|
|
{/* Visual */}
|
|
<div className={cn(
|
|
"flex-1 w-full flex justify-center",
|
|
reversed ? "order-first lg:order-last" : "order-last"
|
|
)}>
|
|
{children ? (
|
|
<div className="w-full">
|
|
{children}
|
|
</div>
|
|
) : (
|
|
<div className="relative group w-full max-w-[500px]">
|
|
<div className={cn(
|
|
"absolute inset-0 blur-3xl opacity-20 rounded-full transition-all duration-500 scale-110 group-hover:scale-125",
|
|
accentColor.replace("text-", "bg-")
|
|
)} />
|
|
<Card className="relative w-full aspect-[4/3] md:aspect-video md:w-[500px] md:h-[350px] bg-white shadow-2xl rounded-[2.5rem] overflow-hidden border-none transform transition-transform duration-700 group-hover:scale-105">
|
|
<div className="w-full h-full bg-slate-50 flex items-center justify-center">
|
|
<div className={cn("w-20 h-20 rounded-full opacity-20", accentColor.replace("text-", "bg-"))} />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default FeatureSection
|