{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "iphone-duo-closed-mockup",
  "title": "iPhone Duo Closed Mockup",
  "description": "A single folded iPhone Duo with a replaceable 1398 × 2034 external display and polished silver frame.",
  "files": [
    {
      "path": "components/phone-mockups/IphoneDuoClosedMockup.tsx",
      "content": "\"use client\";\n\nimport { useId } from \"react\";\n\nexport type IphoneDuoClosedMockupProps = {\n  /** Use a 1398 × 2034 screenshot (or the same aspect ratio) for an uncropped display. */\n  src?: string;\n  alt?: string;\n  fit?: \"cover\" | \"contain\";\n  className?: string;\n};\n\nexport default function IphoneDuoClosedMockup({\n  src = \"https://assets.uniquel.io/templates/startup-saas-landing/hero.png\",\n  alt = \"Mountain landscape on the iPhone Duo external display\",\n  fit = \"cover\",\n  className = \"\",\n}: IphoneDuoClosedMockupProps) {\n  const id = useId();\n  const fill = (name: string) => `url(#${id}-${name})`;\n  const width = (1398 / 460) * 25.4;\n  const height = (2034 / 460) * 25.4;\n  const x = (84.1 - width) / 2;\n  const y = (117.8 - height) / 2;\n  const screen = `M${x + 1.7} ${y}H${x + width - 11}Q${x + width} ${y} ${x + width} ${y + 11}V${y + height - 11}Q${x + width} ${y + height} ${x + width - 11} ${y + height}H${x + 1.7}Q${x} ${y + height} ${x} ${y + height - 1.7}V${y + 1.7}Q${x} ${y} ${x + 1.7} ${y}Z`;\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"-15 -12 114.1 146\"\n      role=\"img\"\n      aria-labelledby={`${id}-title`}\n      className={`block h-auto w-full max-w-sm ${className}`}\n    >\n      <title id={`${id}-title`}>{alt}</title>\n      <defs>\n        <linearGradient id={`${id}-metal`}>\n          <stop stopColor=\"#383c3e\" />\n          <stop offset=\".025\" stopColor=\"#fcfdfd\" />\n          <stop offset=\".05\" stopColor=\"#777e82\" />\n          <stop offset=\".09\" stopColor=\"#e8ebed\" />\n          <stop offset=\".5\" stopColor=\"#bac0c3\" />\n          <stop offset=\".93\" stopColor=\"#f9fafa\" />\n          <stop offset=\".98\" stopColor=\"#535b5e\" />\n          <stop offset=\"1\" stopColor=\"#d4d8da\" />\n        </linearGradient>\n        <linearGradient id={`${id}-rim`} x2=\"0\" y2=\"1\">\n          <stop stopColor=\"#fafafa\" />\n          <stop offset=\".25\" stopColor=\"#666d70\" />\n          <stop offset=\".5\" stopColor=\"#e1e5e7\" />\n          <stop offset=\".8\" stopColor=\"#777d80\" />\n          <stop offset=\"1\" stopColor=\"#fafafa\" />\n        </linearGradient>\n        <linearGradient id={`${id}-reflection`} x2=\"1\" y2=\"1\">\n          <stop stopColor=\"#fff\" stopOpacity=\".08\" />\n          <stop offset=\".5\" stopColor=\"#fff\" stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor=\"#fff\" stopOpacity=\".03\" />\n        </linearGradient>\n        <filter\n          id={`${id}-shadow`}\n          x=\"-30%\"\n          y=\"-20%\"\n          width=\"160%\"\n          height=\"150%\"\n        >\n          <feDropShadow dx=\"0\" dy=\"2.5\" stdDeviation=\"2\" floodOpacity=\".2\" />\n        </filter>\n        <clipPath id={`${id}-screen`}>\n          <path d={screen} />\n        </clipPath>\n      </defs>\n      <g filter={fill(\"shadow\")}>\n        {/* A narrow, low-contrast hinge keeps the folded edge present without competing with the display. */}\n        <rect\n          x=\"-.65\"\n          y=\"1.3\"\n          width=\"3.15\"\n          height=\"115.2\"\n          rx=\"1.2\"\n          fill={fill(\"metal\")}\n          stroke=\"#9da3a5\"\n          strokeOpacity=\".55\"\n          strokeWidth=\".18\"\n        />\n        <path\n          d=\"M.15 3V114.8\"\n          stroke=\"#fff\"\n          strokeOpacity=\".6\"\n          strokeWidth=\".18\"\n        />\n        <path\n          d=\"M1.1 1H71Q84.1 1 84.1 14.1V104.7Q84.1 117.8 71 117.8H1.1Z\"\n          fill={fill(\"metal\")}\n          stroke=\"#51575a\"\n          strokeWidth=\".35\"\n        />\n        <path\n          d=\"M2 .7H71Q83.4 .7 83.4 14V104Q83.4 117.1 71 117.1H2Z\"\n          fill=\"none\"\n          stroke={fill(\"rim\")}\n          strokeWidth=\".5\"\n        />\n        <path\n          d=\"M2.2 1.8H70.5Q82.5 1.8 82.5 14V103.8Q82.5 116.2 70.5 116.2H2.2Z\"\n          fill=\"#101314\"\n        />\n        <path d={screen} fill=\"#101314\" />\n        <g clipPath={fill(\"screen\")}>\n          <image\n            href={src}\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            preserveAspectRatio={\n              fit === \"contain\" ? \"xMidYMid meet\" : \"xMidYMid slice\"\n            }\n          />\n          <path d={screen} fill={fill(\"reflection\")} />\n        </g>\n        <path\n          d={screen}\n          fill=\"none\"\n          stroke=\"#000\"\n          strokeOpacity=\".5\"\n          strokeWidth=\".3\"\n        />\n        {/* External camera, as shown in the reference. */}\n        <circle\n          cx=\"73\"\n          cy=\"10.6\"\n          r=\"2.65\"\n          fill=\"#06090b\"\n          stroke=\"#384044\"\n          strokeWidth=\".2\"\n        />\n        <circle cx=\"73\" cy=\"10.6\" r=\"1.15\" fill=\"#131e2b\" />\n        <circle cx=\"72.65\" cy=\"10.2\" r=\".35\" fill=\"#647584\" opacity=\".55\" />\n        <rect\n          x=\"37\"\n          y=\".1\"\n          width=\"10\"\n          height=\".6\"\n          rx=\".3\"\n          fill={fill(\"metal\")}\n          stroke=\"#777\"\n          strokeWidth=\".15\"\n        />\n        <rect\n          x=\"50\"\n          y=\".1\"\n          width=\"10\"\n          height=\".6\"\n          rx=\".3\"\n          fill={fill(\"metal\")}\n          stroke=\"#777\"\n          strokeWidth=\".15\"\n        />\n        <path\n          d=\"M16 .9h1M69 .9h1M29 117h1M58 117h1M83.7 18v1\"\n          stroke=\"#777e80\"\n          strokeWidth=\".6\"\n        />\n      </g>\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/phone-mockups/IphoneDuoClosedMockup.tsx"
    }
  ],
  "categories": [
    "phone-mockups"
  ],
  "type": "registry:component"
}