KLC-Learners-Portal-Frontend-Figmamake/src/Guidelines.md

KLC Website Guidelines

Query Parameter Dashboard System

Unified Dashboard Routing

• Primary Route: /dashboard - Auto-detects user type or defaults to individual
• Explicit Routes:
  • /dashboard?view=individual - Forces individual learner view
  • /dashboard?view=corporate - Forces corporate learner view
• All Learner Portal Pages now support query parameters:
  • /library?view=individual or /library?view=corporate
  • /settings?view=individual or /settings?view=corporate
  • /surveys?view=individual or /surveys?view=corporate
  • /webinars?view=individual or /webinars?view=corporate
  • /leaderboard?view=individual or /leaderboard?view=corporate

Legacy Route Handling

• Automatic Redirects: Old /corporate/* routes redirect to query parameter equivalents
• Backward Compatibility: Legacy routes still work but redirect users to new URLs
• URL Updates: Browser history automatically updates to new query parameter format

Page Header & Navigation Standards

Universal Back Button Requirements

• All internal pages must include a back button in the header for consistent navigation
• Header structure: Use pt-24 pb-8 to account for fixed navbar (70px + padding)
• Back button placement: Position in top-left of header with proper spacing and alignment
• Navigation logic: Back button should return users to their expected previous page:
  • Individual learner pages → Individual dashboard (/dashboard?view=individual)
  • Corporate learner pages → Corporate dashboard (/dashboard?view=corporate)
  • Service pages → Services overview (/services) [Deprecated - redirects to home]
  • About pages → About overview (/about-us/our-vision) [Deprecated - redirects to home]
  • Learning pages → Learning hub (/learning/articles) [Deprecated - redirects to home]
  • General pages → Home page (/)

Header Component Pattern

// Standard header pattern for all pages
<div className="bg-primary text-primary-foreground pt-24 pb-8">
  <div className="container mx-auto px-4 lg:px-8">
    <div className="max-w-4xl mx-auto"> {/* Adjust max-width based on content */}
      <div className="flex items-start gap-4">
        <Button
          variant="ghost"
          size="icon"
          onClick={handleBackNavigation}
          className="text-primary-foreground hover:bg-primary-foreground/10 min-h-[44px] min-w-[44px] mt-1"
          aria-label="Go back to [appropriate page name]"
        >
          <ArrowLeft className="h-6 w-6" />
        </Button>
        <div className="flex-1">
          <h1 className="text-4xl mb-3">[Page Title]</h1>
          <p className="text-lg text-primary-foreground/90 leading-relaxed">
            [Page description]
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Required Imports for Back Navigation

import { ArrowLeft } from 'lucide-react';
 const navigate = useNavigate();

Standard Navigation Handler

const handleBackNavigation = () => {
  // Choose appropriate navigation based on page context
  navigate('/dashboard?view=individual'); // or /dashboard?view=corporate for corporate learners
};

Typography & Font Sizing

Minimum Font Size Requirements

• Absolute minimum font size: 14px (0.875rem at 14px base)
• Preferred minimum font size: 16px (1rem at 14px base)
• Never use font sizes smaller than 14px for any text content
• Use 16px (1rem) for all body text, labels, buttons, and form inputs
• Use 14px (0.875rem) only for small text elements like captions, metadata, or legal text

Typography Hierarchy

• H1: 36px (2.25rem) - Page titles
• H2: 30px (1.875rem) - Section headings
• H3: 24px (1.5rem) - Subsection headings
• H4: 20px (1.25rem) - Component titles
• H5: 18px (1.125rem) - Card titles
• H6: 16px (1rem) - Small headings
• Body text: 16px (1rem) - All paragraph text
• Labels/Buttons: 16px (1rem) - Form labels, button text
• Small text: 14px (0.875rem) - Captions, metadata, fine print

Font Implementation Rules

• Always use explicit font sizes in Tailwind classes when overriding defaults
• Use text-base (16px) as the default for most text content
• Use text-sm (14px) sparingly for secondary information
• Never use text-xs (12px) - override with text-sm minimum
• Ensure good contrast ratios (minimum 4.5:1) with all font sizes

Layout & Spacing

Horizontal Padding

• Apply consistent horizontal padding to all page sections using the same values as the navigation bar
• Use px-4 lg:px-8 pattern for consistent horizontal spacing
• Container sections should use container mx-auto px-4 lg:px-8

Accessibility

• Minimum 44×44px touch targets for buttons and interactive elements
• Respect prefers-reduced-motion for animations
• Maintain WCAG 2.1 AA compliance
• Test all font sizes for readability across devices

Component Guidelines

Text Elements

• Override default component font sizes if they fall below 14px
• Explicitly set typography classes on all text elements
• Use semantic HTML elements with appropriate font sizes
• Ensure form inputs and labels are minimum 16px for mobile usability

Responsive Design

• Test font sizes across all breakpoints
• Ensure readability on mobile devices (minimum 16px for body text)
• Use responsive typography classes where appropriate

Quality Checks

Before finalizing any page or component:

1. ✅ Verify no text is smaller than 14px
2. ✅ Confirm body text and interactive elements are 16px
3. ✅ Test readability across different screen sizes
4. ✅ Check contrast ratios meet accessibility standards
5. ✅ Ensure consistent horizontal padding with navigation

Some of the base components you are using may have styling (eg. gap/typography) baked in as defaults. Make sure you explicitly set any styling information from the guidelines in the generated React to override the defaults.