Aurevia — Luxury Real Estate Website

Create a complete, production-quality, visually exceptional luxury real estate website called Aurevia using only vanilla HTML, CSS, and JavaScript.

The final website must look like a real high-end property agency website designed by an experienced digital design studio.

This is NOT a generic real-estate template.

The design should communicate:

• Exclusivity
• Trust
• Architectural sophistication
• Modern luxury
• Calm confidence
• Professionalism
• High-value property expertise

Avoid generic AI layouts, repetitive card sections, excessive gradients, glassmorphism everywhere, giant rounded containers, unnecessary animations, and dashboard-style interfaces.

The finished website must be convincing enough that a real luxury property agency could replace the placeholder information and use the design professionally.

---

1. REQUIRED FILES

Create exactly:

• index.html
• style.css
• script.js

All HTML must be inside index.html.

All CSS must be inside style.css.

All JavaScript must be inside script.js.

Correctly connect the files.

The website must work immediately when all three files are placed in the same directory.

No installation, compilation, package manager, or development server should be required.

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Tailwind CSS
• Bootstrap
• jQuery
• GSAP
• npm
• Node packages
• external JavaScript libraries
• backend frameworks
• databases
• build tools

Use inline SVG icons where needed.

This must remain a static website.

---

3. BRAND IDENTITY

Brand:

AUREVIA

Tagline:

Exceptional places. Remarkable lives.

Create a sophisticated identity around the Aurevia name.

The brand should feel appropriate for:

• Luxury homes
• Villas
• Penthouses
• Contemporary residences
• Investment properties
• Premium apartments

Do not make the brand excessively gold or flashy.

Luxury should come primarily from:

• Typography
• Photography
• Whitespace
• Composition
• Restraint
• Attention to detail

---

4. VISUAL DIRECTION

Create a modern architectural editorial aesthetic.

Suggested palette:

• Warm ivory
• Architectural white
• Charcoal
• Deep graphite
• Muted stone
• Warm bronze accent used sparingly

Use strong contrast between light editorial sections and occasional dark sections.

This will create visual rhythm.

Avoid making the entire website black and gold.

Use thin borders, precise spacing, and sophisticated typography.

---

5. TYPOGRAPHY

Use elegant editorial display typography for major headings.

Use a clean modern sans-serif style for:

• Navigation
• Property details
• Forms
• Filters
• Metadata
• Body text

Create a sophisticated hierarchy.

Use clamp() for responsive headings.

Allow selected headings to become large on desktop while remaining balanced.

Keep body text widths comfortable.

---

6. NAVIGATION

Create a refined navigation bar.

Include:

• AUREVIA wordmark
• Properties
• Neighborhoods
• About
• Journal
• Agents
• Contact

Add:

List Your Property

and a primary:

Find a Home

CTA.

On the hero, the navigation may initially be transparent.

After scrolling, transition into a solid/elevated state.

---

7. MOBILE NAVIGATION

Create a polished mobile menu.

Include:

• Brand
• Navigation
• Find a Home CTA
• List Your Property
• Contact information

Requirements:

• Accessible hamburger
• Smooth transition
• Escape closes menu
• Selecting link closes menu
• Body scroll locking
• Large touch targets
• Correct ARIA attributes

---

8. HERO SECTION

Create a cinematic property-focused hero.

Use a high-quality architectural image showing a contemporary luxury residence.

Do NOT use a generic city skyline as the main hero.

Add a subtle dark overlay.

Small label:

CURATED RESIDENCES · CAMBODIA

Main headline:

Find a place worthy of your next chapter.

Supporting text:

“Distinctive homes, thoughtfully selected for architecture, location, and the way they make you feel.”

Primary CTA:

Explore Properties

Secondary CTA:

Sell With Aurevia

Add a compact property search interface near the bottom of the hero.

---

9. PROPERTY SEARCH

Create a sophisticated search panel.

Fields:

Location

Options:

• Phnom Penh
• Siem Reap
• Sihanoukville
• Kampot

Property Type

Options:

• Villa
• Penthouse
• Apartment
• Residence
• Land

Price Range

Options:

• Under $250K
• $250K – $500K
• $500K – $1M
• $1M – $2M
• $2M+

Bedrooms

Options:

• Any
• 1+
• 2+
• 3+
• 4+
• 5+

Button:

Search Properties

Implement filtering using frontend JavaScript demo data.

Do not pretend to query a real database.

---

10. INTRODUCTION

