first homepage layout

src/App.css

@@ -26,6 +26,8 @@
   /* Initially hide the sidebar */
   transition: transform 0.3s ease-in-out;
   /* Add a transition for smooth animation */
+
+  z-index: 9;
 }
 
 .sidebar.open {

src/components/Footer/Footer.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Link } from 'react-router-dom'
 
 import FBook from '../../assets/icons/facebook.svg'

src/components/Header/Header.tsx

@@ -22,8 +22,6 @@ const Header = () => {
     setIsSidebarOpen((prev) => !prev);
   };
 
-  console.log(isSidebarOpen);
-
   return (
     <div className="relative my-2 flex items-center justify-center">
       {isSidebarOpen && (

src/components/Hero/Hero.tsx

@@ -1,11 +0,0 @@
-
-
-const Hero = () => {
-  return (
-    <div>
-      Hero
-    </div>
-  )
-}
-
-export default Hero

src/components/Home/Hero/Hero.tsx

@@ -0,0 +1,16 @@
+import styles from "./hero.module.css";
+const Hero = () => {
+  return (
+    <div
+      className={`w-full border-t-2 border-[#E3DEDA] relative mt-[.9375rem] mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.heroBg}`}
+    >
+      <div className="containerMode flex justify-between gap-1 xl:gap-8">
+        <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684]">
+          PREMIUM SALARY LOAN
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

src/components/Home/Hero/hero.module.css

@@ -0,0 +1,9 @@
+.heroBg{
+    background: url(../../../assets/images/hero-test.png) no-repeat;
+    background-size: cover;
+    background-position: center;
+    /* padding: 0.4rem 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

src/components/Home/Requirements/EligiblityBox.tsx

@@ -0,0 +1,22 @@
+const EligiblityBox = () => {
+  return (
+    <div className="w-[23.4rem] sm:w-[24.875rem] h-fit rounded bg-[#5C2684] px-[17px] py-[1.625rem] flex flex-col gap-4">
+      <h2 className="font-extrabold text-lg text-[#FBB700]">
+        REQUIRED ELIGIBILITY
+      </h2>
+      <ul className="flex flex-col gap-[.625rem] list-disc pl-[2rem] text-white">
+        <li className="text-base leading-[1.5625rem]">
+          Have a verifiable source of income
+        </li>
+        <li className="text-base leading-[1.5625rem]">
+          You must have a valid BVN
+        </li>
+        <li className="text-base leading-[1.5625rem]">
+          Must have a salary or current bank account with FCMB
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default EligiblityBox;

src/components/Home/Requirements/FeatureText.tsx

@@ -0,0 +1,36 @@
+const FeatureText = () => {
+  return (
+    <div className="w-full sm:w-2/3 px-0 sm:px-[15px] flex flex-col">
+      <div className="mt-5 text-[.9375rem] text-[#454545] leading-[1.4375rem]">
+        <p className="mb-[.9375rem] text-justify sm:text-left">
+          Premium Salary Plus loan provides confirmed staff of commercial
+          organizations more usable funds. The employee’s organization must have
+          been rated on Moody’s with a minimum BB- rating, employees interested
+          in the product must be eligible for minimum loan amount of 2,000,000.
+        </p>
+        <p className="mb-[.9375rem]">
+          <strong>Features</strong>
+        </p>
+        <ul className="flex flex-col gap-[.625rem] list-disc pl-[2.5rem]">
+          <li>Minimum loan amount - N2 Million</li>
+          <li>Maximum tenure - 60 Months</li>
+          <li>Minimum tenure - 12 Months</li>
+          <li>Management fee - 1% flat upfront (0.5% for top-up loan)</li>
+          <li>
+            Collateral - Domiciliate of salary, terminal benefits and other
+            allowances
+          </li>
+          <li>Insurance fee - 0.9%*loan amount*tenure (in years)</li>
+        </ul>
+      </div>
+      <a href="#" className="text-[#5C2684] hover:underline mt-[1.5625rem] w-fit">
+        ***Click here to apply
+      </a>
+      <p className="mt-[.5625rem] font-bold cursor-default">
+        Terms and conditions apply
+      </p>
+    </div>
+  );
+};
+
+export default FeatureText;

src/components/Home/Requirements/Requirements.tsx

@@ -0,0 +1,15 @@
+import FeatureText from "./FeatureText";
+import EligiblityBox from "./EligiblityBox";
+
+const Requirements = () => {
+  return (
+    <div className="mt[5.3125rem] mb-[7.875rem] min-h-[28.6875rem]">
+      <div className="containerMode flex flex-col sm:flex-row justify-between w-full gap-2 sm:gap-[6rem]">
+        <FeatureText />
+        <EligiblityBox />
+      </div>
+    </div>
+  );
+};
+
+export default Requirements;

src/components/Home/Requirements/index.ts

@@ -0,0 +1,3 @@
+import Requirements from "./Requirements";
+
+export { Requirements };

src/components/Home/index.ts

@@ -0,0 +1,4 @@
+import { Hero } from "./Hero";
+import { Requirements } from "./Requirements";
+
+export {Hero, Requirements}

src/components/index.ts

@@ -1,4 +1,4 @@
 export * from "./Header"
-export * from "./Hero"
+export * from "./Home"
 export * from "./shared"
 export * from "./Footer"

src/pages/HomePage.tsx

@@ -1,12 +1,14 @@
-import { Header, TopHeader } from '../components/Header'
+import { Hero, Header, TopHeader, Requirements } from "../components";
 
 const HomePage = () => {
   return (
     <>
       <TopHeader />
       <Header />
+      <Hero />
+      <Requirements />
     </>
-  )
-}
+  );
+};
 
-export default HomePage
+export default HomePage;

tailwind.config.js

@@ -7,6 +7,7 @@ module.exports = {
       colors: {},
       screens: {
         xxs: "400px",
+        regLap: "1440px",
         xxl: "1900px",
       },
     },