blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-FluidBtn/ButtonsEyeCatching.tsx

@@ -1,628 +1,627 @@
-'use client'
-
-import * as React from 'react'
-import Link from 'next/link'
-import { usePathname, useRouter } from 'next/navigation'
-import { cn } from '@/utilities/ui'
-import { Button, type ButtonProps } from '@/components/ui/button'
-import type { Page, Post } from '@/payload-types'
-import * as LucideIcons from 'lucide-react'
-const useDrawerClose = () => undefined
-
-// import './index.scss'
-
-
-const useDrawerCloseIfAvailable = () => {
-  try {
-    return useDrawerClose()
-  } catch {
-    return undefined
-  }
-}
-
-export type ButtonsEyeCatchingProps = {
-  variant?: 'v1' | 'v2' | 'v3' | 'v4' | 'v5' | 'v6' | 'v7'
-  label?: string
-  displayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly'
-  iconPosition?: 'before' | 'after'
-  iconName?: string
-  type?: 'custom' | 'reference' | null
-  reference?: {
-    relationTo: 'pages' | 'posts'
-    value: Page | Post | string | number
-  } | null
-  url?: string | null
-  newTab?: boolean
-  size?: ButtonProps['size']
-  className?: string
-  wrapperClassName?: string
-  fullWidth?: boolean
-  disabled?: ButtonProps['disabled']
-  closeDrawerOnClick?: boolean
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
-  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void
-  onSubmit?: (e: React.FormEvent<HTMLButtonElement>) => void
-  form?: string
-  htmlType?: 'submit' | 'button' | 'reset'
-}
-
-const getCollectionPath = (relationTo: string) => {
-  return relationTo === 'posts' ? 'posts' : relationTo
-}
-
-const getHref = (props: ButtonsEyeCatchingProps): string | null => {
-  const { type, reference, url } = props
-
-  if (type === 'reference' && reference?.value) {
-    const slug =
-      typeof reference.value === 'object' && 'slug' in reference.value
-        ? reference.value.slug
-        : typeof reference.value === 'string'
-          ? reference.value
-          : null
-
-    if (!slug) return null
-
-    const basePath =
-      reference.relationTo === 'pages' ? '' : `/${getCollectionPath(reference.relationTo)}`
-
-    return `${basePath}/${slug}`
-  }
-
-  return url || null
-}
-
-const LinkWrapper: React.FC<
-  React.PropsWithChildren<{
-    href: string
-    newTab?: boolean
-    onClick?: () => void
-    className?: string
-    closeDrawerOnClick?: boolean
-  }>
-> = ({ href, newTab, onClick, className, children, closeDrawerOnClick = true }) => {
-  const closeDrawer = useDrawerClose?.() || (() => {})
-  const pathname = usePathname()
-
-  const hashIndex = href.indexOf('#')
-  const hasHash = hashIndex >= 0
-  const basePath = hasHash ? href.slice(0, hashIndex) : href
-  const hash = hasHash ? href.slice(hashIndex) : ''
-
-  const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
-  const isSamePageHash = hasHash && (basePath === '' || normalise(basePath) === normalise(pathname))
-
-  const handleClick = (e: React.MouseEvent) => {
-    onClick?.()
-
-    if (isSamePageHash && hash) {
-      e.preventDefault()
-
-      const targetId = hash.slice(1)
-      const el = document.getElementById(targetId)
-
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-        window.history.pushState(null, '', href)
-      }
-
-      if (closeDrawerOnClick) {
-        closeDrawer()
-      }
-
-      return
-    }
-
-    if (closeDrawerOnClick && !newTab) {
-      closeDrawer()
-    }
-  }
-
-  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
-
-  return (
-    <Link href={href} {...newTabProps} onClick={handleClick} className={className} prefetch>
-      {children}
-    </Link>
-  )
-}
-function GlassChip() {
-  return (
-    <div className="absolute w-full h-full group mx-auto left-0 right-0 rounded-2xl squircle overflow-hidden">
-      <div
-        className="
-          absolute inset-0 mx-auto
-          flex items-center justify-center
-          overflow-hidden
-          rounded-full
-          border-t border-b border-white/10
-          bg-white/[0.05]
-          text-white
-          text-[18px]
-          font-bold
-          tracking-[1px]
-          backdrop-blur-[15px]
-          shadow-[0_15px_35px_rgba(255,255,255,0.15)]
-          transition-all duration-500
-          hover:tracking-[2px]
-
-          before:absolute
-          before:left-0
-          before:top-0
-          before:h-full
-          before:w-1/2
-          before:skew-x-[45deg]
-          before:bg-[linear-gradient(to_left,rgba(255,255,255,0.22),transparent)]
-          before:transition-transform
-          before:duration-700
-          hover:before:translate-x-[220%]
-
-          after:absolute
-          after:inset-[1px]
-          after:rounded-full
-          after:border
-          after:border-white/10
-          after:shadow-[inset_0_1px_0_rgba(255,255,255,0.45),inset_0_-8px_18px_rgba(0,0,0,0.25)]
-        "
-      ></div>
-
-      <div
-        className="
-          absolute left-1/2 -translate-x-1/2
-          -top-[3px]
-          h-[8px] w-[30px]
-          rounded-full
-          bg-[#ba55d3]
-          shadow-[0_0_5px_#663399,0_0_15px_#ba55d3,0_0_30px_#663399,0_0_60px_#ff00ff]
-          transition-all duration-500
-          group-hover:top-0
-          group-hover:bg-[#ba55d355]
-          group-hover:h-full
-          group-hover:w-[80%]
-          group-hover:rounded-full
-          group-hover:delay-300
-        "
-      />
-
-      <div
-        className="
-          absolute left-1/2 -translate-x-1/2
-          -bottom-[3px]
-          h-[8px] w-[30px]
-          rounded-full
-          bg-[#ba55d3]
-          shadow-[0_0_5px_#663399,0_0_15px_#ba55d3,0_0_30px_#663399,0_0_60px_#ff00ff]
-          transition-all duration-500
-          group-hover:bottom-0
-          group-hover:bg-[#ba55d399]
-          group-hover:h-full
-          group-hover:brightness-150
-          group-hover:w-[80%]
-          group-hover:rounded-full
-          group-hover:delay-300
-        "
-      />
-    </div>
-  )
-}
-function EyeCatchingButton_v1(props: ButtonProps & { wrapperClassName?: string }) {
-  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
-
-  const sizeClasses = {
-    sm: 'h-8 w-fit',
-    default: 'h-10 w-40',
-    lg: 'h-12 w-48',
-    icon: 'h-10 w-10',
-    clear: ''
-  }
-
-  return (
-    <div
-      className={cn(
-        sizeClasses[size || 'default'],
-        wrapperClassName,
-        'relative min-w-fit overflow-hidden rounded-2xl p-0.5 font-semibold group',
-        'border-1 border-stone-800/20',
-        '-bg-card !dark:bg-zinc-900',
-        'shadow',
-        'drop-shadow-[2px_4px_6px_rgba(0,0,0,0.25)]',
-        'transition-all duration-300 hover:duration-300',
-        'hover:-translate-y-0.5 hover:scale-[1]',
-        'hover:!bg-[rgba(102,51,153,1)] hover:border-0 hover:border-[#985fd023] hover:drop-shadow-[inset_0px_0px_6px_rgba(102,51,153,1)]'
-      )}
-    >
-      <GlassChip />
-
-      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none rounded-2xl overflow-hidden blur-[4px] brightness-[1.2]" />
-
-      <Button
-        {...buttonProps}
-        className={cn(
-          buttonProps.className,
-          'h-full w-full rounded-full text-zinc-800 dark:text-zinc-200 backdrop-blur-xl -bg-card dark:!bg-zinc-900 flex items-center justify-center gap-2',
-          'border-2 border-ridge border-[#938eab8c]',
-          'group-hover:shadow-[inset_0_1px_6px_rgba(255,255,255,0.28),inset_0_-8px_18px_rgba(0,0,0,0.22)]',
-          'group-active:translate-y-[1px] group-active:scale-[0.985]',
-          // 'group-active:bg-[rgba(74,35,120,0.95)]',
-          'group-active:shadow-[inset_0_3px_10px_rgba(0,0,0,0.45),inset_0_1px_2px_rgba(255,255,255,0.18)]',
-          'group-active:duration-75'
-        )}
-      >
-        {children}
-      </Button>
-    </div>
-  )
-}
-
-function EyeCatchingButton_v2(props: ButtonProps & { wrapperClassName?: string }) {
-  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
-
-  const sizeClasses = {
-    sm: 'h-8',
-    default: 'h-10',
-    lg: 'h-12',
-    icon: 'h-10 w-10',
-    clear: ''
-  }
-
-  return (
-    <div
-      className={cn(
-        'eyecatchingbtn-2',
-        sizeClasses[size || 'default'],
-        wrapperClassName,
-        'relative overflow-hidden rounded-2xl dark:bg-card-purple bg-violet-600 shadow border dark:border-stone-900/50 group border-stone-400 p-0.5 min-w-fit hover:bg-violet-600 hover:brightness-110 duration-300 hover:duration-300 transition-all font-semibold',
-        'transition-all duration-300 ease-out',
-        'hover:-translate-y-0.5 hover:scale-[1]',
-        'hover:border-[#985fd066] hover:shadow-[0_0_22px_rgba(152,95,208,0.32)] hover:drop-shadow-[0_8px_18px_rgba(102,51,153,0.35)]',
-        'active:translate-y-0 active:scale-[0.975]',
-        'active:shadow-[inset_0_2px_10px_rgba(0,0,0,0.35),0_0_10px_rgba(152,95,208,0.25)]',
-        'active:duration-75'
-      )}
-    >
-      <GlassChip />
-      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none rounded-2xl overflow-hidden blur-[4px] brightness-[1.2]" />
-      <Button
-        {...buttonProps}
-        className={cn(
-          buttonProps.className,
-          'h-full w-full rounded-full text-zinc-800 dark:text-zinc-200 backdrop-blur-xl bg-card-purple dark:bg-zinc-900 flex items-center justify-center gap-2'
-        )}
-      >
-        {children}
-      </Button>
-    </div>
-  )
-}
-
-function EyeCatchingButton_v3(props: ButtonProps & { wrapperClassName?: string }) {
-  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
-
-  const sizeClasses = {
-    sm: 'h-8 w-fit',
-    default: 'h-10 w-40',
-    lg: 'h-12 w-48',
-    icon: 'h-10 w-10',
-    clear: ''
-  }
-
-  return (
-    <div
-      className={cn(
-        sizeClasses[size || 'default'],
-        wrapperClassName,
-        'relative overflow-hidden rounded-2xl dark:bg-card-purple bg-violet-600 shadow border dark:border-[rgba(132,43,222,0.5)] group  border-[rgba(132,43,222,0.5)] p-0.5 min-w-fit hover:bg-violet-600 hover:brightness-110 duration-300 hover:duration-300 transition-all font-semibold drop-shadow-xl'
-        // 'relative min-w-fit overflow-hidden rounded-2xl p-0.5 font-semibold group',
-        // 'border-2 border-[rgba(132,43,222,0.915)]',
-        // '!bg-[rgba(102,51,153,0.551)]',
-        // 'drop-shadow-[2px_4px_6px_rgba(0,0,0,0.25)]',
-        // 'transition-all duration-300 hover:duration-300 ease-in-out',
-        // 'hover:!bg-[rgba(102,51,153,0.842)] hover:!mix-blend-normal hover:brightness-110'
-      )}
-    >
-      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite_reverse] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none blur-[4px] brightness-[1.2]" />
-      <Button
-        {...buttonProps}
-        className={cn(
-          buttonProps.className,
-          'h-full w-full rounded-full text-zinc-800 dark:text-zinc-800 backdrop-blur-xl bg-[radial-gradient(circle_at_center,_#e4e0e0,_#9b9898)] dark:bg-[radial-gradient(circle_at_center,_#e4e0e0,_#9b9898)] --bg-zinc-300 --dark:bg-zinc-300 flex items-center justify-center gap-2 drop-shadow-md'
-        )}
-      >
-        {children}
-      </Button>
-    </div>
-  )
-}
-
-function EyeCatchingButton_v4(props: ButtonProps & { wrapperClassName?: string }) {
-  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
-
-  const sizeClasses = {
-    sm: 'h-8',
-    default: 'h-10',
-    lg: 'h-12',
-    icon: 'h-10 w-10',
-    clear: ''
-  }
-
-  return (
-    <div
-      className={cn(
-        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
-        sizeClasses[size || 'default'],
-        wrapperClassName
-      )}
-    >
-      <Button
-        {...buttonProps}
-        className={cn(
-          'w-full animate-bg-shine border-[1px] rounded-full bg-card shadow-xl bg-[length:200%_100%] tracking-wide flex items-center justify-center gap-2',
-          'dark:bg-[linear-gradient(110deg,#09090B,45%,#27272A,55%,#09090B)] dark:text-zinc-200 dark:border-stone-800 font-semibold',
-          'bg-[linear-gradient(110deg,#FFF,45%,#E4E4E7,55%,#FFF)] text-zinc-800 border-stone-300',
-          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
-          buttonProps.className
-        )}
-      >
-        {children}
-      </Button>
-    </div>
-  )
-}
-
-function EyeCatchingButton_v5(props: ButtonProps & { wrapperClassName?: string }) {
-  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
-
-  const sizeClasses = {
-    sm: 'h-8',
-    default: 'h-10',
-    lg: 'h-12',
-    icon: 'h-10 w-10',
-    clear: ''
-  }
-
-  return (
-    <div
-      className={cn(
-        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
-        sizeClasses[size || 'default'],
-        wrapperClassName
-      )}
-    >
-      <Button
-        {...buttonProps}
-        className={cn(
-          'w-full border border-stone-800 rounded-full shadow-xl tracking-wide flex items-center justify-center gap-2',
-          'bg-[radial-gradient(circle,_rgba(255,_255,_255,_1),_rgba(230,_230,_235,_0.95))] bg-[length:200%_100%] animate-bg-shine',
-          '!text-stone-950 hover:text-stone-950 font-semibold',
-          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
-          buttonProps.className
-        )}
-      >
-        {children}
-      </Button>
-    </div>
-  )
-}
-
-function EyeCatchingButton_v6(props: ButtonProps & { wrapperClassName?: string }) {
-  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
-
-  const sizeClasses = {
-    sm: 'h-8',
-    default: 'h-10',
-    lg: 'h-12',
-    icon: 'h-10 w-10',
-    clear: ''
-  }
-
-  return (
-    <div
-      className={cn(
-        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
-        sizeClasses[size || 'default'],
-        wrapperClassName
-      )}
-    >
-      <Button
-        {...buttonProps}
-        className={cn(
-          'w-full border border-stone-800 rounded-full shadow-xl tracking-wide flex items-center justify-center gap-2',
-          'bg-[radial-gradient(circle,_rgba(190,_242,_100,_1),_rgba(132,_204,_22,_0.95))] bg-[length:200%_100%] animate-bg-shine',
-          '!text-stone-950 hover:text-stone-950 font-semibold',
-          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
-          buttonProps.className
-        )}
-      >
-        {children}
-      </Button>
-    </div>
-  )
-}
-
-function EyeCatchingButton_v7(props: ButtonProps & { wrapperClassName?: string }) {
-  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
-
-  const sizeClasses = {
-    sm: 'text-sm',
-    default: 'text-base',
-    lg: 'text-lg',
-    icon: 'text-base',
-    clear: ''
-  }
-
-  return (
-    <div className={cn('relative inline-flex items-center min-w-fit', wrapperClassName)}>
-      <Button
-        {...buttonProps}
-        variant="ghost"
-        className={cn(
-          'p-0 h-auto bg-transparent shadow-none border-0 rounded-none',
-          'tracking-wide underline-none hover:brightness-110',
-          'text-zinc-800 dark:text-zinc-200 font-semibold',
-          'hover:text-violet-300 transition-colors duration-200',
-          sizeClasses[size || 'default'],
-          buttonProps.className
-        )}
-      >
-        {children}
-      </Button>
-    </div>
-  )
-}
-
-function renderVariant(
-  variant: NonNullable<ButtonsEyeCatchingProps['variant']>,
-  props: ButtonProps & { wrapperClassName?: string }
-) {
-  switch (variant) {
-    case 'v1':
-      return <EyeCatchingButton_v1 {...props} />
-    case 'v2':
-      return <EyeCatchingButton_v2 {...props} />
-    case 'v3':
-      return <EyeCatchingButton_v3 {...props} />
-    case 'v4':
-      return <EyeCatchingButton_v4 {...props} />
-    case 'v5':
-      return <EyeCatchingButton_v5 {...props} />
-    case 'v6':
-      return <EyeCatchingButton_v6 {...props} />
-    case 'v7':
-      return <EyeCatchingButton_v7 {...props} />
-    default:
-      return <EyeCatchingButton_v1 {...props} />
-  }
-}
-
-export const ButtonsEyeCatching = ({
-  variant = 'v1',
-  label,
-  displayMode = 'iconWithLabel',
-  iconPosition = 'before',
-  iconName,
-  type: linkType,
-  reference,
-  url,
-  newTab,
-  size,
-  className,
-  wrapperClassName,
-  fullWidth,
-  disabled,
-  closeDrawerOnClick = true,
-  onClick,
-  onMouseEnter,
-  onSubmit,
-  form,
-  htmlType
-}: ButtonsEyeCatchingProps) => {
-  const closeDrawer = useDrawerClose?.() || (() => {})
-  const router = useRouter()
-  const pathname = usePathname()
-
-  const href = getHref({ type: linkType, reference, url, label })
-
-  const IconComponent =
-    iconName && LucideIcons[iconName as keyof typeof LucideIcons]
-      ? (LucideIcons[iconName as keyof typeof LucideIcons] as React.ComponentType<{
-          className?: string
-        }>)
-      : null
-
-  const hashIndex = href?.indexOf('#') ?? -1
-  const hasHash = hashIndex >= 0
-  const basePath = hasHash && href ? href.slice(0, hashIndex) : href
-  const hash = hasHash && href ? href.slice(hashIndex) : ''
-
-  const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
-  const isSamePageHash =
-    hasHash && (basePath === '' || normalise(basePath ?? undefined) === normalise(pathname))
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (onClick) {
-      onClick(e)
-      if (e.defaultPrevented) return
-    }
-
-    if (isSamePageHash && hash) {
-      e.preventDefault()
-
-      const targetId = hash.slice(1)
-      const el = document.getElementById(targetId)
-
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-
-        if (href) {
-          window.history.pushState(null, '', href)
-        }
-      }
-
-      if (closeDrawerOnClick) {
-        closeDrawer()
-      }
-
-      return
-    }
-
-    if (closeDrawerOnClick && !newTab && href) {
-      closeDrawer()
-    }
-
-    if (href) {
-      e.preventDefault()
-      router.push(href)
-    }
-  }
-
-  const iconElement =
-    IconComponent && displayMode !== 'labelOnly' ? (
-      <IconComponent
-        className={cn('h-4 w-4', size === 'sm' && 'h-3 w-3', size === 'lg' && 'h-5 w-5')}
-      />
-    ) : null
-
-  let buttonChildren: React.ReactNode
-
-  if (displayMode === 'iconOnly') {
-    buttonChildren = iconElement
-  } else if (displayMode === 'labelOnly') {
-    buttonChildren = label
-  } else {
-    buttonChildren =
-      iconPosition === 'before' ? (
-        <>
-          {iconElement}
-          {label}
-        </>
-      ) : (
-        <>
-          {label}
-          {iconElement}
-        </>
-      )
-  }
-
-  const btn = renderVariant(variant, {
-    size,
-    disabled,
-    className: cn(fullWidth ? 'w-full' : undefined, className),
-    wrapperClassName,
-    children: buttonChildren,
-    onClick: handleClick,
-    onMouseEnter,
-    onSubmit,
-    form,
-    type: htmlType
-  })
-
-  if (href && newTab) {
-    return (
-      <LinkWrapper href={href} newTab={newTab} closeDrawerOnClick={closeDrawerOnClick}>
-        {btn}
-      </LinkWrapper>
-    )
-  }
-
-  return btn
-}
+'use client'
+
+import * as React from 'react'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { cn } from '@/utilities/ui'
+import { Button, type ButtonProps } from '@/components/ui/button'
+import type { Page } from '@/payload-types'
+import * as LucideIcons from 'lucide-react'
+const useDrawerClose = () => undefined
+
+// import './index.scss'
+
+const useDrawerCloseIfAvailable = () => {
+  try {
+    return useDrawerClose()
+  } catch {
+    return undefined
+  }
+}
+
+export type ButtonsEyeCatchingProps = {
+  variant?: 'v1' | 'v2' | 'v3' | 'v4' | 'v5' | 'v6' | 'v7'
+  label?: string
+  displayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly'
+  iconPosition?: 'before' | 'after'
+  iconName?: string
+  type?: 'custom' | 'reference' | null
+  reference?: {
+    relationTo: 'pages'
+    value: Page | string | number
+  } | null
+  url?: string | null
+  newTab?: boolean
+  size?: ButtonProps['size']
+  className?: string
+  wrapperClassName?: string
+  fullWidth?: boolean
+  disabled?: ButtonProps['disabled']
+  closeDrawerOnClick?: boolean
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  onSubmit?: (e: React.FormEvent<HTMLButtonElement>) => void
+  form?: string
+  htmlType?: 'submit' | 'button' | 'reset'
+}
+
+const getCollectionPath = (relationTo: string) => {
+  return relationTo
+}
+
+const getHref = (props: ButtonsEyeCatchingProps): string | null => {
+  const { type, reference, url } = props
+
+  if (type === 'reference' && reference?.value) {
+    const slug =
+      typeof reference.value === 'object' && 'slug' in reference.value
+        ? reference.value.slug
+        : typeof reference.value === 'string'
+          ? reference.value
+          : null
+
+    if (!slug) return null
+
+    const basePath =
+      reference.relationTo === 'pages' ? '' : `/${getCollectionPath(reference.relationTo)}`
+
+    return `${basePath}/${slug}`
+  }
+
+  return url || null
+}
+
+const LinkWrapper: React.FC<
+  React.PropsWithChildren<{
+    href: string
+    newTab?: boolean
+    onClick?: () => void
+    className?: string
+    closeDrawerOnClick?: boolean
+  }>
+> = ({ href, newTab, onClick, className, children, closeDrawerOnClick = true }) => {
+  const closeDrawer = useDrawerClose?.() || (() => {})
+  const pathname = usePathname()
+
+  const hashIndex = href.indexOf('#')
+  const hasHash = hashIndex >= 0
+  const basePath = hasHash ? href.slice(0, hashIndex) : href
+  const hash = hasHash ? href.slice(hashIndex) : ''
+
+  const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
+  const isSamePageHash = hasHash && (basePath === '' || normalise(basePath) === normalise(pathname))
+
+  const handleClick = (e: React.MouseEvent) => {
+    onClick?.()
+
+    if (isSamePageHash && hash) {
+      e.preventDefault()
+
+      const targetId = hash.slice(1)
+      const el = document.getElementById(targetId)
+
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        window.history.pushState(null, '', href)
+      }
+
+      if (closeDrawerOnClick) {
+        closeDrawer()
+      }
+
+      return
+    }
+
+    if (closeDrawerOnClick && !newTab) {
+      closeDrawer()
+    }
+  }
+
+  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+  return (
+    <Link href={href} {...newTabProps} onClick={handleClick} className={className} prefetch>
+      {children}
+    </Link>
+  )
+}
+function GlassChip() {
+  return (
+    <div className="absolute w-full h-full group mx-auto left-0 right-0 rounded-full squircle overflow-hidden">
+      <div
+        className="
+          absolute inset-0 mx-auto
+          flex items-center justify-center
+          overflow-hidden
+          rounded-full
+          border-t border-b border-white/10
+          bg-white/[0.05]
+          text-white
+          text-[18px]
+          font-bold
+          tracking-[1px]
+          backdrop-blur-[15px]
+          shadow-[0_15px_35px_rgba(255,255,255,0.15)]
+          transition-all duration-500
+          hover:tracking-[2px]
+
+          before:absolute
+          before:left-0
+          before:top-0
+          before:h-full
+          before:w-1/2
+          before:skew-x-[45deg]
+          before:bg-[linear-gradient(to_left,rgba(255,255,255,0.22),transparent)]
+          before:transition-transform
+          before:duration-700
+          hover:before:translate-x-[220%]
+
+          after:absolute
+          after:inset-[1px]
+          after:rounded-full
+          after:border
+          after:border-white/10
+          after:shadow-[inset_0_1px_0_rgba(255,255,255,0.45),inset_0_-8px_18px_rgba(0,0,0,0.25)]
+        "
+      ></div>
+
+      <div
+        className="
+          absolute left-1/2 -translate-x-1/2
+          -top-[3px]
+          h-[8px] w-[30px]
+          rounded-full
+          bg-[#ba55d3]
+          shadow-[0_0_5px_#663399,0_0_15px_#ba55d3,0_0_30px_#663399,0_0_60px_#ff00ff]
+          transition-all duration-500
+          group-hover:top-0
+          group-hover:bg-[#ba55d355]
+          group-hover:h-full
+          group-hover:w-[80%]
+          group-hover:rounded-full
+          group-hover:delay-300
+        "
+      />
+
+      <div
+        className="
+          absolute left-1/2 -translate-x-1/2
+          -bottom-[3px]
+          h-[8px] w-[30px]
+          rounded-full
+          bg-[#ba55d3]
+          shadow-[0_0_5px_#663399,0_0_15px_#ba55d3,0_0_30px_#663399,0_0_60px_#ff00ff]
+          transition-all duration-500
+          group-hover:bottom-0
+          group-hover:bg-[#ba55d399]
+          group-hover:h-full
+          group-hover:brightness-150
+          group-hover:w-[80%]
+          group-hover:rounded-full
+          group-hover:delay-300
+        "
+      />
+    </div>
+  )
+}
+function EyeCatchingButton_v1(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8 w-fit',
+    default: 'h-10 w-40',
+    lg: 'h-12 w-48',
+    icon: 'h-10 w-10',
+    clear: '',
+  }
+
+  return (
+    <div
+      className={cn(
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+        'relative min-w-fit overflow-hidden rounded-full p-0.5 font-semibold group',
+        'border-1 border-stone-800/20',
+        'bg-white dark:!bg-zinc-900',
+        'shadow',
+        'drop-shadow-[2px_4px_6px_rgba(0,0,0,0.25)]',
+        'transition-all duration-300 hover:duration-300',
+        'hover:-translate-y-0.5 hover:scale-[1]',
+        'hover:!bg-[rgba(102,51,153,1)] hover:border-0 hover:border-[#985fd023] hover:drop-shadow-[inset_0px_0px_6px_rgba(102,51,153,1)]',
+      )}
+    >
+      <GlassChip />
+
+      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none rounded-full overflow-hidden blur-[4px] brightness-[1.2]" />
+
+      <Button
+        {...buttonProps}
+        className={cn(
+          buttonProps.className,
+          'h-full w-full rounded-full !bg-white hover:!bg-white !text-zinc-950 dark:!bg-zinc-900 dark:hover:!bg-zinc-900 dark:!text-white backdrop-blur-xl flex items-center justify-center gap-2',
+          'border-2 border-ridge border-[#938eab8c]',
+          'group-hover:shadow-[inset_0_1px_6px_rgba(255,255,255,0.28),inset_0_-8px_18px_rgba(0,0,0,0.22)]',
+          'group-active:translate-y-[1px] group-active:scale-[0.985]',
+          // 'group-active:bg-[rgba(74,35,120,0.95)]',
+          'group-active:shadow-[inset_0_3px_10px_rgba(0,0,0,0.45),inset_0_1px_2px_rgba(255,255,255,0.18)]',
+          'group-active:duration-75',
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v2(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8',
+    default: 'h-10',
+    lg: 'h-12',
+    icon: 'h-10 w-10',
+    clear: '',
+  }
+
+  return (
+    <div
+      className={cn(
+        'eyecatchingbtn-2',
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+        'relative overflow-hidden rounded-full dark:bg-card-purple bg-violet-600 shadow border dark:border-stone-900/50 group border-stone-400 p-0.5 min-w-fit hover:bg-violet-600 hover:brightness-110 duration-300 hover:duration-300 transition-all font-semibold',
+        'transition-all duration-300 ease-out',
+        'hover:-translate-y-0.5 hover:scale-[1]',
+        'hover:border-[#985fd066] hover:shadow-[0_0_22px_rgba(152,95,208,0.32)] hover:drop-shadow-[0_8px_18px_rgba(102,51,153,0.35)]',
+        'active:translate-y-0 active:scale-[0.975]',
+        'active:shadow-[inset_0_2px_10px_rgba(0,0,0,0.35),0_0_10px_rgba(152,95,208,0.25)]',
+        'active:duration-75',
+      )}
+    >
+      <GlassChip />
+      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none rounded-full overflow-hidden blur-[4px] brightness-[1.2]" />
+      <Button
+        {...buttonProps}
+        className={cn(
+          buttonProps.className,
+          'h-full w-full rounded-full !bg-violet-700 hover:!bg-violet-700 !text-white backdrop-blur-xl dark:!bg-zinc-900 dark:hover:!bg-zinc-900 dark:!text-white flex items-center justify-center gap-2',
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v3(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8 w-fit',
+    default: 'h-10 w-40',
+    lg: 'h-12 w-48',
+    icon: 'h-10 w-10',
+    clear: '',
+  }
+
+  return (
+    <div
+      className={cn(
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+        'relative overflow-hidden rounded-full dark:bg-card-purple bg-violet-600 shadow border dark:border-[rgba(132,43,222,0.5)] group  border-[rgba(132,43,222,0.5)] p-0.5 min-w-fit hover:bg-violet-600 hover:brightness-110 duration-300 hover:duration-300 transition-all font-semibold drop-shadow-xl',
+        // 'relative min-w-fit overflow-hidden rounded-full p-0.5 font-semibold group',
+        // 'border-2 border-[rgba(132,43,222,0.915)]',
+        // '!bg-[rgba(102,51,153,0.551)]',
+        // 'drop-shadow-[2px_4px_6px_rgba(0,0,0,0.25)]',
+        // 'transition-all duration-300 hover:duration-300 ease-in-out',
+        // 'hover:!bg-[rgba(102,51,153,0.842)] hover:!mix-blend-normal hover:brightness-110'
+      )}
+    >
+      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite_reverse] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none blur-[4px] brightness-[1.2]" />
+      <Button
+        {...buttonProps}
+        className={cn(
+          buttonProps.className,
+          'h-full w-full rounded-full !bg-zinc-200 hover:!bg-zinc-300 !text-zinc-950 dark:!bg-zinc-200 dark:hover:!bg-zinc-300 dark:!text-zinc-950 backdrop-blur-xl flex items-center justify-center gap-2 drop-shadow-md',
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v4(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8',
+    default: 'h-10',
+    lg: 'h-12',
+    icon: 'h-10 w-10',
+    clear: '',
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+      )}
+    >
+      <Button
+        {...buttonProps}
+        className={cn(
+          'w-full animate-bg-shine border-[1px] rounded-full !bg-white hover:!bg-zinc-100 shadow-xl bg-[length:200%_100%] tracking-wide flex items-center justify-center gap-2',
+          'dark:!bg-zinc-900 dark:hover:!bg-zinc-800 dark:!text-zinc-100 dark:border-stone-800 font-semibold',
+          '!text-zinc-900 border-stone-300',
+          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
+          buttonProps.className,
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v5(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8',
+    default: 'h-10',
+    lg: 'h-12',
+    icon: 'h-10 w-10',
+    clear: '',
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+      )}
+    >
+      <Button
+        {...buttonProps}
+        className={cn(
+          'w-full border border-stone-800 rounded-full shadow-xl tracking-wide flex items-center justify-center gap-2',
+          '!bg-white hover:!bg-zinc-100 bg-[length:200%_100%] animate-bg-shine dark:!bg-white dark:hover:!bg-zinc-100',
+          '!text-stone-900 hover:!text-stone-900 font-semibold',
+          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
+          buttonProps.className,
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v6(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8',
+    default: 'h-10',
+    lg: 'h-12',
+    icon: 'h-10 w-10',
+    clear: '',
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+      )}
+    >
+      <Button
+        {...buttonProps}
+        className={cn(
+          'w-full border border-stone-800 rounded-full shadow-xl tracking-wide flex items-center justify-center gap-2',
+          'bg-[radial-gradient(circle,_rgba(190,_242,_100,_1),_rgba(132,_204,_22,_0.95))] bg-[length:200%_100%] animate-bg-shine',
+          '!text-stone-900 hover:!text-stone-900 font-semibold',
+          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
+          buttonProps.className,
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v7(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'text-sm',
+    default: 'text-base',
+    lg: 'text-lg',
+    icon: 'text-base',
+    clear: '',
+  }
+
+  return (
+    <div className={cn('relative inline-flex items-center min-w-fit', wrapperClassName)}>
+      <Button
+        {...buttonProps}
+        variant="ghost"
+        className={cn(
+          'p-0 h-auto bg-transparent shadow-none border-0 rounded-none',
+          'tracking-wide underline-none hover:brightness-110',
+          'text-zinc-800 dark:text-zinc-200 font-semibold',
+          'hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200',
+          sizeClasses[size || 'default'],
+          buttonProps.className,
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function renderVariant(
+  variant: NonNullable<ButtonsEyeCatchingProps['variant']>,
+  props: ButtonProps & { wrapperClassName?: string },
+) {
+  switch (variant) {
+    case 'v1':
+      return <EyeCatchingButton_v1 {...props} />
+    case 'v2':
+      return <EyeCatchingButton_v2 {...props} />
+    case 'v3':
+      return <EyeCatchingButton_v3 {...props} />
+    case 'v4':
+      return <EyeCatchingButton_v4 {...props} />
+    case 'v5':
+      return <EyeCatchingButton_v5 {...props} />
+    case 'v6':
+      return <EyeCatchingButton_v6 {...props} />
+    case 'v7':
+      return <EyeCatchingButton_v7 {...props} />
+    default:
+      return <EyeCatchingButton_v1 {...props} />
+  }
+}
+
+export const ButtonsEyeCatching = ({
+  variant = 'v1',
+  label,
+  displayMode = 'iconWithLabel',
+  iconPosition = 'before',
+  iconName,
+  type: linkType,
+  reference,
+  url,
+  newTab,
+  size,
+  className,
+  wrapperClassName,
+  fullWidth,
+  disabled,
+  closeDrawerOnClick = true,
+  onClick,
+  onMouseEnter,
+  onSubmit,
+  form,
+  htmlType,
+}: ButtonsEyeCatchingProps) => {
+  const closeDrawer = useDrawerClose?.() || (() => {})
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const href = getHref({ type: linkType, reference, url, label })
+
+  const IconComponent =
+    iconName && LucideIcons[iconName as keyof typeof LucideIcons]
+      ? (LucideIcons[iconName as keyof typeof LucideIcons] as React.ComponentType<{
+          className?: string
+        }>)
+      : null
+
+  const hashIndex = href?.indexOf('#') ?? -1
+  const hasHash = hashIndex >= 0
+  const basePath = hasHash && href ? href.slice(0, hashIndex) : href
+  const hash = hasHash && href ? href.slice(hashIndex) : ''
+
+  const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
+  const isSamePageHash =
+    hasHash && (basePath === '' || normalise(basePath ?? undefined) === normalise(pathname))
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(e)
+      if (e.defaultPrevented) return
+    }
+
+    if (isSamePageHash && hash) {
+      e.preventDefault()
+
+      const targetId = hash.slice(1)
+      const el = document.getElementById(targetId)
+
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+
+        if (href) {
+          window.history.pushState(null, '', href)
+        }
+      }
+
+      if (closeDrawerOnClick) {
+        closeDrawer()
+      }
+
+      return
+    }
+
+    if (closeDrawerOnClick && !newTab && href) {
+      closeDrawer()
+    }
+
+    if (href) {
+      e.preventDefault()
+      router.push(href)
+    }
+  }
+
+  const iconElement =
+    IconComponent && displayMode !== 'labelOnly' ? (
+      <IconComponent
+        className={cn('h-4 w-4', size === 'sm' && 'h-3 w-3', size === 'lg' && 'h-5 w-5')}
+      />
+    ) : null
+
+  let buttonChildren: React.ReactNode
+
+  if (displayMode === 'iconOnly') {
+    buttonChildren = iconElement
+  } else if (displayMode === 'labelOnly') {
+    buttonChildren = label
+  } else {
+    buttonChildren =
+      iconPosition === 'before' ? (
+        <>
+          {iconElement}
+          {label}
+        </>
+      ) : (
+        <>
+          {label}
+          {iconElement}
+        </>
+      )
+  }
+
+  const btn = renderVariant(variant, {
+    size,
+    disabled,
+    className: cn(fullWidth ? 'w-full' : undefined, className),
+    wrapperClassName,
+    children: buttonChildren,
+    onClick: handleClick,
+    onMouseEnter,
+    onSubmit,
+    form,
+    type: htmlType,
+  })
+
+  if (href && newTab) {
+    return (
+      <LinkWrapper href={href} newTab={newTab} closeDrawerOnClick={closeDrawerOnClick}>
+        {btn}
+      </LinkWrapper>
+    )
+  }
+
+  return btn
+}