# Systech - Site Web Hébergement Géré

Site web marketing pour Systech, spécialiste en hébergement géré et DevOps au Québec. Construit avec Astro pour des performances optimales.

## 🚀 Technologies utilisées

- **Astro 5.8.1** - Générateur de site statique moderne
- **CSS natif** - Styles personnalisés avec variables CSS
- **TypeScript** - Typage statique pour une meilleure maintenabilité
- **Optimisation d'images** - Chargement optimisé des assets
- **Support i18n** - Français/Anglais

## 📋 Fonctionnalités

### Pages principales
- **Accueil** - Hero, value propositions, social proof, différenciation
- **Services** - Hébergement clé en main, DevOps complet, Support 24/7
- **Tarification** - Plans transparents, comparaison concurrents, calculateur
- **Contact** - Formulaire qualifié, méthodes de contact, bureau
- **À propos** - Histoire, équipe, valeurs, certifications
- **Migration** - Landing page conversion avec audit gratuit

### Optimisations
- **Performance** - Temps de chargement < 3s
- **SEO** - Meta tags optimisés, structure sémantique
- **Responsive** - Mobile-first design
- **Accessibilité** - Navigation clavier, screen readers
- **Fonts** - Préchargement des polices principales

### Assets migrés
- Fonts (Inter, Silka) depuis l'ancien site
- Images et logos clients
- Uploads et contenu existant
- Structure optimisée pour Astro

## 🛠️ Installation et développement

```bash
# 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
```javascript
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

```bash
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