نمونهٔ خروجی v0 · Bolt · Lovable
طراحی سایتv0 · Bolt · Lovableرابط کاربری و وبP1286
صفحه فرود لوکس جتهای خصوصی SkyElite
چطور ویدئوی تمامصفحه و ناوبری نیمهشفاف حس لوکس و حرفهای بودن را منتقل میکند؟
پرامت ساخت سایت
Create a premium private jet landing page hero section with the following specifications: Video Background: Use this exact CloudFront video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_091828_e240eb17-6edc-4129-ad9d-98678e3fd238.mp4 Video should autoplay, be muted, loop continuously, and include playsInline attribute Video covers entire viewport (100vh) using object-cover Navigation Bar: Brand name "SkyElite" on the left (text-2xl, font-semibold, text-gray-900) Desktop menu items (hidden on mobile, visible md:flex): Start, Story, Rates, Benefits, FAQ Navigation links in gray-900 with hover:text-gray-700 transition Mobile hamburger menu button using Lucide React icons (Menu/X) Mobile menu appears as dropdown with white/95 opacity background, backdrop blur, rounded corners, shadow Max width 7xl, centered with px-8 py-6 Hero Content (centered, -mt-80 to pull up): Small uppercase label: "PRIVATE JETS" (text-sm, font-semibold, gray-600, tracking-wider, mb-4) Large two-line heading with overlapping effect: Line 1: "Premium." (text-6xl md:text-7xl lg:text-8xl, font-normal, text-gray-500, leading-none, tracking-tighter) Line 2: "Accessible." (same size, color: #202A36, negative margin-top: -12px for overlap) Subtitle: "Your dedication deserves recognition." (text-lg md:text-xl, gray-600, mb-6, max-w-2xl) Two call-to-action buttons (gap-4, centered): "Discover" button: px-4 py-2, rounded-full, bg-gray-300, text-gray-800, font-medium, hover:bg-gray-400 "Book Now" button: px-4 py-2, rounded-full, white text, bg-color #202A36, hover color #1a2229 with smooth transitions Typography: Use Inter font (import from Google Fonts: 400, 500, 600, 700 weights) Apply to entire body via CSS Technical Setup: React with TypeScript Tailwind CSS for styling Lucide React for icons useState hook for mobile menu toggle Full screen height container (h-screen) Responsive breakpoints: mobile-first, md, lg All transitions use transition-colors class Layout Structure: Outer container: min-h-screen, bg-gray-50 Hero section: relative, h-screen, overflow-hidden Content wrapper: relative, h-full, flex flex-col Main content area: flex-1, flex items-center justify-center Make it clean, modern, and premium-looking with smooth interactions.
چه چیزی میسازد
- استفاده از ویدئوی پسزمینه تمام صفحه با پخش خودکار و لوپ باعث جذب فوری و حس زنده بودن صفحه میشود
- ناوبری شفاف با منوی کامل در دسکتاپ و منوی همبرگری سبک در موبایل تجربه کاربری بهینه و واکنشگرا ایجاد میکند
- تایپوگرافی بزرگ و منظم با رنگهای متوازن ترکیب ظاهری مدرن و لوکس را برای برند فراهم میکند
- برای کسبوکار خودتان
- برای برند خود نام، متن دکمهها و رنگهای کلیدی را متناسب تغییر دهید
- کجا اجرا کنید
- v0.dev، Bolt.new یا Lovable (پروژهٔ React + Tailwind)؛ در Claude یا Cursor هم کار میکند
- مناسب برای
- طراحی صفحه فرود برندهای لوکس و خدمات اختصاصی
سازنده: MotionSites · منبع اصلی · مجوز MIT
P1157
P1034
P1314
P1131
P1097
P1106