Create a typography-led section.

Small label:

A Different Standard

Large statement:

Real estate should be about more than square meters.

Supporting copy should explain that Aurevia curates properties around:

• Architecture
• Location
• Lifestyle
• Long-term value

Keep this section visually simple.

---

11. FEATURED PROPERTIES

Create a major section:

Featured Residences

Create at least 6 realistic properties.

Examples:

The Mekong Residence

Chroy Changvar · Phnom Penh

$1,250,000

4 Bedrooms 5 Bathrooms 420 m²

BKK Penthouse

BKK1 · Phnom Penh

$785,000

3 Bedrooms 3 Bathrooms 285 m²

Riverside House

Kampot

$495,000

4 Bedrooms 4 Bathrooms 350 m²

Angkor Garden Villa

Siem Reap

$650,000

5 Bedrooms 5 Bathrooms 480 m²

Tonle Bassac Residence

Tonle Bassac · Phnom Penh

$920,000

4 Bedrooms 4 Bathrooms 330 m²

Coastal Retreat

Sihanoukville

$1,850,000

5 Bedrooms 6 Bathrooms 610 m²

Use clearly fictional property information.

---

12. PROPERTY CARD DESIGN

Each property should include:

• Large property image
• Property name
• Location
• Price
• Bedrooms
• Bathrooms
• Floor area
• Property type
• Featured/New badge where appropriate
• Favorite button
• View Property CTA

Do NOT make cards small and cramped.

Photography should dominate.

Use sophisticated hover effects.

---

13. PROPERTY FILTERING

Create filters:

• All
• Villas
• Penthouses
• Apartments
• Residences

Implement using vanilla JavaScript.

Also connect the hero search fields to the property dataset where practical.

When no property matches, show a polished empty state:

No residences match those selections. Try adjusting your search.

Do not reload the page.

---

14. FAVORITES

Allow visitors to click a heart/save button on property cards.

Use vanilla JavaScript.

Favorites only need to exist during the current browser session or using localStorage.

If using localStorage, handle errors gracefully.

Clearly treat it as frontend-only functionality.

Update aria-pressed correctly.

---

15. FEATURED PROPERTY STORY

Create one large editorial feature for:

The Mekong Residence

Use:

• Full-width architectural photograph
• Property title
• Location
• Price
• Short story
• Architecture details
• Large CTA

Include small statistics:

4 Beds

5 Baths

420 m²

Private Pool

River View

Use a different layout from normal property cards.

---

16. PROPERTY QUICK VIEW

Create an accessible quick-view interaction for properties.

When a visitor clicks:

Quick View

open a custom modal.

Display:

• Large image
• Name
• Location
• Price
• Description
• Bedrooms
• Bathrooms
• Area
• Property type
• Inquiry CTA

Requirements:

• Close button
• Escape closes modal
• Click outside closes modal
• Keyboard-friendly
• Focus management where practical
• Background scroll locking

Do not use an external modal library.

---

17. NEIGHBORHOODS

Create:

Explore by Neighborhood

Show lifestyle-oriented location cards.

Include:

BKK1

Cosmopolitan living, dining and modern residences.

Tonle Bassac

Contemporary city living near Phnom Penh's central districts.

Riverside

Historic character and riverfront lifestyle.

Chroy Changvar

Spacious modern residences with city and river views.

Siem Reap

Relaxed luxury surrounded by culture and nature.

Kampot

Riverside living with a slower pace.

Each neighborhood should include:

• Large image
• Name
• Short description
• Number of sample properties

Use editorial image compositions rather than tiny cards.

---

18. WHY AUREVIA

Create a section:

Property, handled differently.

Include four principles:

Curated

We focus on distinctive properties rather than overwhelming buyers with listings.

Local Knowledge

Insight into neighborhoods, developments and changing markets.

Personal

Property recommendations shaped around how clients actually want to live.

Discreet

Professional handling of high-value transactions and private listings.

Keep copy realistic and avoid unverifiable claims.

---

19. ABOUT THE AGENCY

Create an elegant About section.

Heading:

A considered approach to real estate.

Explain Aurevia as a fictional independent property advisory focused on carefully selected residences.

Include statistics such as:

12 Years Combined property experience

150+ Transactions represented

6 Specialist advisors

4 Key markets

Make it clear these are demo/placeholder values in the content or implementation where appropriate.

Animate numbers subtly when visible.

---

20. AGENTS

Create:

Meet Your Advisors

