130 lines
7.6 KiB
HTML
130 lines
7.6 KiB
HTML
<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-white via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
|
<!-- Décorations de fond animées -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute top-1/4 -left-20 w-72 h-72 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
|
|
<div class="absolute top-1/3 -right-20 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
|
|
<div class="absolute bottom-1/4 left-1/2 transform -translate-x-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
|
|
</div>
|
|
|
|
<!-- Grille de points en arrière-plan (effet moderne) -->
|
|
<div class="absolute inset-0 opacity-10 dark:opacity-5">
|
|
<div class="absolute inset-0" style="background-image: radial-gradient(circle, #6366f1 1px, transparent 1px); background-size: 50px 50px;"></div>
|
|
</div>
|
|
|
|
<div class="relative w-full mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16 sm:pt-24 sm:pb-20">
|
|
<!-- Contenu principal -->
|
|
<div class="max-w-5xl mx-auto">
|
|
|
|
<!-- Badge ou tag -->
|
|
<div class="flex justify-center mb-6 animate-fade-in">
|
|
<div class="inline-flex items-center gap-2 bg-white dark:bg-gray-800 rounded-full px-4 py-2 shadow-lg border border-indigo-100 dark:border-indigo-900">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
|
|
</span>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Plateforme de mise en relation professionnelle
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Titre principal avec animation de mots -->
|
|
<div class="text-center mb-8 sm:mb-12">
|
|
<h1 class="block font-bold text-gray-900 dark:text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl leading-tight animate-slide-up">
|
|
Dans quel secteur se cache
|
|
<br class="hidden sm:block" />
|
|
votre prochaine
|
|
<br />
|
|
<span class="inline-block mt-2 sm:mt-4">
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 animate-gradient">
|
|
pépite?
|
|
</span>
|
|
</span>
|
|
</h1>
|
|
|
|
<!-- Animation des mots qui défilent -->
|
|
<div class="mt-6 sm:mt-8 flex justify-center animate-slide-up animation-delay-200">
|
|
<div class="relative inline-block">
|
|
<div class="word-animation h-12 sm:h-14 md:h-16 lg:h-20 overflow-hidden">
|
|
<div class="word-container">
|
|
<span class="word text-red-500 dark:text-red-400">Les finances</span>
|
|
<span class="word text-orange-500 dark:text-orange-400">La Santé</span>
|
|
<span class="word text-blue-500 dark:text-blue-400">Les Études</span>
|
|
<span class="word text-green-500 dark:text-green-400">La Tech</span>
|
|
</div>
|
|
</div>
|
|
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent pointer-events-none"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="text-center mb-8 sm:mb-12 animate-fade-in animation-delay-300">
|
|
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
|
Connectez-vous avec des professionnels talentueux dans tous les secteurs d'activité
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Barre de recherche -->
|
|
<div class="max-w-3xl mx-auto mb-12 animate-slide-up animation-delay-400">
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-4 sm:p-6 hover:shadow-3xl transition-all duration-300 transform hover:scale-[1.02]">
|
|
<app-search (onSearchChange)="showNewQuery($event)" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA ou statistiques -->
|
|
<div class="flex flex-wrap justify-center gap-4 sm:gap-6 animate-fade-in animation-delay-500">
|
|
<div class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-indigo-100 dark:bg-indigo-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600 dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl sm:text-3xl font-bold text-indigo-600 dark:text-indigo-400">250+</p>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Profils actifs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-purple-100 dark:bg-purple-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600 dark:text-purple-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd" />
|
|
<path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl sm:text-3xl font-bold text-purple-600 dark:text-purple-400">12+</p>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Secteurs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-pink-100 dark:bg-pink-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600 dark:text-pink-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-2xl sm:text-3xl font-bold text-pink-600 dark:text-pink-400">500+</p>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Projets</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll indicator (optionnel) -->
|
|
<div class="flex justify-center mt-12 sm:mt-16 animate-bounce animation-delay-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-400 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|