Untitled

import './LandingHero.css';
import background from '../../../assets/tempBack.png';
import { Box } from '@mui/material';
import { SearchSection } from './SearchSection';
import { USPBanner } from './USPBanner';
import { LandingCategories } from './LandingCategories';
import { CustomerReviews } from './CustomerReviews';

import { LayoutComposer } from '../../../components';

import StaticPage from '../../PageBuilder/StaticPage';
import TopbarContainer from '../../TopbarContainer/TopbarContainer';
import FooterContainer from '../../FooterContainer/FooterContainer';

const LandingHero = () => {
  const layoutAreas = `
    topbar
    main
    footer
  `;

  return (
    <StaticPage title="bla bla">
      <LayoutComposer areas={layoutAreas}>
        {() => (
          <>
            <TopbarContainer />

            <Box backgroundColor="var(--wheelplaceSteel)" component="main">
              <Box className="home-container" backgroundColor="var(--wheelplaceSteel)">
                <Box
                  component="section"
                  className="landing-container"
                  display="flex"
                  sx={{
                    backgroundImage: `url(${background})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    width: '100%',
                  }}
                >
                  <Box component="section" width="100%">
                    <h1 style={{ color: 'var(--wheelplaceBlue)' }}>Uppgradera din bil med stil</h1>
                    <h3 style={{ color: 'white' }}>
                      Hitta rätt begagnade hjul, däck och fälgar tryggt och enkelt genom vår
                    </h3>
                  </Box>
                  <Box component="section" className="search-container">
                    <SearchSection />
                  </Box>
                </Box>

                <USPBanner />

                <LandingCategories />

                <CustomerReviews />
              </Box>
            </Box>
            <FooterContainer />
          </>
        )}
      </LayoutComposer>
    </StaticPage>
  );
};

export default LandingHero;