133a30926c
The complete Lucidia education platform with: API (FastAPI): - Problem analysis endpoint with multi-modal input (photo, voice, text) - AI-generated visual explanations - Persistent user context/memory - Practice problem generation with game-like scenarios - Visualization generation (2D graphs, 3D models, animations) Web (Next.js + Tailwind): - High-converting landing page with BlackRoad brand colors - Feature showcase with animations (Framer Motion) - Pricing tiers (Free, Student $9.99/mo, Family $19.99/mo) - Mobile-responsive design - API proxy configuration Solves the 60% problem: - 60% of parents can't help with homework - 40% of 4th graders below basic reading level - $124.5B tutoring market that doesn't work Lucidia builds understanding through: - Visual explanations (not just answers) - Persistent memory (remembers your journey) - Adaptive learning (fits YOUR style) - Contextual practice (real-world scenarios) Ready for Railway deployment. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
123 lines
2.5 KiB
CSS
123 lines
2.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--brand-orange: #FF9D00;
|
|
--brand-orange-dark: #FF6B00;
|
|
--brand-pink: #FF0066;
|
|
--brand-pink-dark: #FF006B;
|
|
--brand-purple: #D600AA;
|
|
--brand-violet: #7700FF;
|
|
--brand-blue: #0066FF;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-black text-white;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-white transition-all duration-200;
|
|
background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-pink) 100%);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 40px rgba(255, 157, 0, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-semibold text-white border border-white/20 bg-white/5 backdrop-blur transition-all duration-200;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
@apply bg-white/10 border-white/40;
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-pink) 50%, var(--brand-violet) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.card {
|
|
@apply rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl p-6;
|
|
}
|
|
|
|
.card-hover {
|
|
@apply transition-all duration-300;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
@apply border-white/20 bg-white/10;
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.glow-orange {
|
|
box-shadow: 0 0 60px rgba(255, 157, 0, 0.2);
|
|
}
|
|
|
|
.glow-pink {
|
|
box-shadow: 0 0 60px rgba(255, 0, 102, 0.2);
|
|
}
|
|
|
|
.glow-violet {
|
|
box-shadow: 0 0 60px rgba(119, 0, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Animated background gradient */
|
|
.animated-gradient {
|
|
background: linear-gradient(-45deg, #0a0a0a, #1a1a2e, #0f0f1a, #1a0a1a);
|
|
background-size: 400% 400%;
|
|
animation: gradient 15s ease infinite;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
/* Floating animation for decorative elements */
|
|
.float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|