Insure Landing Page w/ React

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  Hi @Briuwu 👋

  You did a great job on this challenge. 👍 Here are a few things that I have noticed and that you might want to check in order to improve your solution.

  • View plans and How we work are links that are styled as buttons. So your markup should be <a href="#">VIEW PLANS</a> instead of <button>VIEW PLANS</button>
  • In the navigation bar and the footer, How we work, Blog, etc these should be anchor tag as well.
  • There is a small issue in intro section on tablet. The image seems too large for this viewport width.
  • In the Footer.jsx component, you could also leverage on the map() method to generate the links by adding them to an array like you did in the Info.jsx component.

  src/data/footerLinks.js

  export const footerLinks = [
    {
      menuName: 'Our Company',
      items: [
        {
          title: 'How we work',
          link: '/how-we-work',
        },
        {
          title: 'Why insure ?',
          link: '/why-insure',
        },
        {
          title: 'View plans',
          link: '/view-plans',
        },
      ]
    },
    {
      menuName: 'Help me',
      items: [
        {
          title: 'FAQ',
          link: '/faq',
        },
        {
          title: 'Terms of use',
          link: '/terms-of-use',
        },
        {
          title: 'Policies',
          link: '/policies',
        },
      ]
    }
  ];
  

  src/components/Footer.jsx

  import { footerLinks } from '../data/footerLinks';
  import { Link } from 'react-router-dom';
  
  const Footer = () => {
    return (
      //...
      <div className="footer-container">
        {
          footerLinks.map((menu, index) => (
            <div className="footer-all" key={`menu-${index}`}>
              <h4 className='footer-title'>{ menu.title }</h4>
              {
                menu.items.map((item, index) => (
                  <Link to="{item.link}" className="footer-info" key={`link-${index}`}>{item.title}</Link>
                )
              }
            </div>
          ))
        }
      </div>
      //...
    )
  }
  

  I hope this helps.

  Keep it up.

  Marked as helpful

  1

  ---

  

  P

  Briuwu•750

  @BriuwuPosted over 2 years ago

  Hi! @christopher-adolphe

  Thank you so much for this feedback! It really helps me a lot~! (≧∇≦)ﾉ

  0

  

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  @Briuwu,

  I'm happy to help and glad to see this was helpful to you. 🙂

  See you on the next one.

  Best regards.

  1