40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { cn } from '@workspace/ui/lib/utils';
|
|
import { Button } from '@workspace/ui/components/ui/button';
|
|
import Link from 'next/link';
|
|
import { motion } from 'motion/react';
|
|
|
|
export const SectionWrapper = ({
|
|
title,
|
|
subtitle,
|
|
description,
|
|
color = 'text-blue-500',
|
|
backgroundColor = 'bg-blue-500/10 hover:bg-blue-500/20',
|
|
children,
|
|
}: {
|
|
title: React.ReactNode;
|
|
subtitle: React.ReactNode;
|
|
description: React.ReactNode;
|
|
color?: string;
|
|
backgroundColor?: string;
|
|
children: React.ReactNode;
|
|
}) => {
|
|
return (
|
|
<section className="mt-30">
|
|
<p className={cn('text-base font-medium mb-4', color)}>{subtitle}</p>
|
|
<h2 className="text-3xl md:text-4xl font-semibold">{title}</h2>
|
|
<p className="mt-4 text-muted-foreground max-w-3xl">{description}</p>
|
|
<motion.div className="my-8 w-fit" whileTap={{ scale: 0.95 }}>
|
|
<Button
|
|
asChild
|
|
className={cn('rounded-full transition-colors', backgroundColor)}
|
|
>
|
|
<Link href="/docs">
|
|
<span className={color}>Get Started</span>
|
|
</Link>
|
|
</Button>
|
|
</motion.div>
|
|
{children}
|
|
</section>
|
|
);
|
|
};
|