From 6f1f7ee6828f8988c59a9dd4e262c5407eb35a3d Mon Sep 17 00:00:00 2001 From: Ebube Date: Wed, 13 Mar 2024 23:31:36 +0100 Subject: [PATCH] first homepage layout --- src/App.css | 2 ++ src/components/Footer/Footer.tsx | 1 - src/components/Header/Header.tsx | 2 -- src/components/Hero/Hero.tsx | 11 ------ src/components/Home/Hero/Hero.tsx | 16 +++++++++ src/components/Home/Hero/hero.module.css | 9 +++++ src/components/{ => Home}/Hero/index.ts | 0 .../Home/Requirements/EligiblityBox.tsx | 22 ++++++++++++ .../Home/Requirements/FeatureText.tsx | 36 +++++++++++++++++++ .../Home/Requirements/Requirements.tsx | 15 ++++++++ src/components/Home/Requirements/index.ts | 3 ++ src/components/Home/index.ts | 4 +++ src/components/index.ts | 2 +- src/pages/HomePage.tsx | 10 +++--- tailwind.config.js | 1 + 15 files changed, 115 insertions(+), 19 deletions(-) delete mode 100644 src/components/Hero/Hero.tsx create mode 100644 src/components/Home/Hero/Hero.tsx create mode 100644 src/components/Home/Hero/hero.module.css rename src/components/{ => Home}/Hero/index.ts (100%) create mode 100644 src/components/Home/Requirements/EligiblityBox.tsx create mode 100644 src/components/Home/Requirements/FeatureText.tsx create mode 100644 src/components/Home/Requirements/Requirements.tsx create mode 100644 src/components/Home/Requirements/index.ts create mode 100644 src/components/Home/index.ts diff --git a/src/App.css b/src/App.css index f6c95c2..0681519 100644 --- a/src/App.css +++ b/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 { 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..d12d69a 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 && ( diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx deleted file mode 100644 index 8b4c68a..0000000 --- a/src/components/Hero/Hero.tsx +++ /dev/null @@ -1,11 +0,0 @@ - - -const Hero = () => { - 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", }, },