Merge branch 'first-homepage-layout' of DigiFi/digifi-www into master

src/components/Footer/BottomFooterOne.tsx

@@ -62,7 +62,7 @@ const CustomerLinks = () => {
     )
   );
   return (
-    <div className="flex-[66.667] flex items-center flex-wrap gap-2">
+    <div className="flex-[66.667] flex items-center flex-nowrap md:flex-wrap gap-2">
       {links}
     </div>
   );

src/components/Header/HeaderMenuItem.tsx

@@ -14,13 +14,15 @@ const HeaderMenuItem: React.FC<MenuItemProps> = ({ item }) => {
 
   return (
     <li
-      className="cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]"
+      className={`cursor-pointer text-[13.5px] font-medium text-[#525252] tracking-[1px] leading-[-0.3pt]`}
       onMouseEnter={toggleSubMenu}
       onMouseLeave={toggleSubMenu}
     >
       <a href={item.linkPath}>{item.name}</a>
       {showSubMenu && item.subItems && (
-        <ul className="absolute bg-white shadow-md p-4 z-20">
+        <ul
+          className={`absolute bg-white shadow-md p-4 z-20 `}
+        >
           {item.subItems.map((subItem, index) => (
             <HeaderMenuItem key={index} item={subItem} />
           ))}

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { InputCompOne } from "..";
+
+const LetsGetStarted: React.FC = () => {
+  const [pinValues, setPinValues] = React.useState({
+    bvn: "",
+    otp: "",
+  });
+
+  const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let { name, value } = e.target as HTMLInputElement;
+
+    setPinValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    let { name, value } = e.target as HTMLInputElement;
+
+    if (name === "bvn") {
+      const regex = /^[0-9]+$/;
+
+      if (regex.test(value)) {
+        if (value?.length == 10) {
+          setHideOTPComponent(false);
+        } else setHideOTPComponent(true);
+      } else {
+        console.log("object not found");
+      }
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
+        <div className="my-[4rem] flex items-center justify-center w-full">
+          <h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
+            Let’s Get You Started
+          </h1>
+        </div>
+        <form className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
+          <InputCompOne
+            parentClass="flex flex-col gap-2"
+            label="Enter Your BVN "
+            name="bvn"
+            parentInputClass="w-full"
+            labelSpan="( To get your BVN, dial *565*0# )"
+            labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+            placeholder="Enter your BVN"
+            labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+            input
+            inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+            value={pinValues.bvn}
+            onChange={handleChange}
+            onInput={handleInput}
+            ref={inputRef}
+          />
+          {!hideOTPComponent ? (
+            <InputCompOne
+              parentClass="flex flex-col gap-2"
+              label="Enter OTP "
+              name="otp"
+              parentInputClass="w-full"
+              labelSpan="( Please check your BVN phone number for verification pin )"
+              labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
+              placeholder="Enter your OTP"
+              labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
+              input
+              inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
+              value={pinValues.otp}
+              onChange={handleChange}
+              onInput={handleInput}
+              ref={inputRef}
+            />
+          ) : null}
+          <button
+            className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
+            disabled={!pinValues.otp}
+          >
+            Enter
+          </button>
+
+          {hideOTPComponent ? (
+            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+              ***Every personal information attached to your BVN is safe and
+              secure. It is only important for us to verify your information and
+              also give you access to your application profile/account.
+            </p>
+          ) : (
+            <p className="text-[#5C2684] mt-[1.5625rem] w-fit">
+              ***Did not receive OTP? Click to resend
+            </p>
+          )}
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LetsGetStarted;

src/components/LetsGetStated/LetsGetStartedNav.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Logo from "../../assets/icons/logo.svg";
+
+
+const LetsGetStartedNav: React.FC = () => {
+  return (
+    <div className="w-full">
+      <div className="containerMode flex justify-between gap-1 xl:gap-8">
+        <Link to="/">
+          <img
+            src={Logo}
+            alt="Logo"
+            className="w-[52px] h-[43px] xl:w-[72px] xl:h-[63px]"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default LetsGetStartedNav;

src/components/LetsGetStated/index.ts

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

src/components/index.ts

@@ -7,4 +7,5 @@ export * from "./DashboardLayout";
 export * from "./Icons";
 export * from "./Dashboard";
 export * from "./Cards";
+export * from "./LetsGetStated";
 export * from "./TsAndCs";

src/components/shared/InputCompOne.tsx

@@ -21,6 +21,7 @@ export interface InputCompOneProps {
   parentInputClass?: string;
   selectClass?: string;
   parentSelectClass?: string;
+  parentClass?: string;
 }
 
 const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -45,11 +46,12 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       parentInputClass,
       selectClass,
       parentSelectClass,
+      parentClass,
     },
     forwardedRef
   ) => {
     return (
-      <div>
+      <div className={parentClass}>
         {label && (
           <label htmlFor="" className={labelClass}>
             {label}

src/layouts/LetsGetStartedLayout.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Footer, LetsGetStartedNav } from "../components";
+import layoutImage from "../assets/images/test1-reverse.png";
+
+const LetsGetStartedLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <div className="grid md:grid-cols-2 h-[770px]">
+        <div className="w-full flex flex-col my-3">
+          <LetsGetStartedNav />
+          {children}
+        </div>
+        <div className="w-full">
+          <img src={layoutImage} alt="" className="w-full h-full" />
+        </div>
+      </div>
+      <div className="fixed bottom-0 left-0 bg-[#F7F7F7] w-full">
+        <Footer />
+      </div>
+    </>
+  );
+};
+
+export default LetsGetStartedLayout;

src/layouts/index.ts

@@ -1,3 +1,3 @@
 import HomeLayout from "./HomeLayout";
-
-export { HomeLayout };
+import LetsGetStartedLayout from "./LetsGetStartedLayout";
+export { HomeLayout, LetsGetStartedLayout };

src/pages/LetsGetStatedPage.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { LetsGetStartedLayout } from "../layouts";
+import { LetsGetStarted } from "../components";
+
+const LetsGetStatedPage: React.FC = () => {
+  return (
+    <LetsGetStartedLayout>
+      <LetsGetStarted />
+    </LetsGetStartedLayout>
+  );
+};
+
+export default LetsGetStatedPage;

src/pages/index.ts

@@ -10,6 +10,7 @@ import TermsAndConditionPage from "./TermsAndConditionPage";
 import PersonalBankingPage from "./PersonalBankingPage";
 import BusinessBankingPage from "./BusinessBankingPage";
 import CooperateBankingPage from "./CooperateBankingPage";
+import LetsGetStatedPage from "./LetsGetStatedPage";
 
 export {
   HomePage,
@@ -23,5 +24,6 @@ export {
   TermsAndConditionPage,
   PersonalBankingPage,
   BusinessBankingPage,
-  CooperateBankingPage
+  CooperateBankingPage,
+  LetsGetStatedPage
 };

src/router/Router.tsx

@@ -13,6 +13,7 @@ import {
   BusinessBankingPage,
   CooperateBankingPage,
   PersonalBankingPage,
+  LetsGetStatedPage,
 } from "../pages";
 import { DashboardAuth } from "../components";
 
@@ -26,10 +27,24 @@ const Routers = () => {
         path={RouteHandler.termsAndConditions}
         element={<TermsAndConditionPage />}
       />
-      <Route path={RouteHandler.businessBanking} element={<BusinessBankingPage />} />
-      <Route path={RouteHandler.cooperateBanking} element={<CooperateBankingPage />} />
-      <Route path={RouteHandler.personalBanking} element={<PersonalBankingPage />} />
+      <Route
+        path={RouteHandler.businessBanking}
+        element={<BusinessBankingPage />}
+      />
+      <Route
+        path={RouteHandler.cooperateBanking}
+        element={<CooperateBankingPage />}
+      />
+      <Route
+        path={RouteHandler.personalBanking}
+        element={<PersonalBankingPage />}
+      />
+      <Route
+        path={RouteHandler.letsGetStarted}
+        element={<LetsGetStatedPage />}
+      />
 
+      {/* Dashboard */}
       <Route element={<DashboardAuth />}>
         <Route
           path={RouteHandler.dashboardHome}

src/router/routes.tsx

@@ -4,6 +4,7 @@ export class RouteHandler {
   static personalBanking = "/personal-banking";
   static businessBanking = "/business-banking";
   static cooperateBanking = "/cooperate-banking";
+  static letsGetStarted = "/lets-get-started";
   static getStarted = "/get-started";
   static dashboardHome = "/dashboard/home";
   static dashboardProfile = "/dashboard/profile";