ReCoded-Org · Ammar-64 · Sep 1, 2021 · Aug 30, 2021 · Aug 31, 2021 · Sep 1, 2021
diff --git a/package.json b/package.json
@@ -19,14 +19,18 @@
         "react-bootstrap": "^2.0.0-beta.4",
         "react-dom": "^16.14.0",
         "react-i18next": "^11.11.4",
+        "react-icons": "^4.2.0",
         "react-redux": "^7.2.4",
         "react-router-dom": "^5.2.0",
         "react-scripts": "3.4.3",
+        "react-slick": "^0.28.1",
         "react-test-renderer": "^17.0.2",
         "redux": "^4.1.0",
         "redux-mock-store": "^1.5.4",
         "redux-thunk": "^2.3.0",
-        "sass": "^1.37.5"
+        "sass": "^1.37.5",
+        "slick-carousel": "^1.8.1",
+        "swiper": "^7.0.1"
     },
     "scripts": {
         "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+
+  <!-- bootstrap scripts  -->
+  <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
+
+  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script>
+
+  <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
+
+  <script>var Alert = ReactBootstrap.Alert;</script>
+
+
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +34,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Choose Wisely</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>Choose Wisely</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +50,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,44 @@
-import React from "react"; // , { useEffect }
-import Home from "./containers/Home";
-import Universities from "./containers/Universities";
-import NotFound from "./containers/NotFound";
-import Footer from "./components/Footer";
-import Preloader from "./components/PreLoad";
+import React from "react";
 
-import { Route, Switch, Router } from "react-router-dom";
+import { Router, Switch, Route } from "react-router-dom";
 import history from "./history";
 
+// import componentes
+import NavBar from "./components/NavBar";
+
+// slider links
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
 import "./App.scss";
 import "./style/style.css";
-// import RessourcesPage from "./containers/RessourcesPage";
+
+// import pages
+import Home from "./containers/Home";
+import About from "./containers/About";
+import Contact from "./containers/Contact";
+import RessourcesPage from "./containers/RessourcesPage";
+import Universities from "./containers/Universities";
+import Blog from "./containers/Blog";
+import NotFound from "./containers/NotFound";
+import Footer from "./components/Footer";
+import Preloader from "./components/PreLoad";
 
 function App() {
   return (
     <Router history={history}>
       <Preloader />
+      <NavBar />
+
+      {/* Routing part */}
+
       <Switch>
         <Route exact path="/" component={Home} />
-        <Route exact path="/universities" component={Universities} />
+        <Route exact path="/about" component={About} />
+        <Route exact path="/Contact" component={Contact} />
+        <Route exact path="/ressources" component={RessourcesPage} />
+        <Route exact path="/Universities" component={Universities} />
+        <Route exact path="/Blog" component={Blog} />
         <Route component={NotFound} />
       </Switch>
       <Footer />

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/AboutHero/index.jsx b/src/components/AboutHero/index.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import { Container } from "react-bootstrap";
+import "./style.scss";
+// image links
+import heroAbout from "./../../images/About/heroAbout.svg";
+
+const AboutHero = () => {
+  return (
+    <Container>
+      <div className="hero">
+        <img src={heroAbout} alt="hero section" />
+      </div>
+    </Container>
+  );
+};
+
+export default AboutHero;
diff --git a/src/components/AboutHero/style.scss b/src/components/AboutHero/style.scss
@@ -0,0 +1,17 @@
+body {
+  height: 100%;
+}
+
+.hero {
+  height: 50%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+  background-color: #ffff;
+  padding-top: 8%;
+}
+
+.hero img {
+  width: 100%;
+}
diff --git a/src/components/AboutService/index.jsx b/src/components/AboutService/index.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+// import bootstrab
+import { Container } from "react-bootstrap";
+
+// import translation
+import { useTranslation } from "react-i18next";
+import CardsWhoAreWe from "./../CardsWhoAreWe";
+import SectionTitle from "./../SectionTitle";
+// import icons
+import { AiFillTwitterCircle, AiFillInstagram } from "react-icons/ai";
+import { FaFacebook } from "react-icons/fa";
+import { aboutData } from "./../../data.json";
+
+const AboutService = () => {
+  const { t } = useTranslation();
+
+  const renderElements = () => {
+    return aboutData.map((element) => {
+      return (
+        <div className="card_row about_service">
+          <CardsWhoAreWe
+            customClassName={element.id % 2 !== 0 && true}
+            title={t(element.title)}
+            description={t(element.description)}
+            img={element.img}
+          >
+            <div className="icons">
+              <span className="instagram_icon">
+                <AiFillInstagram />
+              </span>
+              <span className="twiter_icon">
+                <AiFillTwitterCircle />
+              </span>
+              <span className="facebook_icon">
+                <FaFacebook />
+              </span>
+            </div>
+          </CardsWhoAreWe>
+        </div>
+      );
+    });
+  };
+
+  return (
+    <Container>
+      <div className="about_section_title">
+        <SectionTitle title={t("AboutPage.title")} />
+      </div>
+      {renderElements()}
+    </Container>
+  );
+};
+
+export default AboutService;
diff --git a/src/components/AboutService/style.scss b/src/components/AboutService/style.scss
@@ -0,0 +1,88 @@
+@import "./../../style/variables";
+
+@media screen and (min-width: 1200px) {
+  .serv {
+    display: flex;
+  }
+
+  .serv .left_col,
+  .serv .right_col {
+    width: 50%;
+    height: 50%;
+  }
+
+  .serv .left_col_2,
+  .serv .right_co_2l {
+    width: 50%;
+    height: 50%;
+  }
+}
+
+.serv {
+  padding: 6.25rem 0;
+}
+
+.serv_row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.text {
+  float: left;
+}
+
+.title {
+  color: $primary-color;
+  padding-bottom: 2.5rem;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 3rem;
+  line-height: 2.875rem;
+  letter-spacing: -0.006rem;
+}
+
+.left_col {
+  flex-basis: 50%;
+}
+
+.left_col img {
+  width: 100%;
+}
+
+.right_col {
+  flex-basis: 50%;
+}
+
+.right_col_2 {
+  flex-basis: 50%;
+}
+
+.right_col_2 img {
+  width: 100%;
+}
+.left_col_2 {
+  flex-basis: 50%;
+}
+.text {
+  .icons {
+    color: #d43a3a;
+    padding-top: 3rem;
+    size: 100%;
+  }
+}
+.instagram_icon,
+.twiter_icon,
+.facebook_icon {
+  padding-right: 0.5rem;
+}
+
+.about_service {
+  .row {
+    .col-lg {
+      img {
+        width: 100%;
+      }
+    }
+  }
+}