first homepage layout

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 };