diff --git a/app/components/auth/ar-illustration.tsx b/app/components/auth/ar-illustration.tsx new file mode 100644 index 0000000..d038cf5 --- /dev/null +++ b/app/components/auth/ar-illustration.tsx @@ -0,0 +1,129 @@ +import { Armchair } from '~/components/auth/armchair'; + +export function ArIllustration() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Phone body */} + + + + + {/* Wall / floor horizon */} + + + {/* Perspective floor seen through the camera */} + + {[240, 262, 290, 326, 372].map((y) => ( + + ))} + {[-260, -170, -90, -30, 30, 90, 170, 260].map((dx) => ( + + ))} + + + + + {/* Placement reticle */} + + + + + + + + + + {/* Camera scan brackets */} + + + + + + + + {/* AR badge */} + + AR + + {/* Shutter */} + + + + + {/* Notch */} + + + {/* Floating particles */} + {[ + { cx: 70, cy: 120, r: 3, d: '3s' }, + { cx: 330, cy: 90, r: 2, d: '4s' }, + { cx: 345, cy: 260, r: 3, d: '3.6s' }, + { cx: 55, cy: 300, r: 2, d: '4.4s' }, + { cx: 95, cy: 210, r: 1.5, d: '2.8s' }, + ].map((p) => ( + + + + ))} + + ); +}