199 lines
5.3 KiB
Markdown
199 lines
5.3 KiB
Markdown
# 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
|