Easybank landing page with React and Tailwind CSS

Community feedback

• 

  P

  Nishanth Venkatesan•1,030

  @nishanth1596

  Posted 3 months ago

  Hi @apu2304, Great work, the transisiton and translation for the nav was really cool! 👏

  Here are a few suggestions you might find helpful:

  1. In the App component, I noticed some components are named like Section1, Section2, and Section3. When another developer (or even you after a few weeks) reads it, it may not be immediately clear what each section does. It's better to give meaningful names like HeroSection for the landing section, WhyChooseUs or FeaturesSection for the features part, etc. Meaningful names really improve readability and keep the project structure clean.

  2. In the Nav component (great naming here btw 👏), you repeated the same animated <motion.p> element multiple times. Instead, you could map over an array of links, like this:

  {navLinks.map((link) => (
    <motion.p
      key={link}
      initial={{ borderBottom: "none", borderColor: "transparent" }}
      whileHover={{
        borderBottom: "3px solid",
        borderColor: "var(--emerald)",
        color: "var(--space-cadet)",
      }}
      transition={{ duration: 0.5, ease: "easeInOut" }}
      className="text-[var(--cadet-gray)] cursor-pointer"
    >
      {link}
    </motion.p>
  ))}
  

  It makes the code more scalable and maintainable. (And honestly, as developers, we're a little lazy 😝 — DRY code saves us pain later!)

  3. In Section1, Section2, and the Nav component, you used a lot of <div>s. It would be even better to use semantic HTML tags where possible, like <section> for sections and <nav> for the navigation bar. You can look into semantic HTML a bit more — it’s a small change that improves accessibility and SEO, and it's a great habit to develop.

  4. In section 2, you could create one component and reuse it by passing different props.

  function CardItem({ title, description }) {
    return (
      <article
        className="bg-[var(--lightblue)] p-4 rounded-lg flex flex-col gap-4 mb-8 justify-center items-center
  md:items-start text-center md:text-left"
      >
        <img src="assets/images/icon-onboarding.svg" alt="" />
        <h2 className="text-[var(--space-cadet)] text-lg md:text-xl">{title}</h2>
        <p className="text-[var(--cadet-gray)] text-sm md:text-md max-w-lg">
          {description}
        </p>
      </article>
    );
  }
  
  export default CardItem;
  

  That way, your code becomes even cleaner and more scalable, which is a big advantage of frameworks like React. Also the another big advantage is you dont have to write more code, coz we developers are lazy 😂

  Keep up the awesome work! 🚀 Your project already looks great, and with these small improvements, it'll look even more professional. ✨

  11

  Marked as helpful