Sur mon serveur d'hébergement Opus Growth
[server name], crée un site vitrine pour l'application mobile
[app name]. Application :
[what it does, who it is for], plateformes et versions minimales :
[iOS and Android versions]. Les quatre fonctionnalités principales et ce que montre chaque écran :
[feature, one-sentence description, items on the screen]. Formules et prix : [plan name, price, period, included features, trial length; VAT included or not]. Liens des stores :
[App Store link],
[Google Play link]. Questions d'assistance : [real answers on account deletion, cancellation, data export and so on]. Société et contact :
[company name],
[address],
[support email],
[phone]. Domaine :
[domain]. Captures d'écran réelles :
[links or "none, draw them in HTML"].
Pages : accueil (/ : hero, parcours des fonctionnalités guidé par le téléphone #ozellikler, à qui s'adresse l'application, tarifs #fiyatlar, FAQ, appel à l'action de téléchargement #indir), assistance (/destek/ : questions fréquentes et contact du support), confidentialité et KVKK (/gizlilik/ : couvrant à la fois l'application et le site ; les stores demandent l'URL d'une politique de confidentialité) et 404.html. La section tarifs comprend des cartes de formules et, en dessous, un vrai tableau comparatif `<table>` ; ne donne pas de min-width au tableau, car dans la démo une largeur minimale fixe faisait sortir des colonnes de l'écran sur mobile.
Style : une page d'application chaleureuse et rassurante. Fond crème, une couleur de marque sombre et un seul accent vif utilisé uniquement en fond. Une police d'affichage arrondie et conviviale de Fontshare (par exemple Chillax) et une police de texte lisible (par exemple Manrope). Dessine le cadre du téléphone en CSS (aspect-ratio 9/19, coins arrondis, une encoche) et construis les écrans en HTML et CSS plutôt qu'avec des fichiers image ; les cartes d'écran sont une décoration en aria-hidden et le texte à côté décrit la fonctionnalité. Pour une vraie application, télécharge sur ton propre serveur les badges officiels d'Apple et de Google pour les boutons de stores et respecte leurs directives ; ajoute la mention des marques déposées dans le pied de page.
Règles d'animation (le point le plus difficile, à suivre à la lettre) :
1. Bibliothèques : uniquement le cœur de GSAP 3.13 et ScrollTrigger, uniquement sur la page d'accueil. Lenis, SplitText, Swiper, Lottie et la vidéo ne sont PAS chargés ; aucun script du tout sur les pages d'assistance et de confidentialité.
2. Chaque section de fonctionnalité porte dans le HTML son propre petit téléphone et son écran. Sur mobile, sans JS et avec l'animation réduite, chaque fonctionnalité s'affiche avec son propre écran, empilés (côte à côte sur les écrans plus larges) ; cet état doit être complet à lui seul.
3. À partir de 1024 px de large, lorsque l'animation est autorisée, le JS copie les écrans des sections dans l'unique téléphone de la colonne de droite, ajoute une classe `has-phone` à la section et masque les petits téléphones. N'écris pas les écrans deux fois dans le HTML. Comme la section des fonctionnalités se trouve sous la première vue, ce changement de classe ne compte pas dans le décalage de mise en page ; la démo a mesuré un CLS de 0.
4. Maintiens le téléphone en place avec le CSS `position: sticky` (top: calc(50vh - la moitié de la hauteur du téléphone)) plutôt qu'avec un pin de ScrollTrigger. Aucun pin-spacer n'est ajouté, cela fonctionne sans JS et la page ne saute pas.
5. Changement d'écran : pour chaque section de fonctionnalité, utilise ScrollTrigger.create avec start "top 55%", end "bottom 55%" et onToggle ; affiche l'écran actif avec gsap autoAlpha et masque le précédent avec autoAlpha 0. N'utilise pas opacity seule ; les écrans masqués doivent être en visibility:hidden pour que l'audit d'accessibilité ne les lise pas. Le titre de la section active change de couleur (sans fondu par opacity), et des points à côté du téléphone indiquent la fonctionnalité active.
6. Les cartes et les encadrés de tarifs apparaissent avec data-reveal, en glissant de 20 px vers le haut au défilement ; vide les écrans copiés dans la fonction de revert de matchMedia pour que la mise en page ne casse pas lorsque la fenêtre est rétrécie.
Mise en place et pièges connus (chacun a couté des points ou cassé quelque chose lors de la mesure de la démo, n'en saute aucun) :
1. Si un site en ligne se trouve déjà sur le serveur, préviens-moi d'abord, car l'installation écrase index.html et le dossier assets. Prévisualise scaffold_site avec confirm=false et appelle confirm=true après mon accord. Lis ensuite site_design_guide et site_seo_guide. Avant d'écrire du code, place la direction de design (typographie, couleur, grille, élément signature, langage d'animation et bibliothèques qui ne seront PAS chargées) dans un court ART.md en dehors de assets et montre-le-moi.
2. Compile Tailwind, ne le charge pas depuis le CDN. Installe `npm i -D tailwindcss@3` avec site_run_command et background=true, et surveille avec site_command_status. Les chemins content de `tailwind.config.js` doivent couvrir tous les fichiers HTML, tous les templates et tous les fichiers JS qui écrivent des classes. `_src/tw.css` contient une ligne `@import "../assets/app.css";` et les trois lignes `@tailwind` ; compile-le en un seul fichier avec `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify`. Retire le script cdn.tailwindcss.com et le tailwind.config inline des pages et ne lie que `/assets/site.css`. Recompile après chaque modification du HTML.
3. Héberge les polices toi-même. Vérifie d'abord que la famille Fontshare choisie contient les lettres turques (ş, ğ, ı, İ, ç, ö, ü) : dans la démo, Tanker n'avait pas de ı sans point et Outfit n'avait ni ş, ni ğ, ni İ, si bien que ces lettres retombaient sur une autre police dans les titres. Télécharge le woff2 de chaque graisse séparément avec site_fetch dans `assets/fonts/`, écris les règles @font-face avec `font-display: swap` dans `assets/app.css` (design-check y cherche la police personnalisée) et vérifie le nom de font-family dans le CSS téléchargé. Précharge les polices de titre et de texte utilisées au-dessus de la ligne de flottaison sur chaque page avec `<link rel="preload" as="font" type="font/woff2" crossorigin>`, avant la feuille de style ; ne précharge pas plus de deux fichiers, car précharger une troisième graisse dans la démo a allongé le LCP mobile de 0,2 seconde. La plupart des polices Fontshare n'ont pas le signe ₺, donc écris "TL" pour les prix.
4. Rends le menu et le pied de page en HTML statique. Ne charge pas chrome.js ni site.config.js sur les pages. Écris un petit `chrome-stamp.mjs` qui lit la liste de navigation depuis site.config.js et estampille `_src/header.tpl` et `_src/footer.tpl` entre les marqueurs `<!-- nav:start --><!-- nav:end -->` et `<!-- footer:start --><!-- footer:end -->` sur chaque page, en ajoutant aria-current="page" au lien actif. Les templates ne doivent pas se terminer par .html et doivent utiliser des espaces réservés comme `
[[NAV]]` au lieu de `{{...}}`. Construis le menu mobile sans JS avec `<details>`. Garde le nom de l'organisation, l'adresse et le téléphone en texte brut dans le pied de page, et donne à chaque zone tactile au moins 44x44 px, y compris les liens du pied de page et du fil d'Ariane.
5. Convertis les images pendant leur téléchargement avec site_fetch : écris la même photo avec resize="480x", "800x" et "1200x", image_format="webp", quality=65 dans des fichiers séparés. site_fetch ne recadre jamais ; lorsqu'une photo Unsplash a besoin d'un autre ratio, télécharge la version recadrée en ajoutant à son URL des paramètres comme `?w=1600&h=1200&fit=crop`. Donne à chaque `<img>` srcset, sizes ainsi que width et height correspondant au vrai ratio. L'image principale au-dessus de la ligne de flottaison reçoit fetchpriority="high" et n'est pas lazy ; les autres reçoivent loading="lazy" decoding="async". Si l'image principale remplit l'écran sur mobile, sers un recadrage plus petit avec `<picture>`.
6. Écris la version SVG du logo en favicon.svg avec site_write_file et ajoute `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` à chaque page. Sans favicon, le navigateur journalise une erreur 404 et Best Practices tombe à 96.
7. Règles du validateur HTML : commence par un `<!DOCTYPE html>` en majuscules, utilise ` ` pour les espaces dans le texte visible des liens tel:, n'utilise jamais d'attribut style="", donne à chaque bouton type="button", et ne place pas de `<details>` dans une `<figure>` après son figcaption.
8. Télécharge les bibliothèques d'animation (GSAP, ScrollTrigger) depuis jsdelivr dans `assets/vendor/` avec site_fetch, fixe la version et charge-les uniquement sur la page d'accueil. N'utilise pas `<script defer>` ; place à la fin de la page un petit chargeur qui attend l'événement load, deux appels requestAnimationFrame puis requestIdleCallback, et ajoute les scripts dans l'ordre avec async=false. Un script d'une ligne dans `<head>` ajoute la classe `js` à `<html>` et la classe `anim` sauf si prefers-reduced-motion vaut "reduce" ; sans `anim`, le chargeur ne télécharge rien. Définis les états de départ masqués uniquement sous `.anim`, et ajoute comme filet de sécurité une animation CSS qui révèle tous les éléments masqués après 2,5 secondes au cas où la bibliothèque n'arriverait jamais. Dans les démos précédentes, les bibliothèques en defer ont poussé le LCP mobile à 3,2 secondes ; avec ce chargeur, les pages ont obtenu de 99 à 100. Nomme data-reveal l'attribut des éléments révélés au défilement ; design-check ne reconnait l'animation que par ce nom.
SEO, AEO et GEO :
1. Utilise des URL de type répertoire avec une barre oblique finale (/destek/, /gizlilik/). Remplis le bloc seo de site.config.js et exécute `node seo-stamp.mjs`. Écris le schema propre à chaque page (accueil : WebPage, MobileApplication (operatingSystem, applicationCategory, les deux URL de stores comme downloadUrl, les formules que je t'ai données comme offers avec des prix en TRY ; n'ajoute PAS aggregateRating, car une note de store n'est pas un avis collecté sur ton site) et FAQPage ; assistance : WebPage et FAQPage ; confidentialité : WebPage ; BreadcrumbList sur les pages internes. Pour une entreprise de logiciels sans point de vente physique, localBusiness:false dans site.config.js) dans des blocs `<script type="application/ld+json">` séparés et relie-les au graphe de base par @id. N'imbrique pas BreadcrumbList dans @graph ; garde-le dans son propre bloc, car c'est le seul moyen pour que seo-check le voie.
2. Garde les titres à 60 caractères ou moins (seo-check signale comme erreur tout ce qui dépasse 65), les descriptions entre 120 et 158 caractères, un seul h1 par page et aucun niveau de titre sauté (un h3 juste après le h1 a fait tomber l'accessibilité à 98). Chaque page a besoin d'au moins 150 mots de contenu principal ; les pages de contact et de confidentialité ont tendance à rester en dessous.
3. Le premier paragraphe de chaque page répond directement à la question de la page. Écris des FAQ propres à chaque page avec `<details>` et balise-les en FAQPage. Affiche l'organisation éditrice et une date de « Dernière mise à jour » dans `<time>`.
4. Dans robots.txt, consigne et justifie ta décision pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot et CCBot, et indique le sitemap. Donne à sitemap.xml de vraies dates lastmod. llms.txt contient un résumé exact du site en deux phrases, les faits clés et une liste des pages importantes.
5. Aucune invention : n'écris ni avis, ni notes, ni récompenses, ni nombre de clients, ni certificats, ni horaires d'ouverture, ni coordonnées, ni prix sans me demander. Laisse totalement de côté du schema tout champ que tu ne connais pas.
Contrôles (dans l'ordre ; ne dis pas « terminé » avant que tous soient validés) :
1. Avec site_run_command, exécute `node chrome-stamp.mjs`, la compilation Tailwind, `node seo-stamp.mjs`, `node seo-check.mjs` (0 erreur, 0 avertissement), `node design-check.mjs` (0 erreur ; justifie tout avertissement restant) et `npx html-validate "**/*.html"` (0 erreur).
2. Affiche chaque page avec site_preview en utilisant view="mobile" et view="desktop". site_preview capture la page avec l'animation désactivée (reduced-motion) ; si du contenu manque dans cette capture, l'état sans animation est cassé. Les images lazy plus bas peuvent être vides dans la capture pleine page ; ne compte pas cela comme une erreur, mais vérifie leurs chemins.
3. Exécute core_web_vitals avec strategy="mobile" et strategy="desktop" pour chaque page. Critères d'acceptation : sur mobile, Performance d'au moins 95 et Accessibility, Best Practices et SEO à 100 ; sur ordinateur, les quatre à au moins 95. Pour une page qui n'atteint pas ces scores, trouve le fichier lent avec resources=true, corrige-le et mesure à nouveau. Exécute ensuite seo_audit sur la page d'accueil avec strategy="mobile" et runs=2. Aucune adresse extérieure à ton propre domaine ne doit rester dans la liste des requêtes réseau.
4. Aucun défilement horizontal à 360, 390, 768 et 1440 px, zones tactiles d'au moins 44 px et aucune erreur de console. Le site doit aussi être impeccable dans un cadre de 390x790 et de 1440x898, comme sur les pages de prompts.
Contrôle de l'animation : site_preview ne peut pas montrer l'animation, donc dis-moi ce qu'il faut observer dans mon propre navigateur. Sur ordinateur, lorsque j'arrive à la section Fonctionnalités, le téléphone doit rester fixe au milieu de l'écran, à droite, son écran doit passer à chaque fonctionnalité au moment où le titre atteint le milieu, le titre doit prendre la couleur et le point à côté doit avancer. Sur téléphone et avec la réduction des animations activée, chaque fonctionnalité affiche son propre petit écran et rien n'est fixé en place. Les boutons de stores doivent ouvrir le bon store.
Après la publication : prévisualise avec site_headers la règle `/assets/* Cache-Control: public, max-age=31536000, immutable` et applique-la après mon accord ; à partir de là, versionne le nom du fichier chaque fois que le CSS ou le JS change (site-v2.css, etc.). Soumets sitemap.xml avec gsc_submit_sitemap et vérifie la page d'accueil avec gsc_url_inspect. Pour finir, donne-moi : un tableau des scores par page (page, quatre scores mobile, quatre scores ordinateur, LCP, CLS), les résultats des contrôles, le résultat des interactions testées dans un navigateur et la liste des correctifs appliqués.
