Skip to main content
The Home Page is the entry point of DevJobs, featuring a hero section with search capabilities and marketing content explaining the platform’s value proposition.

​
Route

  • Path: /
  • Component: HomePage
  • File: source/src/pages/Home.jsx

​
Purpose

The home page serves as the landing page for DevJobs, welcoming users and providing:
  • Quick search access to job listings
  • Platform value proposition and benefits
  • Call-to-action to start job searching

​
Key Features

The hero section includes:
  • Hero Image: Background visual (background.webp)
  • Headline: “Encuentra el trabajo de tus sueños”
  • Tagline: Platform description
  • Search Form: Direct search input with submit button

​
2. Benefits Section

Three key benefits highlighting:
  • Find Dream Jobs: Search thousands of jobs from top companies
  • Connect with Companies: Match with companies hiring for your skills
  • Earn What You Deserve: Salary calculator information

​
Components Used

The home page is self-contained and doesn’t use external components. It includes:
  • Form: Search form with text input and submit button
  • SVG Icons: Inline SVG for search icon and benefit icons
  • Semantic HTML: Uses <main>, <section>, <article> for structure

​
Hooks and State Management

​
useRouter Hook

The page uses a custom useRouter hook for navigation: 
import useRouter from "@/hooks/useRouter"

const { navigateTo } = useRouter()
Purpose: Provides programmatic navigation to the search page

​
Search Handler

Handles form submission and navigation: 
const handleSearch = (event) => {
  event.preventDefault()
  const formData = new FormData(event.currentTarget)
  const searchText = formData.get('search')
  const url = searchText 
    ? `/search?text=${encodeURIComponent(searchText)}` 
    : '/search'
  navigateTo(url)
}
Logic:
  1. Prevents default form submission
  2. Extracts search text from form data
  3. Constructs URL with query parameter (if search text exists)
  4. Navigates to search page with or without query string

​
User Flows

​
Search Flow

  1. User enters search query in the hero search input
  2. User clicks “Buscar” button or presses Enter
  3. Form submission is intercepted by handleSearch
  4. Search text is extracted from form data
  5. User is navigated to /search?text={query}
  • Direct Search: Enter query → Navigate to Search page with filters
  • Browse All: Leave search empty → Navigate to Search page (all jobs)

​
Code Example

​
Complete Search Form Implementation

<form role="search" onSubmit={handleSearch}>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 
      viewBox="0 0 24 24" fill="none" stroke="currentColor" 
      strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
      <path d="M21 21l-6 -6" />
    </svg>

    <input 
      required 
      type="text" 
      placeholder="Buscar empleos por título, habilidad o empresa"
      name="search"
    />

    <button type="submit">Buscar</button>
  </div>
</form>

​
Marketing Section

<section>
  <header>
    <h2>¿Por qué DevJobs?</h2>
    <p>
      DevJobs es la principal plataforma de búsqueda de empleo para 
      desarrolladores. Conectamos a los mejores talentos con las 
      empresas más innovadoras.
    </p>
  </header>

  <footer>
    <article>
      {/* Briefcase Icon */}
      <svg fill="currentColor" height="32" viewBox="0 0 256 256" 
        width="32" xmlns="http://www.w3.org/2000/svg" 
        aria-hidden="true">
        {/* SVG Path */}
      </svg>
      <h3>Encuentra el trabajo de tus sueños</h3>
      <p>Busca miles de empleos de las mejores empresas de todo el mundo.</p>
    </article>
    {/* More articles... */}
  </footer>
</section>

​
Structure

HomePage
├── Section 1: Hero
│   ├── Image (background.webp)
│   ├── Heading (h1)
│   ├── Description (p)
│   └── Search Form
│       ├── Search Icon (SVG)
│       ├── Text Input (required)
│       └── Submit Button
│
└── Section 2: Benefits
    ├── Header
    │   ├── Title (h2)
    │   └── Description (p)
    └── Benefits Grid (footer)
        ├── Article: Find Jobs
        ├── Article: Connect
        └── Article: Earn

​
Integration Points

  • To Search Page: Via form submission with useRouter hook
  • Query Parameters: Passes ?text={searchText} to search page

​
Routing

The home page is mounted at the root route (/) in the application’s router configuration.

​
Styling

The home page uses inline styles and semantic HTML without a dedicated CSS module, relying on global styles for consistent appearance.

​
Accessibility

  • Form Role: role="search" for semantic search form
  • Required Input: Search input marked as required
  • Icon Accessibility: SVG icons use aria-hidden="true" since they’re decorative
  • Semantic Structure: Proper use of headings, sections, and articles

Build docs developers (and LLMs) love

Get started for freeTalk to us