{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mobile-mockup",
  "title": "Mobile Mockup",
  "author": "AlgorizeTech",
  "description": "Device frames for iPhone (5 through 17 Pro Max), Samsung and Pixel that wrap a screenshot, video or live children. Use them to present an app on a marketing page.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/MobileMockupBlock.tsx",
      "content": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MockupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  src?: string;\n  videoSrc?: string;\n}\n\nexport const Iphone17ProMaxMockup = React.forwardRef<HTMLDivElement, MockupProps>(\n  ({ children, src, videoSrc, className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative mx-auto w-[340px] h-[712px] rounded-[3.75rem] border-[3px] border-border bg-black flex-shrink-0\",\n          \"ring-[6px] ring-muted shadow-2xl\",\n          className\n        )}\n        {...props}\n      >\n        {/* Left rail: Action button, then volume up / down. */}\n        <div className=\"absolute -left-[13px] top-[128px] w-[5px] h-[30px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -left-[13px] top-[188px] w-[5px] h-[58px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -left-[13px] top-[260px] w-[5px] h-[58px] bg-muted rounded-l-md\"></div>\n\n        {/* Right rail: side button, then the flush Camera Control. */}\n        <div className=\"absolute -right-[13px] top-[200px] w-[5px] h-[88px] bg-muted rounded-r-md\"></div>\n        <div className=\"absolute -right-[12px] top-[320px] w-[4px] h-[36px] rounded-r-md bg-gradient-to-b from-foreground/20 to-foreground/30\"></div>\n\n        {/* The 17 Pro Max runs a near-uniform bezel, so the screen border is\n            thinner here than on the 14 Pro Max below. */}\n        <div className=\"relative w-full h-full rounded-[3.55rem] border-[7px] border-black bg-black overflow-hidden z-10\">\n          <div className=\"absolute top-[9px] inset-x-0 mx-auto w-[100px] h-[29px] bg-black rounded-full z-20 flex justify-between items-center px-3 shadow-inner\">\n            <div className=\"w-[10px] h-[10px] bg-zinc-900 rounded-full shadow-[inset_0_0_2px_rgba(255,255,255,0.08)]\"></div>\n            <div className=\"w-[13px] h-[13px] bg-zinc-900 rounded-full flex items-center justify-center relative shadow-[inset_0_0_2px_rgba(255,255,255,0.1)]\">\n              <div className=\"w-[6px] h-[6px] bg-blue-900/40 rounded-full relative\">\n                <div className=\"absolute inset-0 m-auto w-[2px] h-[2px] bg-blue-300/60 rounded-full\"></div>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"relative w-full h-full rounded-[3.1rem] overflow-hidden bg-background\">\n            {videoSrc ? (\n              <video src={videoSrc} autoPlay loop muted playsInline className=\"w-full h-full object-cover\" />\n            ) : src ? (\n              <img src={src} alt=\"Mockup\" className=\"w-full h-full object-cover\" />\n            ) : (\n              children\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nIphone17ProMaxMockup.displayName = \"Iphone17ProMaxMockup\";\n\nexport const Iphone14ProMaxMockup = React.forwardRef<HTMLDivElement, MockupProps>(\n  ({ children, src, videoSrc, className, ...props }, ref) => {\n    return (\n      <div \n        ref={ref}\n        className={cn(\n          \"relative mx-auto w-[330px] h-[680px] rounded-[3.5rem] border-[4px] border-border bg-black flex-shrink-0\",\n          \"ring-[8px] ring-muted\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"absolute -left-[14px] top-[120px] w-[6px] h-[28px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -left-[14px] top-[170px] w-[6px] h-[55px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -left-[14px] top-[240px] w-[6px] h-[55px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -right-[14px] top-[190px] w-[6px] h-[80px] bg-muted rounded-r-md\"></div>\n\n        <div className=\"relative w-full h-full rounded-[3.2rem] border-[10px] border-black bg-black overflow-hidden z-10\">\n          <div className=\"absolute top-2 inset-x-0 mx-auto w-[110px] h-[32px] bg-black rounded-full z-20 flex justify-end items-center px-4 shadow-inner\">\n            <div className=\"w-[14px] h-[14px] bg-zinc-900 rounded-full flex items-center justify-center relative shadow-[inset_0_0_2px_rgba(255,255,255,0.1)]\">\n               <div className=\"w-[6px] h-[6px] bg-blue-900/40 rounded-full relative\">\n                  <div className=\"absolute inset-0 m-auto w-[2px] h-[2px] bg-blue-300/60 rounded-full\"></div>\n               </div>\n            </div>\n          </div>\n\n          <div className=\"relative w-full h-full rounded-[2.6rem] overflow-hidden bg-background\">\n            {videoSrc ? (\n              <video src={videoSrc} autoPlay loop muted playsInline className=\"w-full h-full object-cover\" />\n            ) : src ? (\n              <img src={src} alt=\"Mockup\" className=\"w-full h-full object-cover\" />\n            ) : (\n              children\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nIphone14ProMaxMockup.displayName = \"Iphone14ProMaxMockup\";\n\nexport const Iphone12ProMaxMockup = React.forwardRef<HTMLDivElement, MockupProps>(\n  ({ children, src, videoSrc, className, ...props }, ref) => {\n    return (\n      <div \n        ref={ref}\n        className={cn(\n          \"relative mx-auto w-[330px] h-[680px] rounded-[3.5rem] border-[4px] border-border bg-black flex-shrink-0\",\n          \"ring-[8px] ring-muted\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"absolute -left-[14px] top-[120px] w-[6px] h-[28px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -left-[14px] top-[170px] w-[6px] h-[55px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -left-[14px] top-[240px] w-[6px] h-[55px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -right-[14px] top-[190px] w-[6px] h-[80px] bg-muted rounded-r-md\"></div>\n\n        <div className=\"relative w-full h-full rounded-[3.2rem] border-[10px] border-black bg-black overflow-hidden z-10\">\n          <div className=\"absolute top-0 inset-x-0 mx-auto w-[150px] h-[30px] bg-black rounded-b-3xl z-20 flex justify-center items-center gap-4\">\n            <div className=\"w-[40px] h-[6px] bg-zinc-900 rounded-full\"></div>\n            <div className=\"w-[12px] h-[12px] bg-blue-900/40 rounded-full relative shadow-[inset_0_0_2px_rgba(255,255,255,0.1)] flex items-center justify-center\">\n               <div className=\"w-[4px] h-[4px] bg-blue-300/60 rounded-full\"></div>\n            </div>\n          </div>\n\n          <div className=\"relative w-full h-full rounded-[2.6rem] overflow-hidden bg-background\">\n            {videoSrc ? (\n              <video src={videoSrc} autoPlay loop muted playsInline className=\"w-full h-full object-cover\" />\n            ) : src ? (\n              <img src={src} alt=\"Mockup\" className=\"w-full h-full object-cover\" />\n            ) : (\n              children\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nIphone12ProMaxMockup.displayName = \"Iphone12ProMaxMockup\";\n\n\nexport const Iphone5Mockup = React.forwardRef<HTMLDivElement, MockupProps>(\n  ({ children, src, videoSrc, className, ...props }, ref) => {\n    return (\n      <div \n        ref={ref}\n        className={cn(\n          \"relative mx-auto w-[280px] h-[580px] rounded-[2.5rem] border-[4px] border-border bg-black flex-shrink-0\",\n          \"ring-[6px] ring-muted\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"absolute -left-[10px] top-[80px] w-[4px] h-[24px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -left-[10px] top-[130px] w-[4px] h-[24px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute -left-[10px] top-[170px] w-[4px] h-[24px] bg-muted rounded-l-md\"></div>\n        <div className=\"absolute top-[10px] right-[50px] w-[40px] h-[4px] bg-muted rounded-t-md\"></div>\n\n        <div className=\"relative w-full h-full rounded-[2.2rem] border-[4px] border-black bg-black overflow-hidden z-10 flex flex-col justify-between\">\n          <div className=\"w-full h-[75px] bg-black flex justify-center items-center gap-3 relative shrink-0\">\n             <div className=\"w-[8px] h-[8px] bg-zinc-900 rounded-full border border-zinc-800 shadow-[inset_0_0_2px_rgba(255,255,255,0.1)]\"></div>\n             <div className=\"w-[45px] h-[6px] bg-zinc-800 rounded-full\"></div>\n          </div>\n          \n          <div className=\"relative w-full h-full bg-background overflow-hidden\">\n            {videoSrc ? (\n              <video src={videoSrc} autoPlay loop muted playsInline className=\"w-full h-full object-cover\" />\n            ) : src ? (\n              <img src={src} alt=\"Mockup\" className=\"w-full h-full object-cover\" />\n            ) : (\n              children\n            )}\n          </div>\n          \n          <div className=\"w-full h-[75px] bg-black flex justify-center items-center shrink-0\">\n            <div className=\"w-[44px] h-[44px] rounded-full border-[2px] border-zinc-800 flex justify-center items-center shadow-inner\">\n              <div className=\"w-[14px] h-[14px] rounded-[4px] border-[1px] border-zinc-700\"></div>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nIphone5Mockup.displayName = \"Iphone5Mockup\";\n\n\nexport const SamsungS24UltraMockup = React.forwardRef<HTMLDivElement, MockupProps>(\n  ({ children, src, videoSrc, className, ...props }, ref) => {\n    return (\n      <div \n        ref={ref}\n        className={cn(\n          \"relative mx-auto w-[330px] h-[700px] rounded-2xl border-[3px] border-foreground/25 bg-black flex-shrink-0\",\n          \"ring-[4px] ring-muted\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"absolute -right-[7px] top-[150px] w-[4px] h-[40px] bg-foreground/25 rounded-r-md\"></div>\n        <div className=\"absolute -right-[7px] top-[220px] w-[4px] h-[80px] bg-foreground/25 rounded-r-md\"></div>\n        \n        <div className=\"relative w-full h-full rounded-[0.85rem] border-[6px] border-black bg-black overflow-hidden z-10\">\n          <div className=\"absolute top-[8px] inset-x-0 mx-auto w-[14px] h-[14px] bg-zinc-950 rounded-full z-20 shadow-[inset_0_0_2px_rgba(255,255,255,0.1)] flex items-center justify-center\">\n            <div className=\"w-[5px] h-[5px] bg-blue-900/60 rounded-full\"></div>\n          </div>\n          \n          <div className=\"relative w-full h-full rounded-[0.5rem] overflow-hidden bg-background\">\n            {videoSrc ? (\n              <video src={videoSrc} autoPlay loop muted playsInline className=\"w-full h-full object-cover\" />\n            ) : src ? (\n              <img src={src} alt=\"Mockup\" className=\"w-full h-full object-cover\" />\n            ) : (\n              children\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nSamsungS24UltraMockup.displayName = \"SamsungS24UltraMockup\";\n\nexport const GooglePixel8Mockup = React.forwardRef<HTMLDivElement, MockupProps>(\n  ({ children, src, videoSrc, className, ...props }, ref) => {\n    return (\n      <div \n        ref={ref}\n        className={cn(\n          \"relative mx-auto w-[320px] h-[670px] rounded-[3rem] border-[4px] border-foreground/20 bg-black flex-shrink-0\",\n          \"ring-[6px] ring-muted shadow-2xl\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"absolute -right-[10px] top-[180px] w-[6px] h-[50px] bg-foreground/20 rounded-r-md\"></div>\n        <div className=\"absolute -right-[10px] top-[260px] w-[6px] h-[100px] bg-foreground/20 rounded-r-md\"></div>\n        \n        <div className=\"relative w-full h-full rounded-[2.75rem] border-[8px] border-black bg-black overflow-hidden z-10\">\n          <div className=\"absolute top-[12px] inset-x-0 mx-auto w-[16px] h-[16px] bg-zinc-950 rounded-full z-20 shadow-[inset_0_0_2px_rgba(255,255,255,0.1)] flex items-center justify-center\">\n            <div className=\"w-[6px] h-[6px] bg-blue-900/60 rounded-full\"></div>\n          </div>\n          \n          <div className=\"relative w-full h-full rounded-[2.2rem] overflow-hidden bg-background\">\n            {videoSrc ? (\n              <video src={videoSrc} autoPlay loop muted playsInline className=\"w-full h-full object-cover\" />\n            ) : src ? (\n              <img src={src} alt=\"Mockup\" className=\"w-full h-full object-cover\" />\n            ) : (\n              children\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nGooglePixel8Mockup.displayName = \"GooglePixel8Mockup\";\n\nexport const GooglePixel10Mockup = React.forwardRef<HTMLDivElement, MockupProps>(\n  ({ children, src, videoSrc, className, ...props }, ref) => {\n    return (\n      <div \n        ref={ref}\n        className={cn(\n          \"relative mx-auto w-[330px] h-[690px] rounded-[2.5rem] border-[3px] border-foreground/20 bg-black flex-shrink-0\",\n          \"ring-[5px] ring-muted shadow-2xl\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"absolute -right-[8px] top-[170px] w-[5px] h-[50px] bg-foreground/20 rounded-r-md\"></div>\n        <div className=\"absolute -right-[8px] top-[240px] w-[5px] h-[100px] bg-foreground/20 rounded-r-md\"></div>\n        \n        <div className=\"relative w-full h-full rounded-[2.3rem] border-[6px] border-black bg-black overflow-hidden z-10\">\n          <div className=\"absolute top-[10px] inset-x-0 mx-auto w-[14px] h-[14px] bg-zinc-950 rounded-full z-20 shadow-[inset_0_0_2px_rgba(255,255,255,0.1)] flex items-center justify-center\">\n            <div className=\"w-[5px] h-[5px] bg-blue-900/60 rounded-full\"></div>\n          </div>\n          \n          <div className=\"relative w-full h-full rounded-[1.9rem] overflow-hidden bg-background\">\n            {videoSrc ? (\n              <video src={videoSrc} autoPlay loop muted playsInline className=\"w-full h-full object-cover\" />\n            ) : src ? (\n              <img src={src} alt=\"Mockup\" className=\"w-full h-full object-cover\" />\n            ) : (\n              children\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nGooglePixel10Mockup.displayName = \"GooglePixel10Mockup\";\n",
      "type": "registry:component",
      "target": "components/custom/blocks/MobileMockupBlock.tsx"
    }
  ],
  "docs": "Named exports: Iphone17ProMaxMockup, Iphone14ProMaxMockup, Iphone12ProMaxMockup, Iphone5Mockup, SamsungS24UltraMockup, GooglePixel8Mockup, GooglePixel10Mockup. Each takes `src`, `videoSrc`, or arbitrary children rendered inside the screen. Pure CSS and SVG — no images to ship.",
  "categories": [
    "media",
    "marketing"
  ],
  "type": "registry:component"
}