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 bro, what an amazing tutorial

thank you for the dedication