From da9faace94c1d9e9ca1c8a8b44fea6b6792888d0 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 28 Dec 2022 18:12:51 +0200
Subject: [PATCH 01/34] circle diagram

---
 assets/sass/common/circleDiagram.scss         | 77 +++++++++++++++++++
 assets/sass/common/index.scss                 |  1 +
 code/common/circleDiagram/index.js            | 38 +++++++++
 code/screens/home copy/index.js               | 35 +++++++++
 .../sections/about/components/images.js       | 28 +++++++
 .../screens/home copy/sections/about/index.js | 19 +++++
 .../sections/case-studies/components/slide.js | 44 +++++++++++
 .../home copy/sections/case-studies/index.js  | 28 +++++++
 .../sections/clients/components/list.js       | 23 ++++++
 .../home copy/sections/clients/index.js       | 18 +++++
 .../home copy/sections/contact/index.js       | 20 +++++
 .../sections/header/components/blobs/index.js | 39 ++++++++++
 .../home copy/sections/header/index.js        | 37 +++++++++
 code/screens/home copy/sections/join/index.js | 28 +++++++
 .../sections/services/components/service.js   | 22 ++++++
 .../home copy/sections/services/index.js      | 28 +++++++
 .../sections/team/components/member.js        | 25 ++++++
 code/screens/home copy/sections/team/index.js | 17 ++++
 .../home copy/sections/text-section.js        |  7 ++
 code/screens/home/index.js                    | 23 ++----
 20 files changed, 539 insertions(+), 18 deletions(-)
 create mode 100644 assets/sass/common/circleDiagram.scss
 create mode 100644 code/common/circleDiagram/index.js
 create mode 100644 code/screens/home copy/index.js
 create mode 100644 code/screens/home copy/sections/about/components/images.js
 create mode 100644 code/screens/home copy/sections/about/index.js
 create mode 100644 code/screens/home copy/sections/case-studies/components/slide.js
 create mode 100644 code/screens/home copy/sections/case-studies/index.js
 create mode 100644 code/screens/home copy/sections/clients/components/list.js
 create mode 100644 code/screens/home copy/sections/clients/index.js
 create mode 100644 code/screens/home copy/sections/contact/index.js
 create mode 100644 code/screens/home copy/sections/header/components/blobs/index.js
 create mode 100644 code/screens/home copy/sections/header/index.js
 create mode 100644 code/screens/home copy/sections/join/index.js
 create mode 100644 code/screens/home copy/sections/services/components/service.js
 create mode 100644 code/screens/home copy/sections/services/index.js
 create mode 100644 code/screens/home copy/sections/team/components/member.js
 create mode 100644 code/screens/home copy/sections/team/index.js
 create mode 100644 code/screens/home copy/sections/text-section.js

diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
new file mode 100644
index 0000000..790201e
--- /dev/null
+++ b/assets/sass/common/circleDiagram.scss
@@ -0,0 +1,77 @@
+.circle-diagram {
+  width: 100%;
+  height: 950px;
+  border: 2px solid red;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  &-line {
+    &-inner {
+      width: 950px;
+      height: 950px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 2px solid red;
+      border-radius: 50%;
+    }
+
+    &-circle {
+      width: 900px;
+      height: 900px;
+      display: flex;
+      border: 2px solid $additional;
+      border-radius: 50%;
+    }
+  }
+
+  &-icon {
+    position: absolute;
+    &-inner {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: absolute;
+      left: 0;
+      top: 47%;
+
+      &:nth-child(1) {
+        transform: rotate(55deg);
+      }
+
+      &:nth-child(3) {
+        transform: rotate(-55deg);
+      }
+    }
+  }
+
+  //--------
+
+  &-services {
+    &-wrapper {
+      width: 55px;
+      height: 55px;
+      background-color: $main;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &-icons {
+      width: 30px;
+      height: 30px;
+      background-color: $green;
+      border-radius: 50%;
+    }
+  }
+}
+
+@media only screen and (max-width: $medium) {
+}
+
+@media only screen and (max-width: $mobile) {
+}
diff --git a/assets/sass/common/index.scss b/assets/sass/common/index.scss
index 1cfaaf3..f46a953 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 "./circleDiagram.scss";
 
 .flex-start {
   display: flex;
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
new file mode 100644
index 0000000..45362c9
--- /dev/null
+++ b/code/common/circleDiagram/index.js
@@ -0,0 +1,38 @@
+import React from "react";
+
+function CircleDiagramInnerItem() {
+  return (
+    <div className="circle-diagram-services-wrapper">
+      <div className="circle-diagram-services-icons"></div>
+    </div>
+  );
+}
+
+function CircleDiagram() {
+  return (
+    <div className="page-common-block">
+      <div className="circle-diagram">
+        <div className="circle-diagram-line-inner">
+          <div className="circle-diagram-line-circle">
+            <div className="circle-diagram-icon-inner">
+              <CircleDiagramInnerItem />
+              <CircleDiagramInnerItem />
+            </div>
+
+            <div className="circle-diagram-icon-inner">
+              <CircleDiagramInnerItem />
+              <CircleDiagramInnerItem />
+            </div>
+
+            <div className="circle-diagram-icon-inner">
+              <CircleDiagramInnerItem />
+              <CircleDiagramInnerItem />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CircleDiagram;
diff --git a/code/screens/home copy/index.js b/code/screens/home copy/index.js
new file mode 100644
index 0000000..4a6a7ca
--- /dev/null
+++ b/code/screens/home copy/index.js	
@@ -0,0 +1,35 @@
+import React from "react";
+import animations from "../../../assets/js/animations";
+import { handleUrl } from "../../utils";
+
+const Home = ({
+  header,
+  services,
+  clients,
+  about,
+  join,
+  team,
+  contact,
+  navbar,
+  _relativeURL,
+  _ID,
+}) => {
+  return (
+    <div className="home" data-aos={animations.up}>
+      {navbar}
+      {header}
+      {services}
+      {clients}
+      {about}
+      {join}
+      {team}
+      <div className="page-common-sub-section">{contact}</div>
+      <script
+        type="module"
+        src={handleUrl(`/assets/js/home/index.js`, _relativeURL, _ID)}
+      />
+    </div>
+  );
+};
+
+export default Home;
diff --git a/code/screens/home copy/sections/about/components/images.js b/code/screens/home copy/sections/about/components/images.js
new file mode 100644
index 0000000..284bd4e
--- /dev/null
+++ b/code/screens/home copy/sections/about/components/images.js	
@@ -0,0 +1,28 @@
+import React from "react";
+import animations from "../../../../../../assets/js/animations";
+import Image from "../../../../../common/img";
+
+const Images = ({ _relativeURL, _ID, image1, image2, image3, image4 }) => {
+  const createRelativeURL = (url) => {
+    return `${_relativeURL(url, _ID)}`;
+  };
+  return (
+    <div className="home-about-images images-flex">
+      <div
+        className="images-flex-1 images-flex-section"
+        data-aos={animations.up}
+      >
+        <Image src={createRelativeURL(image1)} />
+        <Image src={createRelativeURL(image2)} />
+      </div>
+      <div
+        className="images-flex-2 images-flex-section"
+        data-aos={animations.up}
+      >
+        <Image src={createRelativeURL(image3)} />
+      </div>
+    </div>
+  );
+};
+
+export default Images;
diff --git a/code/screens/home copy/sections/about/index.js b/code/screens/home copy/sections/about/index.js
new file mode 100644
index 0000000..51c5dfc
--- /dev/null
+++ b/code/screens/home copy/sections/about/index.js	
@@ -0,0 +1,19 @@
+import React from "react";
+import animations from "../../../../../assets/js/animations";
+
+const About = ({ _body, images, title, sectionBtn }) => {
+  return (
+    <div className="home-about section">
+      <div className="section-header" data-aos={animations.up}>
+        <h5 className="section-title">{title}</h5>
+        <section className="section-body">{_body}</section>
+      </div>
+
+      <aside className="indicator" id="about"></aside>
+
+      {images}
+    </div>
+  );
+};
+
+export default About;
diff --git a/code/screens/home copy/sections/case-studies/components/slide.js b/code/screens/home copy/sections/case-studies/components/slide.js
new file mode 100644
index 0000000..43f4b0e
--- /dev/null
+++ b/code/screens/home copy/sections/case-studies/components/slide.js	
@@ -0,0 +1,44 @@
+import React from "react";
+import OtherWorks from "../../../../../common/btns/other-works";
+import Image from "../../../../../common/img";
+import { handleUrl } from "../../../../../utils";
+
+const Slide = ({
+  _body,
+  title,
+  _relativeURL,
+  _ID,
+  image,
+  platforms,
+  linkUrl,
+}) => {
+  return (
+    <li className="splide__slide slide-item">
+      <Image
+        customClassName="slide-item-image"
+        src={handleUrl(image, _relativeURL, _ID)}
+      />
+      <div className="slide-item-box">
+        <h3 className="slide-item-title">{title}</h3>
+        <div className="slide-item-body">{_body}</div>
+        {platforms ? (
+          <div className="slide-item-platforms">
+            {platforms.map((platform) => {
+              return (
+                <section key={_ID}>
+                  <img src={handleUrl(platform.img, _relativeURL, _ID)} />
+                  <p>{platform.name}</p>
+                </section>
+              );
+            })}
+          </div>
+        ) : (
+          ""
+        )}
+        <OtherWorks url={linkUrl} />
+      </div>
+    </li>
+  );
+};
+
+export default Slide;
diff --git a/code/screens/home copy/sections/case-studies/index.js b/code/screens/home copy/sections/case-studies/index.js
new file mode 100644
index 0000000..20e4ef8
--- /dev/null
+++ b/code/screens/home copy/sections/case-studies/index.js	
@@ -0,0 +1,28 @@
+import React from "react";
+import animations from "../../../../../assets/js/animations";
+
+const CaseStudies = ({ slides, title, _body }) => {
+  return (
+    <div className="home-case-studies section" data-aos={animations.up}>
+      <div className="section-header">
+        <h5 className="section-title">{title}</h5>
+        <section className="section-body">{_body}</section>
+      </div>
+      <aside className="indicator" id="case-studies"></aside>
+      <div className="home-case-studies-content">
+        <div className="splide home-case-studies-slider">
+          <div className="splide__track">
+            <ul className="splide__list">
+              {slides &&
+                slides.map((slide) => {
+                  return slide;
+                })}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CaseStudies;
diff --git a/code/screens/home copy/sections/clients/components/list.js b/code/screens/home copy/sections/clients/components/list.js
new file mode 100644
index 0000000..c533d8f
--- /dev/null
+++ b/code/screens/home copy/sections/clients/components/list.js	
@@ -0,0 +1,23 @@
+import React from "react";
+import animations from "../../../../../../assets/js/animations";
+import Image from "../../../../../common/img";
+
+const List = ({ list }) => {
+  return (
+    <ul className="home-clients-list flex-start">
+      {list.map((e, i) => {
+        return (
+          <li
+            key={i}
+            data-aos={animations.up}
+            className="home-clients-list-item"
+          >
+            <img src={e} alt="client images" />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default List;
diff --git a/code/screens/home copy/sections/clients/index.js b/code/screens/home copy/sections/clients/index.js
new file mode 100644
index 0000000..e4a641a
--- /dev/null
+++ b/code/screens/home copy/sections/clients/index.js	
@@ -0,0 +1,18 @@
+import React from "react";
+import animations from "../../../../../assets/js/animations";
+
+const Clients = ({ clients, _body, title }) => {
+  return (
+    <div className="home-clients section">
+      <div className="section-header" data-aos={animations.up}>
+        <h5 className="section-title">{title}</h5>
+        <section className="section-body">{_body}</section>
+      </div>
+
+      <aside className="indicator" id="clients"></aside>
+      <div className="home-clients-grid">{clients}</div>
+    </div>
+  );
+};
+
+export default Clients;
diff --git a/code/screens/home copy/sections/contact/index.js b/code/screens/home copy/sections/contact/index.js
new file mode 100644
index 0000000..c8be6d0
--- /dev/null
+++ b/code/screens/home copy/sections/contact/index.js	
@@ -0,0 +1,20 @@
+import React from "react";
+
+const Contact = ({ _body, form, map }) => {
+  return (
+    <div className="contact flex-between">
+      <aside className="indicator" id="contact"></aside>
+
+      <div className="contact-bg"></div>
+      <div className="contact-flex">
+        <div className="contact-left">
+          {_body}
+          <div className="map-wrapper">{map}</div>
+        </div>
+        {form}
+      </div>
+    </div>
+  );
+};
+
+export default Contact;
diff --git a/code/screens/home copy/sections/header/components/blobs/index.js b/code/screens/home copy/sections/header/components/blobs/index.js
new file mode 100644
index 0000000..d671db9
--- /dev/null
+++ b/code/screens/home copy/sections/header/components/blobs/index.js	
@@ -0,0 +1,39 @@
+import React from "react";
+
+const blobs = [
+  {
+    type: "orange",
+    className: "orange-blobs",
+    src: "https://assets3.lottiefiles.com/packages/lf20_5gdcuanx.json",
+  },
+  {
+    type: "green",
+    className: "green-blobs",
+    src: "https://lottie.host/2a4cd7fd-ef68-4865-b56c-8fe21f2c9170/7RneaIKFUy.json",
+  },
+];
+
+const Blobs = ({ orangeSize, greenSize }) => {
+  return (
+    <div className="home-header-background">
+      {blobs.map((blob) => {
+        const { type, className, src } = blob;
+        const size = type === "orange" ? orangeSize : greenSize;
+        return (
+          <div key={type} className={className}>
+            <lottie-player
+              src={src}
+              background="transparent"
+              style={{ width: `${size}px`, height: `${size}px` }}
+              speed="1"
+              loop
+              autoplay
+            ></lottie-player>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Blobs;
diff --git a/code/screens/home copy/sections/header/index.js b/code/screens/home copy/sections/header/index.js
new file mode 100644
index 0000000..ae42c2e
--- /dev/null
+++ b/code/screens/home copy/sections/header/index.js	
@@ -0,0 +1,37 @@
+import Blobs from "./components/blobs";
+import React from "react";
+import animations from "../../../../../assets/js/animations";
+
+const BLOBS_SIZE = {
+  ORANGE: 1300,
+  GREEN: 1100,
+};
+
+const HomeHeader = ({ title, sub_title, description, button }) => {
+  return (
+    <div className="home-header">
+      <Blobs orangeSize={BLOBS_SIZE.ORANGE} greenSize={BLOBS_SIZE.GREEN} />
+
+      <div className="home-header-main">
+        <div className="page-common-block">
+          <di className="home-header-main-content">
+            <h1 data-aos={animations.up} data-aos-delay="100">
+              {title}
+            </h1>
+
+            <h2 data-aos={animations.up} data-aos-delay="250">
+              {sub_title}
+            </h2>
+
+            <p data-aos={animations.up} data-aos-delay="250">
+              {description}
+            </p>
+          </di>
+          {button}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomeHeader;
diff --git a/code/screens/home copy/sections/join/index.js b/code/screens/home copy/sections/join/index.js
new file mode 100644
index 0000000..f6f6e2e
--- /dev/null
+++ b/code/screens/home copy/sections/join/index.js	
@@ -0,0 +1,28 @@
+import React from "react";
+import animations from "../../../../../assets/js/animations";
+
+const Join = ({ _body, animation, socials }) => {
+  return (
+    <div className="home-join">
+      <div className="home-join-flex">
+        <div
+          className="home-join-animation"
+          data-aos={animations.up}
+          data-aos-anchor-placement="center-bottom"
+        >
+          {animation}
+        </div>
+        <div
+          className="home-join-content"
+          data-aos={animations.up}
+          data-aos-anchor-placement="center-bottom"
+        >
+          {_body}
+          {socials}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Join;
diff --git a/code/screens/home copy/sections/services/components/service.js b/code/screens/home copy/sections/services/components/service.js
new file mode 100644
index 0000000..8734716
--- /dev/null
+++ b/code/screens/home copy/sections/services/components/service.js	
@@ -0,0 +1,22 @@
+import React from "react";
+import animations from "../../../../../../assets/js/animations";
+import Image from "../../../../../common/img";
+import { handleUrl } from "../../../../../utils";
+
+const Service = ({ _body, title, image, delay = 0, _relativeURL, _ID }) => {
+  return (
+    <section
+      className="home-services-list-item"
+      data-aos={animations.up}
+      data-aos-delay={delay}
+    >
+      <div className="home-services-list-item-title">
+        <Image src={handleUrl(image, _relativeURL, _ID)} />
+        <h4>{title}</h4>
+      </div>
+      <div className="home-services-list-item-body">{_body}</div>
+    </section>
+  );
+};
+
+export default Service;
diff --git a/code/screens/home copy/sections/services/index.js b/code/screens/home copy/sections/services/index.js
new file mode 100644
index 0000000..ea2e8cd
--- /dev/null
+++ b/code/screens/home copy/sections/services/index.js	
@@ -0,0 +1,28 @@
+import React from "react";
+import animations from "../../../../../assets/js/animations";
+
+const Services = ({ services, title, _body }) => {
+  return (
+    <div className="home-services section">
+      <aside className="indicator" id="services"></aside>
+
+      <div className="home-services-header">
+        <h3 className="home-services-title" data-aos={animations.up}>
+          {title}
+        </h3>
+        <div data-aos={animations.up} data-aos-delay="100">
+          {_body}
+        </div>
+      </div>
+      <div
+        className="home-services-list flex-between"
+        data-aos={animations.zoomIn}
+        data-aos-delay="200"
+      >
+        {services}
+      </div>
+    </div>
+  );
+};
+
+export default Services;
diff --git a/code/screens/home copy/sections/team/components/member.js b/code/screens/home copy/sections/team/components/member.js
new file mode 100644
index 0000000..56356c7
--- /dev/null
+++ b/code/screens/home copy/sections/team/components/member.js	
@@ -0,0 +1,25 @@
+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 }) => {
+  return (
+    <div
+      className="home-team-member"
+      data-aos={animations.up}
+      data-aos-duration="1000"
+    >
+      <Image src={handleUrl(image, _relativeURL, _ID)} />
+      <div
+        className="home-team-member-content"
+        data-aos={animations.up}
+        data-aos-delay="150"
+      >
+        {_body}
+      </div>
+    </div>
+  );
+};
+
+export default Member;
diff --git a/code/screens/home copy/sections/team/index.js b/code/screens/home copy/sections/team/index.js
new file mode 100644
index 0000000..4bb8eb5
--- /dev/null
+++ b/code/screens/home copy/sections/team/index.js	
@@ -0,0 +1,17 @@
+import React from "react";
+import animations from "../../../../../assets/js/animations";
+
+const Team = ({ list, _body, title }) => {
+  return (
+    <div className="home-team section">
+      <div className="section-header" data-aos={animations.up}>
+        <h5 className="section-title">{title}</h5>
+        <section className="section-body">{_body}</section>
+      </div>
+      <aside className="indicator" id="team"></aside>
+      <div className="home-team-list">{list}</div>
+    </div>
+  );
+};
+
+export default Team;
diff --git a/code/screens/home copy/sections/text-section.js b/code/screens/home copy/sections/text-section.js
new file mode 100644
index 0000000..67af0c8
--- /dev/null
+++ b/code/screens/home copy/sections/text-section.js	
@@ -0,0 +1,7 @@
+import React from "react";
+
+const HomeTextSection = ({ _body }) => {
+  return <div>{_body}</div>;
+};
+
+export default HomeTextSection;
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 4a6a7ca..6dc589a 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -1,29 +1,16 @@
+import CircleDiagram from "../../common/circleDiagram";
 import React from "react";
 import animations from "../../../assets/js/animations";
 import { handleUrl } from "../../utils";
 
-const Home = ({
-  header,
-  services,
-  clients,
-  about,
-  join,
-  team,
-  contact,
-  navbar,
-  _relativeURL,
-  _ID,
-}) => {
+const Home = ({ header, navbar, _relativeURL, _ID }) => {
   return (
     <div className="home" data-aos={animations.up}>
       {navbar}
       {header}
-      {services}
-      {clients}
-      {about}
-      {join}
-      {team}
-      <div className="page-common-sub-section">{contact}</div>
+
+      <CircleDiagram />
+
       <script
         type="module"
         src={handleUrl(`/assets/js/home/index.js`, _relativeURL, _ID)}

From 7a4e305560e4acba279d8deb6dd2bc67d2855c12 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 28 Dec 2022 18:39:03 +0200
Subject: [PATCH 02/34] circle diagram

---
 assets/sass/common/circleDiagram.scss | 54 ++++++++++++++++++++++++++-
 code/common/circleDiagram/index.js    | 41 +++++++++++++-------
 2 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index 790201e..875519d 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -1,12 +1,63 @@
 .circle-diagram {
   width: 100%;
   height: 950px;
-  border: 2px solid red;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 
+  //RED--------
+  &-red {
+    width: 600px;
+    height: 600px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+
+    &-circle {
+      width: 500px;
+      height: 500px;
+      display: flex;
+      border: 2px solid $additional;
+      border-radius: 50%;
+    }
+
+    &-rotate-wrapper {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: absolute;
+      left: 0;
+      top: 42%;
+
+      &:nth-child(1) {
+        transform: rotate(90deg);
+      }
+    }
+
+    &-services {
+      &-wrapper {
+        width: 100px;
+        height: 100px;
+        background-color: $main;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &-icons {
+        width: 80px;
+        height: 80px;
+        background-color: $blue;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  //------
   &-line {
     &-inner {
       width: 950px;
@@ -14,7 +65,6 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      border: 2px solid red;
       border-radius: 50%;
     }
 
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index 45362c9..a661dfe 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,5 +1,13 @@
 import React from "react";
 
+function CircleDiagramRedItem() {
+  return (
+    <div className="circle-diagram-red-services-wrapper">
+      <div className="circle-diagram-red-services-icons"></div>
+    </div>
+  );
+}
+
 function CircleDiagramInnerItem() {
   return (
     <div className="circle-diagram-services-wrapper">
@@ -13,21 +21,28 @@ function CircleDiagram() {
     <div className="page-common-block">
       <div className="circle-diagram">
         <div className="circle-diagram-line-inner">
-          <div className="circle-diagram-line-circle">
-            <div className="circle-diagram-icon-inner">
-              <CircleDiagramInnerItem />
-              <CircleDiagramInnerItem />
-            </div>
-
-            <div className="circle-diagram-icon-inner">
-              <CircleDiagramInnerItem />
-              <CircleDiagramInnerItem />
+          <div className="circle-diagram-red">
+            <div className="circle-diagram-red-circle">
+              {[1, 2].map((item) => {
+                return (
+                  <div key={item} className="circle-diagram-red-rotate-wrapper">
+                    <CircleDiagramRedItem />
+                    <CircleDiagramRedItem />
+                  </div>
+                );
+              })}
             </div>
+          </div>
 
-            <div className="circle-diagram-icon-inner">
-              <CircleDiagramInnerItem />
-              <CircleDiagramInnerItem />
-            </div>
+          <div className="circle-diagram-line-circle">
+            {[1, 2, 3].map((item) => {
+              return (
+                <div key={item} className="circle-diagram-icon-inner">
+                  <CircleDiagramInnerItem />
+                  <CircleDiagramInnerItem />
+                </div>
+              );
+            })}
           </div>
         </div>
       </div>

From 43ee402f3a462f54e4a73f86d80ab66ad368bd12 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 10:52:50 +0200
Subject: [PATCH 03/34] circle diagram

---
 assets/sass/common/circleDiagram.scss | 84 ++++++++++++++-------------
 assets/sass/consts.scss               |  2 +-
 code/common/circleDiagram/index.js    | 65 ++++++++++++++-------
 3 files changed, 88 insertions(+), 63 deletions(-)

diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index 875519d..6b3a08f 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -6,8 +6,7 @@
   align-items: center;
   position: relative;
 
-  //RED--------
-  &-red {
+  &-services {
     width: 600px;
     height: 600px;
     display: flex;
@@ -19,8 +18,9 @@
       width: 500px;
       height: 500px;
       display: flex;
-      border: 2px solid $additional;
-      border-radius: 50%;
+      border: 2px dashed $additional;
+      border-radius: $circle;
+      animation: rotate 50s linear infinite;
     }
 
     &-rotate-wrapper {
@@ -37,49 +37,51 @@
       }
     }
 
-    &-services {
-      &-wrapper {
-        width: 100px;
-        height: 100px;
-        background-color: $main;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      &-icons {
-        width: 80px;
-        height: 80px;
-        background-color: $blue;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  //------
-  &-line {
-    &-inner {
-      width: 950px;
-      height: 950px;
+    &-wrapper {
+      width: 100px;
+      height: 100px;
+      background-color: $main;
+      border-radius: $circle;
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: 50%;
     }
 
+    &-icons {
+      width: 80px;
+      height: 80px;
+      background-color: $blue;
+      border-radius: $circle;
+    }
+  }
+
+  &-content {
+    width: 290px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    position: absolute;
+  }
+
+  &-technologies {
+    width: 950px;
+    height: 950px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     &-circle {
       width: 900px;
       height: 900px;
       display: flex;
-      border: 2px solid $additional;
-      border-radius: 50%;
+      position: absolute;
+      border: 2px dashed $additional;
+      border-radius: $circle;
+      animation: rotate 50s linear infinite;
     }
-  }
 
-  &-icon {
-    position: absolute;
-    &-inner {
+    &-rotate-wrapper {
       width: 100%;
       display: flex;
       justify-content: space-between;
@@ -96,11 +98,7 @@
         transform: rotate(-55deg);
       }
     }
-  }
-
-  //--------
 
-  &-services {
     &-wrapper {
       width: 55px;
       height: 55px;
@@ -120,6 +118,12 @@
   }
 }
 
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media only screen and (max-width: $medium) {
 }
 
diff --git a/assets/sass/consts.scss b/assets/sass/consts.scss
index f8541e3..ce81314 100644
--- a/assets/sass/consts.scss
+++ b/assets/sass/consts.scss
@@ -11,4 +11,4 @@ $section-gap: 50px;
 
 $main-grid: 950px;
 $radius: 20px;
-$circle: 50px;
+$circle: 50%;
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index a661dfe..b314a87 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,17 +1,23 @@
 import React from "react";
 
-function CircleDiagramRedItem() {
+const services = {
+  title: "GoTech Group Provides",
+  description:
+    "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
+};
+
+function CircleDiagramServicesItem() {
   return (
-    <div className="circle-diagram-red-services-wrapper">
-      <div className="circle-diagram-red-services-icons"></div>
+    <div className="circle-diagram-services-wrapper">
+      <div className="circle-diagram-services-icons"></div>
     </div>
   );
 }
 
-function CircleDiagramInnerItem() {
+function CircleDiagramTechnologiesItem() {
   return (
-    <div className="circle-diagram-services-wrapper">
-      <div className="circle-diagram-services-icons"></div>
+    <div className="circle-diagram-technologies-wrapper">
+      <div className="circle-diagram-technologies-icons"></div>
     </div>
   );
 }
@@ -20,26 +26,41 @@ function CircleDiagram() {
   return (
     <div className="page-common-block">
       <div className="circle-diagram">
-        <div className="circle-diagram-line-inner">
-          <div className="circle-diagram-red">
-            <div className="circle-diagram-red-circle">
-              {[1, 2].map((item) => {
-                return (
-                  <div key={item} className="circle-diagram-red-rotate-wrapper">
-                    <CircleDiagramRedItem />
-                    <CircleDiagramRedItem />
-                  </div>
-                );
-              })}
-            </div>
+        <div className="circle-diagram-content">
+          <div>
+            <h4>{services.title}</h4>
+            <p>{services.description}</p>
           </div>
+        </div>
+
+        <div className="circle-diagram-services">
+          <div className="circle-diagram-services-circle"> </div>
+          <div>
+            {[1, 2].map((item) => {
+              return (
+                <div
+                  key={item}
+                  className="circle-diagram-services-rotate-wrapper"
+                >
+                  <CircleDiagramServicesItem />
+                  <CircleDiagramServicesItem />
+                </div>
+              );
+            })}
+          </div>
+        </div>
 
-          <div className="circle-diagram-line-circle">
+        <div className="circle-diagram-technologies">
+          <div className="circle-diagram-technologies-circle"> </div>
+          <div>
             {[1, 2, 3].map((item) => {
               return (
-                <div key={item} className="circle-diagram-icon-inner">
-                  <CircleDiagramInnerItem />
-                  <CircleDiagramInnerItem />
+                <div
+                  key={item}
+                  className="circle-diagram-technologies-rotate-wrapper"
+                >
+                  <CircleDiagramTechnologiesItem />
+                  <CircleDiagramTechnologiesItem />
                 </div>
               );
             })}

From b5793c687e3f1c4bf4da402c89ef08b0483a6278 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 11:44:52 +0200
Subject: [PATCH 04/34] mobile

---
 assets/sass/common/circleDiagram.scss | 68 ++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index 6b3a08f..05da6c1 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -5,7 +5,9 @@
   justify-content: center;
   align-items: center;
   position: relative;
+  overflow: hidden;
 
+  //services
   &-services {
     width: 600px;
     height: 600px;
@@ -55,6 +57,7 @@
     }
   }
 
+  //content
   &-content {
     width: 290px;
     display: flex;
@@ -64,12 +67,14 @@
     position: absolute;
   }
 
+  //technologies
   &-technologies {
     width: 950px;
     height: 950px;
     display: flex;
     justify-content: center;
     align-items: center;
+    position: absolute;
 
     &-circle {
       width: 900px;
@@ -91,11 +96,15 @@
       top: 47%;
 
       &:nth-child(1) {
-        transform: rotate(55deg);
+        transform: rotate(30deg);
+      }
+
+      &:nth-child(2) {
+        transform: rotate(90deg);
       }
 
       &:nth-child(3) {
-        transform: rotate(-55deg);
+        transform: rotate(-30deg);
       }
     }
 
@@ -125,7 +134,62 @@
 }
 
 @media only screen and (max-width: $medium) {
+  .circle-diagram-technologies-circle {
+    width: 690px;
+    height: 690px;
+  }
 }
 
 @media only screen and (max-width: $mobile) {
+  .circle-diagram-services {
+    width: 500px;
+    height: 500px;
+
+    &-circle {
+      width: 420px;
+      height: 420px;
+    }
+
+    &-wrapper {
+      width: 80px;
+      height: 80px;
+    }
+
+    &-icons {
+      width: 65px;
+      height: 65px;
+    }
+
+    &-rotate-wrapper {
+      &:nth-child(1) {
+        transform: rotate(60deg);
+      }
+
+      &:nth-child(2) {
+        transform: rotate(120deg);
+      }
+    }
+  }
+
+  .circle-diagram-technologies {
+    width: 650px;
+    height: 650px;
+
+    &-circle {
+      width: 600px;
+      height: 600px;
+    }
+
+    &-rotate-wrapper {
+      top: 46%;
+
+      &:nth-child(1) {
+        transform: rotate(70deg);
+      }
+
+      &:nth-child(3) {
+        transform: rotate(110deg);
+      }
+    }
+  }
 }

From a34b5f3d19c9d77e033ed829263d6f9906888560 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 12:26:26 +0200
Subject: [PATCH 05/34] icons

---
 assets/js/common/icons/index.js    | 32 ++++++++++++++++++++++++++++++
 code/common/circleDiagram/index.js | 16 ++++++++++++---
 2 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 assets/js/common/icons/index.js

diff --git a/assets/js/common/icons/index.js b/assets/js/common/icons/index.js
new file mode 100644
index 0000000..ebc4175
--- /dev/null
+++ b/assets/js/common/icons/index.js
@@ -0,0 +1,32 @@
+export const ICONS = {
+  WEB_DEV: "fa-solid fa-laptop-code",
+  MOBILE_DEV: "fa-solid fa-mobile-screen-button",
+  DEVOPS_DEV: "fa-solid fa-cloud-arrow-up",
+  QA_DEV: "fa-solid fa-magnifying-glass",
+
+  FRONT_DEV: "fa-solid fa-chalkboard-user",
+  BACK_DEV: "fa-solid fa-database",
+
+  CROSS_DEV: "fa-solid fa-check-double",
+  NATIVE_DEV: "fa-brands fa-app-store-ios",
+
+  QA_AUTO: "fa-solid fa-bug-slash",
+  QA_MANUAL: "fa-solid fa-thumbs-up",
+
+  AUTO_DEV: "fa-solid fa-infinity",
+  ENV_DEV: "fa-solid fa-user-gear",
+  EtE_TEST: "fa-solid fa-check-double",
+  INTEGRATION: "fa-solid fa-arrows-spin",
+
+  FACEBOOK: "fa-brands fa-square-facebook",
+  LINKEDIN: "fa-brands fa-linkedin",
+  INSTAGRAM: "fa-brands fa-square-instagram",
+
+  CHECK: "fa-brands fa-network-wired",
+  PIE: "fa-solid fa-chart-pie",
+  AWS: "fa-solid fa-aws",
+  DOCKER: "fa-solid fa-docker",
+  STACK: "fa-brands fa-stack-overflow",
+  SLACK: "fa-brands fa-slack",
+};
+<i class="fa-solid fa-list-check"></i>;
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index b314a87..4897bfe 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,9 +1,19 @@
 import React from "react";
+import { ICONS } from "../../../assets/js/common/icons";
 
-const services = {
+const content = {
   title: "GoTech Group Provides",
   description:
     "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
+  services: [
+    { f: ICONS.WEB_DEV, s: ICONS.MOBILE_DEV },
+    { f: ICONS.DEVOPS_DEV, s: ICONS.QA_DEV },
+  ],
+  technologies: [
+    { f: ICONS.CHECK, s: ICONS.PIE },
+    { f: ICONS.AWS, s: ICONS.DOCKER },
+    { f: ICONS.SLACK, s: ICONS.STACK },
+  ],
 };
 
 function CircleDiagramServicesItem() {
@@ -28,8 +38,8 @@ function CircleDiagram() {
       <div className="circle-diagram">
         <div className="circle-diagram-content">
           <div>
-            <h4>{services.title}</h4>
-            <p>{services.description}</p>
+            <h4>{content.title}</h4>
+            <p>{content.description}</p>
           </div>
         </div>
 

From d2faf0deb26fe287ed1b894c31e0c226627cf527 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 13:40:25 +0200
Subject: [PATCH 06/34] refactor

---
 assets/js/common/icons/index.js       |  7 ++-
 assets/sass/common/circleDiagram.scss | 17 +++++--
 code/common/circleDiagram/index.js    | 72 +++++++++++----------------
 code/screens/home/index.js            | 18 ++++++-
 4 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/assets/js/common/icons/index.js b/assets/js/common/icons/index.js
index ebc4175..295c23e 100644
--- a/assets/js/common/icons/index.js
+++ b/assets/js/common/icons/index.js
@@ -22,11 +22,10 @@ export const ICONS = {
   LINKEDIN: "fa-brands fa-linkedin",
   INSTAGRAM: "fa-brands fa-square-instagram",
 
-  CHECK: "fa-brands fa-network-wired",
+  NETWORK: "fa-solid fa-network-wired",
   PIE: "fa-solid fa-chart-pie",
-  AWS: "fa-solid fa-aws",
-  DOCKER: "fa-solid fa-docker",
+  AWS: "fa-brands fa-aws",
+  DOCKER: "fa-brands fa-docker",
   STACK: "fa-brands fa-stack-overflow",
   SLACK: "fa-brands fa-slack",
 };
-<i class="fa-solid fa-list-check"></i>;
diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index 05da6c1..459a147 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -36,6 +36,9 @@
 
       &:nth-child(1) {
         transform: rotate(90deg);
+        .circle-diagram-services-icons {
+          transform: rotate(-90deg);
+        }
       }
     }
 
@@ -52,8 +55,16 @@
     &-icons {
       width: 80px;
       height: 80px;
-      background-color: $blue;
-      border-radius: $circle;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: $green;
+      border-radius: 50%;
+
+      i {
+        font-size: 30px;
+        color: $main;
+      }
     }
   }
 
@@ -83,7 +94,7 @@
       position: absolute;
       border: 2px dashed $additional;
       border-radius: $circle;
-      animation: rotate 50s linear infinite;
+      animation: rotate 70s linear infinite;
     }
 
     &-rotate-wrapper {
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index 4897bfe..3549e4e 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,30 +1,16 @@
 import React from "react";
-import { ICONS } from "../../../assets/js/common/icons";
 
-const content = {
-  title: "GoTech Group Provides",
-  description:
-    "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
-  services: [
-    { f: ICONS.WEB_DEV, s: ICONS.MOBILE_DEV },
-    { f: ICONS.DEVOPS_DEV, s: ICONS.QA_DEV },
-  ],
-  technologies: [
-    { f: ICONS.CHECK, s: ICONS.PIE },
-    { f: ICONS.AWS, s: ICONS.DOCKER },
-    { f: ICONS.SLACK, s: ICONS.STACK },
-  ],
-};
-
-function CircleDiagramServicesItem() {
+function CircleDiagramServicesItem({ icon }) {
   return (
     <div className="circle-diagram-services-wrapper">
-      <div className="circle-diagram-services-icons"></div>
+      <div className="circle-diagram-services-icons">
+        <i className={icon}></i>
+      </div>
     </div>
   );
 }
 
-function CircleDiagramTechnologiesItem() {
+function CircleDiagramTechnologiesItem({ icon }) {
   return (
     <div className="circle-diagram-technologies-wrapper">
       <div className="circle-diagram-technologies-icons"></div>
@@ -32,7 +18,7 @@ function CircleDiagramTechnologiesItem() {
   );
 }
 
-function CircleDiagram() {
+function CircleDiagram({ content }) {
   return (
     <div className="page-common-block">
       <div className="circle-diagram">
@@ -46,34 +32,36 @@ function CircleDiagram() {
         <div className="circle-diagram-services">
           <div className="circle-diagram-services-circle"> </div>
           <div>
-            {[1, 2].map((item) => {
-              return (
-                <div
-                  key={item}
-                  className="circle-diagram-services-rotate-wrapper"
-                >
-                  <CircleDiagramServicesItem />
-                  <CircleDiagramServicesItem />
-                </div>
-              );
-            })}
+            {content.services.length &&
+              content.services.map(({ f, s }) => {
+                return (
+                  <div
+                    key={f}
+                    className="circle-diagram-services-rotate-wrapper"
+                  >
+                    <CircleDiagramServicesItem icon={f} />
+                    <CircleDiagramServicesItem icon={s} />
+                  </div>
+                );
+              })}
           </div>
         </div>
 
         <div className="circle-diagram-technologies">
           <div className="circle-diagram-technologies-circle"> </div>
           <div>
-            {[1, 2, 3].map((item) => {
-              return (
-                <div
-                  key={item}
-                  className="circle-diagram-technologies-rotate-wrapper"
-                >
-                  <CircleDiagramTechnologiesItem />
-                  <CircleDiagramTechnologiesItem />
-                </div>
-              );
-            })}
+            {content.technologies.length &&
+              content.technologies.map(({ f, s }) => {
+                return (
+                  <div
+                    key={f}
+                    className="circle-diagram-technologies-rotate-wrapper"
+                  >
+                    <CircleDiagramTechnologiesItem />
+                    <CircleDiagramTechnologiesItem />
+                  </div>
+                );
+              })}
           </div>
         </div>
       </div>
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 6dc589a..33edb46 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -1,15 +1,31 @@
 import CircleDiagram from "../../common/circleDiagram";
 import React from "react";
 import animations from "../../../assets/js/animations";
+import { ICONS } from "../../../assets/js/common/icons";
 import { handleUrl } from "../../utils";
 
+const content = {
+  title: "GoTech Group Provides",
+  description:
+    "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
+  services: [
+    { f: ICONS.WEB_DEV, s: ICONS.MOBILE_DEV },
+    { f: ICONS.DEVOPS_DEV, s: ICONS.QA_DEV },
+  ],
+  technologies: [
+    { f: ICONS.NETWORK, s: ICONS.PIE },
+    { f: ICONS.AWS, s: ICONS.DOCKER },
+    { f: ICONS.SLACK, s: ICONS.STACK },
+  ],
+};
+
 const Home = ({ header, navbar, _relativeURL, _ID }) => {
   return (
     <div className="home" data-aos={animations.up}>
       {navbar}
       {header}
 
-      <CircleDiagram />
+      <CircleDiagram content={content} />
 
       <script
         type="module"

From 38e938f4c9979240a5b9045c5aeb0f4074b8d4b5 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 13:49:36 +0200
Subject: [PATCH 07/34] color

---
 code/common/circleDiagram/index.js | 11 +++++++----
 code/screens/home/index.js         | 25 ++++++++++++++++++++-----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index 3549e4e..3108d94 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -10,10 +10,13 @@ function CircleDiagramServicesItem({ icon }) {
   );
 }
 
-function CircleDiagramTechnologiesItem({ icon }) {
+function CircleDiagramTechnologiesItem({ color }) {
   return (
     <div className="circle-diagram-technologies-wrapper">
-      <div className="circle-diagram-technologies-icons"></div>
+      <div
+        className="circle-diagram-technologies-icons"
+        style={{ backgroundColor: color }}
+      ></div>
     </div>
   );
 }
@@ -57,8 +60,8 @@ function CircleDiagram({ content }) {
                     key={f}
                     className="circle-diagram-technologies-rotate-wrapper"
                   >
-                    <CircleDiagramTechnologiesItem />
-                    <CircleDiagramTechnologiesItem />
+                    <CircleDiagramTechnologiesItem color={f} />
+                    <CircleDiagramTechnologiesItem color={s} />
                   </div>
                 );
               })}
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 33edb46..bab064a 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -9,13 +9,28 @@ const content = {
   description:
     "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
   services: [
-    { f: ICONS.WEB_DEV, s: ICONS.MOBILE_DEV },
-    { f: ICONS.DEVOPS_DEV, s: ICONS.QA_DEV },
+    {
+      f: { icon: ICONS.WEB_DEV, color: "green" },
+      s: { icon: ICONS.MOBILE_DEV, color: "blue" },
+    },
+    {
+      f: { icon: ICONS.DEVOPS_DEV, color: "orange" },
+      s: { icon: ICONS.QA_DEV, color: "pink" },
+    },
   ],
   technologies: [
-    { f: ICONS.NETWORK, s: ICONS.PIE },
-    { f: ICONS.AWS, s: ICONS.DOCKER },
-    { f: ICONS.SLACK, s: ICONS.STACK },
+    {
+      f: "green",
+      s: "pink",
+    },
+    {
+      s: "blue",
+      f: "purple",
+    },
+    {
+      f: "orange",
+      s: "prime",
+    },
   ],
 };
 

From 93fa5cc8410311ab221b5025c308fcd4abbe824a Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 13:59:02 +0200
Subject: [PATCH 08/34] color

---
 assets/js/common/colors/index.js      |  6 ++++++
 assets/sass/colors.scss               |  3 +++
 assets/sass/common/circleDiagram.scss |  2 +-
 assets/sass/common/common.scss        | 20 ++++++++++++++++++++
 code/common/circleDiagram/index.js    |  5 +----
 code/screens/home/index.js            |  3 ++-
 6 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/assets/js/common/colors/index.js b/assets/js/common/colors/index.js
index 84cdb43..4d4db3d 100644
--- a/assets/js/common/colors/index.js
+++ b/assets/js/common/colors/index.js
@@ -1,5 +1,11 @@
 export const COLORS = {
   GREEN: "green",
+  BLUE: "blue",
   GRAY: "gray",
   ORANGE: "orange",
+  PINK: "pink",
+  PURPLE: "purple",
+  PRIME: "prime",
+  MAIN: "main",
+  DEFAULT: "default",
 };
diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss
index 04d8bc5..8991043 100644
--- a/assets/sass/colors.scss
+++ b/assets/sass/colors.scss
@@ -12,4 +12,7 @@ $additional: #c2c2c2;
 $prime: #0c173c;
 $green: #4be2c8;
 $blue: #2ac8e8;
+
+$orange: #4be2c8;
+$pink: #ff6489;
 $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/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index 459a147..a51e10d 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -132,7 +132,7 @@
     &-icons {
       width: 30px;
       height: 30px;
-      background-color: $green;
+      // background-color: $green;
       border-radius: 50%;
     }
   }
diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index 48dacbe..d0838c1 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -113,6 +113,26 @@ img {
   object-fit: contain;
 }
 
+.green {
+  background-color: $green;
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.orange {
+  background-color: $orange;
+}
+
+.pink {
+  background-color: $pink;
+}
+
+.prime {
+  background-color: $prime;
+}
+
 @media only screen and (max-width: $mobile) {
   h1 {
     font-size: 30px;
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index 3108d94..4f1f93e 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -13,10 +13,7 @@ function CircleDiagramServicesItem({ icon }) {
 function CircleDiagramTechnologiesItem({ color }) {
   return (
     <div className="circle-diagram-technologies-wrapper">
-      <div
-        className="circle-diagram-technologies-icons"
-        style={{ backgroundColor: color }}
-      ></div>
+      <div className={`circle-diagram-technologies-icons ${color}`}></div>
     </div>
   );
 }
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index bab064a..c790fca 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -1,6 +1,7 @@
 import CircleDiagram from "../../common/circleDiagram";
 import React from "react";
 import animations from "../../../assets/js/animations";
+import { COLORS } from "../../../assets/js/common/colors";
 import { ICONS } from "../../../assets/js/common/icons";
 import { handleUrl } from "../../utils";
 
@@ -11,7 +12,7 @@ const content = {
   services: [
     {
       f: { icon: ICONS.WEB_DEV, color: "green" },
-      s: { icon: ICONS.MOBILE_DEV, color: "blue" },
+      s: { icon: ICONS.MOBILE_DEV, color: COLORS.BLUE },
     },
     {
       f: { icon: ICONS.DEVOPS_DEV, color: "orange" },

From 77607a533850f99b0397bb3ea8e487dfc1c73a20 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 14:06:17 +0200
Subject: [PATCH 09/34] color

---
 assets/sass/colors.scss               |  7 ++++---
 assets/sass/common/circleDiagram.scss |  1 -
 assets/sass/common/common.scss        |  4 ++++
 code/common/circleDiagram/index.js    |  8 ++++----
 code/screens/home/index.js            | 10 +++++-----
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss
index 8991043..ea0d66d 100644
--- a/assets/sass/colors.scss
+++ b/assets/sass/colors.scss
@@ -2,17 +2,18 @@ $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);
+
 $main: white;
 $default: #f8f9fa;
 $additional: #c2c2c2;
 $prime: #0c173c;
 $green: #4be2c8;
 $blue: #2ac8e8;
-
-$orange: #4be2c8;
+$orange: #ffc453;
 $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/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index a51e10d..e099e30 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -58,7 +58,6 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: $green;
       border-radius: 50%;
 
       i {
diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index d0838c1..2cf9590 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -129,6 +129,10 @@ img {
   background-color: $pink;
 }
 
+.purple {
+  background-color: $purple;
+}
+
 .prime {
   background-color: $prime;
 }
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index 4f1f93e..62116a2 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,9 +1,9 @@
 import React from "react";
 
-function CircleDiagramServicesItem({ icon }) {
+function CircleDiagramServicesItem({ icon, color }) {
   return (
     <div className="circle-diagram-services-wrapper">
-      <div className="circle-diagram-services-icons">
+      <div className={`circle-diagram-services-icons ${color}`}>
         <i className={icon}></i>
       </div>
     </div>
@@ -39,8 +39,8 @@ function CircleDiagram({ content }) {
                     key={f}
                     className="circle-diagram-services-rotate-wrapper"
                   >
-                    <CircleDiagramServicesItem icon={f} />
-                    <CircleDiagramServicesItem icon={s} />
+                    <CircleDiagramServicesItem icon={f.icon} color={f.color} />
+                    <CircleDiagramServicesItem icon={s.icon} color={s.color} />
                   </div>
                 );
               })}
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index c790fca..cdb491f 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -11,12 +11,12 @@ const content = {
     "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
   services: [
     {
-      f: { icon: ICONS.WEB_DEV, color: "green" },
+      f: { icon: ICONS.WEB_DEV, color: COLORS.GREEN },
       s: { icon: ICONS.MOBILE_DEV, color: COLORS.BLUE },
     },
     {
-      f: { icon: ICONS.DEVOPS_DEV, color: "orange" },
-      s: { icon: ICONS.QA_DEV, color: "pink" },
+      f: { icon: ICONS.DEVOPS_DEV, color: COLORS.ORANGE },
+      s: { icon: ICONS.QA_DEV, color: COLORS.PINK },
     },
   ],
   technologies: [
@@ -25,8 +25,8 @@ const content = {
       s: "pink",
     },
     {
-      s: "blue",
-      f: "purple",
+      f: "blue",
+      s: "purple",
     },
     {
       f: "orange",

From 0a0cc01d810964c1070ec506c93d40d91a753938 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 14:12:54 +0200
Subject: [PATCH 10/34] mobail

---
 assets/sass/common/circleDiagram.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index e099e30..101f297 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -173,10 +173,17 @@
     &-rotate-wrapper {
       &:nth-child(1) {
         transform: rotate(60deg);
+
+        .circle-diagram-services-icons {
+          transform: rotate(-60deg);
+        }
       }
 
       &:nth-child(2) {
         transform: rotate(120deg);
+        .circle-diagram-services-icons {
+          transform: rotate(-120deg);
+        }
       }
     }
   }

From 033c6a64a5483ac59e38e88171bae142eb8c7b56 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 15:10:26 +0200
Subject: [PATCH 11/34] diagram

---
 assets/sass/common/circleDiagram.scss | 14 ++++++++------
 code/common/circleDiagram/index.js    | 18 ++++++++++++-----
 code/screens/home/index.js            | 28 +++++++++++++++++----------
 3 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index 101f297..03635bf 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -33,6 +33,7 @@
       position: absolute;
       left: 0;
       top: 42%;
+      z-index: 10;
 
       &:nth-child(1) {
         transform: rotate(90deg);
@@ -45,11 +46,11 @@
     &-wrapper {
       width: 100px;
       height: 100px;
-      background-color: $main;
-      border-radius: $circle;
       display: flex;
       justify-content: center;
       align-items: center;
+      background-color: $main;
+      border-radius: $circle;
     }
 
     &-icons {
@@ -59,6 +60,7 @@
       justify-content: center;
       align-items: center;
       border-radius: 50%;
+      cursor: pointer;
 
       i {
         font-size: 30px;
@@ -79,16 +81,16 @@
 
   //technologies
   &-technologies {
-    width: 950px;
-    height: 950px;
+    width: 800px;
+    height: 800px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
 
     &-circle {
-      width: 900px;
-      height: 900px;
+      width: 750px;
+      height: 750px;
       display: flex;
       position: absolute;
       border: 2px dashed $additional;
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index 62116a2..17e7986 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,11 +1,11 @@
 import React from "react";
 
-function CircleDiagramServicesItem({ icon, color }) {
+function CircleDiagramServicesItem({ icon, link, color }) {
   return (
     <div className="circle-diagram-services-wrapper">
-      <div className={`circle-diagram-services-icons ${color}`}>
+      <a href={link} className={`circle-diagram-services-icons ${color}`}>
         <i className={icon}></i>
-      </div>
+      </a>
     </div>
   );
 }
@@ -39,8 +39,16 @@ function CircleDiagram({ content }) {
                     key={f}
                     className="circle-diagram-services-rotate-wrapper"
                   >
-                    <CircleDiagramServicesItem icon={f.icon} color={f.color} />
-                    <CircleDiagramServicesItem icon={s.icon} color={s.color} />
+                    <CircleDiagramServicesItem
+                      icon={f.icon}
+                      link={f.link}
+                      color={f.color}
+                    />
+                    <CircleDiagramServicesItem
+                      icon={s.icon}
+                      link={s.link}
+                      color={s.color}
+                    />
                   </div>
                 );
               })}
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index cdb491f..165edc1 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -11,26 +11,34 @@ const content = {
     "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
   services: [
     {
-      f: { icon: ICONS.WEB_DEV, color: COLORS.GREEN },
-      s: { icon: ICONS.MOBILE_DEV, color: COLORS.BLUE },
+      f: { icon: ICONS.WEB_DEV, link: "/services/web", color: COLORS.GREEN },
+      s: {
+        icon: ICONS.MOBILE_DEV,
+        link: "/services/mobile",
+        color: COLORS.BLUE,
+      },
     },
     {
-      f: { icon: ICONS.DEVOPS_DEV, color: COLORS.ORANGE },
-      s: { icon: ICONS.QA_DEV, color: COLORS.PINK },
+      f: {
+        icon: ICONS.DEVOPS_DEV,
+        link: "/services/devops",
+        color: COLORS.ORANGE,
+      },
+      s: { icon: ICONS.QA_DEV, link: "/services/qa", color: COLORS.PINK },
     },
   ],
   technologies: [
     {
-      f: "green",
-      s: "pink",
+      f: "purple",
+      s: "orange",
     },
     {
-      f: "blue",
-      s: "purple",
+      f: "prime",
+      s: "green",
     },
     {
-      f: "orange",
-      s: "prime",
+      f: "pink",
+      s: "blue",
     },
   ],
 };

From e428bd87a9fc08d5889422444c0badeab1f80d50 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 29 Dec 2022 16:09:02 +0200
Subject: [PATCH 12/34] details

---
 assets/js/common/main-page/index.js | 5 +++++
 code/screens/home/index.js          | 3 +++
 2 files changed, 8 insertions(+)
 create mode 100644 assets/js/common/main-page/index.js

diff --git a/assets/js/common/main-page/index.js b/assets/js/common/main-page/index.js
new file mode 100644
index 0000000..c11bee5
--- /dev/null
+++ b/assets/js/common/main-page/index.js
@@ -0,0 +1,5 @@
+export const MAIN_PAGE_DETAILS = {
+  title: "ggygj",
+  description: "jh ggy g ghghjgh gh ghghghgh uhu bnvvbv",
+  section: [],
+};
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 165edc1..5d394c4 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -3,6 +3,7 @@ import React from "react";
 import animations from "../../../assets/js/animations";
 import { COLORS } from "../../../assets/js/common/colors";
 import { ICONS } from "../../../assets/js/common/icons";
+import { MAIN_PAGE_DETAILS } from "../../../assets/js/common/main-page";
 import { handleUrl } from "../../utils";
 
 const content = {
@@ -44,6 +45,8 @@ const content = {
 };
 
 const Home = ({ header, navbar, _relativeURL, _ID }) => {
+  const { title } = MAIN_PAGE_DETAILS;
+
   return (
     <div className="home" data-aos={animations.up}>
       {navbar}

From 734aa32ea931178cb93cb4a8d24274a4031a20dd Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 1 Jan 2023 13:42:52 +0200
Subject: [PATCH 13/34] added animaion

---
 assets/js/common/main-page/index.js   |  37 +++++++++-
 assets/sass/home/sections/header.scss | 102 ++++++++++++++------------
 code/screens/home/index.js            |  30 +++++++-
 3 files changed, 117 insertions(+), 52 deletions(-)

diff --git a/assets/js/common/main-page/index.js b/assets/js/common/main-page/index.js
index c11bee5..9399edc 100644
--- a/assets/js/common/main-page/index.js
+++ b/assets/js/common/main-page/index.js
@@ -1,5 +1,40 @@
+import { COLORS } from "../colors";
+
 export const MAIN_PAGE_DETAILS = {
   title: "ggygj",
   description: "jh ggy g ghghjgh gh ghghghgh uhu bnvvbv",
-  section: [],
+  sections: [
+    {
+      type: "section-alpha",
+      color: COLORS.MAIN,
+      title: "All Our Categories",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+      type: "section-beta",
+      color: COLORS.BLUE,
+      title: "Please choose one interesting of all categories!",
+      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.GRAY,
+      title: "Great Companies make us grow every day!",
+      description:
+        "We are proud to work with truly innovative clients. Here are just a few of the companies we’ve had the privilege to work with.",
+    },
+    {
+      type: "section-delta",
+      color: COLORS.ORANGE,
+      title: "Please choose one interesting of all categories!",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+      type: "section-epsilon",
+      color: COLORS.MAIN,
+    },
+  ],
 };
diff --git a/assets/sass/home/sections/header.scss b/assets/sass/home/sections/header.scss
index e9bb2af..2c6b112 100644
--- a/assets/sass/home/sections/header.scss
+++ b/assets/sass/home/sections/header.scss
@@ -1,65 +1,71 @@
-.home-header {
-  height: 100vh;
-  padding: 150px 0 200px;
-  position: relative;
-  overflow: hidden;
-  background-color: $prime;
+.home {
+  &-screens {
+    width: 950px;
+    margin: -500px auto 0;
+  }
 
-  &-background {
-    width: 100%;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    z-index: 1;
+  &-header {
+    height: 150vh;
+    padding: 150px 0 200px;
+    position: relative;
+    overflow: hidden;
+    background-color: $prime;
 
-    .orange-blobs {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+    &-background {
+      width: 100%;
       position: absolute;
-      right: -500px;
-      top: -500px;
-    }
+      left: 0px;
+      top: 0px;
+      z-index: 1;
 
-    .green-blobs {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      left: -450px;
-      bottom: -1000px;
-    }
-  }
+      .orange-blobs {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        right: -500px;
+        top: -500px;
+      }
 
-  @keyframes rotation {
-    from {
-      transform: rotate(0deg);
+      .green-blobs {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        left: -450px;
+        bottom: -1000px;
+      }
     }
-    to {
-      transform: rotate(360deg);
+
+    @keyframes rotation {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
     }
-  }
 
-  &-main {
-    max-width: $main-grid;
-    width: calc(100% - 50px);
-    position: relative;
-    z-index: 2;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
+    &-main {
+      max-width: $main-grid;
+      width: calc(100% - 50px);
+      position: relative;
+      z-index: 2;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
 
-    &-content {
-      opacity: 0.85;
+      &-content {
+        opacity: 0.85;
 
-      p {
-        margin: $content-gap 0 $section-gap;
-        color: $main;
+        p {
+          margin: $content-gap 0 $section-gap;
+          color: $main;
+        }
       }
     }
   }
 }
-
 @media only screen and (max-width: $mobile) {
   .home-header {
     height: auto;
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 5d394c4..73344a1 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -1,4 +1,5 @@
 import CircleDiagram from "../../common/circleDiagram";
+import ColorSection from "../../common/ColorSection";
 import React from "react";
 import animations from "../../../assets/js/animations";
 import { COLORS } from "../../../assets/js/common/colors";
@@ -45,14 +46,37 @@ const content = {
 };
 
 const Home = ({ header, navbar, _relativeURL, _ID }) => {
-  const { title } = MAIN_PAGE_DETAILS;
+  const { sections } = MAIN_PAGE_DETAILS;
 
   return (
     <div className="home" data-aos={animations.up}>
       {navbar}
       {header}
-
-      <CircleDiagram content={content} />
+      <div className="home-screens">
+        <lottie-player
+          src="https://lottie.host/9c8c0b1e-2283-419e-a35e-c8dd8c3c5869/cqIf494w5p.json"
+          background="transparent"
+          speed="1"
+          style={{ width: "100%", height: "100%" }}
+          loop
+          autoplay
+        ></lottie-player>
+      </div>
+      {sections.length &&
+        sections.map(({ type, color, title, description }) => {
+          return (
+            <ColorSection
+              key={type}
+              color={color}
+              title={title}
+              description={description}
+            >
+              {type === "section-epsilon" && (
+                <CircleDiagram content={content} />
+              )}
+            </ColorSection>
+          );
+        })}
 
       <script
         type="module"

From cc7176ba26ed381756c4c730d43d9302d73692a6 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 1 Jan 2023 16:23:08 +0200
Subject: [PATCH 14/34] added clients

---
 assets/js/common/main-page/index.js     | 19 ++++----
 assets/sass/common/clients.scss         | 34 ++++++++++++++
 assets/sass/common/index.scss           |  1 +
 code/screens/home/components/clients.js | 59 +++++++++++++++++++++++++
 code/screens/home/index.js              | 10 +++--
 content/home/md/clients/list.md         | 12 ++---
 content/home/md/header/index.md         |  4 ++
 7 files changed, 118 insertions(+), 21 deletions(-)
 create mode 100644 assets/sass/common/clients.scss
 create mode 100644 code/screens/home/components/clients.js

diff --git a/assets/js/common/main-page/index.js b/assets/js/common/main-page/index.js
index 9399edc..2c387fc 100644
--- a/assets/js/common/main-page/index.js
+++ b/assets/js/common/main-page/index.js
@@ -7,34 +7,31 @@ export const MAIN_PAGE_DETAILS = {
     {
       type: "section-alpha",
       color: COLORS.MAIN,
-      title: "All Our Categories",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
     },
     {
       type: "section-beta",
-      color: COLORS.BLUE,
-      title: "Please choose one interesting of all categories!",
+      color: COLORS.GREEN,
+      title: "Excepteur sint occaecat cupidatat non",
       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.GRAY,
-      title: "Great Companies make us grow every day!",
-      description:
-        "We are proud to work with truly innovative clients. Here are just a few of the companies we’ve had the privilege to work with.",
+      color: COLORS.MAIN,
     },
     {
       type: "section-delta",
       color: COLORS.ORANGE,
-      title: "Please choose one interesting of all categories!",
+      title: "Excepteur sint occaecat cupidatat non",
       description:
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
     },
     {
       type: "section-epsilon",
-      color: COLORS.MAIN,
+      color: COLORS.GRAY,
+      title: "Great Companies make us grow every day!",
+      description:
+        "We are proud to work with truly innovative clients. Here are just a few of the companies we’ve had the privilege to work with.",
     },
   ],
 };
diff --git a/assets/sass/common/clients.scss b/assets/sass/common/clients.scss
new file mode 100644
index 0000000..5b5bf2d
--- /dev/null
+++ b/assets/sass/common/clients.scss
@@ -0,0 +1,34 @@
+.clients {
+  &-wrapper {
+    width: 100%;
+    margin: 100px 0;
+    padding: $section-gap;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    background-color: $main;
+    border-radius: $radius;
+    box-shadow: $shadow;
+  }
+
+  &-item {
+    width: 30%;
+    margin: $section-gap auto;
+
+    &-image {
+      width: 150px;
+      margin: 0 auto;
+    }
+  }
+}
+
+@media only screen and (max-width: $medium) {
+}
+
+@media only screen and (max-width: $mobile) {
+  .clients {
+    width: 100%;
+    height: 150px;
+  }
+}
diff --git a/assets/sass/common/index.scss b/assets/sass/common/index.scss
index f46a953..7926ec2 100644
--- a/assets/sass/common/index.scss
+++ b/assets/sass/common/index.scss
@@ -10,6 +10,7 @@
 @import "./steps.scss";
 @import "./parallax.scss";
 @import "./circleDiagram.scss";
+@import "./clients.scss";
 
 .flex-start {
   display: flex;
diff --git a/code/screens/home/components/clients.js b/code/screens/home/components/clients.js
new file mode 100644
index 0000000..68d39e5
--- /dev/null
+++ b/code/screens/home/components/clients.js
@@ -0,0 +1,59 @@
+import React from "react";
+
+const clients = [
+  {
+    src: "/assets/images/home/clients/google.png",
+    alt: "orbs",
+  },
+  {
+    src: "/assets/images/home/clients/walmart.png",
+    alt: "orbs",
+  },
+  {
+    src: "/assets/images/home/clients/qualcomm.png",
+    alt: "orbs",
+  },
+  {
+    src: "/assets/images/home/clients/mellanox.png",
+    alt: "orbs",
+  },
+  {
+    src: "/assets/images/home/clients/amdocs-logo.png",
+    alt: "orbs",
+  },
+  {
+    src: "/assets/images/home/clients/digibank.png",
+    alt: "orbs",
+  },
+  {
+    src: "/assets/images/home/clients/nsogroup.png",
+    alt: "orbs",
+  },
+  {
+    src: "/assets/images/home/clients/cisco.svg",
+    alt: "orbs",
+  },
+  {
+    src: "/assets/images/home/clients/salesforce.png",
+    alt: "orbs",
+  },
+];
+
+const Clients = () => {
+  return (
+    <div className={"clients-wrapper"}>
+      {clients.length &&
+        clients.map(({ src, alt }) => {
+          return (
+            <div className={"clients-item"} key={src}>
+              <div className={"clients-item-image"} key={src}>
+                <img src={src} alt={alt} />
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+export default Clients;
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 73344a1..f6ab7a0 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -1,4 +1,5 @@
 import CircleDiagram from "../../common/circleDiagram";
+import Clients from "./components/clients";
 import ColorSection from "../../common/ColorSection";
 import React from "react";
 import animations from "../../../assets/js/animations";
@@ -45,7 +46,7 @@ const content = {
   ],
 };
 
-const Home = ({ header, navbar, _relativeURL, _ID }) => {
+const Home = ({ header, navbar, contact, _relativeURL, _ID }) => {
   const { sections } = MAIN_PAGE_DETAILS;
 
   return (
@@ -71,13 +72,14 @@ const Home = ({ header, navbar, _relativeURL, _ID }) => {
               title={title}
               description={description}
             >
-              {type === "section-epsilon" && (
-                <CircleDiagram content={content} />
-              )}
+              {type === "section-gamma" && <CircleDiagram content={content} />}
+              {type === "section-epsilon" && <Clients />}
             </ColorSection>
           );
         })}
 
+      <div className="page-common-sub-section">{contact}</div>
+
       <script
         type="module"
         src={handleUrl(`/assets/js/home/index.js`, _relativeURL, _ID)}
diff --git a/content/home/md/clients/list.md b/content/home/md/clients/list.md
index 261cc0a..4f0aa9c 100644
--- a/content/home/md/clients/list.md
+++ b/content/home/md/clients/list.md
@@ -4,12 +4,16 @@ list:
   - assets/images/home/clients/google.png
   - assets/images/home/clients/walmart.png
   - assets/images/home/clients/qualcomm.png
+  - assets/images/home/clients/nsogroup.png
+  - assets/images/home/clients/mellanox.png
+  - assets/images/home/clients/amdocs-logo.png
+  - assets/images/home/clients/digibank.png
+  - assets/images/home/clients/cisco.svg
+  - assets/images/home/clients/salesforce.png
   - assets/images/home/clients/cognyte.png
   - assets/images/home/clients/orbs.png
   - assets/images/home/clients/altshuler.png
-  - assets/images/home/clients/amdocs-logo.png
   - assets/images/home/clients/applied.png
-  - assets/images/home/clients/digibank.png
   - assets/images/home/clients/audiocodes.png
   - assets/images/home/clients/sqream.png
   - assets/images/home/clients/ownbackup.png
@@ -35,13 +39,10 @@ list:
   - assets/images/home/clients/pmo.png
   - assets/images/home/clients/police.png
   - assets/images/home/clients/renuar.png
-  - assets/images/home/clients/salesforce.png
   - assets/images/home/clients/weissbeerger.png
   - assets/images/home/clients/ustglobal.png
   - assets/images/home/clients/stilyoapps.png
-  - assets/images/home/clients/cisco.svg
   - assets/images/home/clients/earlysense.png
-  - assets/images/home/clients/mellanox.png
   - assets/images/home/clients/cybereason.png
   - assets/images/home/clients/tase.png
   - assets/images/home/clients/vasona.png
@@ -68,7 +69,6 @@ list:
   - assets/images/home/clients/menora.png
   - assets/images/home/clients/muvingapp.png
   - assets/images/home/clients/mypermissions.png
-  - assets/images/home/clients/nsogroup.png
   - assets/images/home/clients/navy.png
   - assets/images/home/clients/odo.png
   #- assets/images/home/clients/weekin.png
diff --git a/content/home/md/header/index.md b/content/home/md/header/index.md
index 7b7a396..be088e6 100644
--- a/content/home/md/header/index.md
+++ b/content/home/md/header/index.md
@@ -3,6 +3,10 @@ layout: screens/home/sections/header/index
 title: GoTech
 sub_title: Providing tech as a service
 description: "Our team will help You forward to the next level. Reimagine your business into a software-first business with our custom software design and development approach!"
+
+contact:
+  - ../../../home/md/contact/index.md
+
 button:
   - link.md
 ---

From 977f3753940bfce5e8d5914be29865356db6b0c1 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 1 Jan 2023 17:32:58 +0200
Subject: [PATCH 15/34] refactor

---
 assets/js/common/main-page/index.js           |   5 +
 .../components/circleDiagramExternal.js       |  26 +++++
 .../components/circleDiagramExternalItem.js   |  11 ++
 .../components/circleDiagramServices.js       |  31 +++++
 .../components/circleDiagramServicesItem.js   |  13 +++
 code/common/circleDiagram/index.js            | 106 ++++++++----------
 code/common/lottie-player/index.js            |  16 +++
 code/screens/home/components/sections.js      |  27 +++++
 code/screens/home/index.js                    |  77 ++-----------
 9 files changed, 186 insertions(+), 126 deletions(-)
 create mode 100644 code/common/circleDiagram/components/circleDiagramExternal.js
 create mode 100644 code/common/circleDiagram/components/circleDiagramExternalItem.js
 create mode 100644 code/common/circleDiagram/components/circleDiagramServices.js
 create mode 100644 code/common/circleDiagram/components/circleDiagramServicesItem.js
 create mode 100644 code/common/lottie-player/index.js
 create mode 100644 code/screens/home/components/sections.js

diff --git a/assets/js/common/main-page/index.js b/assets/js/common/main-page/index.js
index 2c387fc..45da97b 100644
--- a/assets/js/common/main-page/index.js
+++ b/assets/js/common/main-page/index.js
@@ -3,6 +3,11 @@ import { COLORS } from "../colors";
 export const MAIN_PAGE_DETAILS = {
   title: "ggygj",
   description: "jh ggy g ghghjgh gh ghghghgh uhu bnvvbv",
+  lottie: {
+    src: "https://lottie.host/9c8c0b1e-2283-419e-a35e-c8dd8c3c5869/cqIf494w5p.json",
+    width: "100%",
+    height: "100%",
+  },
   sections: [
     {
       type: "section-alpha",
diff --git a/code/common/circleDiagram/components/circleDiagramExternal.js b/code/common/circleDiagram/components/circleDiagramExternal.js
new file mode 100644
index 0000000..31335bc
--- /dev/null
+++ b/code/common/circleDiagram/components/circleDiagramExternal.js
@@ -0,0 +1,26 @@
+import CircleDiagramExternalItem from "./circleDiagramExternalItem";
+import React from "react";
+
+function CircleDiagramExternal({ externalsCircles }) {
+  return (
+    <div className="circle-diagram-external">
+      <div className="circle-diagram-technologies-circle"> </div>
+      <div>
+        {externalsCircles.length &&
+          externalsCircles.map(({ f, s }) => {
+            return (
+              <div
+                key={f}
+                className="circle-diagram-technologies-rotate-wrapper"
+              >
+                <CircleDiagramExternalItem color={f} />
+                <CircleDiagramExternalItem color={s} />
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+export default CircleDiagramExternal;
diff --git a/code/common/circleDiagram/components/circleDiagramExternalItem.js b/code/common/circleDiagram/components/circleDiagramExternalItem.js
new file mode 100644
index 0000000..94c6f3f
--- /dev/null
+++ b/code/common/circleDiagram/components/circleDiagramExternalItem.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+function CircleDiagramExternalItem({ color }) {
+  return (
+    <div className="circle-diagram-technologies-wrapper">
+      <div className={`circle-diagram-technologies-icons ${color}`}></div>
+    </div>
+  );
+}
+
+export default CircleDiagramExternalItem;
diff --git a/code/common/circleDiagram/components/circleDiagramServices.js b/code/common/circleDiagram/components/circleDiagramServices.js
new file mode 100644
index 0000000..2c507d4
--- /dev/null
+++ b/code/common/circleDiagram/components/circleDiagramServices.js
@@ -0,0 +1,31 @@
+import CircleDiagramServicesItem from "./components/circleDiagramServicesItem";
+import React from "react";
+
+function CircleDiagramServices({ services }) {
+  return (
+    <div className="circle-diagram-services">
+      <div className="circle-diagram-services-circle"> </div>
+      <div>
+        {services.length &&
+          services.map(({ f, s }) => {
+            return (
+              <div key={f} className="circle-diagram-services-rotate-wrapper">
+                <CircleDiagramServicesItem
+                  icon={f.icon}
+                  link={f.link}
+                  color={f.color}
+                />
+                <CircleDiagramServicesItem
+                  icon={s.icon}
+                  link={s.link}
+                  color={s.color}
+                />
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+}
+
+export default CircleDiagramServices;
diff --git a/code/common/circleDiagram/components/circleDiagramServicesItem.js b/code/common/circleDiagram/components/circleDiagramServicesItem.js
new file mode 100644
index 0000000..c8e71e9
--- /dev/null
+++ b/code/common/circleDiagram/components/circleDiagramServicesItem.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+function CircleDiagramServicesItem({ icon, link, color }) {
+  return (
+    <div className="circle-diagram-services-wrapper">
+      <a href={link} className={`circle-diagram-services-icons ${color}`}>
+        <i className={icon}></i>
+      </a>
+    </div>
+  );
+}
+
+export default CircleDiagramServicesItem;
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index 17e7986..b4ea5a0 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,24 +1,50 @@
+import CircleDiagramExternal from "./components/circleDiagramExternal";
+import CircleDiagramServices from "./components/circleDiagramServices";
+import CircleDiagramServicesItem from "./components/circleDiagramServicesItem";
+import CircleDiagramTechnologiesItem from "./components/circleDiagramExternalItem";
 import React from "react";
+import { COLORS } from "../../../assets/js/common/colors";
+import { ICONS } from "../../../assets/js/common/icons";
 
-function CircleDiagramServicesItem({ icon, link, color }) {
-  return (
-    <div className="circle-diagram-services-wrapper">
-      <a href={link} className={`circle-diagram-services-icons ${color}`}>
-        <i className={icon}></i>
-      </a>
-    </div>
-  );
-}
+const content = {
+  title: "GoTech Group Provides",
+  description:
+    "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
+  services: [
+    {
+      f: { icon: ICONS.WEB_DEV, link: "/services/web", color: COLORS.GREEN },
+      s: {
+        icon: ICONS.MOBILE_DEV,
+        link: "/services/mobile",
+        color: COLORS.BLUE,
+      },
+    },
+    {
+      f: {
+        icon: ICONS.DEVOPS_DEV,
+        link: "/services/devops",
+        color: COLORS.ORANGE,
+      },
+      s: { icon: ICONS.QA_DEV, link: "/services/qa", color: COLORS.PINK },
+    },
+  ],
+  externalsCircles: [
+    {
+      f: "purple",
+      s: "orange",
+    },
+    {
+      f: "prime",
+      s: "green",
+    },
+    {
+      f: "pink",
+      s: "blue",
+    },
+  ],
+};
 
-function CircleDiagramTechnologiesItem({ color }) {
-  return (
-    <div className="circle-diagram-technologies-wrapper">
-      <div className={`circle-diagram-technologies-icons ${color}`}></div>
-    </div>
-  );
-}
-
-function CircleDiagram({ content }) {
+function CircleDiagram() {
   return (
     <div className="page-common-block">
       <div className="circle-diagram">
@@ -29,49 +55,9 @@ function CircleDiagram({ content }) {
           </div>
         </div>
 
-        <div className="circle-diagram-services">
-          <div className="circle-diagram-services-circle"> </div>
-          <div>
-            {content.services.length &&
-              content.services.map(({ f, s }) => {
-                return (
-                  <div
-                    key={f}
-                    className="circle-diagram-services-rotate-wrapper"
-                  >
-                    <CircleDiagramServicesItem
-                      icon={f.icon}
-                      link={f.link}
-                      color={f.color}
-                    />
-                    <CircleDiagramServicesItem
-                      icon={s.icon}
-                      link={s.link}
-                      color={s.color}
-                    />
-                  </div>
-                );
-              })}
-          </div>
-        </div>
+        <CircleDiagramServices services={content.services} />
 
-        <div className="circle-diagram-technologies">
-          <div className="circle-diagram-technologies-circle"> </div>
-          <div>
-            {content.technologies.length &&
-              content.technologies.map(({ f, s }) => {
-                return (
-                  <div
-                    key={f}
-                    className="circle-diagram-technologies-rotate-wrapper"
-                  >
-                    <CircleDiagramTechnologiesItem color={f} />
-                    <CircleDiagramTechnologiesItem color={s} />
-                  </div>
-                );
-              })}
-          </div>
-        </div>
+        <CircleDiagramExternal externalsCircles={content.externalsCircles} />
       </div>
     </div>
   );
diff --git a/code/common/lottie-player/index.js b/code/common/lottie-player/index.js
new file mode 100644
index 0000000..46fe88f
--- /dev/null
+++ b/code/common/lottie-player/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+function LottiePlayer({ src, width, height }) {
+  return (
+    <lottie-player
+      src={src}
+      background="transparent"
+      speed="1"
+      style={{ width: { width }, height: { height } }}
+      loop
+      autoplay
+    ></lottie-player>
+  );
+}
+
+export default LottiePlayer;
diff --git a/code/screens/home/components/sections.js b/code/screens/home/components/sections.js
new file mode 100644
index 0000000..39de51d
--- /dev/null
+++ b/code/screens/home/components/sections.js
@@ -0,0 +1,27 @@
+import CircleDiagram from "../../../common/circleDiagram";
+import Clients from "./clients";
+import ColorSection from "../../../common/ColorSection";
+import React from "react";
+
+const Sections = ({ sections }) => {
+  return (
+    <div>
+      {sections.length &&
+        sections.map(({ type, color, title, description }) => {
+          return (
+            <ColorSection
+              key={type}
+              color={color}
+              title={title}
+              description={description}
+            >
+              {type === "section-gamma" && <CircleDiagram />}
+              {type === "section-epsilon" && <Clients />}
+            </ColorSection>
+          );
+        })}
+    </div>
+  );
+};
+
+export default Sections;
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index f6ab7a0..37b49cb 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -1,82 +1,27 @@
-import CircleDiagram from "../../common/circleDiagram";
-import Clients from "./components/clients";
-import ColorSection from "../../common/ColorSection";
+import LottiePlayer from "../../common/lottie-player";
 import React from "react";
+import Sections from "./components/sections";
 import animations from "../../../assets/js/animations";
-import { COLORS } from "../../../assets/js/common/colors";
-import { ICONS } from "../../../assets/js/common/icons";
 import { MAIN_PAGE_DETAILS } from "../../../assets/js/common/main-page";
 import { handleUrl } from "../../utils";
 
-const content = {
-  title: "GoTech Group Provides",
-  description:
-    "State-of-the-art services, including highly qualified experts in all areas of infrastructure and development. Our services include Web Development, Mobile Development, DevOps, and QA Automation.",
-  services: [
-    {
-      f: { icon: ICONS.WEB_DEV, link: "/services/web", color: COLORS.GREEN },
-      s: {
-        icon: ICONS.MOBILE_DEV,
-        link: "/services/mobile",
-        color: COLORS.BLUE,
-      },
-    },
-    {
-      f: {
-        icon: ICONS.DEVOPS_DEV,
-        link: "/services/devops",
-        color: COLORS.ORANGE,
-      },
-      s: { icon: ICONS.QA_DEV, link: "/services/qa", color: COLORS.PINK },
-    },
-  ],
-  technologies: [
-    {
-      f: "purple",
-      s: "orange",
-    },
-    {
-      f: "prime",
-      s: "green",
-    },
-    {
-      f: "pink",
-      s: "blue",
-    },
-  ],
-};
-
 const Home = ({ header, navbar, contact, _relativeURL, _ID }) => {
-  const { sections } = MAIN_PAGE_DETAILS;
+  const { lottie, sections } = MAIN_PAGE_DETAILS;
 
   return (
     <div className="home" data-aos={animations.up}>
       {navbar}
       {header}
+
       <div className="home-screens">
-        <lottie-player
-          src="https://lottie.host/9c8c0b1e-2283-419e-a35e-c8dd8c3c5869/cqIf494w5p.json"
-          background="transparent"
-          speed="1"
-          style={{ width: "100%", height: "100%" }}
-          loop
-          autoplay
-        ></lottie-player>
+        <LottiePlayer
+          src={lottie.src}
+          width={lottie.width}
+          height={lottie.height}
+        />
       </div>
-      {sections.length &&
-        sections.map(({ type, color, title, description }) => {
-          return (
-            <ColorSection
-              key={type}
-              color={color}
-              title={title}
-              description={description}
-            >
-              {type === "section-gamma" && <CircleDiagram content={content} />}
-              {type === "section-epsilon" && <Clients />}
-            </ColorSection>
-          );
-        })}
+
+      <Sections sections={sections} />
 
       <div className="page-common-sub-section">{contact}</div>
 

From fdc56dfb1640dda2e7cbb20d91b6b412f52bf573 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 2 Jan 2023 09:39:19 +0200
Subject: [PATCH 16/34] refactor

---
 assets/sass/common/circleDiagram.scss                |  9 ++++-----
 .../components/circleDiagramExternal.js              |  7 ++-----
 .../components/circleDiagramExternalItem.js          |  4 ++--
 .../components/circleDiagramServices.js              |  2 +-
 code/common/circleDiagram/index.js                   |  3 ---
 code/common/colorSection/index.js                    |  6 ++++--
 code/common/titleSection/index.js                    | 12 ++++++++++++
 7 files changed, 25 insertions(+), 18 deletions(-)
 create mode 100644 code/common/titleSection/index.js

diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index 03635bf..e625ef5 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -79,8 +79,8 @@
     position: absolute;
   }
 
-  //technologies
-  &-technologies {
+  //external
+  &-external {
     width: 800px;
     height: 800px;
     display: flex;
@@ -133,7 +133,6 @@
     &-icons {
       width: 30px;
       height: 30px;
-      // background-color: $green;
       border-radius: 50%;
     }
   }
@@ -146,7 +145,7 @@
 }
 
 @media only screen and (max-width: $medium) {
-  .circle-diagram-technologies-circle {
+  .circle-diagram-external-circle {
     width: 690px;
     height: 690px;
   }
@@ -190,7 +189,7 @@
     }
   }
 
-  .circle-diagram-technologies {
+  .circle-diagram-external {
     width: 650px;
     height: 650px;
 
diff --git a/code/common/circleDiagram/components/circleDiagramExternal.js b/code/common/circleDiagram/components/circleDiagramExternal.js
index 31335bc..2d7b070 100644
--- a/code/common/circleDiagram/components/circleDiagramExternal.js
+++ b/code/common/circleDiagram/components/circleDiagramExternal.js
@@ -4,15 +4,12 @@ import React from "react";
 function CircleDiagramExternal({ externalsCircles }) {
   return (
     <div className="circle-diagram-external">
-      <div className="circle-diagram-technologies-circle"> </div>
+      <div className="circle-diagram-external-circle"> </div>
       <div>
         {externalsCircles.length &&
           externalsCircles.map(({ f, s }) => {
             return (
-              <div
-                key={f}
-                className="circle-diagram-technologies-rotate-wrapper"
-              >
+              <div key={f} className="circle-diagram-external-rotate-wrapper">
                 <CircleDiagramExternalItem color={f} />
                 <CircleDiagramExternalItem color={s} />
               </div>
diff --git a/code/common/circleDiagram/components/circleDiagramExternalItem.js b/code/common/circleDiagram/components/circleDiagramExternalItem.js
index 94c6f3f..320f10a 100644
--- a/code/common/circleDiagram/components/circleDiagramExternalItem.js
+++ b/code/common/circleDiagram/components/circleDiagramExternalItem.js
@@ -2,8 +2,8 @@ import React from "react";
 
 function CircleDiagramExternalItem({ color }) {
   return (
-    <div className="circle-diagram-technologies-wrapper">
-      <div className={`circle-diagram-technologies-icons ${color}`}></div>
+    <div className="circle-diagram-external-wrapper">
+      <div className={`circle-diagram-external-icons ${color}`}></div>
     </div>
   );
 }
diff --git a/code/common/circleDiagram/components/circleDiagramServices.js b/code/common/circleDiagram/components/circleDiagramServices.js
index 2c507d4..223ef70 100644
--- a/code/common/circleDiagram/components/circleDiagramServices.js
+++ b/code/common/circleDiagram/components/circleDiagramServices.js
@@ -1,4 +1,4 @@
-import CircleDiagramServicesItem from "./components/circleDiagramServicesItem";
+import CircleDiagramServicesItem from "./circleDiagramServicesItem";
 import React from "react";
 
 function CircleDiagramServices({ services }) {
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index b4ea5a0..a01b7ba 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,7 +1,5 @@
 import CircleDiagramExternal from "./components/circleDiagramExternal";
 import CircleDiagramServices from "./components/circleDiagramServices";
-import CircleDiagramServicesItem from "./components/circleDiagramServicesItem";
-import CircleDiagramTechnologiesItem from "./components/circleDiagramExternalItem";
 import React from "react";
 import { COLORS } from "../../../assets/js/common/colors";
 import { ICONS } from "../../../assets/js/common/icons";
@@ -56,7 +54,6 @@ function CircleDiagram() {
         </div>
 
         <CircleDiagramServices services={content.services} />
-
         <CircleDiagramExternal externalsCircles={content.externalsCircles} />
       </div>
     </div>
diff --git a/code/common/colorSection/index.js b/code/common/colorSection/index.js
index 1f3238a..eae9698 100644
--- a/code/common/colorSection/index.js
+++ b/code/common/colorSection/index.js
@@ -1,15 +1,17 @@
 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 className="color-block-title">{title}</h4>
+          {/* <h4 className="color-block-title">{title}</h4>
           {description && (
             <p className="color-block-description">{description}</p>
-          )}
+          )} */}
+          <TitleSection title={title} description={description} />
 
           {paragraphs && <Paragraphs paragraphs={paragraphs} />}
 
diff --git a/code/common/titleSection/index.js b/code/common/titleSection/index.js
new file mode 100644
index 0000000..05bd0ee
--- /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 title-section">
+      <h4>{title}</h4>
+      {description && <p>{description}</p>}
+    </div>
+  );
+};
+
+export default TitleSection;

From f04d688a0c35954f883d22d3da266b8484544e73 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 2 Jan 2023 10:53:21 +0200
Subject: [PATCH 17/34] styles

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

diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index 2cf9590..73209d5 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -1,7 +1,7 @@
 h1 {
   color: $main;
-  font-size: 10rem;
-  max-height: 200px;
+  font-size: 15rem;
+  max-height: 300px;
   font-weight: 600;
 }
 

From c44c76c8c0e0af707664cf38dd375770bec49585 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 2 Jan 2023 10:55:25 +0200
Subject: [PATCH 18/34] styles

---
 assets/sass/home/sections/header.scss | 15 +++++++--------
 code/common/circleDiagram/index.js    |  9 +++++----
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/assets/sass/home/sections/header.scss b/assets/sass/home/sections/header.scss
index 2c6b112..4045bcf 100644
--- a/assets/sass/home/sections/header.scss
+++ b/assets/sass/home/sections/header.scss
@@ -1,11 +1,11 @@
 .home {
   &-screens {
     width: 950px;
-    margin: -500px auto 0;
+    margin: -450px auto 0;
   }
 
   &-header {
-    height: 150vh;
+    height: 130vh;
     padding: 150px 0 200px;
     position: relative;
     overflow: hidden;
@@ -47,14 +47,13 @@
     }
 
     &-main {
-      max-width: $main-grid;
-      width: calc(100% - 50px);
+      width: $main-grid;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      text-align: center;
       position: relative;
       z-index: 2;
-      margin-left: auto;
-      margin-right: auto;
-      text-align: center;
-
       &-content {
         opacity: 0.85;
 
diff --git a/code/common/circleDiagram/index.js b/code/common/circleDiagram/index.js
index a01b7ba..38f18de 100644
--- a/code/common/circleDiagram/index.js
+++ b/code/common/circleDiagram/index.js
@@ -1,6 +1,7 @@
 import CircleDiagramExternal from "./components/circleDiagramExternal";
 import CircleDiagramServices from "./components/circleDiagramServices";
 import React from "react";
+import TitleSection from "../titleSection";
 import { COLORS } from "../../../assets/js/common/colors";
 import { ICONS } from "../../../assets/js/common/icons";
 
@@ -47,10 +48,10 @@ function CircleDiagram() {
     <div className="page-common-block">
       <div className="circle-diagram">
         <div className="circle-diagram-content">
-          <div>
-            <h4>{content.title}</h4>
-            <p>{content.description}</p>
-          </div>
+          <TitleSection
+            title={content.title}
+            description={content.description}
+          />
         </div>
 
         <CircleDiagramServices services={content.services} />

From 36d00c8e741135ff5d37569ee17093c990739d59 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 2 Jan 2023 14:01:23 +0200
Subject: [PATCH 19/34] styles

---
 assets/sass/colors.scss              |  2 +
 assets/sass/common/colorSection.scss | 75 ++++++++++++++++++++++------
 assets/sass/common/common.scss       |  4 ++
 assets/sass/consts.scss              |  2 +
 4 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss
index ea0d66d..8fcf1ec 100644
--- a/assets/sass/colors.scss
+++ b/assets/sass/colors.scss
@@ -5,6 +5,8 @@ $clients-background: #f2f4f8;
 $case-studies-background: #f2f4f8;
 
 $green-background: linear-gradient(90deg, #4be2c8, #2ac8e8);
+$orange-background: linear-gradient(90deg, #ffc453, #ff6635);
+$pink-background: linear-gradient(90deg, #ff6635, #ff6489);
 
 $main: white;
 $default: #f8f9fa;
diff --git a/assets/sass/common/colorSection.scss b/assets/sass/common/colorSection.scss
index 976a0e8..1973202 100644
--- a/assets/sass/common/colorSection.scss
+++ b/assets/sass/common/colorSection.scss
@@ -2,34 +2,81 @@
   width: 100%;
   padding: $section-gap 0;
 
-  &-title {
-    color: $main;
+  // &-title {
+  //   color: $main;
+  // }
+
+  // &-description {
+  //   padding: $content-gap 0 0;
+  //   font-size: 20px;
+  //   color: $main;
+  // }
+}
+
+.green,
+.blue {
+  .color-block {
+    background: $green-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
+      }
+    }
   }
+}
 
-  &-description {
-    padding: $content-gap 0 0;
-    font-size: 20px;
-    color: $main;
+.pink {
+  .color-block {
+    background: $pink-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
+      }
+    }
   }
 }
 
-.green {
+.orange {
   .color-block {
-    background: $green-background;
+    background: $orange-background;
+    .title-section {
+      h4,
+      p {
+        color: $main;
+      }
+    }
+  }
+}
+
+.purple,
+.prime {
+  .color-block {
+    .title-section {
+      h4,
+      p {
+        color: $main;
+      }
+    }
   }
 }
 
 .gray {
   .color-block {
     background-color: $default;
+  }
+}
 
-    &-title {
-      color: $prime;
-    }
+.default {
+  .color-block {
+    background-color: $default;
+  }
+}
 
-    &-description {
-      color: $prime;
-    }
+.main {
+  .color-block {
+    background-color: $main;
   }
 }
 
diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index 73209d5..21ead01 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -137,6 +137,10 @@ img {
   background-color: $prime;
 }
 
+.title-section {
+  text-align: center;
+}
+
 @media only screen and (max-width: $mobile) {
   h1 {
     font-size: 30px;
diff --git a/assets/sass/consts.scss b/assets/sass/consts.scss
index ce81314..5232731 100644
--- a/assets/sass/consts.scss
+++ b/assets/sass/consts.scss
@@ -8,6 +8,8 @@ $dark-color: #191919;
 $font-color: #070f1a;
 $content-gap: 20px;
 $section-gap: 50px;
+$title-gap: 100px;
+$inner-gap: 200px;
 
 $main-grid: 950px;
 $radius: 20px;

From 8c66706a2de539d657f8afdf7a1142a2566692ea Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 2 Jan 2023 14:11:03 +0200
Subject: [PATCH 20/34] styles

---
 assets/sass/common/clients.scss      |  1 -
 assets/sass/common/colorSection.scss | 10 ----------
 assets/sass/common/common.scss       |  1 +
 code/common/colorSection/index.js    |  8 +-------
 4 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/assets/sass/common/clients.scss b/assets/sass/common/clients.scss
index 5b5bf2d..af76cb6 100644
--- a/assets/sass/common/clients.scss
+++ b/assets/sass/common/clients.scss
@@ -1,7 +1,6 @@
 .clients {
   &-wrapper {
     width: 100%;
-    margin: 100px 0;
     padding: $section-gap;
     display: flex;
     justify-content: space-between;
diff --git a/assets/sass/common/colorSection.scss b/assets/sass/common/colorSection.scss
index 1973202..80a9dcb 100644
--- a/assets/sass/common/colorSection.scss
+++ b/assets/sass/common/colorSection.scss
@@ -1,16 +1,6 @@
 .color-block {
   width: 100%;
   padding: $section-gap 0;
-
-  // &-title {
-  //   color: $main;
-  // }
-
-  // &-description {
-  //   padding: $content-gap 0 0;
-  //   font-size: 20px;
-  //   color: $main;
-  // }
 }
 
 .green,
diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index 21ead01..be4a7aa 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -139,6 +139,7 @@ img {
 
 .title-section {
   text-align: center;
+  padding: $title-gap 0;
 }
 
 @media only screen and (max-width: $mobile) {
diff --git a/code/common/colorSection/index.js b/code/common/colorSection/index.js
index eae9698..2d53228 100644
--- a/code/common/colorSection/index.js
+++ b/code/common/colorSection/index.js
@@ -7,14 +7,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>
-          )} */}
-          <TitleSection title={title} description={description} />
-
+          {title && <TitleSection title={title} description={description} />}
           {paragraphs && <Paragraphs paragraphs={paragraphs} />}
-
           {children}
         </div>
       </div>

From 9b446196e058265b9fab61600136d8a49ac62848 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 2 Jan 2023 15:36:27 +0200
Subject: [PATCH 21/34] mobile

---
 assets/sass/common/circleDiagram.scss | 15 ++++++++---
 assets/sass/common/clients.scss       | 10 +++++++
 assets/sass/common/common.scss        | 17 +++++++-----
 assets/sass/common/index.scss         | 16 +++++++----
 assets/sass/home/sections/header.scss | 39 ++++++++++++++++++++-------
 code/screens/home/index.js            |  2 +-
 6 files changed, 73 insertions(+), 26 deletions(-)

diff --git a/assets/sass/common/circleDiagram.scss b/assets/sass/common/circleDiagram.scss
index e625ef5..712b07a 100644
--- a/assets/sass/common/circleDiagram.scss
+++ b/assets/sass/common/circleDiagram.scss
@@ -145,9 +145,18 @@
 }
 
 @media only screen and (max-width: $medium) {
-  .circle-diagram-external-circle {
-    width: 690px;
-    height: 690px;
+  .circle-diagram-external {
+    width: 700px;
+    height: 700px;
+
+    &-circle {
+      width: 650px;
+      height: 650px;
+    }
+
+    &-rotate-wrapper {
+      top: 46%;
+    }
   }
 }
 
diff --git a/assets/sass/common/clients.scss b/assets/sass/common/clients.scss
index af76cb6..8d459f0 100644
--- a/assets/sass/common/clients.scss
+++ b/assets/sass/common/clients.scss
@@ -29,5 +29,15 @@
   .clients {
     width: 100%;
     height: 150px;
+
+    &-item {
+      width: 45%;
+      margin: $content-gap auto;
+
+      &-image {
+        width: 100px;
+        margin: 0 auto;
+      }
+    }
   }
 }
diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss
index be4a7aa..9555d10 100644
--- a/assets/sass/common/common.scss
+++ b/assets/sass/common/common.scss
@@ -142,16 +142,11 @@ img {
   padding: $title-gap 0;
 }
 
-@media only screen and (max-width: $mobile) {
+@media only screen and (max-width: $medium) {
   h1 {
-    font-size: 30px;
+    font-size: 10rem;
   }
-  h2 {
-    font-size: 25px;
-  }
-}
 
-@media only screen and (max-width: $medium) {
   .page-common-block {
     width: 90%;
   }
@@ -162,6 +157,14 @@ img {
 }
 
 @media only screen and (max-width: $mobile) {
+  h1 {
+    font-size: 5rem;
+  }
+
+  h2 {
+    font-size: 25px;
+  }
+
   .socials {
     justify-content: center;
   }
diff --git a/assets/sass/common/index.scss b/assets/sass/common/index.scss
index 7926ec2..f0dfb05 100644
--- a/assets/sass/common/index.scss
+++ b/assets/sass/common/index.scss
@@ -254,17 +254,14 @@ li,
 
 .contact-link {
   height: 50px;
-
-  border-radius: 50px;
   -webkit-transition: background-color 200ms ease-in-out;
   transition: background-color 200ms ease-in-out;
   background: #40435000;
-
+  border: solid 2px $green;
+  border-radius: 50px;
   text-align: center;
-
   text-transform: uppercase;
   cursor: pointer;
-  border: solid 2px $green;
 
   transition: 0.2s all;
   p {
@@ -373,6 +370,15 @@ li,
   }
 }
 
+@media only screen and (max-width: $medium) {
+  .contact-link {
+    border: solid 2px $main;
+    a {
+      color: $main;
+    }
+  }
+}
+
 @media only screen and (max-width: $mobile) {
   .section {
     padding-top: 50px;
diff --git a/assets/sass/home/sections/header.scss b/assets/sass/home/sections/header.scss
index 4045bcf..364dedb 100644
--- a/assets/sass/home/sections/header.scss
+++ b/assets/sass/home/sections/header.scss
@@ -1,6 +1,5 @@
 .home {
   &-screens {
-    width: 950px;
     margin: -450px auto 0;
   }
 
@@ -47,7 +46,6 @@
     }
 
     &-main {
-      width: $main-grid;
       margin: 0 auto;
       display: flex;
       align-items: center;
@@ -65,17 +63,38 @@
     }
   }
 }
-@media only screen and (max-width: $mobile) {
+
+@media only screen and (max-width: $medium) {
   .home-header {
-    height: auto;
-    padding-top: 150px;
-    padding-bottom: 80px;
+    height: 110vh;
+  }
+}
 
-    .link {
-      width: 100%;
+@media only screen and (max-width: $mobile) {
+  .home {
+    &-header {
+      .link {
+        width: 100%;
+      }
+      .toggle-animation {
+        display: none;
+      }
+
+      &-background {
+        .orange-blobs {
+          right: -900px;
+          top: -600px;
+        }
+
+        .green-blobs {
+          left: -700px;
+          bottom: -1000px;
+        }
+      }
     }
-    .toggle-animation {
-      display: none;
+
+    &-screens {
+      margin: -150px auto 0;
     }
   }
 }
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 37b49cb..fe72e8d 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -13,7 +13,7 @@ const Home = ({ header, navbar, contact, _relativeURL, _ID }) => {
       {navbar}
       {header}
 
-      <div className="home-screens">
+      <div className="page-common-block home-screens">
         <LottiePlayer
           src={lottie.src}
           width={lottie.width}

From a9b173633237252c3a2cd8c23b3eb7c2a3a7b9a5 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Mon, 2 Jan 2023 15:40:15 +0200
Subject: [PATCH 22/34] mobile

---
 assets/sass/home/sections/header.scss | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/assets/sass/home/sections/header.scss b/assets/sass/home/sections/header.scss
index 364dedb..4aa98bf 100644
--- a/assets/sass/home/sections/header.scss
+++ b/assets/sass/home/sections/header.scss
@@ -1,6 +1,6 @@
 .home {
   &-screens {
-    margin: -450px auto 0;
+    margin: -400px auto 0;
   }
 
   &-header {
@@ -65,8 +65,17 @@
 }
 
 @media only screen and (max-width: $medium) {
-  .home-header {
-    height: 110vh;
+  .home {
+    &-header {
+      height: 110vh;
+
+      &-background {
+        .green-blobs {
+          left: -600px;
+          bottom: -1200px;
+        }
+      }
+    }
   }
 }
 

From 2dbb0851599d4964c80ec5db4ab4e52c9439966e Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 4 Jan 2023 15:07:01 +0200
Subject: [PATCH 23/34] menu

---
 assets/sass/navbar/index.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/sass/navbar/index.scss b/assets/sass/navbar/index.scss
index bad917e..b11887d 100644
--- a/assets/sass/navbar/index.scss
+++ b/assets/sass/navbar/index.scss
@@ -19,9 +19,11 @@
 
   .contact-link {
     border: solid 2px $main;
+
     a {
       color: $main;
     }
+
     &:hover {
       border: solid 2px transparent;
       a {
@@ -30,6 +32,10 @@
     }
   }
 
+  &-desktop-contact {
+    width: 200px;
+  }
+
   &-active {
     .navbar-flex {
       background: $main;
@@ -100,11 +106,10 @@
   }
 
   &-root-link {
+    width: 200px;
+    height: 100%;
     display: flex;
     align-items: center;
-    justify-content: center;
-    width: fit-content;
-    height: 100%;
   }
 
   &-logo {

From 22ce9ad4eb2618abae06518084c2addbce94e579 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 4 Jan 2023 16:14:26 +0200
Subject: [PATCH 24/34] refactor

---
 assets/js/common/main-page/index.js | 22 ++++++++++++++--------
 code/screens/home/index.js          |  6 +++---
 content/home/md/index.md            | 12 ------------
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/assets/js/common/main-page/index.js b/assets/js/common/main-page/index.js
index 45da97b..ed0981d 100644
--- a/assets/js/common/main-page/index.js
+++ b/assets/js/common/main-page/index.js
@@ -1,8 +1,10 @@
 import { COLORS } from "../colors";
 
 export const MAIN_PAGE_DETAILS = {
-  title: "ggygj",
-  description: "jh ggy g ghghjgh gh ghghghgh uhu bnvvbv",
+  title: "GoTech",
+  sub_title: "Providing tech as a service",
+  description:
+    "Our team will help You forward to the next level. Reimagine your business into a software-first business with our custom software design and development approach!",
   lottie: {
     src: "https://lottie.host/9c8c0b1e-2283-419e-a35e-c8dd8c3c5869/cqIf494w5p.json",
     width: "100%",
@@ -16,9 +18,13 @@ export const MAIN_PAGE_DETAILS = {
     {
       type: "section-beta",
       color: COLORS.GREEN,
-      title: "Excepteur sint occaecat cupidatat non",
-      description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      title: "Propelling your business to success with emerging tech",
+      paragraphs: [
+        "We are at the forefront of Advanced technology and Software development services:",
+        "Web, Mobile Developing",
+        "QA Manual & Automation",
+        "Mobile Developing",
+      ],
     },
     {
       type: "section-gamma",
@@ -27,16 +33,16 @@ export const MAIN_PAGE_DETAILS = {
     {
       type: "section-delta",
       color: COLORS.ORANGE,
-      title: "Excepteur sint occaecat cupidatat non",
+      title: "digital partner for all your tech needs",
       description:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        "GoTech is a reliable IT partner with varied tech expertise, stringent quality standards, and speedy implementations to meet and exceed customer expectations. We are an innovative software development company providing full-fledged tech services across the globe, that help businesses streamline their processes and drive business growth.",
     },
     {
       type: "section-epsilon",
       color: COLORS.GRAY,
       title: "Great Companies make us grow every day!",
       description:
-        "We are proud to work with truly innovative clients. Here are just a few of the companies we’ve had the privilege to work with.",
+        "We are proud to work with truly innovative clients. We are a trusted technology partner for many successful global enterprises and businesses. Our Teams have helped bring ideas to life by building sustainable business practices across industries. Here are just a few of the companies we’ve had the privilege to work with.",
     },
   ],
 };
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index fe72e8d..eb15ca3 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -5,13 +5,13 @@ import animations from "../../../assets/js/animations";
 import { MAIN_PAGE_DETAILS } from "../../../assets/js/common/main-page";
 import { handleUrl } from "../../utils";
 
-const Home = ({ header, navbar, contact, _relativeURL, _ID }) => {
-  const { lottie, sections } = MAIN_PAGE_DETAILS;
+const Home = ({ navbar, contact, _relativeURL, _ID }) => {
+  const { title, sub_title, description, lottie, sections } = MAIN_PAGE_DETAILS;
 
   return (
     <div className="home" data-aos={animations.up}>
       {navbar}
-      {header}
+      {/* {header} */}
 
       <div className="page-common-block home-screens">
         <LottiePlayer
diff --git a/content/home/md/index.md b/content/home/md/index.md
index 5e29b12..7040203 100644
--- a/content/home/md/index.md
+++ b/content/home/md/index.md
@@ -2,18 +2,6 @@
 layout: screens/home/index
 header:
   - header/index.md
-services:
-  - services/index.md
-clients:
-  - clients/index.md
-about:
-  - about/index.md
-case_studies:
-  - case-studies/index.md
-join:
-  - join/index.md
-team:
-  - team/index.md
 contact:
   - contact/index.md
 ---

From 245db5bcd69667a84800313b4579702f22a9e635 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 4 Jan 2023 16:42:15 +0200
Subject: [PATCH 25/34] remove mds

---
 assets/js/common/main-page/index.js           |  3 +
 code/common/header/index.js                   |  2 +-
 code/screens/home copy/index.js               | 35 -------
 .../sections/about/components/images.js       | 28 ------
 .../screens/home copy/sections/about/index.js | 19 ----
 .../sections/case-studies/components/slide.js | 44 ---------
 .../home copy/sections/case-studies/index.js  | 28 ------
 .../sections/clients/components/list.js       | 23 -----
 .../home copy/sections/clients/index.js       | 18 ----
 .../home copy/sections/contact/index.js       | 20 ----
 code/screens/home copy/sections/join/index.js | 28 ------
 .../sections/services/components/service.js   | 22 -----
 .../home copy/sections/services/index.js      | 28 ------
 .../sections/team/components/member.js        | 25 -----
 code/screens/home copy/sections/team/index.js | 17 ----
 .../home copy/sections/text-section.js        |  7 --
 .../header/components/blobs/index.js          |  0
 .../sections => home}/header/index.js         |  7 +-
 code/screens/home/index.js                    | 12 ++-
 .../sections/header/components/blobs/index.js | 39 --------
 code/screens/home/sections/header/index.js    | 37 --------
 content/home/md/about/images.md               |  6 --
 content/home/md/about/index.md                | 18 ----
 content/home/md/about/link.md                 |  5 -
 content/home/md/case-studies/index.md         | 10 --
 .../home/md/case-studies/slider/slide-1.md    | 13 ---
 .../home/md/case-studies/slider/slide-2.md    | 13 ---
 .../home/md/case-studies/slider/slide-3.md    | 13 ---
 content/home/md/clients/index.md              | 10 --
 content/home/md/clients/list.md               | 91 -------------------
 content/home/md/header/index.md               |  9 +-
 content/home/md/join/animation.md             |  4 -
 content/home/md/join/index.md                 | 11 ---
 content/home/md/services/index.md             | 10 --
 content/home/md/services/item-1.md            | 10 --
 content/home/md/services/item-2.md            |  8 --
 content/home/md/services/item-3.md            |  8 --
 content/home/md/team/assaf.md                 |  8 --
 content/home/md/team/doron.md                 |  8 --
 content/home/md/team/evgeny.md                |  8 --
 content/home/md/team/giora.md                 |  8 --
 content/home/md/team/index.md                 | 16 ----
 content/home/md/team/lidor.md                 |  8 --
 content/home/md/team/mor.md                   |  8 --
 content/home/md/team/raz.md                   |  8 --
 content/home/md/team/yaniv.md                 |  8 --
 46 files changed, 19 insertions(+), 742 deletions(-)
 delete mode 100644 code/screens/home copy/index.js
 delete mode 100644 code/screens/home copy/sections/about/components/images.js
 delete mode 100644 code/screens/home copy/sections/about/index.js
 delete mode 100644 code/screens/home copy/sections/case-studies/components/slide.js
 delete mode 100644 code/screens/home copy/sections/case-studies/index.js
 delete mode 100644 code/screens/home copy/sections/clients/components/list.js
 delete mode 100644 code/screens/home copy/sections/clients/index.js
 delete mode 100644 code/screens/home copy/sections/contact/index.js
 delete mode 100644 code/screens/home copy/sections/join/index.js
 delete mode 100644 code/screens/home copy/sections/services/components/service.js
 delete mode 100644 code/screens/home copy/sections/services/index.js
 delete mode 100644 code/screens/home copy/sections/team/components/member.js
 delete mode 100644 code/screens/home copy/sections/team/index.js
 delete mode 100644 code/screens/home copy/sections/text-section.js
 rename code/screens/{home copy/sections => home}/header/components/blobs/index.js (100%)
 rename code/screens/{home copy/sections => home}/header/index.js (77%)
 delete mode 100644 code/screens/home/sections/header/components/blobs/index.js
 delete mode 100644 code/screens/home/sections/header/index.js
 delete mode 100644 content/home/md/about/images.md
 delete mode 100644 content/home/md/about/index.md
 delete mode 100644 content/home/md/about/link.md
 delete mode 100644 content/home/md/case-studies/index.md
 delete mode 100644 content/home/md/case-studies/slider/slide-1.md
 delete mode 100644 content/home/md/case-studies/slider/slide-2.md
 delete mode 100644 content/home/md/case-studies/slider/slide-3.md
 delete mode 100644 content/home/md/clients/index.md
 delete mode 100644 content/home/md/clients/list.md
 delete mode 100644 content/home/md/join/animation.md
 delete mode 100644 content/home/md/join/index.md
 delete mode 100644 content/home/md/services/index.md
 delete mode 100644 content/home/md/services/item-1.md
 delete mode 100644 content/home/md/services/item-2.md
 delete mode 100644 content/home/md/services/item-3.md
 delete mode 100644 content/home/md/team/assaf.md
 delete mode 100644 content/home/md/team/doron.md
 delete mode 100644 content/home/md/team/evgeny.md
 delete mode 100644 content/home/md/team/giora.md
 delete mode 100644 content/home/md/team/index.md
 delete mode 100644 content/home/md/team/lidor.md
 delete mode 100644 content/home/md/team/mor.md
 delete mode 100644 content/home/md/team/raz.md
 delete mode 100644 content/home/md/team/yaniv.md

diff --git a/assets/js/common/main-page/index.js b/assets/js/common/main-page/index.js
index ed0981d..1ef8799 100644
--- a/assets/js/common/main-page/index.js
+++ b/assets/js/common/main-page/index.js
@@ -5,6 +5,9 @@ export const MAIN_PAGE_DETAILS = {
   sub_title: "Providing tech as a service",
   description:
     "Our team will help You forward to the next level. Reimagine your business into a software-first business with our custom software design and development approach!",
+  url: "/services",
+  btnText: "Let’s get started!",
+
   lottie: {
     src: "https://lottie.host/9c8c0b1e-2283-419e-a35e-c8dd8c3c5869/cqIf494w5p.json",
     width: "100%",
diff --git a/code/common/header/index.js b/code/common/header/index.js
index 5b046e8..f7d7a82 100644
--- a/code/common/header/index.js
+++ b/code/common/header/index.js
@@ -1,4 +1,4 @@
-import Blobs from "../../screens/home/sections/header/components/blobs";
+import Blobs from "../../screens/home/header/components/blobs";
 import React from "react";
 
 const BLOBS_SIZE = {
diff --git a/code/screens/home copy/index.js b/code/screens/home copy/index.js
deleted file mode 100644
index 4a6a7ca..0000000
--- a/code/screens/home copy/index.js	
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import animations from "../../../assets/js/animations";
-import { handleUrl } from "../../utils";
-
-const Home = ({
-  header,
-  services,
-  clients,
-  about,
-  join,
-  team,
-  contact,
-  navbar,
-  _relativeURL,
-  _ID,
-}) => {
-  return (
-    <div className="home" data-aos={animations.up}>
-      {navbar}
-      {header}
-      {services}
-      {clients}
-      {about}
-      {join}
-      {team}
-      <div className="page-common-sub-section">{contact}</div>
-      <script
-        type="module"
-        src={handleUrl(`/assets/js/home/index.js`, _relativeURL, _ID)}
-      />
-    </div>
-  );
-};
-
-export default Home;
diff --git a/code/screens/home copy/sections/about/components/images.js b/code/screens/home copy/sections/about/components/images.js
deleted file mode 100644
index 284bd4e..0000000
--- a/code/screens/home copy/sections/about/components/images.js	
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import animations from "../../../../../../assets/js/animations";
-import Image from "../../../../../common/img";
-
-const Images = ({ _relativeURL, _ID, image1, image2, image3, image4 }) => {
-  const createRelativeURL = (url) => {
-    return `${_relativeURL(url, _ID)}`;
-  };
-  return (
-    <div className="home-about-images images-flex">
-      <div
-        className="images-flex-1 images-flex-section"
-        data-aos={animations.up}
-      >
-        <Image src={createRelativeURL(image1)} />
-        <Image src={createRelativeURL(image2)} />
-      </div>
-      <div
-        className="images-flex-2 images-flex-section"
-        data-aos={animations.up}
-      >
-        <Image src={createRelativeURL(image3)} />
-      </div>
-    </div>
-  );
-};
-
-export default Images;
diff --git a/code/screens/home copy/sections/about/index.js b/code/screens/home copy/sections/about/index.js
deleted file mode 100644
index 51c5dfc..0000000
--- a/code/screens/home copy/sections/about/index.js	
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const About = ({ _body, images, title, sectionBtn }) => {
-  return (
-    <div className="home-about section">
-      <div className="section-header" data-aos={animations.up}>
-        <h5 className="section-title">{title}</h5>
-        <section className="section-body">{_body}</section>
-      </div>
-
-      <aside className="indicator" id="about"></aside>
-
-      {images}
-    </div>
-  );
-};
-
-export default About;
diff --git a/code/screens/home copy/sections/case-studies/components/slide.js b/code/screens/home copy/sections/case-studies/components/slide.js
deleted file mode 100644
index 43f4b0e..0000000
--- a/code/screens/home copy/sections/case-studies/components/slide.js	
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import OtherWorks from "../../../../../common/btns/other-works";
-import Image from "../../../../../common/img";
-import { handleUrl } from "../../../../../utils";
-
-const Slide = ({
-  _body,
-  title,
-  _relativeURL,
-  _ID,
-  image,
-  platforms,
-  linkUrl,
-}) => {
-  return (
-    <li className="splide__slide slide-item">
-      <Image
-        customClassName="slide-item-image"
-        src={handleUrl(image, _relativeURL, _ID)}
-      />
-      <div className="slide-item-box">
-        <h3 className="slide-item-title">{title}</h3>
-        <div className="slide-item-body">{_body}</div>
-        {platforms ? (
-          <div className="slide-item-platforms">
-            {platforms.map((platform) => {
-              return (
-                <section key={_ID}>
-                  <img src={handleUrl(platform.img, _relativeURL, _ID)} />
-                  <p>{platform.name}</p>
-                </section>
-              );
-            })}
-          </div>
-        ) : (
-          ""
-        )}
-        <OtherWorks url={linkUrl} />
-      </div>
-    </li>
-  );
-};
-
-export default Slide;
diff --git a/code/screens/home copy/sections/case-studies/index.js b/code/screens/home copy/sections/case-studies/index.js
deleted file mode 100644
index 20e4ef8..0000000
--- a/code/screens/home copy/sections/case-studies/index.js	
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const CaseStudies = ({ slides, title, _body }) => {
-  return (
-    <div className="home-case-studies section" data-aos={animations.up}>
-      <div className="section-header">
-        <h5 className="section-title">{title}</h5>
-        <section className="section-body">{_body}</section>
-      </div>
-      <aside className="indicator" id="case-studies"></aside>
-      <div className="home-case-studies-content">
-        <div className="splide home-case-studies-slider">
-          <div className="splide__track">
-            <ul className="splide__list">
-              {slides &&
-                slides.map((slide) => {
-                  return slide;
-                })}
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CaseStudies;
diff --git a/code/screens/home copy/sections/clients/components/list.js b/code/screens/home copy/sections/clients/components/list.js
deleted file mode 100644
index c533d8f..0000000
--- a/code/screens/home copy/sections/clients/components/list.js	
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import animations from "../../../../../../assets/js/animations";
-import Image from "../../../../../common/img";
-
-const List = ({ list }) => {
-  return (
-    <ul className="home-clients-list flex-start">
-      {list.map((e, i) => {
-        return (
-          <li
-            key={i}
-            data-aos={animations.up}
-            className="home-clients-list-item"
-          >
-            <img src={e} alt="client images" />
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-export default List;
diff --git a/code/screens/home copy/sections/clients/index.js b/code/screens/home copy/sections/clients/index.js
deleted file mode 100644
index e4a641a..0000000
--- a/code/screens/home copy/sections/clients/index.js	
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const Clients = ({ clients, _body, title }) => {
-  return (
-    <div className="home-clients section">
-      <div className="section-header" data-aos={animations.up}>
-        <h5 className="section-title">{title}</h5>
-        <section className="section-body">{_body}</section>
-      </div>
-
-      <aside className="indicator" id="clients"></aside>
-      <div className="home-clients-grid">{clients}</div>
-    </div>
-  );
-};
-
-export default Clients;
diff --git a/code/screens/home copy/sections/contact/index.js b/code/screens/home copy/sections/contact/index.js
deleted file mode 100644
index c8be6d0..0000000
--- a/code/screens/home copy/sections/contact/index.js	
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-const Contact = ({ _body, form, map }) => {
-  return (
-    <div className="contact flex-between">
-      <aside className="indicator" id="contact"></aside>
-
-      <div className="contact-bg"></div>
-      <div className="contact-flex">
-        <div className="contact-left">
-          {_body}
-          <div className="map-wrapper">{map}</div>
-        </div>
-        {form}
-      </div>
-    </div>
-  );
-};
-
-export default Contact;
diff --git a/code/screens/home copy/sections/join/index.js b/code/screens/home copy/sections/join/index.js
deleted file mode 100644
index f6f6e2e..0000000
--- a/code/screens/home copy/sections/join/index.js	
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const Join = ({ _body, animation, socials }) => {
-  return (
-    <div className="home-join">
-      <div className="home-join-flex">
-        <div
-          className="home-join-animation"
-          data-aos={animations.up}
-          data-aos-anchor-placement="center-bottom"
-        >
-          {animation}
-        </div>
-        <div
-          className="home-join-content"
-          data-aos={animations.up}
-          data-aos-anchor-placement="center-bottom"
-        >
-          {_body}
-          {socials}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Join;
diff --git a/code/screens/home copy/sections/services/components/service.js b/code/screens/home copy/sections/services/components/service.js
deleted file mode 100644
index 8734716..0000000
--- a/code/screens/home copy/sections/services/components/service.js	
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import animations from "../../../../../../assets/js/animations";
-import Image from "../../../../../common/img";
-import { handleUrl } from "../../../../../utils";
-
-const Service = ({ _body, title, image, delay = 0, _relativeURL, _ID }) => {
-  return (
-    <section
-      className="home-services-list-item"
-      data-aos={animations.up}
-      data-aos-delay={delay}
-    >
-      <div className="home-services-list-item-title">
-        <Image src={handleUrl(image, _relativeURL, _ID)} />
-        <h4>{title}</h4>
-      </div>
-      <div className="home-services-list-item-body">{_body}</div>
-    </section>
-  );
-};
-
-export default Service;
diff --git a/code/screens/home copy/sections/services/index.js b/code/screens/home copy/sections/services/index.js
deleted file mode 100644
index ea2e8cd..0000000
--- a/code/screens/home copy/sections/services/index.js	
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const Services = ({ services, title, _body }) => {
-  return (
-    <div className="home-services section">
-      <aside className="indicator" id="services"></aside>
-
-      <div className="home-services-header">
-        <h3 className="home-services-title" data-aos={animations.up}>
-          {title}
-        </h3>
-        <div data-aos={animations.up} data-aos-delay="100">
-          {_body}
-        </div>
-      </div>
-      <div
-        className="home-services-list flex-between"
-        data-aos={animations.zoomIn}
-        data-aos-delay="200"
-      >
-        {services}
-      </div>
-    </div>
-  );
-};
-
-export default Services;
diff --git a/code/screens/home copy/sections/team/components/member.js b/code/screens/home copy/sections/team/components/member.js
deleted file mode 100644
index 56356c7..0000000
--- a/code/screens/home copy/sections/team/components/member.js	
+++ /dev/null
@@ -1,25 +0,0 @@
-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 }) => {
-  return (
-    <div
-      className="home-team-member"
-      data-aos={animations.up}
-      data-aos-duration="1000"
-    >
-      <Image src={handleUrl(image, _relativeURL, _ID)} />
-      <div
-        className="home-team-member-content"
-        data-aos={animations.up}
-        data-aos-delay="150"
-      >
-        {_body}
-      </div>
-    </div>
-  );
-};
-
-export default Member;
diff --git a/code/screens/home copy/sections/team/index.js b/code/screens/home copy/sections/team/index.js
deleted file mode 100644
index 4bb8eb5..0000000
--- a/code/screens/home copy/sections/team/index.js	
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const Team = ({ list, _body, title }) => {
-  return (
-    <div className="home-team section">
-      <div className="section-header" data-aos={animations.up}>
-        <h5 className="section-title">{title}</h5>
-        <section className="section-body">{_body}</section>
-      </div>
-      <aside className="indicator" id="team"></aside>
-      <div className="home-team-list">{list}</div>
-    </div>
-  );
-};
-
-export default Team;
diff --git a/code/screens/home copy/sections/text-section.js b/code/screens/home copy/sections/text-section.js
deleted file mode 100644
index 67af0c8..0000000
--- a/code/screens/home copy/sections/text-section.js	
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const HomeTextSection = ({ _body }) => {
-  return <div>{_body}</div>;
-};
-
-export default HomeTextSection;
diff --git a/code/screens/home copy/sections/header/components/blobs/index.js b/code/screens/home/header/components/blobs/index.js
similarity index 100%
rename from code/screens/home copy/sections/header/components/blobs/index.js
rename to code/screens/home/header/components/blobs/index.js
diff --git a/code/screens/home copy/sections/header/index.js b/code/screens/home/header/index.js
similarity index 77%
rename from code/screens/home copy/sections/header/index.js
rename to code/screens/home/header/index.js
index ae42c2e..e9da1ba 100644
--- a/code/screens/home copy/sections/header/index.js	
+++ b/code/screens/home/header/index.js
@@ -1,13 +1,14 @@
 import Blobs from "./components/blobs";
+import Link from "../../../common/btns/link";
 import React from "react";
-import animations from "../../../../../assets/js/animations";
+import animations from "../../../../assets/js/animations";
 
 const BLOBS_SIZE = {
   ORANGE: 1300,
   GREEN: 1100,
 };
 
-const HomeHeader = ({ title, sub_title, description, button }) => {
+const HomeHeader = ({ title, sub_title, description, url, btnText }) => {
   return (
     <div className="home-header">
       <Blobs orangeSize={BLOBS_SIZE.ORANGE} greenSize={BLOBS_SIZE.GREEN} />
@@ -27,7 +28,7 @@ const HomeHeader = ({ title, sub_title, description, button }) => {
               {description}
             </p>
           </di>
-          {button}
+          <Link url={url} btnText={btnText} />
         </div>
       </div>
     </div>
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index eb15ca3..a0ed386 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -1,3 +1,4 @@
+import HomeHeader from "./header";
 import LottiePlayer from "../../common/lottie-player";
 import React from "react";
 import Sections from "./components/sections";
@@ -6,13 +7,20 @@ import { MAIN_PAGE_DETAILS } from "../../../assets/js/common/main-page";
 import { handleUrl } from "../../utils";
 
 const Home = ({ navbar, contact, _relativeURL, _ID }) => {
-  const { title, sub_title, description, lottie, sections } = MAIN_PAGE_DETAILS;
+  const { title, sub_title, description, url, btnText, lottie, sections } =
+    MAIN_PAGE_DETAILS;
 
   return (
     <div className="home" data-aos={animations.up}>
       {navbar}
-      {/* {header} */}
 
+      <HomeHeader
+        title={title}
+        sub_title={sub_title}
+        description={description}
+        url={url}
+        btnText={btnText}
+      />
       <div className="page-common-block home-screens">
         <LottiePlayer
           src={lottie.src}
diff --git a/code/screens/home/sections/header/components/blobs/index.js b/code/screens/home/sections/header/components/blobs/index.js
deleted file mode 100644
index d671db9..0000000
--- a/code/screens/home/sections/header/components/blobs/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-
-const blobs = [
-  {
-    type: "orange",
-    className: "orange-blobs",
-    src: "https://assets3.lottiefiles.com/packages/lf20_5gdcuanx.json",
-  },
-  {
-    type: "green",
-    className: "green-blobs",
-    src: "https://lottie.host/2a4cd7fd-ef68-4865-b56c-8fe21f2c9170/7RneaIKFUy.json",
-  },
-];
-
-const Blobs = ({ orangeSize, greenSize }) => {
-  return (
-    <div className="home-header-background">
-      {blobs.map((blob) => {
-        const { type, className, src } = blob;
-        const size = type === "orange" ? orangeSize : greenSize;
-        return (
-          <div key={type} className={className}>
-            <lottie-player
-              src={src}
-              background="transparent"
-              style={{ width: `${size}px`, height: `${size}px` }}
-              speed="1"
-              loop
-              autoplay
-            ></lottie-player>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Blobs;
diff --git a/code/screens/home/sections/header/index.js b/code/screens/home/sections/header/index.js
deleted file mode 100644
index ae42c2e..0000000
--- a/code/screens/home/sections/header/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Blobs from "./components/blobs";
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const BLOBS_SIZE = {
-  ORANGE: 1300,
-  GREEN: 1100,
-};
-
-const HomeHeader = ({ title, sub_title, description, button }) => {
-  return (
-    <div className="home-header">
-      <Blobs orangeSize={BLOBS_SIZE.ORANGE} greenSize={BLOBS_SIZE.GREEN} />
-
-      <div className="home-header-main">
-        <div className="page-common-block">
-          <di className="home-header-main-content">
-            <h1 data-aos={animations.up} data-aos-delay="100">
-              {title}
-            </h1>
-
-            <h2 data-aos={animations.up} data-aos-delay="250">
-              {sub_title}
-            </h2>
-
-            <p data-aos={animations.up} data-aos-delay="250">
-              {description}
-            </p>
-          </di>
-          {button}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default HomeHeader;
diff --git a/content/home/md/about/images.md b/content/home/md/about/images.md
deleted file mode 100644
index 34a7cd5..0000000
--- a/content/home/md/about/images.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: screens/home/sections/about/components/images
-image1: /assets/images/home/about/office1.jpg
-image2: /assets/images/home/about/office2.jpg
-image3: /assets/images/home/about/office3.jpg
----
diff --git a/content/home/md/about/index.md b/content/home/md/about/index.md
deleted file mode 100644
index e8c8aa3..0000000
--- a/content/home/md/about/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: screens/home/sections/about/index
-title: about
-images:
-  - images.md
-sectionBtn:
-  - link.md
----
-
-#### We Are GoTech
-
-In today's challenging and rapidly changing world of technology, GoTech Group provides the best innovative solutions for development, QA automation, DevOps, Database engineers.
-
-We specialize in delivering quick solutions with very high quality. With our first-class and outstanding experts.
-
-Helping you from the requirements and design stage and all the way through building the infrastructure and architecture, development and QA to full integration within your organization.
-
-Our experts are former 8200 and Mamram graduates with vast experience working for the best leading professional services companies and vendors, giving them the knowledge on how to implement the best solution that fits your budget and timeline.
diff --git a/content/home/md/about/link.md b/content/home/md/about/link.md
deleted file mode 100644
index 70ae3fa..0000000
--- a/content/home/md/about/link.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: common/btns/link
-btnText: read about us
-url: /about
----
diff --git a/content/home/md/case-studies/index.md b/content/home/md/case-studies/index.md
deleted file mode 100644
index 31ebead..0000000
--- a/content/home/md/case-studies/index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: screens/home/sections/case-studies/index
-title: case studies
-slides:
-  - slider/slide-1.md
-  - slider/slide-2.md
-  - slider/slide-3.md
----
-
-#### Our Work
diff --git a/content/home/md/case-studies/slider/slide-1.md b/content/home/md/case-studies/slider/slide-1.md
deleted file mode 100644
index 4b10639..0000000
--- a/content/home/md/case-studies/slider/slide-1.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: screens/home/sections/case-studies/components/slide
-image: /assets/images/home/case-studies/slide1.png
-title: Slatch
-linkUrl: /case-studies
-platforms:
-  - name: Android
-    img: assets/images/home/case-studies/android.png
-  - name: iOS
-    img: assets/images/home/case-studies/ios.png
----
-
-A messaging mobile app with an instant live language translation supporting text, voice and video chats with more than 500K users.
diff --git a/content/home/md/case-studies/slider/slide-2.md b/content/home/md/case-studies/slider/slide-2.md
deleted file mode 100644
index ee8665a..0000000
--- a/content/home/md/case-studies/slider/slide-2.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: screens/home/sections/case-studies/components/slide
-image: /assets/images/home/case-studies/slide2.jpg
-title: Solebit
-linkUrl: /case-studies
-platforms:
-  - name: Android
-    img: assets/images/home/case-studies/android.png
-  - name: iOS
-    img: assets/images/home/case-studies/ios.png
----
-
-Migrating 200 customers servers from AWS to Azure, And migrating 300 servers from Azure to GCP automatically using Azure and GCP API .
diff --git a/content/home/md/case-studies/slider/slide-3.md b/content/home/md/case-studies/slider/slide-3.md
deleted file mode 100644
index cc6f857..0000000
--- a/content/home/md/case-studies/slider/slide-3.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: screens/home/sections/case-studies/components/slide
-image: /assets/images/home/case-studies/slide3.jpg
-title: WB
-linkUrl: /case-studies
-platforms:
-  - name: Android
-    img: assets/images/home/case-studies/android.png
-  - name: iOS
-    img: assets/images/home/case-studies/ios.png
----
-
-Complete end to end automation test environment on a data driven beverage statistics platform that turns beer into insightful business data .
diff --git a/content/home/md/clients/index.md b/content/home/md/clients/index.md
deleted file mode 100644
index 5bb1bde..0000000
--- a/content/home/md/clients/index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: screens/home/sections/clients/index
-clients:
-  - list.md
-title: clients
----
-
-#### Join our family
-
-Join the world best companies and startups as our clients
diff --git a/content/home/md/clients/list.md b/content/home/md/clients/list.md
deleted file mode 100644
index 4f0aa9c..0000000
--- a/content/home/md/clients/list.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-layout: screens/home/sections/clients/components/list
-list:
-  - assets/images/home/clients/google.png
-  - assets/images/home/clients/walmart.png
-  - assets/images/home/clients/qualcomm.png
-  - assets/images/home/clients/nsogroup.png
-  - assets/images/home/clients/mellanox.png
-  - assets/images/home/clients/amdocs-logo.png
-  - assets/images/home/clients/digibank.png
-  - assets/images/home/clients/cisco.svg
-  - assets/images/home/clients/salesforce.png
-  - assets/images/home/clients/cognyte.png
-  - assets/images/home/clients/orbs.png
-  - assets/images/home/clients/altshuler.png
-  - assets/images/home/clients/applied.png
-  - assets/images/home/clients/audiocodes.png
-  - assets/images/home/clients/sqream.png
-  - assets/images/home/clients/ownbackup.png
-  - assets/images/home/clients/uveye.png
-  - assets/images/home/clients/pelephone.png
-  - assets/images/home/clients/ai21.png
-  - assets/images/home/clients/cellwize.png
-  - assets/images/home/clients/noname.svg
-  - assets/images/home/clients/scopio.png
-  - assets/images/home/clients/brainlab.png
-  - assets/images/home/clients/kazuar.png
-  - assets/images/home/clients/namogoo.png
-  - assets/images/home/clients/zim.png
-  - assets/images/home/clients/carwiz.png
-  - assets/images/home/clients/telicomm.png
-  - assets/images/home/clients/surecomp.png
-  - assets/images/home/clients/johnbryce.jpg
-  - assets/images/home/clients/mimun.png
-  - assets/images/home/clients/crowdvocate.png
-  - assets/images/home/clients/cellcom.png
-  - assets/images/home/clients/migdal.png
-  - assets/images/home/clients/inspekto.png
-  - assets/images/home/clients/pmo.png
-  - assets/images/home/clients/police.png
-  - assets/images/home/clients/renuar.png
-  - assets/images/home/clients/weissbeerger.png
-  - assets/images/home/clients/ustglobal.png
-  - assets/images/home/clients/stilyoapps.png
-  - assets/images/home/clients/earlysense.png
-  - assets/images/home/clients/cybereason.png
-  - assets/images/home/clients/tase.png
-  - assets/images/home/clients/vasona.png
-  - assets/images/home/clients/ca.png
-  - assets/images/home/clients/beinharim.png
-  - assets/images/home/clients/bisec.svg
-  - assets/images/home/clients/astralink.png
-  - assets/images/home/clients/aashipping.png
-  - assets/images/home/clients/celltick.png
-  - assets/images/home/clients/cyberbit.png
-  - assets/images/home/clients/credorax.png
-  - assets/images/home/clients/dyn.png
-  - assets/images/home/clients/vulcan.png
-  - assets/images/home/clients/clicksoftware.png
-  - assets/images/home/clients/geoquant.png
-  - assets/images/home/clients/hp.svg
-  - assets/images/home/clients/infinityco.png
-  - assets/images/home/clients/iso.png
-  - assets/images/home/clients/klh.png
-  - assets/images/home/clients/lightico.png
-  - assets/images/home/clients/liusto.png
-  - assets/images/home/clients/lusha.png
-  - assets/images/home/clients/memomi.png
-  - assets/images/home/clients/menora.png
-  - assets/images/home/clients/muvingapp.png
-  - assets/images/home/clients/mypermissions.png
-  - assets/images/home/clients/navy.png
-  - assets/images/home/clients/odo.png
-  #- assets/images/home/clients/weekin.png
-  - assets/images/home/clients/pomicell.png
-  - assets/images/home/clients/promo.png
-  - assets/images/home/clients/paradigma.png
-  - assets/images/home/clients/rfkeeper.png
-  - assets/images/home/clients/sendajob.png
-  - assets/images/home/clients/roojoom.png
-  - assets/images/home/clients/riskified.png
-  #- assets/images/home/clients/yourway.png
-  - assets/images/home/clients/solebit.png
-  - assets/images/home/clients/slatch.png
-  - assets/images/home/clients/starttech.png
-  - assets/images/home/clients/systematics.png
-  - assets/images/home/clients/tax.png
-  - assets/images/home/clients/toolway.png
-  - assets/images/home/clients/tmura.png
-  - assets/images/home/clients/travelersbox.png
----
diff --git a/content/home/md/header/index.md b/content/home/md/header/index.md
index be088e6..8cca013 100644
--- a/content/home/md/header/index.md
+++ b/content/home/md/header/index.md
@@ -1,12 +1,5 @@
 ---
-layout: screens/home/sections/header/index
-title: GoTech
-sub_title: Providing tech as a service
-description: "Our team will help You forward to the next level. Reimagine your business into a software-first business with our custom software design and development approach!"
-
+layout: screens/home/header/index
 contact:
   - ../../../home/md/contact/index.md
-
-button:
-  - link.md
 ---
diff --git a/content/home/md/join/animation.md b/content/home/md/join/animation.md
deleted file mode 100644
index f562d8f..0000000
--- a/content/home/md/join/animation.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-layout: common/animation
-animation: /assets/animations/join.json
----
diff --git a/content/home/md/join/index.md b/content/home/md/join/index.md
deleted file mode 100644
index 033a78d..0000000
--- a/content/home/md/join/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: screens/home/sections/join/index
-animation:
-  - animation.md
-socials:
-  - /_shared/socials/index.md
----
-
-### Join our community
-
-Be the first to know the latest news and technologies updates
diff --git a/content/home/md/services/index.md b/content/home/md/services/index.md
deleted file mode 100644
index a18ae20..0000000
--- a/content/home/md/services/index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: screens/home/sections/services/index
-services:
-  - item-1.md
-  - item-2.md
-  - item-3.md
-title: The only tech company you'll ever need
----
-
-GoTech Group provides state-of-the-art services, including highly qualified experts in all areas of infrastructure and development. The services are provided according to the customer's schedule, needs and constraints
diff --git a/content/home/md/services/item-1.md b/content/home/md/services/item-1.md
deleted file mode 100644
index 9f04d65..0000000
--- a/content/home/md/services/item-1.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: screens/home/sections/services/components/service
-delay: 200
-title: DevOps and Database experts
-image: /assets/images/home/services/Infinit.png
----
-
-Design and implement best practices methodology using the latest and greatest open-source tools such as GCP, AWS, Kubernetes, Prometheus, Helm, Istio, Docker, Jenkins, Ansible, Terraform.
-
-Designing, planning, tuning, migrating and managing SQL and NoSQL databases such as Oracle, SQL Server, MySQL, Postgres, MongoDB, Hadoop.
diff --git a/content/home/md/services/item-2.md b/content/home/md/services/item-2.md
deleted file mode 100644
index d0ef692..0000000
--- a/content/home/md/services/item-2.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/services/components/service
-delay: 400
-image: /assets/images/home/services/testomate.png
-title: Testing, automation and beyond
----
-
-Complete automation solutions, Implementing/Integrating, proper test automation infrastructure for stable and maintainable test automation, Development of test tools and reporting tools, Automation Training, Volume & Performance Testing, Migration of Manual Testing to Automated Testing.
diff --git a/content/home/md/services/item-3.md b/content/home/md/services/item-3.md
deleted file mode 100644
index df0df59..0000000
--- a/content/home/md/services/item-3.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/services/components/service
-delay: 600
-image: /assets/images/home/services/mixin.png
-title: Software solutions
----
-
-Fully loaded software house with an End to End product development solution specializing in designing and developing websites, Mobile Apps and Scalable Servers.
diff --git a/content/home/md/team/assaf.md b/content/home/md/team/assaf.md
deleted file mode 100644
index c698cf2..0000000
--- a/content/home/md/team/assaf.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/team/components/member
-image: /assets/images/home/team/assaf.jpg
----
-
-###### Assaf Balzamovich
-
-Head of QA Automation
diff --git a/content/home/md/team/doron.md b/content/home/md/team/doron.md
deleted file mode 100644
index 9cd21db..0000000
--- a/content/home/md/team/doron.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/team/components/member
-image: /assets/images/home/team/doron.jpg
----
-
-###### Doron Feldman
-
-CTO
diff --git a/content/home/md/team/evgeny.md b/content/home/md/team/evgeny.md
deleted file mode 100644
index 8344eeb..0000000
--- a/content/home/md/team/evgeny.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/team/components/member
-image: /assets/images/home/team/evgeny.jpg
----
-
-###### Evgeny Tofler
-
-Head of DBA
diff --git a/content/home/md/team/giora.md b/content/home/md/team/giora.md
deleted file mode 100644
index 1d0a093..0000000
--- a/content/home/md/team/giora.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/team/components/member
-image: /assets/images/home/team/giora.jpg
----
-
-###### Giora Krasilshchik
-
-Head of Mobile
diff --git a/content/home/md/team/index.md b/content/home/md/team/index.md
deleted file mode 100644
index 674ef21..0000000
--- a/content/home/md/team/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-layout: screens/home/sections/team/index
-list:
-  - yaniv.md
-  - doron.md
-  - lidor.md
-  - assaf.md
-  - giora.md
-  - evgeny.md
-  - raz.md
-  - mor.md
-
-title: team
----
-
-#### Meet our professional team
diff --git a/content/home/md/team/lidor.md b/content/home/md/team/lidor.md
deleted file mode 100644
index b124490..0000000
--- a/content/home/md/team/lidor.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/team/components/member
-image: /assets/images/home/team/lidor.jpg
----
-
-###### Lidor Itzhari
-
-COO
diff --git a/content/home/md/team/mor.md b/content/home/md/team/mor.md
deleted file mode 100644
index b4520c3..0000000
--- a/content/home/md/team/mor.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/team/components/member
-image: /assets/images/home/team/mor.jpg
----
-
-###### Mor Armoni
-
-HR Manager
diff --git a/content/home/md/team/raz.md b/content/home/md/team/raz.md
deleted file mode 100644
index a0bc7cb..0000000
--- a/content/home/md/team/raz.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/team/components/member
-image: /assets/images/home/team/raz.jpg
----
-
-###### Raz Mantzur
-
-Head of Web
diff --git a/content/home/md/team/yaniv.md b/content/home/md/team/yaniv.md
deleted file mode 100644
index 1b9a5dc..0000000
--- a/content/home/md/team/yaniv.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: screens/home/sections/team/components/member
-image: /assets/images/home/team/yaniv.jpg
----
-
-###### Yaniv Peleg
-
-CEO

From 90390dbe49285ed29b826f6ab93656425c2258b3 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Wed, 4 Jan 2023 17:18:00 +0200
Subject: [PATCH 26/34] refactor

---
 assets/sass/home/sections/header.scss         | 15 +++++++++
 code/screens/home/components/sections.js      |  3 +-
 .../components/{blobs/index.js => blobs.js}   |  0
 code/screens/home/header/components/title.js  | 31 +++++++++++++++++++
 code/screens/home/header/index.js             | 28 +++++------------
 code/screens/home/index.js                    |  1 +
 6 files changed, 57 insertions(+), 21 deletions(-)
 rename code/screens/home/header/components/{blobs/index.js => blobs.js} (100%)
 create mode 100644 code/screens/home/header/components/title.js

diff --git a/assets/sass/home/sections/header.scss b/assets/sass/home/sections/header.scss
index 4aa98bf..9dd7f2a 100644
--- a/assets/sass/home/sections/header.scss
+++ b/assets/sass/home/sections/header.scss
@@ -60,6 +60,21 @@
           color: $main;
         }
       }
+
+      &-link {
+        .link {
+          width: auto;
+          border: 2px solid $main;
+
+          a {
+            color: $main;
+          }
+
+          &:hover {
+            border: 2px solid transparent;
+          }
+        }
+      }
     }
   }
 }
diff --git a/code/screens/home/components/sections.js b/code/screens/home/components/sections.js
index 39de51d..4ceb2d0 100644
--- a/code/screens/home/components/sections.js
+++ b/code/screens/home/components/sections.js
@@ -7,13 +7,14 @@ const Sections = ({ sections }) => {
   return (
     <div>
       {sections.length &&
-        sections.map(({ type, color, title, description }) => {
+        sections.map(({ type, color, title, description, paragraphs }) => {
           return (
             <ColorSection
               key={type}
               color={color}
               title={title}
               description={description}
+              paragraphs={paragraphs}
             >
               {type === "section-gamma" && <CircleDiagram />}
               {type === "section-epsilon" && <Clients />}
diff --git a/code/screens/home/header/components/blobs/index.js b/code/screens/home/header/components/blobs.js
similarity index 100%
rename from code/screens/home/header/components/blobs/index.js
rename to code/screens/home/header/components/blobs.js
diff --git a/code/screens/home/header/components/title.js b/code/screens/home/header/components/title.js
new file mode 100644
index 0000000..122b161
--- /dev/null
+++ b/code/screens/home/header/components/title.js
@@ -0,0 +1,31 @@
+import Link from "../../../../common/btns/link";
+import React from "react";
+import animations from "../../../../../assets/js/animations";
+
+const Title = ({ title, sub_title, description, url, btnText }) => {
+  return (
+    <div className="home-header-main">
+      <div className="page-common-block">
+        <di className="home-header-main-content">
+          <h1 data-aos={animations.up} data-aos-delay="100">
+            {title}
+          </h1>
+
+          <h2 data-aos={animations.up} data-aos-delay="250">
+            {sub_title}
+          </h2>
+
+          <p data-aos={animations.up} data-aos-delay="250">
+            {description}
+          </p>
+        </di>
+
+        <div className="home-header-main-link">
+          <Link url={url} btnText={btnText} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Title;
diff --git a/code/screens/home/header/index.js b/code/screens/home/header/index.js
index e9da1ba..e6edeed 100644
--- a/code/screens/home/header/index.js
+++ b/code/screens/home/header/index.js
@@ -1,7 +1,6 @@
 import Blobs from "./components/blobs";
-import Link from "../../../common/btns/link";
 import React from "react";
-import animations from "../../../../assets/js/animations";
+import Title from "./components/title";
 
 const BLOBS_SIZE = {
   ORANGE: 1300,
@@ -13,24 +12,13 @@ const HomeHeader = ({ title, sub_title, description, url, btnText }) => {
     <div className="home-header">
       <Blobs orangeSize={BLOBS_SIZE.ORANGE} greenSize={BLOBS_SIZE.GREEN} />
 
-      <div className="home-header-main">
-        <div className="page-common-block">
-          <di className="home-header-main-content">
-            <h1 data-aos={animations.up} data-aos-delay="100">
-              {title}
-            </h1>
-
-            <h2 data-aos={animations.up} data-aos-delay="250">
-              {sub_title}
-            </h2>
-
-            <p data-aos={animations.up} data-aos-delay="250">
-              {description}
-            </p>
-          </di>
-          <Link url={url} btnText={btnText} />
-        </div>
-      </div>
+      <Title
+        title={title}
+        sub_title={sub_title}
+        description={description}
+        url={url}
+        btnText={btnText}
+      />
     </div>
   );
 };
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index a0ed386..6f2fd9f 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -21,6 +21,7 @@ const Home = ({ navbar, contact, _relativeURL, _ID }) => {
         url={url}
         btnText={btnText}
       />
+
       <div className="page-common-block home-screens">
         <LottiePlayer
           src={lottie.src}

From 76c78148f64b065894008c2e27ad5a56c4018de6 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 14:35:02 +0200
Subject: [PATCH 27/34] cases

---
 .../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 ++++++++++------
 .../case-studies/components/listProjects.js   | 24 ++++++
 code/screens/case-studies/index.js            | 28 ++-----
 .../case-studies/project-page/index.js        | 56 ++++---------
 8 files changed, 304 insertions(+), 182 deletions(-)
 create mode 100644 code/screens/case-studies/components/listProjects.js

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"],
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;
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 2572e3be1a446b8b768a1716616dffdd9cc4be93 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 14:57:17 +0200
Subject: [PATCH 28/34] cases

---
 assets/js/common/case-studies-details/index.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 assets/js/common/case-studies-details/index.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,
+    },
+  ],
+};

From 0c0d11b5198e87f8c1f96f070c89b06c5fa48f0b Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 15:11:22 +0200
Subject: [PATCH 29/34] cases

---
 code/common/listSection/index.js         | 42 ++++++++++++++++++++++++
 code/common/pageWrapper/index.js         | 21 ++++++++++--
 code/screens/home/components/sections.js | 28 ----------------
 code/screens/home/index.js               | 10 ++++--
 4 files changed, 69 insertions(+), 32 deletions(-)
 create mode 100644 code/common/listSection/index.js
 delete mode 100644 code/screens/home/components/sections.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..b7ddf62 100644
--- a/code/common/pageWrapper/index.js
+++ b/code/common/pageWrapper/index.js
@@ -1,11 +1,18 @@
 import Header from "../header";
 import React from "react";
+import Sections from "../listSection";
 import { handleUrl } from "../../utils";
 
 function PageWrapper({
   title,
   description,
-  children,
+  sections,
+  alpha,
+  beta,
+  gamma,
+  delta,
+  epsilon,
+  zeta,
   marquee,
   contact,
   _relativeURL,
@@ -15,7 +22,17 @@ function PageWrapper({
     <div>
       <Header title={title} description={description} />
 
-      {children}
+      {sections && (
+        <Sections
+          sections={sections}
+          alpha={alpha}
+          beta={beta}
+          gamma={gamma}
+          delta={delta}
+          epsilon={epsilon}
+          zeta={zeta}
+        />
+      )}
 
       <div>{marquee}</div>
       <div className="page-common-sub-section">{contact}</div>
diff --git a/code/screens/home/components/sections.js b/code/screens/home/components/sections.js
deleted file mode 100644
index 4ceb2d0..0000000
--- a/code/screens/home/components/sections.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import CircleDiagram from "../../../common/circleDiagram";
-import Clients from "./clients";
-import ColorSection from "../../../common/ColorSection";
-import React from "react";
-
-const Sections = ({ sections }) => {
-  return (
-    <div>
-      {sections.length &&
-        sections.map(({ type, color, title, description, paragraphs }) => {
-          return (
-            <ColorSection
-              key={type}
-              color={color}
-              title={title}
-              description={description}
-              paragraphs={paragraphs}
-            >
-              {type === "section-gamma" && <CircleDiagram />}
-              {type === "section-epsilon" && <Clients />}
-            </ColorSection>
-          );
-        })}
-    </div>
-  );
-};
-
-export default Sections;
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 6f2fd9f..81fa3ee 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -1,7 +1,9 @@
+import CircleDiagram from "../../common/circleDiagram";
+import Clients from "./components/clients";
 import HomeHeader from "./header";
 import LottiePlayer from "../../common/lottie-player";
 import React from "react";
-import Sections from "./components/sections";
+import Sections from "../../common/listSection";
 import animations from "../../../assets/js/animations";
 import { MAIN_PAGE_DETAILS } from "../../../assets/js/common/main-page";
 import { handleUrl } from "../../utils";
@@ -30,7 +32,11 @@ const Home = ({ navbar, contact, _relativeURL, _ID }) => {
         />
       </div>
 
-      <Sections sections={sections} />
+      <Sections
+        sections={sections}
+        gamma={<CircleDiagram />}
+        epsilon={<Clients />}
+      />
 
       <div className="page-common-sub-section">{contact}</div>
 

From 550029a6b7153ca9a5a7f429437ed789a499a044 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 15:17:51 +0200
Subject: [PATCH 30/34] home page refactor

---
 .../{sections => components}/contact/index.js |  0
 .../home/sections/about/components/images.js  | 28 ------------
 code/screens/home/sections/about/index.js     | 19 --------
 .../sections/case-studies/components/slide.js | 44 -------------------
 .../home/sections/case-studies/index.js       | 28 ------------
 .../home/sections/clients/components/list.js  | 23 ----------
 code/screens/home/sections/clients/index.js   | 18 --------
 code/screens/home/sections/join/index.js      | 28 ------------
 .../sections/services/components/service.js   | 22 ----------
 code/screens/home/sections/services/index.js  | 28 ------------
 .../home/sections/team/components/member.js   | 25 -----------
 code/screens/home/sections/team/index.js      | 17 -------
 code/screens/home/sections/text-section.js    |  7 ---
 content/home/md/contact/index.md              |  2 +-
 14 files changed, 1 insertion(+), 288 deletions(-)
 rename code/screens/home/{sections => components}/contact/index.js (100%)
 delete mode 100644 code/screens/home/sections/about/components/images.js
 delete mode 100644 code/screens/home/sections/about/index.js
 delete mode 100644 code/screens/home/sections/case-studies/components/slide.js
 delete mode 100644 code/screens/home/sections/case-studies/index.js
 delete mode 100644 code/screens/home/sections/clients/components/list.js
 delete mode 100644 code/screens/home/sections/clients/index.js
 delete mode 100644 code/screens/home/sections/join/index.js
 delete mode 100644 code/screens/home/sections/services/components/service.js
 delete mode 100644 code/screens/home/sections/services/index.js
 delete mode 100644 code/screens/home/sections/team/components/member.js
 delete mode 100644 code/screens/home/sections/team/index.js
 delete mode 100644 code/screens/home/sections/text-section.js

diff --git a/code/screens/home/sections/contact/index.js b/code/screens/home/components/contact/index.js
similarity index 100%
rename from code/screens/home/sections/contact/index.js
rename to code/screens/home/components/contact/index.js
diff --git a/code/screens/home/sections/about/components/images.js b/code/screens/home/sections/about/components/images.js
deleted file mode 100644
index 284bd4e..0000000
--- a/code/screens/home/sections/about/components/images.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import animations from "../../../../../../assets/js/animations";
-import Image from "../../../../../common/img";
-
-const Images = ({ _relativeURL, _ID, image1, image2, image3, image4 }) => {
-  const createRelativeURL = (url) => {
-    return `${_relativeURL(url, _ID)}`;
-  };
-  return (
-    <div className="home-about-images images-flex">
-      <div
-        className="images-flex-1 images-flex-section"
-        data-aos={animations.up}
-      >
-        <Image src={createRelativeURL(image1)} />
-        <Image src={createRelativeURL(image2)} />
-      </div>
-      <div
-        className="images-flex-2 images-flex-section"
-        data-aos={animations.up}
-      >
-        <Image src={createRelativeURL(image3)} />
-      </div>
-    </div>
-  );
-};
-
-export default Images;
diff --git a/code/screens/home/sections/about/index.js b/code/screens/home/sections/about/index.js
deleted file mode 100644
index 51c5dfc..0000000
--- a/code/screens/home/sections/about/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const About = ({ _body, images, title, sectionBtn }) => {
-  return (
-    <div className="home-about section">
-      <div className="section-header" data-aos={animations.up}>
-        <h5 className="section-title">{title}</h5>
-        <section className="section-body">{_body}</section>
-      </div>
-
-      <aside className="indicator" id="about"></aside>
-
-      {images}
-    </div>
-  );
-};
-
-export default About;
diff --git a/code/screens/home/sections/case-studies/components/slide.js b/code/screens/home/sections/case-studies/components/slide.js
deleted file mode 100644
index 43f4b0e..0000000
--- a/code/screens/home/sections/case-studies/components/slide.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from "react";
-import OtherWorks from "../../../../../common/btns/other-works";
-import Image from "../../../../../common/img";
-import { handleUrl } from "../../../../../utils";
-
-const Slide = ({
-  _body,
-  title,
-  _relativeURL,
-  _ID,
-  image,
-  platforms,
-  linkUrl,
-}) => {
-  return (
-    <li className="splide__slide slide-item">
-      <Image
-        customClassName="slide-item-image"
-        src={handleUrl(image, _relativeURL, _ID)}
-      />
-      <div className="slide-item-box">
-        <h3 className="slide-item-title">{title}</h3>
-        <div className="slide-item-body">{_body}</div>
-        {platforms ? (
-          <div className="slide-item-platforms">
-            {platforms.map((platform) => {
-              return (
-                <section key={_ID}>
-                  <img src={handleUrl(platform.img, _relativeURL, _ID)} />
-                  <p>{platform.name}</p>
-                </section>
-              );
-            })}
-          </div>
-        ) : (
-          ""
-        )}
-        <OtherWorks url={linkUrl} />
-      </div>
-    </li>
-  );
-};
-
-export default Slide;
diff --git a/code/screens/home/sections/case-studies/index.js b/code/screens/home/sections/case-studies/index.js
deleted file mode 100644
index 20e4ef8..0000000
--- a/code/screens/home/sections/case-studies/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const CaseStudies = ({ slides, title, _body }) => {
-  return (
-    <div className="home-case-studies section" data-aos={animations.up}>
-      <div className="section-header">
-        <h5 className="section-title">{title}</h5>
-        <section className="section-body">{_body}</section>
-      </div>
-      <aside className="indicator" id="case-studies"></aside>
-      <div className="home-case-studies-content">
-        <div className="splide home-case-studies-slider">
-          <div className="splide__track">
-            <ul className="splide__list">
-              {slides &&
-                slides.map((slide) => {
-                  return slide;
-                })}
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CaseStudies;
diff --git a/code/screens/home/sections/clients/components/list.js b/code/screens/home/sections/clients/components/list.js
deleted file mode 100644
index c533d8f..0000000
--- a/code/screens/home/sections/clients/components/list.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import animations from "../../../../../../assets/js/animations";
-import Image from "../../../../../common/img";
-
-const List = ({ list }) => {
-  return (
-    <ul className="home-clients-list flex-start">
-      {list.map((e, i) => {
-        return (
-          <li
-            key={i}
-            data-aos={animations.up}
-            className="home-clients-list-item"
-          >
-            <img src={e} alt="client images" />
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-export default List;
diff --git a/code/screens/home/sections/clients/index.js b/code/screens/home/sections/clients/index.js
deleted file mode 100644
index e4a641a..0000000
--- a/code/screens/home/sections/clients/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const Clients = ({ clients, _body, title }) => {
-  return (
-    <div className="home-clients section">
-      <div className="section-header" data-aos={animations.up}>
-        <h5 className="section-title">{title}</h5>
-        <section className="section-body">{_body}</section>
-      </div>
-
-      <aside className="indicator" id="clients"></aside>
-      <div className="home-clients-grid">{clients}</div>
-    </div>
-  );
-};
-
-export default Clients;
diff --git a/code/screens/home/sections/join/index.js b/code/screens/home/sections/join/index.js
deleted file mode 100644
index f6f6e2e..0000000
--- a/code/screens/home/sections/join/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const Join = ({ _body, animation, socials }) => {
-  return (
-    <div className="home-join">
-      <div className="home-join-flex">
-        <div
-          className="home-join-animation"
-          data-aos={animations.up}
-          data-aos-anchor-placement="center-bottom"
-        >
-          {animation}
-        </div>
-        <div
-          className="home-join-content"
-          data-aos={animations.up}
-          data-aos-anchor-placement="center-bottom"
-        >
-          {_body}
-          {socials}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Join;
diff --git a/code/screens/home/sections/services/components/service.js b/code/screens/home/sections/services/components/service.js
deleted file mode 100644
index 8734716..0000000
--- a/code/screens/home/sections/services/components/service.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import animations from "../../../../../../assets/js/animations";
-import Image from "../../../../../common/img";
-import { handleUrl } from "../../../../../utils";
-
-const Service = ({ _body, title, image, delay = 0, _relativeURL, _ID }) => {
-  return (
-    <section
-      className="home-services-list-item"
-      data-aos={animations.up}
-      data-aos-delay={delay}
-    >
-      <div className="home-services-list-item-title">
-        <Image src={handleUrl(image, _relativeURL, _ID)} />
-        <h4>{title}</h4>
-      </div>
-      <div className="home-services-list-item-body">{_body}</div>
-    </section>
-  );
-};
-
-export default Service;
diff --git a/code/screens/home/sections/services/index.js b/code/screens/home/sections/services/index.js
deleted file mode 100644
index ea2e8cd..0000000
--- a/code/screens/home/sections/services/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const Services = ({ services, title, _body }) => {
-  return (
-    <div className="home-services section">
-      <aside className="indicator" id="services"></aside>
-
-      <div className="home-services-header">
-        <h3 className="home-services-title" data-aos={animations.up}>
-          {title}
-        </h3>
-        <div data-aos={animations.up} data-aos-delay="100">
-          {_body}
-        </div>
-      </div>
-      <div
-        className="home-services-list flex-between"
-        data-aos={animations.zoomIn}
-        data-aos-delay="200"
-      >
-        {services}
-      </div>
-    </div>
-  );
-};
-
-export default Services;
diff --git a/code/screens/home/sections/team/components/member.js b/code/screens/home/sections/team/components/member.js
deleted file mode 100644
index 56356c7..0000000
--- a/code/screens/home/sections/team/components/member.js
+++ /dev/null
@@ -1,25 +0,0 @@
-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 }) => {
-  return (
-    <div
-      className="home-team-member"
-      data-aos={animations.up}
-      data-aos-duration="1000"
-    >
-      <Image src={handleUrl(image, _relativeURL, _ID)} />
-      <div
-        className="home-team-member-content"
-        data-aos={animations.up}
-        data-aos-delay="150"
-      >
-        {_body}
-      </div>
-    </div>
-  );
-};
-
-export default Member;
diff --git a/code/screens/home/sections/team/index.js b/code/screens/home/sections/team/index.js
deleted file mode 100644
index 4bb8eb5..0000000
--- a/code/screens/home/sections/team/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import animations from "../../../../../assets/js/animations";
-
-const Team = ({ list, _body, title }) => {
-  return (
-    <div className="home-team section">
-      <div className="section-header" data-aos={animations.up}>
-        <h5 className="section-title">{title}</h5>
-        <section className="section-body">{_body}</section>
-      </div>
-      <aside className="indicator" id="team"></aside>
-      <div className="home-team-list">{list}</div>
-    </div>
-  );
-};
-
-export default Team;
diff --git a/code/screens/home/sections/text-section.js b/code/screens/home/sections/text-section.js
deleted file mode 100644
index 67af0c8..0000000
--- a/code/screens/home/sections/text-section.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const HomeTextSection = ({ _body }) => {
-  return <div>{_body}</div>;
-};
-
-export default HomeTextSection;
diff --git a/content/home/md/contact/index.md b/content/home/md/contact/index.md
index 499e425..5126f85 100644
--- a/content/home/md/contact/index.md
+++ b/content/home/md/contact/index.md
@@ -1,5 +1,5 @@
 ---
-layout: screens/home/sections/contact/index
+layout: screens/home/components/contact/index
 form:
   - form/index.md
 map:

From 45c3bb83bc3201f9ac67f3e04680fc7214fef5af Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Thu, 5 Jan 2023 15:23:08 +0200
Subject: [PATCH 31/34] home page refactor

---
 assets/animations/main.json                |  1 -
 content/home/md/header/link.md             |  5 -----
 content/home/md/header/main-animation.md   |  6 ------
 content/home/md/navbar/index.md            |  9 ---------
 content/home/md/navbar/mobileToggle.md     |  3 ---
 content/home/md/navbar/navigation/index.md | 20 --------------------
 6 files changed, 44 deletions(-)
 delete mode 100644 assets/animations/main.json
 delete mode 100644 content/home/md/header/link.md
 delete mode 100644 content/home/md/header/main-animation.md
 delete mode 100644 content/home/md/navbar/index.md
 delete mode 100644 content/home/md/navbar/mobileToggle.md
 delete mode 100644 content/home/md/navbar/navigation/index.md

diff --git a/assets/animations/main.json b/assets/animations/main.json
deleted file mode 100644
index 9a400f4..0000000
--- a/assets/animations/main.json
+++ /dev/null
@@ -1 +0,0 @@
-{"v":"5.5.8","fr":10,"ip":0,"op":150,"w":500,"h":500,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":101,"ix":10},"p":{"a":0,"k":[202.99999999999997,204.99999999999997,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[195,195,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-20,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":5,"s":[{"i":[[28.205,-1.499],[6.914,-20.997],[-19.991,-13.45],[-31.589,26.24],[6.548,12.964]],"o":[[-23.528,1.251],[-8.922,27.096],[25.2,16.955],[21.624,-17.962],[-7.05,-13.956]],"v":[[-13.988,-63.881],[-48.086,-19.442],[-52.381,52.714],[37.571,38.19],[40.131,-24.131]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":27,"s":[{"i":[[40.559,24.331],[9.177,-11.793],[-5.348,-21.145],[-30.342,0.691],[0.4,32.492]],"o":[[-14.225,-8.534],[-18.099,23.259],[7.442,29.423],[32.486,-0.74],[-0.389,-31.529]],"v":[[-2.75,-70],[-34.392,-60.025],[-58,1],[-1,72],[62.75,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":50,"s":[{"i":[[8.622,15.005],[29.697,-1.359],[6.112,-30.081],[-37.017,-11.134],[-22.292,17.508]],"o":[[-14.811,-25.776],[-30.664,1.403],[-5.919,29.13],[35.298,10.617],[13.61,-10.689]],"v":[[77,-8],[0,-53],[-76,-1],[-25.5,72.5],[52,37.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":78,"s":[{"i":[[33.121,18.187],[6.617,-8.299],[-5.202,-22.246],[-29.015,-0.201],[0,35.267]],"o":[[-9.304,-5.109],[-14.242,17.863],[6.607,28.253],[35.266,0.245],[0,-37.786]],"v":[[-1,-74],[-30.426,-61.83],[-60,0],[-1,64],[84,1]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":104,"s":[{"i":[[26.396,-1.227],[2.035,-27.876],[-22.264,-10.161],[-18.495,13.859],[10.123,18.418]],"o":[[-27.92,1.298],[-1.782,24.408],[21.026,9.596],[16.818,-12.603],[-12.728,-23.157]],"v":[[-15.053,-73.474],[-79.044,-19.288],[-22.421,27.447],[46.132,37.842],[47.816,-25.184]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":129,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":154,"s":[{"i":[[28.205,-1.499],[6.914,-20.997],[-19.991,-13.45],[-31.589,26.24],[6.548,12.964]],"o":[[-23.528,1.251],[-8.922,27.096],[25.2,16.955],[21.624,-17.962],[-7.05,-13.956]],"v":[[-13.988,-63.881],[-48.086,-19.442],[-52.381,52.714],[37.571,38.19],[40.131,-24.131]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":176,"s":[{"i":[[40.559,24.331],[9.177,-11.793],[-5.348,-21.145],[-30.342,0.691],[0.4,32.492]],"o":[[-14.225,-8.534],[-18.099,23.259],[7.442,29.423],[32.486,-0.74],[-0.389,-31.529]],"v":[[-2.75,-70],[-34.392,-60.025],[-58,1],[-1,72],[62.75,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":199,"s":[{"i":[[8.622,15.005],[29.697,-1.359],[6.112,-30.081],[-37.017,-11.134],[-22.292,17.508]],"o":[[-14.811,-25.776],[-30.664,1.403],[-5.919,29.13],[35.298,10.617],[13.61,-10.689]],"v":[[77,-8],[0,-53],[-76,-1],[-25.5,72.5],[52,37.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":227,"s":[{"i":[[33.121,18.187],[6.617,-8.299],[-5.202,-22.246],[-29.015,-0.201],[0,35.267]],"o":[[-9.304,-5.109],[-14.242,17.863],[6.607,28.253],[35.266,0.245],[0,-37.786]],"v":[[-1,-74],[-30.426,-61.83],[-60,0],[-1,64],[84,1]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":253,"s":[{"i":[[26.396,-1.227],[2.035,-27.876],[-22.264,-10.161],[-18.495,13.859],[10.123,18.418]],"o":[[-27.92,1.298],[-1.782,24.408],[21.026,9.596],[16.818,-12.603],[-12.728,-23.157]],"v":[[-15.053,-73.474],[-79.044,-19.288],[-22.421,27.447],[46.132,37.842],[47.816,-25.184]],"c":true}]},{"t":278,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2901960784313726,0.2901960784313726,0.2901960784313726,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-4,21],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"rp","c":{"a":0,"k":3,"ix":1},"o":{"a":0,"k":0,"ix":2},"m":1,"ix":2,"tr":{"ty":"tr","p":{"a":0,"k":[-1,-1],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[79,79],"ix":3},"r":{"a":0,"k":9,"ix":4},"so":{"a":0,"k":100,"ix":5},"eo":{"a":0,"k":69,"ix":6},"nm":"Transform"},"nm":"Repeater 1","mn":"ADBE Vector Filter - Repeater","hd":false}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":78,"ix":10},"p":{"a":0,"k":[310,279,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[99,110.60600000000001,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-98,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-73,"s":[{"i":[[28.205,-1.499],[6.914,-20.997],[-19.991,-13.45],[-31.589,26.24],[6.548,12.964]],"o":[[-23.528,1.251],[-8.922,27.096],[25.2,16.955],[21.624,-17.962],[-7.05,-13.956]],"v":[[-13.988,-63.881],[-48.086,-19.442],[-52.381,52.714],[37.571,38.19],[40.131,-24.131]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-51,"s":[{"i":[[40.559,24.331],[9.177,-11.793],[-5.348,-21.145],[-30.342,0.691],[0.4,32.492]],"o":[[-14.225,-8.534],[-18.099,23.259],[7.442,29.423],[32.486,-0.74],[-0.389,-31.529]],"v":[[-2.75,-70],[-34.392,-60.025],[-58,1],[-1,72],[62.75,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-28,"s":[{"i":[[8.622,15.005],[29.697,-1.359],[6.112,-30.081],[-37.017,-11.134],[-22.292,17.508]],"o":[[-14.811,-25.776],[-30.664,1.403],[-5.919,29.13],[35.298,10.617],[13.61,-10.689]],"v":[[77,-8],[0,-53],[-76,-1],[-25.5,72.5],[52,37.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[33.121,18.187],[6.617,-8.299],[-5.202,-22.246],[-29.015,-0.201],[0,35.267]],"o":[[-9.304,-5.109],[-14.242,17.863],[6.607,28.253],[35.266,0.245],[0,-37.786]],"v":[[-1,-74],[-30.426,-61.83],[-60,0],[-1,64],[84,1]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":26,"s":[{"i":[[26.396,-1.227],[2.035,-27.876],[-22.264,-10.161],[-18.495,13.859],[10.123,18.418]],"o":[[-27.92,1.298],[-1.782,24.408],[21.026,9.596],[16.818,-12.603],[-12.728,-23.157]],"v":[[-15.053,-73.474],[-79.044,-19.288],[-22.421,27.447],[46.132,37.842],[47.816,-25.184]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":51,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":76,"s":[{"i":[[28.205,-1.499],[6.914,-20.997],[-19.991,-13.45],[-31.589,26.24],[6.548,12.964]],"o":[[-23.528,1.251],[-8.922,27.096],[25.2,16.955],[21.624,-17.962],[-7.05,-13.956]],"v":[[-13.988,-63.881],[-48.086,-19.442],[-52.381,52.714],[37.571,38.19],[40.131,-24.131]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":98,"s":[{"i":[[40.559,24.331],[9.177,-11.793],[-5.348,-21.145],[-30.342,0.691],[0.4,32.492]],"o":[[-14.225,-8.534],[-18.099,23.259],[7.442,29.423],[32.486,-0.74],[-0.389,-31.529]],"v":[[-2.75,-70],[-34.392,-60.025],[-58,1],[-1,72],[62.75,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":121,"s":[{"i":[[8.622,15.005],[29.697,-1.359],[6.112,-30.081],[-37.017,-11.134],[-22.292,17.508]],"o":[[-14.811,-25.776],[-30.664,1.403],[-5.919,29.13],[35.298,10.617],[13.61,-10.689]],"v":[[77,-8],[0,-53],[-76,-1],[-25.5,72.5],[52,37.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":149,"s":[{"i":[[33.121,18.187],[6.617,-8.299],[-5.202,-22.246],[-29.015,-0.201],[0,35.267]],"o":[[-9.304,-5.109],[-14.242,17.863],[6.607,28.253],[35.266,0.245],[0,-37.786]],"v":[[-1,-74],[-30.426,-61.83],[-60,0],[-1,64],[84,1]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":175,"s":[{"i":[[26.396,-1.227],[2.035,-27.876],[-22.264,-10.161],[-18.495,13.859],[10.123,18.418]],"o":[[-27.92,1.298],[-1.782,24.408],[21.026,9.596],[16.818,-12.603],[-12.728,-23.157]],"v":[[-15.053,-73.474],[-79.044,-19.288],[-22.421,27.447],[46.132,37.842],[47.816,-25.184]],"c":true}]},{"t":200,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.5176470588235295,0.4823529411764706,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-4,21],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":153,"ix":10},"p":{"a":0,"k":[333,263,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[138,221.178,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-98,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-73,"s":[{"i":[[28.205,-1.499],[6.914,-20.997],[-19.991,-13.45],[-31.589,26.24],[6.548,12.964]],"o":[[-23.528,1.251],[-8.922,27.096],[25.2,16.955],[21.624,-17.962],[-7.05,-13.956]],"v":[[-13.988,-63.881],[-48.086,-19.442],[-52.381,52.714],[37.571,38.19],[40.131,-24.131]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-51,"s":[{"i":[[40.559,24.331],[9.177,-11.793],[-5.348,-21.145],[-30.342,0.691],[0.4,32.492]],"o":[[-14.225,-8.534],[-18.099,23.259],[7.442,29.423],[32.486,-0.74],[-0.389,-31.529]],"v":[[-2.75,-70],[-34.392,-60.025],[-58,1],[-1,72],[62.75,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":-28,"s":[{"i":[[8.622,15.005],[29.697,-1.359],[6.112,-30.081],[-37.017,-11.134],[-22.292,17.508]],"o":[[-14.811,-25.776],[-30.664,1.403],[-5.919,29.13],[35.298,10.617],[13.61,-10.689]],"v":[[77,-8],[0,-53],[-76,-1],[-25.5,72.5],[52,37.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[33.121,18.187],[6.617,-8.299],[-5.202,-22.246],[-29.015,-0.201],[0,35.267]],"o":[[-9.304,-5.109],[-14.242,17.863],[6.607,28.253],[35.266,0.245],[0,-37.786]],"v":[[-1,-74],[-30.426,-61.83],[-60,0],[-1,64],[84,1]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":26,"s":[{"i":[[26.396,-1.227],[2.035,-27.876],[-22.264,-10.161],[-18.495,13.859],[10.123,18.418]],"o":[[-27.92,1.298],[-1.782,24.408],[21.026,9.596],[16.818,-12.603],[-12.728,-23.157]],"v":[[-15.053,-73.474],[-79.044,-19.288],[-22.421,27.447],[46.132,37.842],[47.816,-25.184]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":51,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":76,"s":[{"i":[[28.205,-1.499],[6.914,-20.997],[-19.991,-13.45],[-31.589,26.24],[6.548,12.964]],"o":[[-23.528,1.251],[-8.922,27.096],[25.2,16.955],[21.624,-17.962],[-7.05,-13.956]],"v":[[-13.988,-63.881],[-48.086,-19.442],[-52.381,52.714],[37.571,38.19],[40.131,-24.131]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":98,"s":[{"i":[[40.559,24.331],[9.177,-11.793],[-5.348,-21.145],[-30.342,0.691],[0.4,32.492]],"o":[[-14.225,-8.534],[-18.099,23.259],[7.442,29.423],[32.486,-0.74],[-0.389,-31.529]],"v":[[-2.75,-70],[-34.392,-60.025],[-58,1],[-1,72],[62.75,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":121,"s":[{"i":[[8.622,15.005],[29.697,-1.359],[6.112,-30.081],[-37.017,-11.134],[-22.292,17.508]],"o":[[-14.811,-25.776],[-30.664,1.403],[-5.919,29.13],[35.298,10.617],[13.61,-10.689]],"v":[[77,-8],[0,-53],[-76,-1],[-25.5,72.5],[52,37.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":149,"s":[{"i":[[33.121,18.187],[6.617,-8.299],[-5.202,-22.246],[-29.015,-0.201],[0,35.267]],"o":[[-9.304,-5.109],[-14.242,17.863],[6.607,28.253],[35.266,0.245],[0,-37.786]],"v":[[-1,-74],[-30.426,-61.83],[-60,0],[-1,64],[84,1]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":175,"s":[{"i":[[26.396,-1.227],[2.035,-27.876],[-22.264,-10.161],[-18.495,13.859],[10.123,18.418]],"o":[[-27.92,1.298],[-1.782,24.408],[21.026,9.596],[16.818,-12.603],[-12.728,-23.157]],"v":[[-15.053,-73.474],[-79.044,-19.288],[-22.421,27.447],[46.132,37.842],[47.816,-25.184]],"c":true}]},{"t":200,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9607843137254902,0.6509803921568628,0.13725490196078433,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-4,21],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":35,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[285,227.99999999999997,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[262,262,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[28.205,-1.499],[6.914,-20.997],[-19.991,-13.45],[-31.589,26.24],[6.548,12.964]],"o":[[-23.528,1.251],[-8.922,27.096],[25.2,16.955],[21.624,-17.962],[-7.05,-13.956]],"v":[[-13.988,-63.881],[-48.086,-19.442],[-52.381,52.714],[37.571,38.19],[40.131,-24.131]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":47,"s":[{"i":[[40.559,24.331],[9.177,-11.793],[-5.348,-21.145],[-30.342,0.691],[0.4,32.492]],"o":[[-14.225,-8.534],[-18.099,23.259],[7.442,29.423],[32.486,-0.74],[-0.389,-31.529]],"v":[[-2.75,-70],[-34.392,-60.025],[-58,1],[-1,72],[62.75,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":70,"s":[{"i":[[8.622,15.005],[29.697,-1.359],[6.112,-30.081],[-37.017,-11.134],[-22.292,17.508]],"o":[[-14.811,-25.776],[-30.664,1.403],[-5.919,29.13],[35.298,10.617],[13.61,-10.689]],"v":[[77,-8],[0,-53],[-76,-1],[-25.5,72.5],[52,37.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":98,"s":[{"i":[[33.121,18.187],[6.617,-8.299],[-5.202,-22.246],[-29.015,-0.201],[0,35.267]],"o":[[-9.304,-5.109],[-14.242,17.863],[6.607,28.253],[35.266,0.245],[0,-37.786]],"v":[[-1,-74],[-30.426,-61.83],[-60,0],[-1,64],[84,1]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":124,"s":[{"i":[[26.396,-1.227],[2.035,-27.876],[-22.264,-10.161],[-18.495,13.859],[10.123,18.418]],"o":[[-27.92,1.298],[-1.782,24.408],[21.026,9.596],[16.818,-12.603],[-12.728,-23.157]],"v":[[-15.053,-73.474],[-79.044,-19.288],[-22.421,27.447],[46.132,37.842],[47.816,-25.184]],"c":true}]},{"t":149,"s":[{"i":[[19.614,-9.934],[-8.69,-18.757],[-32.635,-0.203],[-4.679,31.831],[25.082,10.571]],"o":[[-18.442,9.341],[13.719,29.612],[32.173,0.2],[3.958,-26.929],[-20.261,-8.539]],"v":[[-50.5,-54],[-81,0],[0,55],[80,1],[15.25,-48.75]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.5176470588235295,0.4823529411764706,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-4,21],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":150,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/content/home/md/header/link.md b/content/home/md/header/link.md
deleted file mode 100644
index c87818c..0000000
--- a/content/home/md/header/link.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: common/btns/contact
----
-
-[Let’s get started!](/#services)
diff --git a/content/home/md/header/main-animation.md b/content/home/md/header/main-animation.md
deleted file mode 100644
index 498e962..0000000
--- a/content/home/md/header/main-animation.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-layout: common/animation
-animation: /assets/animations/main.json
-speed: 0.6
-customClassName: main-animation
----
diff --git a/content/home/md/navbar/index.md b/content/home/md/navbar/index.md
deleted file mode 100644
index eb4ce63..0000000
--- a/content/home/md/navbar/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: common/navbar/index
-
-navigation:
-  - navigation/index.md
-root: /
-mobileToggle:
-  - mobileToggle.md
----
diff --git a/content/home/md/navbar/mobileToggle.md b/content/home/md/navbar/mobileToggle.md
deleted file mode 100644
index f0f3eb6..0000000
--- a/content/home/md/navbar/mobileToggle.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-layout: common/navbar/components/mobile
----
diff --git a/content/home/md/navbar/navigation/index.md b/content/home/md/navbar/navigation/index.md
deleted file mode 100644
index b1fdf19..0000000
--- a/content/home/md/navbar/navigation/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-layout: common/navbar/components/navigation/index
-links:
-  - name: services
-    value: /#services
-  - name: about
-    value: /#about
-  - name: clients
-    value: /#clients
-  - name: cases
-    value: /#case-studies
-  - name: team
-    value: /#team
-  - name: contact us
-    value: /#contact
-  - name: Careers
-    value: careers
-  - name: Oracle Week 2021
-    value: oracle-week-2021
----

From 1795adc3de74b1a52e7f31ab1eec969209ab2abe Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 8 Jan 2023 14:58:25 +0200
Subject: [PATCH 32/34] refactor

---
 assets/js/common/sections/index.js            |  8 +++++++
 code/common/listSection/index.js              | 22 ++++---------------
 code/common/pageWrapper/index.js              | 20 ++++-------------
 code/screens/case-studies/index.js            | 10 ++++++++-
 .../case-studies/project-page/index.js        | 20 ++++++++++++++---
 code/screens/home/index.js                    | 18 ++++++++++-----
 6 files changed, 55 insertions(+), 43 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/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}
diff --git a/code/screens/home/index.js b/code/screens/home/index.js
index 81fa3ee..cfeddc2 100644
--- a/code/screens/home/index.js
+++ b/code/screens/home/index.js
@@ -6,8 +6,20 @@ import React from "react";
 import Sections from "../../common/listSection";
 import animations from "../../../assets/js/animations";
 import { MAIN_PAGE_DETAILS } from "../../../assets/js/common/main-page";
+import { SECTIONS } from "../../../assets/js/common/sections";
 import { handleUrl } from "../../utils";
 
+const subjects = [
+  {
+    type: SECTIONS.GAMMA,
+    content: <CircleDiagram />,
+  },
+  {
+    type: SECTIONS.EPSILON,
+    content: <Clients />,
+  },
+];
+
 const Home = ({ navbar, contact, _relativeURL, _ID }) => {
   const { title, sub_title, description, url, btnText, lottie, sections } =
     MAIN_PAGE_DETAILS;
@@ -32,11 +44,7 @@ const Home = ({ navbar, contact, _relativeURL, _ID }) => {
         />
       </div>
 
-      <Sections
-        sections={sections}
-        gamma={<CircleDiagram />}
-        epsilon={<Clients />}
-      />
+      <Sections sections={sections} subjects={subjects} />
 
       <div className="page-common-sub-section">{contact}</div>
 

From f5a4e1a73a5d8a85945d587d3289598a0971aaac Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 8 Jan 2023 15:08:53 +0200
Subject: [PATCH 33/34] refactor

---
 assets/js/common/main-page/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/common/main-page/index.js b/assets/js/common/main-page/index.js
index 1ef8799..f360707 100644
--- a/assets/js/common/main-page/index.js
+++ b/assets/js/common/main-page/index.js
@@ -24,7 +24,7 @@ export const MAIN_PAGE_DETAILS = {
       title: "Propelling your business to success with emerging tech",
       paragraphs: [
         "We are at the forefront of Advanced technology and Software development services:",
-        "Web, Mobile Developing",
+        "Web, Frontend & Backend Developing",
         "QA Manual & Automation",
         "Mobile Developing",
       ],

From cda771d66f68128e4b9afb40bb36dc7350635c07 Mon Sep 17 00:00:00 2001
From: Alina Khomenker <alina.khomenker@gotech.io>
Date: Sun, 8 Jan 2023 17:48:15 +0200
Subject: [PATCH 34/34] refactor

---
 assets/js/common/main-page/index.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/assets/js/common/main-page/index.js b/assets/js/common/main-page/index.js
index f360707..c330967 100644
--- a/assets/js/common/main-page/index.js
+++ b/assets/js/common/main-page/index.js
@@ -22,11 +22,8 @@ export const MAIN_PAGE_DETAILS = {
       type: "section-beta",
       color: COLORS.GREEN,
       title: "Propelling your business to success with emerging tech",
-      paragraphs: [
-        "We are at the forefront of Advanced technology and Software development services:",
-        "Web, Frontend & Backend Developing",
-        "QA Manual & Automation",
-        "Mobile Developing",
+      description: [
+        "Growing a business often requires keeping up with the latest industry trends, including technology. As such, business leaders always need to be on the lookout for new tech that will improve their results and workflow.",
       ],
     },
     {