diff --git a/src/App.css b/src/App.css index f6c95c2..40af8c9 100644 --- a/src/App.css +++ b/src/App.css @@ -15,17 +15,21 @@ position: fixed; top: 0; left: 0; - width: 300px; + width: 330px; /* Adjust the width as needed */ height: 100vh; - background-color: #fff; + background-color: #5c2684; + color: #FFFFFF; + padding-top: .9375rem; /* Set the background color */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add a box-shadow for visual separation */ transform: translateX(-100%); /* Initially hide the sidebar */ - transition: transform 0.3s ease-in-out; + transition: transform 0.4s ease; /* Add a transition for smooth animation */ + + z-index: 9; } .sidebar.open { diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 287073b..ea9f0a4 100644 --- a/src/components/Footer/Footer.tsx +++ b/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' diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 3347aae..cbe2945 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -22,8 +22,6 @@ const Header = () => { setIsSidebarOpen((prev) => !prev); }; - console.log(isSidebarOpen); - return (
{isSidebarOpen && ( @@ -57,11 +55,15 @@ const Header = () => {
{ - return ( -
- Hero -
- ) -} - -export default Hero diff --git a/src/components/Home/Hero/Hero.tsx b/src/components/Home/Hero/Hero.tsx new file mode 100644 index 0000000..3df7130 --- /dev/null +++ b/src/components/Home/Hero/Hero.tsx @@ -0,0 +1,16 @@ +import styles from "./hero.module.css"; +const Hero = () => { + return ( +
+
+

+ PREMIUM SALARY LOAN +

+
+
+ ); +}; + +export default Hero; diff --git a/src/components/Home/Hero/hero.module.css b/src/components/Home/Hero/hero.module.css new file mode 100644 index 0000000..ceda2a7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/Hero/index.ts b/src/components/Home/Hero/index.ts similarity index 100% rename from src/components/Hero/index.ts rename to src/components/Home/Hero/index.ts diff --git a/src/components/Home/Requirements/EligiblityBox.tsx b/src/components/Home/Requirements/EligiblityBox.tsx new file mode 100644 index 0000000..c01feb0 --- /dev/null +++ b/src/components/Home/Requirements/EligiblityBox.tsx @@ -0,0 +1,22 @@ +const EligiblityBox = () => { + return ( +
+

+ REQUIRED ELIGIBILITY +

+
    +
  • + Have a verifiable source of income +
    • +
  • + You must have a valid BVN +
    • +
  • + Must have a salary or current bank account with FCMB +
    • +
+
+ ); +}; + +export default EligiblityBox; diff --git a/src/components/Home/Requirements/FeatureText.tsx b/src/components/Home/Requirements/FeatureText.tsx new file mode 100644 index 0000000..e8f8196 --- /dev/null +++ b/src/components/Home/Requirements/FeatureText.tsx @@ -0,0 +1,36 @@ +const FeatureText = () => { + return ( +
+
+

+ 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. +

+

+ Features +

+
    +
  • Minimum loan amount - N2 Million
    • +
  • Maximum tenure - 60 Months
    • +
  • Minimum tenure - 12 Months
    • +
  • Management fee - 1% flat upfront (0.5% for top-up loan)
    • +
  • + Collateral - Domiciliate of salary, terminal benefits and other + allowances +
    • +
  • Insurance fee - 0.9%*loan amount*tenure (in years)
    • +
+
+ + ***Click here to apply + +

+ Terms and conditions apply +

+
+ ); +}; + +export default FeatureText; diff --git a/src/components/Home/Requirements/Requirements.tsx b/src/components/Home/Requirements/Requirements.tsx new file mode 100644 index 0000000..3031c26 --- /dev/null +++ b/src/components/Home/Requirements/Requirements.tsx @@ -0,0 +1,15 @@ +import FeatureText from "./FeatureText"; +import EligiblityBox from "./EligiblityBox"; + +const Requirements = () => { + return ( +
+
+ + +
+
+ ); +}; + +export default Requirements; diff --git a/src/components/Home/Requirements/index.ts b/src/components/Home/Requirements/index.ts new file mode 100644 index 0000000..8e1dcac --- /dev/null +++ b/src/components/Home/Requirements/index.ts @@ -0,0 +1,3 @@ +import Requirements from "./Requirements"; + +export { Requirements }; diff --git a/src/components/Home/index.ts b/src/components/Home/index.ts new file mode 100644 index 0000000..fa6079a --- /dev/null +++ b/src/components/Home/index.ts @@ -0,0 +1,4 @@ +import { Hero } from "./Hero"; +import { Requirements } from "./Requirements"; + +export {Hero, Requirements} \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index b341d21..f8e9a54 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,4 +1,4 @@ export * from "./Header" -export * from "./Hero" +export * from "./Home" export * from "./shared" export * from "./Footer" \ No newline at end of file diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 160387a..f811b76 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,12 +1,14 @@ -import { Header, TopHeader } from '../components/Header' +import { Hero, Header, TopHeader, Requirements } from "../components"; const HomePage = () => { return ( <>
+ + - ) -} + ); +}; -export default HomePage +export default HomePage; diff --git a/tailwind.config.js b/tailwind.config.js index 46df684..7fc26c1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,6 +7,7 @@ module.exports = { colors: {}, screens: { xxs: "400px", + regLap: "1440px", xxl: "1900px", }, },