Construis un site corporate multipage entièrement statique pour mon entreprise, sur mon serveur d'hébergement Opus Growth
[nom du serveur]. Entreprise :
[nom de l'entreprise], [secteur, par ex. cabinet d'ingénierie et d'architecture],
[ville / zone d'intervention]. Services :
[services avec une courte description chacun]. Téléphone :
[téléphone], e-mail :
[e-mail], adresse :
[adresse], domaine :
[domaine]. Préférence de couleurs :
[couleur / préférence de marque, ou "à ton choix"]. Photos : [où se trouvent les vraies photos, ou "utilise des photos libres de droits adaptées"].
Ce site privilégie la vitesse et l'accessibilité. Pas une seule ligne de JavaScript sur aucune page ; GSAP, Lenis et Swiper ne sont jamais chargés. Tout, y compris le menu, le menu mobile et la FAQ, fonctionne avec HTML et CSS.
La direction de design est "planche de dessin technique" :
1. Typographie : une police de titre grotesque serrée issue de Fontshare (par ex. Cabinet Grotesk 800) et une police de texte posée (par ex. General Sans 400 et 600). Trois fichiers de police au maximum.
2. Couleurs : un fond ton papier clair, un texte encre foncé, un gris secondaire et une seule couleur d'accent de type signalétique. L'accent n'apparait que sur les étiquettes, les filets fins et le bouton principal. Chaque couleur de texte atteint au moins 4,5:1 de contraste.
3. Grille : 12 colonnes, sections séparées par des filets de 1 pixel ; ni ombres, ni coins arrondis, ni dégradés.
4. Élément signature : sous l'image du premier écran, une bande de quatre cellules dans le style du cartouche d'un plan d'architecte (par ex. type de projet, norme appliquée, échelle, numéro de planche), et une grille millimétrée très discrète dessinée en CSS uniquement derrière le premier écran.
5. Mouvement : aucun. Pas de durées de transition non plus ; seuls le soulignement et la couleur changent instantanément au survol.
Pages et schémas :
1. index.html : un premier écran dont le paragraphe d'ouverture répond directement à "que faites-vous, pour qui, où", trois cartes de service (chacune renvoyant à sa section), un processus en quatre étapes (numérotées "Étape 1" avec un compteur CSS, pas 01/02), deux exemples de projets, un bandeau téléphone. WebPage.
2. hizmetler.html : une section par service ; le premier paragraphe répond à "quand est-ce nécessaire, à quoi cela sert", puis une liste du périmètre, la durée typique et les livrables. WebPage plus un Service par service (provider #business, areaServed).
3. projeler.html : des exemples avec type de batiment, méthode et résultat ; noms de clients uniquement avec autorisation. CollectionPage.
4. hakkimizda.html : qui nous sommes, nos règles de travail, où nous intervenons. AboutPage.
5. sss.html : au moins six vraies questions dans des <details>. WebPage et FAQPage.
6. iletisim.html : téléphone, e-mail et adresse dans <address>, un lien vers la carte ; ne mets pas les horaires si tu ne les connais pas. ContactPage avec mainEntity #business.
7. kvkk.html (notice de confidentialité) et 404.html.
Règles techniques. Suis-les à la lettre, car les contrôles ci-dessous mesurent exactement ces points :
1. Mise en place. Lance d'abord scaffold_site en aperçu, montre-moi la liste des fichiers, puis installe avec confirm=true après mon accord. Lis ensuite site_design_guide et site_seo_guide en entier. Avant d'écrire du code, rédige la direction dans _kaynak/ART.md (ambiance, association de polices, couleurs avec rapports de contraste, grille, élément signature, décision sur le mouvement, liste des pages) et montre-la-moi.
2. Supprimer le JavaScript. Aucune page de ce site ne charge de JavaScript. Retire de chaque page le script cdn.tailwindcss.com, la ligne tailwind.config, les balises GSAP, ScrollTrigger, SplitText, Lenis et Swiper ainsi que les balises script motion.js, chrome.js et site.config.js ; supprime assets/chrome.js et assets/motion.js. Garde assets/site.config.js, mais uniquement comme source de marque, de contact et de seo pour seo-stamp.mjs ; il n'est jamais chargé dans le navigateur.
3. Menu et pied de page en HTML statique. Les composants <site-nav> et <site-footer> sont dessinés par JavaScript, donc les robots de recherche et d'IA ne voient ni le menu, ni les liens internes, ni les coordonnées. Écris l'en-tête dans _kaynak/ust.inc et le pied de page (nom, adresse, téléphone, e-mail, lien vers chaque page, notice de confidentialité, "Web: Opus Growth") dans _kaynak/alt.inc. Utilise l'extension .inc pour que seo-stamp et html-validate ne traitent pas ces fragments comme des pages. Chaque page contient les marqueurs <!-- ust:bas --><!-- ust:son --> et <!-- alt:bas --><!-- alt:son -->. Écris ensuite avec site_write_file un script Node sans dépendances, _kaynak/parca-bas.mjs : il injecte les deux fragments entre les marqueurs dans chaque fichier HTML, ajoute aria-current="page" au lien du menu de la page courante, et réécrit sitemap.xml en utilisant le dateModified du JSON-LD de chaque page comme lastmod (en ignorant la 404 et les pages noindex). Construis le menu mobile sans JavaScript avec <details><summary>Menu</summary> ; les menus desktop et mobile sont deux éléments <nav> distincts avec des aria-label différents.
4. Auto-héberger les polices. Ce site utilise trois fichiers de police au maximum. Télécharge le CSS Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, code de graisse 401 pour l'italique) avec site_fetch vers _kaynak/fontshare.css, lis-le avec site_read_file et ne retiens que les URL woff2 de la famille demandée ; le service ajoute parfois une famille que tu n'as pas demandée. Télécharge chaque woff2 avec site_fetch dans assets/fonts/. Place les règles @font-face (font-display: swap) dans assets/app.css, car design-check.mjs ne cherche une police personnalisée que dans ce fichier. N'utilise pas les polices par défaut Inter, Roboto, Poppins ou Montserrat.
5. Compiler Tailwind. assets/app.css devient la source Tailwind : @tailwind base; @tailwind components; @tailwind utilities; en haut, puis @font-face, l'anneau de focus, le lien d'évitement, une règle prefers-reduced-motion et tes propres classes de composants dans @layer components. Ne donne jamais à une classe de composant le nom d'un utilitaire Tailwind (list-item, table, grid, container, hidden, etc.), car le conflit casse silencieusement la mise en page après compilation. Écris tailwind.config.js à la racine (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], couleurs et fontFamily). Lance "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" avec site_run_command et background=true, et attends le résultat avec site_command_status. Le <head> de chaque page contient, dans cet ordre : un seul <link rel="stylesheet" href="/assets/site.css">, puis une ligne preload pour chaque fichier de police utilisé sur le premier écran (titre, accent et texte ; as="font" type="font/woff2" crossorigin). Des lignes preload placées avant la feuille de style retardent le CSS et allongent le LCP ; une police du premier écran sans preload s'affiche tard, décale la page et augmente le CLS, puis <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La ligne du favicon est obligatoire : sans elle, le navigateur demande /favicon.ico, reçoit une 404, et l'erreur en console abaisse le score Best Practices.
6. Images. Télécharge les photos avec site_fetch en utilisant resize et image_format="webp" à plusieurs largeurs (480, 800, 1200 et 1600 pour l'image du premier écran, 480, 800 et 1200 pour les autres ; qualité entre 60 et 75, plus basse pour les photos détaillées). Chaque <img> a srcset, des sizes qui correspondent à la mise en page réelle, width et height (zéro CLS) et un texte alt pertinent et honnête. fetchpriority="high" n'est mis que sur l'image que Lighthouse signale comme élément LCP, et cette image n'est pas en lazy ; toutes les autres images utilisent loading="lazy". Si l'élément LCP est un texte, aucune image ne reçoit fetchpriority. Prépare aussi assets/img/logo.png, un assets/img/og.jpg de 1200x630 et assets/img/favicon.svg.
7. Règles HTML (valeurs par défaut de html-validate). <!DOCTYPE html> en majuscules ; aucun attribut style en ligne (y compris le style="background:var(--brand)" du kit, utilise une classe à la place) ; au lieu d'espaces simples dans le texte des liens tel: ; un type sur chaque <button> ; pas d'espaces en fin de ligne ; tableaux avec <thead>, <tbody> et th scope. Les liens dans les paragraphes sont soulignés ; les liens du menu, du pied de page, du fil d'Ariane et des boutons ont une zone tactile d'au moins 44x44 pixels (min-h-
[44px] min-w-
[44px]).
8. Données structurées. Remplis le bloc seo de site.config.js (siteUrl, description, logo, image og, type d'entreprise, champs d'adresse) et lance "node seo-stamp.mjs" avec site_run_command ; il injecte Organization, WebSite et, le cas échéant, un sous-type LocalBusiness, ainsi que le canonical et les balises OG. Ajoute à la main le schéma propre à chaque page : sur chaque page un nœud WebPage avec un @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished et dateModified, isPartOf #site, about #business ou #org, et breadcrumb pointant vers un BreadcrumbList ; plus un Service par service sur la page des services et FAQPage sur la page FAQ. Écris chaque nœud dans son PROPRE bloc <script type="application/ld+json"> et n'utilise pas d'enveloppe @graph, car seo-check.mjs ne lit que le @type de premier niveau et rate un BreadcrumbList placé dans @graph. Relie les nœuds avec @id. N'invente jamais d'horaires d'ouverture, de coordonnées, de notes, d'avis, de distinctions, de nombre de clients ou de certificats ; laisse de côté les champs inconnus.
9. Accès pour les IA. Écris robots.txt : tout le site ouvert, seul /_kaynak/ fermé ; Allow: / pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et Bingbot ; ta décision sur CCBot avec la raison en commentaire ; la ligne Sitemap en dernier. Ajoute llms.txt à la racine : un résumé correct de l'entreprise en deux phrases, les pages importantes avec une ligne chacune, et les coordonnées. Écris 404.html (noindex, avec les marqueurs d'en-tête et de pied de page).
10. Rédaction. Chaque page contient au moins 150 mots de texte original dans <main>, et le premier paragraphe répond directement à la question principale de la page. Les titres font de 48 à 60 caractères, les descriptions de 145 à 158, uniques sur chaque page. Pas de tirets cadratins ni demi-cadratins, pas de slogans bateau, pas de promesses creuses. Si un élément du site n'est pas réel, dis-le clairement et indique qu'il est fictif.
Contrôles. Après chaque modification, lance-les avec site_run_command dans cet ordre et ne passe pas à la suite tant que chacun n'est pas propre :
1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, la compilation Tailwind (à refaire si tu as ajouté des classes).
2. node seo-check.mjs : 0 erreur et 0 avertissement. S'il signale "gövde kısa" (corps trop court), ajoute du vrai texte, pas du remplissage.
3. node design-check.mjs : 0 erreur. Le seul avertissement toléré est "Hiç hareket yok" (aucun mouvement) ; c'est un choix délibéré de ce site, donc explique la raison dans le rapport.
4. npx --yes html-validate "**/*.html" : 0 erreur.
5. Regarde chaque page avec site_preview en view="mobile" et view="desktop", et vérifie aussi la page d'accueil en 360 et 768 pixels. Corrige tout débordement horizontal, titre à l'étroit ou zone tactile inférieure à 44 pixels, puis regarde à nouveau.
6. Mesure chaque page avec core_web_vitals en strategy="mobile" et strategy="desktop", puis audite la page d'accueil et la page la plus longue avec seo_audit. Objectif : sur mobile, Accessibility, Best Practices et SEO à 100 et Performance à au moins 95 ; sur desktop, les quatre à au moins 95. Aucune requête ne doit sortir du site. Si le LCP est élevé, utilise resource
