{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-team-sections-with-large-images","type":"registry:block","title":"With Large Images","files":[{"path":"components/blocks/marketing/team-sections/with-large-images.tsx","content":"import { Twitter, Github, Linkedin } from '@/components/ui/brand-icons';\nimport { Button } from '@/components/ui/button';\n\nconst team = [\n {\n name: 'David Forren',\n role: 'Founder / CEO',\n bio: 'I am an ambitious workaholic, but apart from that, pretty simple person.',\n image:\n 'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80',\n },\n {\n name: 'Amil Evara',\n role: 'UI/UX Designer',\n bio: 'I am an ambitious workaholic, but apart from that, pretty simple person.',\n image:\n 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80',\n },\n {\n name: 'Ebele Egbuna',\n role: 'Support Consultant',\n bio: 'I am an ambitious workaholic, but apart from that, pretty simple person.',\n image:\n 'https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80',\n },\n];\n\nexport default function WithLargeImages() {\n return (\n
\n {/* Title */}\n
\n

\n Our leadership\n

\n

\n The talented people behind the scenes\n

\n
\n {/* End Title */}\n\n {/* Grid */}\n
\n {team.map((member) => (\n
\n \n
\n

{member.name}

\n

\n {member.role}\n

\n

{member.bio}

\n
\n
\n \n \n \n
\n
\n ))}\n
\n {/* End Grid */}\n
\n );\n}\n","type":"registry:component","target":"components/blocks/marketing/team-sections/with-large-images.tsx"},{"path":"components/ui/brand-icons.tsx","content":"import type { ReactNode, SVGProps } from \"react\"\n\ntype BrandIconProps = SVGProps & {\n size?: number | string\n}\n\nfunction BrandSvg({\n children,\n size = 24,\n ...props\n}: BrandIconProps & { children: ReactNode }) {\n return (\n \n {children}\n \n )\n}\n\nfunction Datadog(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Facebook(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Figma(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Github(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Google(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Instagram(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Jira(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Linear(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Linkedin(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Loom(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Notion(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Sentry(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Slack(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Stripe(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Supabase(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Twitter(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Vercel(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction X(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nfunction Youtube(props: BrandIconProps) {\n return (\n \n \n \n )\n}\n\nconst DatadogIcon = Datadog\nconst FacebookIcon = Facebook\nconst FigmaIcon = Figma\nconst GoogleIcon = Google\nconst JiraIcon = Jira\nconst LinearIcon = Linear\nconst LoomIcon = Loom\nconst NotionIcon = Notion\nconst SentryIcon = Sentry\nconst SlackIcon = Slack\nconst StripeIcon = Stripe\nconst SupabaseIcon = Supabase\nconst VercelIcon = Vercel\nconst GithubIcon = Github\nconst GitHub = Github\nconst GitHubIcon = Github\nconst InstagramIcon = Instagram\nconst LinkedinIcon = Linkedin\nconst LinkedIn = Linkedin\nconst LinkedInIcon = Linkedin\nconst TwitterIcon = Twitter\nconst XIcon = X\nconst YoutubeIcon = Youtube\nconst YouTube = Youtube\nconst YouTubeIcon = Youtube\n\nexport {\n Datadog,\n DatadogIcon,\n Facebook,\n FacebookIcon,\n Figma,\n FigmaIcon,\n Github,\n GitHub,\n GithubIcon,\n GitHubIcon,\n Google,\n GoogleIcon,\n Instagram,\n InstagramIcon,\n Jira,\n JiraIcon,\n Linear,\n LinearIcon,\n Linkedin,\n LinkedIn,\n LinkedinIcon,\n LinkedInIcon,\n Loom,\n LoomIcon,\n Notion,\n NotionIcon,\n Sentry,\n SentryIcon,\n Slack,\n SlackIcon,\n Stripe,\n StripeIcon,\n Supabase,\n SupabaseIcon,\n Twitter,\n TwitterIcon,\n Vercel,\n VercelIcon,\n X,\n XIcon,\n Youtube,\n YouTube,\n YoutubeIcon,\n YouTubeIcon,\n}\n","type":"registry:ui","target":"components/ui/brand-icons.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n icon: \"size-9\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot.Root : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"}],"description":"Team profiles built around big, full bleed portraits with name and role. Puts faces front and center for a bold, personal about page that feels human.","dependencies":["class-variance-authority","radix-ui"]}