viniq_bio_l_ia_au_service_du_vin

Fiche Descriptive Complète : VinIQ Bio

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template viniq_bio_l_ia_au_service_du_vin.html

Version 1.0.0

Date de création 16 Mars 2026

Auteur / Designer Refoia Jeremy Tech (Analyse par Gemini)

Type de page Linktree / Bio Link / Landing Page Mobile-First

Objectif principal Centraliser les services d’oenologie prédictive et convertir via des CTA.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est une « Bio Link » sophistiquée dédiée à une marque de vin technologique. Il utilise une esthétique « Glassmorphism » et des dégradés profonds pour marier le luxe traditionnel du vin et l’innovation de l’IA. Il permet de naviguer vers une boutique, une démo d’analyse de terroir, des réservations et des rapports techniques.

📌 Public cible (Persona)

👤 Amateurs de vin technophiles : Intéressés par l’innovation et les millésimes assistés par IA.

👤 Professionnels du secteur : Cherchant des rapports de vinification ou des analyses de terroir.

👤 Utilisateurs Mobiles : Le format est optimisé pour une consultation rapide sur smartphone.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 Sémantique.

Framework CSS : Tailwind CSS (via CDN).

Typographie : Google Fonts (Playfair Display pour le luxe, Inter pour la lisibilité).

Responsive : ✅ Oui — Mobile First (Max-width: max-w-md).

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 status_ia str ✅ État du système (ex: « IA active »).

2 prediction_text str ✅ Message d’analyse prédictive (ex: « Millésime 2026… »).

3 links_array array ✅ Liste des boutons (label, url, emoji/icon).

4 hero_img_url str ❌ Image de profil/marque (Unsplash par défaut).

📤 INTERACTIONS & SORTIES

🖱️ Événements Utilisateur

✅ Active State : Effet scale-95 au clic sur les boutons pour un feedback tactile.

✅ Hover Effect : Translation horizontale (translate-x-1) sur les flèches des CTA.

✅ Animation : Pulsation (animate-pulse) sur l’icône « Cerveau » pour simuler l’activité de l’IA.

🧱 STRUCTURE DU FICHIER — DOM

index.html

📌 : Configuration SEO, Tailwind et polices personnalisées. Styles CSS spécifiques pour le .glass et le .wine-gradient.

📌 (Container centré max-w-md)

🏗️ Header :

Avatar avec bordure lumineuse et badge « IA active ».

Titre H1 (Playfair Display) et slogan.

🏗️ Main / Dashboard :

div.glass : Bandeau d’analyse en temps réel (Status).

div.space-y-4 : Liste de liens (Bouton Gradient « Boutique » + Boutons Glassmorphism).

🏗️ Social Footer :

Liens textuels (Instagram, LinkedIn, YouTube) avec opacité réduite.

🏗️ Copyright :

Texte en majuscules avec espacement de lettres (tracking-[0.2em]).

🎨 CHARTE GRAPHIQUE

🎨 Palette de Couleurs

Fond : #0f172a (Slate 900 – Sombre élégant).

Accent IA : #8b5cf6 (Purple 500 – Intelligence artificielle).

Accent Vin : #722f37 (Wine Red) vers #3b0764 (Deep Purple).

Texte : #f8fafc (Slate 50) pour le contraste.

📐 Mise en Page

Layout : Flexbox vertical, centré.

Effets : Backdrop-blur (10px) pour l’effet de verre, ombres violettes (ai-glow).

🧪 TESTS & VALIDATION (Checklist)

# Cas de test Résultat attendu Statut

1 Contraste Lisibilité du texte blanc sur fond sombre. ✅ Passé

2 Animation L’émoji 🧠 doit pulser en continu. ✅ Passé

3 Responsive Ne doit pas dépasser la largeur sur iPhone SE. ✅ Passé

4 Liens Tous les doivent être cliquables sur toute la surface. ✅ Passé

📌 INSTRUCTIONS SPÉCIALES

Note de l’IA : Ce template utilise un CDN pour Tailwind. Pour une mise en production, il est recommandé de compiler le CSS pour supprimer les classes inutilisées et améliorer les performances (Lighthouse).