Luxury Villa & Penthouse Showcase
An ultra-exclusive architectural property showcase for penthouses and luxury estates featuring interactive floor plans, specs, and VIP booking.
Example of the website this prompt builds. Your result will use your own name, text and images.
- Tech stack
- Next.js (App Router) + Tailwind CSS
- Colour palette
#090d16#ffffff#f59e0b#94a3b8
- What it builds
- VIP private estate listing concierge bar
- Navbar with Exclusive Portfolio and Private Showing button
- Hero with panoramic penthouse terrace view & key specs
- Interactive 3D architectural floor plan blueprint viewer
- Ultra-luxury amenities showcase (Infinity pool, Helipad, Wine cellar)
- Neighborhood lifestyle guide (Fine dining, Private aviation, Marina)
- Cinematic 4K property walkthrough video preview
- Exclusive confidential viewing reservation form
- Lead private client broker profile
- Footer with architectural licensing and escrow partners
The prompt
Copy everything in the box. Text in quotes and the sample business details are meant to be replaced with your own.
Build an ultra-luxurious, cinematic property showcase website called "The Sovereign Crown Penthouse & Private Residences".
Tech stack: Next.js (App Router) with Tailwind CSS.
Visual style: prestigious high-end dark aesthetic (#090d16 background). Crisp white headings, warm architectural amber (#f59e0b) for accents, and refined platinum (#94a3b8) for specifications. Minimalist geometric typography and full-width imagery.
Sections, in order:
1. Top Concierge Strip: "Private Brokerage: Discretion assured for global family offices and sovereign clients."
2. Navbar: architectural wordmark logo, links ("The Residence", "Amenities", "Floor Plans", "Neighborhood", "Inquire"), and "Book Private Showing" button.
3. Hero: split layout.
- Left side: badge "✦ Unlisted Trophy Penthouse", headline "Above the clouds, beyond comparison", subtitle detailing 14,000 square feet of duplex living on the 88th floor with 360-degree city and ocean panoramas.
- Specs Strip: 6 Bedrooms, 8.5 Bathrooms, 14,200 Sq Ft, 4 Private Balconies, $48,500,000.
- Right side: architectural photograph placeholder of a double-height glass living salon overlooking the skyline at dusk.
4. Curated Architectural Amenities: 4 photo cards: 1) 60ft Cantilevered Heated Infinity Pool, 2) Temperature-Controlled 1,200 Bottle Wine Salon, 3) Private Rooftop Helipad & Sky Lounge, 4) Secured Underground 6-Car Gallery.
5. Interactive Floor Plan Explorer: interactive tabbed floor plan (Lower Level Entertainment vs Upper Level Master Quarters) showing room dimensions and layout.
6. The Neighborhood: luxury proximity guide: 4 mins to Private Jet Terminal, 8 mins to Michelin-starred dining district, 2 mins to Private Yacht Club.
7. Cinematic Property Film: video mockup card with play button teaser trailer.
8. Confidential Viewing Protocol: high-end inquiry form requesting Buyer Representation, Verification of Funds, and Preferred Showing Date.
9. Principal Broker Profile: card for the luxury estate director with transaction history and direct private line.
10. Footer: international escrow partners, architectural credits, and disclaimer.
Quality bar:
- Fully responsive: design mobile-first, then tablet (768px) and desktop (1200px).
- Accessible: semantic HTML landmarks, one h1, alt text on images, visible keyboard focus, colour contrast of at least 4.5:1 for body text.
- Fast: no heavy libraries, lazy-load images below the fold, system or two web fonts at most.
- Use placeholder images from a neutral source and realistic sample copy (no lorem ipsum).
- Respect prefers-reduced-motion for every animation.
- Keep the code clean and commented so I can edit it by hand.How to use this prompt
- 1
Open an AI coding tool. Use any capable assistant: Claude, ChatGPT, Cursor, v0, Bolt, Gemini. Tools that can create files (Cursor, Claude Code, v0, Bolt) are the most convenient because they write the project for you.
- 2
Replace the sample details. Copy the prompt and change the business name, location, colours and any section you do not need. The more specific your details, the better the result.
- 3
Paste the prompt and generate. Send the whole prompt in one message. If the reply is cut off, say “continue from where you stopped”, or ask for one section at a time.
- 4
Run it on your computer. Create a project with “npx create-next-app@latest”, add the generated files, then run “npm run dev” and open http://localhost:3000.
- 5
Review and refine. Check it on a phone-width screen, fix anything that looks off by describing it in plain words, then use the follow-up prompts below to add features one at a time.
- 6
Replace placeholders and publish. Swap in your real text and images, then deploy. Vercel and Netlify both host this kind of site for free.
Follow-up prompts
Send these one at a time after the first version is working. Small, specific requests give much better results than one giant prompt.
Add interactive 360-degree virtual tour modal with hot spot pins.
Add mortgage and luxury property tax calculation simulator.
Add downloadable high-resolution 40-page architectural PDF lookbook modal.
Add SingleFamilyResidence and RealEstateListing JSON-LD schema.
Tips for a better result
- Use refined architectural dimensions and luxury terminology (cantilevered, double-height, trophy asset).
- Keep forms confidential and dignified rather than aggressive.
- Want to hand-build a section instead? The Templates library has heroes, pricing tables, FAQs and more with full code.
