DEV Community

Cover image for Hire+Plus! For Employees Here's how I built it (UI - Launch)
AjeaS
AjeaS

Posted on

Hire+Plus! For Employees Here's how I built it (UI - Launch)

Launch Route Page

inside routes > launch > launch-page.tsx
Basic launch page info with 2 links that redirect either to the Developers section of the app or the Recuiters section of the app.

import { Link } from 'react-router-dom'; const Launch = () => { return ( <section className="text-gray-600 body-font"> <h1 className="text-center text-2xl md:text-4xl my-10"> What features are you looking for? </h1>  <div className="container px-10 py-5 mx-auto"> <div className="flex flex-wrap -mx-4 -mb-10 text-center"> <div className="sm:w-1/2 mb-10 px-4"> <div className="rounded-lg h-64 overflow-hidden"> <img alt="content" className="object-cover object-center h-full w-full" src="https://images.unsplash.com/photo-1537511446984-935f663eb1f4?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870" /> </div>  <h2 className="title-font text-2xl font-medium mt-6 mb-3"> For Recuiters </h2>  <p className="leading-relaxed text-base font-color"> Easily search and view candidates, manage candidates through our Project Management board, best of all post jobs for free! </p>  <a href="https://hire-plus-employer-v1.vercel.app/"> <button className="flex mx-auto mt-6 text-white bg-indigo-700 border-0 py-2 px-5 focus:outline-none rounded"> GET STARTED <span style={{ marginLeft: '10px' }}>&#10095;</span>  </button>  </a>  </div>  <div className="sm:w-1/2 mb-10 px-4"> <div className="rounded-lg h-64 overflow-hidden"> <img alt="content" className="object-cover object-center h-full w-full" src="https://images.unsplash.com/photo-1551434678-e076c223a692?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870" /> </div>  <h2 className="title-font text-2xl font-medium mt-6 mb-3"> For Developers </h2>  <p className="leading-relaxed text-base font-color"> View the latest jobs posted by hiring companies, create and manage your profile to show off skills, and apply for jobs you want! </p>  <Link to="/app"> <button className="flex mx-auto mt-6 text-white bg-indigo-700 border-0 py-2 px-5 focus:outline-none rounded"> GET STARTED <span style={{ marginLeft: '10px' }}>&#10095;</span>  </button>  </Link>  </div>  </div>  </div>  </section>  ); }; export default Launch; 
Enter fullscreen mode Exit fullscreen mode

Screenshot

Launch page

That's all for the UI/Launch portion of the project, stay tuned!

Top comments (0)