JobsKart Connect

JobsKart — Complete Lovable Build Prompts

Phased Prompt Guide by Jeevijay Technologies

Brand Colors: Primary Blue #1A55BD | White #FFFFFF | Light Gray #F5F7FA | Dark Text #1A1A2E | Green Accent #16A34A Logo: JobsKart (use provided logo asset throughout) Reference UI: Apna.co style — clean white navbar, gradient hero sections, card-based layout, dual CTA buttons (Employer + Candidate), large search bar, trust logos

⚡ PHASE 1 — Design System + Landing Page (Homepage)

Build a modern Indian job portal homepage for "JobsKart" — a blue-collar and grey-collar hiring platform similar to Apna.co. Use the following exact design system throughout the entire project:

BRAND TOKENS:

• Primary Blue: #1A55BD
• Primary Dark: #1340A0
• White: #FFFFFF
• Light BG: #F5F7FA
• Dark Text: #1A1A2E
• Muted Text: #6B7280
• Success Green: #16A34A
• Border: #E5E7EB
• Card Shadow: 0 2px 12px rgba(26,85,189,0.08)
• Border Radius: 12px for cards, 8px for buttons, 24px for pills
• Font: Inter (primary), system-ui fallback
• Logo: "JobsKart" text with the double-arrow chevron icon in #1A55BD

NAVBAR (sticky, white background, light bottom border):

• Left: JobsKart logo (blue icon + bold "JobsKart" text)
• Center links: Jobs | For Employers | Candidates | Resources
• Right: "Employer Login" button (outlined, #1A55BD border) + "Candidate Login" button (solid #1A55BD fill, white text)
• Mobile: hamburger menu with slide-out drawer

HERO SECTION (full width, light gradient background — white to very light blue #EEF3FF, with a soft purple-to-green gradient blob on right side):

• Eyebrow label: "INDIA'S #1 BLUE COLLAR HIRING PLATFORM" in #1A55BD small caps
• H1 headline (bold 52px): "Your job search ends here"
• Subtext: "Discover 10 lakh+ career opportunities across India"
• Search bar (white card, soft shadow, pill-shaped, 3 fields inline):
  • Field 1: "Search jobs by title, skill..." with search icon
  • Field 2: "Your Experience" dropdown
  • Field 3: "Search for an area, city..." with location pin icon
  • Button: "Search Jobs" solid #1A55BD, white text, rounded right
• Below search: Popular tags as pill chips — "Work from Home", "Fresher Jobs", "Part Time", "Driver Jobs", "Security Guard", "Delivery Boy"
• Right side of hero: Hero image of a professional Indian person holding phone (use a placeholder rectangle for now)

TRUST SECTION (below hero, white bg):

• "Proud to Support" — government logo placeholders
• "Trusted by 1000+ Enterprises and 5 lakh+ MSMEs for hiring" — company logo placeholders (Tata, BigBasket, Blinkit, Reliance style)

POPULAR SEARCHES SECTION (light gray #F5F7FA background):

• Left: Big heading "Popular Searches on JobsKart" + "Hire the best talent or find your next opportunity"
• Right: 3x2 grid of category cards, each with:
  • "TRENDING AT #N" label in small muted text
  • Category name (bold 18px) e.g. "Jobs for Freshers", "Work from Home Jobs", "Part Time Jobs", "Driver Jobs", "Women Jobs", "Full Time Jobs"
  • "View all >" link in #1A55BD
  • Small illustrated image placeholder on right of card
  • Soft white card with subtle shadow

JOB CATEGORIES SECTION (white bg):

• Heading: "Browse Jobs by Category"
• Horizontal scrollable row of icon+label cards: Security, Driver, Delivery, Sales, Telecaller, Warehouse, Housekeeping, Cook, Retail, Field Agent, Nurse, Teacher — each card has a colored circle icon background and category name

HOW IT WORKS SECTION (light blue gradient bg #EEF3FF to #F0FDF4):

• Two columns — For Candidates | For Employers
• Each column has 3 numbered steps with icon, bold step name, description
• Candidates: 1. Create Profile → 2. Search & Apply → 3. Get Hired
• Employers: 1. Post a Job → 2. Review Candidates → 3. Hire Faster

STATS BANNER (dark blue #1A55BD background, white text):

• 4 stats in a row: "10 Lakh+ Jobs" | "50 Lakh+ Candidates" | "1000+ Employers" | "500+ Cities"

TESTIMONIALS SECTION (white bg):

• Heading: "What our users say"
• 3 cards with avatar placeholder, name, role, star rating, quote text

APP DOWNLOAD SECTION (gradient bg):

• "Download the JobsKart App" heading
• Google Play + App Store badge placeholders
• Phone mockup placeholder on right

FOOTER (dark #1A1A2E bg):

• Logo + tagline
• 4 link columns: For Candidates, For Employers, Company, Follow Us
• Bottom: copyright + privacy policy + terms

Make everything fully responsive — mobile first. All sections should have smooth hover states on cards and buttons. No dummy Lorem ipsum — use realistic Indian hiring context content.

⚡ PHASE 2 — Authentication System (Employer + Candidate)

Build a complete authentication system for JobsKart with two separate user types: Employer and Candidate. Keep the brand design system consistent (Primary Blue #1A55BD, white cards, Inter font, 12px card radius).

ROUTING STRUCTURE:

• /login → unified login page with tabs "I'm a Candidate" | "I'm an Employer"
• /signup/candidate → candidate registration
• /signup/employer → employer registration
• /forgot-password → OTP-based password reset

CANDIDATE LOGIN PAGE:

• Split layout: left half is brand illustration (light blue gradient with JobsKart logo, tagline "Find your dream job", 3 illustrated benefit points with icons)
• Right half: white card form
  • Heading: "Welcome back, Job Seeker"
  • Mobile number input (Indian +91 prefix) OR Email
  • OTP-based login option: "Send OTP" button
  • OR password field with show/hide toggle
  • "Login" CTA button (solid #1A55BD, full width)
  • Divider "OR" with line
  • "Continue with Google" button (white, outlined, Google icon)
  • Bottom: "New to JobsKart? Create Account" link
  • "Are you an employer? Employer Login →" link

This is the beginning of the README. Read the rest at the original. Read the full README ↗