Include 4 fictional agents.

Each agent:

• Large professional portrait
• Name
• Role
• Specialization
• Languages
• Phone placeholder
• Email placeholder

Examples:

Sofia Laurent Managing Director Luxury Residential

Daniel Chen Property Advisor Investment & New Developments

Maya Sok Senior Advisor Phnom Penh Residential

Julian Reed Property Advisor Coastal & Lifestyle Properties

Use sophisticated portrait layouts.

Avoid generic corporate employee cards.

---

21. BUYING PROCESS

Create:

From search to keys.

Steps:

01 — Discover

Tell us what matters to you.

02 — Curate

Receive a focused selection of suitable properties.

03 — Experience

Arrange private viewings.

04 — Advise

Review property, documentation and considerations.

05 — Complete

Move through the transaction toward handover.

Use a connected horizontal flow on desktop.

Stack naturally on mobile.

---

22. SELL WITH AUREVIA

Create a dark visually distinctive section.

Heading:

Thinking of selling?

Supporting text:

“Position your property with considered presentation, targeted exposure, and personal representation.”

Include benefits:

• Property positioning
• Professional presentation
• Qualified inquiries
• Private viewings
• Negotiation support

CTA:

Request a Property Consultation

---

23. PROPERTY VALUATION FORM

Create a frontend-only form.

Fields:

• Full Name
• Email
• Phone
• Property Location
• Property Type
• Bedrooms
• Approximate Size
• Expected Price
• Message

Validate with JavaScript.

After valid submission display:

“Your property details are ready for review. This demonstration form is not connected to a live agency system.”

Never claim the request was actually submitted.

---

24. TESTIMONIALS

Create 3 tasteful client testimonials.

Keep them believable.

Example:

“Aurevia narrowed our search to homes that genuinely matched how we wanted to live. The process felt focused from the beginning.”

— Private Buyer

Do not invent famous customers.

Create a lightweight accessible testimonial slider.

---

25. JOURNAL

Create:

Aurevia Journal

Add 3 articles.

Examples:

A Guide to Buying Property in Phnom Penh

Market Guide

What Makes a Residence Truly Valuable?

Perspective

Inside BKK1

Neighborhood Guide

Each should include:

• Editorial image
• Category
• Date
• Title
• Short excerpt
• Read Article link

Links can be placeholders.

---

26. PROPERTY INQUIRY

Create a polished inquiry section.

Heading:

Found something interesting?

Fields:

• Name
• Email
• Phone
• Property
• Preferred Contact Method
• Message

Frontend-only validation.

If opened from a property card/modal, automatically populate the property field.

This should be implemented with vanilla JavaScript.

---

27. NEWSLETTER

Create a minimal newsletter section.

Heading:

The Private List

Copy:

“Receive selected properties and market notes directly in your inbox.”

Fields:

• Email

Button:

Join the List

Frontend-only validation.

Do not claim successful subscription to a real service.

---

28. CONTACT / OFFICE

Create:

Visit Aurevia

Location:

BKK1 Phnom Penh, Cambodia

Use a fictional placeholder street address.

Include:

• Phone placeholder
• Email placeholder
• Office hours
• Directions CTA

Create an elegant map-style visual without requiring a Google Maps API.

---

29. FOOTER

Create a premium footer.

Include:

AUREVIA

Tagline:

Exceptional places. Remarkable lives.

Navigation:

• Properties
• Neighborhoods
• Sell
• Agents
• Journal
• Contact

Property categories:

• Villas
• Penthouses
• Apartments
• Residences

Social links:

• Instagram
• Facebook
• LinkedIn

Add copyright year dynamically.

Add back-to-top control.

---

30. JAVASCRIPT FUNCTIONALITY

Implement:

• Mobile navigation
• Scrolled navigation state
• Active section tracking
• Smooth scrolling
• Property filtering
• Hero property search
• Favorites
• Property quick-view modal
• Property inquiry pre-selection
• Testimonial slider
• Animated statistics
• Property valuation validation
• Inquiry validation
• Newsletter validation
• Scroll reveals
• Back-to-top
• Dynamic year

All functionality must be vanilla JavaScript.

---

31. IMAGE DIRECTION

Photography is one of the most important parts of this website.

Use high-quality remote placeholder imagery showing:

• Contemporary villas
• Luxury penthouses
• Modern architecture
• Premium interiors
• Pools
• Landscaped residences
• Urban luxury apartments
• Cambodian/Southeast Asian architectural context where appropriate

