import React from "react";
import "./main.style.scss";

import MidHeader from "../../components/header/header.component";
import Intro from "../../components/intro/intro.component";
import MidSection from "../../components/section/section.component";
import Services from "../../components/services/services.component";
import About from "../../components/about/about.component";
import ContactForm from "../../components/contact-form/contact-form.component";
import MidFooter from "../../components/footer/footer.component";
import Projects from "../../components/projects/projects.component";

const MidMainPage = () => {
  return (
    <div className="main-page">
      <div className="intro-bg">
        <MidHeader />
        <Intro />
      </div>
      <MidSection title="Services" id="services">
        <Services />
      </MidSection>
      <MidSection title="About Us" id="about-us">
        <About />
      </MidSection>
      <MidSection id="projects">
        <Projects />
      </MidSection>

      <MidSection id="contact-us">
       <ContactForm />
      </MidSection>

      <MidFooter />
    </div>
  );
};

export default MidMainPage;
