From 3cfe17dbcecbd660119872f9f2732cf633528614 Mon Sep 17 00:00:00 2001 From: ImAlpha Date: Sun, 15 Oct 2023 17:44:03 -0700 Subject: [PATCH] bank site finished --- Websites/BankModern/src/App.jsx | 4 +- .../src/components/Billing/Billing.jsx | 39 +++++++++-- .../src/components/Business/Business.jsx | 50 ++++++++++++-- .../BankModern/src/components/CTA/CTA.jsx | 25 +++++-- .../src/components/CardDeal/CardDeal.jsx | 31 +++++++-- .../src/components/Clients/Clients.jsx | 21 ++++-- .../components/FeedbackCard/FeedbackCard.jsx | 30 ++++++-- .../src/components/Footer/Footer.jsx | 69 +++++++++++++++++-- .../src/components/GetStarted/GetStarted.jsx | 26 +++++-- .../BankModern/src/components/Hero/Hero.jsx | 55 +++++++++++++-- .../src/components/Navbar/Navbar.jsx | 56 ++++++++++++--- .../BankModern/src/components/Stats/Stats.jsx | 24 +++++-- .../components/Testimonials/Testimonials.jsx | 32 +++++++-- Websites/BankModern/src/constants/index.js | 14 ++-- 14 files changed, 383 insertions(+), 93 deletions(-) diff --git a/Websites/BankModern/src/App.jsx b/Websites/BankModern/src/App.jsx index c22607c..3aab359 100644 --- a/Websites/BankModern/src/App.jsx +++ b/Websites/BankModern/src/App.jsx @@ -1,5 +1,5 @@ -import React from "react"; -import styles from "./styles"; +// import React from "react"; +// import styles from "./styles"; import {Navbar, Billing, CardDeal, Business, Clients, CTA, Stats, Footer, Testimonials, Hero,} from "../../BankModern/src/components/Index"; diff --git a/Websites/BankModern/src/components/Billing/Billing.jsx b/Websites/BankModern/src/components/Billing/Billing.jsx index 968f46e..0333198 100644 --- a/Websites/BankModern/src/components/Billing/Billing.jsx +++ b/Websites/BankModern/src/components/Billing/Billing.jsx @@ -1,9 +1,34 @@ -import React from 'react' +import { apple, bill, google } from "../../assets"; +import styles, { layout } from "../../styles"; -const Billing = () => { - return ( -
Billing
- ) -} +const Billing = () => ( +
+
+ billing -export default Billing \ No newline at end of file + {/* gradient start */} +
+
+ {/* gradient end */} +
+ +
+

+ Easily control your
billing & + invoicing +

+

+ Elit enim sed massa etiam. Mauris eu adipiscing ultrices ametodio + aenean neque. Fusce ipsum orci rhoncus aliporttitor integer platea + placerat. +

+ +
+ google_play + google_play +
+
+
+); + +export default Billing; \ No newline at end of file diff --git a/Websites/BankModern/src/components/Business/Business.jsx b/Websites/BankModern/src/components/Business/Business.jsx index 1819737..a83585d 100644 --- a/Websites/BankModern/src/components/Business/Business.jsx +++ b/Websites/BankModern/src/components/Business/Business.jsx @@ -1,9 +1,45 @@ -import React from 'react' +import { features } from "../../constants"; +import styles, { layout } from "../../styles"; +import Button from "../Button/Button"; -const Business = () => { - return ( -
Business
- ) -} +const FeatureCard = ({ icon, title, content, index }) => ( +
+
+ star +
+
+

+ {title} +

+

+ {content} +

+
+
+); -export default Business \ No newline at end of file +const Business = () => ( +
+
+

+ You do the business,
we’ll handle + the money. +

+

+ With the right credit card, you can improve your financial life by + building credit, earning rewards and saving money. But with hundreds + of credit cards on the market. +

+ +
+ +
+ {features.map((feature, index) => ( + + ))} +
+
+); + +export default Business; \ No newline at end of file diff --git a/Websites/BankModern/src/components/CTA/CTA.jsx b/Websites/BankModern/src/components/CTA/CTA.jsx index af5ff34..57e4888 100644 --- a/Websites/BankModern/src/components/CTA/CTA.jsx +++ b/Websites/BankModern/src/components/CTA/CTA.jsx @@ -1,9 +1,20 @@ -import React from 'react' +import styles from "../../styles"; +import Button from "../Button/Button"; -const CTA = () => { - return ( -
CTA
- ) -} +const CTA = () => ( +
+
+

Let’s try our service now!

+

+ Everything you need to accept card payments and grow your business + anywhere on the planet. +

+
-export default CTA \ No newline at end of file +
+
+
+); + +export default CTA; \ No newline at end of file diff --git a/Websites/BankModern/src/components/CardDeal/CardDeal.jsx b/Websites/BankModern/src/components/CardDeal/CardDeal.jsx index 5085635..813c3b5 100644 --- a/Websites/BankModern/src/components/CardDeal/CardDeal.jsx +++ b/Websites/BankModern/src/components/CardDeal/CardDeal.jsx @@ -1,9 +1,26 @@ -import React from 'react' +import { card } from "../../assets"; +import styles, { layout } from "../../styles"; +import Button from "../Button/Button"; -const CardDeal = () => { - return ( -
CardDeal
- ) -} +const CardDeal = () => ( +
+
+

+ Find a better card deal
in few easy + steps. +

+

+ Arcu tortor, purus in mattis at sed integer faucibus. Aliquet quis + aliquet eget mauris tortor.ç Aliquet ultrices ac, ametau. +

-export default CardDeal \ No newline at end of file +
+ +
+ billing +
+
+); + +export default CardDeal; \ No newline at end of file diff --git a/Websites/BankModern/src/components/Clients/Clients.jsx b/Websites/BankModern/src/components/Clients/Clients.jsx index dd5809e..8c6eb92 100644 --- a/Websites/BankModern/src/components/Clients/Clients.jsx +++ b/Websites/BankModern/src/components/Clients/Clients.jsx @@ -1,9 +1,16 @@ -import React from 'react' +import { clients } from "../../constants"; +import styles from "../../styles"; -const Clients = () => { - return ( -
Clients
- ) -} +const Clients = () => ( +
+
+ {clients.map((client) => ( +
+ client_logo +
+ ))} +
+
+); -export default Clients \ No newline at end of file +export default Clients; \ No newline at end of file diff --git a/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx b/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx index 0f80d4f..2f9daf4 100644 --- a/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx +++ b/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx @@ -1,9 +1,25 @@ -import React from 'react' +import { quotes } from "../../assets"; -const FeedbackCard = () => { - return ( -
FeedbackCard
- ) -} +const FeedbackCard = ({ content, name, title, img }) => ( +
+ double_quotes +

+ {content} +

-export default FeedbackCard \ No newline at end of file +
+ {name} +
+

+ {name} +

+

+ {title} +

+
+
+
+); + + +export default FeedbackCard; \ No newline at end of file diff --git a/Websites/BankModern/src/components/Footer/Footer.jsx b/Websites/BankModern/src/components/Footer/Footer.jsx index 09379a2..303b21a 100644 --- a/Websites/BankModern/src/components/Footer/Footer.jsx +++ b/Websites/BankModern/src/components/Footer/Footer.jsx @@ -1,9 +1,64 @@ -import React from 'react' +import styles from "../../styles"; +import { logo } from "../../assets"; +import { footerLinks, socialMedia } from "../../constants"; -const Footer = () => { - return ( -
Footer
- ) -} +const Footer = () => ( +
+
+
+ hoobank +

+ A new way to make the payments easy, reliable and secure. +

+
-export default Footer \ No newline at end of file +
+ {footerLinks.map((footerlink) => ( +
+

+ {footerlink.title} +

+
    + {footerlink.links.map((link, index) => ( +
  • + {link.name} +
    • + ))} +
+
+ ))} +
+
+ +
+

+ Copyright Ⓒ 2022 HooBank. All Rights Reserved. +

+ +
+ {socialMedia.map((social, index) => ( + {social.id} window.open(social.link)} + /> + ))} +
+
+
+); + +export default Footer; \ No newline at end of file diff --git a/Websites/BankModern/src/components/GetStarted/GetStarted.jsx b/Websites/BankModern/src/components/GetStarted/GetStarted.jsx index 5fe0628..0c41191 100644 --- a/Websites/BankModern/src/components/GetStarted/GetStarted.jsx +++ b/Websites/BankModern/src/components/GetStarted/GetStarted.jsx @@ -1,9 +1,21 @@ -import React from 'react' +import styles from "../../styles"; +import { arrowUp } from "../../assets"; -const GetStarted = () => { - return ( -
GetStarted
- ) -} +const GetStarted = () => ( +
+
+
+

+ Get +

+ arrow-up +
+ +

+ Started +

+
+
+); -export default GetStarted \ No newline at end of file +export default GetStarted; \ No newline at end of file diff --git a/Websites/BankModern/src/components/Hero/Hero.jsx b/Websites/BankModern/src/components/Hero/Hero.jsx index 90b45f6..a8ff859 100644 --- a/Websites/BankModern/src/components/Hero/Hero.jsx +++ b/Websites/BankModern/src/components/Hero/Hero.jsx @@ -1,9 +1,54 @@ -import React from 'react' +import styles from "../../styles"; +import { discount, robot } from "../../assets"; +import GetStarted from "../GetStarted/GetStarted"; const Hero = () => { return ( -
Hero
- ) -} +
+
+
+ discount +

