import { Box, Divider, Typography } from "@mui/material";
import { useDispatch } from "react-redux";

import { switchThemeMode } from "../../app/appSlice";

import AppAppBar from "../AppAppBar/AppAppBar";
import FAQ from "../FAQ/FAQ";
import Features from "../Features/Features";
import Footer from "../../shared/Footer/Footer";
import Hero from "../Hero/Hero";
import Services from "../Services/Services";
import Leaderboard from "../../main/Leaderboard/Leaderboard";
import Reference from "../Reference/Reference";

export function Landing() {
  const dispatch = useDispatch();

  const onClickThemeMode = () => {
    dispatch(switchThemeMode());
  };

  return (
    <div>
      <AppAppBar onClickThemeMode={onClickThemeMode} />
      <Hero />
      <Leaderboard />
      <Divider />
      <Services />
      <Features />
      <Divider />
      <FAQ />
      <Reference />
      <Footer />
    </div>
  );
}

export default Landing;