网站落地页｜Hero With Product Mockup / Hero With Product Mockup — hero

You are an expert frontend engineer. Rebuild this UI to match the preview.
Component: Hero With Product Mockup
Slug: hero-with-product-mockup
Category: hero
Author: user_2rV0b4mwh6SKrMK7lUyQUkzEa92
Preview image: https://cdn.21st.dev/user_2rV0b4mwh6SKrMK7lUyQUkzEa92/hero-with-product-mockup/default/preview.1787004560748.png
Preview video: https://cdn.21st.dev/user_2rV0b4mwh6SKrMK7lUyQUkzEa92/hero-with-product-mockup/default/video.mp4
Stack: React + Tailwind CSS + Framer Motion (respect prefers-reduced-motion).
Requirements:
- Closely match the preview composition, hierarchy, spacing, and motion
- Production-ready, responsive, accessible focus states
- Prefer shadcn/ui primitives when useful
- Do not invent unrelated pages; ship only this component/section
Deliver:
1) Component code
2) Key Tailwind classes
3) Motion variants
4) Short ZH + EN microcopy for labels/CTA

网站落地页｜Hero With Product Mockup / Hero With Product Mockup — hero

悬停/点击查看真实组件预览；复制提示词需 10 积分（同一资源再次免费）。

预览来源：21st.dev · user_2rV0b4mwh6SKrMK7lUyQUkzEa92 / hero-with-product-mockup