Deel Landing Page

1. Prerequisites: Before proceeding, make sure you have followed all the steps in the Getting Started guide.

2. Navigate to index.tsx: Open the index.tsx file in your project directory.

3. Add the Landing Page Code: Replace the existing code in index.tsx with the following code to set up the Deel Landing Page:

   import React from "react";
   import Hero1 from "../features/LandingPage/Hero1";
   import Customers from "../features/LandingPage/Customers";
   import FeatureHighlight1 from "../features/LandingPage/FeatureHighlight1";
   import FeatureGrid from "../features/LandingPage/FeatureGrid";
   import Nav from "../features/LandingPage/Nav";
   import FeatureBox from "../features/LandingPage/FeatureBox";
   import Testimonial1 from "../features/LandingPage/Testimonial1";
   import Pricing from "../features/LandingPage/Pricing";
   import GetStartedSteps from "../features/LandingPage/GetStartedSteps";
   import FAQ from "../features/LandingPage/FAQ";
   import Footer from "../features/LandingPage/Footer";
   import Divider2 from "../features/LandingPage/Divider2";
   import Divider1 from "../features/LandingPage/Divider1";
   import Divider3 from "../features/LandingPage/Divider3";
   import Divider4 from "../features/LandingPage/Divider4";
   import SectionWrapper from "../features/LandingPage/SectionWrapper";
    
   const Deel: React.FC = () => {
     return (
       <div className="bg-white">
         <Nav />
    
         <SectionWrapper customClass="bg-primary text-primary-content">
           <Hero1 />
           <Customers />
         </SectionWrapper>
    
         <Divider1 bg="text-primary" />
    
         <FeatureHighlight1 />
         <FeatureBox />
    
         <Divider2 customClass="text-base-300" />
    
         <SectionWrapper customClass="bg-base-300 text-base-content">
           <FeatureGrid />
         </SectionWrapper>
    
         <Divider3 bg="text-base-300" />
    
         <Pricing />
    
         <GetStartedSteps />
    
         <FAQ />
    
         <Divider4 bg="text-base-300 " />
    
         <SectionWrapper customClass="bg-base-300 text-base-content">
           <Testimonial1 />
           <Footer />
         </SectionWrapper>
       </div>
     );
   };
   export default Deel;

4. Run the Development Server: Start the development server to see your changes in action:

yarn start

5. Change the theme: You can change the theme of the landing page by heading to the tailwind.config.ts file and change the daisyui theme

import type { Config } from "tailwindcss";
 
const config: Config = {
  ...
  daisyui: {
    themes: ["cyberpunk"],
  },
};
export default config;

You should see something that resembles the Deel.com landing page. You can use this as a starting point for your project.