From bc94b1192bbfbf981a2357661e58d0c971803e47 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 11:19:30 +0200
Subject: [PATCH 01/31] create about us

---
 code/screens/about-us/index.js                | 19 ++++++++++++
 code/screens/about/components/big-side.js     | 13 ---------
 code/screens/about/components/careers-list.js | 13 ---------
 code/screens/about/components/grid-section.js | 13 ---------
 code/screens/about/components/small-side.js   | 23 ---------------
 code/screens/about/index.js                   | 29 -------------------
 content/_shared/footer/index.md               |  4 +--
 content/_shared/navbar/navigation/index.md    |  2 +-
 content/about/md/careers/index.md             | 10 -------
 content/about/md/grid/section1/big.md         |  4 ---
 content/about/md/grid/section1/index.md       |  7 -----
 content/about/md/grid/section1/small.md       |  6 ----
 content/about/md/grid/section2/big.md         |  4 ---
 content/about/md/grid/section2/index.md       |  7 -----
 content/about/md/grid/section2/small.md       |  6 ----
 content/about/md/grid/section3/big.md         |  4 ---
 content/about/md/grid/section3/index.md       |  7 -----
 content/about/md/grid/section3/small.md       |  7 -----
 content/about/md/index.md                     | 18 +++++-------
 19 files changed, 29 insertions(+), 167 deletions(-)
 create mode 100644 code/screens/about-us/index.js
 delete mode 100644 code/screens/about/components/big-side.js
 delete mode 100644 code/screens/about/components/careers-list.js
 delete mode 100644 code/screens/about/components/grid-section.js
 delete mode 100644 code/screens/about/components/small-side.js
 delete mode 100644 code/screens/about/index.js
 delete mode 100644 content/about/md/careers/index.md
 delete mode 100644 content/about/md/grid/section1/big.md
 delete mode 100644 content/about/md/grid/section1/index.md
 delete mode 100644 content/about/md/grid/section1/small.md
 delete mode 100644 content/about/md/grid/section2/big.md
 delete mode 100644 content/about/md/grid/section2/index.md
 delete mode 100644 content/about/md/grid/section2/small.md
 delete mode 100644 content/about/md/grid/section3/big.md
 delete mode 100644 content/about/md/grid/section3/index.md
 delete mode 100644 content/about/md/grid/section3/small.md

diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
new file mode 100644
index 0000000..5023780
--- /dev/null
+++ b/code/screens/about-us/index.js
@@ -0,0 +1,19 @@
+import ColorSection from "../../common/ColorSection";
+import PageWrapper from "../../common/pageWrapper";
+import React from "react";
+import { COLORS } from "../../../assets/js/common/colors";
+
+function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
+  return (
+    <PageWrapper
+      title={title}
+      description={description}
+      marquee={marquee}
+      contact={contact}
+      _relativeURL={_relativeURL}
+      _ID={_ID}
+    ></PageWrapper>
+  );
+}
+
+export default AboutUs;
diff --git a/code/screens/about/components/big-side.js b/code/screens/about/components/big-side.js
deleted file mode 100644
index 1f43d42..0000000
--- a/code/screens/about/components/big-side.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import Image from "../../../common/img";
-import { handleUrl } from "../../../utils";
-
-function BigSide({ image, _relativeURL, _ID }) {
-  return (
-    <div className="about-grid-section-big">
-      <Image src={handleUrl(image, _relativeURL, _ID)} />
-    </div>
-  );
-}
-
-export default BigSide;
diff --git a/code/screens/about/components/careers-list.js b/code/screens/about/components/careers-list.js
deleted file mode 100644
index 89d0a79..0000000
--- a/code/screens/about/components/careers-list.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import animations from "../../../../assets/js/animations";
-
-function CareersList({ careers, _body }) {
-  return (
-    <div className="about-careers" data-aos={animations.up}>
-      <div className="about-careers-header">{_body}</div>
-      {careers}
-    </div>
-  );
-}
-
-export default CareersList;
diff --git a/code/screens/about/components/grid-section.js b/code/screens/about/components/grid-section.js
deleted file mode 100644
index 5446c19..0000000
--- a/code/screens/about/components/grid-section.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import animations from "../../../../assets/js/animations";
-
-function AboutGridSection({ bigSide, smallSide }) {
-  return (
-    <div className="about-grid-section flex" data-aos={animations.up}>
-      {bigSide}
-      {smallSide}
-    </div>
-  );
-}
-
-export default AboutGridSection;
diff --git a/code/screens/about/components/small-side.js b/code/screens/about/components/small-side.js
deleted file mode 100644
index cd0dac8..0000000
--- a/code/screens/about/components/small-side.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import Image from "../../../common/img";
-import { handleUrl } from "../../../utils";
-
-function SmallSection({ image, _relativeURL, _ID, title, _body }) {
-  return (
-    <div className="about-grid-section-small">
-      {image && <Image src={handleUrl(image, _relativeURL, _ID)} />}
-      <div
-        className={
-          image
-            ? "about-grid-section-small-text about-grid-section-small-text-half"
-            : "about-grid-section-small-text about-grid-section-small-text-full"
-        }
-      >
-        <h5>{title}</h5>
-        {_body}
-      </div>
-    </div>
-  );
-}
-
-export default SmallSection;
diff --git a/code/screens/about/index.js b/code/screens/about/index.js
deleted file mode 100644
index 8d2bd63..0000000
--- a/code/screens/about/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import animations from "../../../assets/js/animations";
-import { handleUrl } from "../../utils";
-
-function About({ sections, careers, topImage, _relativeURL, _ID, team }) {
-  return (
-    <div className="about">
-      <div className="about-grid">
-        <h1 className="about-title" data-aos={animations.up}>
-          We are GoTech
-        </h1>
-        <img
-          src={handleUrl(topImage, _relativeURL, _ID)}
-          className="about-top-image"
-        />
-        <h4 className="about-grid-title">Our story</h4>
-        <div className="about-grid-flex">{sections}</div>
-        {team}
-      </div>
-      {careers}
-      <script
-        type="module"
-        src={handleUrl(`/assets/js/about/index.js`, _relativeURL, _ID)}
-      />
-    </div>
-  );
-}
-
-export default About;
diff --git a/content/_shared/footer/index.md b/content/_shared/footer/index.md
index f81030e..ed7a83f 100644
--- a/content/_shared/footer/index.md
+++ b/content/_shared/footer/index.md
@@ -6,6 +6,7 @@ variables:
       title: About Us,
       list:
         [
+          { title: About Company, link: "/about" },
           { title: Clients, link: "/#clients" },
           { title: Teams, link: "/#team" },
           { title: Careers, link: "/careers/" },
@@ -31,9 +32,6 @@ variables:
     },
   ]
 
-# marquee:
-#   - /_shared/marquee/index.md
-
 copyright: © Copyright GoTech. All rights reserved.
 privacy_policy_text: Privacy Policy
 privacy_policy_url: /privacy-policy
diff --git a/content/_shared/navbar/navigation/index.md b/content/_shared/navbar/navigation/index.md
index 690f2f3..fbe091c 100644
--- a/content/_shared/navbar/navigation/index.md
+++ b/content/_shared/navbar/navigation/index.md
@@ -2,7 +2,7 @@
 layout: common/navbar/components/navigation/index
 links:
   - name: about
-    value: /#about
+    value: /about
 
   - name: services
     value: /#services
diff --git a/content/about/md/careers/index.md b/content/about/md/careers/index.md
deleted file mode 100644
index 83868ac..0000000
--- a/content/about/md/careers/index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: screens/about/components/careers-list
-
-careers:
-  - /careers/md/lists/index.md
----
-
-### We are hiring!
-
-Focus on innovations, quality, and community.
diff --git a/content/about/md/grid/section1/big.md b/content/about/md/grid/section1/big.md
deleted file mode 100644
index 3df7b1f..0000000
--- a/content/about/md/grid/section1/big.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: screens/about/components/big-side
-image: /assets/images/home/about/office1.jpg
----
diff --git a/content/about/md/grid/section1/index.md b/content/about/md/grid/section1/index.md
deleted file mode 100644
index ec4a59f..0000000
--- a/content/about/md/grid/section1/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: screens/about/components/grid-section
-bigSide:
-  - big.md
-smallSide:
-  - small.md
----
diff --git a/content/about/md/grid/section1/small.md b/content/about/md/grid/section1/small.md
deleted file mode 100644
index 809a142..0000000
--- a/content/about/md/grid/section1/small.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: screens/about/components/small-side
-title: Nov 2018
----
-
-We create a very clean and simple UI which is easily suitable for any project. In addition, it's fresh and corresponds to nowadays trends.
diff --git a/content/about/md/grid/section2/big.md b/content/about/md/grid/section2/big.md
deleted file mode 100644
index da71253..0000000
--- a/content/about/md/grid/section2/big.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: screens/about/components/big-side
-image: /assets/images/home/about/office2.jpg
----
diff --git a/content/about/md/grid/section2/index.md b/content/about/md/grid/section2/index.md
deleted file mode 100644
index ec4a59f..0000000
--- a/content/about/md/grid/section2/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: screens/about/components/grid-section
-bigSide:
-  - big.md
-smallSide:
-  - small.md
----
diff --git a/content/about/md/grid/section2/small.md b/content/about/md/grid/section2/small.md
deleted file mode 100644
index 809a142..0000000
--- a/content/about/md/grid/section2/small.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: screens/about/components/small-side
-title: Nov 2018
----
-
-We create a very clean and simple UI which is easily suitable for any project. In addition, it's fresh and corresponds to nowadays trends.
diff --git a/content/about/md/grid/section3/big.md b/content/about/md/grid/section3/big.md
deleted file mode 100644
index 55ee5b3..0000000
--- a/content/about/md/grid/section3/big.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: screens/about/components/big-side
-image: /assets/images/home/about/office3.jpg
----
diff --git a/content/about/md/grid/section3/index.md b/content/about/md/grid/section3/index.md
deleted file mode 100644
index ec4a59f..0000000
--- a/content/about/md/grid/section3/index.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: screens/about/components/grid-section
-bigSide:
-  - big.md
-smallSide:
-  - small.md
----
diff --git a/content/about/md/grid/section3/small.md b/content/about/md/grid/section3/small.md
deleted file mode 100644
index 9d9fceb..0000000
--- a/content/about/md/grid/section3/small.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: screens/about/components/small-side
-title: Nov 2018
-image: /assets/images/home/about/office1.jpg
----
-
-We create a very clean and simple UI which is easily suitable for any project. In addition, it's fresh and corresponds to nowadays trends.
diff --git a/content/about/md/index.md b/content/about/md/index.md
index 43d51dc..32d5315 100644
--- a/content/about/md/index.md
+++ b/content/about/md/index.md
@@ -1,12 +1,10 @@
 ---
-layout: screens/about/index
-sections:
-  - grid/section1/index.md
-  - grid/section2/index.md
-  - grid/section3/index.md
-careers:
-  - careers/index.md
-topImage: /assets/images/about/img1.jpeg
-team:
-  - /home/md/team/index.md
+layout: screens/about-us/index
+title: About Us
+description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin sed libero enim sed faucibus. Vestibulum morbi blandit cursus risus at ultrices mi tempus.
+marquee:
+  - /_shared/marquee/index.md
+
+contact:
+  - ../../home/md/contact/index.md
 ---

From 1589b53dd850f49de5790b4ba04d7e78d67d0aa0 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 13:53:30 +0200
Subject: [PATCH 02/31] timeline

---
 assets/js/common/timeline/index.js            | 60 ++++++++++++
 assets/sass/common/index.scss                 |  1 +
 assets/sass/common/timeline.scss              | 98 +++++++++++++++++++
 .../about-us/components/timelineItem.js       | 25 +++++
 code/screens/about-us/index.js                | 30 +++++-
 5 files changed, 213 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/common/timeline/index.js
 create mode 100644 assets/sass/common/timeline.scss
 create mode 100644 code/screens/about-us/components/timelineItem.js

diff --git a/assets/js/common/timeline/index.js b/assets/js/common/timeline/index.js
new file mode 100644
index 0000000..df68c65
--- /dev/null
+++ b/assets/js/common/timeline/index.js
@@ -0,0 +1,60 @@
+import { COLORS } from "../colors";
+
+export const TIMELINE = [
+  {
+    title: "Proin sed libero",
+    description:
+      "Non enim praesent elementum facilisis leo vel. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Nunc non blandit massa enim nec. Pretium aenean pharetra magna ac placerat vestibulum lectus. Fermentum odio eu feugiat pretium nibh.",
+    year: 2016,
+    color: COLORS.GREEN,
+  },
+  {
+    title: "Quis commodo odio aenean sed",
+    description:
+      "Porttitor lacus luctus accumsan tortor posuere ac. Urna molestie at elementum eu facilisis sed odio morbi quis. Pulvinar elementum integer enim neque volutpat ac tincidunt. Viverra adipiscing at in tellus integer feugiat.",
+    year: 2017,
+    color: COLORS.BLUE,
+  },
+  {
+    title: "Commodo odio aenean",
+    description:
+      "Aliquet porttitor lacus luctus accumsan tortor posuere ac. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Tortor aliquam nulla facilisi cras fermentum. Justo nec ultrices dui sapien. In iaculis nunc sed augue lacus viverra vitae congue. Quam vulputate dignissim suspendisse in.",
+    year: 2018,
+    color: COLORS.ORANGE,
+  },
+  {
+    title: "Netus et malesuada",
+    description:
+      "Nullam vehicula ipsum a arcu cursus vitae congue. Feugiat in fermentum posuere urna nec. Suscipit adipiscing bibendum est ultricies integer. Fames ac turpis egestas sed tempus.",
+    year: 2019,
+    color: COLORS.GREEN,
+  },
+  {
+    title: "Viverra nibh cras",
+    description:
+      "Quam vulputate dignissim suspendisse in. Facilisi cras fermentum odio eu feugiat pretium. Turpis egestas sed tempus urna et pharetra pharetra massa. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Mauris sit amet massa vitae tortor",
+    year: 2020,
+    color: COLORS.PINK,
+  },
+  {
+    title: "In est ante in nibh",
+    description:
+      "Tellus id interdum velit laoreet id donec ultrices. Aliquet porttitor lacus luctus accumsan tortor posuere ac. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Tortor aliquam nulla facilisi cras fermentum. Justo nec ultrices dui sapien.",
+    year: 2021,
+    color: COLORS.PURPLE,
+  },
+  {
+    title: "Purus gravida quis",
+    description:
+      "Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Eget mi proin sed libero enim sed. A arcu cursus vitae congue mauris rhoncus aenean vel. Dui nunc mattis enim ut tellus elementum sagittis vitae. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque.",
+    year: 2022,
+    color: COLORS.PRIME,
+  },
+  {
+    title: "Odio facilisis mauris",
+    description:
+      "Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Vel pharetra vel turpis nunc eget lorem dolor sed. Purus in mollis nunc sed id semper. Ipsum dolor sit amet consectetur adipiscing elit. Quam viverra orci",
+    year: 2023,
+    color: COLORS.GRAY,
+  },
+];
diff --git a/assets/sass/common/index.scss b/assets/sass/common/index.scss
index 1cfaaf3..b402748 100644
--- a/assets/sass/common/index.scss
+++ b/assets/sass/common/index.scss
@@ -9,6 +9,7 @@
 @import "./colorSection.scss";
 @import "./steps.scss";
 @import "./parallax.scss";
