---
id: "aw-el-b687a093-78d0-4061-bece-02d7c533c0c0"
source: https://www.awwwards.com/inspiration/about-era-residence
author: "The First The Last (thefirstthelast)"
media: "photo, 1600x1200"
model: claude-opus-5-5
generated: 2026-10-31
---
# Clay Court Amenities Feature Section

## Summary
An about section for a luxury residence built on a full-bleed aerial photo of a tennis player serving on a clay court, with a stacked amenities list, a long condensed serif paragraph and a circular call button laid over the warm orange texture. It shows how a single strong photograph plus tall condensed serif type can carry a premium real estate story with almost no UI chrome.

## Style
- Theme: dark (white type over a deep terracotta photo)
- Mood: luxurious, sunny, sporty, editorial, calm
- Tags: full-bleed-photo, condensed-serif, amenities-list, circular-cta, real-estate, rotating-badge, editorial
- Category: Features, Photography

## Palette
| Role | Hex |
|---|---|
| Sunlit clay | #C47239 |
| Clay | #B15D26 |
| Shaded clay | #99491A |
| Deep clay | #7E3713 |
| Dusty orange | #BD8156 |
| Burnt shadow | #5E250D |
| Darkest shadow | #34180C |
| Court line cream | #CDB5A0 |

## Typography
- Display: tall condensed high-contrast serif, uppercase, tight tracking. The amenities list is about 3% of the frame height per line; the bottom paragraph about 3.5% with leading 1.0 and a first-line indent of about 130px. Closest free: Instrument Serif set uppercase, or Bodoni Moda 400 scaled to 80% width.
- Nav headline at the top-right: two lines of the same serif with a thin underline.
- Micro labels (book a call, contact, scroll, eyebrow): uppercase sans, about 10px, 0.2em tracking, white. Closest: Manrope 600.

## Layout
- 4:3 (1600x1200), the photo fills everything.
- Top-left: a circular text badge about 100px wide, with the residence name set around a ring and a four-petal flower mark in the centre.
- Top-right: right-aligned nav block with a two-line serif link and two small sans links.
- Amenities list: left-aligned at about 69% x, starting at 15% y, with a 1px white vertical rule to its left; the active item is solid white, others white at 30%.
- Left edge: a vertical scroll label with 1px lines above and below and a small ampersand marker.
- Bottom-left: eyebrow label, then a four-line uppercase paragraph indented on its first line.
- Bottom-right: an outlined circle about 200px across (1px white stroke with a short gap) holding a two-line call label.

## Elements
- Circular rotating-text logo badge (placeholder name).
- Nav: serif link with underline, two sans links.
- Amenities list with an active state and a vertical indicator rule.
- Paragraph block describing walking paths between homes (placeholder copy).
- Circular outline CTA button.
- Scroll indicator rail.
- Background photo: aerial view of a player serving, ball in the air, long shadows from a fence across the court lines.

## Motion
Static image. Suggested motion: cycle the amenities list every 2.5s, cross-fading the active item from 30% to 100% opacity over 400ms while the vertical rule slides to it, and rotate the circular badge slowly (one turn per 20s).

## Rebuild it
1. Section: `relative h-screen bg-cover bg-center text-white` with the photo, plus a subtle `bg-black/10` overlay for legibility.
2. Badge: an SVG `textPath` on a 48px radius circle; animate with Motion `rotate: 360` over 20s, linear, repeat Infinity.
3. Amenities list: `absolute left-[69%] top-[15%] border-l border-white pl-4`, items `font-serif uppercase text-5xl leading-none`; set opacity with Motion based on an active index.
4. Paragraph: `absolute bottom-16 left-24 max-w-[520px] uppercase font-serif text-5xl leading-none indent-[130px]`.
5. CTA: `size-48 rounded-full border border-white/80 grid place-items-center text-[10px] tracking-[0.2em] uppercase`, with `whileHover={{ scale: 1.05 }}`.
6. Scroll rail: a vertical `writing-mode: vertical-rl` label between two 1px lines.

## Generation prompt
An aerial photograph of a tennis player serving on a sunlit terracotta clay court with long fence shadows, used as a full-bleed luxury website section: tall condensed uppercase serif text in white listing amenities on the right with one item highlighted, a long condensed serif paragraph in the bottom-left, a circular rotating text badge top-left and a thin outlined circular call button bottom-right; warm, premium, editorial.