project_hoobank

constants

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,
  },
];

index.css

@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);
}

index.js

import Navbar from "./Navbar";
import Billing from "./Billing";
import CardDeal from "./CardDeal";
import Business from "./Business";
import Clients from "./Clients";
import CTA from "./CTA";
import Stats from "./Stats";
import Footer from "./Footer";
import Testimonials from "./Testimonials";
import Hero from "./Hero";

export {
  Navbar,
  Billing,
  CardDeal,
  Business,
  Clients,
  CTA,
  Stats,
  Footer,
  Testimonials,
  Hero,
};

style.js

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;

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  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: [],
};

it didn't work

bg-primary not working
how to fix @adrianhajdin
If you can help, It will be really appreciated.
Thank you

whenever i run npm run dev, i receive this error !! " Failed to resolve import "../assets" from "src/components/CardDeal.jsx". Does the file exist? "
what can i do to resolve it please ??

whenever i run npm run dev, i receive this error !! " Failed to resolve import "../assets" from "src/components/CardDeal.jsx". Does the file exist? " what can i do to resolve it please ??

I'm having the same issue right now!

@elkitty do you have an index.js file in your "../assets" folder along with all your actual assets?

yes, but for some reason, there is a conflict importing .png's and svg's at the same time, so I had to import all the assets like this, and it worked...

import { useState } from "react";

import logo from '../assets/logo.svg';
import menu from '../assets/menu.svg';
import close from '../assets/close.svg';
import { navLinks } from "../constants";

same thing in index.js...

import people01 from "../assets/people01.png";
import people02 from "../assets/people02.png";
import people03 from "../assets/people03.png";
import facebook from "../assets/facebook.svg";
import instagram from "../assets/instagram.svg";
import linkedin from "../assets/linkedin.svg";
import twitter from "../assets/twitter.svg";
import airbnb from "../assets/airbnb.png";
import binance from "../assets/binance.png";
import coinbase from "../assets/coinbase.png";
import dropbox from "../assets/dropbox.png";
import send from "../assets/send.svg";
import shield from "../assets/shield.svg";
import star from "../assets/star.svg";

@elkitty hmmm odd, and your index.js file is definitely in the same 'assets' folder? because if so,
import people01 from "../assets/people01.png"; shouldn't theoretically work, as it's taking you outside of your current directory..

no, index.js is in "constants" folder... inside src

OK so you should have this index.js file here: https://github.com/adrianhajdin/project_hoobank/blob/main/src/assets/index.js
NOTE: Inside the assets folder

And another index.js file here: https://github.com/adrianhajdin/project_hoobank/blob/main/src/components/index.js
NOTE: inside the components folder

PLEASE NOTE: The code is different for the two files, just copy and paste. Then you'll be able to import things like normal while following along the tutorial :)

If you guys still have problem with the postcssconfig, you can solve it renaming the "postcss.config.js" file to "postcss.config.cjs" and then adding this script inside your postcss.config.cjs :

const autoprefixer = require("autoprefixer");
const tailwindcss = require("tailwindcss");

module.exports = {
plugins: [tailwindcss, autoprefixer],
};

If you're still having issues with Tailwind, we recommend trying the following steps:

@tailwind base;
@tailwind components;
@tailwind utilities;

chage flowing:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

ps.

text-fill-color:transparent; => -webkit-text-fill-color:transparent;

Good luck!

im not able to download the assets anyone please help me

For some reason bg-primary is not working in the code. I mean all of the custom colors are not being rendered.

did you ever find a solution for this @Shrikantpaliwal ?

-webkit-text-fill-color:transparent;

@devcookee i have just tried this and it does not seem to be working

guyz when i write this code it doesn't display anything on server.

div className="bg-primary w-full overflow-hideen"> div className={'${styles.paddingX} ${styles.flexCenter}'}> div className={'${styles.boxWidth}'}> h1 hello world /h1 but when i write

div className="bg-primary w-full overflow-hideen"> h1 hello world /h1

it displays on server. Can anyone tell me what is the issue here my style.js is not working

i find the solution.
when you are instaling tailwind with the command {npm install -D tailwindcss postcss autoprefixer}
this is not creating the document named 'postcss.config.cjs' this document contains:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

i suggest to create this document or the other way is download the full code and just paste the document in your folder code.

Thanks for this tutorial it really help me to understand the concepts in react

Hello, am following up the course but i just have this challenge, my styles' is declared but its value is never read, how can i solve this.

Nice works pretty well

im not able to download the assets anyone please help me

same happened with me...y'all can just go and download whole github project and now just pick the assests folder and paste it in your own project - simple :)

assets folder seems empty

thanks

I don't know how can i Thank you. You've made me an expert of Javascript by ur awesome tutorials. Your best thing is you provide every file without asking for money or support. Luv u bro

true. same problem. i am starting from begining

remember two things if facing issues related to tailwind not working:

1. set node:true in eslintrc.cjs
2. create postcss.config.mjs file if not created create it and add
   export default {
   plugins: {
   tailwindcss: {},
   autoprefixer: {},
   },
   }
   hope it helps

Guys, If after you run npm run dev, and you don't see any changing color (tailwind is not working), you installed the tailwind with the wrong command on the terminal. We use Vite to create React, not create React app. From the tailwind page itself: Create React App does not support custom PostCSS configurations and is incompatible with many important tools in the PostCSS ecosystem, like postcss-import.

Instead of following this installation: https://tailwindcss.com/docs/guides/create-react-app

Follow this installation: https://tailwindcss.com/docs/guides/vite (the teacher uses this in the video).

Hey, I can't thank you enough for this :D
You got a follower ❤️

1. make sure to have a postcss.config.cjs file in the main root folder that is bank_modern_app folder,
   put this contents in that file:
   "module.exports = {
   plugins: {
   tailwindcss: {},
   autoprefixer: {},
   },
   }"
   that should bring back the tailwind support and the bg-primary should be working.

Hello, i am getting the error module not defiend in tailwind configuration file
Kindly help

Guys, mostly all the errors that came from tailwindcss appear because you didn't install the plugin in the vscode, try to install it and you'll notice that they will run smoothly

Quick question, how do you make your images (SVG) in the assets folder?

That was the same thing happening to me until i discovered that the assets folder has another assests folder with the images inside, so i had to delete first assets folder from from project and put the assets folder and contained the actual images and resources.

That worked for me