About

'use client';import React from 'react';import { motion } from 'motion/react';type SpotlightProps = {  gradientFirst?: string;  gradientSecond?: string;  gradientThird?: string;  translateY?: number;  width?: number;  height?: number;  smallWidth?: number;  duration?: number;  xOffset?: number;};export const Spotlight = ({  gradientFirst = 'radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(336, 100%, 50%, 0.1) 0, hsla(341, 100%, 55%, 0.02) 50%, hsla(336, 100%, 45%, 0) 80%)',  gradientSecond = 'radial-gradient(50% 50% at 50% 50%, hsla(333, 100%, 85%, 0.06) 0, hsla(335, 100%, 55%, 0.02) 80%, transparent 100%)',  gradientThird = 'radial-gradient(50% 50% at 50% 50%, hsla(332, 100%, 85%, 0.04) 0, hsla(327, 100%, 85%, 0.04) 80%, transparent 100%)',  translateY = -350,  width = 560,  height = 1380,  smallWidth = 240,  duration = 7,  xOffset = 100,}: SpotlightProps = {}) => {  return (    <motion.div      initial={{        opacity: 0,      }}      animate={{        opacity: 1,      }}      transition={{        duration: 1.5,      }}      className="pointer-events-none absolute inset-0 z-10 h-full w-full"    >      <motion.div        animate={{          x: [0, xOffset, 0],        }}        transition={{          duration,          repeat: Infinity,          repeatType: 'reverse',          ease: 'easeInOut',        }}        className="pointer-events-none absolute top-0 left-0 z-0 h-screen w-screen"      >        <div          style={{            transform: `translateY(${translateY}px) rotate(-45deg)`,            background: gradientFirst,            width: `${width}px`,            height: `${height}px`,          }}          className={`absolute top-0 left-0`}        />        <div          style={{            transform: 'rotate(-45deg) translate(5%, -50%)',            background: gradientSecond,            width: `${smallWidth}px`,            height: `${height}px`,          }}          className={`absolute top-0 left-0 origin-top-left`}        />        <div          style={{            transform: 'rotate(-45deg) translate(-180%, -70%)',            background: gradientThird,            width: `${smallWidth}px`,            height: `${height}px`,          }}          className={`absolute top-0 left-0 origin-top-left`}        />      </motion.div>      <motion.div        animate={{          x: [0, -xOffset, 0],        }}        transition={{          duration,          repeat: Infinity,          repeatType: 'reverse',          ease: 'easeInOut',        }}        className="pointer-events-none absolute top-0 right-0 z-40 h-screen w-screen"      >        <div          style={{            transform: `translateY(${translateY}px) rotate(45deg)`,            background: gradientFirst,            width: `${width}px`,            height: `${height}px`,          }}          className={`absolute top-0 right-0`}        />        <div          style={{            transform: 'rotate(45deg) translate(-5%, -50%)',            background: gradientSecond,            width: `${smallWidth}px`,            height: `${height}px`,          }}          className={`absolute top-0 right-0 origin-top-right`}        />        <div          style={{            transform: 'rotate(45deg) translate(180%, -70%)',            background: gradientThird,            width: `${smallWidth}px`,            height: `${height}px`,          }}          className={`absolute top-0 right-0 origin-top-right`}        />      </motion.div>    </motion.div>  );};

