From dfa971c6f44448dd3e125e94063d4a30b5cda6f6 Mon Sep 17 00:00:00 2001
From: MD SHAHIL <Shahilmd033@gmail.com>
Date: Tue, 18 Jul 2023 13:17:11 +0530
Subject: [PATCH 1/3] Added Quotes

---
 components/Quotes/Quotes.js | 52 +++++++++++++++++++++++++++++++++++++
 package.json                |  2 +-
 pages/index.js              |  4 +++
 styles/Home.module.css      | 37 ++++++++++++++++++++++++++
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 components/Quotes/Quotes.js

diff --git a/components/Quotes/Quotes.js b/components/Quotes/Quotes.js
new file mode 100644
index 00000000..ab151035
--- /dev/null
+++ b/components/Quotes/Quotes.js
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import styles from 'styles/Home.module.css'; // Import your styles
+
+
+const Quotes = () => {
+  const [quotes, setQuotes] = useState([]);
+
+  useEffect(() => {
+    const fetchQuotes = async () => {
+      try {
+        const response = await axios.get('https://api.quotable.io/quotes?limit=10');
+        setQuotes(response.data.results);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    fetchQuotes();
+  }, []);
+
+  if (quotes.length === 0) {
+    return <p>Loading quotes...</p>;
+  }
+
+  return (
+    <div data-aos="fade-up">
+      <h2 className={styles.grabh2}>Quotes</h2>
+      <div className={styles['quotes-container']}>
+        <Swiper
+          spaceBetween={30}
+          loop={true}
+          pagination={{ clickable: true }}
+          effect={'slide'} // Add the effect prop to enable auto transition
+          autoplay={{ delay: 3000 }} // Set the delay (in ms) for auto transition
+        >
+          {quotes.map((quote, index) => (
+            <SwiperSlide key={quote._id}>
+              <div className={styles['quote-wrapper']}>
+                <p className={styles['quote-text']}><b>"{quote.content}"</b></p>
+                <p>- {quote.author}</p>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+};
+
+export default Quotes;
diff --git a/package.json b/package.json
index 40f2479a..3c09ed02 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "react-markdown": "^8.0.7",
     "react-vanilla-tilt": "^1.0.0",
     "sass": "^1.45.1",
-    "styled-components": "^5.3.6",
+    "styled-components": "^5.3.11",
     "swiper": "^9.3.2",
     "yarn": "^1.22.19"
   },
diff --git a/pages/index.js b/pages/index.js
index 69f27daf..d3ef0a10 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -17,6 +17,9 @@ import 'aos/dist/aos.css';
 import TestimonialCard from 'components/Testimonial/Testimonial';
 import GoToTop from 'components/GoToTop';
 
+import Quotes from 'components/Quotes/Quotes';
+
+
 export default function Home() {
   const { dispatch } = useContext(Store);
 
@@ -295,6 +298,7 @@ export default function Home() {
           </form>
         </section>
       </main>
+      <Quotes />
       <TestimonialCard />
       <Footer />
     </>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index f36c467e..ed5d48c9 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -287,3 +287,40 @@ input:focus {
 #sub:hover > div > div {
   background: rgb(159, 154, 255) !important;
 }
+
+
+
+
+
+/* Styles for the container wrapping the Quotes component */
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50vh; /* Adjust this value based on your layout */
+}
+
+/* Styles for the quotes container */
+.quotes-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 30vh;
+  overflow: hidden;
+  justify-content: center;
+}
+
+/* Styles for the quote wrapper */
+.quote-wrapper {
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 10px;
+  padding: 30px;
+  /* max-width: 500px; */
+  text-align: center;
+}
+
+/* Styles for the quote text */
+.quote-text {
+  font-size: 1.5rem;
+  margin-bottom: 20px;
+}
\ No newline at end of file

From 5ed1d8f8eda9d21ce6b599020ec029707729d184 Mon Sep 17 00:00:00 2001
From: MD SHAHIL <96812916+Shahil093@users.noreply.github.com>
Date: Tue, 18 Jul 2023 16:10:28 +0530
Subject: [PATCH 2/3] Update Home.module.css

Signed-off-by: MD SHAHIL <96812916+Shahil093@users.noreply.github.com>
---
 styles/Home.module.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/styles/Home.module.css b/styles/Home.module.css
index ed5d48c9..82ae2fb9 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -323,4 +323,5 @@ input:focus {
 .quote-text {
   font-size: 1.5rem;
   margin-bottom: 20px;
-}
\ No newline at end of file
+}
+

From 77506e629c67a02f3567d89193a396b49386730a Mon Sep 17 00:00:00 2001
From: MD SHAHIL <96812916+Shahil093@users.noreply.github.com>
Date: Wed, 19 Jul 2023 10:32:44 +0530
Subject: [PATCH 3/3] Update package.json

Signed-off-by: MD SHAHIL <96812916+Shahil093@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3c09ed02..40f2479a 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "react-markdown": "^8.0.7",
     "react-vanilla-tilt": "^1.0.0",
     "sass": "^1.45.1",
-    "styled-components": "^5.3.11",
+    "styled-components": "^5.3.6",
     "swiper": "^9.3.2",
     "yarn": "^1.22.19"
   },