{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-10",
  "type": "registry:block",
  "title": "Features 10",
  "description": "Card-based features with light/dark screenshots and a scheduling highlight.",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "app/preview/features/ten/page.tsx",
      "content": "import { Card, CardContent, CardHeader } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\nimport { Calendar, LucideIcon, MapIcon } from 'lucide-react'\nimport Image from 'next/image'\nimport { ReactNode } from 'react'\n\nexport default function Features() {\n    return (\n        <section className=\"bg-zinc-50 py-16 md:py-32 dark:bg-transparent\">\n            <div className=\"mx-auto max-w-2xl px-6 lg:max-w-5xl\">\n                <div className=\"mx-auto grid gap-4 lg:grid-cols-2\">\n                    <FeatureCard>\n                        <CardHeader className=\"pb-3\">\n                            <CardHeading\n                                icon={MapIcon}\n                                title=\"Real time location tracking\"\n                                description=\"Advanced tracking system, Instantly locate all your assets.\"\n                            />\n                        </CardHeader>\n\n                        <div className=\"relative mb-6 border-t border-dashed sm:mb-0\">\n                            <div className=\"absolute inset-0 [background:radial-gradient(125%_125%_at_50%_0%,transparent_40%,var(--color-blue-600),var(--color-white)_100%)]\"></div>\n                            <div className=\"aspect-76/59 p-1 px-6\">\n                                <DualModeImage\n                                    darkSrc=\"/payments.png\"\n                                    lightSrc=\"/payments-light.png\"\n                                    alt=\"payments illustration\"\n                                    width={1207}\n                                    height={929}\n                                />\n                            </div>\n                        </div>\n                    </FeatureCard>\n\n                    <FeatureCard>\n                        <CardHeader className=\"pb-3\">\n                            <CardHeading\n                                icon={Calendar}\n                                title=\"Advanced Scheduling\"\n                                description=\"Scheduling system, Instantly locate all your assets.\"\n                            />\n                        </CardHeader>\n\n                        <CardContent>\n                            <div className=\"relative mb-6 sm:mb-0\">\n                                <div className=\"absolute -inset-6 [background:radial-gradient(50%_50%_at_75%_50%,transparent,var(--color-background)_100%)]\"></div>\n                                <div className=\"aspect-76/59 border\">\n                                    <DualModeImage\n                                        darkSrc=\"/origin-cal-dark.png\"\n                                        lightSrc=\"/origin-cal.png\"\n                                        alt=\"calendar illustration\"\n                                        width={1207}\n                                        height={929}\n                                    />\n                                </div>\n                            </div>\n                        </CardContent>\n                    </FeatureCard>\n\n                    <FeatureCard className=\"p-6 lg:col-span-2\">\n                        <p className=\"mx-auto my-6 max-w-md text-balance text-center text-2xl font-semibold\">Smart scheduling with automated reminders for maintenance.</p>\n\n                        <div className=\"flex justify-center gap-6 overflow-hidden\">\n                            <CircularUI\n                                label=\"Inclusion\"\n                                circles={[{ pattern: 'border' }, { pattern: 'border' }]}\n                            />\n\n                            <CircularUI\n                                label=\"Inclusion\"\n                                circles={[{ pattern: 'none' }, { pattern: 'primary' }]}\n                            />\n\n                            <CircularUI\n                                label=\"Join\"\n                                circles={[{ pattern: 'blue' }, { pattern: 'none' }]}\n                            />\n\n                            <CircularUI\n                                label=\"Exclusion\"\n                                circles={[{ pattern: 'primary' }, { pattern: 'none' }]}\n                                className=\"hidden sm:block\"\n                            />\n                        </div>\n                    </FeatureCard>\n                </div>\n            </div>\n        </section>\n    )\n}\n\ninterface FeatureCardProps {\n    children: ReactNode\n    className?: string\n}\n\nconst FeatureCard = ({ children, className }: FeatureCardProps) => (\n    <Card className={cn('group relative rounded-none shadow-zinc-950/5', className)}>\n        <CardDecorator />\n        {children}\n    </Card>\n)\n\nconst CardDecorator = () => (\n    <>\n        <span className=\"border-primary absolute -left-px -top-px block size-2 border-l-2 border-t-2\"></span>\n        <span className=\"border-primary absolute -right-px -top-px block size-2 border-r-2 border-t-2\"></span>\n        <span className=\"border-primary absolute -bottom-px -left-px block size-2 border-b-2 border-l-2\"></span>\n        <span className=\"border-primary absolute -bottom-px -right-px block size-2 border-b-2 border-r-2\"></span>\n    </>\n)\n\ninterface CardHeadingProps {\n    icon: LucideIcon\n    title: string\n    description: string\n}\n\nconst CardHeading = ({ icon: Icon, title, description }: CardHeadingProps) => (\n    <div className=\"p-6\">\n        <span className=\"text-muted-foreground flex items-center gap-2\">\n            <Icon className=\"size-4\" />\n            {title}\n        </span>\n        <p className=\"mt-8 text-2xl font-semibold\">{description}</p>\n    </div>\n)\n\ninterface DualModeImageProps {\n    darkSrc: string\n    lightSrc: string\n    alt: string\n    width: number\n    height: number\n    className?: string\n}\n\nconst DualModeImage = ({ darkSrc, lightSrc, alt, width, height, className }: DualModeImageProps) => (\n    <>\n        <Image\n            src={darkSrc}\n            className={cn('hidden dark:block', className)}\n            alt={`${alt} dark`}\n            width={width}\n            height={height}\n        />\n        <Image\n            src={lightSrc}\n            className={cn('shadow dark:hidden', className)}\n            alt={`${alt} light`}\n            width={width}\n            height={height}\n        />\n    </>\n)\n\ninterface CircleConfig {\n    pattern: 'none' | 'border' | 'primary' | 'blue'\n}\n\ninterface CircularUIProps {\n    label: string\n    circles: CircleConfig[]\n    className?: string\n}\n\nconst CircularUI = ({ label, circles, className }: CircularUIProps) => (\n    <div className={className}>\n        <div className=\"bg-linear-to-b from-border size-fit rounded-2xl to-transparent p-px\">\n            <div className=\"bg-linear-to-b from-background to-muted/25 relative flex aspect-square w-fit items-center -space-x-4 rounded-[15px] p-4\">\n                {circles.map((circle, i) => (\n                    <div\n                        key={i}\n                        className={cn('size-7 rounded-full border sm:size-8', {\n                            'border-primary': circle.pattern === 'none',\n                            'border-primary bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_4px)]': circle.pattern === 'border',\n                            'border-primary bg-background bg-[repeating-linear-gradient(-45deg,var(--color-primary),var(--color-primary)_1px,transparent_1px,transparent_4px)]': circle.pattern === 'primary',\n                            'bg-background z-1 border-blue-500 bg-[repeating-linear-gradient(-45deg,var(--color-blue-500),var(--color-blue-500)_1px,transparent_1px,transparent_4px)]': circle.pattern === 'blue',\n                        })}></div>\n                ))}\n            </div>\n        </div>\n        <span className=\"text-muted-foreground mt-1.5 block text-center text-sm\">{label}</span>\n    </div>\n)\n",
      "type": "registry:component",
      "target": "components/features-10.tsx"
    }
  ]
}