{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-awards-and-recognition-featured-award-highlight","type":"registry:block","title":"Featured Award Highlight","files":[{"path":"components/blocks/portfolio/portfolio-awards-and-recognition/featured-award-highlight.tsx","content":"import { Button } from '@/components/ui/button';\nimport { ArrowRight } from 'lucide-react';\n\nexport default function AwardsAndRecognitionFeatured() {\n  const mainAward = {\n    name: 'Web Excellence Award 2023',\n    organization: 'International Digital Experience Awards',\n    description:\n      'Recognized for creating exceptional digital experiences that combine innovative interaction design with seamless user experiences. This award celebrates the highest standards in web design and development, honoring projects that demonstrate technical excellence, creative innovation, and measurable results.',\n    image:\n      'https://images.unsplash.com/photo-1560179707-f14e90ef3623?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    logo: 'https://images.unsplash.com/photo-1569012871812-f38ee64cd54c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    date: 'November 2023',\n    link: '#',\n  };\n\n  const secondaryAward = {\n    name: 'UX Design Certificate of Excellence',\n    organization: 'Design Industry Association',\n    description:\n      'Awarded for demonstrating outstanding proficiency in user-centered design methodologies and creating accessible, inclusive digital experiences.',\n    image:\n      'https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    logo: 'https://images.unsplash.com/photo-1567427361984-0cbe7396fc6c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n    date: 'June 2023',\n    link: '#',\n  };\n\n  return (\n    <section className=\"py-16 md:py-24\">\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        {/* Header */}\n        <div className=\"mb-16 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl\">\n            Award-Winning Work\n          </h2>\n          <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg\">\n            Recognized excellence that demonstrates my commitment to quality and\n            innovation.\n          </p>\n        </div>\n\n        {/* Main Award */}\n        <div className=\"bg-card mx-auto mb-16 max-w-5xl overflow-hidden rounded-xl border shadow-sm\">\n          <div className=\"grid md:grid-cols-2\">\n            {/* Award Image */}\n            <div className=\"relative h-64 overflow-hidden md:h-auto\">\n              <img\n                src={mainAward.image}\n                alt={mainAward.name}\n                className=\"object-cover\"\n              />\n              <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 to-transparent\" />\n              <div className=\"absolute bottom-4 left-4\">\n                <div className=\"border-background bg-background relative h-16 w-16 overflow-hidden rounded-lg border-2\">\n                  <img\n                    src={mainAward.logo}\n                    alt={mainAward.organization}\n                    className=\"object-cover\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            {/* Award Details */}\n            <div className=\"p-6 md:p-8\">\n              <div className=\"text-muted-foreground mb-2 text-sm font-medium\">\n                {mainAward.date} • {mainAward.organization}\n              </div>\n              <h3 className=\"mb-4 text-2xl font-bold md:text-3xl\">\n                {mainAward.name}\n              </h3>\n              <p className=\"text-muted-foreground mb-6\">\n                {mainAward.description}\n              </p>\n              <Button asChild>\n                <a href={mainAward.link}>\n                  View Award <ArrowRight className=\"ml-2 h-4 w-4\" />\n                </a>\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        {/* Secondary Award */}\n        <div className=\"bg-card mx-auto max-w-5xl overflow-hidden rounded-xl border shadow-sm\">\n          <div className=\"grid md:grid-cols-2\">\n            {/* Award Details */}\n            <div className=\"order-2 p-6 md:order-1 md:p-8\">\n              <div className=\"text-muted-foreground mb-2 text-sm font-medium\">\n                {secondaryAward.date} • {secondaryAward.organization}\n              </div>\n              <h3 className=\"mb-4 text-2xl font-bold md:text-3xl\">\n                {secondaryAward.name}\n              </h3>\n              <p className=\"text-muted-foreground mb-6\">\n                {secondaryAward.description}\n              </p>\n              <Button variant=\"outline\" asChild>\n                <a href={secondaryAward.link}>\n                  Learn More <ArrowRight className=\"ml-2 h-4 w-4\" />\n                </a>\n              </Button>\n            </div>\n\n            {/* Award Image */}\n            <div className=\"relative order-1 h-64 overflow-hidden md:order-2 md:h-auto\">\n              <img\n                src={secondaryAward.image}\n                alt={secondaryAward.name}\n                className=\"object-cover\"\n              />\n              <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 to-transparent\" />\n              <div className=\"absolute right-4 bottom-4\">\n                <div className=\"border-background bg-background relative h-16 w-16 overflow-hidden rounded-lg border-2\">\n                  <img\n                    src={secondaryAward.logo}\n                    alt={secondaryAward.organization}\n                    className=\"object-cover\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-awards-and-recognition/featured-award-highlight.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"}],"description":"A spotlight block centered on a single major award with its name, year, and a short note. Use it to lead with your most impressive recognition.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}