Parallax Hero

"use client";

import Link from "next/link";
import * as React from "react";
import { PixelButton } from "@/components/ui/pixel/pixel-button";
import { cn } from "@/lib/utils";

export type PixelParallaxHeroShape = "square" | "circle" | "diamond" | "pill";

export interface PixelParallaxLayer {
  /** Size of the decorative layer in pixels */
  size?: number;
  /** Hex or rgba color */
  color?: string;
  /** Tailwind blur utility (e.g. blur-sm) */
  blurClassName?: string;
  /** 0-1 opacity */
  opacity?: number;
  /** Movement multiplier, higher = faster parallax */
  speed?: number;
  /** Extra class names for gradients/shadows */
  className?: string;
  /** Positioning within the hero canvas */
  position?: React.CSSProperties;
  /** Pixel-perfect shape */
  shape?: PixelParallaxHeroShape;
  /** Border color override */
  borderColor?: string;
}

export interface PixelParallaxHeroStat {
  label: string;
  value: string;
  hint?: string;
}

export interface PixelParallaxHeroAction {
  label: string;
  href?: string;
  icon?: React.ReactNode;
  variant?: "default" | "secondary" | "ghost" | "destructive";
  size?: "sm" | "md" | "lg";
  onClick?: () => void;
}

export interface PixelParallaxHeroProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  badge?: React.ReactNode;
  title?: React.ReactNode;
  subtitle?: React.ReactNode;

// ... (more code below)