ba1d24fa02
- SEO technique: sitemap.ts, robots.ts, structured data JSON-LD (Organization, Course, FAQPage) - Meta tags optimisés pour 12+ mots-clés TikTok Shop France - Hero SEO-optimisé: H1 ciblant "formation TikTok Shop" + "créateur affilié France" - Nouvelle section ResultsShowcase: stats marché TikTok Shop + timeline 8 semaines - Tableau comparatif HookLab vs alternatives - 6 témoignages avec disclaimer Google-compliant (pas de faux avis) - Pricing avec prix barré, bonus inclus, garantie satisfait ou remboursé - Badges de confiance (paiement sécurisé, RGPD, support, garantie) - Pop-up exit-intent (desktop) avec stats marché - Barre sticky CTA mobile - Notifications social proof animées - CTA final avant footer - Barre d'annonce urgence en haut - FAQ enrichie (10 questions) avec structured data FAQPage - Smooth scroll + animations CSS ajoutées https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
120 lines
2.2 KiB
CSS
120 lines
2.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
|
@import "tailwindcss";
|
|
|
|
@theme inline {
|
|
--color-primary: #6D5EF6;
|
|
--color-primary-hover: #5B4FDB;
|
|
--color-primary-50: #F3F1FF;
|
|
--color-primary-100: #E9E5FF;
|
|
--color-primary-light: #9D8FF9;
|
|
|
|
--color-dark: #0B0F19;
|
|
--color-dark-light: #1A1F2E;
|
|
--color-dark-lighter: #252A3A;
|
|
--color-dark-border: #2A2F3F;
|
|
|
|
--color-success: #10B981;
|
|
--color-warning: #F59E0B;
|
|
--color-error: #EF4444;
|
|
|
|
--font-sans: "Inter", sans-serif;
|
|
|
|
--radius-card: 20px;
|
|
--radius-button: 12px;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-dark);
|
|
color: #ffffff;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
/* Smooth scroll for anchor links */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Scrollbar personnalisee */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-dark-lighter);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
/* Animation hover cards */
|
|
.card-hover {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px rgba(109, 94, 246, 0.15);
|
|
}
|
|
|
|
/* Gradient text */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, #6D5EF6, #9D8FF9);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Gradient background */
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #6D5EF6, #9D8FF9);
|
|
}
|
|
|
|
/* Glass effect */
|
|
.glass {
|
|
background: rgba(26, 31, 46, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(109, 94, 246, 0.1);
|
|
}
|
|
|
|
/* Pulse animation pour CTA */
|
|
@keyframes pulse-glow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(109, 94, 246, 0.3);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 40px rgba(109, 94, 246, 0.6);
|
|
}
|
|
}
|
|
|
|
.pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Scale in animation for popups */
|
|
@keyframes scale-in {
|
|
0% {
|
|
transform: scale(0.9);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scale-in 0.3s ease-out;
|
|
}
|
|
|
|
/* Selection color */
|
|
::selection {
|
|
background: rgba(109, 94, 246, 0.3);
|
|
color: #ffffff;
|
|
}
|