Avoid:

• Cheap generic houses
• Cartoon buildings
• Obviously unrelated stock photography
• Office-team photos as property imagery

Maintain a consistent architectural photography style.

Use:

• Large image dimensions
• Meaningful alt text
• Lazy loading below the fold
• Stable aspect ratios

---

32. ANIMATION DIRECTION

Use sophisticated restrained motion.

Suitable effects:

• Image reveal
• Gentle fade-up
• Typography reveal
• Subtle card movement
• Image scale on hover
• Navigation transitions

Avoid:

• Bouncing
• Spinning
• Excessive parallax
• Floating bubbles
• Particle systems
• Constant animation

Respect prefers-reduced-motion.

---

33. RESPONSIVE DESIGN

Design intentionally for:

• 320px
• 375px
• 430px
• Tablet
• Laptop
• Desktop
• Large desktop

Mobile must feel professionally designed.

On smaller screens:

• Stack search controls appropriately
• Keep property images large
• Keep prices readable
• Prevent property metadata overflow
• Simplify editorial overlaps
• Make filters easy to scroll/use
• Make modals fit the viewport
• Make forms easy to complete
• Keep CTA buttons touch-friendly

Never allow horizontal page overflow.

---

34. ACCESSIBILITY

Use semantic HTML5.

Ensure:

• Correct heading hierarchy
• One H1
• Alt text
• Form labels
• Keyboard navigation
• Accessible mobile menu
• Accessible property filters
• Accessible favorite controls
• Accessible modal
• Visible focus states
• Good contrast
• ARIA where necessary

Do not create important interactions using clickable div elements.

---

35. SEO

Create professional SEO metadata.

Include:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card
• Theme color

Add appropriate RealEstateAgent structured data using JSON-LD.

Use clearly fictional placeholder contact information.

Do not invent real licenses, awards, certifications or regulatory credentials.

---

36. PERFORMANCE

Keep the website lightweight.

Requirements:

• No frameworks
• No external JavaScript libraries
• No background video
• Lazy-load images
• Efficient DOM operations
• Stable image containers
• Minimal layout shifts
• Efficient event handling
• No unnecessary animation loops

---

37. CODE QUALITY

Organize CSS logically.

Use:

• CSS variables
• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern responsive CSS

Avoid:

• Excessive absolute positioning
• Repeated CSS
• Excessive !important
• Inline styling

JavaScript should use:

• Clear function names
• Reusable functions
• Guards for missing elements
• Minimal global state

There must be no console errors.

---

38. CONTENT QUALITY

Do not use Lorem Ipsum.

Write realistic property and agency copy specifically for Aurevia.

Avoid generic AI phrases such as:

• Unlock your dream
• Innovative solutions
• Unparalleled excellence
• Redefining luxury
• World-class experience

Use restrained, sophisticated language.

---

39. VISUAL RHYTHM

Do NOT create a long page consisting only of repeated card grids.

Use a sequence such as:

Cinematic hero

→ Typography statement

→ Featured properties

→ Large featured residence

→ Neighborhood editorial grid

→ Philosophy

→ Full-width architecture image

→ Agents

→ Buying process

→ Dark selling section

→ Testimonials

→ Journal

→ Inquiry

→ Contact

→ Footer

The result should feel art-directed.

---

40. FINAL QUALITY CHECK

Before returning code, verify:

• HTML/CSS/JS connect correctly
• Mobile menu works
• Search works
• Filters work
• Favorites work
• Quick-view modal works
• Modal is keyboard accessible
• Property inquiry pre-selection works
• Forms validate
• Testimonial slider works
• Statistics work
• All navigation anchors exist
• No undefined variables
• No console errors
• No horizontal overflow
• Images have alt text
• Mobile layout is polished
• Reduced motion is supported
• No prohibited dependencies are used

Fix any issue before returning the final code.

---

41. FINAL OUTPUT

Return exactly three complete code sections:

index.html

Provide the complete HTML.

style.css

Provide the complete CSS.

script.js

Provide the complete JavaScript.

Do NOT return pseudo-code.

Do NOT write:

“remaining styles”

“add other properties”

“continue here”

“same pattern”

Do not omit code to shorten the response.

Everything must be implemented and immediately usable.

The final Aurevia website should feel architectural, sophisticated, responsive, trustworthy, luxurious, distinctive, and screenshot-worthy, with enough visual quality that someone seeing it in a short video would want to know how it was created.