01 / Interface02 / Logique03 / DonnéesUne identité. Toutes ses couches.
01LE SYSTÈME
Nous ne créons pas que des pages. Nous construisons des systèmes.
Une visite commence sur un écran. Derrière, plusieurs éléments peuvent travailler ensemble. Découvrez le rôle de chaque couche.
Anatomie d’un systèmeExplorer les couches
Couche 03
Frontend
La partie qui vit dans le navigateur. Elle présente le contenu, répond aux commandes et s’adapte à l’espace disponible.
L’interface consulte et présente l’information.
Une carte conceptuelle : chaque projet relie les couches dont il a besoin.
02CE QUE NOUS POUVONS CONSTRUIRE
Un site est un point de départ.
Des possibilités selon le projet. Périmètre, faisabilité et outils sont définis avant le développement.
WEB / IDENTITÉ
La même intention. Sur chaque écran.
Nous ne réduisons pas un site. Nous le repensons pour chaque écran.
La même information. Une autre disposition.Simulation
Largeur disponible
Deux colonnes : contexte et contenu partagent l’espace.
01
Des sites avec leur propre direction
+
Sites d’entreprise, expériences haut de gamme, pages de campagne et microsites. Composition, typographie et parcours pensés autour de la marque et de l’objectif de chaque visite.
Site de marque
Luxury
Microsites
02
Un contenu au rythme éditorial
+
Magazines, récits, catalogues et présentations de projets avec des hiérarchies claires. Textes, photos et vidéos organisés pour lire, explorer et trouver l’essentiel.
Éditorial
Catalogues
Narration
03
Langues et écrans
+
Structures multilingues et compositions responsive adaptant navigation, contenu et ressources à chaque écran. Routes, SEO par langue, formats et devises suivent les marchés visés.
Multilingue
Responsive
SEO par langue
Devises
04
Des expériences qui s’adaptent
+
Variantes selon la langue, l’appareil, le lien ou la campagne. Aussi selon des préférences non sensibles choisies par la personne, ou son compte lorsque le projet le permet.
Préférences
Campagnes
Comptes
Parcours progressifs
EXPÉRIENCES PERSONNALISÉES
Un site différent pour chaque personne.
Des adaptations selon le contexte de visite, les préférences choisies ou un compte autorisé, avec des contrôles de confidentialité adaptés.
Une structure, plusieurs contextesDémo
example.astura
Restaurant / exemple
Une place pour votre prochain repas.
Une carte de saison, un lieu et une réservation à portée de main.
Voir la carte↗Réserver une table
01 / CONTEXTE
Le contenu privilégie la carte, le lieu et les réservations.
Démonstration avec du contenu fictif. Le choix modifie uniquement cet exemple ; aucune donnée personnelle n’est consultée.
03MOUVEMENT / ESPACE
Des expériences qui ne ressemblent pas à une page web.
Le mouvement peut expliquer une structure, révéler un détail ou guider un récit. Il a toujours une raison.
Du geste à l’espaceSchéma 2D
01Défilement→02Caméra→03Scène
Illustration du principe : la progression peut contrôler la caméra et la relation entre les couches.
Une véritable étude du Lab. Le diagramme représente la relation entre défilement, caméra et scène.
01
Des récits au fil du défilement
+
Parallax, sections fixes, défilement horizontal, apparitions de texte et transitions. Le mouvement révèle l’information par étapes, avec des alternatives de mouvement réduit.
Parallax
Pin
Défilement horizontal
Texte
Transitions
02
Des formes qui réagissent
+
Animation SVG, transformations de formes et interactions inspirées de la physique. Des diagrammes explicatifs aux boutons magnétiques et aux éléments réagissant au curseur ou au toucher.
SVG
Morph
Physique
Boutons magnétiques
03
Produits et espaces en 3D
+
Visionneuses de produits, environnements navigables et showrooms virtuels. Les vues éclatées expliquent les assemblages ; les caméras révèlent matières, détails et proportions.
Visionneuses 3D
Showrooms
Vues éclatées
04
Cartes et scènes spatiales
+
Cartes interactives, parcours de lieux et compositions de particules. Lumière et profondeur guident l’attention dans l’espace numérique.
Cartes
Particules
Éclairage
05
Caméra et matières en temps réel
+
Scènes 3D liées au défilement, mouvements de caméra et shaders pour la lumière, les textures ou la déformation. La complexité s’adapte aux appareils et au budget de performance.
WebGL
Caméra
Shaders
Défilement 3D
04INTELLIGENCE ARTIFICIELLE
L’IA comme outil. Avec un regard humain.
Pour assister, explorer et produire. Avec une direction claire et une vérification humaine, du contenu aux processus.
COHÉRENCE VISUELLE
Une identité. Plusieurs formats.
Une référence guide le personnage, le produit, l’espace, la lumière et la palette. La cohérence est vérifiée à chaque version.
Une direction artistique commune
01Référence
02Image
03Vidéo
04Réseaux
05Web
Schéma illustratif du parcours.
Les images, personnages, espaces et scènes créés par IA sont identifiés comme générés ou conceptuels.
01
Une assistance reliée au contenu
+
Assistants pour consulter et extraire des données documentaires, classer les entrées, proposer des recommandations ou soutenir des processus. Sources, autorisations et points de contrôle sont définis pour chaque usage.
Extraction documentaire
Classification
Recommandations
02
Contenu et cohérence de marque
+
Assistance pour les textes, traductions et images à partir de références de ton, d’identité et de style. La continuité visuelle des personnages et campagnes est vérifiée avant utilisation.
Textes
Traduction
Cohérence visuelle
03
Production photographique virtuelle
+
Images générées de produits, d’intérieurs, d’architecture, de personnages et de lieux. Pour explorer des directions ou créer des visuels, clairement identifiés comme générés ou conceptuels.
Photographie virtuelle
Intérieurs
Architecture
04
Vidéo pour campagnes et réseaux
+
Créations publicitaires et sociales associant montage, génération IA, animation 2D ou 3D et image vers vidéo. Script, durée et montage s’adaptent au message et au canal.
Publicité
Social
2D / 3D
Image vers vidéo
05
Voix, synchronisation et versions
+
Voix off, synchronisation labiale et versions par langue ou format, avec les autorisations nécessaires pour les voix et apparitions. Déclinaisons possibles en vertical, horizontal ou carré.
Voix
Synchronisation labiale
Formats
CONTENU VIRTUEL / GÉNÉRÉ
Un contenu n’a pas besoin d’exister physiquement pour sembler réel.
Photographie virtuelle, intérieurs conceptuels, visualisation de produits et campagnes. Leur origine est indiquée clairement.
05AUTOMATISATION / ACTIVITÉ
Votre site peut travailler quand vous n’êtes pas là.
Un formulaire peut lancer un processus : valider, organiser, répondre et accompagner vers la prochaine étape.
Un exemple de parcours automatisé
01Formulaire
02Validation
03CRM
04Email
05Suivi
Schéma illustratif du parcours.
DES EMAILS AVEC UNE LOGIQUE
L’email qui fonctionne comme une application.
La langue, l’objet de la demande et le statut du client peuvent définir la réponse. Confirmations, rappels et contenus arrivent au bon moment.
Nouvelle demande
Langue choisie · FRType de projet · Réservation
Modèle adapté → Historique CRM
01
Du contact au suivi
+
Collecte de demandes, enregistrement CRM, génération de documents et factures, suivi et accueil client. Les statuts peuvent se synchroniser entre les outils convenus.
CRM
Automatisation
Factures
Onboarding
02
Des emails contextualisés
+
Messages transactionnels localisés déclenchés par une action : confirmations, rappels et alertes. Modèles, signatures et règles d’envoi, avec orientation des messages entrants vers la bonne équipe.
Email
Rappels
Signatures
Gestion des boîtes de réception
03
Réservations et disponibilités
+
Calendriers avec créneaux, disponibilités et capacité. Selon le service, la réservation peut inclure paiement, confirmation, modification et annulation suivant les règles de l’entreprise.
Réservations
Capacité
Paiements
Annulations
04
Vente et abonnements
+
Commerce en ligne avec catalogue, commandes, stock et comptes clients. Paiements ponctuels ou abonnements reliés à une passerelle et aux processus de la boutique.
Ecommerce
Abonnements
Stock
05
Portails clients
+
Espaces privés pour consulter documents, messages, factures et état d’un service. Chaque compte accède uniquement aux informations et actions autorisées.
Espace privé
Documents
Messages
06CONNEXIONS / OUTILS
Tout peut communiquer.
Une API est un moyen convenu d’échanger des informations entre logiciels. Elle relie votre site à d’autres services selon leurs possibilités.
Connexions possibles par API
01Votre site
02API
03CRM · Paiements · Données · IA
Schéma illustratif du parcours.
DÉVELOPPEMENT SUR MESURE
Si cela n’existe pas, on peut le construire.
Calculateurs, devis, configurateurs, formulaires interactifs, comparateurs et simulateurs. Des outils conçus autour de votre façon de travailler.
Et un espace privé pour vos clients : documents, commandes, rendez-vous et projets, avec accès et autorisations.
01
Outils internes
+
Tableaux de bord pour les tâches, incidents, tickets et demandes. Les vues et rapports s’adaptent aux rôles et processus de chaque équipe.
Opérations
Tickets
Rapports
02
Des données à explorer
+
Tableaux de bord avec indicateurs, filtres et exports. Sources et définitions des KPI sont convenues pour présenter des informations utiles et compréhensibles.
Données
KPI
Filtres
Export
03
Recherche et réponses
+
Recherche avec autocomplétion, filtres ou compréhension sémantique. Un chat IA peut aider à consulter du contenu autorisé et citer les sources disponibles.
Recherche sémantique
Autocomplétion
Chat IA
04
Connexions entre systèmes
+
Intégrations API, événements et flux automatisés font circuler les données entre services. Chaque connexion nécessite des règles de synchronisation, des autorisations et un suivi des erreurs.
API
Synchronisation
Flux de travail
Intégrations possibles
Des connexions envisageables, pas des intégrations installées. Elles dépendent des comptes, autorisations, API disponibles et conditions de chaque service.
Paiements et relation client
Stripe / PayPal / HubSpot / Salesforce
Paiements, abonnements et suivi commercial.Agenda et travail quotidien
Google Calendar / Microsoft 365 / Notion / Airtable / Google Sheets
Calendriers, documents et données partagées.Gestion de contenu
WordPress / Sanity / Contentful
Publication et modification depuis un gestionnaire de contenu.Cartes et mesure
Google Maps / Mapbox / GA4 / Plausible
Lieux, parcours et analyse des objectifs.Données et accès
Supabase / Firebase / Auth0
Stockage, comptes et authentification.IA et automatisation
OpenAI / Anthropic / Make / Zapier
Assistance, traitement du contenu et connexion des tâches.
Un système en contexte.
Des parcours conceptuels pour montrer comment relier les éléments. Ce ne sont ni des projets livrés ni des systèmes actifs.
Un restaurant↗
De la carte à la réservation.
Un restaurant
01La personne consulte la carte et choisit une date, un horaire et un nombre de convives.
02Le système vérifie les services et la capacité configurés.
03La réservation peut demander un acompte et envoyer une confirmation.
04L’équipe consulte les réservations et programme le rappel prévu.
Schéma illustratif du parcours.
Site, disponibilités et communication réunis dans un même parcours.
Une salle de sport↗
De la découverte des activités à la réservation d’un cours.
Une salle de sport
01La personne explore les activités, les horaires et les abonnements.
02Elle crée un compte et choisit une formule disponible.
03Elle réserve un cours selon les places et conditions d’accès.
04Elle consulte ses prochaines séances et reçoit les avis de changement.
Schéma illustratif du parcours.
Inscriptions, abonnements et places organisés autour de chaque adhérent.
Un cabinet d’avocats↗
De la première demande à l’échange de documents.
Un cabinet d’avocats
01La personne identifie le service et demande un premier rendez-vous.
02L’équipe concernée reçoit la demande pour examen.
03Un portail avec autorisations permet de partager documents et messages.
04Le client consulte rendez-vous, notifications et factures dans son compte.
Schéma illustratif du parcours.
Une relation client organisée, avec suivi professionnel.
Un hôtel↗
De la découverte du séjour à la préparation de l’arrivée.
Un hôtel
01La personne explore chambres et services dans sa langue.
02Elle vérifie les dates et disponibilités via l’intégration prévue.
03Elle effectue la réservation et le paiement selon les conditions du séjour.
04Elle reçoit la confirmation et les informations utiles avant son arrivée.
Schéma illustratif du parcours.
Présentation, réservation et communication réunies dans une expérience cohérente.
Une entreprise de construction↗
D’une réalisation de référence au suivi d’un chantier.
Une entreprise de construction
01La personne explore les réalisations et envoie sa demande.
02L’équipe reçoit la demande dans son outil de suivi.
03Elle partage une proposition et les documents correspondants.
04Un portail peut réunir étapes, fichiers, messages et factures.
Schéma illustratif du parcours.
Demandes et suivi reliés à la documentation du projet.
07LA BASE QUI SOUTIENT L’ENSEMBLE
Ce qui ne se voit pas. Cela se conçoit aussi.
Accessibilité, performance, recherche et sécurité font partie du projet dès sa structure.
PERFORMANCE / DIFFUSION
Moins de poids. Moins d’attente.
De la ressource à l’écran
01Ressource
02Optimisation
03Diffusion
Schéma illustratif du parcours.
Des images adaptées à chaque écran. Du code chargé au bon moment. Des polices et un cache pensés pour lire plus vite.
Navigation clavier, structure sémantique, contraste et alternatives au mouvement. SEO technique et local avec métadonnées, URL canoniques, Open Graph, sitemap et robots, sans promesse de classement.
Accessibilité
SEO local
URL canoniques
Open Graph
Sitemap
Robots
02
Performance, hébergement et mesure
+
Chargement des ressources, déploiement et hébergement adaptés à l’usage. La mesure peut suivre les événements, parcours et objectifs convenus avec une confidentialité adaptée au projet.
Performance
Hosting
Événements
Parcours de conversion
03
Accès et sécurité
+
Authentification, autorisations et validation si nécessaire. Protection antibot, mises à jour et sauvegardes dépendent de l’architecture et de la maintenance prévue.
Authentification
Autorisations
Protection antibot
Sauvegardes
04
Une base évolutive
+
CMS pour modifier le contenu, systèmes de design pour préserver la marque et fonctions sur mesure. Composants et documentation assurent la continuité du travail.
CMS
Système de design
Développement sur mesure
ACCESSIBILITÉ
Différentes façons de naviguer.
HTML sémantique, clavier, focus visible, lecteurs d’écran, contraste et mouvement réduit.
CONTENU / CMS
Mettre à jour sans toucher au code.
Textes, images, articles, équipe, services ou produits. Un gestionnaire sur mesure ou connecté, adapté au projet.
MESURE
Ce qui fonctionne. Ce qu’il faut améliorer.
Trafic, demandes, clics et conversions. Une mesure pensée pour les objectifs de l’activité et ses exigences de confidentialité.
SYSTÈMES DE DESIGN
La cohérence a une structure.
Tokens, typographie, espacements, composants et règles responsive. Du langage de marque à chaque page.
08TECHNOLOGIES VÉRIFIÉES
Ce site est construit avec…
Un inventaire généré à chaque compilation depuis les dépendances, le code actif et la configuration de ce dépôt.
Frontend
React+
Composants et interactions du site : navigation, projets et expériences du Lab.
app/(spanish)/page.tsx
components/lab/lab-experience.tsx
components/studio-shell.tsx
Vinext + Vite+
Routage selon les conventions App Router et compilation du site avec Vinext sur Vite.
app/layout.tsx
package.json
vite.config.ts
Tailwind CSS+
Utilitaires de style intégrés à la compilation et utilisés dans les composants d’interface.
app/globals.css
components/ui/accordion.tsx
vite.config.ts
CSS sur mesure+
Design éditorial, variables de marque, compositions adaptatives et transitions créées pour AsturaWeb.
app/globals.css
app/v2.css
GSAP+
Séquençage et courbes d’animation du studio Astura Motion.
app/(spanish)/laboratorio/astura-motion/page.tsx
components/hero-film/master-timeline.ts
Three.js / WebGL+
Scènes tridimensionnelles du Lab et du studio de mouvement, avec une alternative statique.
components/hero-film/astura-film.tsx
components/hero-film/studio-renderer.ts
components/lab/lab-scene.ts
Base UI + Lucide+
Accordéons et boîtes de dialogue interactifs, avec des icônes dans la navigation et les commandes.
components/studio-shell.tsx
components/ui/accordion.tsx
components/ui/dialog.tsx
Développement
TypeScript+
Typage strict et vérification du code sans génération de fichiers de sortie.
package.json
tsconfig.json
Node.js + npm+
Scripts de compilation et de vérification, avec des dépendances figées par package-lock.
package-lock.json
package.json
Oxlint + Oxfmt+
Outils configurés pour l’analyse et le formatage du code.
.oxfmtrc.json
.oxlintrc.json
package.json
Vérifications automatisées+
Tests d’Astura Check et de ses requêtes techniques, complétés par des scripts de vérification SEO.
package.json
scripts/verify-astura-check.mjs
scripts/verify-seo.mjs
scripts/verify-technical.mjs
Publication
Netlify+
Publication configurée pour les fichiers statiques générés lors de la compilation.
netlify.toml
next.config.ts
Netlify Functions+
API d’Astura Check et nettoyage programmé du stockage temporaire.
netlify.toml
netlify/functions/astura-check.ts
netlify/functions/check-cleanup.ts
Netlify Blobs+
Cache temporaire des résultats et compteurs limitant les requêtes d’Astura Check.
lib/astura-check/storage.server.ts
netlify/functions/check-cleanup.ts
Netlify Edge Functions+
Politique du domaine canonique, règles d’indexation des aperçus et traitement des routes de sécurité.
netlify.toml
netlify/edge-functions/search-policy.ts
netlify/edge-functions/security-monitor.ts
Performance
Chargement progressif+
Les scènes 3D sont importées dynamiquement lorsque l’expérience et l’appareil le permettent.
components/hero-film/astura-film.tsx
components/lab/lab-experience.tsx
Images et vidéo+
Images WebP et chargement différé des contenus secondaires ; la vidéo est demandée au lancement de la lecture.
app/(spanish)/page.tsx
components/auntech-showcase.tsx
components/deferred-media.ts
Polices locales+
Instrument Sans et Instrument Serif en WOFF2, avec permutation des polices et préchargement des variantes utilisées en accueil.
app/(spanish)/page.tsx
app/globals.css
public/fonts/sans-600.woff2
public/fonts/serif-italic.woff2
Mouvement adaptatif+
Respecte la préférence de réduction des animations et propose un studio statique sur les appareils aux ressources limitées.
components/hero-film/astura-film.tsx
components/motion.tsx
Maîtrise du rendu+
Densité de pixels limitée dans les scènes 3D et mise en pause des animations ou vidéos hors écran.
components/auntech-showcase.tsx
components/hero-film/astura-film.tsx
components/lab/lab-scene.ts
Inventaire généré à partir du code relié aux pages et de la configuration de compilation. Une dépendance simplement installée n’est pas présentée comme une technologie active.
Décrit l’implémentation ; ne fournit aucun score de performance ni confirmation de l’état des services externes.
Wrangler et la configuration Cloudflare sont conservés pour l’aperçu local ; la publication est configurée sur Netlify.
Les scripts de vérification n’impliquent pas une intégration continue active : aucune configuration CI n’a été trouvée dans le dépôt.
09UNE MÊME STRUCTURE
Différentes disciplines. Un seul Astura.
Explorez les connexions. Direction visuelle et construction technique sont pensées ensemble.
Un studio. Un système.Choisir une discipline
ASTURATout est relié
Design
Identité, hiérarchie et direction visuelle commune.
↗
→LA PROCHAINE CONNEXION
Que souhaitez-vous construire ?
Cela peut commencer par un site. Sans s’arrêter là.