+ 20% Discount For{" "} + 1 Month Account +

+
-export default Hero \ No newline at end of file +
+

+ The Next
{" "} + Generation{" "} +

+
+ +
+
+ +

+ Payment Method. +

+

+ Our team of experts uses a methodology to identify the credit cards + most likely to fit your needs. We examine annual percentage rates, + annual fees. +

+
+ +
+ billing + + {/* gradient start */} +
+
+
+ {/* gradient end */} +
+ +
+ +
+
+ ); +}; + +export default Hero; \ No newline at end of file diff --git a/Websites/BankModern/src/components/Navbar/Navbar.jsx b/Websites/BankModern/src/components/Navbar/Navbar.jsx index bb35bab..a094974 100644 --- a/Websites/BankModern/src/components/Navbar/Navbar.jsx +++ b/Websites/BankModern/src/components/Navbar/Navbar.jsx @@ -1,22 +1,60 @@ -import React from "react"; import { useState } from "react"; -// import {close, log, menu} from '../../assets/index'; -import { navlinks } from "../../constants/index"; + +import { close, logo, menu } from "../../assets"; +import { navLinks } from "../../constants"; const Navbar = () => { + const [active, setActive] = useState("Home"); + const [toggle, setToggle] = useState(false); + return ( ); }; -export default Navbar; +export default Navbar; \ No newline at end of file diff --git a/Websites/BankModern/src/components/Stats/Stats.jsx b/Websites/BankModern/src/components/Stats/Stats.jsx index 1d8b6c0..6072bcc 100644 --- a/Websites/BankModern/src/components/Stats/Stats.jsx +++ b/Websites/BankModern/src/components/Stats/Stats.jsx @@ -1,9 +1,19 @@ -import React from 'react' +import { stats } from "../../constants"; +import styles from "../../styles"; -const Stats = () => { - return ( -
Stats
- ) -} +const Stats = () => ( +
+ {stats.map((stat) => ( +
+

+ {stat.value} +

+

+ {stat.title} +

+
+ ))} +
+); -export default Stats \ No newline at end of file +export default Stats; \ No newline at end of file diff --git a/Websites/BankModern/src/components/Testimonials/Testimonials.jsx b/Websites/BankModern/src/components/Testimonials/Testimonials.jsx index f52821e..66184f2 100644 --- a/Websites/BankModern/src/components/Testimonials/Testimonials.jsx +++ b/Websites/BankModern/src/components/Testimonials/Testimonials.jsx @@ -1,9 +1,27 @@ -import React from 'react' +import { feedback } from "../../constants"; +import styles from "../../styles"; +import FeedbackCard from "../FeedbackCard/FeedbackCard"; -const Testimonials = () => { - return ( -
Testimonials
- ) -} +const Testimonials = () => ( +
+
-export default Testimonials \ No newline at end of file +
+

+ What People are
saying about us +

+
+

+ Everything you need to accept card payments and grow your business + anywhere on the planet. +

+
+
+ +
+ {feedback.map((card) => )} +
+
+); + +export default Testimonials; \ No newline at end of file diff --git a/Websites/BankModern/src/constants/index.js b/Websites/BankModern/src/constants/index.js index 1efe123..da7b1f1 100644 --- a/Websites/BankModern/src/constants/index.js +++ b/Websites/BankModern/src/constants/index.js @@ -13,21 +13,21 @@ import { send, shield, star, -} from "../assets"; +} from "../assets/index"; export const navLinks = [ { id: "home", title: "Home", }, - { - id: "features", - title: "Features", - }, { id: "product", title: "Product", }, + { + id: "features", + title: "Features", + }, { id: "clients", title: "Clients", @@ -63,14 +63,14 @@ export const feedback = [ id: "feedback-1", content: "Money is only a tool. It will take you wherever you wish, but it will not replace you as the driver.", - name: "Herman Jensen", + name: "Nicole Nguyen", title: "Founder & Leader", img: people01, }, { id: "feedback-2", content: - "Money makes your life easier. If you're lucky to have it, you're lucky.", + "Money makes your life easier. If you're lucky to have it, do your best to grow it.", name: "Steve Mark", title: "Founder & Leader", img: people02,