{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-event-speaking-and-workshops-featured-talk","type":"registry:block","title":"Featured Talk","files":[{"path":"components/blocks/portfolio/portfolio-event-speaking-and-workshops/featured-talk.tsx","content":"import { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport { CalendarIcon, MapPinIcon, PlayIcon } from 'lucide-react';\n\nconst featuredTalk = {\n  title: 'Building Resilient Design Systems at Scale',\n  event: 'DesignOps Global Conference',\n  date: 'May 15, 2024',\n  location: 'Amsterdam, Netherlands',\n  heroImage:\n    'https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  description:\n    'My keynote talk at DesignOps Global Conference focused on strategies for building and maintaining design systems that can evolve with organizational growth while ensuring consistency and efficiency across multiple product teams.',\n  videoUrl: '#',\n  slidesUrl: '#',\n  resourcesUrl: '#',\n  keyPoints: [\n    'Design system governance models for distributed teams',\n    'Balancing flexibility with consistency in component architecture',\n    'Automating design token implementation across platforms',\n    'Measuring and communicating design system success',\n    'Change management and adoption strategies for large organizations',\n  ],\n  feedback: [\n    {\n      quote:\n        \"One of the most insightful talks on design systems I've ever attended. The practical strategies shared are immediately applicable to our work.\",\n      author: 'Sarah Chen',\n      role: 'Lead Designer, TechCorp',\n    },\n    {\n      quote:\n        'The frameworks presented for measuring design system success have completely changed how we think about ROI in our organization.',\n      author: 'Marcus Johnson',\n      role: 'Design Director, Platform Co.',\n    },\n    {\n      quote:\n        'Finally, someone addressing the human and organizational challenges in design systems, not just the technical ones. Brilliant presentation!',\n      author: 'Aisha Patel',\n      role: 'VP of Design, Global Finance',\n    },\n  ],\n};\n\nexport default function FeaturedTalk() {\n  return (\n    <div className=\"container mx-auto px-4 py-12 md:px-6\">\n      <div className=\"mb-10 flex flex-col items-center text-center\">\n        <h2 className=\"mb-4 text-3xl font-bold tracking-tight\">\n          Featured Speaking Engagement\n        </h2>\n        <p className=\"text-muted-foreground max-w-[800px]\">\n          Highlighting my most impactful presentation and its reception in the\n          industry.\n        </p>\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-12\">\n        {/* Left column - image and main info */}\n        <div className=\"lg:col-span-5\">\n          <div className=\"relative mb-6 aspect-[4/3] overflow-hidden rounded-lg\">\n            <img\n              src={featuredTalk.heroImage}\n              alt={featuredTalk.title}\n              className=\"object-cover\"\n            />\n            <div className=\"absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 transition-opacity duration-300 hover:opacity-100\">\n              <Button\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"flex items-center gap-2\"\n              >\n                <PlayIcon className=\"h-5 w-5\" />\n                Watch Talk\n              </Button>\n            </div>\n          </div>\n\n          <h3 className=\"mb-3 text-2xl font-bold\">{featuredTalk.title}</h3>\n          <div className=\"mb-4 flex flex-col space-y-2\">\n            <div className=\"text-muted-foreground flex items-center\">\n              <CalendarIcon className=\"mr-2 h-4 w-4\" />\n              <span>{featuredTalk.date}</span>\n            </div>\n            <div className=\"text-muted-foreground flex items-center\">\n              <MapPinIcon className=\"mr-2 h-4 w-4\" />\n              <span>\n                {featuredTalk.event} • {featuredTalk.location}\n              </span>\n            </div>\n          </div>\n\n          <p className=\"text-muted-foreground mb-6\">\n            {featuredTalk.description}\n          </p>\n\n          <div className=\"flex flex-wrap gap-3\">\n            <Button asChild variant=\"default\">\n              <a href={featuredTalk.videoUrl}>\n                <PlayIcon className=\"mr-2 h-4 w-4\" />\n                Watch Recording\n              </a>\n            </Button>\n            <Button asChild variant=\"outline\">\n              <a href={featuredTalk.slidesUrl}>View Slides</a>\n            </Button>\n            <Button asChild variant=\"outline\">\n              <a href={featuredTalk.resourcesUrl}>Resources</a>\n            </Button>\n          </div>\n        </div>\n\n        {/* Right column - tabs with content */}\n        <div className=\"lg:col-span-7\">\n          <Tabs defaultValue=\"key-points\" className=\"w-full\">\n            <TabsList className=\"grid w-full grid-cols-2\">\n              <TabsTrigger value=\"key-points\">Key Points</TabsTrigger>\n              <TabsTrigger value=\"feedback\">Attendee Feedback</TabsTrigger>\n            </TabsList>\n\n            <TabsContent value=\"key-points\" className=\"mt-6\">\n              <Card>\n                <CardContent className=\"p-6\">\n                  <h4 className=\"mb-4 text-xl font-semibold\">\n                    Main Topics Covered\n                  </h4>\n                  <ul className=\"space-y-3\">\n                    {featuredTalk.keyPoints.map((point, i) => (\n                      <li key={i} className=\"flex items-start\">\n                        <div className=\"bg-primary text-primary-foreground mt-0.5 mr-3 flex h-6 w-6 items-center justify-center rounded-full text-sm font-medium\">\n                          {i + 1}\n                        </div>\n                        <span>{point}</span>\n                      </li>\n                    ))}\n                  </ul>\n                </CardContent>\n              </Card>\n            </TabsContent>\n\n            <TabsContent value=\"feedback\" className=\"mt-6\">\n              <div className=\"space-y-4\">\n                {featuredTalk.feedback.map((item, i) => (\n                  <Card key={i}>\n                    <CardContent className=\"p-6\">\n                      <blockquote className=\"mb-4 text-lg italic\">\n                        &quot;{item.quote}&quot;\n                      </blockquote>\n                      <div>\n                        <div className=\"font-semibold\">{item.author}</div>\n                        <div className=\"text-muted-foreground text-sm\">\n                          {item.role}\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n                ))}\n              </div>\n            </TabsContent>\n          </Tabs>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-event-speaking-and-workshops/featured-talk.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<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n","type":"registry:ui","target":"components/ui/tabs.tsx"}],"description":"A spotlight section for one talk with its title, summary, and event details. Highlights a signature presentation at the top of a speaking page.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}