I'll find a suitable stock video of a waterfront property and update the hero to use a <video> element instead of the static image.
I found the Mixkit video URL. Let me also search for a more fitting "luxury property surrounded by water" video:
I'll use the Mixkit video which shows a luxury island property surrounded by turquoise water. It's free for commercial use and fits the "property placed in the middle of water" description. Let me update the hero component to use a video background:
The hero backdrop is now a looping video from Mixkit showing an aerial view of a luxury island property surrounded by turquoise water. The video autoplays, is muted, loops seamlessly, and falls back to the existing skyline poster image while loading. The navy overlays are slightly lightened to let more of the video show through while keeping the text legible.
Now let me find all font-serif usages across the components to replace them with font-sans, since we want Montserrat everywhere:
Now I'll update layout.tsx to use Montserrat, globals.css to set both --font-sans and --font-serif to Montserrat, and then replace all font-serif with font-sans across all components:
Now let me replace all font-serif class usages with font-sans across every component:
Now I have all the files. Let me replace font-serif with font-sans across all six components:
The entire site now uses Montserrat as the single font family. I replaced both the DM Sans (body) and Playfair Display (headings) imports with a single Montserrat import in layout.tsx, updated the CSS font variables in globals.css to point to Montserrat, and swapped all font-serif class references to font-sans across every component. All italic styles on golden text (like "Buy. Sell. Invest.", "That Define Elegance", etc.) remain untouched.
You can send messages while the preview loads