Oups ! Cette page semble s'être perdue dans le cyberespace
Pas de panique ! Même les meilleures technologies ont parfois besoin d'un petit coup de pouce pour retrouver leur chemin. ```
{% extends 'base.html.twig' %}
{% block title %}{{ page.title }} - {{ site.title }}{% endblock %}
{% block content %}
<div class="min-h-screen bg-gradient-to-br from-primary-50 via-white to-accent-50 flex items-center justify-center px-4 py-16">
<div class="max-w-4xl mx-auto text-center">
<!-- Illustration 404 -->
<div class="mb-12 relative">
<div class="error-illustration">
<!-- Numéro 404 stylisé -->
<div class="text-404">
<span class="digit-4 first">4</span>
<span class="digit-0">
<div class="planet">
<div class="orbit">
<div class="satellite"></div>
</div>
</div>
</span>
<span class="digit-4 last">4</span>
</div>
<!-- Éléments flottants -->
<div class="floating-elements">
<div class="float-element code-bracket"></></div>
<div class="float-element wifi-icon">📶</div>
<div class="float-element rocket">🚀</div>
<div class="float-element gear">⚙️</div>
</div>
</div>
</div>
<!-- Message principal -->
<div class="mb-8 fade-in-content">
<h1 class="text-4xl md:text-5xl font-bold text-primary-900 mb-4">
{{ page.title }}
</h1>
<p class="text-xl text-primary-600 mb-6 max-w-2xl mx-auto leading-relaxed">
{{ page.content|raw }}
</p>
</div>
<!-- Barre de recherche -->
<div class="mb-12 max-w-md mx-auto">
<div class="relative">
<input
type="text"
id="search-404"
placeholder="Rechercher sur le site..."
class="w-full px-6 py-4 text-lg border-2 border-primary-200 rounded-full focus:border-accent-500 focus:outline-none transition-colors duration-300 bg-white shadow-lg"
>
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-accent-500 text-white p-3 rounded-full hover:bg-accent-600 transition-colors duration-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
</div>
</div>
<!-- Navigation rapide -->
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<a href="{{ base_url }}" class="nav-card group">
<div class="nav-icon">🏠</div>
<h3 class="font-semibold text-primary-900 mb-2">Accueil</h3>
<p class="text-sm text-primary-600">Retour à la page d'accueil</p>
</a>
<a href="{{ base_url }}/services" class="nav-card group">
<div class="nav-icon">💼</div>
<h3 class="font-semibold text-primary-900 mb-2">Services</h3>
<p class="text-sm text-primary-600">Découvrez nos solutions</p>
</a>
<a href="{{ base_url }}/portfolio" class="nav-card group">
<div class="nav-icon">🎨</div>
<h3 class="font-semibold text-primary-900 mb-2">Portfolio</h3>
<p class="text-sm text-primary-600">Nos réalisations</p>
</a>
<a href="{{ base_url }}/contact" class="nav-card group">
<div class="nav-icon">📞</div>
<h3 class="font-semibold text-primary-900 mb-2">Contact</h3>
<p class="text-sm text-primary-600">Parlons de votre projet</p>
</a>
</div>
<!-- Pages populaires -->
<div class="mb-12">
<h2 class="text-2xl font-bold text-primary-900 mb-6">Pages populaires</h2>
<div class="flex flex-wrap justify-center gap-4">
<a href="{{ base_url }}/services/sites-vitrines" class="popular-link">
Sites Vitrines
</a>
<a href="{{ base_url }}/services/ecommerce" class="popular-link">
E-commerce
</a>
<a href="{{ base_url }}/services/seo" class="popular-link">
Référencement SEO
</a>
<a href="{{ base_url }}/blog" class="popular-link">
Blog
</a>
</div>
</div>
<!-- CTA de contact -->
<div class="bg-white rounded-2xl shadow-xl p-8 border border-primary-100">
<h3 class="text-2xl font-bold text-primary-900 mb-4">
Besoin d'aide ?
</h3>
<p class="text-primary-600 mb-6">
Notre équipe est là pour vous accompagner dans votre projet digital
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="{{ base_url }}/contact" class="btn-primary">
Nous contacter
</a>
<a href="tel:+33123456789" class="btn-secondary">
📞 Appeler maintenant
</a>
</div>
</div>
<!-- Message technique -->
<div class="mt-12 text-sm text-primary-500">
<p>Code d'erreur : 404 | Page non trouvée</p>
<p class="mt-1">Si le problème persiste, n'hésitez pas à nous contacter</p>
</div>
</div>
</div>
<!-- Scripts pour la recherche et animations -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Animation des éléments flottants
const floatingElements = document.querySelectorAll('.float-element');
floatingElements.forEach((element, index) => {
element.style.animationDelay = `${index * 0.5}s`;
});
// Recherche simple
const searchInput = document.getElementById('search-404');
if (searchInput) {
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const query = this.value.trim();
if (query) {
// Redirection vers une page de recherche ou Google site search
window.location.href = `{{ base_url }}/search?q=${encodeURIComponent(query)}`;
}
}
});
}
// Animation d'apparition progressive
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
});
document.querySelectorAll('.nav-card').forEach(card => {
observer.observe(card);
});
});
</script>
{% endblock %}