cc0f17f722
- Added Cloudinary as an allowed image domain in next.config.ts for image optimization. - Included new dependencies: react-use-measure and use-media in package.json for enhanced UI responsiveness. - Introduced a service worker for caching iframe content to improve performance. - Added multiple new block components and layouts for enhanced UI features and organization. - Implemented utility functions and motion primitives for improved animations and effects.
68 lines
3.8 KiB
TypeScript
68 lines
3.8 KiB
TypeScript
import { Card, CardContent, CardHeader } from '@/components/ui/card'
|
|
import { Settings2, Sparkles, Zap } from 'lucide-react'
|
|
import { ReactNode } from 'react'
|
|
|
|
export default function Features() {
|
|
return (
|
|
<section className="py-16 md:py-32">
|
|
<div className="@container mx-auto max-w-5xl px-6">
|
|
<div className="text-center">
|
|
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">Built to cover your needs</h2>
|
|
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur, praesentium iusto repellendus.</p>
|
|
</div>
|
|
<div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-8 grid max-w-sm gap-6 [--color-background:var(--color-muted)] [--color-card:var(--color-muted)] *:text-center md:mt-16 dark:[--color-muted:var(--color-zinc-900)]">
|
|
<Card className="group border-0 shadow-none">
|
|
<CardHeader className="pb-3">
|
|
<CardDecorator>
|
|
<Zap className="size-6" aria-hidden />
|
|
</CardDecorator>
|
|
|
|
<h3 className="mt-6 font-medium">Customizable</h3>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<p className="text-sm">Extensive customization options, allowing you to tailor every aspect to meet your specific needs.</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="group border-0 shadow-none">
|
|
<CardHeader className="pb-3">
|
|
<CardDecorator>
|
|
<Settings2 className="size-6" aria-hidden />
|
|
</CardDecorator>
|
|
|
|
<h3 className="mt-6 font-medium">You have full control</h3>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<p className="mt-3 text-sm">From design elements to functionality, you have complete control to create a unique and personalized experience.</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="group border-0 shadow-none">
|
|
<CardHeader className="pb-3">
|
|
<CardDecorator>
|
|
<Sparkles className="size-6" aria-hidden />
|
|
</CardDecorator>
|
|
|
|
<h3 className="mt-6 font-medium">Powered By AI</h3>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<p className="mt-3 text-sm">Elements to functionality, you have complete control to create a unique experience.</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
const CardDecorator = ({ children }: { children: ReactNode }) => (
|
|
<div className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]">
|
|
<div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]" />
|
|
<div aria-hidden className="bg-radial to-background absolute inset-0 from-transparent to-75%" />
|
|
<div className="dark:bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-l border-t bg-white">{children}</div>
|
|
</div>
|
|
)
|