import { Outlet } from 'react-router-dom';
import { Header } from './Header';
import { Footer } from './Footer';
import { ModalContainer } from '../Main/ModalContainer';
import { Contacts } from '../Main/Contacts';
import { Clients } from '../Main/Clients';
import { ScrollToHashElement } from './ScrollToHashElement';

export function Layout() {
  return (
    <>
      <ScrollToHashElement />
      <Header />
      <main className="relative px-4 overflow-clip lg:px-10 sm:px-6">
        <Outlet />
        <Clients />
        <Contacts />
      </main>
      <Footer />
      <ModalContainer />
    </>
  );
}
