diff --git a/Websites/BankModern/.eslintrc.cjs b/Websites/BankModern/.eslintrc.cjs new file mode 100644 index 0000000..4dcb439 --- /dev/null +++ b/Websites/BankModern/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, + settings: { react: { version: '18.2' } }, + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/Websites/BankModern/.gitignore b/Websites/BankModern/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/Websites/BankModern/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/Websites/BankModern/README.md b/Websites/BankModern/README.md new file mode 100644 index 0000000..f768e33 --- /dev/null +++ b/Websites/BankModern/README.md @@ -0,0 +1,8 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@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 +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/Websites/BankModern/bun.lockb b/Websites/BankModern/bun.lockb new file mode 100755 index 0000000..a3e0588 Binary files /dev/null and b/Websites/BankModern/bun.lockb differ diff --git a/Websites/BankModern/index.html b/Websites/BankModern/index.html new file mode 100644 index 0000000..0c589ec --- /dev/null +++ b/Websites/BankModern/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/Websites/BankModern/package.json b/Websites/BankModern/package.json new file mode 100644 index 0000000..9412966 --- /dev/null +++ b/Websites/BankModern/package.json @@ -0,0 +1,29 @@ +{ + "name": "modern_bank", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.15", + "@types/react-dom": "^18.2.7", + "@vitejs/plugin-react": "^4.0.3", + "autoprefixer": "^10.4.16", + "eslint": "^8.45.0", + "eslint-plugin-react": "^7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.3", + "postcss": "^8.4.31", + "tailwindcss": "^3.3.3", + "vite": "^4.4.5" + } +} diff --git a/Websites/BankModern/postcss.config.js b/Websites/BankModern/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/Websites/BankModern/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/Websites/BankModern/public/vite.svg b/Websites/BankModern/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/Websites/BankModern/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Websites/BankModern/src/App.css b/Websites/BankModern/src/App.css new file mode 100644 index 0000000..b9d355d --- /dev/null +++ b/Websites/BankModern/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/Websites/BankModern/src/App.jsx b/Websites/BankModern/src/App.jsx new file mode 100644 index 0000000..c22607c --- /dev/null +++ b/Websites/BankModern/src/App.jsx @@ -0,0 +1,27 @@ +import React from "react"; +import styles from "./styles"; + +import {Navbar, Billing, CardDeal, Business, Clients, CTA, Stats, + Footer, Testimonials, Hero,} from "../../BankModern/src/components/Index"; + +const App = () => { + return ( +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ ); +}; + +export default App; \ No newline at end of file diff --git a/Websites/BankModern/src/assets/Discount.svg b/Websites/BankModern/src/assets/Discount.svg new file mode 100644 index 0000000..f00f964 --- /dev/null +++ b/Websites/BankModern/src/assets/Discount.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Websites/BankModern/src/assets/Send.svg b/Websites/BankModern/src/assets/Send.svg new file mode 100644 index 0000000..a08a1ed --- /dev/null +++ b/Websites/BankModern/src/assets/Send.svg @@ -0,0 +1,3 @@ + + + diff --git a/Websites/BankModern/src/assets/Shield.svg b/Websites/BankModern/src/assets/Shield.svg new file mode 100644 index 0000000..48a4637 --- /dev/null +++ b/Websites/BankModern/src/assets/Shield.svg @@ -0,0 +1,3 @@ + + + diff --git a/Websites/BankModern/src/assets/Star.svg b/Websites/BankModern/src/assets/Star.svg new file mode 100644 index 0000000..10c841a --- /dev/null +++ b/Websites/BankModern/src/assets/Star.svg @@ -0,0 +1,3 @@ + + + diff --git a/Websites/BankModern/src/assets/airbnb.png b/Websites/BankModern/src/assets/airbnb.png new file mode 100644 index 0000000..debf421 Binary files /dev/null and b/Websites/BankModern/src/assets/airbnb.png differ diff --git a/Websites/BankModern/src/assets/apple.svg b/Websites/BankModern/src/assets/apple.svg new file mode 100644 index 0000000..f05fb54 --- /dev/null +++ b/Websites/BankModern/src/assets/apple.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Websites/BankModern/src/assets/arrow-up.svg b/Websites/BankModern/src/assets/arrow-up.svg new file mode 100644 index 0000000..1fea3a5 --- /dev/null +++ b/Websites/BankModern/src/assets/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/Websites/BankModern/src/assets/bill.png b/Websites/BankModern/src/assets/bill.png new file mode 100644 index 0000000..e8f8be3 Binary files /dev/null and b/Websites/BankModern/src/assets/bill.png differ diff --git a/Websites/BankModern/src/assets/binance.png b/Websites/BankModern/src/assets/binance.png new file mode 100644 index 0000000..128afc7 Binary files /dev/null and b/Websites/BankModern/src/assets/binance.png differ diff --git a/Websites/BankModern/src/assets/card.png b/Websites/BankModern/src/assets/card.png new file mode 100644 index 0000000..c47ae24 Binary files /dev/null and b/Websites/BankModern/src/assets/card.png differ diff --git a/Websites/BankModern/src/assets/close.svg b/Websites/BankModern/src/assets/close.svg new file mode 100644 index 0000000..16a4d7d --- /dev/null +++ b/Websites/BankModern/src/assets/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/Websites/BankModern/src/assets/coinbase.png b/Websites/BankModern/src/assets/coinbase.png new file mode 100644 index 0000000..d033048 Binary files /dev/null and b/Websites/BankModern/src/assets/coinbase.png differ diff --git a/Websites/BankModern/src/assets/dropbox.png b/Websites/BankModern/src/assets/dropbox.png new file mode 100644 index 0000000..7305ee5 Binary files /dev/null and b/Websites/BankModern/src/assets/dropbox.png differ diff --git a/Websites/BankModern/src/assets/facebook.svg b/Websites/BankModern/src/assets/facebook.svg new file mode 100644 index 0000000..14145f0 --- /dev/null +++ b/Websites/BankModern/src/assets/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/Websites/BankModern/src/assets/google.svg b/Websites/BankModern/src/assets/google.svg new file mode 100644 index 0000000..baf962d --- /dev/null +++ b/Websites/BankModern/src/assets/google.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Websites/BankModern/src/assets/index.js b/Websites/BankModern/src/assets/index.js new file mode 100644 index 0000000..9a379f2 --- /dev/null +++ b/Websites/BankModern/src/assets/index.js @@ -0,0 +1,53 @@ +import airbnb from "./airbnb.png"; +import bill from "./bill.png"; +import binance from "./binance.png"; +import card from "./card.png"; +import coinbase from "./coinbase.png"; +import dropbox from "./dropbox.png"; +import logo from "./logo.svg"; +import quotes from "./quotes.svg"; +import robot from "./robot.png"; +import send from "./Send.svg"; +import shield from "./Shield.svg"; +import star from "./Star.svg"; +import menu from "./menu.svg"; +import close from "./close.svg"; +import google from "./google.svg"; +import apple from "./apple.svg"; +import arrowUp from "./arrow-up.svg"; +import discount from "./Discount.svg"; +import facebook from "./facebook.svg"; +import instagram from "./instagram.svg"; +import linkedin from "./linkedin.svg"; +import twitter from "./twitter.svg"; +import people01 from "./people01.png"; +import people02 from "./people02.png"; +import people03 from "./people03.png"; + +export { + airbnb, + bill, + binance, + card, + coinbase, + dropbox, + logo, + quotes, + robot, + send, + shield, + star, + menu, + close, + google, + apple, + arrowUp, + discount, + facebook, + instagram, + linkedin, + twitter, + people01, + people02, + people03, +}; diff --git a/Websites/BankModern/src/assets/instagram.svg b/Websites/BankModern/src/assets/instagram.svg new file mode 100644 index 0000000..c124bb6 --- /dev/null +++ b/Websites/BankModern/src/assets/instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Websites/BankModern/src/assets/linkedin.svg b/Websites/BankModern/src/assets/linkedin.svg new file mode 100644 index 0000000..4b104a4 --- /dev/null +++ b/Websites/BankModern/src/assets/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/Websites/BankModern/src/assets/logo.svg b/Websites/BankModern/src/assets/logo.svg new file mode 100644 index 0000000..d030871 --- /dev/null +++ b/Websites/BankModern/src/assets/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/Websites/BankModern/src/assets/menu.svg b/Websites/BankModern/src/assets/menu.svg new file mode 100644 index 0000000..b57e4df --- /dev/null +++ b/Websites/BankModern/src/assets/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/Websites/BankModern/src/assets/people01.png b/Websites/BankModern/src/assets/people01.png new file mode 100644 index 0000000..6fb2c23 Binary files /dev/null and b/Websites/BankModern/src/assets/people01.png differ diff --git a/Websites/BankModern/src/assets/people02.png b/Websites/BankModern/src/assets/people02.png new file mode 100644 index 0000000..4fecc85 Binary files /dev/null and b/Websites/BankModern/src/assets/people02.png differ diff --git a/Websites/BankModern/src/assets/people03.png b/Websites/BankModern/src/assets/people03.png new file mode 100644 index 0000000..f0d95d9 Binary files /dev/null and b/Websites/BankModern/src/assets/people03.png differ diff --git a/Websites/BankModern/src/assets/quotes.svg b/Websites/BankModern/src/assets/quotes.svg new file mode 100644 index 0000000..814cf84 --- /dev/null +++ b/Websites/BankModern/src/assets/quotes.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/Websites/BankModern/src/assets/react.svg b/Websites/BankModern/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/Websites/BankModern/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Websites/BankModern/src/assets/robot.png b/Websites/BankModern/src/assets/robot.png new file mode 100644 index 0000000..ca14ccf Binary files /dev/null and b/Websites/BankModern/src/assets/robot.png differ diff --git a/Websites/BankModern/src/assets/twitter.svg b/Websites/BankModern/src/assets/twitter.svg new file mode 100644 index 0000000..58dde2d --- /dev/null +++ b/Websites/BankModern/src/assets/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/Websites/BankModern/src/components/Billing/Billing.jsx b/Websites/BankModern/src/components/Billing/Billing.jsx new file mode 100644 index 0000000..968f46e --- /dev/null +++ b/Websites/BankModern/src/components/Billing/Billing.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Billing = () => { + return ( +
Billing
+ ) +} + +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 new file mode 100644 index 0000000..1819737 --- /dev/null +++ b/Websites/BankModern/src/components/Business/Business.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Business = () => { + return ( +
Business
+ ) +} + +export default Business \ No newline at end of file diff --git a/Websites/BankModern/src/components/Button/Button.jsx b/Websites/BankModern/src/components/Button/Button.jsx new file mode 100644 index 0000000..bb79ee4 --- /dev/null +++ b/Websites/BankModern/src/components/Button/Button.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Button = () => { + return ( +
Button
+ ) +} + +export default Button \ No newline at end of file diff --git a/Websites/BankModern/src/components/CTA/CTA.jsx b/Websites/BankModern/src/components/CTA/CTA.jsx new file mode 100644 index 0000000..af5ff34 --- /dev/null +++ b/Websites/BankModern/src/components/CTA/CTA.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const CTA = () => { + return ( +
CTA
+ ) +} + +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 new file mode 100644 index 0000000..5085635 --- /dev/null +++ b/Websites/BankModern/src/components/CardDeal/CardDeal.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const CardDeal = () => { + return ( +
CardDeal
+ ) +} + +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 new file mode 100644 index 0000000..dd5809e --- /dev/null +++ b/Websites/BankModern/src/components/Clients/Clients.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Clients = () => { + return ( +
Clients
+ ) +} + +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 new file mode 100644 index 0000000..0f80d4f --- /dev/null +++ b/Websites/BankModern/src/components/FeedbackCard/FeedbackCard.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const FeedbackCard = () => { + return ( +
FeedbackCard
+ ) +} + +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 new file mode 100644 index 0000000..09379a2 --- /dev/null +++ b/Websites/BankModern/src/components/Footer/Footer.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Footer = () => { + return ( +
Footer
+ ) +} + +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 new file mode 100644 index 0000000..5fe0628 --- /dev/null +++ b/Websites/BankModern/src/components/GetStarted/GetStarted.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const GetStarted = () => { + return ( +
GetStarted
+ ) +} + +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 new file mode 100644 index 0000000..90b45f6 --- /dev/null +++ b/Websites/BankModern/src/components/Hero/Hero.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Hero = () => { + return ( +
Hero
+ ) +} + +export default Hero \ No newline at end of file diff --git a/Websites/BankModern/src/components/Index.js b/Websites/BankModern/src/components/Index.js new file mode 100644 index 0000000..5bac958 --- /dev/null +++ b/Websites/BankModern/src/components/Index.js @@ -0,0 +1,23 @@ +import Navbar from "./Navbar/Navbar"; +import Billing from "./Billing/Billing"; +import CardDeal from "./CardDeal/CardDeal"; +import Business from "./Business/Business"; +import Clients from "./Clients/Clients"; +import CTA from "./CTA/CTA"; +import Stats from "./Stats/Stats"; +import Footer from "./Footer/Footer"; +import Testimonials from "./Testimonials/Testimonials"; +import Hero from "./Hero/Hero"; + +export{ + Navbar, + Billing, + CardDeal, + Business, + Clients, + CTA, + Stats, + Footer, + Testimonials, + 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 new file mode 100644 index 0000000..bb35bab --- /dev/null +++ b/Websites/BankModern/src/components/Navbar/Navbar.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import { useState } from "react"; +// import {close, log, menu} from '../../assets/index'; +import { navlinks } from "../../constants/index"; + +const Navbar = () => { + return ( + + ); +}; + +export default Navbar; diff --git a/Websites/BankModern/src/components/Stats/Stats.jsx b/Websites/BankModern/src/components/Stats/Stats.jsx new file mode 100644 index 0000000..1d8b6c0 --- /dev/null +++ b/Websites/BankModern/src/components/Stats/Stats.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Stats = () => { + return ( +
Stats
+ ) +} + +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 new file mode 100644 index 0000000..f52821e --- /dev/null +++ b/Websites/BankModern/src/components/Testimonials/Testimonials.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Testimonials = () => { + return ( +
Testimonials
+ ) +} + +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 new file mode 100644 index 0000000..1efe123 --- /dev/null +++ b/Websites/BankModern/src/constants/index.js @@ -0,0 +1,212 @@ +import { + people01, + people02, + people03, + facebook, + instagram, + linkedin, + twitter, + airbnb, + binance, + coinbase, + dropbox, + send, + shield, + star, +} from "../assets"; + +export const navLinks = [ + { + id: "home", + title: "Home", + }, + { + id: "features", + title: "Features", + }, + { + id: "product", + title: "Product", + }, + { + id: "clients", + title: "Clients", + }, +]; + +export const features = [ + { + id: "feature-1", + icon: star, + title: "Rewards", + content: + "The best credit cards offer some tantalizing combinations of promotions and prizes", + }, + { + id: "feature-2", + icon: shield, + title: "100% Secured", + content: + "We take proactive steps make sure your information and transactions are secure.", + }, + { + id: "feature-3", + icon: send, + title: "Balance Transfer", + content: + "A balance transfer credit card can save you a lot of money in interest charges.", + }, +]; + +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", + title: "Founder & Leader", + img: people01, + }, + { + id: "feedback-2", + content: + "Money makes your life easier. If you're lucky to have it, you're lucky.", + name: "Steve Mark", + title: "Founder & Leader", + img: people02, + }, + { + id: "feedback-3", + content: + "It is usually people in the money business, finance, and international trade that are really rich.", + name: "Kenn Gallagher", + title: "Founder & Leader", + img: people03, + }, +]; + +export const stats = [ + { + id: "stats-1", + title: "User Active", + value: "3800+", + }, + { + id: "stats-2", + title: "Trusted by Company", + value: "230+", + }, + { + id: "stats-3", + title: "Transaction", + value: "$230M+", + }, +]; + +export const footerLinks = [ + { + title: "Useful Links", + links: [ + { + name: "Content", + link: "https://www.hoobank.com/content/", + }, + { + name: "How it Works", + link: "https://www.hoobank.com/how-it-works/", + }, + { + name: "Create", + link: "https://www.hoobank.com/create/", + }, + { + name: "Explore", + link: "https://www.hoobank.com/explore/", + }, + { + name: "Terms & Services", + link: "https://www.hoobank.com/terms-and-services/", + }, + ], + }, + { + title: "Community", + links: [ + { + name: "Help Center", + link: "https://www.hoobank.com/help-center/", + }, + { + name: "Partners", + link: "https://www.hoobank.com/partners/", + }, + { + name: "Suggestions", + link: "https://www.hoobank.com/suggestions/", + }, + { + name: "Blog", + link: "https://www.hoobank.com/blog/", + }, + { + name: "Newsletters", + link: "https://www.hoobank.com/newsletters/", + }, + ], + }, + { + title: "Partner", + links: [ + { + name: "Our Partner", + link: "https://www.hoobank.com/our-partner/", + }, + { + name: "Become a Partner", + link: "https://www.hoobank.com/become-a-partner/", + }, + ], + }, +]; + +export const socialMedia = [ + { + id: "social-media-1", + icon: instagram, + link: "https://www.instagram.com/", + }, + { + id: "social-media-2", + icon: facebook, + link: "https://www.facebook.com/", + }, + { + id: "social-media-3", + icon: twitter, + link: "https://www.twitter.com/", + }, + { + id: "social-media-4", + icon: linkedin, + link: "https://www.linkedin.com/", + }, +]; + +export const clients = [ + { + id: "client-1", + logo: airbnb, + }, + { + id: "client-2", + logo: binance, + }, + { + id: "client-3", + logo: coinbase, + }, + { + id: "client-4", + logo: dropbox, + }, +]; diff --git a/Websites/BankModern/src/index.css b/Websites/BankModern/src/index.css new file mode 100644 index 0000000..fd9c8e6 --- /dev/null +++ b/Websites/BankModern/src/index.css @@ -0,0 +1,140 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --black-gradient: linear-gradient( + 144.39deg, + #ffffff -278.56%, + #6d6d6d -78.47%, + #11101d 91.61% + ); + --card-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1); +} + +* { + scroll-behavior: smooth; +} + +.text-gradient { + background: radial-gradient( + 64.18% 64.18% at 71.16% 35.69%, + #def9fa 0.89%, + #bef3f5 17.23%, + #9dedf0 42.04%, + #7de7eb 55.12%, + #5ce1e6 71.54%, + #33bbcf 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; +} + +.bg-blue-gradient { + background: linear-gradient( + 157.81deg, + #def9fa -43.27%, + #bef3f5 -21.24%, + #9dedf0 12.19%, + #7de7eb 29.82%, + #5ce1e6 51.94%, + #33bbcf 90.29% + ); +} + +.bg-black-gradient { + background: linear-gradient( + 144.39deg, + #ffffff -278.56%, + #6d6d6d -78.47%, + #11101d 91.61% + ); +} + +.bg-black-gradient-2 { + background: linear-gradient( + -168.39deg, + #ffffff -278.56%, + #6d6d6d -78.47%, + #11101d 91.61% + ); +} + +.bg-gray-gradient { + background: linear-gradient( + 153.47deg, + rgba(255, 255, 255, 0) -341.94%, + #14101d 95.11% + ); +} + +.bg-discount-gradient { + background: linear-gradient(125.17deg, #272727 0%, #11101d 100%); +} + +.box-shadow { + box-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1); +} + +.sidebar { + -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; +} + +@-webkit-keyframes slide-top { + 0% { + -webkit-transform: translateY(100px); + transform: translateY(100px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes slide-top { + 0% { + -webkit-transform: translateY(100px); + transform: translateY(100px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +.feature-card:hover { + background: var(--black-gradient); + box-shadow: var(--card-shadow); +} + +.feedback-container .feedback-card:last-child { + margin-right: 0px; +} + +.feedback-card { + background: transparent; +} + +.feedback-card:hover { + background: var(--black-gradient); +} + +.blue__gradient { + background: linear-gradient(180deg, rgba(188, 165, 255, 0) 0%, #214d76 100%); + filter: blur(123px); +} + +.pink__gradient { + background: linear-gradient(90deg, #f4c4f3 0%, #fc67fa 100%); + filter: blur(900px); +} + +.white__gradient { + background: rgba(255, 255, 255, 0.6); + filter: blur(750px); +} \ No newline at end of file diff --git a/Websites/BankModern/src/main.jsx b/Websites/BankModern/src/main.jsx new file mode 100644 index 0000000..54b39dd --- /dev/null +++ b/Websites/BankModern/src/main.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/Websites/BankModern/src/styles.js b/Websites/BankModern/src/styles.js new file mode 100644 index 0000000..c94c02d --- /dev/null +++ b/Websites/BankModern/src/styles.js @@ -0,0 +1,28 @@ +const styles = { + boxWidth: "xl:max-w-[1280px] w-full", + + heading2: "font-poppins font-semibold xs:text-[48px] text-[40px] text-white xs:leading-[76.8px] leading-[66.8px] w-full", + paragraph: "font-poppins font-normal text-dimWhite text-[18px] leading-[30.8px]", + + flexCenter: "flex justify-center items-center", + flexStart: "flex justify-center items-start", + + paddingX: "sm:px-16 px-6", + paddingY: "sm:py-16 py-6", + padding: "sm:px-16 px-6 sm:py-12 py-4", + + marginX: "sm:mx-16 mx-6", + marginY: "sm:my-16 my-6", + }; + + export const layout = { + section: `flex md:flex-row flex-col ${styles.paddingY}`, + sectionReverse: `flex md:flex-row flex-col-reverse ${styles.paddingY}`, + + sectionImgReverse: `flex-1 flex ${styles.flexCenter} md:mr-10 mr-0 md:mt-0 mt-10 relative`, + sectionImg: `flex-1 flex ${styles.flexCenter} md:ml-10 ml-0 md:mt-0 mt-10 relative`, + + sectionInfo: `flex-1 ${styles.flexStart} flex-col`, + }; + + export default styles; \ No newline at end of file diff --git a/Websites/BankModern/tailwind.config.js b/Websites/BankModern/tailwind.config.js new file mode 100644 index 0000000..86c2099 --- /dev/null +++ b/Websites/BankModern/tailwind.config.js @@ -0,0 +1,28 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: ["./index.html", "./src/**/*.{js,jsx}"], + mode: "jit", + theme: { + extend: { + colors: { + primary: "#00040f", + secondary: "#00f6ff", + dimWhite: "rgba(255, 255, 255, 0.7)", + dimBlue: "rgba(9, 151, 124, 0.1)", + }, + fontFamily: { + poppins: ["Poppins", "sans-serif"], + }, + }, + screens: { + xs: "480px", + ss: "620px", + sm: "768px", + md: "1060px", + lg: "1200px", + xl: "1700px", + }, + }, + plugins: [], +} + diff --git a/Websites/BankModern/vite.config.js b/Websites/BankModern/vite.config.js new file mode 100644 index 0000000..c72ca71 --- /dev/null +++ b/Websites/BankModern/vite.config.js @@ -0,0 +1,10 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], + server: { + port: 3000, + }, +}) diff --git a/Websites/Jefes/Frontend/src/components/Navbar/Navbar.tsx b/Websites/Jefes/Frontend/src/components/Navbar/Navbar.tsx index f40dd25..448e344 100644 --- a/Websites/Jefes/Frontend/src/components/Navbar/Navbar.tsx +++ b/Websites/Jefes/Frontend/src/components/Navbar/Navbar.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import {GiHamburgerMenu} from 'react-icons/gi'; import {MdOutlineRestaurantMenu} from 'react-icons/md'; import './Navbar.css' @@ -7,6 +7,13 @@ import './Navbar.css' const Navbar = () => { const [toggle_menu, set_toggle_menu] = useState(false); + const[isActive, setIsActive] = useState(false); + useEffect(() => { + window.addEventListener('scroll', () => { + window.scrollY > 50 ? setIsActive(true) : setIsActive(false); + }); + }); + return (