import React from 'react';import { motion } from 'framer-motion';import { cn } from '@/lib/utils';interface CardProps {  icon: React.ReactNode;  title: string;  description: string;  className?: string;  variant?: 'emerald' | 'blue' | 'purple' | 'amber' | 'rose';  size?: 'sm' | 'md' | 'lg';  glowEffect?: boolean;  hoverScale?: number;  interactive?: boolean;  showGridLines?: boolean;}export const VARIANTS = {  emerald: {    accent: 'rose-500',    gradient: 'from-rose-500/20 to-rose-500/0',    shine:      '205deg, transparent 0deg, hsl(160deg 95% 39%) 20deg, hsl(160deg 100% 85% / 0.3) 280deg',    border: 'rose-500/20',    color: 'rgb(244 63 94)',  },  blue: {    accent: 'blue-500',    gradient: 'from-blue-500/20 to-blue-500/0',    shine:      '205deg, transparent 0deg, hsl(220deg 95% 39%) 20deg, hsl(220deg 100% 85% / 0.3) 280deg',    border: 'blue-500/20',    color: 'rgb(244 63 94)',  },  purple: {    accent: 'purple-500',    gradient: 'from-purple-500/20 to-purple-500/0',    shine:      '205deg, transparent 0deg, hsl(280deg 95% 39%) 20deg, hsl(280deg 100% 85% / 0.3) 280deg',    border: 'purple-500/20',    color: 'rgb(244 63 94)',  },  amber: {    accent: 'amber-500',    gradient: 'from-amber-500/20 to-amber-500/0',    shine:      '205deg, transparent 0deg, hsl(40deg 95% 39%) 20deg, hsl(40deg 100% 85% / 0.3) 280deg',    border: 'amber-500/20',    color: 'rgb(244 63 94)',  },  rose: {    accent: 'rose-500',    gradient: 'from-rose-500/20 to-rose-500/0',    shine:      '205deg, transparent 0deg, hsl(340deg 95% 39%) 20deg, hsl(340deg 100% 85% / 0.3) 280deg',    border: 'rose-500/20',    color: 'rgb(244 63 94)',  },};const SIZES = {  sm: {    padding: 'p-6 pt-12',    iconSize: 'h-5 w-5',    titleSize: 'text-sm',    descSize: 'text-xs',  },  md: {    padding: 'p-8 pt-16',    iconSize: 'h-6 w-6',    titleSize: 'text-base',    descSize: 'text-[15px]',  },  lg: {    padding: 'p-6 pt-16',    iconSize: 'h-7 w-7',    titleSize: 'text-lg',    descSize: 'text-base',  },};export function CardHoverEffect({  icon,  title,  description,  className,  variant = 'emerald',  size = 'md',  glowEffect = false,  hoverScale = 1.02,  interactive = true,  showGridLines = true,}: CardProps) {  const variantConfig = VARIANTS[variant];  const sizeConfig = SIZES[size];  const Div = interactive ? motion.div : 'div';  const IconWrapper = interactive ? motion.span : 'span';  return (    <Div      whileHover={interactive ? { scale: hoverScale } : undefined}      transition={{ duration: 0.3, ease: 'easeInOut', type: 'keyframes' }}      className={cn(        'group relative z-30 w-full cursor-pointer overflow-hidden rounded-2xl',        sizeConfig.padding,        // Light mode styles        'bg-white/80 before:bg-linear-to-b before:from-white/5 before:to-white/20 before:backdrop-blur-3xl',        'after:bg-linear-to-b after:from-transparent after:via-transparent after:to-white/20',        // Dark mode styles        'dark:bg-black/5 dark:before:bg-linear-to-b dark:before:from-black/5 dark:before:to-black/20',        'dark:after:to-black/20',        // Common styles        "before:absolute before:inset-0 before:rounded-[inherit] before:content-['']",        "after:absolute after:inset-0 after:rounded-[inherit] after:content-['']",        glowEffect && `hover:before:bg-${variantConfig.accent}/10`,        // Shadows        'shadow-[0px_3px_8px_rgba(0,0,0,0.04),0px_12px_20px_rgba(0,0,0,0.08)]',        'hover:shadow-[0px_5px_15px_rgba(0,0,0,0.03),0px_25px_35px_rgba(0,0,0,0.2)]',        'dark:shadow-[0px_3px_8px_rgba(0,0,0,0.08),0px_12px_20px_rgba(0,0,0,0.15)]',        'dark:hover:shadow-[0px_5px_15px_rgba(0,0,0,0.06),0px_25px_35px_rgba(0,0,0,0.4)]',        className,      )}      style={        {          '--card-color': variantConfig.color,        } as React.CSSProperties      }    >      {/* Moving Border */}      <div        className="absolute inset-0 overflow-hidden rounded-[inherit]"        style={{          mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',          maskComposite: 'exclude',          padding: '2px',        }}      >        <div          className="absolute inset-[-200%] opacity-0 transition-opacity duration-300 group-hover:opacity-100"          style={{            background: `conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 340deg, var(--card-color) 360deg)`,            animation: 'spin 4s linear infinite',          }}        />      </div>      {/* Icon */}      <IconWrapper        className="relative z-50 table rounded-xl pb-2"        whileHover={interactive ? { scale: 1.1 } : undefined}        transition={{ duration: 0.3, ease: 'easeInOut', type: 'keyframes' }}      >        <span          className={cn(            'absolute inset-[4.5px] rounded-[inherit]',            'bg-linear-to-b from-black/5 to-black/10 backdrop-blur-3xl',            'dark:from-white/10 dark:to-white/5',            'transition-all duration-300',          )}        />        <span          className={cn(            'relative z-1 block transition-colors duration-300',            'text-black/60 group-hover:text-[var(--card-color)]',            'dark:text-zinc-400',            sizeConfig.iconSize,          )}        >          {icon}        </span>      </IconWrapper>      {/* Content */}      <div className="relative z-30 mt-2">        <h3          className={cn(            'font-medium transition-colors duration-300',            'text-black/80 group-hover:text-[var(--card-color)]',            'dark:text-white/80',            sizeConfig.titleSize,          )}        >          {title}        </h3>        <p          className={cn(            'mt-1 transition-colors duration-300',            'text-black/60',            'dark:text-white/40',            sizeConfig.descSize,          )}        >          {description}        </p>      </div>      {/* Shine Effect */}      <div className="absolute inset-0 z-20 overflow-hidden rounded-[inherit] opacity-100 transition-all duration-500">        <div          className="absolute bottom-[55%] left-1/2 aspect-square w-[200%] -translate-x-1/2 rounded-[50%]"          style={{            background: `conic-gradient(from ${variantConfig.shine}, transparent 360deg)`,            filter: 'blur(40px)',          }}        />      </div>    </Div>  );}

'use client';import { cn } from '@/lib/utils';import { motion, MotionStyle, Transition } from 'motion/react';interface BorderBeamProps {  /**   * The size of the border beam.   */  size?: number;  /**   * The duration of the border beam.   */  duration?: number;  /**   * The delay of the border beam.   */  delay?: number;  /**   * The color of the border beam from.   */  colorFrom?: string;  /**   * The color of the border beam to.   */  colorTo?: string;  /**   * The motion transition of the border beam.   */  transition?: Transition;  /**   * The class name of the border beam.   */  className?: string;  /**   * The style of the border beam.   */  style?: React.CSSProperties;  /**   * Whether to reverse the animation direction.   */  reverse?: boolean;  /**   * The initial offset position (0-100).   */  initialOffset?: number;}export const BorderBeam = ({  className,  size = 50,  delay = 0,  duration = 6,  colorFrom = '#ffaa40',  colorTo = '#9c40ff',  transition,  style,  reverse = false,  initialOffset = 0,}: BorderBeamProps) => {  return (    <div className="pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)] [mask-composite:intersect] [mask-clip:padding-box,border-box]">      <motion.div        className={cn(          'absolute aspect-square',          'bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent',          className,        )}        style={          {            width: size,            offsetPath: `rect(0 auto auto 0 round ${size}px)`,            '--color-from': colorFrom,            '--color-to': colorTo,            ...style,          } as MotionStyle        }        initial={{ offsetDistance: `${initialOffset}%` }}        animate={{          offsetDistance: reverse            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]            : [`${initialOffset}%`, `${100 + initialOffset}%`],        }}        transition={{          repeat: Infinity,          ease: 'linear',          duration,          delay: -delay,          ...transition,        }}      />    </div>  );};

'use client';import { cn } from '@/lib/utils';import { motion, MotionStyle, Transition } from 'motion/react';interface BorderBeamProps {  /**   * The size of the border beam.   */  size?: number;  /**   * The duration of the border beam.   */  duration?: number;  /**   * The delay of the border beam.   */  delay?: number;  /**   * The color of the border beam from.   */  colorFrom?: string;  /**   * The color of the border beam to.   */  colorTo?: string;  /**   * The motion transition of the border beam.   */  transition?: Transition;  /**   * The class name of the border beam.   */  className?: string;  /**   * The style of the border beam.   */  style?: React.CSSProperties;  /**   * Whether to reverse the animation direction.   */  reverse?: boolean;  /**   * The initial offset position (0-100).   */  initialOffset?: number;}export const BorderBeam = ({  className,  size = 50,  delay = 0,  duration = 6,  colorFrom = '#ffaa40',  colorTo = '#9c40ff',  transition,  style,  reverse = false,  initialOffset = 0,}: BorderBeamProps) => {  return (    <div className="pointer-events-none absolute inset-0 rounded-[inherit] border border-transparent [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)] [mask-composite:intersect] [mask-clip:padding-box,border-box]">      <motion.div        className={cn(          'absolute aspect-square',          'bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent',          className,        )}        style={          {            width: size,            offsetPath: `rect(0 auto auto 0 round ${size}px)`,            '--color-from': colorFrom,            '--color-to': colorTo,            ...style,          } as MotionStyle        }        initial={{ offsetDistance: `${initialOffset}%` }}        animate={{          offsetDistance: reverse            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]            : [`${initialOffset}%`, `${100 + initialOffset}%`],        }}        transition={{          repeat: Infinity,          ease: 'linear',          duration,          delay: -delay,          ...transition,        }}      />    </div>  );};

// Component not found in registry

'use client';import React from 'react';import { motion } from 'motion/react';type SpotlightProps = {  gradientFirst?: string;  gradientSecond?: string;  gradientThird?: string;  translateY?: number;  width?: number;  height?: number;  smallWidth?: number;  duration?: number;  xOffset?: number;};export const Spotlight = ({  gradientFirst = 'radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(336, 100%, 50%, 0.1) 0, hsla(341, 100%, 55%, 0.02) 50%, hsla(336, 100%, 45%, 0) 80%)',  gradientSecond = 'radial-gradient(50% 50% at 50% 50%, hsla(333, 100%, 85%, 0.06) 0, hsla(335, 100%, 55%, 0.02) 80%, transparent 100%)',  gradientThird = 'radial-gradient(50% 50% at 50% 50%, hsla(332, 100%, 85%, 0.04) 0, hsla(327, 100%, 85%, 0.04) 80%, transparent 100%)',  translateY = -350,  width = 560,  height = 1380,  smallWidth = 240,  duration = 7,  xOffset = 100,}: SpotlightProps = {}) => {  return (    <motion.div      initial={{        opacity: 0,      }}      animate={{        opacity: 1,      }}      transition={{        duration: 1.5,      }}      className="pointer-events-none absolute inset-0 z-10 h-full w-full"    >      <motion.div        animate={{          x: [0, xOffset, 0],        }}        transition={{          duration,          repeat: Infinity,          repeatType: 'reverse',          ease: 'easeInOut',        }}        className="pointer-events-none absolute top-0 left-0 z-0 h-screen w-screen"      >        <div          style={{            transform: `translateY(${translateY}px) rotate(-45deg)`,            background: gradientFirst,            width: `${width}px`,            height: `${height}px`,          }}          className={`absolute top-0 left-0`}        />        <div          style={{            transform: 'rotate(-45deg) translate(5%, -50%)',            background: gradientSecond,            width: `${smallWidth}px`,            height: `${height}px`,          }}          className={`absolute top-0 left-0 origin-top-left`}        />        <div          style={{            transform: 'rotate(-45deg) translate(-180%, -70%)',            background: gradientThird,            width: `${smallWidth}px`,            height: `${height}px`,          }}          className={`absolute top-0 left-0 origin-top-left`}        />      </motion.div>      <motion.div        animate={{          x: [0, -xOffset, 0],        }}        transition={{          duration,          repeat: Infinity,          repeatType: 'reverse',          ease: 'easeInOut',        }}        className="pointer-events-none absolute top-0 right-0 z-40 h-screen w-screen"      >        <div          style={{            transform: `translateY(${translateY}px) rotate(45deg)`,            background: gradientFirst,            width: `${width}px`,            height: `${height}px`,          }}          className={`absolute top-0 right-0`}        />        <div          style={{            transform: 'rotate(45deg) translate(-5%, -50%)',            background: gradientSecond,            width: `${smallWidth}px`,            height: `${height}px`,          }}          className={`absolute top-0 right-0 origin-top-right`}        />        <div          style={{            transform: 'rotate(45deg) translate(180%, -70%)',            background: gradientThird,            width: `${smallWidth}px`,            height: `${height}px`,          }}          className={`absolute top-0 right-0 origin-top-right`}        />      </motion.div>    </motion.div>  );};

import { clsx, type ClassValue } from 'clsx';import { twMerge } from 'tailwind-merge';export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}