diff --git a/assets/js/common/about-us/index.js b/assets/js/common/about-us/index.js new file mode 100644 index 0000000..fd2e9e5 --- /dev/null +++ b/assets/js/common/about-us/index.js @@ -0,0 +1,50 @@ +import { COLORS } from "../colors"; + +export const ABOUT_US_DETAILS = { + title: "GoTech Family Introduction", + description: + "We help Fortune 500 companies, startups, and enterprises to build relevant digital products, train their teams, solve business problems, and reduce costs while increasing efficiency.", + + video: { + src: "https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:6880909146707787776?compact=1", + title: "GoTech", + }, + + sections: [ + { + type: "section-alpha", + color: COLORS.DEFAULT, + title: "our history", + description: + "GoTech is a one-stop shop for infrastructures and development services. Our team consists of the best and most professional mobile and web developers, QA automation developers, DevOps, data engineers, and DBAs. We provide our clients with high-quality, reliable services that are tailored to their specific business needs.", + }, + { + type: "section-beta", + color: COLORS.MAIN, + title: "you can see us here!", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + }, + { + type: "section-gamma", + color: COLORS.GREEN, + title: "why choose us?", + description: + "With years of experience in the industry, our team has the skills and expertise to deliver top-notch solutions that drive real results for our clients. We are committed to providing exceptional customer service and working closely with our clients to ensure their success.", + }, + { + type: "section-delta", + color: COLORS.MAIN, + title: "Meet our professional team!", + description: + "At GoTech, we believe in the power of collaboration and partnerships. We work closely with our clients to understand their unique challenges and develop solutions that are tailored to their specific needs. Our team is dedicated to helping our clients achieve their goals and succeed in today's competitive market.", + }, + { + type: "section-epsilon", + color: COLORS.YELLOW, + title: "With us, you are a step ahead", + description: + "We don’t just simply initiate your project. We step into your shoes and perform a detailed analysis of your business landscape to give you the most purposeful solution. Contact us today to learn more about our services and see how we can help your business grow and thrive.", + }, + ], +}; diff --git a/assets/js/common/about-us/teams.js b/assets/js/common/about-us/teams.js new file mode 100644 index 0000000..8504bbc --- /dev/null +++ b/assets/js/common/about-us/teams.js @@ -0,0 +1,38 @@ +export const TEAMS = [ + { + name: "Lidor Itzhari", + position: "CEO", + image: "/assets/images/home/team/lidor.jpg", + linkedin: "https://www.linkedin.com/in/lidoritzhari/", + }, + { + name: "Doron Feldman", + position: "CTO", + image: "/assets/images/home/team/doron.jpg", + linkedin: "https://www.linkedin.com/in/doron-feldman/", + }, + { + name: "Assaf Balzamovich", + position: "Head of QA Automation", + image: "/assets/images/home/team/assaf.jpg", + linkedin: "https://www.linkedin.com/in/assaf-balzamovich/", + }, + { + name: "Raz Mantzur", + position: "Head of Web", + image: "/assets/images/home/team/raz.jpg", + linkedin: "https://www.linkedin.com/in/raz-mantzur/", + }, + { + name: "Giora Krasilshchik", + position: "Head of Mobile", + image: "/assets/images/home/team/giora.jpg", + linkedin: "https://www.linkedin.com/in/giora-krasilshchik-47ab8219/", + }, + { + name: "Mor Armoni", //Gur? + position: "HR Manager", + image: "/assets/images/home/team/mor.jpg", + linkedin: "https://www.linkedin.com/in/morarmoni/", + }, +]; diff --git a/assets/js/common/colors/index.js b/assets/js/common/colors/index.js index c7979f8..f59b5b6 100644 --- a/assets/js/common/colors/index.js +++ b/assets/js/common/colors/index.js @@ -8,4 +8,5 @@ export const COLORS = { PRIME: "prime", MAIN: "main", DEFAULT: "default", + ADDITIONAL: "additional", }; diff --git a/assets/js/common/footer/index.js b/assets/js/common/footer/index.js index e0e801e..5026cd7 100644 --- a/assets/js/common/footer/index.js +++ b/assets/js/common/footer/index.js @@ -7,7 +7,7 @@ export const FOOTER_INFO = [ { title: "About Us", link: "/#about" }, { title: "Services", link: "/#services" }, { title: "Clients", link: "/#clients" }, - { title: "Teams", link: "/#team" }, + { title: "Teams", link: "/#about/#team" }, { title: "Cases", link: "/case-studies" }, { title: "Careers", link: "/careers/" }, ], diff --git a/assets/js/common/timeline/index.js b/assets/js/common/timeline/index.js new file mode 100644 index 0000000..8452e45 --- /dev/null +++ b/assets/js/common/timeline/index.js @@ -0,0 +1,59 @@ +import { COLORS } from "../colors"; + +export const TIMELINE = [ + { + title: "We are born!", + description: + "We were founded in 2016 by 3 like-minded people whose priority is to maximize the level of technical services in Israel. We started with a small office and small clients. Having come a long way, now we understand all the stages that young startups go through every day, and we are ready to support and guide them.", + color: COLORS.GREEN, + }, + { + title: "First step into the Future", + description: + "We are worked so hard and by the beginning of 2017 we are moved to a new office and our team grow to 15 people. Our Company began to gain strength and break into the market to earn a reputation and a name for ourselves.", + year: 2017, + color: COLORS.BLUE, + }, + { + title: "Major Achievements", + description: + "2018 was a very successful year! We continued to grow. Opened an additional service for QA software testing. Teams have become largest, projects more interesting. Our teams start to work side by side with major global companies like Cisco, as well them working on projects from the Israeli Police and Government.", + year: 2018, + color: COLORS.ORANGE, + }, + { + title: "CORONA is comme...", + description: + "No Company can evolve without overcoming difficult situations and is always dependent on the world. 2019 was remembered by all the beginning of the corona and the sacrifices we had to make. We tried to retain the teams as much as possible, them switched to work remotely, many clients were vulnerable and suspended projects. Yes, it was been a tough year!", + year: 2019, + color: COLORS.YELLOW, + }, + { + title: "We can help rebuild our world", + description: + "When the world rebuilding, it is important not to miss the moment. In 2020, many businesses understood that only on the web then can survive the pandemic and began to look for good partners. We returned in full force and start to recruit even more employees and projects. 2019 made us stronger and now we saw exactly where to move.", + year: 2020, + color: COLORS.PINK, + }, + { + title: "The New Heights", + description: + "In 2021 our company has more 100 employers. We have people from different countries such as Israel, America, Russia, Ukraine, Belarus, Uruguay. We have grown and it has become crowded in one office and one City. GoTech decided it was time to conquer the Tel-Aviv skyscrapers.", + year: 2021, + color: COLORS.PURPLE, + }, + { + title: "Getting closer to the Stars", + description: + "In 2022, Our teams started work with such giants as Google, Walmart, Cognate, Varonis and many others. We help them to implements projects with cryptocurrency, artificial intelligence and QA Automations for various platforms.", + year: 2022, + color: COLORS.PRIME, + }, + { + title: "Our next targets", + description: + "Our plans for 2023 are to continue introducing exciting new technologies, working with incredible startups and expanding our professional team.", + year: 2023, + color: COLORS.ADDITIONAL, + }, +]; diff --git a/assets/sass/common/common.scss b/assets/sass/common/common.scss index bfe0283..e43903b 100644 --- a/assets/sass/common/common.scss +++ b/assets/sass/common/common.scss @@ -137,6 +137,9 @@ img { .prime { background-color: $prime; } +.additional { + background-color: $additional; +} @media only screen and (max-width: $medium) { .page-common-block { diff --git a/assets/sass/common/index.scss b/assets/sass/common/index.scss index 56ba769..8d1733e 100644 --- a/assets/sass/common/index.scss +++ b/assets/sass/common/index.scss @@ -9,6 +9,9 @@ @import "./colorSection.scss"; @import "./steps.scss"; @import "./parallax.scss"; +@import "./timeline.scss"; +@import "./video.scss"; +@import "./team.scss"; @import "./stages-cycle.scss"; @import "./title-section.scss"; @import "./flags.scss"; @@ -18,7 +21,6 @@ @import "./faq.scss"; @import "./diagram.scss"; @import "./points.scss"; -@import "./btns.scss"; @import "./stages-cycle.scss"; @import "./technology"; @import "./grey-box"; @@ -129,7 +131,7 @@ $component-width: calc(100% - 100px); } $main-font: "Poppins", sans-serif; -$headers-font: "Heebo", sans-serif; +$headers-font: "Poppins", sans-serif; h3, h4, diff --git a/assets/sass/common/steps.scss b/assets/sass/common/steps.scss index a968bd4..25a2345 100644 --- a/assets/sass/common/steps.scss +++ b/assets/sass/common/steps.scss @@ -4,7 +4,10 @@ &-item { margin: $content-gap 0; display: flex; + justify-content: center; align-items: center; + color: $main; + border-radius: $circle; &-number { width: 30px; diff --git a/assets/sass/common/team.scss b/assets/sass/common/team.scss new file mode 100644 index 0000000..822fb6f --- /dev/null +++ b/assets/sass/common/team.scss @@ -0,0 +1,52 @@ +.team { + width: 100%; + margin-top: $title-gap; + display: flex; + flex-wrap: wrap; + + &-member { + &-wrapper { + width: 30%; + height: 290px; + margin: 10px; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + } + + &-image { + width: 100%; + height: auto; + position: absolute; + left: 0px; + top: 0px; + + img { + border-radius: $radius; + } + } + + &-content { + width: calc(100% - 20px); + margin: auto auto 15px; + padding: 10px; + display: flex; + justify-content: space-between; + align-items: flex-end; + background-color: $main; + position: relative; + border-radius: 15px; + + h6 { + font-size: 14px; + } + p { + font-size: 12px; + } + i { + font-size: 20px; + } + } + } +} diff --git a/assets/sass/common/timeline.scss b/assets/sass/common/timeline.scss new file mode 100644 index 0000000..5294860 --- /dev/null +++ b/assets/sass/common/timeline.scss @@ -0,0 +1,121 @@ +.timeline { + &-wrapper { + margin-top: $title-gap; + position: relative; + } + + &-vertical { + &-block { + i { + width: 10%; + color: $additional; + text-align: center; + position: absolute; + margin: 0 0 -1px 1px; + left: 45%; + bottom: 0; + } + } + + &-line { + height: 100%; + margin: 0 auto; + position: absolute; + left: 50%; + top: 0; + border-left: 2px solid $additional; + border-radius: 5px; + } + } + + &-block { + position: relative; + padding: $content-gap 0; + } + + &-item { + width: 100%; + margin: $section-gap auto; + display: flex; + justify-content: space-between; + align-items: center; + + &-details { + width: 45%; + max-height: 70px; + padding: $content-gap; + display: flex; + justify-content: center; + overflow: hidden; + background-color: $main; + border-radius: $radius; + box-shadow: $shadow; + cursor: pointer; + transition: max-height 0.5s; + + &:hover { + max-height: 500px; + } + + .color-block-title, + .color-block-description { + color: $prime; + } + } + + &-number { + width: 50px; + height: 50px; + display: flex; + justify-content: center; + align-items: center; + background-color: $default; + border-radius: $circle; + + .steps-item-number { + width: 35px; + height: 35px; + margin: 0 auto; + } + } + + &-year- { + width: 45%; + } + + &-year-reverse { + width: 45%; + display: flex; + justify-content: end; + } + } +} + +@media only screen and (max-width: $medium) { +} + +@media only screen and (max-width: $mobile) { + .timeline-item { + flex-wrap: wrap; + + &-details { + width: 100%; + } + + &-number { + margin: $content-gap auto; + } + + &-year- { + width: 100%; + text-align: center; + background-color: $main; + } + + &-year-reverse { + width: 100%; + justify-content: center; + background-color: $main; + } + } +} diff --git a/assets/sass/common/video.scss b/assets/sass/common/video.scss new file mode 100644 index 0000000..eea9443 --- /dev/null +++ b/assets/sass/common/video.scss @@ -0,0 +1,18 @@ +.video { + width: 100%; + height: 500px; + margin-top: $title-gap; + background-color: $default; + + iframe { + width: 100%; + height: 100%; + border-radius: $radius; + } +} + +@media only screen and (max-width: $mobile) { + .video { + height: 200px; + } +} diff --git a/assets/sass/home/sections/sevices.scss b/assets/sass/home/sections/sevices.scss index 44d892e..6db211a 100644 --- a/assets/sass/home/sections/sevices.scss +++ b/assets/sass/home/sections/sevices.scss @@ -10,7 +10,7 @@ h3 { height: auto; margin-bottom: 20px; - font-size: 2.6rem; + font-size: 2.3rem; line-height: 3.2rem; font-weight: 600; letter-spacing: -0.063rem; diff --git a/code/common/member/index.js b/code/common/member/index.js new file mode 100644 index 0000000..15889b9 --- /dev/null +++ b/code/common/member/index.js @@ -0,0 +1,27 @@ +import React from "react"; +import animations from "../../../assets/js/animations"; + +const Member = ({ name, position, image, linkedin }) => { + return ( +
+
+ client images +
+
+
+
{name}
+

{position}

+
+ + + +
+
+ ); +}; + +export default Member; diff --git a/code/common/video/index.js b/code/common/video/index.js new file mode 100644 index 0000000..6b2ddf6 --- /dev/null +++ b/code/common/video/index.js @@ -0,0 +1,14 @@ +import React from "react"; +import animations from "../../../assets/js/animations"; + +function Video({ src, title }) { + return ( +
+
+ +
+
+ ); +} + +export default Video; diff --git a/code/screens/about-us/components/listMembers.js b/code/screens/about-us/components/listMembers.js new file mode 100644 index 0000000..b22afd1 --- /dev/null +++ b/code/screens/about-us/components/listMembers.js @@ -0,0 +1,25 @@ +import Member from "../../../common/member"; +import React from "react"; + +function ListMembers({ teams }) { + return ( +
+
+ {teams.length && + teams.map(({ name, position, image, linkedin }) => { + return ( + + ); + })} +
+
+ ); +} + +export default ListMembers; diff --git a/code/screens/about-us/components/timeline.js b/code/screens/about-us/components/timeline.js new file mode 100644 index 0000000..a4ce9a3 --- /dev/null +++ b/code/screens/about-us/components/timeline.js @@ -0,0 +1,33 @@ +import React from "react"; +import TimelineItem from "./timelineItem"; +import VerticalLine from "./verticalLine"; +import { TIMELINE } from "../../../../assets/js/common/timeline"; + +const Timeline = () => { + return ( +
+
+ + +
+ {TIMELINE.length && + TIMELINE.map(({ title, description, year, color }, i) => { + return ( + + ); + })} +
+
+
+ ); +}; + +export default Timeline; diff --git a/code/screens/about-us/components/timelineItem.js b/code/screens/about-us/components/timelineItem.js new file mode 100644 index 0000000..3700e18 --- /dev/null +++ b/code/screens/about-us/components/timelineItem.js @@ -0,0 +1,28 @@ +import React from "react"; +import TitleSection from "../../../common/titleSection"; +import animations from "../../../../assets/js/animations"; + +function TimelineItem({ title, description, number, year, color, reverse }) { + return ( +
+
+ +
+ +
+ {number} +
+ +
+

{year}

+
+
+ ); +} + +export default TimelineItem; diff --git a/code/screens/about-us/components/verticalLine.js b/code/screens/about-us/components/verticalLine.js new file mode 100644 index 0000000..d6fd6f0 --- /dev/null +++ b/code/screens/about-us/components/verticalLine.js @@ -0,0 +1,12 @@ +import React from "react"; + +const VerticalLine = () => { + return ( +
+
+ +
+ ); +}; + +export default VerticalLine; diff --git a/code/screens/about-us/index.js b/code/screens/about-us/index.js new file mode 100644 index 0000000..651a2f4 --- /dev/null +++ b/code/screens/about-us/index.js @@ -0,0 +1,43 @@ +import ColorSection from "../../common/colorSection"; +import ListMembers from "./components/listMembers"; +import PageWrapper from "../../common/pageWrapper"; +import React from "react"; +import Timeline from "./components/timeline"; +import Video from "../../common/video"; +import { ABOUT_US_DETAILS } from "../../../assets/js/common/about-us"; +import { TEAMS } from "../../../assets/js/common/about-us/teams"; +import { SECTIONS } from "../../../assets/js/common/sections"; + +function AboutUs({ marquee, contact, _relativeURL, _ID }) { + const { title, description, sections, video } = ABOUT_US_DETAILS; + + const subjects = [ + { + type: SECTIONS.ALPHA, + content: , + }, + { + type: SECTIONS.BETA, + content: