├── src ├── App.css ├── assets │ ├── bill.png │ ├── card.png │ ├── robot.png │ ├── airbnb.png │ ├── binance.png │ ├── dropbox.png │ ├── coinbase.png │ ├── people01.png │ ├── people02.png │ ├── people03.png │ ├── facebook.svg │ ├── quotes.svg │ ├── Send.svg │ ├── arrow-up.svg │ ├── linkedin.svg │ ├── Shield.svg │ ├── twitter.svg │ ├── menu.svg │ ├── Star.svg │ ├── close.svg │ ├── index.js │ ├── Discount.svg │ ├── instagram.svg │ ├── logo.svg │ ├── apple.svg │ └── google.svg ├── main.jsx ├── components │ ├── Button.jsx │ ├── index.js │ ├── Clients.jsx │ ├── CTA.jsx │ ├── Stats.jsx │ ├── GetStarted.jsx │ ├── CardDeal.jsx │ ├── FeedbackCard.jsx │ ├── Testimonials.jsx │ ├── Billing.jsx │ ├── Business.jsx │ ├── Navbar.jsx │ ├── Hero.jsx │ └── Footer.jsx ├── App.jsx ├── style.js ├── index.css └── constants │ └── index.js ├── postcss.config.js ├── vite.config.js ├── .gitignore ├── index.html ├── README.md ├── tailwind.config.js ├── package.json ├── eslint.config.js └── public └── vite.svg /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/bill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/bill.png -------------------------------------------------------------------------------- /src/assets/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/card.png -------------------------------------------------------------------------------- /src/assets/robot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/robot.png -------------------------------------------------------------------------------- /src/assets/airbnb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/airbnb.png -------------------------------------------------------------------------------- /src/assets/binance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/binance.png -------------------------------------------------------------------------------- /src/assets/dropbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/dropbox.png -------------------------------------------------------------------------------- /src/assets/coinbase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/coinbase.png -------------------------------------------------------------------------------- /src/assets/people01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/people01.png -------------------------------------------------------------------------------- /src/assets/people02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/people02.png -------------------------------------------------------------------------------- /src/assets/people03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saba-ramezani/Bank-App/HEAD/src/assets/people03.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Button = ({ styles }) => ( 4 | 7 | ); 8 | 9 | export default Button; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HooBank 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /src/assets/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Navbar from "./Navbar"; 2 | import Billing from "./Billing"; 3 | import CardDeal from "./CardDeal"; 4 | import Business from "./Business"; 5 | import Clients from "./Clients"; 6 | import CTA from "./CTA"; 7 | import Stats from "./Stats"; 8 | import Footer from "./Footer"; 9 | import Testimonials from "./Testimonials"; 10 | import Hero from "./Hero"; 11 | 12 | export { 13 | Navbar, 14 | Billing, 15 | CardDeal, 16 | Business, 17 | Clients, 18 | CTA, 19 | Stats, 20 | Footer, 21 | Testimonials, 22 | Hero, 23 | }; -------------------------------------------------------------------------------- /src/components/Clients.jsx: -------------------------------------------------------------------------------- 1 | import { clients } from "../constants"; 2 | import styles from "../style"; 3 | 4 | const Clients = () => ( 5 |
6 |
7 | {clients.map((client) => ( 8 |
9 | client_logo 10 |
11 | ))} 12 |
13 |
14 | ); 15 | 16 | export default Clients; -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./index.html", "./src/**/*.{js,jsx}"], 3 | mode: "jit", 4 | theme: { 5 | extend: { 6 | colors: { 7 | primary: "#00040f", 8 | secondary: "#00f6ff", 9 | dimWhite: "rgba(255, 255, 255, 0.7)", 10 | dimBlue: "rgba(9, 151, 124, 0.1)", 11 | }, 12 | fontFamily: { 13 | poppins: ["Poppins", "sans-serif"], 14 | }, 15 | }, 16 | screens: { 17 | xs: "480px", 18 | ss: "620px", 19 | sm: "768px", 20 | md: "1060px", 21 | lg: "1200px", 22 | xl: "1700px", 23 | }, 24 | }, 25 | plugins: [], 26 | }; -------------------------------------------------------------------------------- /src/assets/quotes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/Send.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/CTA.jsx: -------------------------------------------------------------------------------- 1 | import styles from "../style"; 2 | import Button from "./Button"; 3 | 4 | const CTA = () => ( 5 |
6 |
7 |

