Website

Build a bilingual luxury site for a boutique hotel or real estate project, with large photography, gentle parallax and hreflang

Builds a warm, luxurious Turkish and English site for a boutique hotel or residential project on your hosting server. Serves large photos quickly with a separate mobile crop, adds parallax without JavaScript that respects reduced motion, and sets up Hotel or RealEstateListing schema and hreflang correctly.

When to use it

You want to reach foreign guests or buyers too, your photography sells but your site is heavy on phones, or your English pages get mixed up with the Turkish ones in search.

What you get

A live site with Turkish and English twin pages linked by hreflang, Hotel and HotelRoom schema (or RealEstateListing for a project), passing the Lighthouse gates, plus a page-by-page measurement report.

Does it change anything in my account?

Only with your approval. The assistant first shows a preview of every change and waits for your go-ahead.

Works with

SEO Intelligence, Search Console

Fill in before sending

[hotel / residential project][server name][business or project name][location][boutique hotel / residential project][room details][unit details][phone][WhatsApp][email][address][domain]
Build a Turkish and English site for my [hotel / residential project] on my hosting server [server name]. Details: 1. Name: [business or project name], location: [location], type: [boutique hotel / residential project] 2. For a hotel, the room types (size, bed, guests, view, amenities), check-in and check-out times, season and house rules: [room details] 3. For a project, the unit types (rooms, square metres, floor, handover date) and sales office details: [unit details] 4. Phone: [phone], WhatsApp: [WhatsApp], email: [email], address: [address] 5. Domain: [domain], real photos: [where the photos are, or "use stock"] 6. Who will review the English copy: [person, or "nobody"] First confirm the server with list_servers and run scaffold_site with style="universal", confirm=false first and confirm=true after my approval. Read site_design_guide and site_seo_guide. Write a luxurious, warm design decision to _kaynak/ART.md and show it to me: a fine serif display face from Fontshare (for example Boska 300) with a plain body face (for example Synonym), dark coffee and linen tones, one copper accent, small widely tracked labels and full-screen photography. The signature element is the full-screen first image on the home page and its gentle parallax. Do not lay a transparent header over the photo; on light pages the light menu text disappears (in the demo this dropped accessibility to 95 on the rooms and contact pages). Give the bar a dark background. Language structure: 1. Turkish pages sit at the root and their English twins under /en/. Every Turkish page has an English twin and the two point to each other. Keep the page pairs in one list in assets/site.config.js and build the menu, footer and language switcher from it; the switcher always goes to that page's counterpart, never to the home page. 2. Every page's <head> carries hreflang="tr", hreflang="en" and hreflang="x-default" pointing at the Turkish page, all as absolute URLs; write the same pairs into sitemap.xml as xhtml:link entries. 3. English pages use <html lang="en">, an English title, description and breadcrumb, and WebPage inLanguage "en". seo-stamp.mjs stamps og:locale tr_TR on every page; in build.mjs, after stamping, change it to en_GB on English pages and add og:locale:alternate in both languages. 4. Write the English as a native writer would, not as a translation, and keep place names in their Turkish spelling. Pages and schema (each in both languages): 1. Home: full-screen first image, what the place is in one paragraph, short facts (number of rooms, check-in, check-out, season), room cards and a link to the local guide. Schema: WebPage, and on the business node type Hotel with checkinTime, checkoutTime, numberOfRooms, amenityFeature and the rooms under containsPlace. For a residential project use Residence or ApartmentComplex instead. 2. A rooms page and one page per room type: size, bed, number of guests, amenities, who it suits, and a link to the other room type. Schema: HotelRoom (bed, occupancy, floorSize, amenityFeature, containedInPlace #business). For a residential project, a RealEstateListing per unit type with an Apartment inside it (numberOfRooms, floorSize). If I gave no prices, write no offers, and say in the copy "send us your dates and we will tell you the rate for them". 3. Local guide: local knowledge with a last updated date. Schema: WebPage. 4. Contact and booking: phone, WhatsApp form, email, address, "Get directions", travel notes and booking terms. Schema: ContactPage. 5. A 404 page (short, in both languages). Do not claim a star rating, awards, guest scores or "the best"; add no starRating or aggregateRating. To open large photos quickly: deliver the first image with <picture>; on screens up to 767 pixels use a portrait crop at 600 and 900 pixels wide (cropped at the source address and fetched with site_fetch), and on wider screens the landscape version at 1200, 1600 and 2000 pixels. Without the portrait crop the landscape image is scaled up to fill the phone screen, so it either looks soft or downloads a needlessly large file. No invention: do not write reviews, ratings, awards, certificates, customer counts or claims like "the best" that are not real. Do not add opening hours, coordinates, prices or an email I did not give you to the schema or the text; leave the field out and list it as missing in the report. Use no long dashes and no stock slogans, and make the first paragraph of every page answer that page's question directly. Shared SEO work: every page gets a unique title of 48 to 60 characters, a description of 145 to 158 characters, a single H1 and a canonical ending in a slash. Add each page's own WebPage node and BreadcrumbList, linked to the base graph by @id. In robots.txt write Allow: / for Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended and CCBot, explain the decision in a comment and note what to change if I want to block training crawlers. sitemap.xml carries real lastmod dates. llms.txt describes the business accurately in two sentences and lists the NAP and the important pages with links. Technical setup (the toolkit's default path is not used on this site, for these reasons): 1. Compile Tailwind and drop the CDN. The kit loads Tailwind through the Play CDN, which compiles in the browser, prints a console warning and lowers mobile performance. Write _kaynak/package.json with site_write_file, install with site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) and wait for it with site_command_status. In _kaynak/tailwind.config.js set content to "./*.html", "./**/*.html", "!./_kaynak/**" and "./_kaynak/chrome.mjs". Move the @font-face rules, the @tailwind lines and the focus ring, skip link and overflow guard from the kit's app.css into _kaynak/site.css. Output to assets/app.css, because design-check.mjs looks for fonts in that file, and add ?v=<content hash> to the link on every page so the edge cache never serves the old file. 2. Self-host the fonts. Read the CSS URL of the Fontshare families you chose (api.fontshare.com/v2/css?f[]=...) with site_read_url, download its woff2 files with site_fetch into assets/fonts/, and declare them with @font-face and font-display: swap. Preload every weight used above the fold with <link rel="preload" as="font" type="font/woff2" crossorigin>, three files at most. Skip this and the font swap shifts the layout; in the demo desktop CLS was 0.078 for that reason and dropped to 0 with preloading. 3. Make the menu and footer static HTML. The kit's <site-nav> and <site-footer> components run on JavaScript, and most AI crawlers never see the menu, the address or the phone number. Remove the chrome.js and motion.js scripts from every page. In _kaynak/chrome.mjs write two functions that build the header and footer HTML from assets/site.config.js; build the mobile menu without JavaScript using <details> and <summary>, and mark the current page with aria-current="page". Write build.mjs at the site root that, in order, runs node seo-stamp.mjs, re-stamps everything between <!-- chrome:header:start --> and <!-- chrome:header:end --> (and the same for the footer) on every page, compiles Tailwind and updates the hash on the CSS link. After every change, run only site_run_command("node build.mjs"). 4. Parallax without JavaScript. Give the first image data-parallax and move it slowly with a CSS scroll-driven animation (animation-timeline: scroll(root)) using transform only; give sections a data-reveal entrance that also uses transform only, never opacity. Wrap the rules in @media (prefers-reduced-motion: no-preference) and @supports (animation-timeline: scroll()); with reduced motion, or in a browser without support, the image stays still. Do not load GSAP, Lenis or Swiper. 5. Shrink the images. Download each photo with site_fetch into separate files using resize="480x", "800x", "1200x", "1600x", image_format="webp" and a quality between 60 and 68. Give every <img> srcset, sizes, and width and height that match the real ratio; if you crop, add a ratio class such as aspect-[4/3] with object-cover, otherwise the layout shifts when the image loads. The first-screen image gets fetchpriority="high" and is not lazy; all others get loading="lazy". Download the sharing image as a 1200x630 JPG with site_fetch. 6. Small details that cost points: add an SVG favicon with <link rel="icon"> (otherwise the browser requests /favicon.ico, the 404 shows up as a console error and Best Practices drops). Write DOCTYPE in capitals, use no style attributes and leave no trailing whitespace. Use &nbsp; instead of spaces in the visible text of phone links (the html-validate tel-non-breaking rule). Links in the menu, footer, breadcrumb and headings must be at least 44 pixels high and wide. Do not embed a Google Maps iframe; the site should make no outside requests, so show the address and a "Get directions" link instead. 7. No request may leave the site: fonts, scripts, styles and images all live on your own server. There is no form handler, so the contact form is a method="get" form pointing at https://wa.me/[WhatsApp number] with a prefilled textarea named "text"; no JavaScript is needed. Gates (in this order; do not call it done until all of them pass): 1. Run node build.mjs with site_run_command, then node seo-check.mjs: 0 errors, 0 warnings. A duplicate content warning means two pages are not different enough; rewrite them. 2. node design-check.mjs: 0 errors. If you chose a motionless style, report the "no motion" warning as a deliberate decision with the reason. 3. _kaynak/node_modules/.bin/html-validate on every HTML file: 0 errors. Put a _kaynak/ line in a .htmlvalidateignore file at the site root so dependencies are not scanned. 4. Language check: show in a table that every page's hreflang twin exists, returns 200 and points back; seo-check must give no hreflang warning. 5. Look at every page with site_preview at view="mobile", view="desktop", and also at 360 and 768 wide. Fix horizontal scrolling, overflowing headings, cramped buttons or unreadable text and look again. 6. Measure every page with core_web_vitals at strategy="mobile" and strategy="desktop", and get accessibility, best practices and SEO scores with seo_audit. The target on mobile is 100 for accessibility, best practices and SEO and at least 95 for performance; on desktop at least 95 for all four. On a page that misses, run core_web_vitals with resources=true, find the LCP element and any oversized image, fix it and repeat seo_audit with runs=2, because a single lab run can fluctuate. 7. The network requests must contain no address outside the site's own domain. After publishing: submit sitemap.xml with gsc_submit_sitemap and check the home page and the three most important pages with gsc_inspect_urls. No tool can press "Request Indexing"; list what I need to request by hand in Search Console. Finish with this report: the page list with mobile and desktop scores per page in a table (performance, accessibility, best practices, SEO, LCP, CLS), the result of each gate, the fixes you made and the information you still need from me. If a target was missed, say so plainly instead of calling it done.

Example result

An example of the output this prompt produces. Its structure comes from the tools' real output; numbers and names are fictional.

Example output (a demo site built for a fictional business, not real customer data; the scores are this demo's local Lighthouse 12 measurements)

Style: Luxury/warm, full-screen photography, CSS scroll-timeline parallax (reduced-motion aware), TR+EN, no JavaScript. Pages: 12.

PageMobile P/A/BP/SEOMobile LCPDesktop P/A/BP/SEO
/99/100/100/1002.0 s100/100/100/100
/alacati/100/100/100/1001.8 s100/100/100/100
/en/98/100/100/1002.4 s100/100/100/100
/en/alacati/100/100/100/1001.8 s100/100/100/100
/en/contact/100/100/100/1001.4 s100/100/100/100
/en/rooms/100/100/100/1001.5 s100/100/100/100
/en/rooms/courtyard-room/100/100/100/1001.5 s100/100/100/100
/en/rooms/terrace-suite/100/100/100/1001.5 s100/100/100/100
/iletisim/100/100/100/1001.4 s100/100/100/100
/odalar/100/100/100/1001.5 s100/100/100/100
/odalar/avlu-oda/100/100/100/1001.5 s100/100/100/100
/odalar/teras-suit/100/100/100/1001.5 s100/100/100/100

Gates: seo-check 0 errors 0 warnings, design-check 0 errors, html-validate 0 errors, no overflow at 360/390/768/1440, no console errors, no requests outside the site.

Before and after: not measured.

Language: 6 Turkish and 6 English twin pages, absolute hreflang tr/en/x-default on every page, xhtml:link pairs in sitemap.xml, og:locale en_GB on English pages. Parallax is off under prefers-reduced-motion: reduce.

Fixes made:
1. Removed the Tailwind Play CDN and compiled under _kaynak; output is named assets/app.css because design-check.mjs looks for fonts only in that file (another name triggered a 'no distinctive typography' error).
2. Preloaded every font weight used above the fold; with only two weights preloaded desktop CLS was 0.078, with all three it was 0.
3. Images whose width/height did not match the real ratio caused CLS; added a ratio class (aspect-[..]) with object-cover.
4. html-validate: uppercase DOCTYPE, &nbsp; in phone link text (tel-non-breaking), trailing whitespace (build.mjs now trims template output).
5. Footer, breadcrumb and heading links were under 44 pixels; added inline-flex min-h-[44px] and a CSS rule for paragraphs holding a single link.
6. Pages flagged as 'body too short' by seo-check got paragraphs with real information.
7. The transparent header disappeared on light pages (rooms, contact) and accessibility dropped to 95; the header now has a dark background.
8. seo-stamp stamps og:locale tr_TR on every page, so build.mjs switches it to en_GB on English pages.
9. Added a 600/900 pixel portrait crop for the mobile first image through <picture>.

A sample site built with this prompt

Luxury/warm, full-screen photography, CSS scroll-timeline parallax (reduced-motion compliant), TR+EN, no JavaScript

Built for a fictional brand by following this prompt to the letter. Scores were measured with Lighthouse on every page.

Lighthouse scores (lowest page)
MobileDesktop
Performance98100
Accessibility100100
Best practices100100
SEO100100

Checks passed

  • seo check: 0 hata 0 uyarı
  • design check: 0 hata, 0 uyarı
  • html validate: 0 hata
  • overflow: 360/390/768/1440 taşma yok
  • touch targets: 360/390'da 44px altı hedef yok
  • console: konsol hatası yok
  • external requests: Lighthouse ağ listesinde dış istek yok
  • tailwind before after: ölçülmedi
Screenshots
Build a bilingual luxury site for a boutique hotel or real estate project, with large photography, gentle parallax and hreflang: Mobile
Mobile
Build a bilingual luxury site for a boutique hotel or real estate project, with large photography, gentle parallax and hreflang: Desktop
Desktop

Measured on: 2026-10-11

Related searches

These prompts work best when your AI assistant is connected to your accounts with Opus Growth.

Connect your accounts free

More prompts

WebsiteChanges after your approvalLive demo

Build an editorial expert site with a guides section and author schema

Has your assistant build an expert's site with a magazine-cover home page, long-form guides and an author profile. Serif typography, Article and Person schema and dated, sourced articles produce a publication people read and AI answers can cite.

When to use itWhen you are a consultant, specialist or one-person knowledge business and want your site to read like a publication that shows your expertise through writing, not like a brochure.

SEO Intelligence, Search Console
WebsiteChanges after your approvalLive demo

Build a heritage family business site with a classic look and modern standards

Has your assistant build a site in the spirit of an old label and shop sign for a producer in its third generation, framed and with a paper texture. The look is old, the build is new: mobile first, JavaScript-free, self-hosted fonts, WebP, Product and HowTo schema.

When to use itWhen you sell a craft passed down through generations, such as Turkish delight, olive oil, cheese or copperware, and want a classic look that carries that history without giving up speed or accessibility.

SEO Intelligence, Search Console
WebsiteChanges after your approvalLive demo

Build a Swiss-minimal law or accounting firm site with strong trust signals

Has your assistant build a still firm site on a strict grid, with hierarchy carried by a single type family. It puts the trust signals a YMYL field needs on the page: practitioner profiles, a dated and sourced guidance note, wording that respects professional advertising rules, and Person schema.

When to use itWhen a law, accounting or similar professional practice needs a site that looks serious and plain, stays within professional advertising rules and proves its expertise.

SEO Intelligence, Search Console
WebsiteChanges after your approvalLive demo

Build a JavaScript-free multi-page corporate site and deliver it at 100

Has your assistant build a still, fast and accessible site for corporate work such as architecture, engineering or consulting. Menu and footer are static HTML, fonts and CSS are self-hosted, and every page is measured before hand-over.

When to use itWhen a corporate business needs a multi-page site where speed and accessibility matter more than decoration, with no animation and no JavaScript.

SEO Intelligence, Search Console