# Installation des dépendances
npm install

# Lancement du serveur de développement
npm run dev

# Build de production
npm run build

# Prévisualisation du build
npm run preview

Le site sera accessible sur http://localhost:4321/

📁 Structure du projet

src/
├── layouts/
│   └── Layout.astro          # Layout principal avec header/footer
├── pages/
│   ├── index.astro           # Page d'accueil
│   ├── services.astro        # Page services
│   ├── tarification.astro    # Page tarification avec calculateur
│   ├── contact.astro         # Page contact avec formulaire
│   ├── a-propos.astro        # Page à propos
│   └── migration.astro       # Landing page migration
└── components/               # Composants réutilisables (à développer)

public/
└── assets/
    ├── fonts/               # Polices web optimisées
    ├── img/                 # Images et icônes
    └── uploads/             # Assets depuis l'ancien site

🎨 Design System

Couleurs

Primary: #007bff (Bleu Systech)
Secondary: #6c757d (Gris)
Success: #28a745 (Vert)
Danger: #dc3545 (Rouge)
Warning: #ffc107 (Jaune)
Light: #f8f9fa (Fond clair)
Dark: #343a40 (Texte sombre)

Typographie

Primary: Inter (Titres et interface)
Secondary: Silka (Contenu)
Tailles responsive avec rem
Hiérarchie claire h1-h6

Composants

Boutons avec états hover/focus
Cards avec ombres subtiles
Grilles responsive
Formulaires accessibles
Navigation mobile

📱 Responsive Design

Mobile-first - Design optimisé mobile en priorité
Breakpoints:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
Grilles flexibles - CSS Grid et Flexbox
Images adaptatives - Tailles optimisées par device

🌐 Internationalisation

Langues supportées: Français (défaut), Anglais
Configuration: astro.config.mjs
Routing:
- FR: / (pas de préfixe)
- EN: /en/ (préfixe anglais)
Navigation: Toggle FR/EN dans le header

🔧 Configuration

Astro Config

export default defineConfig({
  i18n: {
    defaultLocale: 'fr',
    locales: ['fr', 'en'],
    routing: {
      prefixDefaultLocale: false
    }
  },
  site: 'https://systech-hebergement.com'
});

Variables CSS

Toutes les couleurs et espacements sont définis en CSS custom properties dans Layout.astro pour une maintenance facile.

📊 Performance

Core Web Vitals optimisés
Lazy loading des images
Préchargement des ressources critiques
Minification automatique
CDN ready pour déploiement

🚀 Déploiement

Le site est optimisé pour un déploiement statique sur:

Netlify
Vercel
GitHub Pages
CDN classique

npm run build
# Contenu généré dans /dist

📈 Prochaines étapes

Pages à développer

/ressources/ - Hub de contenu
/vs/aws - Pages de comparaison
/lp/ - Landing pages ads
/essai - Page d'inscription essai
Version anglaise complète

Fonctionnalités

Système de blog/CMS
Chat widget intégration
Calendrier de réservation
Analytics et tracking
Formulaires fonctionnels avec backend

Optimisations

Composants Astro réutilisables
Tests automatisés
CI/CD pipeline
Monitoring performance

📝 Notes de migration

Migré depuis WordPress

Contenu principal extrait et adapté
Assets copiés et optimisés
Structure SEO préservée
URLs maintenues pour les redirections

Améliorations apportées

Performance considérablement améliorée
Code maintenable et moderne
Responsive design uniforme
Accessibilité renforcée

Développé par Marc Boivin pour Systech Hébergement
Dernière mise à jour: Juin 2025