Merge pull request #15 from atom19-i/MeowForm-reviewSection

Added Review section

package.json

@@ -18,6 +18,7 @@
     "react-highlight": "^0.14.0",
     "react-hot-toast": "^2.1.1",
     "react-icons": "^4.2.0",
+    "react-responsive-carousel": "^3.2.21",
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/comp/Comp/NavBar.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import {Button, IconButton} from "@chakra-ui/button";
 import {Avatar }from '@chakra-ui/react';
-import { VStack,Flex ,Heading, Spacer , Box , Text  , Divider} from "@chakra-ui/layout";
+import { VStack,Flex, Spacer , Box , Text  , Divider} from "@chakra-ui/layout";
 import {useMediaQuery} from "@chakra-ui/react";
 import {Tooltip } from "@chakra-ui/react";
-import  { FaSun , FaMoon, FaGithub, FaUser, FaList} from "react-icons/fa";
+import  { FaSun , FaMoon, FaGithub, FaList} from "react-icons/fa";
 import { useColorMode ,useColorModeValue } from '@chakra-ui/color-mode';
 import {Link} from "react-router-dom";
 import { useAuth0 } from "@auth0/auth0-react";
@@ -13,11 +13,9 @@ import { useAuth0 } from "@auth0/auth0-react";
 import {
     Drawer,
     DrawerBody,
-    DrawerFooter,
     DrawerHeader,
     DrawerOverlay,
     DrawerContent,
-    DrawerCloseButton,
     useDisclosure,
     Menu,
     MenuButton,

src/comp/Comp/Review.js

@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
+
+export default class Reviews extends Component{
+    render() {
+    return(
+        <Carousel
+        showArrows={true}
+        infiniteLoop={true}
+        showThumbs={false}
+        showStatus={false}
+        autoPlay={true}
+        interval={6100}
+        >
+        <div>
+          <img 
+          src="https://res.cloudinary.com/practicaldev/image/fetch/s--0SCWkYwS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/9dhr4cw2s0skgfig8qnw.png" 
+          alt="review1"
+          />
+          <div className="myCarousel">
+            <h3>Veronica Stork</h3>
+            <p>
+            Helpful ,neat , easy to use and lots of cats. totally loved it . Awesome work!
+            </p>
+          </div>
+        </div>
+        <div>
+          <img 
+          src="https://res.cloudinary.com/practicaldev/image/fetch/s--nSI8V6RE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/81co8nilff5r9eer3xga.png" 
+          alt="review2"
+          />
+          <div className="myCarousel">
+            <h3>Daniel Martin</h3>
+            <p>
+            What an inspiring and mind-blowing project you've built here! Such a great idea Gaurav Tewari! I just love it!
+            </p>
+          </div>
+        </div>
+        <div>
+          <img 
+          src="https://res.cloudinary.com/practicaldev/image/fetch/s--gRFMHqWs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/1xwiaya5i7wweic3pz96.png" 
+          alt="review3"
+          />
+          <div className="myCarousel">
+            <h3>Theo Guardiola</h3>
+            <p>
+            Great App Gaurav Tewari, Very helpful. This will help me a lot when form submitting. Kudos 👏
+            I really like the idea and the implementation is also so good. Keep up the good work bro! 🚀
+            </p>
+          </div>
+        </div>
+      </Carousel>
+    );
+  }
+}
+

src/index.css

@@ -11,3 +11,124 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/* reviews */
+.carousel-root {
+  width: 64% !important;
+  margin: auto !important;
+  margin-top: 3% !important;
+}
+
+.carousel .slide {
+  background: #fff !important;
+  color: black;
+  height: 100%;
+}
+
+.carousel .slide img {
+  width: 100px !important;
+  border-radius: 50%;
+}
+
+.myCarousel {
+  background: #fafafa;
+  margin-top: -6%;
+  width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 6%;
+  padding-bottom: 20%;
+  padding-left: 5%;
+  padding-right: 5%;
+  border: 1px solid #ddd;
+  height: 286px;
+}
+
+.carousel .control-dots {
+  padding-left: 5px !important;
+  outline: 0;
+  bottom: 5% !important;
+}
+
+.myCarousel h3 {
+  color: #222;
+  font-weight: 100;
+  letter-spacing: 0.2px;
+  margin-bottom: 10px;
+  font-weight: 600;
+  /* text-transform: uppercase; */
+  font-size: 22px;
+}
+
+.myCarousel p {
+  font-weight: 140 !important;
+  line-height: 29px !important;
+  color: #222;
+  font-size: 17px;
+  font-family: sans-serif;
+  max-height: 67px;
+}
+
+.myCarousel p:before {
+  content: "“";
+  color: rgb(192, 129, 46);;
+  font-size: 26px;
+  font-family: monospace;
+  font-weight: 100;
+}
+
+.myCarousel p:after {
+  content: "”";
+  color: rgb(192, 129, 46);
+  font-size: 26px;
+  font-family: monospace;
+  font-weight: 100;
+  line-height: 0;
+}
+
+.carousel .control-dots .dot {
+  box-shadow: none !important;
+  background: orange !important;
+  outline: 0;
+}
+
+.carousel.carousel-slider .control-arrow {
+  background:orangered !important;
+  height: 50px !important;
+  position: absolute;
+  top: 35% !important;
+}
+
+@media only screen and (max-width: 934px) {
+  .carousel-root {
+    outline: 0;
+    width: 93% !important;
+    margin: auto !important;
+  }
+
+  .carousel.carousel-slider .control-arrow {
+    display: none !important;
+  }
+  .myCarousel {
+    background: #fafafa;
+    margin-top: -9%;
+    width: 88%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 8%;
+    padding-bottom: 12.5%;
+    padding-left: 5%;
+    padding-right: 5%;
+    border: 1px solid #ddd;
+    height: 269px;
+  }
+
+  .carousel .slide img {
+    width: 24% !important;
+    border-radius: 50%;
+  }
+}
+
+.Reviews{
+  padding: 30px 10px 170px 10px ;
+}

src/pages/Home/Home.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import Bounce from "react-reveal/Bounce";
 import Flip from "react-reveal/Flip";
 import Fade from "react-reveal/Fade";
+import Reviews from "../../comp/Comp/Review";
 import {
 	Text,
 	Box,
@@ -210,6 +211,9 @@ function Home(props) {
 				</Flip>
 				<h1 margin='15%'> Meow Form in action</h1>
 			</Box>
+			<div className="Reviews">
+				<Reviews />
+			</div>
 		</>
 	);
 }