Source: pages/foodhealth.js

import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons

// core components
import Header from "/components/Header/Header.js";
import Footer from "/components/Footer/Footer.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Button from "/components/CustomButtons/Button.js";
import HeaderLinks from "/components/Header/HeaderLinks.js";
import Parallax from "/components/Parallax/Parallax.js";

// Sections
import SectionPills from "../pages-sections/Foodhealth-sections/SectionPills";
import ManualContentPill from "../pages-sections/Foodhealth-sections/ManualContent";
import CameraContent from "../pages-sections/Foodhealth-sections/CameraContent";

import styles from "/styles/jss/nextjs-material-kit/pages/components.js";

const useStyles = makeStyles(styles);

/**
 * The function `FoodHealthPage` renders a webpage for food health with a header, parallax image, and
 * sections for manual and camera content.
 * @param props - The `FoodHealthPage` component takes in props as its parameter. Within the component,
 * it uses these props to render different elements on the page. In this specific case, the props are
 * being spread into the `rest` variable, which is then passed down to the `Header` component as
 * additional
 * @returns The `FoodHealthPage` component is being returned. It includes a header, a parallax image,
 * and a section with content related to food health. The content includes a manual content pill and
 * camera content.
 */
export function FoodHealthPage(props) {
  const classes = useStyles();
  const { ...rest } = props;
  return (
    <div>
      <Header
        brand="ThisIsNotFair"
        rightLinks={<HeaderLinks />}
        fixed
        brandlink="/mainmenu"
        color="transparent"
        changeColorOnScroll={{
          height: 400,
          color: "white",
        }}
        {...rest}
      />
      <Parallax image="/img/bg7.jpg">
        <div className={classes.container}>
          <GridContainer>
            <GridItem>
              <div className={classes.brand}>
                <h1 className={classes.title}>Food Health</h1>
                <h3 className={classes.subtitle}>
                  Nutritional Guide and Analysis
                </h3>
              </div>
            </GridItem>
          </GridContainer>
        </div>
      </Parallax>
      <div className={classNames(classes.main, classes.mainRaised)}>
        <SectionPills
          manualcontent={<ManualContentPill />}
          cameracontent={<CameraContent />}
        />
      </div>
    </div>
  );
}