From f690e96319bb40e9dfa6ea5aa9bcf030501f5a0c Mon Sep 17 00:00:00 2001
From: Ali <ali.abbasi.1382.shiraz@gmail.com>
Date: Sat, 26 Oct 2024 01:58:22 +0330
Subject: [PATCH 1/3] feat:almost done but just got the github limit api error
 :)

---
 package.json                   |  2 +
 pnpm-lock.yaml                 | 82 ++++++++++++++++++++++++++++++++++
 src/Assets/css/index.css       |  6 +++
 src/Views/Footer/Footer.tsx    | 15 ++-----
 src/Views/Home/DevsTought.tsx  | 50 +++++++++++++++++++++
 src/Views/Home/Home.tsx        |  3 ++
 src/Views/Home/Slidermaker.tsx | 50 +++++++++++++++++++++
 7 files changed, 196 insertions(+), 12 deletions(-)
 create mode 100644 src/Views/Home/DevsTought.tsx
 create mode 100644 src/Views/Home/Slidermaker.tsx

diff --git a/package.json b/package.json
index e5f5a66..8f2effb 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@reduxjs/toolkit": "^2.3.0",
+    "axios": "^1.7.7",
     "framer-motion": "^11.5.4",
     "json-server": "1.0.0-beta.1",
     "path": "^0.12.7",
@@ -27,6 +28,7 @@
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.25.1",
+    "swiper": "^11.1.14",
     "typescript-eslint": "^7.17.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 334d1c9..a5fb715 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       '@reduxjs/toolkit':
         specifier: ^2.3.0
         version: 2.3.0(react-redux@9.1.2(@types/react@18.3.5)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
+      axios:
+        specifier: ^1.7.7
+        version: 1.7.7
       framer-motion:
         specifier: ^11.5.4
         version: 11.5.4(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -50,6 +53,9 @@ importers:
       react-router-dom:
         specifier: ^6.25.1
         version: 6.26.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      swiper:
+        specifier: ^11.1.14
+        version: 11.1.14
       typescript-eslint:
         specifier: ^7.17.0
         version: 7.18.0(eslint@8.57.0)(typescript@5.6.2)
@@ -2074,6 +2080,9 @@ packages:
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
   autoprefixer@10.4.20:
     resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2089,6 +2098,9 @@ packages:
     resolution: {integrity: sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==}
     engines: {node: '>=4'}
 
+  axios@1.7.7:
+    resolution: {integrity: sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==}
+
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
@@ -2187,6 +2199,10 @@ packages:
   color2k@2.0.3:
     resolution: {integrity: sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -2278,6 +2294,10 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
@@ -2584,6 +2604,15 @@ packages:
     resolution: {integrity: sha512-QFaHbhv9WPUeLYBDe/PAuLKJ4Dd9OPvKs9xZBr3yLXnUrDNaVXKu2baDBXe3naPY30hgHYSsf2JW4jzas2mDEQ==}
     engines: {node: '>=10'}
 
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
@@ -2591,6 +2620,10 @@ packages:
     resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
 
+  form-data@4.0.1:
+    resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
+    engines: {node: '>= 6'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -3015,6 +3048,14 @@ packages:
     resolution: {integrity: sha512-b+6KYJw+DwQjk24qCUuq+lZvRXDpXJ02qsllKgKaDurHpQ0v7D5op9VAkdYM/pXRhFeh7uLYHmnwFnYvdXGa3A==}
     engines: {node: '>=12.4'}
 
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
   mime@4.0.4:
     resolution: {integrity: sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==}
     engines: {node: '>=16'}
@@ -3247,6 +3288,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -3580,6 +3624,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  swiper@11.1.14:
+    resolution: {integrity: sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==}
+    engines: {node: '>= 4.7.0'}
+
   synckit@0.9.1:
     resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -6246,6 +6294,8 @@ snapshots:
 
   ast-types-flow@0.0.8: {}
 
+  asynckit@0.4.0: {}
+
   autoprefixer@10.4.20(postcss@8.4.47):
     dependencies:
       browserslist: 4.23.3
@@ -6262,6 +6312,14 @@ snapshots:
 
   axe-core@4.10.0: {}
 
+  axios@1.7.7:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.1
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   axobject-query@4.1.0: {}
 
   babel-plugin-macros@3.1.0:
@@ -6395,6 +6453,10 @@ snapshots:
 
   color2k@2.0.3: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@4.1.1: {}
 
   compute-scroll-into-view@3.0.3: {}
@@ -6500,6 +6562,8 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  delayed-stream@1.0.0: {}
+
   detect-node-es@1.1.0: {}
 
   didyoumean@1.2.2: {}
@@ -6963,6 +7027,8 @@ snapshots:
     dependencies:
       tslib: 2.7.0
 
+  follow-redirects@1.15.9: {}
+
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -6972,6 +7038,12 @@ snapshots:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  form-data@4.0.1:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+
   fraction.js@4.3.7: {}
 
   framer-motion@11.5.4(@emotion/is-prop-valid@1.3.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
@@ -7371,6 +7443,12 @@ snapshots:
 
   milliparsec@2.3.0: {}
 
+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
   mime@4.0.4: {}
 
   minimatch@3.1.2:
@@ -7573,6 +7651,8 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  proxy-from-env@1.1.0: {}
+
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -7944,6 +8024,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  swiper@11.1.14: {}
+
   synckit@0.9.1:
     dependencies:
       '@pkgr/core': 0.1.1
diff --git a/src/Assets/css/index.css b/src/Assets/css/index.css
index 4448281..412b762 100644
--- a/src/Assets/css/index.css
+++ b/src/Assets/css/index.css
@@ -6,6 +6,12 @@
 @tailwind components;
 @tailwind utilities;
 
+.swiper-slide {
+  display: flex; /* Center content within the slide */
+  align-items: center; /* Vertically center */
+  justify-content: center; /* Horizontally center */
+  height: 100%; /* Make slides fill the container height */
+}
 a {
   padding: 0;
 }
diff --git a/src/Views/Footer/Footer.tsx b/src/Views/Footer/Footer.tsx
index d3827b3..eb91636 100644
--- a/src/Views/Footer/Footer.tsx
+++ b/src/Views/Footer/Footer.tsx
@@ -2,14 +2,11 @@ import "@public/logo/logo.svg";
 import IdMaker from "./Footer_id_maker";
 import { useTranslation } from "react-i18next";
 
-// Just for test the store
-import { useAppSelector, useAppDispatch } from "@/Hooks/hook";
-import { increment, decrement } from "@/State/example";
+
 
 const Footer = () => {
   // just for test
-  const count = useAppSelector((state: any) => state.counter.value);
-  const dispatch = useAppDispatch();
+
 
   const { t } = useTranslation();
   const developers = [
@@ -28,13 +25,7 @@ const Footer = () => {
   ];
   return (
     <>
-      <h1 className="p-4 hover:cursor-pointer" onClick={() => dispatch(increment())}>
-        increment
-      </h1>
-      <h3>{count}</h3>
-      <h2 className="p-4 hover:cursor-pointer" onClick={() => dispatch(decrement())}>
-        decrement
-      </h2>
+      
       <footer className="w-full h-96 bg-coffee-brown lg:h-72">
         <div className="h-full w-full flex px-10 py-6 lg:px-6 lg:py-4 md:px-4   footers">
           <div className="flex gap-5 justify-center md:gap-2">
diff --git a/src/Views/Home/DevsTought.tsx b/src/Views/Home/DevsTought.tsx
new file mode 100644
index 0000000..6082558
--- /dev/null
+++ b/src/Views/Home/DevsTought.tsx
@@ -0,0 +1,50 @@
+// Import Swiper React components and styles
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/navigation";
+
+// Import necessary Swiper modules
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+import Slidermaker from "./Slidermaker";
+import { ArrowBackIcon, ArrowForwardIcon } from "@chakra-ui/icons";
+
+const DevsToughtSlider = () => {
+  return (
+    <div className="custom-swiper-container flex justify-center items-center relative">
+      {/* Custom navigation buttons positioned around the slides */}
+      <button className="custom-prev p-3 rounded-full absolute bg-gray-200 z-10" style={{ left: "5%", top: "50%", transform: "translateY(-50%)" }}>
+        <ArrowBackIcon boxSize={6} />
+      </button>
+
+      <Swiper
+        style={{ height: "250px", width: "50%" }}
+        modules={[Navigation, Pagination, Autoplay]}
+        spaceBetween={5}
+        slidesPerView={1}
+        navigation={{
+          nextEl: ".custom-next",
+          prevEl: ".custom-prev",
+        }}
+        pagination={{ clickable: true }}
+        autoplay={{ delay: 3000 }}
+        loop
+      >
+        <SwiperSlide>
+          <Slidermaker username="AliAbbasiS" thought="Coding is my superpower!" />
+        </SwiperSlide>
+        <SwiperSlide>
+          <Slidermaker username="saeed0920" thought="Building the future, one line at a time." />
+        </SwiperSlide>
+        <SwiperSlide>
+          <Slidermaker username="RezaNezhadSalari" thought="Innovating through code." />
+        </SwiperSlide>
+      </Swiper>
+
+      <button className="custom-next p-3 rounded-full absolute bg-gray-200 z-10" style={{ right: "5%", top: "50%", transform: "translateY(-50%)" }}>
+        <ArrowForwardIcon boxSize={6} />
+      </button>
+    </div>
+  );
+};
+
+export default DevsToughtSlider;
diff --git a/src/Views/Home/Home.tsx b/src/Views/Home/Home.tsx
index 10673e4..1b0afaa 100644
--- a/src/Views/Home/Home.tsx
+++ b/src/Views/Home/Home.tsx
@@ -7,6 +7,8 @@ import Footer from "@views/Footer/Footer";
 import AboutBeans from "./AboutBeans";
 import AdSection from "./Ad";
 
+import DevsTought from "./DevsTought";
+
 function Home() {
   return (
     <div className="flex flex-col">
@@ -21,6 +23,7 @@ function Home() {
         <VersusCoffee />
         <AdSection />
         <AboutBeans />
+        <DevsTought/>
       </div>
       <Footer />
     </div>
diff --git a/src/Views/Home/Slidermaker.tsx b/src/Views/Home/Slidermaker.tsx
new file mode 100644
index 0000000..b2c1c80
--- /dev/null
+++ b/src/Views/Home/Slidermaker.tsx
@@ -0,0 +1,50 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+type UserData = {
+  avatar_url: string;
+  login: string; 
+};
+
+const Slidermaker = ({ username, thought = "" }: { username: string; thought?: string }) => {
+  const [userData, setUserData] = useState<UserData | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!username) {
+      setError("No username provided.");
+      return;
+    }
+
+    const fetchUserData = async () => {
+      try {
+        const res = await axios.get(`https://api.github.com/users/${username}`);
+        setUserData(res.data);
+        setLoading(false);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to fetch user data.");
+        setLoading(false);
+      }
+    };
+
+    fetchUserData();
+  }, [username]);
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error: {error}</p>;
+
+  return (
+    <div className="w-full h-full bg-gray-800 text-white p-5 rounded-md flex flex-col items-center">
+      {userData && (
+        <>
+          <img src={userData.avatar_url} alt={`${userData.login}'s profile`} className="w-24 h-24 rounded-full mb-4" />
+          <h2 className="text-lg font-bold mb-2">{userData.login}</h2>
+          {thought && <p className="text-sm italic mt-2">{thought}</p>}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Slidermaker;

From f6171226e64f14a2a8a811ded67bf82c20c9ab35 Mon Sep 17 00:00:00 2001
From: Ali <ali.abbasi.1382.shiraz@gmail.com>
Date: Sun, 27 Oct 2024 00:10:17 +0330
Subject: [PATCH 2/3] feat : Final

---
 data/Coffee.json               | 52 ++++++++++++++++++++++++++++++++++
 src/Views/Home/AboutCoffee.tsx |  4 ++-
 src/Views/Home/DevsTought.tsx  | 14 ++++-----
 src/Views/Home/Slidermaker.tsx |  4 +--
 4 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/data/Coffee.json b/data/Coffee.json
index 6f432d9..d5e9f42 100644
--- a/data/Coffee.json
+++ b/data/Coffee.json
@@ -182,5 +182,57 @@
       "coffee2": "Flat White",
       "comparisonDescription": "Macchiato is a strong coffee drink made with espresso and a small amount of milk, while Flat White consists of espresso topped with a thin layer of steamed milk. Macchiato has a high caffeine content and a smaller serving size of 30-60ml, whereas Flat White has a medium caffeine content and a serving size of 180ml."
     }
+  ],"coffeebeans":[
+    {
+      "id": 1,
+      "name": "Arabica",
+      "description": "Arabica is the most widely consumed coffee bean variety, known for its smooth, mild, and nuanced flavor profile. It often has sweet, fruity, and floral notes with a hint of acidity, which can range from crisp to wine-like. Arabica beans are grown at high altitudes, typically above 600 meters, and are more susceptible to pests and diseases, making them more expensive. They account for about 60-70% of global coffee production."
+    },
+    {
+      "id": 2,
+      "name": "Robusta",
+      "description": "Robusta beans are known for their strong, bold, and bitter flavor, often described as earthy or nutty with a hint of chocolate. They have nearly double the caffeine content of Arabica, giving them a harsher, more intense taste. Robusta is easier to grow, resistant to pests and diseases, and thrives at lower altitudes, which makes it more affordable. It is commonly used in espresso blends for its crema and in instant coffee."
+    },
+    {
+      "id": 3,
+      "name": "Liberica",
+      "description": "Liberica is a rare variety of coffee bean, known for its unique smoky, woody, and floral flavors, with a somewhat fruity undertone. The beans themselves are irregular in size and shape, which contributes to their distinctive aroma and taste. Liberica is mainly grown in Southeast Asia, particularly in the Philippines, and represents only a small percentage of the world’s coffee production. It is considered an acquired taste due to its bold, unusual flavor profile."
+    },
+    {
+      "id": 4,
+      "name": "Excelsa",
+      "description": "Excelsa is a variety of Liberica, but it has a very different flavor profile, often described as tart and fruity with a more complex, layered taste. It is used primarily in coffee blends to add depth and a mysterious twist to the flavor. Excelsa beans are grown in Southeast Asia and are relatively rare. The beans are smaller and rounder compared to other varieties, and they are often roasted dark to highlight their fruity and wine-like characteristics."
+    },
+    {
+      "id": 5,
+      "name": "Maragogipe",
+      "description": "Maragogipe, also known as 'Elephant Bean' due to its unusually large size, is a mutation of the Arabica bean. It has a mild and delicate flavor with a smooth body and low acidity, often characterized by floral and fruity notes. Maragogipe beans are rare and highly prized, especially in regions like Central and South America, where they are primarily grown."
+    },
+    {
+      "id": 6,
+      "name": "Bourbon",
+      "description": "Bourbon is a variety of Arabica that is cherished for its rich, sweet flavor profile. It often features complex notes of caramel, chocolate, and red fruit. Bourbon beans are known for their high-quality yield and are grown in countries like Brazil, Rwanda, and Burundi. The plant is more susceptible to diseases, which makes its production limited and more costly."
+    },
+    {
+      "id": 7,
+      "name": "Typica",
+      "description": "Typica is one of the oldest and most foundational Arabica varieties. It is known for producing high-quality coffee with clean, sweet flavors, often accompanied by fruity or floral notes. While Typica plants have lower yields compared to other varieties, they are still sought after for their excellent cup quality, particularly in specialty coffee markets."
+    },
+    {
+      "id": 8,
+      "name": "Catuai",
+      "description": "Catuai is a hybrid coffee variety derived from the Mundo Novo and Caturra plants. It is known for its high yields and resistance to wind and weather conditions. Catuai beans typically have a balanced flavor profile, with moderate acidity and sweetness, and are commonly grown in Brazil and Central America."
+    },
+    {
+      "id": 9,
+      "name": "SL28",
+      "description": "SL28 is a coffee variety known for its drought resistance and its ability to produce exceptionally high-quality beans. Originating in Kenya, SL28 is prized for its bright acidity, juicy fruit notes, and rich body. The flavor is often complex, with citrus, berry, and wine-like characteristics. It is a favorite among specialty coffee producers."
+    },
+    {
+      "id": 10,
+      "name": "Geisha",
+      "description": "Geisha (or Gesha) is one of the most expensive and sought-after coffee varieties, known for its exceptional and complex flavor profile. Originating from Ethiopia and now grown in countries like Panama, Geisha beans are famous for their floral aroma, vibrant acidity, and unique tasting notes that include jasmine, tropical fruit, and bergamot. Geisha beans have won numerous awards in coffee competitions and are considered a luxury among coffee connoisseurs."
+    }
   ]
+  
 }
diff --git a/src/Views/Home/AboutCoffee.tsx b/src/Views/Home/AboutCoffee.tsx
index e56b4fd..ab7827c 100644
--- a/src/Views/Home/AboutCoffee.tsx
+++ b/src/Views/Home/AboutCoffee.tsx
@@ -9,6 +9,8 @@ interface CoffeeBean {
 }
 
 const AboutCoffee = () => {
+  const BASE_URL = process.env.BASE_URL;
+
   const [coffeeData, setCoffeeData] = useState<CoffeeBean[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
@@ -17,7 +19,7 @@ const AboutCoffee = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const res = await fetch("/data/CoffeeBeansTypes.json");
+        const res = await fetch(`${BASE_URL}/coffeebeans`);
         if (!res.ok) {
           throw new Error("Network response was not ok");
         }
diff --git a/src/Views/Home/DevsTought.tsx b/src/Views/Home/DevsTought.tsx
index 6082558..1b2c19e 100644
--- a/src/Views/Home/DevsTought.tsx
+++ b/src/Views/Home/DevsTought.tsx
@@ -12,7 +12,7 @@ const DevsToughtSlider = () => {
   return (
     <div className="custom-swiper-container flex justify-center items-center relative">
       {/* Custom navigation buttons positioned around the slides */}
-      <button className="custom-prev p-3 rounded-full absolute bg-gray-200 z-10" style={{ left: "5%", top: "50%", transform: "translateY(-50%)" }}>
+      <button className="custom-prev p-3 rounded-full absolute bg-Low_Yellow_border  z-10" style={{ left: "5%", top: "50%", transform: "translateY(-50%)" }}>
         <ArrowBackIcon boxSize={6} />
       </button>
 
@@ -26,22 +26,22 @@ const DevsToughtSlider = () => {
           prevEl: ".custom-prev",
         }}
         pagination={{ clickable: true }}
-        autoplay={{ delay: 3000 }}
+        autoplay={{ delay: 5000 }}
         loop
       >
         <SwiperSlide>
-          <Slidermaker username="AliAbbasiS" thought="Coding is my superpower!" />
+          <Slidermaker username="AliAbbasiS" thought="Coffee should taste like a wake-up slap with a side of attitude—bitter, bold, and just caffeinated enough to make you feel like a superhero... or at least functional" />
         </SwiperSlide>
         <SwiperSlide>
-          <Slidermaker username="saeed0920" thought="Building the future, one line at a time." />
+          <Slidermaker username="saeed0920" thought="A good coffee should result from extracting 36 grams from 18 grams of coffee beans, all within 30 seconds" />
         </SwiperSlide>
         <SwiperSlide>
-          <Slidermaker username="RezaNezhadSalari" thought="Innovating through code." />
+          <Slidermaker username="RezaNezhadSalari" thought="Black Ivory Coffee is created through a process whereby coffee cherries are naturally refined by Thai elephants in the remote rural province of Surin, Thailand" />
         </SwiperSlide>
       </Swiper>
 
-      <button className="custom-next p-3 rounded-full absolute bg-gray-200 z-10" style={{ right: "5%", top: "50%", transform: "translateY(-50%)" }}>
-        <ArrowForwardIcon boxSize={6} />
+      <button className="custom-next p-3 rounded-full absolute bg-Low_Yellow_border z-10" style={{ right: "5%", top: "50%", transform: "translateY(-50%)" }}>
+        <ArrowForwardIcon className="" boxSize={6} />
       </button>
     </div>
   );
diff --git a/src/Views/Home/Slidermaker.tsx b/src/Views/Home/Slidermaker.tsx
index b2c1c80..9256008 100644
--- a/src/Views/Home/Slidermaker.tsx
+++ b/src/Views/Home/Slidermaker.tsx
@@ -35,12 +35,12 @@ const Slidermaker = ({ username, thought = "" }: { username: string; thought?: s
   if (error) return <p>Error: {error}</p>;
 
   return (
-    <div className="w-full h-full bg-gray-800 text-white p-5 rounded-md flex flex-col items-center">
+    <div className="w-full h-full bg-coffee-brown text-white p-5 rounded-md flex flex-col items-center">
       {userData && (
         <>
           <img src={userData.avatar_url} alt={`${userData.login}'s profile`} className="w-24 h-24 rounded-full mb-4" />
           <h2 className="text-lg font-bold mb-2">{userData.login}</h2>
-          {thought && <p className="text-sm italic mt-2">{thought}</p>}
+          {thought && <p className="text-md  text-center italic mt-2">{thought}</p>}
         </>
       )}
     </div>

From f78243eb9e04ceb6165246c43108381be2eb9b8e Mon Sep 17 00:00:00 2001
From: Ali <ali.abbasi.1382.shiraz@gmail.com>
Date: Sun, 27 Oct 2024 00:16:52 +0330
Subject: [PATCH 3/3] final reza fuck you

---
 data/Coffee.json               |  4 ++--
 src/Views/Footer/Footer.tsx    |  4 ----
 src/Views/Home/AboutCoffee.tsx |  2 +-
 src/Views/Home/DevsTought.tsx  | 25 ++++++++++++++++++++-----
 src/Views/Home/Home.tsx        |  2 +-
 src/Views/Home/Slidermaker.tsx |  2 +-
 6 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/data/Coffee.json b/data/Coffee.json
index d5e9f42..093845f 100644
--- a/data/Coffee.json
+++ b/data/Coffee.json
@@ -182,7 +182,8 @@
       "coffee2": "Flat White",
       "comparisonDescription": "Macchiato is a strong coffee drink made with espresso and a small amount of milk, while Flat White consists of espresso topped with a thin layer of steamed milk. Macchiato has a high caffeine content and a smaller serving size of 30-60ml, whereas Flat White has a medium caffeine content and a serving size of 180ml."
     }
-  ],"coffeebeans":[
+  ],
+  "coffeebeans": [
     {
       "id": 1,
       "name": "Arabica",
@@ -234,5 +235,4 @@
       "description": "Geisha (or Gesha) is one of the most expensive and sought-after coffee varieties, known for its exceptional and complex flavor profile. Originating from Ethiopia and now grown in countries like Panama, Geisha beans are famous for their floral aroma, vibrant acidity, and unique tasting notes that include jasmine, tropical fruit, and bergamot. Geisha beans have won numerous awards in coffee competitions and are considered a luxury among coffee connoisseurs."
     }
   ]
-  
 }
diff --git a/src/Views/Footer/Footer.tsx b/src/Views/Footer/Footer.tsx
index eb91636..a11a400 100644
--- a/src/Views/Footer/Footer.tsx
+++ b/src/Views/Footer/Footer.tsx
@@ -2,12 +2,9 @@ import "@public/logo/logo.svg";
 import IdMaker from "./Footer_id_maker";
 import { useTranslation } from "react-i18next";
 
-
-
 const Footer = () => {
   // just for test
 
-
   const { t } = useTranslation();
   const developers = [
     {
@@ -25,7 +22,6 @@ const Footer = () => {
   ];
   return (
     <>
-      
       <footer className="w-full h-96 bg-coffee-brown lg:h-72">
         <div className="h-full w-full flex px-10 py-6 lg:px-6 lg:py-4 md:px-4   footers">
           <div className="flex gap-5 justify-center md:gap-2">
diff --git a/src/Views/Home/AboutCoffee.tsx b/src/Views/Home/AboutCoffee.tsx
index ab7827c..12caf67 100644
--- a/src/Views/Home/AboutCoffee.tsx
+++ b/src/Views/Home/AboutCoffee.tsx
@@ -33,7 +33,7 @@ const AboutCoffee = () => {
     };
 
     fetchData();
-  }, []);
+  }, [BASE_URL]);
 
   const handleNext = () => {
     setCurrentIndex((prevIndex) => (prevIndex + 1) % coffeeData.length);
diff --git a/src/Views/Home/DevsTought.tsx b/src/Views/Home/DevsTought.tsx
index 1b2c19e..16391b7 100644
--- a/src/Views/Home/DevsTought.tsx
+++ b/src/Views/Home/DevsTought.tsx
@@ -12,7 +12,10 @@ const DevsToughtSlider = () => {
   return (
     <div className="custom-swiper-container flex justify-center items-center relative">
       {/* Custom navigation buttons positioned around the slides */}
-      <button className="custom-prev p-3 rounded-full absolute bg-Low_Yellow_border  z-10" style={{ left: "5%", top: "50%", transform: "translateY(-50%)" }}>
+      <button
+        className="custom-prev p-3 rounded-full absolute bg-Low_Yellow_border  z-10"
+        style={{ left: "5%", top: "50%", transform: "translateY(-50%)" }}
+      >
         <ArrowBackIcon boxSize={6} />
       </button>
 
@@ -30,17 +33,29 @@ const DevsToughtSlider = () => {
         loop
       >
         <SwiperSlide>
-          <Slidermaker username="AliAbbasiS" thought="Coffee should taste like a wake-up slap with a side of attitude—bitter, bold, and just caffeinated enough to make you feel like a superhero... or at least functional" />
+          <Slidermaker
+            username="AliAbbasiS"
+            thought="Coffee should taste like a wake-up slap with a side of attitude—bitter, bold, and just caffeinated enough to make you feel like a superhero... or at least functional"
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slidermaker username="saeed0920" thought="A good coffee should result from extracting 36 grams from 18 grams of coffee beans, all within 30 seconds" />
+          <Slidermaker
+            username="saeed0920"
+            thought="A good coffee should result from extracting 36 grams from 18 grams of coffee beans, all within 30 seconds"
+          />
         </SwiperSlide>
         <SwiperSlide>
-          <Slidermaker username="RezaNezhadSalari" thought="Black Ivory Coffee is created through a process whereby coffee cherries are naturally refined by Thai elephants in the remote rural province of Surin, Thailand" />
+          <Slidermaker
+            username="RezaNezhadSalari"
+            thought="Black Ivory Coffee is created through a process whereby coffee cherries are naturally refined by Thai elephants in the remote rural province of Surin, Thailand"
+          />
         </SwiperSlide>
       </Swiper>
 
-      <button className="custom-next p-3 rounded-full absolute bg-Low_Yellow_border z-10" style={{ right: "5%", top: "50%", transform: "translateY(-50%)" }}>
+      <button
+        className="custom-next p-3 rounded-full absolute bg-Low_Yellow_border z-10"
+        style={{ right: "5%", top: "50%", transform: "translateY(-50%)" }}
+      >
         <ArrowForwardIcon className="" boxSize={6} />
       </button>
     </div>
diff --git a/src/Views/Home/Home.tsx b/src/Views/Home/Home.tsx
index 1b0afaa..e8d8561 100644
--- a/src/Views/Home/Home.tsx
+++ b/src/Views/Home/Home.tsx
@@ -23,7 +23,7 @@ function Home() {
         <VersusCoffee />
         <AdSection />
         <AboutBeans />
-        <DevsTought/>
+        <DevsTought />
       </div>
       <Footer />
     </div>
diff --git a/src/Views/Home/Slidermaker.tsx b/src/Views/Home/Slidermaker.tsx
index 9256008..ac96fa3 100644
--- a/src/Views/Home/Slidermaker.tsx
+++ b/src/Views/Home/Slidermaker.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 
 type UserData = {
   avatar_url: string;
-  login: string; 
+  login: string;
 };
 
 const Slidermaker = ({ username, thought = "" }: { username: string; thought?: string }) => {