React Native - NFT Marketplace Showcase

Assets

https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/adrianhajdin/nft-marketplace-showcase/tree/main/src/assets

Global.js

const styles = {
  whiteText: "text-white",
  blackText: "text-tertiary",

  bgWhite: "bg-white",
  bgPrimary: "bg-primary",

  boxClass: "flex-row md:flex-col",
  boxReverseClass: "flex-row-reverse md:flex-col-reverse",

  textLeft: "text-left",
  textRight: "text-right",

  h1Text:
    "font-bold font-IBMPlex text-5xl sm:text-4xl minmd:text-6xl minlg:text-8xl leading-12 minmd:leading-13",
  pText:
    "my-5 minmd:my-10 font-IBMPlex font-light text-xl minmd:text-3xl minlg:text-4xl minmd:leading-16",
  descriptionText:
    "my-5 minmd:my-10 font-IBMPlex font-light text-xl minmd:text-3xl minlg:text-4xl minmd:leading-16",
  btnText: "text-white font-IBMPlex minmd:text-lg",

  btnPrimary:
    "bg-primary mt-4 py-4 px-6 text-white text-lg minmd:text-2xl font-IBMPlex font-medium rounded-lg hover:shadow-2xl",
  btnBlack:
    "bg-black flex items-center py-2 px-4 rounded-md mt-2 w-fit cursor-pointer",

  section: "flex justify-center items-center p-16 sm:p-8",
  subSection: "flex items-center w-full minmd:w-3/4",
  descDiv: "flex-1 w-full flex justify-start flex-col md:mb-10 ",

  flexCenter: "flex justify-center items-center",
  flexWrap: "flex justify-center flex-wrap",

  fullImg: "w-full h-full object-cover",
  sectionImg: "w-full h-full minmd:w-11/12 minmd:h-11/12 object-contain",
  btnIcon: "w-5 h-5 minmd:w-10 minmd:h-10 object-contain",

  featureImg: "w-20 h-20 minlg:w-40 minlg:h-40 object-contain mb-1",
  featureText:
    "font-semibold font-IBMPlex text-base minlg:text-3xl text-tertiary",
  featureCard:
    "bg-white m-10 p-6 rounded-md flex justify-around items-center flex-col hover:shadow-lg cursor-pointer w-40 h-40 minlg:w-80 minlg:h-80",
};

export default styles;

index.css

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap");

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

.banner {
  background: url("./assets/banner.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.banner02 {
  background: url("./assets/banner02.svg");
  background-color: #0b65c6;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.banner03 {
  background: url("./assets/banner03.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.banner04 {
  background: url("./assets/banner04.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

.fadeLeftMini {
  animation: fadeLeftMini 1s;
  animation-fill-mode: both;
}

.fadeRightMini {
  animation: fadeRightMini 1s;
  animation-fill-mode: both;
}

@keyframes fadeLeftMini {
  0% {
    opacity: 0;
    transform: translate3d(-40%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes fadeRightMini {
  0% {
    opacity: 0;
    transform: translate3d(40%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translateZ(0);
  }
}

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}", "./src/sections/**/*.{js,jsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#0B65C6",
        secondary: "#EEF1F6",
        tertiary: "#0e1133",

        lightBlue: "#E1F6FE",
        lightPink: "#FDEEDC",
        lightGreen: "#E1FDE2",
      },
      lineHeight: {
        12: "1.2",
        13: "1.3",
        16: "1.6",
      },
    },
    screens: {
      lg: { max: "1800px" },
      md: { max: "990px" },
      sm: { max: "600px" },
      xs: { max: "400px" },
      minmd: "1700px",
      minlg: "2100px",
    },
    fontFamily: {
      IBMPlex: ["IBM Plex Sans", "sans-serif"],
    },
  },
  plugins: [],
};

thank you, man...you are just awesome.

Most of my knowledge about software development I've known because of selfless guys like you who share their knowledge with others. Because of this, I'm now on the verge of securing a deal with a financial institution in my home-country to build them a mobile application. Thank you Adrian for sharing your knowledge with us.

Thank you bro, what an amazing tutorial

thank you for the dedication