{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "iphone-duo-open-mockup",
  "title": "iPhone Duo Open Mockup",
  "description": "A single fully open iPhone Duo with a flat, replaceable 2670 × 1878 display and subtle hinge detail.",
  "files": [
    {
      "path": "components/phone-mockups/IphoneDuoOpenMockup.tsx",
      "content": "\"use client\";\n\nimport { useId } from \"react\";\n\nexport type IphoneDuoOpenMockupProps = {\n  /** Use a 2670 × 1878 landscape screenshot (or the same aspect ratio). */\n  src?: string;\n  alt?: string;\n  fit?: \"cover\" | \"contain\";\n  className?: string;\n};\n\n/** Fully flat device. Dimensions in mm from https://www.apple.com/iphone-duo/specs/. */\nexport default function IphoneDuoOpenMockup({\n  src = \"https://assets.uniquel.io/templates/startup-saas-landing/hero.png\",\n  alt = \"Mountain landscape on the fully open iPhone Duo display\",\n  fit = \"cover\",\n  className = \"\",\n}: IphoneDuoOpenMockupProps) {\n  const id = useId();\n  const fill = (name: string) => `url(#${id}-${name})`;\n  // 7.6-inch inner display: 2670 × 1878 landscape at 430 ppi; body: 164.6 × 117.8 mm.\n  const width = (2670 / 430) * 25.4;\n  const height = (1878 / 430) * 25.4;\n  const x = (164.6 - width) / 2;\n  const y = (117.8 - height) / 2;\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"-16 -14 196.6 148\"\n      role=\"img\"\n      aria-labelledby={`${id}-title`}\n      className={`block h-auto w-full max-w-3xl ${className}`}\n    >\n      <title id={`${id}-title`}>{alt}</title>\n      <defs>\n        <linearGradient id={`${id}-metal`}>\n          <stop stopColor=\"#383d40\" />\n          <stop offset=\".012\" stopColor=\"#fbfcfc\" />\n          <stop offset=\".03\" stopColor=\"#8a9295\" />\n          <stop offset=\".15\" stopColor=\"#e8ebed\" />\n          <stop offset=\".49\" stopColor=\"#aab0b3\" />\n          <stop offset=\".5\" stopColor=\"#f9fafa\" />\n          <stop offset=\".51\" stopColor=\"#aab0b3\" />\n          <stop offset=\".94\" stopColor=\"#edf0f1\" />\n          <stop offset=\".985\" stopColor=\"#545c60\" />\n          <stop offset=\"1\" stopColor=\"#dce0e1\" />\n        </linearGradient>\n        <linearGradient id={`${id}-rim`} x2=\"0\" y2=\"1\">\n          <stop stopColor=\"#fff\" />\n          <stop offset=\".15\" stopColor=\"#7c8589\" />\n          <stop offset=\".5\" stopColor=\"#e0e4e6\" />\n          <stop offset=\".85\" stopColor=\"#7c8589\" />\n          <stop offset=\"1\" stopColor=\"#fff\" />\n        </linearGradient>\n        <linearGradient id={`${id}-crease`}>\n          <stop stopColor=\"#fff\" stopOpacity=\"0\" />\n          <stop offset=\".3\" stopColor=\"#fff\" stopOpacity=\".025\" />\n          <stop offset=\".5\" stopColor=\"#000\" stopOpacity=\".055\" />\n          <stop offset=\".7\" stopColor=\"#fff\" stopOpacity=\".025\" />\n          <stop offset=\"1\" stopColor=\"#fff\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient id={`${id}-reflection`} x2=\"1\" y2=\"1\">\n          <stop stopColor=\"#fff\" stopOpacity=\".06\" />\n          <stop offset=\".45\" stopColor=\"#fff\" stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor=\"#fff\" stopOpacity=\".025\" />\n        </linearGradient>\n        <filter\n          id={`${id}-shadow`}\n          x=\"-20%\"\n          y=\"-20%\"\n          width=\"140%\"\n          height=\"150%\"\n        >\n          <feDropShadow dx=\"0\" dy=\"2.5\" stdDeviation=\"2\" floodOpacity=\".2\" />\n        </filter>\n        <clipPath id={`${id}-screen`}>\n          <rect x={x} y={y} width={width} height={height} rx=\"8.2\" />\n        </clipPath>\n      </defs>\n      <g filter={fill(\"shadow\")}>\n        {/* One flat enclosure: no perspective bend or second device. */}\n        <rect\n          width=\"164.6\"\n          height=\"117.8\"\n          rx=\"11.5\"\n          fill={fill(\"metal\")}\n          stroke=\"#555d60\"\n          strokeWidth=\".4\"\n        />\n        <rect\n          x=\".75\"\n          y=\".65\"\n          width=\"163.1\"\n          height=\"116.5\"\n          rx=\"10.8\"\n          fill=\"none\"\n          stroke={fill(\"rim\")}\n          strokeWidth=\".45\"\n        />\n        <rect\n          x=\"1.6\"\n          y=\"1.5\"\n          width=\"161.4\"\n          height=\"114.8\"\n          rx=\"9.9\"\n          fill=\"#101314\"\n          stroke=\"#4c5255\"\n          strokeWidth=\".2\"\n        />\n        <rect\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          rx=\"8.2\"\n          fill=\"#101314\"\n        />\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          <rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            fill={fill(\"reflection\")}\n          />\n          <rect\n            x=\"79.3\"\n            y={y}\n            width=\"6\"\n            height={height}\n            fill={fill(\"crease\")}\n          />\n        </g>\n        <rect\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          rx=\"8.2\"\n          fill=\"none\"\n          stroke=\"#000\"\n          strokeOpacity=\".5\"\n          strokeWidth=\".3\"\n        />\n        {/* Hinge seams stop at the bezel; the inner camera is under the display. */}\n        <path d=\"M81.3 .7h2M81.3 117.1h2\" stroke=\"#636b6e\" strokeWidth=\".65\" />\n        <path\n          d=\"M.8 18v1M163.8 18v1M.8 98v1M163.8 98v1\"\n          stroke=\"#747d80\"\n          strokeWidth=\".6\"\n        />\n        <rect\n          x=\"112.6\"\n          y=\"-.6\"\n          width=\"10\"\n          height=\".65\"\n          rx=\".3\"\n          fill={fill(\"metal\")}\n          stroke=\"#777\"\n          strokeWidth=\".15\"\n        />\n        <rect\n          x=\"125.6\"\n          y=\"-.6\"\n          width=\"10\"\n          height=\".65\"\n          rx=\".3\"\n          fill={fill(\"metal\")}\n          stroke=\"#777\"\n          strokeWidth=\".15\"\n        />\n        <rect\n          x=\"164.55\"\n          y=\"31\"\n          width=\".65\"\n          height=\"16\"\n          rx=\".3\"\n          fill={fill(\"rim\")}\n          stroke=\"#777\"\n          strokeWidth=\".15\"\n        />\n      </g>\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/phone-mockups/IphoneDuoOpenMockup.tsx"
    }
  ],
  "categories": [
    "phone-mockups"
  ],
  "type": "registry:component"
}