Insure Landing Page w/ React

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.