bank site finished
This commit is contained in:
parent
adbecd1feb
commit
3cfe17dbce
@ -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";
|
||||
|
||||
@ -1,9 +1,34 @@
|
||||
import React from 'react'
|
||||
import { apple, bill, google } from "../../assets";
|
||||
import styles, { layout } from "../../styles";
|
||||
|
||||
const Billing = () => {
|
||||
return (
|
||||
<div>Billing</div>
|
||||
)
|
||||
}
|
||||
const Billing = () => (
|
||||
<section id="product" className={layout.sectionReverse}>
|
||||
<div className={layout.sectionImgReverse}>
|
||||
<img src={bill} alt="billing" className="w-[100%] h-[100%] relative z-[5]" />
|
||||
|
||||
export default Billing
|
||||
{/* gradient start */}
|
||||
<div className="absolute z-[3] -left-1/2 top-0 w-[50%] h-[50%] rounded-full white__gradient" />
|
||||
<div className="absolute z-[0] w-[50%] h-[50%] -left-1/2 bottom-0 rounded-full pink__gradient" />
|
||||
{/* gradient end */}
|
||||
</div>
|
||||
|
||||
<div className={layout.sectionInfo}>
|
||||
<h2 className={styles.heading2}>
|
||||
Easily control your <br className="sm:block hidden" /> billing &
|
||||
invoicing
|
||||
</h2>
|
||||
<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
|
||||
Elit enim sed massa etiam. Mauris eu adipiscing ultrices ametodio
|
||||
aenean neque. Fusce ipsum orci rhoncus aliporttitor integer platea
|
||||
placerat.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-row flex-wrap sm:mt-10 mt-6">
|
||||
<img src={apple} alt="google_play" className="w-[128.86px] h-[42.05px] object-contain mr-5 cursor-pointer" />
|
||||
<img src={google} alt="google_play" className="w-[144.17px] h-[43.08px] object-contain cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Billing;
|
||||
@ -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 (
|
||||
<div>Business</div>
|
||||
)
|
||||
}
|
||||
const FeatureCard = ({ icon, title, content, index }) => (
|
||||
<div className={`flex flex-row p-6 rounded-[20px] ${index !== features.length - 1 ? "mb-6" : "mb-0"} feature-card`}>
|
||||
<div className={`w-[64px] h-[64px] rounded-full ${styles.flexCenter} bg-dimBlue`}>
|
||||
<img src={icon} alt="star" className="w-[50%] h-[50%] object-contain" />
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col ml-3">
|
||||
<h4 className="font-poppins font-semibold text-white text-[18px] leading-[23.4px] mb-1">
|
||||
{title}
|
||||
</h4>
|
||||
<p className="font-poppins font-normal text-dimWhite text-[16px] leading-[24px]">
|
||||
{content}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Business
|
||||
const Business = () => (
|
||||
<section id="features" className={layout.section}>
|
||||
<div className={layout.sectionInfo}>
|
||||
<h2 className={styles.heading2}>
|
||||
You do the business, <br className="sm:block hidden" /> we’ll handle
|
||||
the money.
|
||||
</h2>
|
||||
<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<Button styles={`mt-10`} />
|
||||
</div>
|
||||
|
||||
<div className={`${layout.sectionImg} flex-col`}>
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard key={feature.id} {...feature} index={index} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Business;
|
||||
@ -1,9 +1,20 @@
|
||||
import React from 'react'
|
||||
import styles from "../../styles";
|
||||
import Button from "../Button/Button";
|
||||
|
||||
const CTA = () => {
|
||||
return (
|
||||
<div>CTA</div>
|
||||
)
|
||||
}
|
||||
const CTA = () => (
|
||||
<section className={`${styles.flexCenter} ${styles.marginY} ${styles.padding} sm:flex-row flex-col bg-black-gradient-2 rounded-[20px] box-shadow`}>
|
||||
<div className="flex-1 flex flex-col">
|
||||
<h2 className={styles.heading2}>Let’s try our service now!</h2>
|
||||
<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
|
||||
Everything you need to accept card payments and grow your business
|
||||
anywhere on the planet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
export default CTA
|
||||
<div className={`${styles.flexCenter} sm:ml-10 ml-0 sm:mt-0 mt-10`}>
|
||||
<Button />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default CTA;
|
||||
@ -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 (
|
||||
<div>CardDeal</div>
|
||||
)
|
||||
}
|
||||
const CardDeal = () => (
|
||||
<section className={layout.section}>
|
||||
<div className={layout.sectionInfo}>
|
||||
<h2 className={styles.heading2}>
|
||||
Find a better card deal <br className="sm:block hidden" /> in few easy
|
||||
steps.
|
||||
</h2>
|
||||
<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
|
||||
Arcu tortor, purus in mattis at sed integer faucibus. Aliquet quis
|
||||
aliquet eget mauris tortor.ç Aliquet ultrices ac, ametau.
|
||||
</p>
|
||||
|
||||
export default CardDeal
|
||||
<Button styles={`mt-10`} />
|
||||
</div>
|
||||
|
||||
<div className={layout.sectionImg}>
|
||||
<img src={card} alt="billing" className="w-[100%] h-[100%]" />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default CardDeal;
|
||||
@ -1,9 +1,16 @@
|
||||
import React from 'react'
|
||||
import { clients } from "../../constants";
|
||||
import styles from "../../styles";
|
||||
|
||||
const Clients = () => {
|
||||
return (
|
||||
<div>Clients</div>
|
||||
)
|
||||
}
|
||||
const Clients = () => (
|
||||
<section className={`${styles.flexCenter} my-4`}>
|
||||
<div className={`${styles.flexCenter} flex-wrap w-full`}>
|
||||
{clients.map((client) => (
|
||||
<div key={client.id} className={`flex-1 ${styles.flexCenter} sm:min-w-[192px] min-w-[120px] m-5`}>
|
||||
<img src={client.logo} alt="client_logo" className="sm:w-[192px] w-[100px] object-contain" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Clients
|
||||
export default Clients;
|
||||
@ -1,9 +1,25 @@
|
||||
import React from 'react'
|
||||
import { quotes } from "../../assets";
|
||||
|
||||
const FeedbackCard = () => {
|
||||
return (
|
||||
<div>FeedbackCard</div>
|
||||
)
|
||||
}
|
||||
const FeedbackCard = ({ content, name, title, img }) => (
|
||||
<div className="flex justify-between flex-col px-10 py-12 rounded-[20px] max-w-[370px] md:mr-10 sm:mr-5 mr-0 my-5 feedback-card">
|
||||
<img src={quotes} alt="double_quotes" className="w-[42.6px] h-[27.6px] object-contain" />
|
||||
<p className="font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10">
|
||||
{content}
|
||||
</p>
|
||||
|
||||
export default FeedbackCard
|
||||
<div className="flex flex-row">
|
||||
<img src={img} alt={name} className="w-[48px] h-[48px] rounded-full" />
|
||||
<div className="flex flex-col ml-4">
|
||||
<h4 className="font-poppins font-semibold text-[20px] leading-[32px] text-white">
|
||||
{name}
|
||||
</h4>
|
||||
<p className="font-poppins font-normal text-[16px] leading-[24px] text-dimWhite">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
export default FeedbackCard;
|
||||
@ -1,9 +1,64 @@
|
||||
import React from 'react'
|
||||
import styles from "../../styles";
|
||||
import { logo } from "../../assets";
|
||||
import { footerLinks, socialMedia } from "../../constants";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div>Footer</div>
|
||||
)
|
||||
}
|
||||
const Footer = () => (
|
||||
<section className={`${styles.flexCenter} ${styles.paddingY} flex-col`}>
|
||||
<div className={`${styles.flexStart} md:flex-row flex-col mb-8 w-full`}>
|
||||
<div className="flex-[1] flex flex-col justify-start mr-10">
|
||||
<img
|
||||
src={logo}
|
||||
alt="hoobank"
|
||||
className="w-[266px] h-[72.14px] object-contain"
|
||||
/>
|
||||
<p className={`${styles.paragraph} mt-4 max-w-[312px]`}>
|
||||
A new way to make the payments easy, reliable and secure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
export default Footer
|
||||
<div className="flex-[1.5] w-full flex flex-row justify-between flex-wrap md:mt-0 mt-10">
|
||||
{footerLinks.map((footerlink) => (
|
||||
<div key={footerlink.title} className={`flex flex-col ss:my-0 my-4 min-w-[150px]`}>
|
||||
<h4 className="font-poppins font-medium text-[18px] leading-[27px] text-white">
|
||||
{footerlink.title}
|
||||
</h4>
|
||||
<ul className="list-none mt-4">
|
||||
{footerlink.links.map((link, index) => (
|
||||
<li
|
||||
key={link.name}
|
||||
className={`font-poppins font-normal text-[16px] leading-[24px] text-dimWhite hover:text-secondary cursor-pointer ${
|
||||
index !== footerlink.links.length - 1 ? "mb-4" : "mb-0"
|
||||
}`}
|
||||
>
|
||||
{link.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border-t-[#3F3E45]">
|
||||
<p className="font-poppins font-normal text-center text-[18px] leading-[27px] text-white">
|
||||
Copyright Ⓒ 2022 HooBank. All Rights Reserved.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-row md:mt-0 mt-6">
|
||||
{socialMedia.map((social, index) => (
|
||||
<img
|
||||
key={social.id}
|
||||
src={social.icon}
|
||||
alt={social.id}
|
||||
className={`w-[21px] h-[21px] object-contain cursor-pointer ${
|
||||
index !== socialMedia.length - 1 ? "mr-6" : "mr-0"
|
||||
}`}
|
||||
onClick={() => window.open(social.link)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
@ -1,9 +1,21 @@
|
||||
import React from 'react'
|
||||
import styles from "../../styles";
|
||||
import { arrowUp } from "../../assets";
|
||||
|
||||
const GetStarted = () => {
|
||||
return (
|
||||
<div>GetStarted</div>
|
||||
)
|
||||
}
|
||||
const GetStarted = () => (
|
||||
<div className={`${styles.flexCenter} w-[140px] h-[140px] rounded-full bg-blue-gradient p-[2px] cursor-pointer`}>
|
||||
<div className={`${styles.flexCenter} flex-col bg-primary w-[100%] h-[100%] rounded-full`}>
|
||||
<div className={`${styles.flexStart} flex-row`}>
|
||||
<p className="font-poppins font-medium text-[18px] leading-[23.4px]">
|
||||
<span className="text-gradient">Get</span>
|
||||
</p>
|
||||
<img src={arrowUp} alt="arrow-up" className="w-[23px] h-[23px] object-contain" />
|
||||
</div>
|
||||
|
||||
export default GetStarted
|
||||
<p className="font-poppins font-medium text-[18px] leading-[23.4px]">
|
||||
<span className="text-gradient">Started</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default GetStarted;
|
||||
@ -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 (
|
||||
<div>Hero</div>
|
||||
)
|
||||
}
|
||||
<section id="home" className={`flex md:flex-row flex-col ${styles.paddingY}`}>
|
||||
<div className={`flex-1 ${styles.flexStart} flex-col xl:px-0 sm:px-16 px-6`}>
|
||||
<div className="flex flex-row items-center py-[6px] px-4 bg-discount-gradient rounded-[10px] mb-2">
|
||||
<img src={discount} alt="discount" className="w-[32px] h-[32px]" />
|
||||
<p className={`${styles.paragraph} ml-2`}>
|
||||
<span className="text-white">20%</span> Discount For{" "}
|
||||
<span className="text-white">1 Month</span> Account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
export default Hero
|
||||
<div className="flex flex-row justify-between items-center w-full">
|
||||
<h1 className="flex-1 font-poppins font-semibold ss:text-[72px] text-[52px] text-white ss:leading-[100.8px] leading-[75px]">
|
||||
The Next <br className="sm:block hidden" />{" "}
|
||||
<span className="text-gradient">Generation</span>{" "}
|
||||
</h1>
|
||||
<div className="ss:flex hidden md:mr-4 mr-0">
|
||||
<GetStarted />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="font-poppins font-semibold ss:text-[68px] text-[52px] text-white ss:leading-[100.8px] leading-[75px] w-full">
|
||||
Payment Method.
|
||||
</h1>
|
||||
<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={`flex-1 flex ${styles.flexCenter} md:my-0 my-10 relative`}>
|
||||
<img src={robot} alt="billing" className="w-[100%] h-[100%] relative z-[5]" />
|
||||
|
||||
{/* gradient start */}
|
||||
<div className="absolute z-[0] w-[40%] h-[35%] top-0 pink__gradient" />
|
||||
<div className="absolute z-[1] w-[80%] h-[80%] rounded-full white__gradient bottom-40" />
|
||||
<div className="absolute z-[0] w-[50%] h-[50%] right-20 bottom-20 blue__gradient" />
|
||||
{/* gradient end */}
|
||||
</div>
|
||||
|
||||
<div className={`ss:hidden ${styles.flexCenter}`}>
|
||||
<GetStarted />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@ -1,20 +1,58 @@
|
||||
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 (
|
||||
<nav className="w-full flex py-6 justify-between items-center navbar">
|
||||
<img src="{logo}" alt="hoobank" className="w-[124px] h-[32px]" />
|
||||
<img src={logo} alt="hoobank" className="w-[124px] h-[32px]" />
|
||||
|
||||
<ul className="list-none sm:flex hidden justify-end items-center flex-1">
|
||||
{navlinks.map((nav, index) => (
|
||||
<li key={nav.id} className={"font-poppin font-normal cursor-pointer"}>
|
||||
<a href={"#${nav.id}"}>{nav.title}</a>
|
||||
{navLinks.map((nav, index) => (
|
||||
<li
|
||||
key={nav.id}
|
||||
className={`font-poppins font-normal cursor-pointer text-[16px] ${
|
||||
active === nav.title ? "text-white" : "text-dimWhite"
|
||||
} ${index === navLinks.length - 1 ? "mr-5" : "mr-10"}`}
|
||||
onClick={() => setActive(nav.title)}
|
||||
>
|
||||
<a href={`#${nav.id}`}>{nav.title}</a>
|
||||
</li>
|
||||
))}
|
||||
;
|
||||
</ul>
|
||||
|
||||
<div className="sm:hidden flex flex-1 justify-end items-center">
|
||||
<img
|
||||
src={toggle ? close : menu}
|
||||
alt="menu"
|
||||
className="w-[28px] h-[28px] object-contain"
|
||||
onClick={() => setToggle(!toggle)}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`${
|
||||
!toggle ? "hidden" : "flex"
|
||||
} p-6 bg-black-gradient absolute top-20 right-0 mx-4 my-2 min-w-[140px] rounded-xl sidebar`}
|
||||
>
|
||||
<ul className="list-none flex justify-end items-start flex-1 flex-col">
|
||||
{navLinks.map((nav, index) => (
|
||||
<li
|
||||
key={nav.id}
|
||||
className={`font-poppins font-medium cursor-pointer text-[16px] ${
|
||||
active === nav.title ? "text-white" : "text-dimWhite"
|
||||
} ${index === navLinks.length - 1 ? "mb-0" : "mb-4"}`}
|
||||
onClick={() => setActive(nav.title)}
|
||||
>
|
||||
<a href={`#${nav.id}`}>{nav.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,19 @@
|
||||
import React from 'react'
|
||||
import { stats } from "../../constants";
|
||||
import styles from "../../styles";
|
||||
|
||||
const Stats = () => {
|
||||
return (
|
||||
<div>Stats</div>
|
||||
)
|
||||
}
|
||||
const Stats = () => (
|
||||
<section className={`${styles.flexCenter} flex-row flex-wrap sm:mb-20 mb-6`}>
|
||||
{stats.map((stat) => (
|
||||
<div key={stat.id} className={`flex-1 flex justify-start items-center flex-row m-3`} >
|
||||
<h4 className="font-poppins font-semibold xs:text-[40.89px] text-[30.89px] xs:leading-[53.16px] leading-[43.16px] text-white">
|
||||
{stat.value}
|
||||
</h4>
|
||||
<p className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] text-gradient uppercase ml-3">
|
||||
{stat.title}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Stats
|
||||
export default Stats;
|
||||
@ -1,9 +1,27 @@
|
||||
import React from 'react'
|
||||
import { feedback } from "../../constants";
|
||||
import styles from "../../styles";
|
||||
import FeedbackCard from "../FeedbackCard/FeedbackCard";
|
||||
|
||||
const Testimonials = () => {
|
||||
return (
|
||||
<div>Testimonials</div>
|
||||
)
|
||||
}
|
||||
const Testimonials = () => (
|
||||
<section id="clients" className={`${styles.paddingY} ${styles.flexCenter} flex-col relative `}>
|
||||
<div className="absolute z-[0] w-[60%] h-[60%] -right-[50%] rounded-full blue__gradient bottom-40" />
|
||||
|
||||
export default Testimonials
|
||||
<div className="w-full flex justify-between items-center md:flex-row flex-col sm:mb-16 mb-6 relative z-[1]">
|
||||
<h2 className={styles.heading2}>
|
||||
What People are <br className="sm:block hidden" /> saying about us
|
||||
</h2>
|
||||
<div className="w-full md:mt-0 mt-6">
|
||||
<p className={`${styles.paragraph} text-left max-w-[450px]`}>
|
||||
Everything you need to accept card payments and grow your business
|
||||
anywhere on the planet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap sm:justify-start justify-center w-full feedback-container relative z-[1]">
|
||||
{feedback.map((card) => <FeedbackCard key={card.id} {...card} />)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default Testimonials;
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user