Merge pull request #105 from ReCoded-Org/i91-add_slider_to_about_us_s…

…ection

I91 add slider to about us section

src/components/AboutUs/AboutUs.css

@@ -0,0 +1,20 @@
+.diagonal-box-about {
+	/* background-image: linear-gradient(45deg, #6303B1, #ff0099); */
+  transform: skewY(3deg);
+} 
+.content-about { 	
+	max-width: 80%;
+    margin: 0 auto; 
+    transform: skewY(-3deg);
+}
+
+#slider-wrapper {
+  display: flex !important;
+  align-items: center !important;
+}
+
+@media only screen and (max-width: 1100px) {
+  #slider-wrapper  {
+      flex-direction: column !important;
+      }
+  }

src/components/AboutUs/AboutUs.jsx

@@ -1,34 +1,78 @@
-import aboutus from "src/assets/AboutUs.jpg";
+import Slider from "react-slick";
+import "./AboutUs.css";
+import aboutUsOne from "src/assets/AboutUs-1.jpg";
+import aboutUsTwo from "src/assets/AboutUs-2.jpg";
+import aboutUsThree from "src/assets/AboutUs-3.jpg";
+import SliderArrow from "./SliderArrow/SliderArrow";
 import { useTranslation } from "react-i18next";
 
 function AboutUs() {
+    const settings = {
+        arrows: true,
+        dots: false,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        autoplaySpeed: 3000,
+        pauseOnHover: true,
+        nextArrow: <SliderArrow leftOrRight={"left"} />,
+        prevArrow: <SliderArrow leftOrRight={"right"} />,
+    };
+
     const [t] = useTranslation();
+    const ImgMap = {
+        aboutUsOne: aboutUsOne,
+        aboutUsTwo: aboutUsTwo,
+        aboutUsThree: aboutUsThree,
+    };
 
     return (
-        <div
-            id='about'
-            className='about-us relative h-screen items-center overflow-hidden px-8 sm:h-screen sm:px-12 lg:flex lg:h-fit lg:justify-between lg:px-36 lg:pt-10 lg:pb-32'
-        >
-            <div className='absolute left-0 bottom-16 -z-50 h-full w-full skew-y-3 bg-blue-light'></div>
-
-            {/* Text div */}
-            <div className='flex flex-col text-white sm:text-center lg:w-2/4 lg:max-w-md '>
-                <h1 className='transform self-center py-10 font-quicksand text-5xl font-bold lg:self-start lg:py-0'>
-                    {t("home.aboutUs.title")}
-                </h1>
-                <p className='break-normal pb-10 text-justify font-SourceSansPro text-lg md:pb-0 md:pt-6 md:text-xl'>
-                    {t(`home.aboutUs.texts.${[0]}.description`)}
-                </p>
+        <div flex flex-col>
+            <div className=' w-full bg-blue-light p-3'>
+                <p className='text-lg text-blue-light'>1</p>
+            </div>
+            <div className=' absolute w-full bg-blue-light p-3'>
+                <p className='text-lg text-blue-light'>1</p>
             </div>
+            <div className='diagonal-box-about flex flex-col bg-blue-light '>
+                <div className='content-about'>
+                    <h2 className='mt-14 text-center font-quicksand text-5xl font-bold text-white md:text-center lg:pl-16 lg:text-left'>
+                        {t("home.aboutUs.title")}
+                    </h2>
+                    <Slider {...settings}>
+                        {t("home.aboutUs.texts", { returnObjects: true }).map(
+                            function (item) {
+                                return (
+                                    <div key={item}>
+                                        {/* Slider wrapper */}
+                                        <div
+                                            className='mx-8 font-quicksand text-white'
+                                            id='slider-wrapper'
+                                        >
+                                            {/* Text Wrapper */}
+                                            <div className='mt-8 text-justify sm:mx-0 sm:w-10/12 md:w-10/12 md:break-normal lg:mr-8 lg:w-2/4 lg:px-6 lg:pl-14'>
+                                                <p className='pb-12 font-SourceSansPro text-lg text-white md:text-xl'>
+                                                    {item.description}
+                                                </p>
+                                            </div>
 
-            {/* Image div */}
-            <div className='relative mt-8 ml-12 flex w-10/12 sm:mt-8 md:mt-20 md:ml-16 md:w-3/4 lg:w-2/4 lg:flex-row-reverse'>
-                <img
-                    className='sm:2/4 ml-7 w-3/5 rounded-full border-4 border-gray md:mr-20 md:w-7/12 md:border-8 xl:mr-44'
-                    src={aboutus}
-                    alt={"a drawing of a studying kid"}
-                />
-                <div className='absolute right-6 -z-10 h-full w-3/5 rounded-full bg-blue-dark p-1 md:w-7/12'></div>
+                                            <div className='relative my-10 flex w-10/12 md:ml-32 md:mt-8 md:w-3/5 md:justify-center lg:my-12 lg:ml-10 lg:w-2/4'>
+                                                <img
+                                                    className='w-3/5 rounded-full border-4 border-gray sm:mr-16 md:ml-7 md:mr-72 md:w-11/12 md:border-8 lg:mr-20 lg:w-7/12'
+                                                    src={ImgMap[item.image]}
+                                                    alt={item.alt}
+                                                />
+                                                <div className='absolute right-6 -z-10 h-full w-3/5 rounded-full bg-blue-dark md:right-6 md:w-11/12 lg:w-7/12'></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            }
+                        )}
+                    </Slider>
+                </div>
             </div>
         </div>
     );

src/components/AboutUs/SliderArrow/SliderArrow.css

@@ -0,0 +1,3 @@
+.arrow {
+  cursor: pointer;
+}

src/components/AboutUs/SliderArrow/SliderArrow.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import leftArrowSvg from "./../../../assets/chevron-left-white.svg";
+import rightArrowSvg from "./../../../assets/chevron-right-white.svg";
+import './SliderArrow.css';
+
+const SliderArrow = ({ leftOrRight, onClick }) => {
+  return (
+    <div className="arrow">
+      <img
+        src={leftOrRight === "left" ? rightArrowSvg : leftArrowSvg}
+        onClick={onClick}
+        style={
+          leftOrRight === "left"
+            ? { marginLeft: "1rem" }
+            : { marginRight: "1rem" }
+        }
+        alt="Carousel Arrow"
+      />
+    </div>
+  );
+};
+
+export default SliderArrow;

src/components/OurValues/OurValues.jsx

@@ -16,7 +16,7 @@ function OurValues() {
         slidesToShow: 1,
         slidesToScroll: 1,
         autoplay: true,
-        autoplaySpeed: 2000,
+        autoplaySpeed: 3000,
         pauseOnHover: true,
         nextArrow: <SliderArrow leftOrRight={"left"} />,
         prevArrow: <SliderArrow leftOrRight={"right"} />,

src/locales/ar/translation.json

@@ -11,15 +11,21 @@
             "texts": [
                 {
                     "id": 1,
-                    "description": "ريتش هي منصة تربط ما بين المعلمين المتطوعين والمنظمات غير الربحية المعنية بالأطفال اللاجئين حول أنحاء العالم."
+                    "description": "ريتش هي منصة تربط ما بين المعلمين المتطوعين والمنظمات غير الربحية المعنية بالأطفال اللاجئين حول أنحاء العالم",
+                    "image": "aboutUsOne",
+                    "alt": "Social Sustainability Graphic"
                 },
                 {
                     "id": 2,
-                    "description": "لسوء الحظ، في ظل ظروف قاسية يُحرم العديد من الأطفال من حقوقهم الأساسية بما في ذلك التعليم. نظراً لهذا، سيكون من المفيد للغاية ربط هؤلاء الأطفال المحرومين بالمعلمين المتطوعين الذين يمكنهم تعليمهم مهارات أساسية وهامة مثل تعلم اللغات المحلية أو أساسيات البرمجة"
+                    "description": "لسوء الحظ، في ظل ظروف قاسية يُحرم العديد من الأطفال من حقوقهم الأساسية بما في ذلك التعليم. نظراً لهذا، سيكون من المفيد للغاية ربط هؤلاء الأطفال المحرومين بالمعلمين المتطوعين الذين يمكنهم تعليمهم مهارات أساسية وهامة مثل تعلم اللغات المحلية أو أساسيات البرمجة",
+                    "image": "aboutUsTwo",
+                    "alt": "Education Graphic"
                 },
                 {
                     "id": 3,
-                    "description": "إن امتلاك هذا النوع من المهارات يمكن أن يفتح أمام هؤلاء الأطفال العديد من الفرص في المستقبل التي يمكن أن تغير حياتهم على نحو إيجابي. وبالتالي، فإن الهدف من هذه المنصة هو تزويد هؤلاء الأطفال بمهارات أساسية تقوم بالتطوير من قدراتهم وضمان حصولهم على مستقبل أفضل"
+                    "description": "إن امتلاك هذا النوع من المهارات يمكن أن يفتح أمام هؤلاء الأطفال العديد من الفرص في المستقبل التي يمكن أن تغير حياتهم على نحو إيجابي. وبالتالي، فإن الهدف من هذه المنصة هو تزويد هؤلاء الأطفال بمهارات أساسية تقوم بالتطوير من قدراتهم وضمان حصولهم على مستقبل أفضل",
+                    "image": "aboutUsThree",
+                    "alt": "Empathy Graphic"
                 }
             ]
         },

src/locales/en/translation.json

@@ -11,15 +11,21 @@
             "texts": [
                 {
                     "id": 1,
-                    "description": "Reach is a platform that connects between volunteer teachers and NGOs concerned with refugee kids around the world."
+                    "description": "Reach is a platform that connects between volunteer teachers and NGOs concerned with refugee kids around the world.",
+                    "image": "aboutUsOne",
+                    "alt": "Social Sustainability Graphic"
                 },
                 {
                     "id": 2,
-                    "description": "Unfortunately, under harsh conditions many children get deprived from their basic rights including education. From this point of view, it would be quite helpful to connect these affected children with volunteer teachers that can teach them important skills such as learning local languages or basic coding."
+                    "description": "Unfortunately, under harsh conditions many children get deprived from their basic rights including education. From this point of view, it would be quite helpful to connect these affected children with volunteer teachers that can teach them important skills such as learning local languages or basic coding.",
+                    "image": "aboutUsTwo",
+                    "alt": "Education Graphic"
                 },
                 {
                     "id": 3,
-                    "description": "Having this kind of skills could open for them many opportunities in the future that can positively turn their lives around. Thus, the aim of this platform is to provide these kids the opportunity to develop essential skills to thrive and have a better future."
+                    "description": "Having this kind of skills could open for them many opportunities in the future that can positively turn their lives around. Thus, the aim of this platform is to provide these kids the opportunity to develop essential skills to thrive and have a better future.",
+                    "image": "aboutUsThree",
+                    "alt": "Empathy Graphic"
                 }
             ]
         },