Construis un site d'aspect traditionnel pour notre entreprise familiale sur mon serveur d'hébergement Opus Growth
[nom du serveur]. Entreprise :
[nom de l'entreprise],
[ce que nous fabriquons, p. ex. huile d'olive ou loukoum],
[ville], [année de création et génération, uniquement si c'est vrai]. Produits : [pour chacun, nom, conditionnement, courte description et prix publié, ou "pas de prix"]. Étapes de production :
[courte liste]. Comment commander :
[téléphone, boutique, livraison]. Téléphone :
[téléphone], e-mail :
[e-mail], adresse de la boutique :
[adresse], domaine :
[domaine]. Photos de famille et d'archives :
[où elles se trouvent, ou "aucune"].
Le look est ancien, la construction est neuve. Le site doit évoquer une vieille étiquette, une enseigne ou un registre de récolte, mais les pages doivent s'ouvrir sans faille sur mobile, ne charger aucun JavaScript, et chaque page doit être mesurée. Le look ancien n'est jamais une excuse pour une mauvaise lisibilité ou un contraste insuffisant.
La direction artistique est traditionnelle :
1. Typographie : une seule famille à empattements classique issue de Fontshare (p. ex. Gambetta 400, 400 italique, 600). Petites capitales avec font-variant-caps: all-small-caps et espacement large pour le menu, les boutons et les libellés ; titres centrés.
2. Couleur : un fond ton papier, un texte brun encre, un brun secondaire et une couleur principale (p. ex. vert olive), avec une seconde couleur chaude uniquement sur de minuscules libellés. Le tout avec un contraste d'au moins 4,5:1.
3. Texture : une texture papier pour le fond, en data URI SVG feTurbulence dans le CSS ; pas de fichier image supplémentaire ni de requête en plus.
4. Élément signature : un cadre d'étiquette ancienne, une boite à double filet avec ornements d'angle (border, outline-offset, ::before et ::after), et un petit ornement dessiné en SVG inline entre les sections (p. ex. un rameau d'olivier), aria-hidden.
5. Mise en page : centrée et étroite ; produits dans des cartes d'étiquette encadrées, une colonne sur mobile.
6. Mouvement : aucun.
7. Photos : utilise les archives de la famille s'il y en a. Sinon, tu peux utiliser des photos d'archives du domaine public ou sous licence libre, mais indique la source et la licence dans la légende et ne les présente jamais comme celles de la famille.
Pages et leurs schémas :
1. index.html : un premier écran encadré dont le paragraphe d'ouverture répond à "qui, fabrique quoi, où, vend comment", des étiquettes produits, une section famille, comment commander. WebPage. Définis dans site.config.js le sous-type d'entreprise le plus adapté (p. ex. Store ou FoodEstablishment).
2. urunler.html : chaque produit dans sa propre carte d'étiquette avec nom, conditionnement, description et prix publié. CollectionPage et un Product par article (brand, manufacturer #business, offers avec price, priceCurrency, availability). N'écris jamais un prix que je ne t'ai pas donné ; sans prix, omets entièrement offers.
3. hikayemiz.html : la vraie histoire, génération après génération. AboutPage.
4. uretim.html : les étapes de la récolte ou de la matière première jusqu'à l'emballage, la définition officielle du grade du produit et la réglementation sur laquelle elle repose (p. ex. le Codex alimentaire turc). WebPage et HowTo.
5. sss.html : six vraies questions sur la commande, la livraison et la conservation. FAQPage.
6. iletisim.html : téléphone de commande, adresse de la boutique, lien vers la carte ; ne mets pas les horaires s'ils changent selon la saison. ContactPage.
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 une fois que j'ai donné 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. Supprime 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 et les balises script motion.js, chrome.js et site.config.js ; supprime assets/chrome.js et assets/motion.js. Conserve assets/site.config.js, mais uniquement comme source de la marque, des contacts et du 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 : les robots de recherche et d'IA ne voient donc 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, tous les liens de pages, 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 porte les marqueurs <!-- ust:bas --><!-- ust:son --> et <!-- alt:bas --><!-- alt:son -->. Écris ensuite avec site_write_file, dans _kaynak/parca-bas.mjs, un script Node sans dépendance : il injecte les deux fragments entre les marqueurs dans chaque fichier HTML, ajoute aria-current="page" au lien de menu de la page courante et réécrit sitemap.xml en utilisant le dateModified du JSON-LD de chaque page comme lastmod (en ignorant 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. Héberge les polices toi-même. Ce site utilise une seule famille à empattements classique et trois fichiers 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 dans _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 Inter, Roboto, Poppins ou Montserrat par défaut.
5. Compile 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, puis attends avec site_command_status. Le <head> de chaque page contient, dans cet ordre : un unique <link rel="stylesheet" href="/assets/site.css">, puis une ligne preload pour chaque fichier de police utilisé sur le premier écran (titre, accent et corps ; 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'échange tardivement, décale la page et fait monter 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 un 404, et l'erreur en console fait baisser les Bonnes pratiques.
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 très détaillées). Chaque <img> a srcset, sizes correspondant à la vraie mise en page, width et height (CLS nul) et un texte alt pertinent et honnête. fetchpriority="high" va uniquement sur l'image que Lighthouse signale comme élément LCP, et cette image n'est pas en lazy ; toutes les autres utilisent loading="lazy". Si l'élément LCP est du texte, aucune image ne reçoit fetchpriority. Prépare aussi assets/img/logo.png, un assets/img/og.jpg en 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 plutôt une classe) ; 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 estampille Organization, WebSite et, si pertinent, un sous-type LocalBusiness, ainsi que les balises canonical et OG. Ajoute à la main les schémas propres à 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 Product avec Offer par article sur la page produits, HowTo sur la page production 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, de coordonnées, de notes, d'avis, de récompenses, de nombres 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 ; à toi de décider pour CCBot, en indiquant la raison en commentaire ; la ligne Sitemap en dernier. Ajoute llms.txt à la racine : un résumé exact 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 vides. Si quoi que ce soit sur le site n'est pas réel, dis-le clairement : c'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 avertit "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) ; le style classique l'exige, donne donc la raison dans le rapport.
4. npx --yes html-validate "**/*.html" : 0 e
