{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "iphone-duo-mockup",
  "title": "iPhone Duo Mockup",
  "description": "A silver foldable concept with polished edges, dual cameras, and one easily replaceable screenshot.",
  "files": [
    {
      "path": "components/phone-mockups/IphoneDuoMockup.tsx",
      "content": "\"use client\";\n\nimport { useId } from \"react\";\n\nexport type IphoneDuoMockupProps = {\n  /** Replace this URL with your screenshot. A landscape image around 4:3 works best. */\n  src?: string;\n  /** Accessible description of your screenshot. */\n  alt?: string;\n  /** Cover crops to fill the display; contain preserves the entire screenshot. */\n  fit?: \"cover\" | \"contain\";\n  className?: string;\n};\n\n/** A reference-inspired foldable concept, with one continuous, replaceable screen. */\nexport default function IphoneDuoMockup({\n  src = \"https://assets.uniquel.io/templates/startup-saas-landing/hero.png\",\n  alt = \"Mountain landscape displayed on an unfolded iPhone Duo concept\",\n  fit = \"cover\",\n  className = \"\",\n}: IphoneDuoMockupProps) {\n  const id = useId();\n  const fill = (name: string) => `url(#${id}-${name})`;\n  const screen =\n    \"M278 103 Q257 102 257 126 V458 Q257 482 281 480 L521 464 Q527 463 533 464 L773 480 Q797 482 797 458 V126 Q797 102 776 103 L534 119 Q527 120 520 119 Z\";\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 900 590\"\n      role=\"img\"\n      aria-labelledby={`${id}-title`}\n      className={`block h-auto w-full max-w-4xl ${className}`}\n    >\n      <title id={`${id}-title`}>{alt}</title>\n      <defs>\n        <linearGradient id={`${id}-metal`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n          <stop stopColor=\"#333638\" />\n          <stop offset=\".025\" stopColor=\"#f8f9f9\" />\n          <stop offset=\".045\" stopColor=\"#777c7f\" />\n          <stop offset=\".08\" stopColor=\"#e9ebeb\" />\n          <stop offset=\".35\" stopColor=\"#9da2a4\" />\n          <stop offset=\".5\" stopColor=\"#fafafa\" />\n          <stop offset=\".72\" stopColor=\"#a3a7a9\" />\n          <stop offset=\".94\" stopColor=\"#f5f6f6\" />\n          <stop offset=\".975\" stopColor=\"#515658\" />\n          <stop offset=\"1\" stopColor=\"#c7cbcd\" />\n        </linearGradient>\n        <linearGradient id={`${id}-glass`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop stopColor=\"#fafafa\" />\n          <stop offset=\".45\" stopColor=\"#e5e6e6\" />\n          <stop offset=\"1\" stopColor=\"#bfc3c5\" />\n        </linearGradient>\n        <linearGradient id={`${id}-rim`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop stopColor=\"#f8f8f8\" />\n          <stop offset=\".2\" stopColor=\"#7c8387\" />\n          <stop offset=\".5\" stopColor=\"#d9dcde\" />\n          <stop offset=\".8\" stopColor=\"#606568\" />\n          <stop offset=\"1\" stopColor=\"#f6f7f7\" />\n        </linearGradient>\n        <radialGradient id={`${id}-lens`}>\n          <stop stopColor=\"#162f42\" />\n          <stop offset=\".3\" stopColor=\"#080c12\" />\n          <stop offset=\".6\" stopColor=\"#1e252e\" />\n          <stop offset=\".72\" stopColor=\"#080a0e\" />\n          <stop offset=\"1\" stopColor=\"#202425\" />\n        </radialGradient>\n        <linearGradient id={`${id}-crease`}>\n          <stop stopColor=\"#fff\" stopOpacity=\"0\" />\n          <stop offset=\".32\" stopColor=\"#fff\" stopOpacity=\".06\" />\n          <stop offset=\".49\" stopColor=\"#000\" stopOpacity=\".17\" />\n          <stop offset=\".55\" stopColor=\"#000\" stopOpacity=\".07\" />\n          <stop offset=\".72\" stopColor=\"#fff\" stopOpacity=\".08\" />\n          <stop offset=\"1\" stopColor=\"#fff\" stopOpacity=\"0\" />\n        </linearGradient>\n        <linearGradient id={`${id}-reflection`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop stopColor=\"#fff\" stopOpacity=\".12\" />\n          <stop offset=\".48\" stopColor=\"#fff\" stopOpacity=\"0\" />\n          <stop offset=\"1\" stopColor=\"#fff\" stopOpacity=\".04\" />\n        </linearGradient>\n        <radialGradient id={`${id}-shadow`}>\n          <stop stopOpacity=\".23\" />\n          <stop offset=\"1\" stopOpacity=\"0\" />\n        </radialGradient>\n        <filter id={`${id}-depth`} x=\"-30%\" y=\"-20%\" width=\"170%\" height=\"160%\">\n          <feDropShadow dx=\"4\" dy=\"12\" stdDeviation=\"9\" floodOpacity=\".2\" />\n        </filter>\n        <clipPath id={`${id}-screen`}>\n          <path d={screen} />\n        </clipPath>\n      </defs>\n\n      {/* Grounding shadow and the rear silver enclosure. */}\n      <ellipse cx=\"473\" cy=\"512\" rx=\"357\" ry=\"29\" fill={fill(\"shadow\")} />\n      <g transform=\"rotate(-5 252 288)\" filter={fill(\"depth\")}>\n        <rect\n          x=\"103\"\n          y=\"92\"\n          width=\"276\"\n          height=\"398\"\n          rx=\"36\"\n          fill={fill(\"metal\")}\n          stroke=\"#555b5e\"\n        />\n        <rect\n          x=\"110\"\n          y=\"94\"\n          width=\"264\"\n          height=\"392\"\n          rx=\"32\"\n          fill=\"none\"\n          stroke=\"#fff\"\n          strokeOpacity=\".8\"\n        />\n        <rect\n          x=\"115\"\n          y=\"98\"\n          width=\"254\"\n          height=\"384\"\n          rx=\"29\"\n          fill={fill(\"glass\")}\n          stroke=\"#a4a8aa\"\n        />\n        <path d=\"M109 129V450\" stroke=\"#373c3e\" strokeWidth=\"2\" />\n        <path d=\"M112 130V447\" stroke=\"#fff\" />\n        <rect\n          x=\"102\"\n          y=\"179\"\n          width=\"4\"\n          height=\"22\"\n          rx=\"2\"\n          fill={fill(\"rim\")}\n          stroke=\"#777\"\n          strokeWidth=\".6\"\n        />\n        <rect\n          x=\"102\"\n          y=\"221\"\n          width=\"4\"\n          height=\"68\"\n          rx=\"2\"\n          fill={fill(\"rim\")}\n          stroke=\"#777\"\n          strokeWidth=\".6\"\n        />\n        <path d=\"M104 157h9M104 429h10\" stroke=\"#7f8486\" strokeWidth=\"3\" />\n        <rect\n          x=\"126\"\n          y=\"110\"\n          width=\"154\"\n          height=\"76\"\n          rx=\"29\"\n          fill={fill(\"rim\")}\n          stroke=\"#bcc0c2\"\n        />\n        <rect\n          x=\"129\"\n          y=\"113\"\n          width=\"148\"\n          height=\"69\"\n          rx=\"27\"\n          fill={fill(\"glass\")}\n          stroke=\"#fff\"\n          strokeOpacity=\".8\"\n        />\n        {[161, 222].map((cx) => (\n          <g key={cx}>\n            <circle\n              cx={cx}\n              cy=\"147\"\n              r=\"27\"\n              fill={fill(\"metal\")}\n              stroke=\"#808689\"\n            />\n            <circle\n              cx={cx}\n              cy=\"147\"\n              r=\"23.5\"\n              fill=\"#080a0c\"\n              stroke=\"#363b40\"\n              strokeWidth=\"2\"\n            />\n            <circle\n              cx={cx}\n              cy=\"147\"\n              r=\"19\"\n              fill={fill(\"lens\")}\n              stroke=\"#43494e\"\n              strokeWidth=\".7\"\n            />\n            <circle\n              cx={cx}\n              cy=\"147\"\n              r=\"9\"\n              fill=\"#070b12\"\n              stroke=\"#263844\"\n              strokeWidth=\"1.5\"\n            />\n            <ellipse\n              cx={cx - 6}\n              cy=\"137\"\n              rx=\"7\"\n              ry=\"3\"\n              fill=\"#b2ccdf\"\n              opacity=\".18\"\n              transform={`rotate(-35 ${cx - 6} 137)`}\n            />\n            <circle cx={cx + 5} cy=\"155\" r=\"3\" fill=\"#6c6f99\" opacity=\".3\" />\n          </g>\n        ))}\n        <circle cx=\"262\" cy=\"139\" r=\"6\" fill=\"#fbf5e6\" stroke=\"#c4c4bc\" />\n        <circle cx=\"262\" cy=\"159\" r=\"2\" fill=\"#656b6e\" />\n        {/* Centered on the full rear glass, including the area behind the display. */}\n        <g\n          transform=\"translate(214 262) scale(2.333333)\"\n          fill=\"#bfc2c2\"\n          fillOpacity=\".65\"\n        >\n          {/* Apple silhouette: Simple Icons (CC0), uniformly scaled from its 24×24 viewBox. */}\n          <path d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\" />\n        </g>\n      </g>\n\n      {/* Polished frame, hinge, black gasket, and continuous display. */}\n      <g filter={fill(\"depth\")}>\n        <path\n          d=\"M275 90 Q244 89 244 123 V461 Q244 494 276 493 L521 477 Q527 476 533 477 L778 493 Q810 494 810 461 V123 Q810 89 779 90 L534 106 Q527 107 520 106 Z\"\n          fill={fill(\"metal\")}\n          stroke=\"#52585b\"\n          strokeWidth=\"1.4\"\n        />\n        <path\n          d=\"M276 94 Q248 93 248 125 V460 Q248 489 279 488 L521 472 Q527 471 533 472 L776 488 Q806 489 806 460 V125 Q806 93 778 94 L534 110 Q527 111 520 110 Z\"\n          fill=\"#121516\"\n          stroke={fill(\"rim\")}\n          strokeWidth=\"2\"\n        />\n        <path d={screen} fill=\"#151719\" />\n        <g clipPath={fill(\"screen\")}>\n          <image\n            href={src}\n            x=\"257\"\n            y=\"103\"\n            width=\"540\"\n            height=\"378\"\n            preserveAspectRatio={\n              fit === \"contain\" ? \"xMidYMid meet\" : \"xMidYMid slice\"\n            }\n          />\n          <rect\n            x=\"257\"\n            y=\"103\"\n            width=\"540\"\n            height=\"378\"\n            fill={fill(\"reflection\")}\n          />\n          <rect x=\"505\" y=\"103\" width=\"44\" height=\"378\" fill={fill(\"crease\")} />\n        </g>\n        <path\n          d={screen}\n          fill=\"none\"\n          stroke=\"#000\"\n          strokeOpacity=\".65\"\n          strokeWidth=\"1.5\"\n        />\n        <path\n          d=\"M253 129V452M801 129V452\"\n          stroke=\"#e5e8e9\"\n          strokeOpacity=\".35\"\n        />\n        <path d=\"M520 108h14M520 475h14\" stroke=\"#5e6365\" strokeWidth=\"3\" />\n      </g>\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/phone-mockups/IphoneDuoMockup.tsx"
    }
  ],
  "categories": [
    "phone-mockups"
  ],
  "type": "registry:component"
}