PORTFOLIO / NO. sami-robotics← RETOUR À L'INDEX
SITE MARKETING · 2026 · DESIGN, DÉVELOPPEMENT, CONTENU TRILINGUE & GESTION DU SITE

Sami Robotics

Site marketing trilingue pour Sami Robotics, plateforme robotique multifonction qui automatise les opérations de champ à forte intensité de main-d'œuvre. Construit sur le design system de la marque : Next.js 16, Tailwind v4, i18n FR / EN / ES, formulaires Démo et Contact en Server Actions et hébergement AWS Amplify.

CLIENT
SAMI Agtech Inc. — Sami Robotics
LIEU
Varennes, Québec
RÔLE
Design, développement, contenu trilingue & gestion du site
DURÉE
En développement continu
Page d'accueil de Sami Robotics — hero « SAMI récolte et analyse » montrant les bras robotisés de la plateforme au-dessus d'un champ de brocoli
§ 01

Chiffres clés

8 HIGHLIGHTS
96/100
Performances Lighthouse
97/100
Accessibilité
100/100
Bonnes pratiques
100/100
SEO Lighthouse
3/3
Navigation agentique
FR / EN / ES
Langues
Next.js 16
Framework
AWS Amplify
Hébergement
§ 01CONTEXTE

Contexte

Sami Robotics développe une plateforme robotique multifonction pour l'agriculture moderne : robotique avancée, IA et analytique de données pour automatiser les opérations de champ les plus exigeantes en main-d'œuvre. La première application en production est la récolte autonome de brassicacées et de laitue, avec d'autres applications (désherbage, éclaircissage, fertilisation, lutte aux ravageurs) en développement sur la même machine. L'entreprise avait besoin d'une vitrine capable de parler à trois publics à la fois — producteurs maraîchers, investisseurs et candidats — dans trois langues, et de tenir la crédibilité d'une entreprise deep tech avant même le lancement public.
§ 02DÉFI

Défi

Traduire un produit physique complexe en une page qui se comprend en trente secondes, sans survendre : la plateforme évolue, certaines applications sont en production et d'autres pas, et chaque affirmation doit rester exacte. Il fallait aussi un site trilingue FR / EN / ES sans dette de traduction, un accès protégé pendant la phase pré-lancement, des formulaires Démo et Contact fiables avec consentement conforme à la Loi 25, et un respect strict du design system de la marque — turquoise en remplissage seulement, une seule action primaire par écran, contraste visé AAA.
§ 03SOLUTION

Solution

Le site tourne sur Next.js 16 (App Router, TypeScript) avec Tailwind v4 et des primitives shadcn/ui, sur un jeu de tokens de marque qui porte le ratio 60 pétrole / 30 turquoise / 10 indigo, les ombres teintées et le rayon pill. Montserrat est auto-hébergée via next/font/local avec un fallback à métriques ajustées : CLS à zéro sans épingler les polices sur le chemin critique du LCP. L'i18n passe par un segment dynamique [locale] et des dictionnaires TypeScript typés maison — un fichier par domaine, aucune bibliothèque i18n, et des slugs traduits par locale. Les formulaires Démo et Contact sont des Server Actions validées par zod, avec rate limiting, envoi via Resend (DKIM / SPF / DMARC) et consentement horodaté pour la Loi 25. Une gate par mot de passe protège le site pendant le pré-lancement. Côté visibilité : metadata Next, JSON-LD, robots, sitemap, manifest, images OG générées et fichier llms.txt pour les crawlers d'IA. J'ai aussi écrit et je maintiens les pages de gouvernance — confidentialité, conditions d'utilisation, politique de témoins — ainsi que le kit média destiné à la presse, et un générateur de signatures courriel pour uniformiser l'équipe. Déploiement sur AWS Amplify en SSR, avec branche main vers l'environnement de développement et release vers la production.
§ 04RÉSULTAT

Résultat

Une vitrine qui soutient à la fois la mise en marché, le recrutement et les relations avec la presse et les investisseurs, dans les trois langues des marchés visés. Le rapport Lighthouse de Google donne 96 en performances, 97 en accessibilité et 100/100 en bonnes pratiques comme en SEO, avec une navigation agentique validée 3/3 — le site est lisible autant par les moteurs de recherche que par les agents d'IA qui répondent maintenant aux questions des producteurs. Et il vit au rythme du produit : ajouter une application de champ, une offre d'emploi ou une actualité ne demande pas de refonte, et les pages légales suivent les mêmes cycles de mise à jour que le reste du contenu.
§ 07

Fonctionnalités clés

CE QUI A ÉTÉ LIVRÉ
  • Accueil narratif en huit sections : problème, solution, machine, applications, trajectoire, démo
  • Architecture trilingue FR / EN / ES par dictionnaires TypeScript typés (sans bibliothèque i18n)
  • Slugs d'URL traduits par langue
  • Design system de marque en tokens Tailwind v4 (60 pétrole / 30 turquoise / 10 indigo)
  • Montserrat auto-hébergée avec fallback à métriques ajustées — CLS 0
  • Formulaires Démo et Contact en Server Actions (zod + Resend) avec rate limiting
  • Consentement horodaté conforme à la Loi 25 et bandeau de témoins
  • Gate par mot de passe pour la phase pré-lancement
  • Pages de gouvernance rédigées et maintenues : confidentialité, conditions, témoins
  • Kit média pour la presse (logos, visuels, descriptifs approuvés)
  • Générateur de signatures courriel pour l'équipe
  • SEO et partage : metadata Next, JSON-LD, sitemap, manifest, images OG générées
  • Fichier llms.txt pour les crawlers d'IA
  • Déploiement AWS Amplify en SSR — main vers dev, release vers prod
  • Cache CDN réglé au niveau de la build spec pour les médias servis hors compute
§ STACK TECHNIQUE
Next.js 16TypeScriptTailwind CSS v4shadcn/uiServer ActionsResendAWS Amplifyi18n FR / EN / ESDesign systemJSON-LDLoi 25
§ ET LE VÔTRE?

Un projet similaire en tête?

Discutons de votre projet et voyons comment je peux vous aider à atteindre vos objectifs.

Me contacter ↗