Let’s try our service now!

8 |

9 | Everything you need to accept card payments and grow your business 10 | anywhere on the planet. 11 |

12 |
13 | 14 |
15 |
17 |
18 | ); 19 | 20 | export default CTA; -------------------------------------------------------------------------------- /src/assets/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/Stats.jsx: -------------------------------------------------------------------------------- 1 | import { stats } from "../constants"; 2 | import styles from "../style"; 3 | 4 | const Stats = () => ( 5 |
6 | {stats.map((stat) => ( 7 |
8 |

9 | {stat.value} 10 |

11 |

12 | {stat.title} 13 |

14 |
15 | ))} 16 |
17 | ); 18 | 19 | export default Stats; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bank-modern-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.9.0", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.1", 21 | "autoprefixer": "^10.4.20", 22 | "eslint": "^9.9.0", 23 | "eslint-plugin-react": "^7.35.0", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.9", 26 | "globals": "^15.9.0", 27 | "postcss": "^8.4.45", 28 | "tailwindcss": "^3.4.10", 29 | "vite": "^5.4.1" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/GetStarted.jsx: -------------------------------------------------------------------------------- 1 | import styles from "../style"; 2 | import { arrowUp } from "../assets"; 3 | 4 | const GetStarted = () => ( 5 |
6 |
7 |
8 |

9 | Get 10 |

11 | arrow-up 12 |
13 | 14 |

15 | Started 16 |

