iPhone 3D mockup

1"use client";
2 
3import { cn } from "@/lib/utils";
4 
5export function IPhone3DMockup({
6  children,
7  className,
8  ...props
9}: React.ComponentProps<"div">) {
10  return (
11    <div
12      className={cn(
13        "relative flex h-[400px] w-[200px] items-center justify-center rounded-[45px] transform-3d",
14        className
15      )}
16      {...props}
17    >
18      <div className="relative flex size-full [transform:translateZ(calc(0.05*200px))] justify-center rounded-[45px] bg-[#F1AF88] p-[2px]">
19        {children}
20        <div className="absolute top-[12px] z-30 flex h-[calc(0.04*400px)] w-[calc(0.28*200px)] justify-end rounded-full bg-black p-1">
21          <div
22            className="aspect-square shrink-0 rounded-full bg-black"
23            style={{
24              backgroundImage: `
25          radial-gradient(circle at 50% 65%, rgba(100, 30, 140, 0.3) 0%, transparent 80%),
26          radial-gradient(circle at 50% 50%, rgba(0, 150, 160, 0.25) 0%, rgba(0, 100, 120, 0.1) 25%, transparent 100%),
27          radial-gradient(circle at 50% 50%, rgba(20, 30, 160, 0.3) 0%, rgba(10, 15, 80, 0.4) 20%, transparent 90%)
28        `,
29            }}
30          />
31        </div>
32        <div className="absolute inset-x-0 inset-y-[45px] z-10 border-y-[3px] border-[#923B15]" />
33        <div className="absolute inset-x-[45px] inset-y-0 z-10 border-x-[3px] border-[#923B15]" />
34      </div>
35      <div className="absolute inset-0 [transform:translateZ(calc(-0.05*200px))] rounded-[45px] bg-[#E46E3D]" />
36 
37      <div
38        className="absolute inset-y-[45px] flex w-[calc(0.10*200px)] flex-col justify-around border-y-[3px] border-[#923B15] bg-[#E46E3D] px-[5px] [backface-visibility:hidden] transform-3d"
39        style={{
40          transform: "rotateY(90deg) translateZ(calc(200px*0.5)) ",
41        }}
42      >
43        <IPhone3DMockupSideButton className="aspect-[0.17]" />
44        <div
45          className="bg-blue aspect-[0.17] w-full rounded-full bg-[#F1AF88]"
46          style={{
47            boxShadow: "rgba(170,71,27,1) inset 0px 0px 0px 1px",
48          }}
49        />
50      </div>
51 
52      <div
53        className="absolute inset-y-[45px] w-[calc(0.10*200px)] border-y-[3px] border-[#923B15] bg-[#E46E3D] px-[5px] pt-[10px] transform-3d"
54        style={{
55          transform: "rotateY(-90deg) translateZ(calc(200px*0.5))",
56        }}
57      >
58        <div className="space-y-3 transform-3d">
59          <IPhone3DMockupSideButton className="aspect-[0.6]" />
60          <div className="space-y-1.5 transform-3d">
61// … truncated