+@import "./timeline.scss";
 
 .flex-start {
   display: flex;
diff --git a/assets/sass/common/timeline.scss b/assets/sass/common/timeline.scss
new file mode 100644
index 0000000..61ddf42
--- /dev/null
+++ b/assets/sass/common/timeline.scss
@@ -0,0 +1,98 @@
+.timeline {
+  &-wrapper {
+    position: relative;
+  }
+
+  &-vertical {
+    &-block {
+      i {
+        width: 10%;
+        color: $additional;
+        text-align: center;
+        position: absolute;
+        margin: 0 0 -1px 1px;
+        left: 45%;
+        bottom: 0;
+      }
+    }
+
+    &-line {
+      height: 100%;
+      margin: 0 auto;
+      position: absolute;
+      left: 50%;
+      top: 0;
+      border-left: 2px solid $additional;
+      border-radius: 5px;
+    }
+  }
+
+  &-block {
+    position: relative;
+    padding: $content-gap 0;
+  }
+
+  &-item {
+    width: 100%;
+    margin: $section-gap 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-details {
+      width: 45%;
+      max-height: 70px;
+      padding: $content-gap;
+      display: flex;
+      justify-content: center;
+      overflow: hidden;
+      background-color: $main;
+      border-radius: $radius;
+      box-shadow: $shadow;
+      cursor: pointer;
+      transition: max-height 0.5s;
+
+      &:hover {
+        max-height: 500px;
+      }
+    }
+
+    &-number {
+      width: 50px;
+      height: 50px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: $main;
+      border: 2px solid $additional;
+      border-radius: $circle;
+
+      //change to step
+      p {
+        width: 35px;
+        height: 35px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: $green;
+        border-radius: $circle;
+      }
+    }
+
+    &-year- {
+      width: 45%;
+    }
+
+    &-year-reverse {
+      width: 45%;
+      display: flex;
+      justify-content: end;
+    }
+  }
+}
+
+@media only screen and (max-width: $medium) {
+}
+
+@media only screen and (max-width: $mobile) {
+}
diff --git a/code/screens/about-us/components/timelineItem.js b/code/screens/about-us/components/timelineItem.js
new file mode 100644
index 0000000..0a688e2
--- /dev/null
+++ b/code/screens/about-us/components/timelineItem.js
@@ -0,0 +1,25 @@
+import React from "react";
+
+function TimelineItem({ title, description, number, year, color, reverse }) {
+  return (
+    <div
+      className="timeline-item"
+      style={{ flexDirection: reverse && "row-reverse" }}
+    >
+      <div className="timeline-item-details">
+        <div>
+          <h4>{title}</h4>
+          <p>{description}</p>
+        </div>
+      </div>
+      <div className={`timeline-item-number ${color}`}>
+        <p>{number}</p>
+      </div>
+      <div className={`timeline-item-year-${reverse}`}>
+        <h4>{year}</h4>
+      </div>
+    </div>
+  );
+}
+
+export default TimelineItem;
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index 5023780..129b72a 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -1,7 +1,9 @@
 import ColorSection from "../../common/ColorSection";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
+import TimelineItem from "./components/timelineItem";
 import { COLORS } from "../../../assets/js/common/colors";
+import { TIMELINE } from "../../../assets/js/common/timeline";
 
 function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
   return (
@@ -12,7 +14,33 @@ function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
       contact={contact}
       _relativeURL={_relativeURL}
       _ID={_ID}
-    ></PageWrapper>
+    >
+      <div className="page-common-block">
+        <div className="timeline-wrapper">
+          <div className="timeline-vertical-block">
+            <hr className="timeline-vertical-line" />
+            <i className="fa-solid fa-arrow-down"></i>
+          </div>
+
+          <div className="timeline-block">
+            {TIMELINE.length &&
+              TIMELINE.map(({ title, description, year, color }, i) => {
+                return (
+                  <TimelineItem
+                    key={title}
+                    title={title}
+                    description={description}
+                    number={i + 1}
+                    year={year}
+                    color={color}
+                    reverse={i % 2 === 0 ? "reverse" : ""}
+                  />
+                );
+              })}
+          </div>
+        </div>
+      </div>
+    </PageWrapper>
   );
 }
 

From 0f693953d3f4d2bd087cfd9b69253bba1e29c2fd Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 14:28:11 +0200
Subject: [PATCH 03/31] timeline styles

---
 assets/js/common/colors/index.js              |  7 ++++++
 assets/js/common/timeline/index.js            |  4 +--
 assets/sass/colors.scss                       |  5 +++-
 assets/sass/common/common.scss                | 25 +++++++++++++++++++
 assets/sass/common/steps.scss                 |  5 +++-
 assets/sass/common/timeline.scss              |  9 ++-----
 .../about-us/components/timelineItem.js       |  4 +--
 code/screens/about-us/index.js                |  1 -
 8 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/assets/js/common/colors/index.js b/assets/js/common/colors/index.js
index 84cdb43..5a4f8bc 100644
--- a/assets/js/common/colors/index.js
+++ b/assets/js/common/colors/index.js
@@ -1,5 +1,12 @@
 export const COLORS = {
   GREEN: "green",
+  BLUE: "blue",
   GRAY: "gray",
+  YELLOW: "yellow",
   ORANGE: "orange",
+  PINK: "pink",
+  PURPLE: "purple",
+  PRIME: "prime",
+  MAIN: "main",
+  DEFAULT: "default",
 };
diff --git a/assets/js/common/timeline/index.js b/assets/js/common/timeline/index.js
index df68c65..0d2c713 100644
--- a/assets/js/common/timeline/index.js
+++ b/assets/js/common/timeline/index.js
@@ -27,7 +27,7 @@ export const TIMELINE = [
     description:
       "Nullam vehicula ipsum a arcu cursus vitae congue. Feugiat in fermentum posuere urna nec. Suscipit adipiscing bibendum est ultricies integer. Fames ac turpis egestas sed tempus.",
     year: 2019,
-    color: COLORS.GREEN,
+    color: COLORS.YELLOW,
   },
   {
     title: "Viverra nibh cras",
@@ -55,6 +55,6 @@ export const TIMELINE = [
     description:
       "Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Vel pharetra vel turpis nunc eget lorem dolor sed. Purus in mollis nunc sed id semper. Ipsum dolor sit amet consectetur adipiscing elit. Quam viverra orci",
     year: 2023,
-    color: COLORS.GRAY,
+    color: COLORS.DEFAULT,
   },
 ];
diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss
index 04d8bc5..7c63d11 100644
--- a/assets/sass/colors.scss
+++ b/assets/sass/colors.scss
@@ -2,7 +2,6 @@ $services-background-gradient: linear-gradient(180deg, #f2f4f8, #fff);
 $services-text: #1f2631;
 $main-text: #070f1a;
 $clients-background: #f2f4f8;
-$orange: #fd8274;
 $case-studies-background: #f2f4f8;
 
 $green-background: linear-gradient(90deg, #4be2c8, #2ac8e8);
@@ -12,4 +11,8 @@ $additional: #c2c2c2;
 $prime: #0c173c;
 $green: #4be2c8;
 $blue: #2ac8e8;
+$yellow: #ffc453;
+$orange: #ff7e35;
+$pink: #ff6489;
+$purple: #5364ff;
 $shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 5px 10px 0 rgba(0, 0, 0, 0.2);
diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index 48dacbe..4589b89 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -113,6 +113,31 @@ img {
   object-fit: contain;
 }
 
+.green {
+  background-color: $green;
+}
+.blue {
+  background-color: $blue;
+}
+.yellow {
+  background-color: $yellow;
+}
+.orange {
+  background-color: $orange;
+}
+.pink {
+  background-color: $pink;
+}
+.purple {
+  background-color: $purple;
+}
+.prime {
+  background-color: $prime;
+}
+.default {
+  background-color: $additional;
+}
+
 @media only screen and (max-width: $mobile) {
   h1 {
     font-size: 30px;
diff --git a/assets/sass/common/steps.scss b/assets/sass/common/steps.scss
index 9ef44d0..ef3d300 100644
--- a/assets/sass/common/steps.scss
+++ b/assets/sass/common/steps.scss
@@ -1,9 +1,13 @@
 .steps {
   margin-top: $section-gap;
+
   &-item {
     margin: $content-gap 0;
     display: flex;
+    justify-content: center;
     align-items: center;
+    color: $main;
+    border-radius: $circle;
 
     &-number {
       width: 30px;
@@ -13,7 +17,6 @@
       align-items: center;
       justify-content: center;
       color: white;
-      background: $green-background;
       border-radius: 50%;
     }
 
diff --git a/assets/sass/common/timeline.scss b/assets/sass/common/timeline.scss
index 61ddf42..4e97140 100644
--- a/assets/sass/common/timeline.scss
+++ b/assets/sass/common/timeline.scss
@@ -67,15 +67,10 @@
       border: 2px solid $additional;
       border-radius: $circle;
 
-      //change to step
-      p {
+      .steps-item-number {
         width: 35px;
         height: 35px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: $green;
-        border-radius: $circle;
+        margin: 0 auto;
       }
     }
 
diff --git a/code/screens/about-us/components/timelineItem.js b/code/screens/about-us/components/timelineItem.js
index 0a688e2..1d2abfe 100644
--- a/code/screens/about-us/components/timelineItem.js
+++ b/code/screens/about-us/components/timelineItem.js
@@ -12,8 +12,8 @@ function TimelineItem({ title, description, number, year, color, reverse }) {
           <p>{description}</p>
         </div>
       </div>
-      <div className={`timeline-item-number ${color}`}>
-        <p>{number}</p>
+      <div className="timeline-item-number">
+        <span className={`steps-item-number ${color}`}>{number}</span>
       </div>
       <div className={`timeline-item-year-${reverse}`}>
         <h4>{year}</h4>
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index 129b72a..c3797bc 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -2,7 +2,6 @@ import ColorSection from "../../common/ColorSection";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
 import TimelineItem from "./components/timelineItem";
-import { COLORS } from "../../../assets/js/common/colors";
 import { TIMELINE } from "../../../assets/js/common/timeline";
 
 function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {

From fe11254dcd8ee6277b5d0763bd32d856732c80f1 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 14:38:11 +0200
Subject: [PATCH 04/31] timeline refactor

---
 code/screens/about-us/components/timeline.js  | 33 +++++++++++++++++++
 .../about-us/components/verticalLine.js       | 12 +++++++
 code/screens/about-us/index.js                | 30 ++---------------
 3 files changed, 47 insertions(+), 28 deletions(-)
 create mode 100644 code/screens/about-us/components/timeline.js
 create mode 100644 code/screens/about-us/components/verticalLine.js

diff --git a/code/screens/about-us/components/timeline.js b/code/screens/about-us/components/timeline.js
new file mode 100644
index 0000000..a4ce9a3
--- /dev/null
+++ b/code/screens/about-us/components/timeline.js
@@ -0,0 +1,33 @@
+import React from "react";
+import TimelineItem from "./timelineItem";
+import VerticalLine from "./verticalLine";
+import { TIMELINE } from "../../../../assets/js/common/timeline";
+
+const Timeline = () => {
+  return (
+    <div className="page-common-block">
+      <div className="timeline-wrapper">
+        <VerticalLine />
+
+        <div className="timeline-block">
+          {TIMELINE.length &&
+            TIMELINE.map(({ title, description, year, color }, i) => {
+              return (
+                <TimelineItem
+                  key={title}
+                  title={title}
+                  description={description}
+                  number={i + 1}
+                  year={year}
+                  color={color}
+                  reverse={i % 2 === 0 ? "reverse" : ""}
+                />
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;
diff --git a/code/screens/about-us/components/verticalLine.js b/code/screens/about-us/components/verticalLine.js
new file mode 100644
index 0000000..d6fd6f0
--- /dev/null
+++ b/code/screens/about-us/components/verticalLine.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const VerticalLine = () => {
+  return (
+    <div className="timeline-vertical-block">
+      <hr className="timeline-vertical-line" />
+      <i className="fa-solid fa-arrow-down"></i>
+    </div>
+  );
+};
+
+export default VerticalLine;
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index c3797bc..59ce62d 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -1,8 +1,6 @@
-import ColorSection from "../../common/ColorSection";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
-import TimelineItem from "./components/timelineItem";
-import { TIMELINE } from "../../../assets/js/common/timeline";
+import Timeline from "./components/timeline";
 
 function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
   return (
@@ -14,31 +12,7 @@ function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
       _relativeURL={_relativeURL}
       _ID={_ID}
     >
-      <div className="page-common-block">
-        <div className="timeline-wrapper">
-          <div className="timeline-vertical-block">
-            <hr className="timeline-vertical-line" />
-            <i className="fa-solid fa-arrow-down"></i>
-          </div>
-
-          <div className="timeline-block">
-            {TIMELINE.length &&
-              TIMELINE.map(({ title, description, year, color }, i) => {
-                return (
-                  <TimelineItem
-                    key={title}
-                    title={title}
-                    description={description}
-                    number={i + 1}
-                    year={year}
-                    color={color}
-                    reverse={i % 2 === 0 ? "reverse" : ""}
-                  />
-                );
-              })}
-          </div>
-        </div>
-      </div>
+      <Timeline />
     </PageWrapper>
   );
 }

From b5d6b805bf6e509d2cde6917ef0d03dfb338e45c Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 14:49:37 +0200
Subject: [PATCH 05/31] timeline refactor

---
 assets/sass/common/timeline.scss                 |  5 +++++
 code/common/titleSection/index.js                | 12 ++++++++++++
 code/screens/about-us/components/timelineItem.js |  8 ++++----
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 code/common/titleSection/index.js

diff --git a/assets/sass/common/timeline.scss b/assets/sass/common/timeline.scss
index 4e97140..98536ec 100644
--- a/assets/sass/common/timeline.scss
+++ b/assets/sass/common/timeline.scss
@@ -55,6 +55,11 @@
       &:hover {
         max-height: 500px;
       }
+
+      .color-block-title,
+      .color-block-description {
+        color: $prime;
+      }
     }
 
     &-number {
diff --git a/code/common/titleSection/index.js b/code/common/titleSection/index.js
new file mode 100644
index 0000000..6c155f8
--- /dev/null
+++ b/code/common/titleSection/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const TitleSection = ({ title, description }) => {
+  return (
+    <div className="page-common-block">
+      <h4 className="color-block-title">{title}</h4>
+      {description && <p className="color-block-description">{description}</p>}
+    </div>
+  );
+};
+
+export default TitleSection;
diff --git a/code/screens/about-us/components/timelineItem.js b/code/screens/about-us/components/timelineItem.js
index 1d2abfe..3e915ca 100644
--- a/code/screens/about-us/components/timelineItem.js
+++ b/code/screens/about-us/components/timelineItem.js
@@ -1,4 +1,5 @@
 import React from "react";
+import TitleSection from "../../../common/titleSection";
 
 function TimelineItem({ title, description, number, year, color, reverse }) {
   return (
@@ -7,14 +8,13 @@ function TimelineItem({ title, description, number, year, color, reverse }) {
       style={{ flexDirection: reverse && "row-reverse" }}
     >
       <div className="timeline-item-details">
-        <div>
-          <h4>{title}</h4>
-          <p>{description}</p>
-        </div>
+        <TitleSection title={title} description={description} />
       </div>
+
       <div className="timeline-item-number">
         <span className={`steps-item-number ${color}`}>{number}</span>
       </div>
+
       <div className={`timeline-item-year-${reverse}`}>
         <h4>{year}</h4>
       </div>

From bfc87a5c9015c1abc215060246da1f0c229f6888 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 15:16:19 +0200
Subject: [PATCH 06/31] timeline mobile

---
 assets/sass/common/timeline.scss | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/assets/sass/common/timeline.scss b/assets/sass/common/timeline.scss
index 98536ec..b0c0c84 100644
--- a/assets/sass/common/timeline.scss
+++ b/assets/sass/common/timeline.scss
@@ -29,12 +29,12 @@
 
   &-block {
     position: relative;
-    padding: $content-gap 0;
+    padding: $content-gap auto;
   }
 
   &-item {
     width: 100%;
-    margin: $section-gap 0;
+    margin: $section-gap auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -95,4 +95,27 @@
 }
 
 @media only screen and (max-width: $mobile) {
+  .timeline-item {
+    flex-wrap: wrap;
+
+    &-details {
+      width: 100%;
+    }
+
+    &-number {
+      margin: $content-gap auto;
+    }
+
+    &-year- {
+      width: 100%;
+      text-align: center;
+      background-color: $main;
+    }
+
+    &-year-reverse {
+      width: 100%;
+      justify-content: center;
+      background-color: $main;
+    }
+  }
 }

From bc775bb154983f0335bf1ff73a8677b83093c5aa Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 15:40:51 +0200
Subject: [PATCH 07/31] colors

---
 assets/js/common/colors/index.js   |  1 +
 assets/js/common/timeline/index.js |  2 +-
 assets/sass/common/common.scss     |  3 +++
 assets/sass/common/timeline.scss   |  2 +-
 code/screens/about-us/index.js     | 12 +++++++++++-
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/assets/js/common/colors/index.js b/assets/js/common/colors/index.js
index 5a4f8bc..3b6321b 100644
--- a/assets/js/common/colors/index.js
+++ b/assets/js/common/colors/index.js
@@ -9,4 +9,5 @@ export const COLORS = {
   PRIME: "prime",
   MAIN: "main",
   DEFAULT: "default",
+  ADDITIONAL: "additional",
 };
diff --git a/assets/js/common/timeline/index.js b/assets/js/common/timeline/index.js
index 0d2c713..afb9967 100644
--- a/assets/js/common/timeline/index.js
+++ b/assets/js/common/timeline/index.js
@@ -55,6 +55,6 @@ export const TIMELINE = [
     description:
       "Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Vel pharetra vel turpis nunc eget lorem dolor sed. Purus in mollis nunc sed id semper. Ipsum dolor sit amet consectetur adipiscing elit. Quam viverra orci",
     year: 2023,
-    color: COLORS.DEFAULT,
+    color: COLORS.ADDITIONAL,
   },
 ];
diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index 4589b89..37e8e8e 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -135,6 +135,9 @@ img {
   background-color: $prime;
 }
 .default {
+  background-color: $default;
+}
+.additional {
   background-color: $additional;
 }
 
diff --git a/assets/sass/common/timeline.scss b/assets/sass/common/timeline.scss
index b0c0c84..47ee87c 100644
--- a/assets/sass/common/timeline.scss
+++ b/assets/sass/common/timeline.scss
@@ -29,7 +29,7 @@
 
   &-block {
     position: relative;
-    padding: $content-gap auto;
+    padding: $content-gap 0;
   }
 
   &-item {
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index 59ce62d..1a05086 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -1,6 +1,8 @@
+import ColorSection from "../../common/colorSection";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
 import Timeline from "./components/timeline";
+import { COLORS } from "../../../assets/js/common/colors";
 
 function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
   return (
@@ -12,7 +14,15 @@ function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
       _relativeURL={_relativeURL}
       _ID={_ID}
     >
-      <Timeline />
+      <ColorSection
+        color={COLORS.DEFAULT}
+        title={"our history"}
+        description={
+          "GoTech is a one-stop shop for infrastructures and development services. Our team consists of the best and most professional mobile and web developers, QA automation developers, DevOps, data engineers, and DBAs. We provide our clients with high-quality, reliable services that are tailored to their specific business needs."
+        }
+      >
+        <Timeline />
+      </ColorSection>
     </PageWrapper>
   );
 }

From 13bb861089e33ab4fc24f97143f3f1aabbbbcf79 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 16:22:10 +0200
Subject: [PATCH 08/31] section

---
 assets/js/common/about-us/index.js            | 50 +++++++++++++++++++
 assets/sass/common/index.scss                 |  1 +
 assets/sass/common/video.scss                 |  6 +++
 code/common/video/index.js                    | 12 +++++
 .../about-us/components/timelineItem.js       |  3 ++
 code/screens/about-us/index.js                | 31 ++++++++----
 6 files changed, 93 insertions(+), 10 deletions(-)
 create mode 100644 assets/js/common/about-us/index.js
 create mode 100644 assets/sass/common/video.scss
 create mode 100644 code/common/video/index.js

diff --git a/assets/js/common/about-us/index.js b/assets/js/common/about-us/index.js
new file mode 100644
index 0000000..811edee
--- /dev/null
+++ b/assets/js/common/about-us/index.js
@@ -0,0 +1,50 @@
+import { COLORS } from "../colors";
+
+export const ABOUT_US_DETAILS = {
+  title: "GoTech Family Introduce",
+  description:
+    "We help Fortune 500 companies, startups, and enterprises to build relevant digital products, train their teams, solve business problems, and reduce costs while increasing efficiency.",
+
+  video: {
+    src: "https://dms.licdn.com/playlist/C4D05AQFmLxavnNLPxQ/mp4-720p-30fp-crf28/0/1640537394791?e=1670252400&v=beta&t=pxrl2OqClkWOMHhHrPttHic1hSZZwbaiPsNK_89FqJo",
+    type: "video/mp4",
+  },
+
+  sections: [
+    {
+      type: "section-alpha",
+      color: COLORS.DEFAULT,
+      title: "our history",
+      description:
+        "GoTech is a one-stop shop for infrastructures and development services. Our team consists of the best and most professional mobile and web developers, QA automation developers, DevOps, data engineers, and DBAs. We provide our clients with high-quality, reliable services that are tailored to their specific business needs.",
+    },
+    {
+      type: "section-beta",
+      color: COLORS.MAIN,
+      title: "you can see us here!",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+      type: "section-gamma",
+      color: COLORS.GREEN,
+      title: "why choose us?",
+      description:
+        "With years of experience in the industry, our team has the skills and expertise to deliver top-notch solutions that drive real results for our clients. We are committed to providing exceptional customer service and working closely with our clients to ensure their success.",
+    },
+    {
+      type: "section-delta",
+      color: COLORS.MAIN,
+      title: "our best team!",
+      description:
+        "At GoTech, we believe in the power of collaboration and partnerships. We work closely with our clients to understand their unique challenges and develop solutions that are tailored to their specific needs. Our team is dedicated to helping our clients achieve their goals and succeed in today's competitive market.",
+    },
+    {
+      type: "section-epsilon",
+      color: COLORS.YELLOW,
+      title: "DELTA",
+      description:
+        "Contact us today to learn more about our services and see how we can help your business grow and thrive.",
+    },
+  ],
+};
diff --git a/assets/sass/common/index.scss b/assets/sass/common/index.scss
index b402748..b285565 100644
--- a/assets/sass/common/index.scss
+++ b/assets/sass/common/index.scss
@@ -10,6 +10,7 @@
 @import "./steps.scss";
 @import "./parallax.scss";
 @import "./timeline.scss";
+@import "./video.scss";
 
 .flex-start {
   display: flex;
diff --git a/assets/sass/common/video.scss b/assets/sass/common/video.scss
new file mode 100644
index 0000000..c30896b
--- /dev/null
+++ b/assets/sass/common/video.scss
@@ -0,0 +1,6 @@
+.video {
+  width: 100%;
+  height: 100%;
+  background-color: $default;
+  border-radius: $radius;
+}
diff --git a/code/common/video/index.js b/code/common/video/index.js
new file mode 100644
index 0000000..61c9155
--- /dev/null
+++ b/code/common/video/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+import animations from "../../../assets/js/animations";
+
+function Video({ src, type }) {
+  return (
+    <video className="video" controls data-aos={animations.up}>
+      <source src={src} type={type} />
+    </video>
+  );
+}
+
+export default Video;
diff --git a/code/screens/about-us/components/timelineItem.js b/code/screens/about-us/components/timelineItem.js
index 3e915ca..9112b88 100644
--- a/code/screens/about-us/components/timelineItem.js
+++ b/code/screens/about-us/components/timelineItem.js
@@ -1,11 +1,14 @@
 import React from "react";
 import TitleSection from "../../../common/titleSection";
+import animations from "../../../../assets/js/animations";
 
 function TimelineItem({ title, description, number, year, color, reverse }) {
   return (
     <div
       className="timeline-item"
       style={{ flexDirection: reverse && "row-reverse" }}
+      data-aos-anchor-placement="top-center"
+      data-aos={animations.zoomInUp}
     >
       <div className="timeline-item-details">
         <TitleSection title={title} description={description} />
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index 1a05086..fdcc72f 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -2,9 +2,13 @@ import ColorSection from "../../common/colorSection";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
 import Timeline from "./components/timeline";
+import Video from "../../common/video";
+import { ABOUT_US_DETAILS } from "../../../assets/js/common/about-us";
 import { COLORS } from "../../../assets/js/common/colors";
 
-function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
+function AboutUs({ marquee, contact, _relativeURL, _ID }) {
+  const { title, description, sections, video } = ABOUT_US_DETAILS;
+
   return (
     <PageWrapper
       title={title}
@@ -14,15 +18,22 @@ function AboutUs({ title, description, marquee, contact, _relativeURL, _ID }) {
       _relativeURL={_relativeURL}
       _ID={_ID}
     >
-      <ColorSection
-        color={COLORS.DEFAULT}
-        title={"our history"}
-        description={
-          "GoTech is a one-stop shop for infrastructures and development services. Our team consists of the best and most professional mobile and web developers, QA automation developers, DevOps, data engineers, and DBAs. We provide our clients with high-quality, reliable services that are tailored to their specific business needs."
-        }
-      >
-        <Timeline />
-      </ColorSection>
+      {sections.length &&
+        sections.map(({ type, color, title, description }) => {
+          return (
+            <ColorSection
+              key={type}
+              color={color}
+              title={title}
+              description={description}
+            >
+              {type === "section-alpha" && <Timeline />}
+              {type === "section-beta" && (
+                <Video src={video.src} type={video.type} />
+              )}
+            </ColorSection>
+          );
+        })}
     </PageWrapper>
   );
 }

From 9904b3b5c0d469b79df971c719ec22774bb8ba5d Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 16:39:00 +0200
Subject: [PATCH 09/31] styles

---
 assets/sass/colors.scss              |  3 ++
 assets/sass/common/colorSection.scss | 61 ++++++++++++++++++++++++----
 2 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss
index 7c63d11..bcc3e69 100644
--- a/assets/sass/colors.scss
+++ b/assets/sass/colors.scss
@@ -5,6 +5,9 @@ $clients-background: #f2f4f8;
 $case-studies-background: #f2f4f8;
 
 $green-background: linear-gradient(90deg, #4be2c8, #2ac8e8);
+$pink-background: linear-gradient(90deg, #ffc453, #ff7e35);
+$orange-background: linear-gradient(90deg, #ff7e35, #ff6489);
+
 $main: white;
 $default: #f8f9fa;
 $additional: #c2c2c2;
diff --git a/assets/sass/common/colorSection.scss b/assets/sass/common/colorSection.scss
index 976a0e8..0ab917c 100644
--- a/assets/sass/common/colorSection.scss
+++ b/assets/sass/common/colorSection.scss
@@ -13,26 +13,73 @@
   }
 }
 
-.green {
+.green,
+.blue {
   .color-block {
     background: $green-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
+      }
+    }
   }
 }
 
-.gray {
+.pink {
   .color-block {
-    background-color: $default;
+    background: $pink-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
+      }
+    }
+  }
+}
 
-    &-title {
-      color: $prime;
+.orange {
+  .color-block {
+    background: $orange-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
+      }
     }
+  }
+}
 
-    &-description {
-      color: $prime;
+.purple,
+.prime {
+  .color-block {
+    .title-section {
+      h4,
+      p {
+        color: $main;
+      }
     }
   }
 }
 
+.gray {
+  .color-block {
+    background-color: $default;
+  }
+}
+
+.default {
+  .color-block {
+    background-color: $default;
+  }
+}
+
+.main {
+  .color-block {
+    background-color: $main;
+  }
+}
+
 @media only screen and (max-width: $mobile) {
   .color-block {
     &-description {

From 6ca5bb4cc97b7dd7541bfe7c85f6912c6cb6ef0c Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 16:49:04 +0200
Subject: [PATCH 10/31] styles

---
 assets/sass/common/colorSection.scss | 3 ++-
 assets/sass/common/index.scss        | 1 -
 assets/sass/consts.scss              | 1 +
 code/common/colorSection/index.js    | 6 ++----
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/assets/sass/common/colorSection.scss b/assets/sass/common/colorSection.scss
index 0ab917c..5386b7d 100644
--- a/assets/sass/common/colorSection.scss
+++ b/assets/sass/common/colorSection.scss
@@ -1,6 +1,7 @@
 .color-block {
   width: 100%;
-  padding: $section-gap 0;
+  padding: $title-gap 0;
+  transition: height 0.5s;
 
   &-title {
     color: $main;
diff --git a/assets/sass/common/index.scss b/assets/sass/common/index.scss
index b285565..d043075 100644
--- a/assets/sass/common/index.scss
+++ b/assets/sass/common/index.scss
@@ -124,7 +124,6 @@ h4,
 h5,
 h6 {
   font-family: $headers-font;
-  color: $main-text;
 }
 p,
 a,
diff --git a/assets/sass/consts.scss b/assets/sass/consts.scss
index f8541e3..e018c8e 100644
--- a/assets/sass/consts.scss
+++ b/assets/sass/consts.scss
@@ -8,6 +8,7 @@ $dark-color: #191919;
 $font-color: #070f1a;
 $content-gap: 20px;
 $section-gap: 50px;
+$title-gap: 100px;
 
 $main-grid: 950px;
 $radius: 20px;
diff --git a/code/common/colorSection/index.js b/code/common/colorSection/index.js
index 1f3238a..a76f963 100644
--- a/code/common/colorSection/index.js
+++ b/code/common/colorSection/index.js
@@ -6,10 +6,8 @@ const ColorSection = ({ color, title, description, paragraphs, children }) => {
     <div className={color}>
       <div className="color-block">
         <div className="page-common-block">
-          <h4 className="color-block-title">{title}</h4>
-          {description && (
-            <p className="color-block-description">{description}</p>
-          )}
+          <h4>{title}</h4>
+          {description && <p>{description}</p>}
 
           {paragraphs && <Paragraphs paragraphs={paragraphs} />}
 

From fe4d1831a3ed72b1f938554ba2ea44ab71b8a77d Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Tue, 27 Dec 2022 16:55:17 +0200
Subject: [PATCH 11/31] refactor

---
 code/common/colorSection/index.js | 8 +++-----
 code/common/video/index.js        | 8 +++++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/code/common/colorSection/index.js b/code/common/colorSection/index.js
index a76f963..1e0b6c2 100644
--- a/code/common/colorSection/index.js
+++ b/code/common/colorSection/index.js
@@ -1,18 +1,16 @@
 import Paragraphs from "./paragraphs";
 import React from "react";
+import TitleSection from "../titleSection";
 
 const ColorSection = ({ color, title, description, paragraphs, children }) => {
   return (
     <div className={color}>
       <div className="color-block">
         <div className="page-common-block">
-          <h4>{title}</h4>
-          {description && <p>{description}</p>}
-
+          <TitleSection title={title} description={description} />
           {paragraphs && <Paragraphs paragraphs={paragraphs} />}
-
-          {children}
         </div>
+        {children}
       </div>
     </div>
   );
diff --git a/code/common/video/index.js b/code/common/video/index.js
index 61c9155..43d660f 100644
--- a/code/common/video/index.js
+++ b/code/common/video/index.js
@@ -3,9 +3,11 @@ import animations from "../../../assets/js/animations";
 
 function Video({ src, type }) {
   return (
-    <video className="video" controls data-aos={animations.up}>
-      <source src={src} type={type} />
-    </video>
+    <div className="page-common-block">
+      <video className="video" controls data-aos={animations.up}>
+        <source src={src} type={type} />
+      </video>
+    </div>
   );
 }
 

From b199f462c221ffd3c9db0e6936f20934a42c6e1c Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 28 Dec 2022 09:56:08 +0200
Subject: [PATCH 12/31] team members

---
 assets/js/common/about-us/index.js            |  4 +-
 assets/js/common/about-us/teams.js            | 50 ++++++++++++++++++
 assets/sass/common/index.scss                 |  3 +-
 assets/sass/common/team.scss                  | 51 +++++++++++++++++++
 assets/sass/consts.scss                       |  2 +-
 code/common/member/index.js                   | 27 ++++++++++
 code/screens/about-us/index.js                | 20 ++++++++
 .../home/sections/team/components/member.js   |  2 +-
 8 files changed, 154 insertions(+), 5 deletions(-)
 create mode 100644 assets/js/common/about-us/teams.js
 create mode 100644 assets/sass/common/team.scss
 create mode 100644 code/common/member/index.js

diff --git a/assets/js/common/about-us/index.js b/assets/js/common/about-us/index.js
index 811edee..610ea13 100644
--- a/assets/js/common/about-us/index.js
+++ b/assets/js/common/about-us/index.js
@@ -6,7 +6,7 @@ export const ABOUT_US_DETAILS = {
     "We help Fortune 500 companies, startups, and enterprises to build relevant digital products, train their teams, solve business problems, and reduce costs while increasing efficiency.",
 
   video: {
-    src: "https://dms.licdn.com/playlist/C4D05AQFmLxavnNLPxQ/mp4-720p-30fp-crf28/0/1640537394791?e=1670252400&v=beta&t=pxrl2OqClkWOMHhHrPttHic1hSZZwbaiPsNK_89FqJo",
+    src: "https://www.linkedin.com/company/gotechgroup/videos/native/urn:li:ugcPost:6880909146707787776/",
     type: "video/mp4",
   },
 
@@ -35,7 +35,7 @@ export const ABOUT_US_DETAILS = {
     {
       type: "section-delta",
       color: COLORS.MAIN,
-      title: "our best team!",
+      title: "Meet our professional team!",
       description:
         "At GoTech, we believe in the power of collaboration and partnerships. We work closely with our clients to understand their unique challenges and develop solutions that are tailored to their specific needs. Our team is dedicated to helping our clients achieve their goals and succeed in today's competitive market.",
     },
diff --git a/assets/js/common/about-us/teams.js b/assets/js/common/about-us/teams.js
new file mode 100644
index 0000000..468c541
--- /dev/null
+++ b/assets/js/common/about-us/teams.js
@@ -0,0 +1,50 @@
+export const TEAMS = [
+  {
+    name: "Yaniv Peleg",
+    position: "CEO",
+    image: "/assets/images/home/team/yaniv.jpg",
+    linkedin: "https://www.linkedin.com/in/yaniv-peleg/",
+  },
+  {
+    name: "Lidor Itzhari",
+    position: "COO",
+    image: "/assets/images/home/team/lidor.jpg",
+    linkedin: "https://www.linkedin.com/in/lidoritzhari/",
+  },
+  {
+    name: "Doron Feldman",
+    position: "CTO",
+    image: "/assets/images/home/team/doron.jpg",
+    linkedin: "https://www.linkedin.com/in/doron-feldman/",
+  },
+  {
+    name: "Assaf Balzamovich",
+    position: "Head of QA Automation",
+    image: "/assets/images/home/team/assaf.jpg",
+    linkedin: "https://www.linkedin.com/in/assaf-balzamovich/",
+  },
+  {
+    name: "Raz Mantzur",
+    position: "Head of Web",
+    image: "/assets/images/home/team/raz.jpg",
+    linkedin: "https://www.linkedin.com/in/raz-mantzur/",
+  },
+  {
+    name: "Giora Krasilshchik",
+    position: "Head of Mobile",
+    image: "/assets/images/home/team/giora.jpg",
+    linkedin: "https://www.linkedin.com/in/giora-krasilshchik-47ab8219/",
+  },
+  {
+    name: "Evgeny Tofler",
+    position: "Head of DBA",
+    image: "/assets/images/home/team/evgeny.jpg",
+    linkedin: "https://www.linkedin.com/in/evgeny-tofler-8221a15b/",
+  },
+  {
+    name: "Mor Armoni", //Gur?
+    position: "HR Manager",
+    image: "/assets/images/home/team/mor.jpg",
+    linkedin: "https://www.linkedin.com/in/morarmoni/",
+  },
+];
diff --git a/assets/sass/common/index.scss b/assets/sass/common/index.scss
index d043075..daf45fc 100644
--- a/assets/sass/common/index.scss
+++ b/assets/sass/common/index.scss
@@ -11,6 +11,7 @@
 @import "./parallax.scss";
 @import "./timeline.scss";
 @import "./video.scss";
+@import "./team.scss";
 
 .flex-start {
   display: flex;
@@ -117,7 +118,7 @@ $component-width: calc(100% - 100px);
 }
 
 $main-font: "Poppins", sans-serif;
-$headers-font: "Heebo", sans-serif;
+$headers-font: "Poppins", sans-serif;
 
 h3,
 h4,
diff --git a/assets/sass/common/team.scss b/assets/sass/common/team.scss
new file mode 100644
index 0000000..2353d41
--- /dev/null
+++ b/assets/sass/common/team.scss
@@ -0,0 +1,51 @@
+.team {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  &-member {
+    &-wrapper {
+      width: 30%;
+      height: 290px;
+      margin: 10px;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    &-image {
+      width: 100%;
+      height: auto;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+
+      img {
+        border-radius: $radius;
+      }
+    }
+
+    &-content {
+      width: calc(100% - 20px);
+      margin: auto auto 15px;
+      padding: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      background-color: $main;
+      position: relative;
+      border-radius: $radius;
+
+      h6 {
+        font-size: 14px;
+      }
+      p {
+        font-size: 12px;
+      }
+      i {
+        font-size: 20px;
+      }
+    }
+  }
+}
diff --git a/assets/sass/consts.scss b/assets/sass/consts.scss
index e018c8e..b53c6c1 100644
--- a/assets/sass/consts.scss
+++ b/assets/sass/consts.scss
@@ -11,5 +11,5 @@ $section-gap: 50px;
 $title-gap: 100px;
 
 $main-grid: 950px;
-$radius: 20px;
+$radius: 10px;
 $circle: 50px;
diff --git a/code/common/member/index.js b/code/common/member/index.js
new file mode 100644
index 0000000..15889b9
--- /dev/null
+++ b/code/common/member/index.js
@@ -0,0 +1,27 @@
+import React from "react";
+import animations from "../../../assets/js/animations";
+
+const Member = ({ name, position, image, linkedin }) => {
+  return (
+    <div className="team-member-wrapper">
+      <div className="team-member-image">
+        <img src={image} alt="client images" />
+      </div>
+      <div
+        className="team-member-content"
+        data-aos={animations.up}
+        data-aos-delay="150"
+      >
+        <div>
+          <h6>{name}</h6>
+          <p>{position}</p>
+        </div>
+        <a href={linkedin} target="_blank">
+          <i className="fa-brands fa-linkedin"></i>
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Member;
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index fdcc72f..d2d3e24 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -1,9 +1,11 @@
 import ColorSection from "../../common/colorSection";
+import Member from "../../common/member";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
 import Timeline from "./components/timeline";
 import Video from "../../common/video";
 import { ABOUT_US_DETAILS } from "../../../assets/js/common/about-us";
+import { TEAMS } from "../../../assets/js/common/about-us/teams";
 import { COLORS } from "../../../assets/js/common/colors";
 
 function AboutUs({ marquee, contact, _relativeURL, _ID }) {
@@ -31,6 +33,24 @@ function AboutUs({ marquee, contact, _relativeURL, _ID }) {
               {type === "section-beta" && (
                 <Video src={video.src} type={video.type} />
               )}
+              {type === "section-delta" && (
+                <div className="page-common-block">
+                  <div className="team">
+                    {TEAMS.length &&
+                      TEAMS.map(({ name, position, image, linkedin }) => {
+                        return (
+                          <Member
+                            key={name}
+                            name={name}
+                            position={position}
+                            image={image}
+                            linkedin={linkedin}
+                          />
+                        );
+                      })}
+                  </div>
+                </div>
+              )}
             </ColorSection>
           );
         })}
diff --git a/code/screens/home/sections/team/components/member.js b/code/screens/home/sections/team/components/member.js
index 56356c7..766b632 100644
--- a/code/screens/home/sections/team/components/member.js
+++ b/code/screens/home/sections/team/components/member.js
@@ -1,6 +1,6 @@
+import Image from "../../../../../common/img";
 import React from "react";
 import animations from "../../../../../../assets/js/animations";
-import Image from "../../../../../common/img";
 import { handleUrl } from "../../../../../utils";
 
 const Member = ({ image, _relativeURL, _ID, _body }) => {

From bf12e251bded50bd96572776d8e6322b59f91698 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 28 Dec 2022 11:39:39 +0200
Subject: [PATCH 13/31] video

---
 assets/js/common/about-us/index.js         |  4 ++--
 assets/sass/common/video.scss              | 15 +++++++++++++--
 code/common/video/index.js                 |  8 ++++----
 code/screens/about-us/index.js             |  4 ++--
 content/_shared/footer/index.md            |  2 +-
 content/_shared/navbar/navigation/index.md |  2 +-
 6 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/assets/js/common/about-us/index.js b/assets/js/common/about-us/index.js
index 610ea13..f96fe6f 100644
--- a/assets/js/common/about-us/index.js
+++ b/assets/js/common/about-us/index.js
@@ -6,8 +6,8 @@ export const ABOUT_US_DETAILS = {
     "We help Fortune 500 companies, startups, and enterprises to build relevant digital products, train their teams, solve business problems, and reduce costs while increasing efficiency.",
 
   video: {
-    src: "https://www.linkedin.com/company/gotechgroup/videos/native/urn:li:ugcPost:6880909146707787776/",
-    type: "video/mp4",
+    src: "https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:6880909146707787776?compact=1",
+    title: "GoTech",
   },
 
   sections: [
diff --git a/assets/sass/common/video.scss b/assets/sass/common/video.scss
index c30896b..8e79af0 100644
--- a/assets/sass/common/video.scss
+++ b/assets/sass/common/video.scss
@@ -1,6 +1,17 @@
 .video {
   width: 100%;
-  height: 100%;
+  height: 500px;
   background-color: $default;
-  border-radius: $radius;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border-radius: $radius;
+  }
+}
+
+@media only screen and (max-width: $mobile) {
+  .video {
+    height: 200px;
+  }
 }
diff --git a/code/common/video/index.js b/code/common/video/index.js
index 43d660f..6b2ddf6 100644
--- a/code/common/video/index.js
+++ b/code/common/video/index.js
@@ -1,12 +1,12 @@
 import React from "react";
 import animations from "../../../assets/js/animations";
 
-function Video({ src, type }) {
+function Video({ src, title }) {
   return (
     <div className="page-common-block">
-      <video className="video" controls data-aos={animations.up}>
-        <source src={src} type={type} />
-      </video>
+      <div className="video">
+        <iframe src={src} allowFullScreen title={title}></iframe>
+      </div>
     </div>
   );
 }
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index d2d3e24..53d92ae 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -31,11 +31,11 @@ function AboutUs({ marquee, contact, _relativeURL, _ID }) {
             >
               {type === "section-alpha" && <Timeline />}
               {type === "section-beta" && (
-                <Video src={video.src} type={video.type} />
+                <Video src={video.src} type={video.title} />
               )}
               {type === "section-delta" && (
                 <div className="page-common-block">
-                  <div className="team">
+                  <div className="team" id="team">
                     {TEAMS.length &&
                       TEAMS.map(({ name, position, image, linkedin }) => {
                         return (
diff --git a/content/_shared/footer/index.md b/content/_shared/footer/index.md
index ed7a83f..ec1aadb 100644
--- a/content/_shared/footer/index.md
+++ b/content/_shared/footer/index.md
@@ -8,7 +8,7 @@ variables:
         [
           { title: About Company, link: "/about" },
           { title: Clients, link: "/#clients" },
-          { title: Teams, link: "/#team" },
+          { title: Teams, link: "/about/#team" },
           { title: Careers, link: "/careers/" },
         ],
     },
diff --git a/content/_shared/navbar/navigation/index.md b/content/_shared/navbar/navigation/index.md
index fbe091c..04d1a95 100644
--- a/content/_shared/navbar/navigation/index.md
+++ b/content/_shared/navbar/navigation/index.md
@@ -11,7 +11,7 @@ links:
     value: /#clients
 
   - name: team
-    value: /#team
+    value: /about/#team
 
   - name: cases
     value: /case-studies

From 8ba86f22ad7dd1414fb7d710d20933582a1e9752 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 28 Dec 2022 11:50:15 +0200
Subject: [PATCH 14/31] refactor

---
 assets/js/common/about-us/index.js            |  2 +-
 .../about-us/components/listMembers.js        | 25 +++++++++++++++++++
 code/screens/about-us/index.js                | 22 ++--------------
 3 files changed, 28 insertions(+), 21 deletions(-)
 create mode 100644 code/screens/about-us/components/listMembers.js

diff --git a/assets/js/common/about-us/index.js b/assets/js/common/about-us/index.js
index f96fe6f..a19ce43 100644
--- a/assets/js/common/about-us/index.js
+++ b/assets/js/common/about-us/index.js
@@ -1,7 +1,7 @@
 import { COLORS } from "../colors";
 
 export const ABOUT_US_DETAILS = {
-  title: "GoTech Family Introduce",
+  title: "GoTech Family Introduction",
   description:
     "We help Fortune 500 companies, startups, and enterprises to build relevant digital products, train their teams, solve business problems, and reduce costs while increasing efficiency.",
 
diff --git a/code/screens/about-us/components/listMembers.js b/code/screens/about-us/components/listMembers.js
new file mode 100644
index 0000000..b22afd1
--- /dev/null
+++ b/code/screens/about-us/components/listMembers.js
@@ -0,0 +1,25 @@
+import Member from "../../../common/member";
+import React from "react";
+
+function ListMembers({ teams }) {
+  return (
+    <div className="page-common-block">
+      <div className="team" id="team">
+        {teams.length &&
+          teams.map(({ name, position, image, linkedin }) => {
+            return (
+              <Member
+                key={name}
+                name={name}
+                position={position}
+                image={image}
+                linkedin={linkedin}
+              />
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+export default ListMembers;
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index 53d92ae..edcc885 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -1,12 +1,11 @@
 import ColorSection from "../../common/colorSection";
-import Member from "../../common/member";
+import ListMembers from "./components/listMembers";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
 import Timeline from "./components/timeline";
 import Video from "../../common/video";
 import { ABOUT_US_DETAILS } from "../../../assets/js/common/about-us";
 import { TEAMS } from "../../../assets/js/common/about-us/teams";
-import { COLORS } from "../../../assets/js/common/colors";
 
 function AboutUs({ marquee, contact, _relativeURL, _ID }) {
   const { title, description, sections, video } = ABOUT_US_DETAILS;
@@ -33,24 +32,7 @@ function AboutUs({ marquee, contact, _relativeURL, _ID }) {
               {type === "section-beta" && (
                 <Video src={video.src} type={video.title} />
               )}
-              {type === "section-delta" && (
-                <div className="page-common-block">
-                  <div className="team" id="team">
-                    {TEAMS.length &&
-                      TEAMS.map(({ name, position, image, linkedin }) => {
-                        return (
-                          <Member
-                            key={name}
-                            name={name}
-                            position={position}
-                            image={image}
-                            linkedin={linkedin}
-                          />
-                        );
-                      })}
-                  </div>
-                </div>
-              )}
+              {type === "section-delta" && <ListMembers teams={TEAMS} />}
             </ColorSection>
           );
         })}

From 7ce7b4ede0dc9b2fdc55454d4c3cf299614048e4 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 08:26:28 +0200
Subject: [PATCH 15/31] refactor

---
 code/common/listSection/index.js | 42 ++++++++++++++++++++++++++++++++
 code/common/pageWrapper/index.js | 22 ++++++++++++++++-
 code/screens/about-us/index.js   | 24 ++++--------------
 3 files changed, 68 insertions(+), 20 deletions(-)
 create mode 100644 code/common/listSection/index.js

diff --git a/code/common/listSection/index.js b/code/common/listSection/index.js
new file mode 100644
index 0000000..eadbc06
--- /dev/null
+++ b/code/common/listSection/index.js
@@ -0,0 +1,42 @@
+import ColorSection from "../ColorSection";
+import React from "react";
+
+function Sections({
+  sections,
+  color,
+  alpha,
+  beta,
+  delta,
+  gamma,
+  epsilon,
+  zeta,
+}) {
+  const mainColor = color;
+
+  return (
+    <div>
+      {sections.length &&
+        sections.map(({ type, color, title, description, paragraphs }) => {
+          return (
+            <div key={type} className={type}>
+              <ColorSection
+                color={color || mainColor}
+                title={title}
+                description={description}
+                paragraphs={paragraphs}
+              >
+                {type === "section-alpha" && alpha}
+                {type === "section-beta" && beta}
+                {type === "section-gamma" && gamma}
+                {type === "section-delta" && delta}
+                {type === "section-epsilon" && epsilon}
+                {type === "section-zeta" && zeta}
+              </ColorSection>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default Sections;
diff --git a/code/common/pageWrapper/index.js b/code/common/pageWrapper/index.js
index 30b4321..af77e77 100644
--- a/code/common/pageWrapper/index.js
+++ b/code/common/pageWrapper/index.js
@@ -1,11 +1,19 @@
 import Header from "../header";
 import React from "react";
+import Sections from "../listSection";
 import { handleUrl } from "../../utils";
 
 function PageWrapper({
+  children,
   title,
   description,
-  children,
+  sections,
+  alpha,
+  beta,
+  gamma,
+  delta,
+  epsilon,
+  zeta,
   marquee,
   contact,
   _relativeURL,
@@ -15,6 +23,18 @@ function PageWrapper({
     <div>
       <Header title={title} description={description} />
 
+      {sections && (
+        <Sections
+          sections={sections}
+          alpha={alpha}
+          beta={beta}
+          gamma={gamma}
+          delta={delta}
+          epsilon={epsilon}
+          zeta={zeta}
+        />
+      )}
+
       {children}
 
       <div>{marquee}</div>
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index edcc885..5b5cc46 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -14,29 +14,15 @@ function AboutUs({ marquee, contact, _relativeURL, _ID }) {
     <PageWrapper
       title={title}
       description={description}
+      sections={sections}
+      alpha={<Timeline />}
+      beta={<Video src={video.src} type={video.title} />}
+      delta={<ListMembers teams={TEAMS} />}
       marquee={marquee}
       contact={contact}
       _relativeURL={_relativeURL}
       _ID={_ID}
-    >
-      {sections.length &&
-        sections.map(({ type, color, title, description }) => {
-          return (
-            <ColorSection
-              key={type}
-              color={color}
-              title={title}
-              description={description}
-            >
-              {type === "section-alpha" && <Timeline />}
-              {type === "section-beta" && (
-                <Video src={video.src} type={video.title} />
-              )}
-              {type === "section-delta" && <ListMembers teams={TEAMS} />}
-            </ColorSection>
-          );
-        })}
-    </PageWrapper>
+    />
   );
 }
 

From 82cf92b6091fb07de416e5474bf55aa3f7c982c8 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 08:28:32 +0200
Subject: [PATCH 16/31] refactor

---
 code/common/pageWrapper/index.js              |  3 -
 code/screens/case-studies/index.js            | 28 +++-------
 .../case-studies/project-page/index.js        | 56 ++++++-------------
 3 files changed, 25 insertions(+), 62 deletions(-)

diff --git a/code/common/pageWrapper/index.js b/code/common/pageWrapper/index.js
index af77e77..b7ddf62 100644
--- a/code/common/pageWrapper/index.js
+++ b/code/common/pageWrapper/index.js
@@ -4,7 +4,6 @@ import Sections from "../listSection";
 import { handleUrl } from "../../utils";
 
 function PageWrapper({
-  children,
   title,
   description,
   sections,
@@ -35,8 +34,6 @@ function PageWrapper({
         />
       )}
 
-      {children}
-
       <div>{marquee}</div>
       <div className="page-common-sub-section">{contact}</div>
 
diff --git a/code/screens/case-studies/index.js b/code/screens/case-studies/index.js
index 29cb7f0..84f72b6 100644
--- a/code/screens/case-studies/index.js
+++ b/code/screens/case-studies/index.js
@@ -1,36 +1,22 @@
-import ColorSection from "../../common/ColorSection";
+import ListProjects from "./components/listProjects";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
-import { COLORS } from "../../../assets/js/common/colors";
+import { CASE_STUDIES_DETAILS } from "../../../assets/js/common/case-studies-details";
 
-const isEmpty = "Right now we don't have a new examples for you!";
+function CaseStudies({ marquee, contact, _relativeURL, _ID }) {
+  const { title, description, sections } = CASE_STUDIES_DETAILS;
 
-function CaseStudies({
-  title,
-  description,
-  projects,
-  marquee,
-  contact,
-  _relativeURL,
-  _ID,
-}) {
   return (
     <PageWrapper
       title={title}
       description={description}
+      sections={sections}
+      alpha={<ListProjects />}
       marquee={marquee}
       contact={contact}
       _relativeURL={_relativeURL}
       _ID={_ID}
-    >
-      {projects.length ? (
-        projects.map((project) => {
-          return <div key={project.key}>{project}</div>;
-        })
-      ) : (
-        <ColorSection color={COLORS.GREEN} title={isEmpty} />
-      )}
-    </PageWrapper>
+    />
   );
 }
 
diff --git a/code/screens/case-studies/project-page/index.js b/code/screens/case-studies/project-page/index.js
index cb09405..d06ecb1 100644
--- a/code/screens/case-studies/project-page/index.js
+++ b/code/screens/case-studies/project-page/index.js
@@ -1,51 +1,31 @@
-import DetailsProject from "../components/detailsProject";
+import DetailsSection from "../components/detailsSection";
 import PageWrapper from "../../../common/pageWrapper";
 import Parallax from "../../../common/parallax";
 import React from "react";
+import Steps from "../../../common/steps";
 import { PROJECTS_INFO } from "../../../../assets/js/common/case-studies-projects";
-import { COLORS } from "../../../../assets/js/common/colors";
-
-export const TYPES = {
-  CLIENT: "client",
-  CHALLENGE: "challenge",
-  SOLUTION: "solution",
-};
 
 function ProjectPage({ type, marquee, contact, _relativeURL, _ID }) {
-  const {
-    title,
-    description,
-    images,
-    client,
-    challenge,
-    solution,
-    introduction,
-  } = PROJECTS_INFO[type];
-  const { main, parallax } = images;
+  const { title, description, sections, steps, images, introduction } =
+    PROJECTS_INFO[type];
 
-  const details = [
-    { type: TYPES.CLIENT, content: client, color: COLORS.GREEN },
-    { type: TYPES.CHALLENGE, content: challenge, color: COLORS.GRAY },
-    { type: TYPES.SOLUTION, content: solution, color: COLORS.GREEN },
-  ];
+  const { main, parallax } = images;
 
   return (
-    <PageWrapper
-      title={title}
-      description={description}
-      marquee={marquee}
-      contact={contact}
-      _relativeURL={_relativeURL}
-      _ID={_ID}
-    >
-      <DetailsProject
-        details={details}
-        introduction={introduction}
-        main={main}
+    <div className="project-page">
+      <PageWrapper
+        title={title}
+        description={description}
+        sections={sections}
+        beta={<DetailsSection main={main} introduction={introduction} />}
+        gamma={<Steps steps={steps} />}
+        epsilon={<Parallax src={parallax.src} alt={parallax.alt} />}
+        marquee={marquee}
+        contact={contact}
+        _relativeURL={_relativeURL}
+        _ID={_ID}
       />
-
-      <Parallax src={parallax.src} alt={parallax.alt} />
-    </PageWrapper>
+    </div>
   );
 }
 

From c48fa34fa309f576b34a107cba7c4d1054579652 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 08:37:10 +0200
Subject: [PATCH 17/31] case studies refactor

---
 .../js/common/case-studies-details/index.js   | 13 ++++++++++
 .../case-studies/components/listProjects.js   | 24 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 assets/js/common/case-studies-details/index.js
 create mode 100644 code/screens/case-studies/components/listProjects.js

diff --git a/assets/js/common/case-studies-details/index.js b/assets/js/common/case-studies-details/index.js
new file mode 100644
index 0000000..3b06d2c
--- /dev/null
+++ b/assets/js/common/case-studies-details/index.js
@@ -0,0 +1,13 @@
+import { COLORS } from "../colors";
+
+export const CASE_STUDIES_DETAILS = {
+  title: "Case Studies",
+  description:
+    "Here are some examples of projects we worked on over the last few months. This will help you understand our work principles, and how we can change your futures.",
+  sections: [
+    {
+      type: "section-alpha",
+      color: COLORS.MAIN,
+    },
+  ],
+};
diff --git a/code/screens/case-studies/components/listProjects.js b/code/screens/case-studies/components/listProjects.js
new file mode 100644
index 0000000..f562ab5
--- /dev/null
+++ b/code/screens/case-studies/components/listProjects.js
@@ -0,0 +1,24 @@
+import Left from "./left";
+import React from "react";
+import Right from "./right";
+import { PROJECTS_INFO } from "../../../../assets/js/common/case-studies-projects";
+
+function ListProjects() {
+  const projects = Object.values(PROJECTS_INFO);
+
+  return (
+    <div>
+      {projects.length &&
+        projects.map(({ type }, i) => {
+          const isEven = i % 2 === 0;
+          return (
+            <div key={type}>
+              {isEven ? <Left type={type} /> : <Right type={type} />}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default ListProjects;

From f2a903efb0244adc0c800a4f6380d1ec3bab8783 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 08:41:27 +0200
Subject: [PATCH 18/31] case studies refactor

---
 .../common/case-studies-projects/ai21labs.js  | 73 ++++++++++------
 .../js/common/case-studies-projects/base.js   | 76 ++++++++++++-----
 .../js/common/case-studies-projects/memomi.js | 71 +++++++++++-----
 .../common/case-studies-projects/novotalk.js  | 84 ++++++++++++-------
 .../js/common/case-studies-projects/orbs.js   | 74 ++++++++++------
 5 files changed, 255 insertions(+), 123 deletions(-)

diff --git a/assets/js/common/case-studies-projects/ai21labs.js b/assets/js/common/case-studies-projects/ai21labs.js
index eea9a22..e66d430 100644
--- a/assets/js/common/case-studies-projects/ai21labs.js
+++ b/assets/js/common/case-studies-projects/ai21labs.js
@@ -1,7 +1,47 @@
+import { COLORS } from "../colors";
+
 export const AI21LABS = {
+  type: "AI21LABS",
   title: "AI21 Labs",
   description:
     "When Machines Become Thought Partners. AI has a way to go before it matches human intelligence. We aim to get it a little bit closer.",
+
+  sections: [
+    {
+      type: "section-alpha",
+      color: COLORS.GREEN,
+      title: "About Client",
+      paragraphs: [
+        "AI21 Labs is a cutting-edge technology company that specializes in developing solutions to augment human writing.",
+        "They are the creators of Wordtune, a popular tool that helps users write clearly and authentically by suggesting the right sentences.",
+      ],
+    },
+    {
+      type: "section-beta",
+      color: COLORS.MAIN,
+    },
+    {
+      type: "section-gamma",
+      color: COLORS.DEFAULT,
+      title: "Challenge Faced",
+      description:
+        "AI21 Labs was facing several challenges with their QA automation tests. The tests were unstable, unorganized, and not providing the results they were looking for.",
+    },
+    {
+      type: "section-delta",
+      color: COLORS.GREEN,
+      title: "Our Solution",
+      paragraphs: [
+        "We designed a stable, high-performance, and easy-to-maintain test framework that suited AI21 Labs' specific needs.",
+        "Following best practices in test automation, using Playwright and Mocha, we designed the framework to be easy to use and maintain, while still providing the stability and performance that AI21 Labs needed. This allows them to have complete confidence in the results of their automated tests.",
+      ],
+    },
+    {
+      type: "section-epsilon",
+      color: COLORS.MAIN,
+    },
+  ],
+
   images: {
     mockup: {
       src: "/assets/images/case-studies/ai21labs/ai21labs1.jpg",
@@ -16,38 +56,23 @@ export const AI21LABS = {
       alt: "ai21labs",
     },
   },
-  client: {
-    title: "About Client:",
-    paragraphs: [
-      "AI21 Labs is a cutting-edge technology company that specializes in developing solutions to augment human writing.",
-      "They are the creators of Wordtune, a popular tool that helps users write clearly and authentically by suggesting the right sentences.",
-    ],
-  },
-  challenge: {
-    title: "Challenge Faced:",
-    description:
-      "AI21 Labs was facing several challenges with their QA automation tests. The tests were unstable, unorganized, and not providing the results they were looking for.",
-    steps: [
-      "Needed to be a new test framework that would support multi-platform tests on their Chrome extension",
-      "Needed to be migrated their previous tests into the new framework",
-    ],
-  },
-  solution: {
-    title: "Our Solution:",
-    paragraphs: [
-      "We designed a stable, high-performance, and easy-to-maintain test framework that suited AI21 Labs' specific needs.",
-      "Following best practices in test automation, using Playwright and Mocha, we designed the framework to be easy to use and maintain, while still providing the stability and performance that AI21 Labs needed. This allows them to have complete confidence in the results of their automated tests.",
-    ],
-  },
+
+  steps: [
+    "Needed to be a new test framework that would support multi-platform tests on their Chrome extension",
+    "Needed to be migrated their previous tests into the new framework",
+  ],
+
   introduction: [
     { title: "Country", description: "Israel" },
     { title: "Industry", description: "Artificial intelligence" },
-    { title: "Services Used", options: ["QA automation"], link: "/#services" },
+    { title: "Services Used", options: ["QA automation"], link: "/service/qa" },
     {
       title: "Technologies Stack",
       options: ["Playwright", "Mocha"],
+      link: "/service/qa/#technologies",
     },
   ],
+
   tags: ["Playwright", "Mocha"],
   button: { url: "/case-studies-project/ai21labs", btnText: "see more" },
 };
diff --git a/assets/js/common/case-studies-projects/base.js b/assets/js/common/case-studies-projects/base.js
index 021184d..e1ede2b 100644
--- a/assets/js/common/case-studies-projects/base.js
+++ b/assets/js/common/case-studies-projects/base.js
@@ -1,7 +1,47 @@
+import { COLORS } from "../colors";
+
 export const BASE = {
+  type: "BASE",
   title: "Base",
   description:
     "Base helps B2B companies engage their customers automatically throughout their lifecycle.",
+
+  sections: [
+    {
+      type: "section-alpha",
+      color: COLORS.GREEN,
+      title: "About Client",
+      paragraphs: [
+        "Base is a B2B company that helps other businesses engage with their customers throughout their lifecycle.",
+        "They offer a range of services, including advocacy, feedback, lead generation, and social amplification, all aimed at improving customer interactions and driving business growth. Base can help increase references, referrals, product reviews, ranking, loyalty, customer-based lead generation, crowd-based content creation, ideation, and more.",
+      ],
+    },
+    {
+      type: "section-beta",
+      color: COLORS.MAIN,
+    },
+    {
+      type: "section-gamma",
+      color: COLORS.DEFAULT,
+      title: "Challenge Faced",
+      description:
+        "As Base's client base grew, the demands on their R&D department increased.",
+    },
+    {
+      type: "section-delta",
+      color: COLORS.GREEN,
+      title: "Our Solution",
+      paragraphs: [
+        "We took full ownership of Base's End-to-End and API automated testing. Using Java, Cucumber, and Playwright, we designed a comprehensive framework that integrated smoothly into Base's CI processes.",
+        "We made automation an integral part of their manual regression testing, providing visibility through reporting, logging, and integration with external systems. This allowed our teams to work together effectively and provided Base with the confidence and reliability they needed to succeed.",
+      ],
+    },
+    {
+      type: "section-epsilon",
+      color: COLORS.MAIN,
+    },
+  ],
+
   images: {
     mockup: {
       src: "/assets/images/case-studies/base/base1.jpg",
@@ -16,37 +56,27 @@ export const BASE = {
       alt: "base",
     },
   },
-  client: {
-    title: "About Client:",
-    paragraphs: [
-      "Base is a B2B company that helps other businesses engage with their customers throughout their lifecycle.",
-      "They offer a range of services, including advocacy, feedback, lead generation, and social amplification, all aimed at improving customer interactions and driving business growth. Base can help increase references, referrals, product reviews, ranking, loyalty, customer-based lead generation, crowd-based content creation, ideation, and more.",
-    ],
-  },
-  challenge: {
-    title: "Challenge Faced:",
-    description:
-      "AI21 Labs was facing several challenges with their QA automation tests. The tests were unstable, unorganized, and not providing the results they were looking for.",
-    steps: [
-      "It was necessary to conduct a of End-to-End and API automated testing",
-    ],
-  },
-  solution: {
-    title: "Our Solution:",
-    paragraphs: [
-      "We took full ownership of Base's End-to-End and API automated testing. Using Java, Cucumber, and Playwright, we designed a comprehensive framework that integrated smoothly into Base's CI processes.",
-      "We made automation an integral part of their manual regression testing, providing visibility through reporting, logging, and integration with external systems. This allowed our teams to work together effectively and provided Base with the confidence and reliability they needed to succeed.",
-    ],
-  },
+
+  steps: [
+    "Base needed a solution that would integrate seamlessly into their existing processes and be easy for their teams to use.",
+    "It was necessary to conduct a of End-to-End and API automated testing",
+  ],
+
   introduction: [
     { title: "Country", description: "Israel" },
     { title: "Industry", description: "B2B Businesses" },
-    { title: "Services Used", options: ["QA automation"], link: "/#services" },
+    {
+      title: "Services Used",
+      options: ["QA automation"],
+      link: "/service/qa",
+    },
     {
       title: "Technologies Stack",
       options: ["Java", "Cucumber", "Playwright"],
+      link: "/service/qa/#technologies",
     },
   ],
+
   tags: ["Java", "Cucumber", "Playwright"],
   button: { url: "/case-studies-project/base", btnText: "see more" },
 };
diff --git a/assets/js/common/case-studies-projects/memomi.js b/assets/js/common/case-studies-projects/memomi.js
index 75d42d9..6d509f4 100644
--- a/assets/js/common/case-studies-projects/memomi.js
+++ b/assets/js/common/case-studies-projects/memomi.js
@@ -1,7 +1,46 @@
+import { COLORS } from "../colors";
+
 export const MEMOMI = {
+  type: "MEMOMI",
   title: "Memomi ",
   description:
     "Memomi is the award-winning smart mirror software transforming the luxury shopping market.",
+
+  sections: [
+    {
+      type: "section-alpha",
+      color: COLORS.GREEN,
+      title: "About Client",
+      paragraphs: [
+        "Memomi is a developer of an augmented reality and artificial intelligence platform that enables customers to try products virtually and receive personalized product recommendations. They approached GoTech needing help integrating an AR engine between their server and mobile applications.",
+      ],
+    },
+    {
+      type: "section-beta",
+      color: COLORS.MAIN,
+    },
+    {
+      type: "section-gamma",
+      color: COLORS.DEFAULT,
+      title: "Challenge Faced",
+      description:
+        "Memomi needed assistance integrating their complex AR engine between the server and mobile applications.",
+    },
+    {
+      type: "section-delta",
+      color: COLORS.GREEN,
+      title: "Our Solution",
+      paragraphs: [
+        "GoTech was able to help Memomi integrate the AR engine into their server and mobile applications, both for iOS and Android. Our team of experts has experience in AR and ML, and was able to deliver high-quality mobile applications that offered a seamless and engaging AR experience.",
+        "We also assisted Memomi in integrating the SDK into their clients' applications, further enhancing the functionality of their platform. With GoTech's help, Memomi was able to overcome the challenges of integrating their AR engine and take their platform to the next level. Memomi was eventually acquired by Walmart.",
+      ],
+    },
+    {
+      type: "section-epsilon",
+      color: COLORS.MAIN,
+    },
+  ],
+
   images: {
     mockup: {
       src: "/assets/images/case-studies/memomi/memomi1.jpg",
@@ -16,37 +55,23 @@ export const MEMOMI = {
       alt: "memomi",
     },
   },
-  client: {
-    title: "About Client:",
-    paragraphs: [
-      "Memomi is a developer of an augmented reality and artificial intelligence platform that enables customers to try products virtually and receive personalized product recommendations. They approached GoTech needing help integrating an AR engine between their server and mobile applications.",
-    ],
-  },
-  challenge: {
-    title: "Challenge Faced:",
-    description:
-      "Memomi needed assistance integrating their complex AR engine between the server and mobile applications.",
-    steps: [
-      "Needed to be integrating the SDK into their clients' applications",
-      "It was necessary to develop a system for machine learning and augmented reality",
-    ],
-  },
-  solution: {
-    title: "Our Solution:",
-    paragraphs: [
-      "GoTech was able to help Memomi integrate the AR engine into their server and mobile applications, both for iOS and Android. Our team of experts has experience in AR and ML, and was able to deliver high-quality mobile applications that offered a seamless and engaging AR experience.",
-      "We also assisted Memomi in integrating the SDK into their clients' applications, further enhancing the functionality of their platform. With GoTech's help, Memomi was able to overcome the challenges of integrating their AR engine and take their platform to the next level. Memomi was eventually acquired by Walmart.",
-    ],
-  },
+
+  steps: [
+    "Needed to be integrating the SDK into their clients' applications",
+    "It was necessary to develop a system for machine learning and augmented reality",
+  ],
+
   introduction: [
     { title: "Country", description: "Israel" },
     { title: "Industry", description: "AR Market" },
-    { title: "Services Used", options: ["Mobile"], link: "/#services" },
+    { title: "Services Used", options: ["Mobile"], link: "/service/mobile" },
     {
       title: "Technologies Stack",
       options: ["iOS", "Android", "ML", "AR", "SDK"],
+      link: "/service/mobile/#technologies",
     },
   ],
+
   tags: ["iOS", "Android", "ML", "AR", "SDK"],
   button: { url: "/case-studies-project/memomi", btnText: "see more" },
 };
diff --git a/assets/js/common/case-studies-projects/novotalk.js b/assets/js/common/case-studies-projects/novotalk.js
index 061d560..e37df23 100644
--- a/assets/js/common/case-studies-projects/novotalk.js
+++ b/assets/js/common/case-studies-projects/novotalk.js
@@ -1,7 +1,55 @@
+import { COLORS } from "../colors";
+
 export const NOVOTALK = {
+  type: "NOVOTALK",
   title: "Novotalk",
   description:
     "Novotalk is an open platform for people with speech impediments. you will be helped to choose an individual approach to training and you will learn how to speak and pronounce words correctly.",
+
+  sections: [
+    {
+      type: "section-alpha",
+      color: COLORS.GREEN,
+      title: "About Client",
+      paragraphs: [
+        "Novotalk develops on-demand (asynchronous), self-directed speech and language teletherapy solutions that allow individuals with speech impairments to learn, practice, gain, and maintain intelligible speech remotely, independently, and discreetly.",
+        "They came to us with a range of technical challenges and performance issues. They were looking for a partner who could help them improve their platform and support their growth.",
+      ],
+    },
+    {
+      type: "section-beta",
+      color: COLORS.MAIN,
+    },
+    {
+      type: "section-gamma",
+      color: COLORS.DEFAULT,
+      title: "Challenge Faced",
+      description:
+        "When Novotalk approached GoTech, their platform was in need of significant refactoring and performance improvements.",
+    },
+    {
+      type: "section-delta",
+      color: COLORS.GREEN,
+      title: "Our Solution",
+      paragraphs: [
+        "GoTech was able to take ownership of Novotalk's entire system and address their technical challenges. We refactored both the client-side and server-side of the platform, solving numerous performance issues along the way. We also built an entire CI/CD process on AWS, including cost optimizations to help Novotalk save money.",
+        "Finally, we worked with Novotalk to develop a comprehensive QA testing plan that provided better coverage for their system.",
+        "Today, GoTech is Novotalk's entire technological team, and we continue to support them as they grow. With our help, Novotalk has been able to improve the performance and reliability of their platform, and is well-positioned for future growth.",
+      ],
+    },
+    {
+      type: "section-epsilon",
+      color: COLORS.MAIN,
+    },
+  ],
+
+  steps: [
+    "Both the client-side and server-side systems were outdated",
+    "Needed to be added CI/CD pipeline",
+    "Set up an quickly and efficiently deploy new features and updates",
+    "Needed to be develop a testing system to cover the whole platform",
+  ],
+
   images: {
     mockup: {
       src: "/assets/images/case-studies/novotalk/novotalk1.jpg",
@@ -16,42 +64,22 @@ export const NOVOTALK = {
       alt: "novotalk",
     },
   },
-  client: {
-    title: "About Client:",
-    paragraphs: [
-      "Novotalk develops on-demand (asynchronous), self-directed speech and language teletherapy solutions that allow individuals with speech impairments to learn, practice, gain, and maintain intelligible speech remotely, independently, and discreetly.",
-      "They came to us with a range of technical challenges and performance issues. They were looking for a partner who could help them improve their platform and support their growth.",
-    ],
-  },
-  challenge: {
-    title: "Challenge Faced:",
-    description:
-      "When Novotalk approached GoTech, their platform was in need of significant refactoring and performance improvements.",
-    steps: [
-      "Both the client-side and server-side systems were outdated",
-      "Needed to be added CI/CD pipeline",
-      "Set up an quickly and efficiently deploy new features and updates",
-      "Needed to be develop a testing system to cover the whole platform",
-    ],
-  },
-  solution: {
-    title: "Our Solution:",
-    paragraphs: [
-      "GoTech was able to take ownership of Novotalk's entire system and address their technical challenges. We refactored both the client-side and server-side of the platform, solving numerous performance issues along the way. We also built an entire CI/CD process on AWS, including cost optimizations to help Novotalk save money.",
-      "Finally, we worked with Novotalk to develop a comprehensive QA testing plan that provided better coverage for their system.",
-      "Today, GoTech is Novotalk's entire technological team, and we continue to support them as they grow. With our help, Novotalk has been able to improve the performance and reliability of their platform, and is well-positioned for future growth.",
-    ],
-  },
+
   introduction: [
     { title: "Country", description: "Israel" },
     { title: "Industry", description: "Language Therapy" },
     {
       title: "Services Used",
       options: ["FrontEnd", "BackEnd"],
-      link: "/#services",
+      link: "/service/web",
+    },
+    {
+      title: "Technologies Stack",
+      options: ["CSS", "React", "AWS"],
+      link: "/service/web/#technologies",
     },
-    { title: "Technologies Stack", options: ["CSS", "React", "AWS"] },
   ],
+
   tags: ["CSS", "React", "AWS"],
   button: { url: "/case-studies-project/novotalk", btnText: "see more" },
 };
diff --git a/assets/js/common/case-studies-projects/orbs.js b/assets/js/common/case-studies-projects/orbs.js
index acf9471..833524a 100644
--- a/assets/js/common/case-studies-projects/orbs.js
+++ b/assets/js/common/case-studies-projects/orbs.js
@@ -1,7 +1,48 @@
+import { COLORS } from "../colors";
+
 export const ORBS = {
+  type: "ORBS",
   title: "Orbs ",
   description:
-    "Orbs is an open, decentralized and public blockchain infrastructure executed by a secure network of permissionless validators using Proof-of-Stake (PoS) consensus.",
+    "Orbs is an open, decentralized and public blockchain infrastructure executed by a secure network of permission less validators using Proof-of-Stake (PoS) consensus.",
+
+  sections: [
+    {
+      type: "section-alpha",
+      color: COLORS.GREEN,
+      title: "About Client",
+      paragraphs: [
+        "Orbs is a developer of a public blockchain infrastructure designed for mass usage applications and close integration with EVM-based L1’s such as Ethereum, Binance SmartChain and Polygon.",
+        "They came to GoTech needing help building complex Front-End projects, including dashboards, monitors, and the company's website.",
+      ],
+    },
+    {
+      type: "section-beta",
+      color: COLORS.MAIN,
+    },
+    {
+      type: "section-gamma",
+      color: COLORS.DEFAULT,
+      title: "Challenge Faced",
+      description:
+        "Orbs was looking for a partner who could take ownership of entire projects, think big, and work independently while providing high-quality products.",
+    },
+    {
+      type: "section-delta",
+      color: COLORS.GREEN,
+      title: "Our Solution",
+      paragraphs: [
+        "GoTech was able to help Orbs with their Front-End projects, taking ownership of entire projects and delivering high-quality results. Our team has the ability to think big and work independently, and was able to provide Orbs with the solutions they needed.",
+        "We were able to build complex dashboards, monitors, and the company's website, all to their specifications and to the highest standards.",
+        "Thanks to the quality of our work, Orbs was able to improve their platform and continue to grow and succeed. With GoTech's help, they were able to overcome their challenges and achieve their goals.",
+      ],
+    },
+    {
+      type: "section-epsilon",
+      color: COLORS.MAIN,
+    },
+  ],
+
   images: {
     mockup: {
       src: "/assets/images/case-studies/orbs/orbs1.jpg",
@@ -16,36 +57,19 @@ export const ORBS = {
       alt: "orbs",
     },
   },
-  client: {
-    title: "About Client:",
-    paragraphs: [
-      "Orbs is a developer of a public blockchain infrastructure designed for mass usage applications and close integration with EVM-based L1’s such as Ethereum, Binance SmartChain and Polygon.",
-      "They came to GoTech needing help building complex Front-End projects, including dashboards, monitors, and the company's website.",
-    ],
-  },
-  challenge: {
-    title: "Challenge Faced:",
-    description:
-      "Orbs was looking for a partner who could take ownership of entire projects, think big, and work independently while providing high-quality products. ",
-    steps: [
-      "They needed a team that could handle the complexity of their Front-End projects",
-    ],
-  },
-  solution: {
-    title: "Our Solution:",
-    paragraphs: [
-      "GoTech was able to help Memomi integrate the AR engine into their server and mobile applications, both for iOS and Android.",
-      "Our team of experts has experience in AR and ML, and was able to deliver high-quality mobile applications that offered a seamless and engaging AR experience. We also assisted Memomi in integrating the SDK into their clients' applications, further enhancing the functionality of their platform.",
-      "With GoTech's help, Memomi was able to overcome the challenges of integrating their AR engine and take their platform to the next level. Memomi was eventually acquired by Walmart.",
-    ],
-  },
+
+  steps: [
+    "They needed a team that could handle the complexity of their Front-End projects",
+  ],
+
   introduction: [
     { title: "Country", description: "Israel" },
     { title: "Industry", description: "Blockchain Infrastructure" },
-    { title: "Services Used", options: ["FrontEnd"], link: "/#services" },
+    { title: "Services Used", options: ["FrontEnd"], link: "/service/web" },
     {
       title: "Technologies Stack",
       options: ["React", "Cuttlebelle", "Redux"],
+      link: "/service/web/#technologies",
     },
   ],
   tags: ["React", "Cuttlebelle", "Redux"],

From c70f5fb77d408c3b312e026c7f4a9cc87709799e Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 08:45:56 +0200
Subject: [PATCH 19/31] case studies refactor

---
 assets/sass/case-studies-projects/index.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/sass/case-studies-projects/index.scss b/assets/sass/case-studies-projects/index.scss
index 8160368..c6d55a4 100644
--- a/assets/sass/case-studies-projects/index.scss
+++ b/assets/sass/case-studies-projects/index.scss
@@ -1,8 +1,11 @@
 .project-page {
   width: 100%;
-  padding: $section-gap 0;
   background-color: $default;
 
+  .section-epsilon .main .color-block {
+    padding: 0;
+  }
+
   &-intro {
     h6 {
       margin-bottom: 10px;

From 736d2d6d1cabc5e1f1638d1c5863b9c72b9556c8 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 09:02:24 +0200
Subject: [PATCH 20/31] styles

---
 assets/sass/case-studies-projects/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/sass/case-studies-projects/index.scss b/assets/sass/case-studies-projects/index.scss
index c6d55a4..b03aca6 100644
--- a/assets/sass/case-studies-projects/index.scss
+++ b/assets/sass/case-studies-projects/index.scss
@@ -1,6 +1,5 @@
 .project-page {
   width: 100%;
-  background-color: $default;
 
   .section-epsilon .main .color-block {
     padding: 0;

From 52f412e1dc9e3e58464529e0114ba2b8931f456e Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 14:18:01 +0200
Subject: [PATCH 21/31] added a texts

---
 assets/js/common/timeline/index.js | 33 +++++++++++++++---------------
 assets/sass/common/timeline.scss   |  3 +--
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/assets/js/common/timeline/index.js b/assets/js/common/timeline/index.js
index afb9967..a895547 100644
--- a/assets/js/common/timeline/index.js
+++ b/assets/js/common/timeline/index.js
@@ -2,58 +2,57 @@ import { COLORS } from "../colors";
 
 export const TIMELINE = [
   {
-    title: "Proin sed libero",
+    title: "We are born!",
     description:
-      "Non enim praesent elementum facilisis leo vel. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Nunc non blandit massa enim nec. Pretium aenean pharetra magna ac placerat vestibulum lectus. Fermentum odio eu feugiat pretium nibh.",
-    year: 2016,
+      "We were founded in 2016 by 3 like-minded people whose priority is to maximize the level of technical services in Israel. We started with a small office and small clients. Having come a long way, now we understand all the stages that young startups go through every day, and we are ready to support and guide them.",
     color: COLORS.GREEN,
   },
   {
-    title: "Quis commodo odio aenean sed",
+    title: "First step into the Future",
     description:
-      "Porttitor lacus luctus accumsan tortor posuere ac. Urna molestie at elementum eu facilisis sed odio morbi quis. Pulvinar elementum integer enim neque volutpat ac tincidunt. Viverra adipiscing at in tellus integer feugiat.",
+      "We are worked so hard and by the beginning of 2017 we are moved to a new office and our team grow to 15 people. Our Company began to gain strength and break into the market to earn a reputation and a name for ourselves.",
     year: 2017,
     color: COLORS.BLUE,
   },
   {
-    title: "Commodo odio aenean",
+    title: "Major Achievements",
     description:
-      "Aliquet porttitor lacus luctus accumsan tortor posuere ac. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Tortor aliquam nulla facilisi cras fermentum. Justo nec ultrices dui sapien. In iaculis nunc sed augue lacus viverra vitae congue. Quam vulputate dignissim suspendisse in.",
+      "2018 was a very successful year! We continued to grow. Opened an additional service for QA software testing. Teams have become largest, projects more interesting. Our teams start to work side by side with major global companies like Cisco, as well them working on projects from the Israeli police and govermant.",
     year: 2018,
     color: COLORS.ORANGE,
   },
   {
-    title: "Netus et malesuada",
+    title: "CORONA is comme...",
     description:
-      "Nullam vehicula ipsum a arcu cursus vitae congue. Feugiat in fermentum posuere urna nec. Suscipit adipiscing bibendum est ultricies integer. Fames ac turpis egestas sed tempus.",
+      "No Company can evolve without overcoming difficult situations and is always dependent on the world. 2019 was remembered by all te begginning of the corona and the sacrifices we had to make. We tried to retain the teams as much as possible, them switched to work remotely, many clients were vulnerable and suspended projects. Yes, it was been a tough year!",
     year: 2019,
     color: COLORS.YELLOW,
   },
   {
-    title: "Viverra nibh cras",
+    title: "We can help rebuild our world",
     description:
-      "Quam vulputate dignissim suspendisse in. Facilisi cras fermentum odio eu feugiat pretium. Turpis egestas sed tempus urna et pharetra pharetra massa. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Mauris sit amet massa vitae tortor",
+      "When the world rebuilding, it is important not to miss the moment. In 2020, many buisnesses reaized that only on the web theu can survive the pandamic and began to look for good partners. We returned in full force and start to recruit even more enployees and projects. 2019 made us stronger and now we saw exactly where to move.",
     year: 2020,
     color: COLORS.PINK,
   },
   {
-    title: "In est ante in nibh",
+    title: "The New Heights",
     description:
-      "Tellus id interdum velit laoreet id donec ultrices. Aliquet porttitor lacus luctus accumsan tortor posuere ac. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Tortor aliquam nulla facilisi cras fermentum. Justo nec ultrices dui sapien.",
+      "In 2021 our company has more 100 employers. We have people from different countries such as Israel, America, Russia, Ukraine, Belarus, Uruguay. We have grown and it has become crowded in one office and one City. GoTech decided it was time to conquer the Tel-Aviv skyscrapers.",
     year: 2021,
     color: COLORS.PURPLE,
   },
   {
-    title: "Purus gravida quis",
+    title: "Getting closer to the Stars",
     description:
-      "Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis. Eget mi proin sed libero enim sed. A arcu cursus vitae congue mauris rhoncus aenean vel. Dui nunc mattis enim ut tellus elementum sagittis vitae. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque.",
+      "In 2022, Our teams started work with such giants as Google, Walmart, Cognate, Varonis and many others. We help them to implements projects with cryptocurrency, artificial intelligence and QA Automations for various platforms.",
     year: 2022,
     color: COLORS.PRIME,
   },
   {
-    title: "Odio facilisis mauris",
+    title: "Our next targets",
     description:
-      "Turpis egestas maecenas pharetra convallis posuere morbi leo urna. Vel pharetra vel turpis nunc eget lorem dolor sed. Purus in mollis nunc sed id semper. Ipsum dolor sit amet consectetur adipiscing elit. Quam viverra orci",
+      "Our plans for 2023 are to continue introducing exciting new technologies, working with incredible startups and expanding our professional team.",
     year: 2023,
     color: COLORS.ADDITIONAL,
   },
diff --git a/assets/sass/common/timeline.scss b/assets/sass/common/timeline.scss
index 47ee87c..7a8c9c6 100644
--- a/assets/sass/common/timeline.scss
+++ b/assets/sass/common/timeline.scss
@@ -68,8 +68,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: $main;
-      border: 2px solid $additional;
+      background-color: $default;
       border-radius: $circle;
 
       .steps-item-number {

From 8050877dbf84ac606e72568f17006b4994ebaae7 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 14:33:20 +0200
Subject: [PATCH 22/31] added a texts

---
 assets/js/common/about-us/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/common/about-us/index.js b/assets/js/common/about-us/index.js
index a19ce43..fd2e9e5 100644
--- a/assets/js/common/about-us/index.js
+++ b/assets/js/common/about-us/index.js
@@ -42,9 +42,9 @@ export const ABOUT_US_DETAILS = {
     {
       type: "section-epsilon",
       color: COLORS.YELLOW,
-      title: "DELTA",
+      title: "With us, you are a step ahead",
       description:
-        "Contact us today to learn more about our services and see how we can help your business grow and thrive.",
+        "We don’t just simply initiate your project. We step into your shoes and perform a detailed analysis of your business landscape to give you the most purposeful solution. Contact us today to learn more about our services and see how we can help your business grow and thrive.",
     },
   ],
 };

From 9cc103afc10a02938046765a5154f3969789004e Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 8 Jan 2023 14:55:06 +0200
Subject: [PATCH 23/31] refactor

---
 assets/js/common/sections/index.js            |  8 +++++++
 code/common/listSection/index.js              | 22 ++++---------------
 code/common/pageWrapper/index.js              | 20 ++++-------------
 code/screens/about-us/index.js                | 20 ++++++++++++++---
 code/screens/case-studies/index.js            | 10 ++++++++-
 .../case-studies/project-page/index.js        | 20 ++++++++++++++---
 6 files changed, 59 insertions(+), 41 deletions(-)
 create mode 100644 assets/js/common/sections/index.js

diff --git a/assets/js/common/sections/index.js b/assets/js/common/sections/index.js
new file mode 100644
index 0000000..71c4a0f
--- /dev/null
+++ b/assets/js/common/sections/index.js
@@ -0,0 +1,8 @@
+export const SECTIONS = {
+  ALPHA: "section-alpha",
+  BETA: "section-beta",
+  GAMMA: "section-gamma",
+  DELTA: "section-delta",
+  EPSILON: "section-epsilon",
+  ZETA: "section-zeta",
+};
diff --git a/code/common/listSection/index.js b/code/common/listSection/index.js
index eadbc06..125668a 100644
--- a/code/common/listSection/index.js
+++ b/code/common/listSection/index.js
@@ -1,22 +1,13 @@
 import ColorSection from "../ColorSection";
 import React from "react";
 
-function Sections({
-  sections,
-  color,
-  alpha,
-  beta,
-  delta,
-  gamma,
-  epsilon,
-  zeta,
-}) {
-  const mainColor = color;
-
+function Sections({ sections, subjects, mainColor }) {
   return (
     <div>
       {sections.length &&
         sections.map(({ type, color, title, description, paragraphs }) => {
+          const contentData = subjects.find((sub) => sub.type === type);
+
           return (
             <div key={type} className={type}>
               <ColorSection
@@ -25,12 +16,7 @@ function Sections({
                 description={description}
                 paragraphs={paragraphs}
               >
-                {type === "section-alpha" && alpha}
-                {type === "section-beta" && beta}
-                {type === "section-gamma" && gamma}
-                {type === "section-delta" && delta}
-                {type === "section-epsilon" && epsilon}
-                {type === "section-zeta" && zeta}
+                {contentData && contentData.content}
               </ColorSection>
             </div>
           );
diff --git a/code/common/pageWrapper/index.js b/code/common/pageWrapper/index.js
index b7ddf62..48c1289 100644
--- a/code/common/pageWrapper/index.js
+++ b/code/common/pageWrapper/index.js
@@ -7,12 +7,8 @@ function PageWrapper({
   title,
   description,
   sections,
-  alpha,
-  beta,
-  gamma,
-  delta,
-  epsilon,
-  zeta,
+  subjects,
+  color,
   marquee,
   contact,
   _relativeURL,
@@ -22,16 +18,8 @@ function PageWrapper({
     <div>
       <Header title={title} description={description} />
 
-      {sections && (
-        <Sections
-          sections={sections}
-          alpha={alpha}
-          beta={beta}
-          gamma={gamma}
-          delta={delta}
-          epsilon={epsilon}
-          zeta={zeta}
-        />
+      {sections && subjects && (
+        <Sections sections={sections} subjects={subjects} mainColor={color} />
       )}
 
       <div>{marquee}</div>
diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js
index 5b5cc46..651a2f4 100644
--- a/code/screens/about-us/index.js
+++ b/code/screens/about-us/index.js
@@ -6,18 +6,32 @@ import Timeline from "./components/timeline";
 import Video from "../../common/video";
 import { ABOUT_US_DETAILS } from "../../../assets/js/common/about-us";
 import { TEAMS } from "../../../assets/js/common/about-us/teams";
+import { SECTIONS } from "../../../assets/js/common/sections";
 
 function AboutUs({ marquee, contact, _relativeURL, _ID }) {
   const { title, description, sections, video } = ABOUT_US_DETAILS;
 
+  const subjects = [
+    {
+      type: SECTIONS.ALPHA,
+      content: <Timeline />,
+    },
+    {
+      type: SECTIONS.BETA,
+      content: <Video src={video.src} type={video.title} />,
+    },
+    {
+      type: SECTIONS.DELTA,
+      content: <ListMembers teams={TEAMS} />,
+    },
+  ];
+
   return (
     <PageWrapper
       title={title}
       description={description}
       sections={sections}
-      alpha={<Timeline />}
-      beta={<Video src={video.src} type={video.title} />}
-      delta={<ListMembers teams={TEAMS} />}
+      subjects={subjects}
       marquee={marquee}
       contact={contact}
       _relativeURL={_relativeURL}
diff --git a/code/screens/case-studies/index.js b/code/screens/case-studies/index.js
index 84f72b6..de708a2 100644
--- a/code/screens/case-studies/index.js
+++ b/code/screens/case-studies/index.js
@@ -2,6 +2,14 @@ import ListProjects from "./components/listProjects";
 import PageWrapper from "../../common/pageWrapper";
 import React from "react";
 import { CASE_STUDIES_DETAILS } from "../../../assets/js/common/case-studies-details";
+import { SECTIONS } from "../../../assets/js/common/sections";
+
+const subjects = [
+  {
+    type: SECTIONS.ALPHA,
+    content: <ListProjects />,
+  },
+];
 
 function CaseStudies({ marquee, contact, _relativeURL, _ID }) {
   const { title, description, sections } = CASE_STUDIES_DETAILS;
@@ -11,7 +19,7 @@ function CaseStudies({ marquee, contact, _relativeURL, _ID }) {
       title={title}
       description={description}
       sections={sections}
-      alpha={<ListProjects />}
+      subjects={subjects}
       marquee={marquee}
       contact={contact}
       _relativeURL={_relativeURL}
diff --git a/code/screens/case-studies/project-page/index.js b/code/screens/case-studies/project-page/index.js
index d06ecb1..d8babae 100644
--- a/code/screens/case-studies/project-page/index.js
+++ b/code/screens/case-studies/project-page/index.js
@@ -4,6 +4,7 @@ import Parallax from "../../../common/parallax";
 import React from "react";
 import Steps from "../../../common/steps";
 import { PROJECTS_INFO } from "../../../../assets/js/common/case-studies-projects";
+import { SECTIONS } from "../../../../assets/js/common/sections";
 
 function ProjectPage({ type, marquee, contact, _relativeURL, _ID }) {
   const { title, description, sections, steps, images, introduction } =
@@ -11,15 +12,28 @@ function ProjectPage({ type, marquee, contact, _relativeURL, _ID }) {
 
   const { main, parallax } = images;
 
+  const subjects = [
+    {
+      type: SECTIONS.BETA,
+      content: <DetailsSection main={main} introduction={introduction} />,
+    },
+    {
+      type: SECTIONS.GAMMA,
+      content: <Steps steps={steps} />,
+    },
+    {
+      type: SECTIONS.EPSILON,
+      content: <Parallax src={parallax.src} alt={parallax.alt} />,
+    },
+  ];
+
   return (
     <div className="project-page">
       <PageWrapper
         title={title}
         description={description}
         sections={sections}
-        beta={<DetailsSection main={main} introduction={introduction} />}
-        gamma={<Steps steps={steps} />}
-        epsilon={<Parallax src={parallax.src} alt={parallax.alt} />}
+        subjects={subjects}
         marquee={marquee}
         contact={contact}
         _relativeURL={_relativeURL}

From 162728a4dd5d9d04454009c58ec1eea1891e04b5 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 9 Jan 2023 08:56:29 +0200
Subject: [PATCH 24/31] refactor

---
 assets/js/common/timeline/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/assets/js/common/timeline/index.js b/assets/js/common/timeline/index.js
index a895547..8452e45 100644
--- a/assets/js/common/timeline/index.js
+++ b/assets/js/common/timeline/index.js
@@ -17,21 +17,21 @@ export const TIMELINE = [
   {
     title: "Major Achievements",
     description:
-      "2018 was a very successful year! We continued to grow. Opened an additional service for QA software testing. Teams have become largest, projects more interesting. Our teams start to work side by side with major global companies like Cisco, as well them working on projects from the Israeli police and govermant.",
+      "2018 was a very successful year! We continued to grow. Opened an additional service for QA software testing. Teams have become largest, projects more interesting. Our teams start to work side by side with major global companies like Cisco, as well them working on projects from the Israeli Police and Government.",
     year: 2018,
     color: COLORS.ORANGE,
   },
   {
     title: "CORONA is comme...",
     description:
-      "No Company can evolve without overcoming difficult situations and is always dependent on the world. 2019 was remembered by all te begginning of the corona and the sacrifices we had to make. We tried to retain the teams as much as possible, them switched to work remotely, many clients were vulnerable and suspended projects. Yes, it was been a tough year!",
+      "No Company can evolve without overcoming difficult situations and is always dependent on the world. 2019 was remembered by all the beginning of the corona and the sacrifices we had to make. We tried to retain the teams as much as possible, them switched to work remotely, many clients were vulnerable and suspended projects. Yes, it was been a tough year!",
     year: 2019,
     color: COLORS.YELLOW,
   },
   {
     title: "We can help rebuild our world",
     description:
-      "When the world rebuilding, it is important not to miss the moment. In 2020, many buisnesses reaized that only on the web theu can survive the pandamic and began to look for good partners. We returned in full force and start to recruit even more enployees and projects. 2019 made us stronger and now we saw exactly where to move.",
+      "When the world rebuilding, it is important not to miss the moment. In 2020, many businesses understood that only on the web then can survive the pandemic and began to look for good partners. We returned in full force and start to recruit even more employees and projects. 2019 made us stronger and now we saw exactly where to move.",
     year: 2020,
     color: COLORS.PINK,
   },

From a992718500659967e3fab73aaf1c42abf09b6dca Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 9 Jan 2023 11:00:21 +0200
Subject: [PATCH 25/31] styles

---
 assets/sass/common/colorSection.scss | 94 ++++++++++++++--------------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/assets/sass/common/colorSection.scss b/assets/sass/common/colorSection.scss
index 37c3af5..a252e75 100644
--- a/assets/sass/common/colorSection.scss
+++ b/assets/sass/common/colorSection.scss
@@ -1,74 +1,74 @@
 .color-block {
   width: 100%;
   padding: $title-gap 0;
-  transition: height 0.5s;
+  transition: height 0.2s;
+}
 
-  .green,
-  .blue {
-    .color-block {
-      background: $green-background;
-      .title-section {
-        h4,
-        p {
-          color: $main;
-        }
+.green,
+.blue {
+  .color-block {
+    background: $green-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
       }
     }
   }
+}
 
-  .pink {
-    .color-block {
-      background: $pink-background;
-      .title-section {
-        h4,
-        p {
-          color: $main;
-        }
+.pink {
+  .color-block {
+    background: $pink-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
       }
     }
   }
+}
 
-  .yellow,
-  .orange {
-    .color-block {
-      background: $orange-background;
-      .title-section {
-        h4,
-        p {
-          color: $main;
-        }
+.yellow,
+.orange {
+  .color-block {
+    background: $orange-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
       }
     }
   }
+}
 
-  .purple,
-  .prime {
-    .color-block {
-      .title-section {
-        h4,
-        p {
-          color: $main;
-        }
+.purple,
+.prime {
+  .color-block {
+    .title-section {
+      h4,
+      p {
+        color: $main;
       }
     }
   }
+}
 
-  .gray {
-    .color-block {
-      background-color: $default;
-    }
+.gray {
+  .color-block {
+    background-color: $default;
   }
+}
 
-  .default {
-    .color-block {
-      background-color: $default;
-    }
+.default {
+  .color-block {
+    background-color: $default;
   }
+}
 
-  .main {
-    .color-block {
-      background-color: $main;
-    }
+.main {
+  .color-block {
+    background-color: $main;
   }
 }
 

From 860a545e9f7aabce71857cef8d097a2fbaadcf5b Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 9 Jan 2023 11:11:37 +0200
Subject: [PATCH 26/31] styles

---
 assets/sass/common/common.scss   | 19 ++++++++++---------
 assets/sass/common/team.scss     |  3 ++-
 assets/sass/common/timeline.scss |  1 +
 assets/sass/common/video.scss    |  1 +
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index 6a00cf4..77d7df7 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -135,13 +135,18 @@ img {
 .prime {
   background-color: $prime;
 }
-.default {
-  background-color: $default;
-}
 .additional {
   background-color: $additional;
 }
 
+.title-section {
+  text-align: center;
+  p {
+    padding-top: $content-gap;
+    font-size: 20px;
+  }
+}
+
 @media only screen and (max-width: $medium) {
   .page-common-block {
     width: 90%;
@@ -170,12 +175,8 @@ img {
     font-size: 40px;
   }
 
-  .title-section {
-    text-align: center;
-    p {
-      padding-top: $content-gap;
-      font-size: 16px;
-    }
+  .title-section p {
+    font-size: 16px;
   }
 
   .home-header .home-header-background {
diff --git a/assets/sass/common/team.scss b/assets/sass/common/team.scss
index 2353d41..822fb6f 100644
--- a/assets/sass/common/team.scss
+++ b/assets/sass/common/team.scss
@@ -1,5 +1,6 @@
 .team {
   width: 100%;
+  margin-top: $title-gap;
   display: flex;
   flex-wrap: wrap;
 
@@ -35,7 +36,7 @@
       align-items: flex-end;
       background-color: $main;
       position: relative;
-      border-radius: $radius;
+      border-radius: 15px;
 
       h6 {
         font-size: 14px;
diff --git a/assets/sass/common/timeline.scss b/assets/sass/common/timeline.scss
index 7a8c9c6..5294860 100644
--- a/assets/sass/common/timeline.scss
+++ b/assets/sass/common/timeline.scss
@@ -1,5 +1,6 @@
 .timeline {
   &-wrapper {
+    margin-top: $title-gap;
     position: relative;
   }
 
diff --git a/assets/sass/common/video.scss b/assets/sass/common/video.scss
index 8e79af0..eea9443 100644
--- a/assets/sass/common/video.scss
+++ b/assets/sass/common/video.scss
@@ -1,6 +1,7 @@
 .video {
   width: 100%;
   height: 500px;
+  margin-top: $title-gap;
   background-color: $default;
 
   iframe {

From c124e9a5d528bc78f9f4d3a585b8650cdd34d6df Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 9 Jan 2023 11:15:43 +0200
Subject: [PATCH 27/31] link

---
 assets/js/common/footer/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/common/footer/index.js b/assets/js/common/footer/index.js
index 3200d7b..fd4c3b6 100644
--- a/assets/js/common/footer/index.js
+++ b/assets/js/common/footer/index.js
@@ -4,10 +4,10 @@ export const FOOTER_INFO = [
   {
     title: "Company",
     list: [
-      { title: "About Us", link: "/#about" },
+      { title: "About Us", link: "/about" },
       { title: "Services", link: "/services" },
       { title: "Clients", link: "/clients" },
-      { title: "Teams", link: "/#team" },
+      { title: "Teams", link: "/about/#team" },
       { title: "Cases", link: "/case-studies" },
       { title: "Careers", link: "/careers/" },
     ],

From 4361d1909568466c8979e71a2cd48ccdef188855 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 15 Jan 2023 09:02:49 +0200
Subject: [PATCH 28/31] about us refactor

---
 assets/js/common/about-us/teams.js | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/assets/js/common/about-us/teams.js b/assets/js/common/about-us/teams.js
index 468c541..8504bbc 100644
--- a/assets/js/common/about-us/teams.js
+++ b/assets/js/common/about-us/teams.js
@@ -1,13 +1,7 @@
 export const TEAMS = [
-  {
-    name: "Yaniv Peleg",
-    position: "CEO",
-    image: "/assets/images/home/team/yaniv.jpg",
-    linkedin: "https://www.linkedin.com/in/yaniv-peleg/",
-  },
   {
     name: "Lidor Itzhari",
-    position: "COO",
+    position: "CEO",
     image: "/assets/images/home/team/lidor.jpg",
     linkedin: "https://www.linkedin.com/in/lidoritzhari/",
   },
@@ -35,12 +29,6 @@ export const TEAMS = [
     image: "/assets/images/home/team/giora.jpg",
     linkedin: "https://www.linkedin.com/in/giora-krasilshchik-47ab8219/",
   },
-  {
-    name: "Evgeny Tofler",
-    position: "Head of DBA",
-    image: "/assets/images/home/team/evgeny.jpg",
-    linkedin: "https://www.linkedin.com/in/evgeny-tofler-8221a15b/",
-  },
   {
     name: "Mor Armoni", //Gur?
     position: "HR Manager",

From d2a3185a29213282365230148a1aaac999691c62 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 15 Jan 2023 09:49:09 +0200
Subject: [PATCH 29/31] about us tag

---
 assets/sass/home/sections/sevices.scss        |  2 +-
 code/common/tag/iconTag.js                    | 19 +++++++++
 code/common/tag/index.js                      | 39 +++++--------------
 code/common/tag/simpleTag.js                  | 11 ++++++
 code/common/tags/index.js                     | 17 ++++++++
 .../about-us/components/timelineItem.js       |  2 +-
 .../components/introductionSection.js         |  2 +-
 code/screens/case-studies/components/left.js  |  2 +-
 code/screens/case-studies/components/right.js |  3 +-
 9 files changed, 62 insertions(+), 35 deletions(-)
 create mode 100644 code/common/tag/iconTag.js
 create mode 100644 code/common/tag/simpleTag.js
 create mode 100644 code/common/tags/index.js

diff --git a/assets/sass/home/sections/sevices.scss b/assets/sass/home/sections/sevices.scss
index eca971c..4eccf3c 100644
--- a/assets/sass/home/sections/sevices.scss
+++ b/assets/sass/home/sections/sevices.scss
@@ -9,7 +9,7 @@
 
   h3 {
     margin-bottom: 20px;
-    font-size: 2.6rem;
+    font-size: 2.3rem;
     line-height: 3.2rem;
     font-weight: 600;
     letter-spacing: -0.063rem;
diff --git a/code/common/tag/iconTag.js b/code/common/tag/iconTag.js
new file mode 100644
index 0000000..f001a16
--- /dev/null
+++ b/code/common/tag/iconTag.js
@@ -0,0 +1,19 @@
+import React from "react";
+import SimpleTag from "./simpleTag";
+
+const IconTag = ({ title, icon, image }) => {
+  return (
+    <div className="tags-item">
+      {icon ? (
+        <i className={icon} />
+      ) : (
+        <div className="tags-item-image">
+          <img src={image} />
+        </div>
+      )}
+      <p> {title}</p>
+    </div>
+  );
+};
+
+export default IconTag;
diff --git a/code/common/tag/index.js b/code/common/tag/index.js
index 3246527..dcdeaf2 100644
--- a/code/common/tag/index.js
+++ b/code/common/tag/index.js
@@ -1,36 +1,17 @@
+import IconTag from "./iconTag";
 import React from "react";
+import SimpleTag from "./simpleTag";
 
-const Tags = ({ tags, count }) => {
+const Tag = ({ item }) => {
   return (
-    <div className="tags">
-      {tags.length &&
-        tags.map((item, i) => {
-          const { title, icon, image } = item;
-          if (i < count) {
-            return (
-              <div key={item}>
-                {icon || image ? (
-                  <div key={title} className="tags-item">
-                    {icon ? (
-                      <i className={icon} />
-                    ) : (
-                      <div className="tags-item-image">
-                        <img src={image} />
-                      </div>
-                    )}
-                    <p> {title}</p>
-                  </div>
-                ) : (
-                  <div key={item} className="tags-item">
-                    <p> {item}</p>
-                  </div>
-                )}
-              </div>
-            );
-          }
-        })}
+    <div>
+      {item.icon || item.image ? (
+        <IconTag title={item.title} icon={item.icon} image={item.image} />
+      ) : (
+        <SimpleTag item={item} />
+      )}
     </div>
   );
 };
 
-export default Tags;
+export default Tag;
diff --git a/code/common/tag/simpleTag.js b/code/common/tag/simpleTag.js
new file mode 100644
index 0000000..a21f99c
--- /dev/null
+++ b/code/common/tag/simpleTag.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const SimpleTag = ({ item }) => {
+  return (
+    <div className="tags-item">
+      <p> {item}</p>
+    </div>
+  );
+};
+
+export default SimpleTag;
diff --git a/code/common/tags/index.js b/code/common/tags/index.js
new file mode 100644
index 0000000..3cc79ce
--- /dev/null
+++ b/code/common/tags/index.js
@@ -0,0 +1,17 @@
+import React from "react";
+import Tag from "../tag";
+
+const Tags = ({ tags, count }) => {
+  return (
+    <div className="tags">
+      {tags.length &&
+        tags.map((item, i) => {
+          if (i < count) {
+            return <Tag key={item} item={item}></Tag>;
+          }
+        })}
+    </div>
+  );
+};
+
+export default Tags;
diff --git a/code/screens/about-us/components/timelineItem.js b/code/screens/about-us/components/timelineItem.js
index 9112b88..3700e18 100644
--- a/code/screens/about-us/components/timelineItem.js
+++ b/code/screens/about-us/components/timelineItem.js
@@ -7,7 +7,7 @@ function TimelineItem({ title, description, number, year, color, reverse }) {
     <div
       className="timeline-item"
       style={{ flexDirection: reverse && "row-reverse" }}
-      data-aos-anchor-placement="top-center"
+      data-aos-anchor-placement="top"
       data-aos={animations.zoomInUp}
     >
       <div className="timeline-item-details">
diff --git a/code/screens/case-studies/components/introductionSection.js b/code/screens/case-studies/components/introductionSection.js
index 44be9ce..7fb00ce 100644
--- a/code/screens/case-studies/components/introductionSection.js
+++ b/code/screens/case-studies/components/introductionSection.js
@@ -2,7 +2,7 @@ import ArrowButton from "../../../common/btns/arrow";
 import ColorSection from "../../../common/ColorSection";
 import IntroductionItem from "./introductionItem";
 import React from "react";
-import Tags from "../../../common/tag";
+import Tags from "../../../common/tags";
 import { COLORS } from "../../../../assets/js/common/colors";
 
 const isEmpty = "Right now we don't have a description!";
diff --git a/code/screens/case-studies/components/left.js b/code/screens/case-studies/components/left.js
index 26d1278..17b7fdb 100644
--- a/code/screens/case-studies/components/left.js
+++ b/code/screens/case-studies/components/left.js
@@ -2,7 +2,7 @@ import BlobButton from "../../../common/btns/blob";
 import Link from "../../../common/btns/link";
 import Mockup from "../../../common/mockup";
 import React from "react";
-import Tags from "../../../common/tag";
+import Tags from "../../../common/tags";
 import animations from "../../../../assets/js/animations";
 import { PROJECTS_INFO } from "../../../../assets/js/common/case-studies-projects";
 
diff --git a/code/screens/case-studies/components/right.js b/code/screens/case-studies/components/right.js
index 9028f09..89826a0 100644
--- a/code/screens/case-studies/components/right.js
+++ b/code/screens/case-studies/components/right.js
@@ -1,8 +1,7 @@
 import BlobButton from "../../../common/btns/blob";
-import Link from "../../../common/btns/link";
 import Mockup from "../../../common/mockup";
 import React from "react";
-import Tags from "../../../common/tag";
+import Tags from "../../../common/tags";
 import animations from "../../../../assets/js/animations";
 import { PROJECTS_INFO } from "../../../../assets/js/common/case-studies-projects";
 

From 01a909c7f8840a5cd2a7331cc2d0cc44799ee4a5 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 15 Jan 2023 10:04:19 +0200
Subject: [PATCH 30/31] styles

---
 assets/sass/common/tags.scss | 7 ++++++-
 code/common/tag/iconTag.js   | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/sass/common/tags.scss b/assets/sass/common/tags.scss
index 84a1640..9420e25 100644
--- a/assets/sass/common/tags.scss
+++ b/assets/sass/common/tags.scss
@@ -12,11 +12,16 @@
     border-radius: 5px;
 
     p {
-      margin-left: 5px;
       color: $additional;
       font-size: 12px;
     }
 
+    &-icon {
+      p {
+        margin-left: 5px;
+      }
+    }
+
     &-image {
       width: 20px;
       height: 20px;
diff --git a/code/common/tag/iconTag.js b/code/common/tag/iconTag.js
index f001a16..700a294 100644
--- a/code/common/tag/iconTag.js
+++ b/code/common/tag/iconTag.js
@@ -3,7 +3,7 @@ import SimpleTag from "./simpleTag";
 
 const IconTag = ({ title, icon, image }) => {
   return (
-    <div className="tags-item">
+    <div className="tags-item tags-item-icon">
       {icon ? (
         <i className={icon} />
       ) : (

From bc7cb646ee3469507d9089e16693b55abc0083aa Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 15 Jan 2023 10:47:17 +0200
Subject: [PATCH 31/31] refactor

---
 content/_shared/navbar/navigation/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/_shared/navbar/navigation/index.md b/content/_shared/navbar/navigation/index.md
index 7f25afa..25d9aae 100644
--- a/content/_shared/navbar/navigation/index.md
+++ b/content/_shared/navbar/navigation/index.md
@@ -11,7 +11,7 @@ links:
     value: /#clients
 
   - name: team
-    value: /about/#team
+    value: /#about/#team
 
   - name: cases
     value: /case-studies