Transform landing page into full Language Transfer-style app with course tracking, job matching, and GitHub Pages deployment

[Copilot]

Converted single-page marketing site into multi-page application following Language Transfer's lesson-based learning UX pattern, adapted for recruitment platform with AI-powered job matching. Configured for automated deployment to GitHub Pages.

Architecture Changes

• App Router Migration: Restructured from flat components to Next.js 15 app directory
  • Root: Landing page at /
  • App routes: /dashboard, /courses, /opportunities, /messages, /profile, /settings
• Navigation System: Responsive shell with mobile bottom bar + desktop sidebar
• Path Aliases: Updated tsconfig.json from ./src/* to ./* for new structure
• GitHub Pages Configuration: Added basePath and static export setup for deployment

Core Features

Course System (Language Transfer-inspired)

• 6 training programs with lesson tracking (e.g., "5 of 12 lessons")
• Progress visualization and achievement badges
• "Continue Learning" quick-resume interface

Job Matching

• AI match scores (72-90%) with color-coded indicators
• Search + filter system (location, type, keywords)
• Save/unsave functionality with heart icon

Messaging

• Two-column layout: conversation list + active thread
• Unread counts and online status indicators
• Real-time chat interface

Profile Management

• Comprehensive user data (experience, education, skills)
• Job preference settings
• Achievement and stats tracking

Deployment

GitHub Pages Ready

• Automated deployment workflow (.github/workflows/deploy.yml)
• Builds and deploys on every push to main branches
• Configured with basePath: '/test' for repository hosting
• Includes .nojekyll file to prevent Jekyll processing

Setup Instructions:

1. Enable GitHub Pages in repository Settings → Pages
2. Set Source to "GitHub Actions"
3. App will be available at https://resuhire.github.io/test or https://bsamprat.github.io/test

See DEPLOYMENT.md for complete deployment documentation.

UI Components

Created AppNavigation.tsx for persistent shell:

// Adapts between mobile bottom nav and desktop sidebar
<nav className="md:hidden fixed bottom-0...">
  {navItems.map(item => <Link href={item.href}>...</Link>)}
</nav>

<aside className="hidden md:flex fixed left-0...">
  // Desktop sidebar with logo and expanded labels
</aside>

Styling

• Dark theme: bg-black with green-500 to teal-600 gradients
• System fonts (removed Google Fonts for offline builds)
• Mobile-first responsive breakpoints

Screenshots

Landing Page → App Entry

Dashboard

Courses (Language Transfer Pattern)

Job Opportunities

Messages

Profile

[!WARNING]

Original prompt

create me a full app looks like
https://github.com/language-transfer/lt-app/
based on my existed one information https://praatmvp.figma.site/

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Bassamejlaoui]

@copilot make the app available under bsamprat.github.io

[Copilot]

@copilot make the app available under bsamprat.github.io

Configured GitHub Pages deployment! ✅ (commit 17a551f)

Setup:

1. Enable GitHub Pages in Settings → Pages → Source: "GitHub Actions"
2. Push will trigger automatic deployment
3. App will be available at:
   • https://resuhire.github.io/test (current repo)
   • https://bsamprat.github.io/test (if transferred to bsamprat account)

What was added:

• GitHub Actions workflow (.github/workflows/deploy.yml)
• Next.js basePath configuration for /test subpath
• .nojekyll file to prevent Jekyll processing
• Deployment documentation (DEPLOYMENT.md)

The workflow runs on every push to this branch. See DEPLOYMENT.md for full instructions.