Only footer left

package.json

@@ -10,10 +10,13 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^17.0.2",
+    "react-elastic-carousel": "^0.11.5",
     "react-icons": "^4.4.0",
+    "react-player": "^2.10.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "sass": "^1.52.2",
+    "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Components/AcheiveGoalCard/AcheiveGoalCard.js

+import React from "react";
+import { skillPad } from "../../Constant/Images";
+import style from "./AcheiveGoalCard.module.scss";
+
+const AcheiveGoalCard = ({ data }) => {
+  function truncate(string, n) {
+    return string?.length > n ? string.substr(0, n - 1) + " ..." : string;
+  }
+  return (
+    <div className={style.box}>
+      <div className={style.imageContainer}>
+        <img src={data?.image} className={style.boxImage} />
+      </div>
+      <h6 className={style.title}>{truncate(data?.title, 60)}</h6>
+      <p className={`p-14 ${style.subTitle} `}>
+        {truncate(data?.description, 80)}
+      </p>
+    </div>
+  );
+};
+
+export default AcheiveGoalCard;

src/Components/AcheiveGoalCard/AcheiveGoalCard.module.scss

+.box {
+  width: 100%;
+  height: 300px;
+  padding: 40px;
+  margin-top: 20px;
+  // background-color: red;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  -webkit-box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
+  -moz-box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
+  box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
+  transition: 0.2s;
+  &:hover {
+    -webkit-box-shadow: 0px 0px 24px -8px rgba(0, 0, 0, 0.36);
+    -moz-box-shadow: 0px 0px 24px -8px rgba(0, 0, 0, 0.36);
+    box-shadow: 0px 0px 24px -8px rgba(0, 0, 0, 0.36);
+  }
+  .imageContainer {
+    width: 30%;
+    height: 40%;
+    .boxImage {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .title {
+    margin-top: 20px;
+    text-align: center;
+    margin-top: 30px;
+  }
+  .subTitle {
+    width: 100%;
+    margin-top: 10px;
+    text-align: center;
+  }
+}

src/Components/BlogCard/BlogCard.js

+import React from "react";
+import style from "./BlogCard.module.scss";
+import { AiFillStar } from "react-icons/ai";
+import { Col } from "react-bootstrap";
+import { GoCalendar } from "react-icons/go";
+import { BsFillPersonFill, BsArrowRight } from "react-icons/bs";
+
+const BlogCard = ({ data }) => {
+  return (
+    // <Col md={4} style={{marginTop: "40px"}}>
+    <div className={style.cardMainContianer}>
+      <div className={style.imageContainer}>
+        <img src={data?.image} alt="" />
+      </div>
+      <div className={style.cardBody}>
+        <div className={style.dateAndName}>
+          <div>
+            <p>
+              <GoCalendar /> April 5, 2017
+            </p>
+          </div>
+          <div>
+            <p>
+              <BsFillPersonFill /> John Doe
+            </p>
+          </div>
+        </div>
+        <h6>Conceptual Art, Photography and Wild Life</h6>
+        <p className={`p-14`}>{data?.description}</p>
+        <div>
+          <h6 className={style.price}>Read More <BsArrowRight /> </h6>
+        </div>
+      </div>
+    </div>
+    // </Col>
+  );
+};
+
+export default BlogCard;

src/Components/BlogCard/BlogCard.module.scss

+@use "../../root";
+
+.cardMainContianer {
+  width: 100%;
+  min-height: 400px;
+  height: 100%;
+  transition: 0.3s;
+  padding: 20px;
+  -webkit-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
+  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
+  .imageContainer {
+    width: 100%;
+    height: 220px;
+    background-color: orange;
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .cardBody {
+    padding: 30px;
+    white-space: wrap;
+    overflow: hidden;
+    .price {
+      color: root.$main_red;
+      margin-bottom: 0px;
+    }
+    .dateAndName {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+  }
+  &:hover {
+    //   background-color: red;
+    -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
+    -moz-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
+    box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
+  }
+}

src/Components/Carousel/Carousel.js

+import React from "react";
+import Carousel, { consts } from "react-elastic-carousel";
+import { google, envato } from "../../Constant/Images";
+import { Button } from "react-bootstrap";
+import { AiOutlineRight, AiOutlineLeft } from "react-icons/ai";
+import style from "./Carousel.module.scss";
+
+const CarouselComponent = () => {
+  const myArrow = ({ type, onClick, isEdge }) => {
+    const pointer =
+      type === consts.PREV ? (
+        <AiOutlineLeft className={style.icon} />
+      ) : (
+        <AiOutlineRight className={style.icon} />
+      );
+    return (
+      <button onClick={onClick} disabled={isEdge} className={style.button}>
+        {pointer}
+      </button>
+    );
+  };
+  return (
+    <Carousel
+      pagination={false}
+      itemsToShow={4}
+      itemsToScroll={4}
+      renderArrow={myArrow}
+    >
+      <img src={envato} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={envato} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={envato} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={google} alt="" className={style.img} />
+      <img src={envato} alt="" className={style.img} />
+
+      {/* {items.map((item) => (
+        <div key={item.id}>{item.title}</div>
+      ))} */}
+    </Carousel>
+  );
+};
+
+export default CarouselComponent;

src/Components/Carousel/Carousel.module.scss

+.button {
+  background-color: transparent;
+  border: 0px;
+  outline: none;
+}
+
+.icon {
+  font-size: 20px;
+}
+
+.img{
+    width: 160px;
+    height: 50px;
+}
\ No newline at end of file

src/Components/CourseCategories/CourseCategories.module.scss

@@ -10,6 +10,7 @@
   &:hover {
     background-color: root.$main_red;
     color: white !important;
+    transition: 0.2s;
   }
   &:hover .icon {
     color: white;

src/Components/Footer/Footer.js

+import React from "react";
+import { Container, Col, Row } from "react-bootstrap";
+import style from "./Footer.module.scss";
+const Footer = () => {
+  return (
+    <div className={style.footerMainContainer}>
+      <Container>
+        <div className={style.footerInnerContainer}>
+          <div className={style.footerDiv1}>asdsadas</div>
+          <div className={style.footerDiv2}>asdassad</div>
+          <div className={style.footerDiv3}>asdaas</div>
+          <div className={style.footerDiv4}>asdasd</div>
+          <div className={style.footerDiv5}>asdsa</div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Footer;

src/Components/Footer/Footer.module.scss

+@use "../../root";
+
+.footerMainContainer {
+  width: 100%;
+  height: 400px;
+  background-color: root.$footer_background;
+  color: white;
+  .footerInnerContainer {
+    display: flex;
+    width: 100%;
+    padding-top: 50px;
+    .footerDiv1,
+    .footerDiv2,
+    .footerDiv3,
+    .footerDiv4,
+    .footerDiv5 {
+      width: 20%;
+    }
+  }
+}

src/Constant/Images.js

@@ -4,6 +4,15 @@ import photographer_man from "../assets/images/photographer_man.png";
 import guitar from "../assets/images/guitar.png";
 import graphic from "../assets/images/graphic.png";
 import skillPad from "../assets/images/skill.png";
+import lcdScreen from "../assets/images/LCDScreen.png";
+import selfLearn from "../assets/images/self-learn.png";
+import key from "../assets/images/key.png";
+import camera from "../assets/images/camera.png";
+import analytics from "../assets/images/analytics.png";
+import quoteImg from "../assets/images/quote.png";
+import profile from "../assets/images/profile.png";
+import google from "../assets/images/google.png";
+import envato from "../assets/images/envato.png"
 
 export {
   headImg,
@@ -12,4 +21,13 @@ export {
   guitar,
   graphic,
   skillPad,
+  selfLearn,
+  lcdScreen,
+  key,
+  camera,
+  analytics,
+  quoteImg,
+  profile,
+  google,
+  envato
 };

src/Constant/mockData.js

-import { freelancingCardImg, photographer_man, guitar} from "./Images";
+import {
+  freelancingCardImg,
+  photographer_man,
+  guitar,
+  skillPad,
+  selfLearn,
+  lcdScreen,
+  key,
+  camera,
+  analytics,
+} from "./Images";
 const categories = [
   {
     title: "Development",
@@ -73,4 +83,43 @@ const topCourse = [
   },
 ];
 
-export { categories, topCourse };
+const acheiveGoalData = [
+  {
+    title: "Expand Skill Development",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: skillPad,
+  },
+  {
+    title: "Self Learn",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: selfLearn,
+  },
+  {
+    title: "Tech Jobs",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: lcdScreen,
+  },
+  {
+    title: "Unlock Your Potential",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: key,
+  },
+  {
+    title: "Explore Your Passion",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: camera,
+  },
+  {
+    title: "Analytics Work",
+    description:
+      " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbibibendum venenatis mollis. Ut sem metus, convallis a libero vel, suscipit",
+    image: analytics,
+  },
+];
+
+export { categories, topCourse, acheiveGoalData };

src/Screens/Home/Home.js

@@ -3,10 +3,21 @@ import style from "./Home.module.scss";
 import { Container, Row, Col } from "react-bootstrap";
 import NavbarComponent from "../../Components/Navbar/Navbar";
 import "../../App.scss";
-import { headImg, skillPad } from "../../Constant/Images";
+import { headImg, quoteImg, profile } from "../../Constant/Images";
 import CourseCategories from "../../Components/CourseCategories/CourseCategories";
-import { categories, topCourse } from "../../Constant/mockData";
+import {
+  acheiveGoalData,
+  categories,
+  topCourse,
+} from "../../Constant/mockData";
 import CourseCard from "../../Components/CourseCard/CourseCard";
+import AcheiveGoalCard from "../../Components/AcheiveGoalCard/AcheiveGoalCard";
+import ReactPlayer from "react-player";
+import CarouselComponent from "../../Components/Carousel/Carousel";
+import BlogCard from "../../Components/BlogCard/BlogCard";
+import Carousel from "react-elastic-carousel";
+import { BiCircle, BiSquare } from "react-icons/bi";
+import Footer from "../../Components/Footer/Footer";
 
 const Home = () => {
   return (
@@ -155,25 +166,118 @@ const Home = () => {
               bibendum venenatis mollis.
             </p>
             <Row>
-              <Col md={4}>
-                <div className={style.box}>
-                  <img src={skillPad} />
-                  <h6 className={style.title}>Expand Skill Development</h6>
-                  <p className={`p-14 ${style.subTitle} `}>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                    Morbi bibendum venenatis mollis.
-                  </p>
+              {acheiveGoalData?.map((item, index) => {
+                return (
+                  <Col md={4}>
+                    <AcheiveGoalCard data={item} />
+                  </Col>
+                );
+              })}
+            </Row>
+          </Container>
+        </div>
+        <div className={style.clientAppriciationContainer}>
+          <Container>
+            <h3>Client’s Appriciation</h3>
+            <p className={`p-14 ${style.subTitle} `}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+              bibendum venenatis mollis.
+            </p>
+
+            <div className={style.quoteAndVideoContainer}>
+              <div className={style.leftContainer}>
+                <div className={style.quoteImage}>
+                  <img src={quoteImg} alt="" />
                 </div>
-              </Col>
-              <Col md={4}>
-                <div className={style.box}></div>
-              </Col>
-              <Col md={4}>
-                <div className={style.box}></div>
-              </Col>
+                <h6 className={style.description}>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Integer a viverra nisl. Morbi in ornare nibh, sed efficitur
+                  neque. Proin efficitur odio eget pulvinar hendrerit.
+                </h6>
+                <div className={style.profile}>
+                  <div className={style.profileImgContainer}>
+                    <img src={profile} className={style.profileImg} alt="" />
+                  </div>
+                  <div className={style.profileText}>
+                    <p className={`p-16 ${style.profileName}`}>John Doe</p>
+                    <p className={`p-14 ${style.profileDesignation}`}>
+                      Graphic Designer
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className={style.rightContainer}>
+                <div className={style.videoContainer}>
+                  <ReactPlayer url="https://youtu.be/LUKs-GENceE" />
+                </div>
+              </div>
+            </div>
+            <div className={style.companiesLogoContainer}>
+              <h3>
+                LMSedu is trusted by 322,000+ students and companies worldwide
+              </h3>
+              <div className={style.carouselContainer}>
+                <CarouselComponent />
+              </div>
+            </div>
+          </Container>
+        </div>
+        <div className={style.ourBlogContainer}>
+          <Container>
+            <h3>Our Blog</h3>
+            <p className={`p-14 ${style.subTitle} `}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+              bibendum venenatis mollis.
+            </p>
+            <Row>
+              <Carousel
+                itemsToShow={3}
+                showArrows={false}
+                renderPagination={({ pages, activePage, onClick }) => {
+                  return (
+                    <div direction="row">
+                      {pages.map((page) => {
+                        const isActivePage = activePage === page;
+                        return (
+                          <BiCircle
+                            key={page}
+                            onClick={() => onClick(page)}
+                            active={isActivePage}
+                          />
+                        );
+                      })}
+                    </div>
+                  );
+                }}
+              >
+                {topCourse?.map((item, index) => {
+                  return (
+                    <Col md={12}>
+                      {" "}
+                      <BlogCard key={index} data={item} />
+                    </Col>
+                  );
+                })}
+              </Carousel>
             </Row>
           </Container>
         </div>
+        <div className={style.becomeInstructorContainer}>
+          <Container>
+            <h2>Become A Instructor</h2>
+            <div className={style.inputAndBtnContainer}>
+              <div className={style.inputAndBtnInnerContainer}>
+                <input
+                  type="text"
+                  className={style.joinInput}
+                  placeholder="Become a Instructor"
+                />
+                <button className={style.joinBtn}>Join</button>
+              </div>
+            </div>
+          </Container>
+        </div>
+        <Footer />
       </div>
     </>
   );

src/Screens/Home/Home.module.scss

@@ -84,7 +84,7 @@
 
 .discoverContianer {
   background-color: rgb(243, 243, 243);
-  padding: 100px 0px;
+  padding: 80px 0px;
   .subTitle {
     width: 25%;
   }
@@ -140,29 +140,121 @@
 }
 
 .acheiveGoalContainer {
-  padding: 60px 0px;
+  padding: 80px 0px;
   .subTitle {
     width: 30%;
   }
-  .box {
+}
+
+.clientAppriciationContainer {
+  background-color: rgb(243, 243, 243);
+  padding: 80px 0px;
+  .subTitle {
+    width: 30%;
+  }
+
+  .quoteAndVideoContainer {
     width: 100%;
-    height: 300px;
-    padding: 40px;
-    // background-color: red;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: column;
-    -webkit-box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
-    -moz-box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
-    box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.28);
-    .title {
-      margin-top: 20px;
-    }
-    .subTitle {
-      width: 100%;
-      margin-top: 10px;
+    .leftContainer {
+      width: 50%;
+      margin-top: 70px;
+      position: relative;
+      .quoteImage {
+        position: absolute;
+      }
+      .description {
+        padding: 35px;
+        font-family: "Roboto-800";
+        line-height: 32px;
+        width: 80%;
+      }
+      .profile {
+        display: flex;
+        align-items: center;
+        .profileImgContainer {
+          .profileImg {
+            border-radius: 50%;
+          }
+        }
+        .profileText {
+          padding-left: 20px;
+          .profileName {
+            margin: 0px;
+            font-family: "Roboto-500";
+          }
+          .profileDesignation {
+          }
+        }
+      }
+    }
+    .rightContainer {
+      width: 50%;
+      .videoContainer {
+        width: 100%;
+      }
+    }
+  }
+  .companiesLogoContainer {
+    margin-top: 150px;
+    h3 {
       text-align: center;
+      font-family: "Roboto-700";
+    }
+    .carouselContainer {
+      margin-top: 80px;
+    }
+  }
+}
+
+.ourBlogContainer {
+  padding: 80px 0px;
+  .subTitle {
+    width: 30%;
+  }
+}
+
+.becomeInstructorContainer {
+  width: 100%;
+  background-image: url(../../assets/images/becomeInstructor.png);
+  background-size: 100% 350px;
+  // background-position:;
+  height: 350px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  h2 {
+    text-align: center;
+    font-family: "Roboto-500" !important;
+    letter-spacing: 3px;
+  }
+  .inputAndBtnContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .inputAndBtnInnerContainer {
+      position: relative;
+      margin-top: 40px;
+      .joinInput {
+        padding: 15px 70px;
+        width: 600px;
+        border-radius: 50px;
+        outline: none;
+        border: none;
+      }
+      .joinBtn {
+        position: absolute;
+        padding: 15px 60px;
+        border-radius: 50px;
+        right: 0px;
+        background-color: root.$main_red;
+        color: white;
+        outline: none;
+        border: none;
+      }
     }
   }
 }

src/_root.scss

-$main_red: #ab0534;
\ No newline at end of file
+$main_red: #ab0534;
+$footer_background: #292662
\ No newline at end of file