{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portfolio-portfolio-hero-showcases-floating-elements","type":"registry:block","title":"Floating Elements","files":[{"path":"components/blocks/portfolio/portfolio-hero-showcases/floating-elements.tsx","content":"import { useEffect, useRef } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { ChevronRight, Code, Palette, Layers } from 'lucide-react';\n\nexport default function PortfolioHeroFloatingElements() {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const elements = container.querySelectorAll('.float');\n    elements.forEach((element, index) => {\n      // Create more intentional, less random animations\n      const delay = index * 0.3; // sequential delays for more organized movement\n      const duration = 8 + (index % 3) * 2; // 8-12s, varied but not too random\n\n      (element as HTMLElement).style.setProperty('--delay', `${delay}s`);\n      (element as HTMLElement).style.setProperty('--duration', `${duration}s`);\n    });\n  }, []);\n\n  return (\n    <div className=\"from-background via-background/95 to-background/90 relative min-h-screen w-full overflow-hidden bg-gradient-to-br\">\n      {/* Subtle grid pattern overlay */}\n      <div className=\"absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGZpbGw9InJnYmEoMTQ0LCAxNDQsIDE0NCwgMC4wMikiIGQ9Ik0wIDBoNjB2NjBIMHoiLz48cGF0aCBkPSJNMzAgMzBoMzB2MzBIMzB6TTAgMGgzMHYzMEgweiIgZmlsbD0icmdiYSgxNDQsIDE0NCwgMTQ0LCAwLjA0KSIvPjwvZz48L3N2Zz4=')] opacity-40\"></div>\n\n      {/* Content container with constrained width to allow space for floating elements */}\n      <div className=\"relative z-30 flex min-h-screen w-full items-center justify-center px-4 py-16\">\n        <div className=\"bg-background/30 border-muted/30 max-w-xl rounded-3xl border p-8 shadow-xl backdrop-blur-xl md:p-12\">\n          <div className=\"text-center\">\n            <div className=\"border-primary/30 bg-primary/10 text-primary mb-6 inline-flex items-center justify-center gap-1.5 rounded-full border px-4 py-1.5 text-sm font-medium\">\n              <Layers className=\"mr-1 h-3.5 w-3.5\" />\n              DESIGN & DEVELOPMENT\n            </div>\n\n            <h1 className=\"text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl\">\n              Bringing <span className=\"text-primary\">Creative Ideas</span> to\n              Life\n            </h1>\n\n            <p className=\"text-muted-foreground mt-6 text-lg\">\n              Award-winning portfolio of digital experiences that combine\n              aesthetic excellence with functional design, creating memorable\n              interactions for brands and users alike.\n            </p>\n\n            <div className=\"mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row\">\n              <Button size=\"lg\" className=\"group px-6\">\n                <span>View Portfolio</span>\n                <ChevronRight className=\"ml-2 h-4 w-4 transition-transform group-hover:translate-x-1\" />\n              </Button>\n\n              <Button variant=\"outline\" size=\"lg\" className=\"px-6\">\n                Contact Me\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Floating elements container - positioned on top with z-20 */}\n      <div\n        ref={containerRef}\n        className=\"pointer-events-none absolute inset-0 z-20\"\n      >\n        {/* Left side elements */}\n        <div className=\"float float-1 border-primary/30 bg-primary/5 text-primary absolute top-[25%] left-[8%] flex h-16 w-16 items-center justify-center rounded-xl border shadow-sm backdrop-blur-sm\">\n          <Palette className=\"h-6 w-6\" />\n        </div>\n\n        <div className=\"float float-3 border-muted-foreground/20 bg-background/70 absolute bottom-[30%] left-[12%] flex h-16 w-16 items-center justify-center rounded-full border shadow-sm backdrop-blur-sm\">\n          <Code className=\"text-muted-foreground h-6 w-6\" />\n        </div>\n\n        <div className=\"float float-6 border-muted-foreground/10 bg-background/70 absolute top-[60%] left-[5%] flex h-24 w-24 items-center justify-center rounded-2xl border shadow-sm backdrop-blur-sm\">\n          <Layers className=\"text-primary/80 h-8 w-8\" />\n        </div>\n\n        {/* Right side elements */}\n        <div className=\"float float-2 border-primary/20 bg-background/80 absolute top-[20%] right-[10%] flex h-20 w-20 items-center justify-center rounded-2xl border shadow-md backdrop-blur-sm\">\n          <div className=\"grid grid-cols-2 gap-1\">\n            <div className=\"bg-primary/30 h-4 w-4 rounded-sm\"></div>\n            <div className=\"bg-primary/20 h-4 w-4 rounded-sm\"></div>\n            <div className=\"bg-primary/10 h-4 w-4 rounded-sm\"></div>\n            <div className=\"bg-primary/40 h-4 w-4 rounded-sm\"></div>\n          </div>\n        </div>\n\n        <div className=\"float float-4 absolute right-[7%] bottom-[35%] h-28 w-28 overflow-hidden rounded-xl shadow-lg\">\n          <img\n            src=\"https://images.unsplash.com/photo-1563089145-599997674d42?q=80&w=800&auto=format&fit=crop\"\n            alt=\"Portfolio preview\"\n            width={800}\n            height={800}\n            className=\"h-full w-full object-cover\"\n          />\n          <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent\"></div>\n        </div>\n\n        <div className=\"float float-5 border-muted/30 bg-background/80 absolute top-[65%] right-[15%] flex h-16 w-36 flex-col justify-center rounded-lg border p-3 shadow-sm backdrop-blur-sm\">\n          <div className=\"bg-primary/40 h-2 w-3/4 rounded-full\"></div>\n          <div className=\"bg-muted-foreground/30 mt-2 h-2 w-1/2 rounded-full\"></div>\n        </div>\n\n        {/* Additional elements positioned further out */}\n        <div className=\"float float-7 absolute top-[15%] left-[22%] h-20 w-20 overflow-hidden rounded-2xl shadow-lg\">\n          <img\n            src=\"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=800&auto=format&fit=crop\"\n            alt=\"Design element\"\n            width={800}\n            height={800}\n            className=\"h-full w-full object-cover\"\n          />\n          <div className=\"absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent\"></div>\n        </div>\n\n        <div className=\"float float-8 border-primary/20 bg-primary/10 absolute right-[25%] bottom-[15%] flex h-14 w-14 items-center justify-center rounded-full border shadow-sm backdrop-blur-sm\">\n          <div className=\"bg-primary/30 h-6 w-6 rounded-sm\"></div>\n        </div>\n\n        <div className=\"float float-9 border-muted/20 bg-background/60 absolute top-[40%] right-[2%] flex h-16 w-16 items-center justify-center rounded-lg border shadow-sm backdrop-blur-sm\">\n          <div className=\"bg-muted-foreground/20 h-8 w-8 rounded-md\"></div>\n        </div>\n\n        <div className=\"float float-10 border-primary/30 bg-primary/5 absolute top-[5%] left-[40%] flex h-12 w-12 items-center justify-center rounded-full border shadow-sm backdrop-blur-sm\">\n          <div className=\"bg-primary/50 h-4 w-4 rounded-full\"></div>\n        </div>\n      </div>\n\n      {/* CSS for floating animations */}\n      <style jsx>{`\n        .float {\n          animation: float-animation var(--duration, 10s) ease-in-out infinite;\n          animation-delay: var(--delay, 0s);\n          will-change: transform;\n          transform-origin: center center;\n        }\n\n        @keyframes float-animation {\n          0%,\n          100% {\n            transform: translate(0, 0) rotate(0deg);\n          }\n          25% {\n            transform: translate(10px, -15px) rotate(2deg);\n          }\n          50% {\n            transform: translate(-5px, 10px) rotate(-1deg);\n          }\n          75% {\n            transform: translate(-12px, -7px) rotate(1deg);\n          }\n        }\n\n        .float-1 {\n          --z-index: 1;\n        }\n        .float-2 {\n          --z-index: 2;\n        }\n        .float-3 {\n          --z-index: 3;\n        }\n        .float-4 {\n          --z-index: 4;\n        }\n        .float-5 {\n          --z-index: 5;\n        }\n        .float-6 {\n          --z-index: 6;\n        }\n        .float-7 {\n          --z-index: 7;\n        }\n        .float-8 {\n          --z-index: 8;\n        }\n        .float-9 {\n          --z-index: 9;\n        }\n        .float-10 {\n          --z-index: 10;\n        }\n      `}</style>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/portfolio/portfolio-hero-showcases/floating-elements.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 hero with floating shapes and images drifting around a centered headline. Use it to add motion and personality to a creative portfolio landing.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}