{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"dusk-hero-section-8","type":"registry:block","title":"Hero Section 8","description":"Tailark Dusk hero-section variant 8 block","registryDependencies":["@tailark-oss/dusk-hero-section-6-header","@tailark-oss/core-google","@tailark-oss/core-trustpilot","@tailark-oss/core-g2"],"meta":{"aspect-ratio":"60/48","width":686,"height":549,"category-media":true},"files":[{"path":"dusk/blocks/hero-section/eight.tsx","type":"registry:component","target":"@components/hero-section-8.tsx","content":"import Image from 'next/image'\nimport { HeroHeader } from '@/components/hero-section-6-header'\nimport { cn } from '@/lib/utils'\nimport { Google } from '@/components/ui/svgs/google'\nimport { Trustpilot } from '@/components/ui/svgs/trustpilot'\nimport { G2 } from '@/components/ui/svgs/g2'\n\ntype ProfileCardProps = {\n    name: string\n    alt: string\n    imageSrc: string\n    className?: string\n    cardClassName?: string\n    rightMaskClassName?: string\n}\n\nconst ProfileCard = ({ name, alt, imageSrc, className, cardClassName, rightMaskClassName }: ProfileCardProps) => {\n    return (\n        <div\n            aria-hidden\n            className={cn('absolute inset-0 z-10 m-auto size-fit', className)}\n        >\n            <div className=\"border-foreground/25 mask-radial-from-bottom-left mask-radial-from-65% mask-radial-[100%_60%] absolute inset-y-0 left-0 z-10 aspect-video rounded-l-2xl border-l border-t\" />\n            <div className={cn('border-foreground/25 mask-radial-from-bottom-right mask-radial-from-65% mask-radial-[60%_100%] absolute inset-y-0 right-0 z-10 aspect-video rounded-r-2xl border-r border-t', rightMaskClassName)} />\n\n            <div className=\"relative overflow-hidden rounded-2xl border border-zinc-900/50 shadow-2xl shadow-black ring ring-black/50\">\n                <Image\n                    src={imageSrc}\n                    alt={alt}\n                    width={120}\n                    height={120}\n                    className=\"absolute inset-0 my-auto size-fit blur\"\n                />\n                <div className={cn('relative z-10 rounded-2xl p-2 pr-32 backdrop-blur dark:bg-zinc-900/80', cardClassName)}>\n                    <div className=\"flex gap-2\">\n                        <div className=\"before:border-foreground/20 size-18 relative overflow-hidden rounded-xl shadow-md before:absolute before:inset-0 before:rounded-xl before:border\">\n                            <Image\n                                src={imageSrc}\n                                alt={alt}\n                                width={136}\n                                height={136}\n                            />\n                        </div>\n                        <div className=\"py-1 pr-4\">\n                            <div className=\"text-sm font-medium\">{name}</div>\n                            <div className=\"mt-1.5 flex items-center gap-3\">\n                                <div>\n                                    <div className=\"text-foreground/50 text-xs\">Expenses</div>\n                                    <div className=\"mt-0.5 text-sm font-semibold\">$32.65k</div>\n                                </div>\n                                <div className=\"bg-border h-7 w-px\" />\n                                <div>\n                                    <div className=\"text-foreground/50 text-xs\">Income</div>\n                                    <div className=\"mt-0.5 text-sm font-semibold\">$2.65k</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}\n\nexport default function HeroSection() {\n    return (\n        <>\n            <HeroHeader />\n\n            <main>\n                <section className=\"pb-24 pt-40 md:pt-56\">\n                    <div className=\"relative mx-auto max-w-7xl px-6\">\n                        <div>\n                            <h1 className=\"text-balance text-center text-4xl font-medium tracking-tight\">\n                                Family money, finally organized. <br /> <span className=\"text-muted-foreground\">Plan budgets, bills, and savings together</span>\n                            </h1>\n                        </div>\n                        <div className=\"sm:aspect-3/2 relative mx-auto mt-6 aspect-square max-w-4xl overflow-hidden\">\n                            <ProfileCard\n                                name=\"Théo Balick\"\n                                alt=\"Théo's avatar\"\n                                imageSrc=\"https://avatars.githubusercontent.com/u/68236786?v=4\"\n                                className=\"scale-85 z-11\"\n                                cardClassName=\"bg-card/75\"\n                                rightMaskClassName=\"border-foreground/35\"\n                            />\n\n                            <ProfileCard\n                                name=\"Shadcn\"\n                                alt=\"Shadcn avatar\"\n                                imageSrc=\"https://avatars.githubusercontent.com/u/124599?v=4\"\n                                className=\"origin-top -translate-y-1 scale-75\"\n                                cardClassName=\"bg-white/90\"\n                            />\n\n                            <Image\n                                src=\"https://images.unsplash.com/photo-1600856209923-34372e319a5d?q=80&w=1289&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                                alt=\"background\"\n                                width={1280}\n                                height={1000}\n                                className=\"mask-x-from-80% mask-y-from-80% size-full object-cover max-sm:scale-150 dark:mix-blend-lighten\"\n                            />\n                        </div>\n                    </div>\n\n                    <div className=\"mt-12\">\n                        <p className=\"text-muted-foreground text-center text-lg\">Trusted by over 100,000 families</p>\n\n                        <div className=\"mt-6 flex flex-wrap justify-center gap-x-12 gap-y-6\">\n                            <div className=\"flex items-center gap-2\">\n                                <Google className=\"size-5\" />\n\n                                <p className=\"text-foreground text-lg font-medium\">\n                                    <span>4.8</span> Google\n                                </p>\n                            </div>\n\n                            <div className=\"flex items-center gap-2\">\n                                <Trustpilot className=\"size-5\" />\n\n                                <p className=\"text-foreground text-lg font-medium\">\n                                    <span>4.6</span> Trustpilot\n                                </p>\n                            </div>\n\n                            <div className=\"flex items-center gap-2\">\n                                <G2 className=\"size-5\" />\n\n                                <p className=\"text-foreground text-lg font-medium\">\n                                    <span>4.5</span> G2\n                                </p>\n                            </div>\n                        </div>\n                    </div>\n                </section>\n            </main>\n        </>\n    )\n}\n"}]}