{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-3",
  "title": "Hero 3",
  "description": "Marketing hero with heading, reviews row, CTAs, and side image (React Native + Uniwind).",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/blocks/marketing/hero3.tsx",
      "content": "import { Linking } from 'react-native'\nimport { Image, View } from 'uniwind/components'\nimport { cn } from '../../../reusables/lib/utils'\nimport { Avatar, AvatarImage, Button, UIText } from '../../reusables'\n\nexport interface Hero3Props {\n    heading?: string\n    description?: string\n    buttons?: {\n        primary?: {\n            text: string\n            url: string\n            className?: string\n        }\n        secondary?: {\n            text: string\n            url: string\n        }\n    }\n    reviews?: {\n        count: number\n        avatars: {\n            src: string\n            alt: string\n        }[]\n        rating?: number\n    }\n    /** Remote image shown on the wide layout (SVG/PNG URLs may vary by platform). */\n    imageUrl?: string\n    imageAccessibilityLabel?: string\n    className?: string\n}\n\nconst DEFAULT_IMAGE = 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-1.svg'\n\nfunction openUrl(url: string) {\n    void Linking.openURL(url)\n}\n\nfunction Hero3({\n    heading = 'Blocks built with Shadcn & Tailwind',\n    description = 'Finely crafted components built with React, Tailwind and Shadcn UI. Developers can copy and paste these blocks directly into their project.',\n    buttons = {\n        primary: {\n            text: 'Sign Up',\n            url: 'https://www.shadcnblocks.com',\n        },\n        secondary: {\n            text: 'Get Started',\n            url: 'https://www.shadcnblocks.com',\n        },\n    },\n    reviews = {\n        count: 200,\n        rating: 5.0,\n        avatars: [\n            {\n                src: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/avatar-1.webp',\n                alt: 'Avatar 1',\n            },\n            {\n                src: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/avatar-2.webp',\n                alt: 'Avatar 2',\n            },\n            {\n                src: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/avatar-3.webp',\n                alt: 'Avatar 3',\n            },\n            {\n                src: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/avatar-4.webp',\n                alt: 'Avatar 4',\n            },\n            {\n                src: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/avatar-5.webp',\n                alt: 'Avatar 5',\n            },\n        ],\n    },\n    className,\n    imageAccessibilityLabel = 'Hero illustration',\n    imageUrl = DEFAULT_IMAGE,\n}: Hero3Props) {\n    return (\n        <View className={cn('flex-col py-32', className)}>\n            <View className=\"w-full max-w-7xl flex-col gap-10 self-center px-4 lg:flex-row lg:items-center lg:gap-20\">\n                <View className=\"mx-auto w-full flex-col items-center lg:max-w-3xl lg:ml-auto lg:items-start\">\n                    <UIText className=\"my-6 text-center text-4xl font-bold text-pretty text-zinc-950 dark:text-zinc-50 lg:text-left lg:text-6xl xl:text-7xl\">\n                        {heading}\n                    </UIText>\n                    <UIText className=\"mb-8 max-w-xl text-center text-base leading-7 text-zinc-600 dark:text-zinc-400 lg:text-left lg:text-xl\">\n                        {description}\n                    </UIText>\n\n                    <View className=\"mb-12 w-full flex-col items-center gap-4 sm:w-fit sm:flex-row\">\n                        <View className=\"flex-row items-center\">\n                            {reviews.avatars.map((avatar, index) => (\n                                <Avatar\n                                    key={`${avatar.src}-${index}`}\n                                    className={cn('h-12 w-12 border border-zinc-200 dark:border-zinc-700', index > 0 && '-ml-4')}\n                                >\n                                    <AvatarImage\n                                        accessibilityLabel={avatar.alt}\n                                        className=\"h-full w-full\"\n                                        resizeMode=\"cover\"\n                                        source={{ uri: avatar.src }}\n                                    />\n                                </Avatar>\n                            ))}\n                        </View>\n                        <View className=\"min-w-0 flex-1\">\n                            <View\n                                accessibilityLabel={`${reviews.rating?.toFixed(1)} out of five stars`}\n                                className=\"flex-row flex-wrap items-center gap-1\"\n                            >\n                                {[0, 1, 2, 3, 4].map(index => (\n                                    <UIText key={`star-${index}`} className=\"text-lg leading-none text-yellow-400\">\n                                        ★\n                                    </UIText>\n                                ))}\n                                <UIText className=\"ml-1 font-semibold text-zinc-950 dark:text-zinc-50\">{reviews.rating?.toFixed(1)}</UIText>\n                            </View>\n                            <UIText className=\"text-left font-medium text-zinc-600 dark:text-zinc-400\">from {reviews.count}+ reviews</UIText>\n                        </View>\n                    </View>\n\n                    <View className=\"w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start\">\n                        {buttons.primary ? (\n                            <Button className={cn('w-full sm:w-auto', buttons.primary.className)} onPress={() => openUrl(buttons.primary!.url)}>\n                                <UIText>{buttons.primary.text}</UIText>\n                            </Button>\n                        ) : null}\n                        {buttons.secondary ? (\n                            <Button variant=\"outline\" onPress={() => openUrl(buttons.secondary!.url)}>\n                                <UIText>{buttons.secondary.text}</UIText>\n                                <UIText className=\"text-base text-zinc-900 dark:text-zinc-100\">↘</UIText>\n                            </Button>\n                        ) : null}\n                    </View>\n                </View>\n\n                <View className=\"w-full flex-1 lg:min-w-0\">\n                    <Image\n                        accessibilityLabel={imageAccessibilityLabel}\n                        className=\"max-h-[600px] w-full rounded-md lg:max-h-[800px]\"\n                        resizeMode=\"cover\"\n                        source={{ uri: imageUrl }}\n                    />\n                </View>\n            </View>\n        </View>\n    )\n}\n\nexport { Hero3 }\n",
      "type": "registry:component"
    },
    {
      "path": "src/blocks/marketing/index.ts",
      "content": "export type { Hero3Props } from './hero3'\nexport { Hero3 } from './hero3'\n",
      "type": "registry:lib"
    }
  ],
  "docs": "Uses `Avatar`, `Button`, `UIText`, `Linking.openURL` for button URLs. Remote SVG hero images may need a raster `imageUrl` on some platforms.",
  "categories": [
    "blocks",
    "marketing"
  ],
  "type": "registry:block"
}