text: //IMPORTING
  //REACT
  import React, { useContext } from "react";
  //COMPONENTS
  import Title from "../components/Title";
  import Hero from "../components/Hero";
  import Lessons from "../components/Lessons";
  import Loader from "../components/Loader";
  //FRAMER MOTION
  import { motion } from "framer-motion";
  //COURSE CONTEXT
  import { CourseContext } from "../context/CourseContext";
  
  //HOME
  function Home() {
    const { isLoading } = useContext(CourseContext);
  
    //PAGE VARIANTS
    const pageVariants = {
      initial: { opacity: 0 },
      animate: {
        opacity: 1,
        transition: {
          duration: 1,
        },
      },
      exit: {
        opacity: 0,
        transition: {
          duration: 1,
        },
      },
    };
  
    //RETURN
    return (
      <motion.div
        variants={pageVariants}
        initial="initial"
        animate="animate"
        exit="exit"
      >
        <Hero />
  
        <Title title="GreenMill Hiking" />
  
        {isLoading ? <Loader /> : <Lessons />}
      </motion.div>
    );
  }
  
  //EXPORTING HOME
  export default Home;