17 |
18 |
19 | ); 20 | 21 | export default GetStarted; -------------------------------------------------------------------------------- /src/assets/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/CardDeal.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles, { layout } from "../style"; 3 | import Button from "./Button"; 4 | import { card } from '../assets'; 5 | 6 | const CardDeal = () => { 7 | return ( 8 |
9 |
10 |

11 | You do the business,
we’ll handle 12 | the money. 13 |

14 |

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

19 | 20 |
22 | 23 |
24 | 25 |
26 |
27 | ) 28 | } 29 | 30 | export default CardDeal -------------------------------------------------------------------------------- /src/components/FeedbackCard.jsx: -------------------------------------------------------------------------------- 1 | import { quotes } from "../assets"; 2 | 3 | const FeedbackCard = ({ content, name, title, img }) => ( 4 |
5 | double_quotes 6 |

7 | {content} 8 |

9 | 10 |
11 | {name} 12 |
13 |

14 | {name} 15 |

16 |

17 | {title} 18 |

19 |
20 |
21 |
22 | ); 23 | 24 | 25 | export default FeedbackCard; -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './style' 3 | import {Navbar, Hero, Stats, Business, Billing, CardDeal, Testimonials, Clients, CTA, Footer} from './components' 4 | 5 | const App = () => { 6 | return ( 7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 | 16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
29 |
30 |
31 | ) 32 | } 33 | 34 | export default App -------------------------------------------------------------------------------- /src/assets/Shield.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/style.js: -------------------------------------------------------------------------------- 1 | const styles = { 2 | boxWidth: "xl:max-w-[1280px] w-full", 3 | 4 | heading2: "font-poppins font-semibold xs:text-[48px] text-[40px] text-white xs:leading-[76.8px] leading-[66.8px] w-full", 5 | paragraph: "font-poppins font-normal text-dimWhite text-[18px] leading-[30.8px]", 6 | 7 | flexCenter: "flex justify-center items-center", 8 | flexStart: "flex justify-center items-start", 9 | 10 | paddingX: "sm:px-16 px-6", 11 | paddingY: "sm:py-16 py-6", 12 | padding: "sm:px-16 px-6 sm:py-12 py-4", 13 | 14 | marginX: "sm:mx-16 mx-6", 15 | marginY: "sm:my-16 my-6", 16 | }; 17 | 18 | export const layout = { 19 | section: `flex md:flex-row flex-col ${styles.paddingY}`, 20 | sectionReverse: `flex md:flex-row flex-col-reverse ${styles.paddingY}`, 21 | 22 | sectionImgReverse: `flex-1 flex ${styles.flexCenter} md:mr-10 mr-0 md:mt-0 mt-10 relative`, 23 | sectionImg: `flex-1 flex ${styles.flexCenter} md:ml-10 ml-0 md:mt-0 mt-10 relative`, 24 | 25 | sectionInfo: `flex-1 ${styles.flexStart} flex-col`, 26 | }; 27 | 28 | export default styles; -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /src/assets/Star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/Testimonials.jsx: -------------------------------------------------------------------------------- 1 | import { feedback } from "../constants"; 2 | import styles from "../style"; 3 | import FeedbackCard from "./FeedbackCard"; 4 | 5 | const Testimonials = () => ( 6 |
7 |
8 | 9 |
10 |

11 | What People are
saying about us 12 |

13 |
14 |

15 | Everything you need to accept card payments and grow your business 16 | anywhere on the planet. 17 |

18 |
19 |
20 | 21 |
22 | {feedback.map((card) => )} 23 |
24 |
25 | ); 26 | 27 | export default Testimonials; -------------------------------------------------------------------------------- /src/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | import airbnb from "./airbnb.png"; 2 | import bill from "./bill.png"; 3 | import binance from "./binance.png"; 4 | import card from "./card.png"; 5 | import coinbase from "./coinbase.png"; 6 | import dropbox from "./dropbox.png"; 7 | import logo from "./logo.svg"; 8 | import quotes from "./quotes.svg"; 9 | import robot from "./robot.png"; 10 | import send from "./Send.svg"; 11 | import shield from "./Shield.svg"; 12 | import star from "./Star.svg"; 13 | import menu from "./menu.svg"; 14 | import close from "./close.svg"; 15 | import google from "./google.svg"; 16 | import apple from "./apple.svg"; 17 | import arrowUp from "./arrow-up.svg"; 18 | import discount from "./Discount.svg"; 19 | import facebook from "./facebook.svg"; 20 | import instagram from "./instagram.svg"; 21 | import linkedin from "./linkedin.svg"; 22 | import twitter from "./twitter.svg"; 23 | import people01 from "./people01.png"; 24 | import people02 from "./people02.png"; 25 | import people03 from "./people03.png"; 26 | 27 | export { 28 | airbnb, 29 | bill, 30 | binance, 31 | card, 32 | coinbase, 33 | dropbox, 34 | logo, 35 | quotes, 36 | robot, 37 | send, 38 | shield, 39 | star, 40 | menu, 41 | close, 42 | google, 43 | apple, 44 | arrowUp, 45 | discount, 46 | facebook, 47 | instagram, 48 | linkedin, 49 | twitter, 50 | people01, 51 | people02, 52 | people03, 53 | }; 54 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Billing.jsx: -------------------------------------------------------------------------------- 1 | import { apple, bill, google } from "../assets"; 2 | import styles, { layout } from "../style"; 3 | 4 | const Billing = () => ( 5 |
6 |
7 | billing 8 | 9 | {/* gradient start */} 10 |
11 |
12 | {/* gradient end */} 13 |
14 | 15 |
16 |

17 | Easily control your
billing & 18 | invoicing 19 |

20 |

21 | Elit enim sed massa etiam. Mauris eu adipiscing ultrices ametodio 22 | aenean neque. Fusce ipsum orci rhoncus aliporttitor integer platea 23 | placerat. 24 |

25 | 26 |
27 | google_play 28 | google_play 29 |
30 |
31 |
32 | ); 33 | 34 | export default Billing; -------------------------------------------------------------------------------- /src/components/Business.jsx: -------------------------------------------------------------------------------- 1 | import { features } from "../constants"; 2 | import styles, { layout } from "../style"; 3 | import Button from "./Button"; 4 | 5 | const FeatureCard = ({ icon, title, content, index }) => ( 6 |
7 |
8 | star 9 |
10 |
11 |

12 | {title} 13 |

14 |

15 | {content} 16 |

17 |
18 |
19 | ); 20 | 21 | const Business = () => ( 22 |
23 |
24 |

25 | You do the business,
we’ll handle 26 | the money. 27 |

28 |

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

33 | 34 |
36 | 37 |
38 | {features.map((feature, index) => ( 39 | 40 | ))} 41 |
42 |
43 | ); 44 | 45 | export default Business; -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | 3 | import {close, logo, menu} from '../assets' 4 | import {navLinks} from '../constants' 5 | 6 | const Navbar = () => { 7 | const [toggle, setToggle] = useState(false); 8 | return ( 9 | 42 | ) 43 | } 44 | 45 | export default Navbar -------------------------------------------------------------------------------- /src/components/Hero.jsx: -------------------------------------------------------------------------------- 1 | import styles from "../style"; 2 | import { discount, robot } from "../assets"; 3 | import GetStarted from "./GetStarted"; 4 | 5 | const Hero = () => { 6 | return ( 7 |
8 |
9 |
10 | discount 11 |

12 | 20% Discount For{" "} 13 | 1 Month Account 14 |

15 |
16 | 17 |
18 |

19 | The Next
{" "} 20 | Generation{" "} 21 |

22 |
23 | 24 |
25 |
26 | 27 |

28 | Payment Method. 29 |

30 |

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

35 |
36 | 37 |
38 | billing 39 | 40 | {/* gradient start */} 41 |
42 |
43 |
44 | {/* gradient end */} 45 |
46 | 47 |
48 | 49 |
50 |
51 | ); 52 | }; 53 | 54 | export default Hero; -------------------------------------------------------------------------------- /src/assets/Discount.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import styles from "../style"; 2 | import { logo } from "../assets"; 3 | import { footerLinks, socialMedia } from "../constants"; 4 | 5 | const Footer = () => ( 6 |
7 |
8 |
9 | hoobank 14 |

15 | A new way to make the payments easy, reliable and secure. 16 |

17 |
18 | 19 |
20 | {footerLinks.map((footerlink) => ( 21 |
22 |

23 | {footerlink.title} 24 |

25 |
    26 | {footerlink.links.map((link, index) => ( 27 |
  • 33 | {link.name} 34 |
    • 35 | ))} 36 |
37 |
38 | ))} 39 |
40 |
41 | 42 |
43 |

44 | Copyright Ⓒ 2022 HooBank. All Rights Reserved. 45 |

46 | 47 |
48 | {socialMedia.map((social, index) => ( 49 | {social.id} window.open(social.link)} 57 | /> 58 | ))} 59 |
60 |
61 |
62 | ); 63 | 64 | export default Footer; -------------------------------------------------------------------------------- /src/assets/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | 7 | :root { 8 | --black-gradient: linear-gradient( 9 | 144.39deg, 10 | #ffffff -278.56%, 11 | #6d6d6d -78.47%, 12 | #11101d 91.61% 13 | ); 14 | --card-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1); 15 | } 16 | 17 | * { 18 | scroll-behavior: smooth; 19 | } 20 | 21 | .text-gradient { 22 | background: radial-gradient( 23 | 64.18% 64.18% at 71.16% 35.69%, 24 | #def9fa 0.89%, 25 | #bef3f5 17.23%, 26 | #9dedf0 42.04%, 27 | #7de7eb 55.12%, 28 | #5ce1e6 71.54%, 29 | #33bbcf 100% 30 | ); 31 | -webkit-background-clip: text; 32 | -webkit-text-fill-color: transparent; 33 | background-clip: text; 34 | text-fill-color: transparent; 35 | } 36 | 37 | .bg-blue-gradient { 38 | background: linear-gradient( 39 | 157.81deg, 40 | #def9fa -43.27%, 41 | #bef3f5 -21.24%, 42 | #9dedf0 12.19%, 43 | #7de7eb 29.82%, 44 | #5ce1e6 51.94%, 45 | #33bbcf 90.29% 46 | ); 47 | } 48 | 49 | .bg-black-gradient { 50 | background: linear-gradient( 51 | 144.39deg, 52 | #ffffff -278.56%, 53 | #6d6d6d -78.47%, 54 | #11101d 91.61% 55 | ); 56 | } 57 | 58 | .bg-black-gradient-2 { 59 | background: linear-gradient( 60 | -168.39deg, 61 | #ffffff -278.56%, 62 | #6d6d6d -78.47%, 63 | #11101d 91.61% 64 | ); 65 | } 66 | 67 | .bg-gray-gradient { 68 | background: linear-gradient( 69 | 153.47deg, 70 | rgba(255, 255, 255, 0) -341.94%, 71 | #14101d 95.11% 72 | ); 73 | } 74 | 75 | .bg-discount-gradient { 76 | background: linear-gradient(125.17deg, #272727 0%, #11101d 100%); 77 | } 78 | 79 | .box-shadow { 80 | box-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1); 81 | } 82 | 83 | .sidebar { 84 | -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 85 | animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 86 | } 87 | 88 | @-webkit-keyframes slide-top { 89 | 0% { 90 | -webkit-transform: translateY(100px); 91 | transform: translateY(100px); 92 | } 93 | 100% { 94 | -webkit-transform: translateY(0); 95 | transform: translateY(0); 96 | } 97 | } 98 | 99 | @keyframes slide-top { 100 | 0% { 101 | -webkit-transform: translateY(100px); 102 | transform: translateY(100px); 103 | } 104 | 100% { 105 | -webkit-transform: translateY(0); 106 | transform: translateY(0); 107 | } 108 | } 109 | 110 | .feature-card:hover { 111 | background: var(--black-gradient); 112 | box-shadow: var(--card-shadow); 113 | } 114 | 115 | .feedback-container .feedback-card:last-child { 116 | margin-right: 0px; 117 | } 118 | 119 | .feedback-card { 120 | background: transparent; 121 | } 122 | 123 | .feedback-card:hover { 124 | background: var(--black-gradient); 125 | } 126 | 127 | .blue__gradient { 128 | background: linear-gradient(180deg, rgba(188, 165, 255, 0) 0%, #214d76 100%); 129 | filter: blur(123px); 130 | } 131 | 132 | .pink__gradient { 133 | background: linear-gradient(90deg, #f4c4f3 0%, #fc67fa 100%); 134 | filter: blur(900px); 135 | } 136 | 137 | .white__gradient { 138 | background: rgba(255, 255, 255, 0.6); 139 | filter: blur(750px); 140 | } -------------------------------------------------------------------------------- /src/constants/index.js: -------------------------------------------------------------------------------- 1 | import { people01, people02, people03, facebook, instagram, linkedin, twitter, airbnb, binance, coinbase, dropbox, send, shield, star } from "../assets"; 2 | 3 | export const navLinks = [ 4 | { 5 | id: "home", 6 | title: "Home", 7 | }, 8 | { 9 | id: "features", 10 | title: "Features", 11 | }, 12 | { 13 | id: "product", 14 | title: "Product", 15 | }, 16 | { 17 | id: "clients", 18 | title: "Clients", 19 | }, 20 | ]; 21 | 22 | export const features = [ 23 | { 24 | id: "feature-1", 25 | icon: star, 26 | title: "Rewards", 27 | content: 28 | "The best credit cards offer some tantalizing combinations of promotions and prizes", 29 | }, 30 | { 31 | id: "feature-2", 32 | icon: shield, 33 | title: "100% Secured", 34 | content: 35 | "We take proactive steps make sure your information and transactions are secure.", 36 | }, 37 | { 38 | id: "feature-3", 39 | icon: send, 40 | title: "Balance Transfer", 41 | content: 42 | "A balance transfer credit card can save you a lot of money in interest charges.", 43 | }, 44 | ]; 45 | 46 | export const feedback = [ 47 | { 48 | id: "feedback-1", 49 | content: 50 | "Money is only a tool. It will take you wherever you wish, but it will not replace you as the driver.", 51 | name: "Herman Jensen", 52 | title: "Founder & Leader", 53 | img: people01, 54 | }, 55 | { 56 | id: "feedback-2", 57 | content: 58 | "Money makes your life easier. If you're lucky to have it, you're lucky.", 59 | name: "Steve Mark", 60 | title: "Founder & Leader", 61 | img: people02, 62 | }, 63 | { 64 | id: "feedback-3", 65 | content: 66 | "It is usually people in the money business, finance, and international trade that are really rich.", 67 | name: "Kenn Gallagher", 68 | title: "Founder & Leader", 69 | img: people03, 70 | }, 71 | ]; 72 | 73 | export const stats = [ 74 | { 75 | id: "stats-1", 76 | title: "User Active", 77 | value: "3800+", 78 | }, 79 | { 80 | id: "stats-2", 81 | title: "Trusted by Company", 82 | value: "230+", 83 | }, 84 | { 85 | id: "stats-3", 86 | title: "Transaction", 87 | value: "$230M+", 88 | }, 89 | ]; 90 | 91 | export const footerLinks = [ 92 | { 93 | title: "Useful Links", 94 | links: [ 95 | { 96 | name: "Content", 97 | link: "https://www.hoobank.com/content/", 98 | }, 99 | { 100 | name: "How it Works", 101 | link: "https://www.hoobank.com/how-it-works/", 102 | }, 103 | { 104 | name: "Create", 105 | link: "https://www.hoobank.com/create/", 106 | }, 107 | { 108 | name: "Explore", 109 | link: "https://www.hoobank.com/explore/", 110 | }, 111 | { 112 | name: "Terms & Services", 113 | link: "https://www.hoobank.com/terms-and-services/", 114 | }, 115 | ], 116 | }, 117 | { 118 | title: "Community", 119 | links: [ 120 | { 121 | name: "Help Center", 122 | link: "https://www.hoobank.com/help-center/", 123 | }, 124 | { 125 | name: "Partners", 126 | link: "https://www.hoobank.com/partners/", 127 | }, 128 | { 129 | name: "Suggestions", 130 | link: "https://www.hoobank.com/suggestions/", 131 | }, 132 | { 133 | name: "Blog", 134 | link: "https://www.hoobank.com/blog/", 135 | }, 136 | { 137 | name: "Newsletters", 138 | link: "https://www.hoobank.com/newsletters/", 139 | }, 140 | ], 141 | }, 142 | { 143 | title: "Partner", 144 | links: [ 145 | { 146 | name: "Our Partner", 147 | link: "https://www.hoobank.com/our-partner/", 148 | }, 149 | { 150 | name: "Become a Partner", 151 | link: "https://www.hoobank.com/become-a-partner/", 152 | }, 153 | ], 154 | }, 155 | ]; 156 | 157 | export const socialMedia = [ 158 | { 159 | id: "social-media-1", 160 | icon: instagram, 161 | link: "https://www.instagram.com/", 162 | }, 163 | { 164 | id: "social-media-2", 165 | icon: facebook, 166 | link: "https://www.facebook.com/", 167 | }, 168 | { 169 | id: "social-media-3", 170 | icon: twitter, 171 | link: "https://www.twitter.com/", 172 | }, 173 | { 174 | id: "social-media-4", 175 | icon: linkedin, 176 | link: "https://www.linkedin.com/", 177 | }, 178 | ]; 179 | 180 | export const clients = [ 181 | { 182 | id: "client-1", 183 | logo: airbnb, 184 | }, 185 | { 186 | id: "client-2", 187 | logo: binance, 188 | }, 189 | { 190 | id: "client-3", 191 | logo: coinbase, 192 | }, 193 | { 194 | id: "client-4", 195 | logo: dropbox, 196 | }, 197 | ]; -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/apple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | --------------------------------------------------------------------------------