Skip to content

COMPONENTS.md

Latest commit

 

History

History
372 lines (306 loc) · 8.51 KB

COMPONENTS.md

File metadata and controls

372 lines (306 loc) · 8.51 KB
Raw

Component Reference Guide

🎨 Design Specifications

Color Palette

Background: #c4c4c4 (gray)
Foreground: #000000 (black)

Typography - Orbitron Font

Title: font-weight: 800
Subtitle: font-weight: 500
Buttons: font-weight: 600
Body: font-weight: 400-500

📄 Page Components

1. Landing Page (/)

Purpose: Splash screen with auto-redirect to sign-in

Features:

  • Animated logo with continuous rotation
  • Fade-in animation
  • Auto-redirects to /signin after 2 seconds

Animation:

- Initial: opacity 0, scale 0.8
- Animate: opacity 1, scale 1
- Duration: 0.6s
- Logo rotation: 360° infinite

2. Sign-In Page (/signin)

Route: /signin

Layout Structure:

<Container>
  └─ <AnimatedCard>
      ├─ <Logo> (Lightbulb icon in black square)
      ├─ <Title> "Welcome to Custom Path AI"
      ├─ <Subtitle> "Personalize your learning journey"
      ├─ <AuthCard>
      │   ├─ <EmailInput>
      │   ├─ <PasswordInput>
      │   ├─ <SignInButton>
      │   ├─ <Divider> "OR"
      │   └─ <GoogleSignInButton>
      └─ <FooterText> "New to Custom Path AI?"

Key Features:

  • Firebase Email/Password authentication
  • Google Sign-In with popup
  • Error handling with animated error messages
  • Form validation
  • Loading states
  • Smooth hover effects on buttons

Animations:

  • Card fade-in: opacity 0→1, y 20→0
  • Button hover: scale 1.02
  • Button tap: scale 0.98
  • Error shake animation

Button States:

Default: bg-[#c4c4c4], text-black, border-black
Hover: bg-black, text-[#c4c4c4]
Disabled: opacity-50

3. Requirements Form (/requirements)

Route: /requirements

Layout Structure:

<Container>
  ├─ <HeroTitle> "Build Your Learning Path"
  ├─ <TabNavigation>
  │   ├─ Tab 0: 💡 General Info
  │   ├─ Tab 1: ⏱️ Schedule
  │   ├─ Tab 2: 🎥 Learning Style
  │   └─ Tab 3: ⚙️ Constraints
  ├─ <TabContent>
  │   └─ <AnimatedForm>
  ├─ <NavigationButtons>
  │   ├─ Previous
  │   └─ Next / Generate Roadmap
  └─ <ProgressIndicator>

Tab 0: General Info 💡

  • Topic (text input) *required
  • Skill Level (dropdown) *required
    • Beginner, Intermediate, Advanced, Expert
  • Learning Depth (dropdown) *required
    • Quick Overview, Intermediate Understanding, Deep Dive, Complete Mastery
  • Preferred Language (dropdown) *required
    • English, Spanish, French, German, Chinese, Japanese

Tab 1: Schedule ⏱️

  • Total Duration (dropdown) *required
    • 1 Week, 2 Weeks, 1 Month, 3 Months, 6 Months, 1 Year
  • Hours per Day (number input) *required
  • Days per Week (number input 1-7) *required
  • Start Date (date picker) *required
  • Timezone (dropdown) *required

Tab 2: Learning Style 🎥

  • Learning Style (dropdown) *required
    • Visual, Reading/Writing, Auditory, Kinesthetic, Mixed
  • Resource Preferences (checkboxes) *required
    • Video Tutorials
    • Online Courses
    • Books
    • Documentation
    • Interactive Coding
    • Podcasts
    • Mentorship
    • Community Forums

Tab 3: Constraints ⚙️

  • Constraints (textarea) optional
  • Assessment Preferences (dropdown) optional
    • No Assessments, Regular Quizzes, Project-Based, Mixed
  • Prerequisites (textarea) optional

Features:

  • Tab validation before navigation
  • Form field validation with visual feedback
  • Shake animation on empty required fields
  • Progress indicator dots
  • Smooth tab transitions
  • Loading animation on submit
  • Auto-redirect to /roadmap after submit

Animations:

Tab content: x -20→0, opacity 0→1
Error fields: border-red + shake
Submit button: Loading spinner

4. Roadmap Page (/roadmap)

Route: /roadmap

Layout Structure:

<Container>
  ├─ <Header>
  │   ├─ <AnimatedIcon> 🎯
  │   ├─ <Title> "Your Personalized Roadmap"
  │   ├─ <Subtitle> (Topic name)
  │   └─ <StatsCards>
  │       ├─ Duration
  │       ├─ Total Hours
  │       └─ Weeks
  ├─ <Timeline>
  │   └─ <WeekCards> (expandable)
  │       ├─ Week number badge
  │       ├─ Week title
  │       ├─ Topics list
  │       └─ Resources list
  └─ <ActionButtons>
      ├─ 📥 Download PDF
      ├─ 📧 Email to Me
      └─ 🔄 Modify Roadmap

Week Card Structure:

<WeekCard>
  ├─ <Header> (clickable)
  │   ├─ Week badge (W1, W2, etc.)
  │   ├─ Title
  │   ├─ Hour badge
  │   └─ Expand icon
  └─ <ExpandableContent>
      ├─ Topics section
      │   └─ Bullet list
      └─ Resources section
          └─ Resource cards (type + duration)

Features:

  • Timeline with vertical line (desktop)
  • Expandable/collapsible week cards
  • Week number badges on timeline
  • Animated expand/collapse
  • Resource cards with type tags
  • Action buttons for export
  • Responsive design (timeline hidden on mobile)

Animations:

Cards: stagger animation (0.1s delay per card)
Expand icon: rotate 180° on expand
Content: height auto, opacity fade

Sample Data Structure:

{
  week: number,
  title: string,
  hours: number,
  topics: string[],
  resources: [
    { type: string, name: string, duration: string }
  ]
}

🎯 Reusable Patterns

Button Styles

Primary Button (Black):

<button className="px-6 py-3 bg-black text-[#c4c4c4] border-2 border-black rounded-lg font-orbitron font-semibold hover:bg-[#c4c4c4] hover:text-black transition-all">

Secondary Button (Gray):

<button className="px-6 py-3 bg-[#c4c4c4] text-black border-2 border-black rounded-lg font-orbitron font-semibold hover:bg-black hover:text-[#c4c4c4] transition-all">

Input Fields

Text Input:

<input 
  type="text"
  className="w-full px-4 py-3 bg-[#c4c4c4] border-2 border-black rounded-lg font-orbitron text-black focus:outline-none focus:ring-2 focus:ring-black"
/>

Dropdown:

<select className="w-full px-4 py-3 bg-[#c4c4c4] border-2 border-black rounded-lg font-orbitron text-black focus:outline-none focus:ring-2 focus:ring-black">

Card Component

Standard Card:

<div className="bg-[#c4c4c4] border-2 border-black rounded-xl p-8">

Framer Motion Presets

Fade In:

initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6 }}

