Construis un site en turc et en anglais pour mon
[hôtel / projet résidentiel] sur mon serveur d'hébergement
[nom du serveur]. Détails :
1. Nom :
[nom de l'établissement ou du projet], lieu :
[lieu], type :
[hôtel de charme / projet résidentiel]
2. Pour un hôtel, les types de chambres (surface, lit, nombre d'invités, vue, équipements), les heures d'arrivée et de départ, la saison et le règlement intérieur :
[détails des chambres]
3. Pour un projet, les types de logements (pièces, mètres carrés, étage, date de livraison) et les coordonnées du bureau de vente :
[détails des logements]
4. Téléphone :
[téléphone], WhatsApp :
[WhatsApp], e-mail :
[e-mail], adresse :
[adresse]
5. Domaine :
[domaine], vraies photos : [où se trouvent les photos, ou "utilise des photos libres de droits"]
6. Qui relira le texte anglais :
[personne, ou "personne"]
Commence par confirmer le serveur avec list_servers et lance scaffold_site avec style="universal", d'abord avec confirm=false, puis avec confirm=true après mon accord. Lis site_design_guide et site_seo_guide. Rédige dans _kaynak/ART.md une décision de design luxueuse et chaleureuse et montre-la-moi : une police d'affichage serif fine issue de Fontshare (par exemple Boska 300) avec une police de texte sobre (par exemple Synonym), des tons café foncé et lin, un seul accent cuivre, de petites étiquettes très espacées et une photographie plein écran. L'élément signature est la première image plein écran de la page d'accueil et sa parallaxe douce. Ne pose pas d'en-tête transparent sur la photo : sur les pages claires, le texte clair du menu disparait (dans la démo, cela a fait tomber l'accessibilité à 95 sur les pages des chambres et du contact). Donne à la barre un fond sombre.
Structure linguistique :
1. Les pages turques sont à la racine et leurs jumelles anglaises sous /en/. Chaque page turque a une jumelle anglaise et les deux se renvoient l'une à l'autre. Garde les paires de pages dans une seule liste dans assets/site.config.js et construis le menu, le pied de page et le sélecteur de langue à partir de cette liste ; le sélecteur mène toujours à la page correspondante, jamais à l'accueil.
2. Le <head> de chaque page contient hreflang="tr", hreflang="en" et hreflang="x-default" pointant vers la page turque, tous en URL absolues ; écris les mêmes paires dans sitemap.xml sous forme d'entrées xhtml:link.
3. Les pages anglaises utilisent <html lang="en">, un title, une description et un fil d'Ariane en anglais, et WebPage inLanguage "en". seo-stamp.mjs appose og:locale tr_TR sur chaque page ; dans build.mjs, après l'estampillage, remplace-le par en_GB sur les pages anglaises et ajoute og:locale:alternate dans les deux langues.
4. Écris l'anglais comme le ferait un rédacteur natif, et non comme une traduction, et garde les noms de lieux dans leur graphie turque.
Pages et schema (chacune dans les deux langues) :
1. Accueil : première image plein écran, ce qu'est le lieu en un paragraphe, quelques faits clés (nombre de chambres, arrivée, départ, saison), cartes des chambres et lien vers le guide local. Schema : WebPage, et sur le nœud de l'établissement le type Hotel avec checkinTime, checkoutTime, numberOfRooms, amenityFeature et les chambres sous containsPlace. Pour un projet résidentiel, utilise Residence ou ApartmentComplex à la place.
2. Une page des chambres et une page par type de chambre : surface, lit, nombre d'invités, équipements, à qui elle convient, et un lien vers l'autre type de chambre. Schema : HotelRoom (bed, occupancy, floorSize, amenityFeature, containedInPlace #business). Pour un projet résidentiel, un RealEstateListing par type de logement avec un Apartment à l'intérieur (numberOfRooms, floorSize). Si je n'ai pas donné de prix, n'écris aucun offers, et dis dans le texte "envoyez-nous vos dates et nous vous indiquerons le tarif correspondant".
3. Guide local : connaissance du terrain avec une date de dernière mise à jour. Schema : WebPage.
4. Contact et réservation : téléphone, formulaire WhatsApp, e-mail, adresse, "Itinéraire", conseils de trajet et conditions de réservation. Schema : ContactPage.
5. Une page 404 (courte, dans les deux langues).
N'affirme aucun classement en étoiles, aucune récompense, aucune note de clients ni "le meilleur" ; n'ajoute ni starRating ni aggregateRating.
Pour ouvrir rapidement de grandes photos : livre la première image avec <picture> ; sur les écrans jusqu'à 767 pixels, utilise un recadrage portrait en 600 et 900 pixels de large (recadré à l'adresse source et récupéré avec site_fetch), et sur les écrans plus larges la version paysage en 1200, 1600 et 2000 pixels. Sans le recadrage portrait, l'image paysage est agrandie pour remplir l'écran du téléphone, et elle parait alors floue ou pèse inutilement lourd.
Aucune invention : n'écris ni avis, ni notes, ni récompenses, ni certificats, ni nombre de clients, ni affirmations comme "le meilleur" qui ne soient pas réels. N'ajoute pas au schema ou au texte d'horaires d'ouverture, de coordonnées, de prix ou d'e-mail que je ne t'ai pas fournis ; laisse le champ de côté et signale-le comme manquant dans le rapport. N'utilise ni tirets longs ni slogans bateau, et fais en sorte que le premier paragraphe de chaque page réponde directement à la question de cette page.
Travail SEO commun : chaque page reçoit un title unique de 48 à 60 caractères, une description de 145 à 158 caractères, un seul H1 et une canonical qui se termine par une barre oblique. Ajoute pour chaque page son propre nœud WebPage et un BreadcrumbList, reliés au graphe de base par @id. Dans robots.txt, écris Allow: / pour Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et CCBot, explique la décision dans un commentaire et indique ce qu'il faut modifier si je veux bloquer les robots d'entrainement. sitemap.xml contient de vraies dates lastmod. llms.txt décrit l'établissement fidèlement en deux phrases et liste le NAP et les pages importantes avec leurs liens.
Mise en place technique (le chemin par défaut de la boite à outils n'est pas utilisé sur ce site, pour les raisons suivantes) :
1. Compile Tailwind et abandonne le CDN. Le kit charge Tailwind via le CDN Play, qui compile dans le navigateur, affiche un avertissement dans la console et dégrade les performances mobiles. Écris _kaynak/package.json avec site_write_file, installe avec site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) et attends avec site_command_status. Dans _kaynak/tailwind.config.js, règle content sur "./*.html", "./**/*.html", "!./_kaynak/**" et "./_kaynak/chrome.mjs". Déplace les règles @font-face, les lignes @tailwind ainsi que l'anneau de focus, le lien d'évitement et la protection contre le débordement depuis app.css du kit vers _kaynak/site.css. Sors le résultat vers assets/app.css, car design-check.mjs cherche les polices dans ce fichier, et ajoute ?v=<hash du contenu> au lien sur chaque page pour que le cache en périphérie ne serve jamais l'ancien fichier.
2. Héberge les polices toi-même. Lis l'URL CSS des familles Fontshare choisies (api.fontshare.com/v2/css?f[]=...) avec site_read_url, télécharge ses fichiers woff2 avec site_fetch dans assets/fonts/, et déclare-les avec @font-face et font-display: swap. Précharge chaque graisse utilisée au-dessus de la ligne de flottaison avec <link rel="preload" as="font" type="font/woff2" crossorigin>, trois fichiers au maximum. Sans cela, le remplacement de police décale la mise en page ; dans la démo, le CLS sur ordinateur était de 0,078 pour cette raison et est tombé à 0 grace au préchargement.
3. Rends le menu et le pied de page en HTML statique. Les composants <site-nav> et <site-footer> du kit fonctionnent avec JavaScript, et la plupart des robots d'IA ne voient jamais le menu, l'adresse ni le numéro de téléphone. Supprime les scripts chrome.js et motion.js de chaque page. Dans _kaynak/chrome.mjs, écris deux fonctions qui construisent le HTML de l'en-tête et du pied de page à partir de assets/site.config.js ; construis le menu mobile sans JavaScript avec <details> et <summary>, et marque la page courante avec aria-current="page". Écris à la racine du site build.mjs qui, dans l'ordre, lance node seo-stamp.mjs, ré-estampille tout ce qui se trouve entre <!-- chrome:header:start --> et <!-- chrome:header:end --> (et de même pour le pied de page) sur chaque page, compile Tailwind et met à jour le hash sur le lien CSS. Après chaque modification, lance uniquement site_run_command("node build.mjs").
4. Parallaxe sans JavaScript. Donne à la première image data-parallax et déplace-la lentement avec une animation CSS pilotée par le défilement (animation-timeline: scroll(root)) en utilisant uniquement transform ; donne aux sections une entrée data-reveal qui utilise elle aussi uniquement transform, jamais opacity. Enveloppe les règles dans @media (prefers-reduced-motion: no-preference) et @supports (animation-timeline: scroll()) ; avec la réduction des animations, ou dans un navigateur sans prise en charge, l'image reste immobile. Ne charge ni GSAP, ni Lenis, ni Swiper.
5. Allège les images. Télécharge chaque photo avec site_fetch dans des fichiers distincts en utilisant resize="480x", "800x", "1200x", "1600x", image_format="webp" et une qualité entre 60 et 68. Donne à chaque <img> srcset, sizes, ainsi que width et height correspondant au vrai ratio ; si tu recadres, ajoute une classe de ratio comme aspect-
[4/3] avec object-cover, faute de quoi la mise en page se décale au chargement de l'image. L'image du premier écran reçoit fetchpriority="high" et n'est pas en lazy ; toutes les autres reçoivent loading="lazy". Télécharge l'image de partage en JPG 1200x630 avec site_fetch.
6. Petits détails qui coutent des points : ajoute un favicon SVG avec <link rel="icon"> (sinon le navigateur demande /favicon.ico, la 404 apparait comme une erreur dans la console et les Bonnes pratiques chutent). Écris DOCTYPE en majuscules, n'utilise aucun attribut style et ne laisse aucun espace en fin de ligne. Utilise à la place des espaces dans le texte visible des liens téléphoniques (règle html-validate tel-non-breaking). Les liens du menu, du pied de page, du fil d'Ariane et des titres doivent faire au moins 44 pixels de haut et de large. N'intègre pas d'iframe Google Maps ; le site ne doit faire aucune requête externe, affiche donc l'adresse et un lien "Itinéraire" à la place.
7. Aucune requête ne doit sortir du site : polices, scripts, styles et images résident tous sur ton propre serveur. Il n'y a pas de gestionnaire de formulaire, donc le formulaire de contact est un formulaire method="get" pointant vers https://wa.me/
[numéro WhatsApp] avec un textarea prérempli nommé "text" ; aucun JavaScript n'est nécessaire.
Contrôles (dans cet ordre ; ne dis pas que c'est terminé tant qu'ils ne passent pas tous) :
1. Lance node build.mjs avec site_run_command, puis node seo-check.mjs : 0 erreur, 0 avertissement. Un avertissement de contenu dupliqué signifie que deux pages ne sont pas assez différentes ; réécris-les.
2. node design-check.mjs : 0 erreur. Si tu as choisi un style sans mouvement, signale l'avertissement "no motion" comme une décision délibérée en en donnant la raison.
3. _kaynak/node_modules/.bin/html-validate sur chaque fichier HTML : 0 erreur. Mets une ligne _kaynak/ dans un fichier .htmlvalidateignore à la racine du site pour que les dépendances ne soient pas analysées.
4. Contrôle des langues : montre dans un tableau que la jumelle hreflang de chaque page existe, renvoie 200 et pointe en retour ; seo-check ne doit donner aucun avertissement hreflang.
5. Regarde chaque page avec site_preview en view="mobile", view="desktop", et aussi en 360 et 768 de large. Corrige le défilement horizontal, les titres qui débordent, les boutons à l'étroit ou le texte illisible, puis regarde à nouveau.
6. Mesure chaque page avec core_web_vitals en
