{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "web-performance-page-shadcnui",
  "type": "registry:component",
  "title": "Web Performance Page",
  "description": "Real-time analysis of web vitals and performance metrics",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/web-performance/web-performance-page.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { motion, type Variants } from \"framer-motion\";\nimport {\n  Activity,\n  AlertCircle,\n  CheckCircle2,\n  Code2,\n  Download,\n  FileCode,\n  FileImage,\n  FileType,\n  Layout,\n  Lightbulb,\n  Smartphone,\n  Zap,\n} from \"lucide-react\";\n\n// ============================================================================\n// TYPES & INTERFACES\n// ============================================================================\n\ninterface WebVitalCardProps {\n  label: string;\n  value: string | number;\n  unit?: string;\n  description: string;\n  status: \"good\" | \"needs-improvement\" | \"poor\";\n  icon: React.ReactNode;\n}\n\ninterface ResourceItem {\n  name: string;\n  type: \"js\" | \"css\" | \"image\" | \"font\" | \"other\";\n  size: string;\n  time: string;\n}\n\n// ============================================================================\n// ANIMATION VARIANTS\n// ============================================================================\n\nconst containerVariants: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.1,\n      delayChildren: 0.2,\n    },\n  },\n};\n\nconst itemVariants: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.4 },\n  },\n};\n\n// ============================================================================\n// COMPONENTS\n// ============================================================================\n\nfunction PerformanceHeader() {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.5 }}\n      className=\"mb-12 space-y-4\"\n    >\n      <div className=\"flex flex-col justify-between gap-4 md:flex-row md:items-center\">\n        <div className=\"space-y-2\">\n          <Badge\n            variant=\"outline\"\n            className=\"inline-flex items-center gap-2 rounded-full border-border/50 bg-background/55 px-4 py-1.5 text-xs uppercase tracking-[0.2em] text-foreground/70 backdrop-blur\"\n          >\n            <span className=\"h-2 w-2 rounded-full bg-emerald-500\" />\n            Audit Complete\n          </Badge>\n\n          <h1 className=\"text-balance text-3xl font-semibold tracking-tight text-foreground md:text-4xl\">\n            Web Performance\n          </h1>\n          <p className=\"max-w-2xl text-foreground/70\">\n            Real-time analysis of your application&apos;s Core Web Vitals,\n            resource loading, and overall performance score.\n          </p>\n        </div>\n\n        <div className=\"flex gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"rounded-full border-border/40 bg-background/60 backdrop-blur hover:border-border/60 hover:bg-background/70\"\n          >\n            <Download className=\"h-4 w-4\" />\n          </Button>\n          <Button className=\"rounded-full bg-primary text-primary-foreground hover:bg-primary/90\">\n            Run Audit\n          </Button>\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\nfunction WebVitalCard({\n  label,\n  value,\n  unit,\n  description,\n  status,\n  icon,\n}: WebVitalCardProps) {\n  const statusColors = {\n    good: \"text-emerald-500 bg-emerald-500/10 border-emerald-500/20\",\n    \"needs-improvement\": \"text-amber-500 bg-amber-500/10 border-amber-500/20\",\n    poor: \"text-red-500 bg-red-500/10 border-red-500/20\",\n  };\n\n  const StatusIcon =\n    status === \"good\"\n      ? CheckCircle2\n      : status === \"needs-improvement\"\n        ? AlertCircle\n        : AlertCircle;\n\n  return (\n    <motion.div\n      variants={itemVariants}\n      whileHover={{ y: -4 }}\n      className=\"group relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur transition-all hover:border-border/60 hover:shadow-lg\"\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10\" />\n\n      <div className=\"flex items-start justify-between mb-4\">\n        <div className=\"p-2 rounded-lg bg-background/50 border border-border/20 text-foreground/70\">\n          {icon}\n        </div>\n        <div\n          className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${statusColors[status]}`}\n        >\n          <StatusIcon className=\"h-3.5 w-3.5\" />\n          <span className=\"capitalize\">{status.replace(\"-\", \" \")}</span>\n        </div>\n      </div>\n\n      <div className=\"space-y-1 mb-4\">\n        <h3 className=\"text-sm font-medium text-foreground/60\">{label}</h3>\n        <div className=\"flex items-baseline gap-1\">\n          <span className=\"text-3xl font-bold text-foreground tracking-tight\">\n            {value}\n          </span>\n          {unit && (\n            <span className=\"text-sm font-medium text-foreground/40\">\n              {unit}\n            </span>\n          )}\n        </div>\n      </div>\n\n      <p className=\"text-xs text-foreground/50 leading-relaxed\">\n        {description}\n      </p>\n    </motion.div>\n  );\n}\n\nfunction PerformanceScore() {\n  const score = 92;\n  const radius = 80;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (score / 100) * circumference;\n\n  return (\n    <motion.div\n      variants={itemVariants}\n      className=\"relative overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-8 backdrop-blur flex flex-col items-center justify-center text-center\"\n    >\n      <div className=\"relative mb-6\">\n        {/* Background Circle */}\n        <svg className=\"h-48 w-48 -rotate-90 transform\">\n          <circle\n            cx=\"96\"\n            cy=\"96\"\n            r={radius}\n            stroke=\"currentColor\"\n            strokeWidth=\"12\"\n            fill=\"transparent\"\n            className=\"text-muted/20\"\n          />\n          {/* Progress Circle */}\n          <motion.circle\n            initial={{ strokeDashoffset: circumference }}\n            animate={{ strokeDashoffset }}\n            transition={{ duration: 1.5, ease: \"easeOut\" }}\n            cx=\"96\"\n            cy=\"96\"\n            r={radius}\n            stroke=\"currentColor\"\n            strokeWidth=\"12\"\n            fill=\"transparent\"\n            strokeDasharray={circumference}\n            strokeLinecap=\"round\"\n            className=\"text-emerald-500\"\n          />\n        </svg>\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n          <span className=\"text-5xl font-bold tracking-tighter text-foreground\">\n            {score}\n          </span>\n          <span className=\"text-sm font-medium uppercase tracking-widest text-foreground/40\">\n            Score\n          </span>\n        </div>\n      </div>\n\n      <h3 className=\"text-lg font-semibold text-foreground mb-2\">\n        Excellent Performance\n      </h3>\n      <p className=\"text-sm text-foreground/60 max-w-[250px]\">\n        Your page is optimized and delivering a great user experience.\n      </p>\n    </motion.div>\n  );\n}\n\nfunction ResourceBreakdown() {\n  const resources: ResourceItem[] = [\n    { name: \"main-app.js\", type: \"js\", size: \"142 KB\", time: \"45ms\" },\n    { name: \"styles.css\", type: \"css\", size: \"24 KB\", time: \"12ms\" },\n    { name: \"hero-image.webp\", type: \"image\", size: \"86 KB\", time: \"120ms\" },\n    { name: \"inter-font.woff2\", type: \"font\", size: \"32 KB\", time: \"25ms\" },\n    { name: \"analytics.js\", type: \"js\", size: \"15 KB\", time: \"30ms\" },\n  ];\n\n  const getIcon = (type: ResourceItem[\"type\"]) => {\n    switch (type) {\n      case \"js\":\n        return <FileCode className=\"h-4 w-4 text-yellow-500\" />;\n      case \"css\":\n        return <FileType className=\"h-4 w-4 text-blue-500\" />;\n      case \"image\":\n        return <FileImage className=\"h-4 w-4 text-purple-500\" />;\n      case \"font\":\n        return <FileType className=\"h-4 w-4 text-red-500\" />;\n      default:\n        return <FileCode className=\"h-4 w-4 text-gray-500\" />;\n    }\n  };\n\n  return (\n    <motion.div\n      variants={itemVariants}\n      className=\"col-span-1 lg:col-span-2 overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur\"\n    >\n      <div className=\"flex items-center justify-between mb-6\">\n        <h3 className=\"text-lg font-semibold text-foreground\">\n          Resource Breakdown\n        </h3>\n        <Badge variant=\"secondary\" className=\"bg-background/50\">\n          5 Requests\n        </Badge>\n      </div>\n\n      <div className=\"space-y-4\">\n        {resources.map((resource, index) => (\n          <div\n            key={index}\n            className=\"flex items-center justify-between p-3 rounded-lg border border-border/20 bg-background/30 hover:bg-background/50 transition-colors\"\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"p-2 rounded-md bg-background/50 border border-border/20\">\n                {getIcon(resource.type)}\n              </div>\n              <div>\n                <p className=\"text-sm font-medium text-foreground\">\n                  {resource.name}\n                </p>\n                <p className=\"text-xs text-foreground/50 uppercase tracking-wider\">\n                  {resource.type}\n                </p>\n              </div>\n            </div>\n            <div className=\"text-right\">\n              <p className=\"text-sm font-medium text-foreground\">\n                {resource.time}\n              </p>\n              <p className=\"text-xs text-foreground/50\">{resource.size}</p>\n            </div>\n          </div>\n        ))}\n      </div>\n    </motion.div>\n  );\n}\n\nfunction PerformanceTips() {\n  const tips = [\n    {\n      title: \"Optimize LCP\",\n      icon: <Layout className=\"h-5 w-5\" />,\n      items: [\n        \"Use Next.js Image component for optimized image loading\",\n        \"Implement lazy loading for images below the fold\",\n        \"Minimize render-blocking resources (CSS/JS)\",\n        \"Use modern image formats (WebP, AVIF)\",\n      ],\n    },\n    {\n      title: \"Improve FID/INP\",\n      icon: <Zap className=\"h-5 w-5\" />,\n      items: [\n        \"Break up long tasks with setTimeout or requestIdleCallback\",\n        \"Use code splitting to reduce JavaScript bundle size\",\n        \"Implement React.lazy() for component lazy loading\",\n        \"Optimize event handlers and avoid heavy computations\",\n      ],\n    },\n    {\n      title: \"Reduce CLS\",\n      icon: <Smartphone className=\"h-5 w-5\" />,\n      items: [\n        \"Set explicit width and height on images and videos\",\n        \"Reserve space for ads and embeds\",\n        \"Avoid inserting content above existing content\",\n        \"Use transform animations instead of layout changes\",\n      ],\n    },\n    {\n      title: \"Optimize Resources\",\n      icon: <Code2 className=\"h-5 w-5\" />,\n      items: [\n        \"Enable Brotli/Gzip compression\",\n        \"Implement HTTP/2 or HTTP/3\",\n        \"Use CDN for static assets\",\n        \"Enable browser caching with proper headers\",\n      ],\n    },\n  ];\n\n  return (\n    <motion.div\n      variants={itemVariants}\n      className=\"overflow-hidden rounded-2xl border border-border/40 bg-background/60 p-6 backdrop-blur\"\n    >\n      <div className=\"flex items-center gap-2 mb-6\">\n        <Lightbulb className=\"h-5 w-5 text-amber-500\" />\n        <h3 className=\"text-lg font-semibold text-foreground\">\n          Performance Optimization Tips\n        </h3>\n      </div>\n\n      <div className=\"grid gap-6 sm:grid-cols-2\">\n        {tips.map((tip, index) => (\n          <div\n            key={index}\n            className=\"space-y-3 p-4 rounded-lg border border-border/20 bg-background/30\"\n          >\n            <div className=\"flex items-center gap-2\">\n              <div className=\"p-2 rounded-md bg-primary/10 text-primary\">\n                {tip.icon}\n              </div>\n              <h4 className=\"font-semibold text-foreground\">{tip.title}</h4>\n            </div>\n            <ul className=\"space-y-2\">\n              {tip.items.map((item, i) => (\n                <li\n                  key={i}\n                  className=\"flex items-start gap-2 text-sm text-foreground/70\"\n                >\n                  <CheckCircle2 className=\"h-4 w-4 mt-0.5 text-emerald-500 flex-shrink-0\" />\n                  <span>{item}</span>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    </motion.div>\n  );\n}\n\n// ============================================================================\n// MAIN PAGE COMPONENT\n// ============================================================================\n\nexport function WebPerformancePage() {\n  return (\n    <main className=\"relative min-h-screen overflow-hidden bg-background\">\n      {/* Glassmorphism background blobs */}\n      <div className=\"absolute inset-0 -z-10 pointer-events-none\">\n        <div className=\"absolute left-1/2 top-0 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.035] blur-[140px]\" />\n        <div className=\"absolute bottom-0 right-0 h-[360px] w-[360px] rounded-full bg-foreground/[0.025] blur-[120px]\" />\n        <div className=\"absolute top-1/2 left-1/4 h-[400px] w-[400px] rounded-full bg-primary/[0.02] blur-[150px]\" />\n      </div>\n\n      <div className=\"relative px-6 py-8 lg:py-12\">\n        <div className=\"mx-auto max-w-7xl\">\n          <PerformanceHeader />\n\n          <motion.div\n            variants={containerVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            className=\"space-y-6\"\n          >\n            {/* Web Vitals Grid */}\n            <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-2\">\n              <WebVitalCard\n                label=\"Largest Contentful Paint (LCP)\"\n                value=\"1.2\"\n                unit=\"s\"\n                description=\"Time it takes for the main content to load.\"\n                status=\"good\"\n                icon={<Layout className=\"h-5 w-5\" />}\n              />\n              <WebVitalCard\n                label=\"First Input Delay (FID)\"\n                value=\"12\"\n                unit=\"ms\"\n                description=\"Time from first interaction to browser response.\"\n                status=\"good\"\n                icon={<Zap className=\"h-5 w-5\" />}\n              />\n              <WebVitalCard\n                label=\"Cumulative Layout Shift (CLS)\"\n                value=\"0.04\"\n                description=\"Visual stability of the page layout.\"\n                status=\"good\"\n                icon={<Layout className=\"h-5 w-5\" />}\n              />\n              <WebVitalCard\n                label=\"Interaction to Next Paint (INP)\"\n                value=\"180\"\n                unit=\"ms\"\n                description=\"Responsiveness to user interactions.\"\n                status=\"needs-improvement\"\n                icon={<Activity className=\"h-5 w-5\" />}\n              />\n            </div>\n\n            {/* Detailed Stats Row */}\n            <div className=\"grid gap-6 lg:grid-cols-3\">\n              <PerformanceScore />\n              <ResourceBreakdown />\n            </div>\n\n            {/* Performance Tips */}\n            <PerformanceTips />\n          </motion.div>\n        </div>\n      </div>\n    </main>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/web-performance-page-shadcnui.tsx"
    }
  ]
}