Fade + Slide Up:

initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}

Hover Scale:

whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}

🔧 Firebase Integration

Auth Functions Used

Email/Password Sign In:

import { signInWithEmailAndPassword } from 'firebase/auth';
await signInWithEmailAndPassword(auth, email, password);

Google Sign In:

import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
const provider = new GoogleAuthProvider();
await signInWithPopup(auth, provider);

Error Handling

try {
  // Auth operation
} catch (err: any) {
  setError(err.message || 'Failed to sign in');
}

📐 Responsive Breakpoints

sm: 640px   /* Small devices */
md: 768px   /* Medium devices */
lg: 1024px  /* Large devices */
xl: 1280px  /* Extra large devices */

Mobile First Approach:

  • Base styles for mobile
  • Use md: prefix for desktop-specific styles
  • Timeline vertical line hidden on mobile (hidden md:block)

🎨 Animation Timing

  • Page transitions: 0.6s
  • Button interactions: 0.3s
  • Tab switches: 0.3s
  • Expand/collapse: 0.3s
  • Loading states: 2s (simulated)

💡 Best Practices

  1. Always use Framer Motion for animations
  2. Maintain consistent spacing: px-4, py-3 for inputs, px-6, py-3 for buttons
  3. Keep border-2 border-black for all outlined elements
  4. Use font-orbitron for all text
  5. Follow hover pattern: invert colors (black ↔ gray)
  6. Add loading states for all async operations
  7. Validate forms before submission
  8. Show error feedback with shake animation

🚀 Future Enhancements

  • Add user profile page
  • Implement actual AI roadmap generation
  • Add progress tracking
  • Enable roadmap editing
  • Add PDF export functionality
  • Email integration for roadmap sharing
  • Add more authentication providers
  • Implement dark mode (optional)
  • Add user onboarding tour
  • Save user preferences

Built with Next.js 15, Tailwind CSS 4, Framer Motion, and Firebase Auth