Full-stack Next.js 15 application with: - Landing page with marketing components (Hero, Testimonials, Pricing, FAQ) - Multi-step candidature form with API route - Stripe Checkout integration (subscription + webhooks) - Supabase Auth (login/register) with middleware protection - Dashboard with progress tracking and module system - Formations pages with completion tracking - Profile management with password change - Database schema with RLS policies - Resend email integration for transactional emails Stack: Next.js 15, TypeScript, Tailwind CSS v4, Supabase, Stripe, Resend https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y
93 lines
1.8 KiB
CSS
93 lines
1.8 KiB
CSS
@import "tailwindcss";
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
|
|
|
@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);
|
|
}
|
|
|
|
/* Scrollbar personnalisée */
|
|
::-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;
|
|
}
|