From dc7dab78f996e169d4fc285f91a9bef0c5b38bf2 Mon Sep 17 00:00:00 2001 From: Breno Date: Wed, 16 Oct 2024 18:12:54 -0300 Subject: [PATCH 1/8] Add security certificates section below case studies section in the homepage --- src/components/Advantages/styles.ts | 2 +- .../Homepage/SectionEight/index.tsx | 49 ++------ .../Homepage/SectionEight/styles.ts | 101 +++++---------- .../Homepage/SectionEleven/index.tsx | 28 +++++ .../Homepage/SectionEleven/styles.ts | 86 +++++++++++++ .../Advantage.tsx | 0 src/components/Homepage/SectionFive/index.tsx | 63 +++++++--- src/components/Homepage/SectionFive/styles.ts | 98 +++++++++++++-- src/components/Homepage/SectionFour/index.tsx | 58 +-------- src/components/Homepage/SectionFour/styles.ts | 118 ------------------ src/components/Homepage/SectionNine/index.tsx | 43 +++++-- src/components/Homepage/SectionNine/styles.ts | 109 ++++++++++++++-- .../Homepage/SectionSeven/index.tsx | 54 ++++++-- .../Homepage/SectionSeven/styles.ts | 86 ++++++++----- src/components/Homepage/SectionSix/index.tsx | 55 +++----- src/components/Homepage/SectionSix/styles.ts | 72 ++--------- src/components/Homepage/SectionTen/index.tsx | 29 ++--- src/components/Homepage/SectionTen/styles.ts | 88 ++----------- src/components/Homepage/index.tsx | 23 ---- src/components/Product/SectionTen/index.tsx | 29 +---- .../SecuriityCertificates/index.tsx | 35 ++++++ src/pages/index.tsx | 24 ++-- 22 files changed, 625 insertions(+), 625 deletions(-) create mode 100644 src/components/Homepage/SectionEleven/index.tsx create mode 100644 src/components/Homepage/SectionEleven/styles.ts rename src/components/Homepage/{SectionFour => SectionFive}/Advantage.tsx (100%) delete mode 100644 src/components/Homepage/SectionFour/styles.ts delete mode 100644 src/components/Homepage/index.tsx create mode 100644 src/components/SecuriityCertificates/index.tsx diff --git a/src/components/Advantages/styles.ts b/src/components/Advantages/styles.ts index 4175c6fb..36993412 100644 --- a/src/components/Advantages/styles.ts +++ b/src/components/Advantages/styles.ts @@ -10,7 +10,7 @@ export const Container = styled.section<{ $isImageOnTheLeft: boolean }>` display: flex; align-items: center; - justify-content: center; + justify-content: space-between; gap: 60px; flex-direction: ${(props) => props.$isImageOnTheLeft ? 'row-reverse' : 'row'}; diff --git a/src/components/Homepage/SectionEight/index.tsx b/src/components/Homepage/SectionEight/index.tsx index 74427cc3..79dfd993 100644 --- a/src/components/Homepage/SectionEight/index.tsx +++ b/src/components/Homepage/SectionEight/index.tsx @@ -1,45 +1,22 @@ import * as React from 'react'; -import DatabaseSavingWithLowPrice from '../../../svgs/database-saving-with-low-price.svg'; -import { PricingCalculator } from '../../PricingCalculator'; -import { - Button, - Container, - Description, - IconWrapper, - LeftColumn, - RightColumn, - Title, - Wrapper, -} from './styles'; +import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground'; +import MainConnectors from '../../MainConnectors'; +import { Description, Title, Wrapper } from './styles'; const SectionEight = () => { return ( - + - - - - - - <span>DO </span> - <span>4X MORE </span> - <span>WITH 2-5X LESS</span> - - - Estuary customers aren’t just benefitting from being - more real-time. They are 4x more productive. They - deliver new projects in days, not months. And they spend - 2-5x less on Estuary than on batch ELT. - - - - - - + INNOVATE FASTER + + Innovate faster with a single data pipeline that decouples + sources and destinations so you can share data across + analytics, apps, and AI, and add or change systems, all + without impacting others. + + - + ); }; diff --git a/src/components/Homepage/SectionEight/styles.ts b/src/components/Homepage/SectionEight/styles.ts index 47483891..992354b5 100644 --- a/src/components/Homepage/SectionEight/styles.ts +++ b/src/components/Homepage/SectionEight/styles.ts @@ -1,105 +1,66 @@ import styled from 'styled-components'; -import { - LinkFilled, - globalMaxWidth, - sectionTopBottomPadding, -} from '../../../globalStyles'; - -export const Container = styled.section` - background-color: #fdfdfe; -`; +import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; export const Wrapper = styled.div` ${globalMaxWidth} ${sectionTopBottomPadding} - - display: flex; - justify-content: space-between; - align-items: center; - gap: 80px; - @media (max-width: 1024px) { - flex-direction: column; - align-items: flex-start; - } + padding-right: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; @media (max-width: 425px) { - gap: 40px; + padding-right: 0; } `; export const Title = styled.h2` + ${globalMaxWidth} + + padding-left: 0; + text-align: center; font-size: 2.5rem; font-weight: 600; line-height: 48px; color: #5072eb; - margin: 0; text-transform: uppercase; + margin: 0; - & span:nth-child(odd) { - color: #04192b; + span { + color: #ffffff; } - @media (max-width: 1024px) { - font-size: 2.25rem; + @media (max-width: 425px) { + padding-left: 0; + padding-right: 20px; + font-size: 1.75rem; + line-height: 33.6px; } `; export const Description = styled.p` + ${globalMaxWidth} + + padding-left: 0; + width: 100%; font-size: 1.25rem; font-weight: 400; line-height: 30px; - margin: 0; - color: #47506d; + color: #ffffff; + margin: 24px 0 60px 0; + max-width: 940px; + text-align: center; @media (max-width: 1024px) { font-size: 1rem; } - @media (max-width: 980px) { - max-width: 480px; - } -`; - -export const Button = styled(LinkFilled)` - width: fit-content; - padding: 16px 24px; - @media (max-width: 425px) { - width: 100%; - } -`; - -export const IconWrapper = styled.div` - padding: 18px; - border: 1px solid #d7dce5; - border-radius: 8px; - width: fit-content; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffffff; -`; - -export const LeftColumn = styled.div` - display: flex; - flex-direction: column; - gap: 24px; - width: 50%; - - @media (max-width: 1024px) { - width: 100%; - } -`; - -export const RightColumn = styled.div` - width: 50%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - @media (max-width: 1024px) { - width: 100%; + padding-left: 0; + padding-right: 20px; + line-height: 30px; + margin: 16px 0 40px 0; } `; diff --git a/src/components/Homepage/SectionEleven/index.tsx b/src/components/Homepage/SectionEleven/index.tsx new file mode 100644 index 00000000..7fe5b19a --- /dev/null +++ b/src/components/Homepage/SectionEleven/index.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { dashboardRegisterUrl, webinarsUrl } from '../../../../shared'; +import { OutboundLinkOutlined } from '../../OutboundLink'; +import { ButtonFilled, Buttons, HubspotButton, Title, Wrapper } from './styles'; + +const SectionEleven = () => { + return ( + + + <span>SEE HOW </span> + <span>ESTUARY CAN WORK FOR YOU AND YOUR DATA</span> + + + + Try Now + + + Watch Demo + + + Contact Us + + + + ); +}; + +export default SectionEleven; diff --git a/src/components/Homepage/SectionEleven/styles.ts b/src/components/Homepage/SectionEleven/styles.ts new file mode 100644 index 00000000..fd6f1a87 --- /dev/null +++ b/src/components/Homepage/SectionEleven/styles.ts @@ -0,0 +1,86 @@ +import styled from 'styled-components'; +import { + globalMaxWidth, + LinkOutlined, + sectionTopBottomPadding, +} from '../../../globalStyles'; +import { OutboundLinkFilled } from '../../OutboundLink'; + +export const Wrapper = styled.section` + ${globalMaxWidth} + ${sectionTopBottomPadding} + + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 48px; + + @media (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + } + + @media (max-width: 768px) { + gap: 24px; + } + + @media (max-width: 425px) { + gap: 40px; + } +`; + +export const Title = styled.h2` + font-size: 4rem; + font-weight: 600; + line-height: 89.6px; + margin: 0; + text-transform: uppercase; + max-width: 1072px; + text-align: center; + color: #47506d; + + & span:nth-child(odd) { + color: #5072eb; + } + + @media (max-width: 768px) { + font-size: 2.25rem; + line-height: 43.2px; + } + + @media (max-width: 425px) { + font-size: 1.5rem; + line-height: 36px; + } +`; + +export const Buttons = styled.div` + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-content: center; + align-items: center; + gap: 24px; + margin: auto; + + @media (max-width: 768px) { + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr; + width: 100%; + } +`; + +const BaseButtonStyling = ` + min-width: 176px; + width: 100%; + padding: 16px 24px; +`; + +export const ButtonFilled = styled(OutboundLinkFilled)` + ${BaseButtonStyling} +`; + +export const HubspotButton = styled(LinkOutlined)` + ${BaseButtonStyling} + border-color: #D0D9F9; +`; diff --git a/src/components/Homepage/SectionFour/Advantage.tsx b/src/components/Homepage/SectionFive/Advantage.tsx similarity index 100% rename from src/components/Homepage/SectionFour/Advantage.tsx rename to src/components/Homepage/SectionFive/Advantage.tsx diff --git a/src/components/Homepage/SectionFive/index.tsx b/src/components/Homepage/SectionFive/index.tsx index 034c28b9..88075da4 100644 --- a/src/components/Homepage/SectionFive/index.tsx +++ b/src/components/Homepage/SectionFive/index.tsx @@ -1,23 +1,58 @@ +import { StaticImage } from 'gatsby-plugin-image'; import * as React from 'react'; -import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground'; -import FlowDemoVideo from '../../FlowDemoVideo'; -import { Description, Title, Wrapper } from './styles'; +import RealTimeCdc from '../../../svgs/real-time-cdc.svg'; +import Advantage from './Advantage'; +import { + AdvantagesList, + Container, + Description, + IconWrapper, + LeftColumn, + Link, + RightColumn, + Title, + Wrapper, +} from './styles'; const SectionFive = () => { return ( - + - - <span>Build </span> - in minutes - - - Use the UI to quickly build end-to-end pipelines using - no-code connectors. Estuary Flow does the rest. - - + + + + + + <span>Use the best </span> + real-time CDC + + + Estuary Flow is the most real-time, most reliable change + data capture (CDC) available today. It is the only CDC + with the: + + + + + + + + + + + View Connectors + + + + + - + ); }; diff --git a/src/components/Homepage/SectionFive/styles.ts b/src/components/Homepage/SectionFive/styles.ts index f2656737..8041fd51 100644 --- a/src/components/Homepage/SectionFive/styles.ts +++ b/src/components/Homepage/SectionFive/styles.ts @@ -1,27 +1,41 @@ import styled from 'styled-components'; -import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; +import { + LinkFilled, + globalMaxWidth, + sectionTopBottomPadding, +} from '../../../globalStyles'; + +export const Container = styled.section` + background-color: #fdfdfe; +`; export const Wrapper = styled.div` ${globalMaxWidth} ${sectionTopBottomPadding} + + display: flex; + justify-content: space-between; + gap: 60px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; + @media (max-width: 1024px) { + flex-direction: column-reverse; + } `; export const Title = styled.h2` - text-align: center; font-size: 2.5rem; font-weight: 600; line-height: 48px; color: #5072eb; - text-transform: uppercase; margin: 0; + text-transform: uppercase; span { - color: #ffffff; + color: #04192b; + } + + @media (max-width: 1024px) { + font-size: 2.25rem; } `; @@ -29,10 +43,8 @@ export const Description = styled.p` font-size: 1.25rem; font-weight: 400; line-height: 30px; - color: #ffffff; - margin: 24px 0 60px 0; - max-width: 720px; - text-align: center; + margin: 0; + color: #47506d; @media (max-width: 1024px) { font-size: 1rem; @@ -42,3 +54,65 @@ export const Description = styled.p` max-width: 480px; } `; + +export const Link = styled(LinkFilled)` + padding: 16px 24px; + margin-top: 12px; + width: fit-content; + + @media (max-width: 1024px) { + width: 100%; + } +`; + +export const AdvantagesList = styled.div` + display: flex; + flex-direction: column; + gap: 26px; +`; + +export const AdvantageContainer = styled.div` + display: flex; + gap: 20px; + align-items: center; +`; + +export const AdvantageTitle = styled.p` + font-size: 1.25rem; + font-weight: 400; + line-height: 30px; + color: #47506d; + margin: 0; + + @media (max-width: 1024px) { + font-size: 1rem; + } +`; + +export const LeftColumn = styled.div` + display: flex; + flex-direction: column; + gap: 24px; +`; + +export const RightColumn = styled.div` + display: flex; + align-items: center; + justify-content: center; + max-width: 536px; + + @media (max-width: 1024px) { + max-width: 100%; + } +`; + +export const IconWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + padding: 18px; + border: 1px solid #d7dce5; + border-radius: 8px; + width: fit-content; + background-color: #ffffff; +`; diff --git a/src/components/Homepage/SectionFour/index.tsx b/src/components/Homepage/SectionFour/index.tsx index 6c3f59cd..a5fa0af7 100644 --- a/src/components/Homepage/SectionFour/index.tsx +++ b/src/components/Homepage/SectionFour/index.tsx @@ -1,58 +1,12 @@ -import { StaticImage } from 'gatsby-plugin-image'; -import * as React from 'react'; -import RealTimeCdc from '../../../svgs/real-time-cdc.svg'; -import Advantage from './Advantage'; -import { - AdvantagesList, - Container, - Description, - IconWrapper, - LeftColumn, - Link, - RightColumn, - Title, - Wrapper, -} from './styles'; +import React from 'react'; +import { DefaultWrapperDark } from '../../../styles/wrappers'; +import SecurityCertificates from '../../SecuriityCertificates'; const SectionFour = () => { return ( - - - - - - - - <span>Use the best </span> - real-time CDC - - - Estuary Flow is the most real-time, most reliable change - data capture (CDC) available today. It is the only CDC - with the: - - - - - - - - - - - View Connectors - - - - - - - + + + ); }; diff --git a/src/components/Homepage/SectionFour/styles.ts b/src/components/Homepage/SectionFour/styles.ts deleted file mode 100644 index 8041fd51..00000000 --- a/src/components/Homepage/SectionFour/styles.ts +++ /dev/null @@ -1,118 +0,0 @@ -import styled from 'styled-components'; -import { - LinkFilled, - globalMaxWidth, - sectionTopBottomPadding, -} from '../../../globalStyles'; - -export const Container = styled.section` - background-color: #fdfdfe; -`; - -export const Wrapper = styled.div` - ${globalMaxWidth} - ${sectionTopBottomPadding} - - display: flex; - justify-content: space-between; - gap: 60px; - - @media (max-width: 1024px) { - flex-direction: column-reverse; - } -`; - -export const Title = styled.h2` - font-size: 2.5rem; - font-weight: 600; - line-height: 48px; - color: #5072eb; - margin: 0; - text-transform: uppercase; - - span { - color: #04192b; - } - - @media (max-width: 1024px) { - font-size: 2.25rem; - } -`; - -export const Description = styled.p` - font-size: 1.25rem; - font-weight: 400; - line-height: 30px; - margin: 0; - color: #47506d; - - @media (max-width: 1024px) { - font-size: 1rem; - } - - @media (max-width: 980px) { - max-width: 480px; - } -`; - -export const Link = styled(LinkFilled)` - padding: 16px 24px; - margin-top: 12px; - width: fit-content; - - @media (max-width: 1024px) { - width: 100%; - } -`; - -export const AdvantagesList = styled.div` - display: flex; - flex-direction: column; - gap: 26px; -`; - -export const AdvantageContainer = styled.div` - display: flex; - gap: 20px; - align-items: center; -`; - -export const AdvantageTitle = styled.p` - font-size: 1.25rem; - font-weight: 400; - line-height: 30px; - color: #47506d; - margin: 0; - - @media (max-width: 1024px) { - font-size: 1rem; - } -`; - -export const LeftColumn = styled.div` - display: flex; - flex-direction: column; - gap: 24px; -`; - -export const RightColumn = styled.div` - display: flex; - align-items: center; - justify-content: center; - max-width: 536px; - - @media (max-width: 1024px) { - max-width: 100%; - } -`; - -export const IconWrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - padding: 18px; - border: 1px solid #d7dce5; - border-radius: 8px; - width: fit-content; - background-color: #ffffff; -`; diff --git a/src/components/Homepage/SectionNine/index.tsx b/src/components/Homepage/SectionNine/index.tsx index 0e9b4915..1f29db45 100644 --- a/src/components/Homepage/SectionNine/index.tsx +++ b/src/components/Homepage/SectionNine/index.tsx @@ -1,16 +1,45 @@ import * as React from 'react'; -import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground'; -import TestimonialsCarousel from '../../TestimonialsCarousel'; -import { Wrapper } from './styles'; +import DatabaseSavingWithLowPrice from '../../../svgs/database-saving-with-low-price.svg'; +import { PricingCalculator } from '../../PricingCalculator'; +import { + Button, + Container, + Description, + IconWrapper, + LeftColumn, + RightColumn, + Title, + Wrapper, +} from './styles'; const SectionNine = () => { return ( - + -

What people are saying

- + + + + + + <span>DO </span> + <span>4X MORE </span> + <span>WITH 2-5X LESS</span> + + + Estuary customers aren’t just benefitting from being + more real-time. They are 4x more productive. They + deliver new projects in days, not months. And they spend + 2-5x less on Estuary than on batch ELT. + + + + + + - + ); }; diff --git a/src/components/Homepage/SectionNine/styles.ts b/src/components/Homepage/SectionNine/styles.ts index df5e308d..47483891 100644 --- a/src/components/Homepage/SectionNine/styles.ts +++ b/src/components/Homepage/SectionNine/styles.ts @@ -1,20 +1,105 @@ import styled from 'styled-components'; -import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; +import { + LinkFilled, + globalMaxWidth, + sectionTopBottomPadding, +} from '../../../globalStyles'; + +export const Container = styled.section` + background-color: #fdfdfe; +`; export const Wrapper = styled.div` ${globalMaxWidth} ${sectionTopBottomPadding} + + display: flex; + justify-content: space-between; + align-items: center; + gap: 80px; + + @media (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + } + + @media (max-width: 425px) { + gap: 40px; + } +`; + +export const Title = styled.h2` + font-size: 2.5rem; + font-weight: 600; + line-height: 48px; + color: #5072eb; + margin: 0; + text-transform: uppercase; + + & span:nth-child(odd) { + color: #04192b; + } + + @media (max-width: 1024px) { + font-size: 2.25rem; + } +`; + +export const Description = styled.p` + font-size: 1.25rem; + font-weight: 400; + line-height: 30px; + margin: 0; + color: #47506d; + + @media (max-width: 1024px) { + font-size: 1rem; + } + + @media (max-width: 980px) { + max-width: 480px; + } +`; + +export const Button = styled(LinkFilled)` + width: fit-content; + padding: 16px 24px; + + @media (max-width: 425px) { + width: 100%; + } +`; + +export const IconWrapper = styled.div` + padding: 18px; + border: 1px solid #d7dce5; + border-radius: 8px; + width: fit-content; + display: flex; + align-items: center; + justify-content: center; + background-color: #ffffff; +`; + +export const LeftColumn = styled.div` + display: flex; + flex-direction: column; + gap: 24px; + width: 50%; + + @media (max-width: 1024px) { + width: 100%; + } +`; + +export const RightColumn = styled.div` + width: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; - h2 { - font-size: 2.5rem; - font-weight: 600; - color: #5072eb; - text-align: center; - margin-bottom: 60px; - text-transform: uppercase; - - @media (max-width: 425px) { - font-size: 1.75rem; - } + @media (max-width: 1024px) { + width: 100%; } `; diff --git a/src/components/Homepage/SectionSeven/index.tsx b/src/components/Homepage/SectionSeven/index.tsx index 7ea19493..0aa2193f 100644 --- a/src/components/Homepage/SectionSeven/index.tsx +++ b/src/components/Homepage/SectionSeven/index.tsx @@ -1,22 +1,50 @@ +import { StaticImage } from 'gatsby-plugin-image'; import * as React from 'react'; -import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground'; -import MainConnectors from '../../MainConnectors'; -import { Description, Title, Wrapper } from './styles'; +import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg'; +import { docsPageUrl } from '../../../../shared'; +import { + Button, + Container, + Description, + IconWrapper, + LeftColumn, + RightColumn, + Title, + Wrapper, +} from './styles'; const SectionSeven = () => { return ( - + - INNOVATE FASTER - - Innovate faster with a single data pipeline that decouples - sources and destinations so you can share data across - analytics, apps, and AI, and add or change systems, all - without impacting others. - - + + + + + + + + + <span>AUTOMATE </span> + <span>DATAOPS</span> + + + Use schema inference, evolution, and automation along + with a complete CLI and API to implement true agile + DataOps that can handle constant change without breaking + pipelines. + + + - + ); }; diff --git a/src/components/Homepage/SectionSeven/styles.ts b/src/components/Homepage/SectionSeven/styles.ts index 992354b5..13b91257 100644 --- a/src/components/Homepage/SectionSeven/styles.ts +++ b/src/components/Homepage/SectionSeven/styles.ts @@ -1,66 +1,92 @@ import styled from 'styled-components'; import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; +import { OutboundLinkFilled } from '../../OutboundLink'; + +export const Container = styled.section` + background-color: #fdfdfe; +`; export const Wrapper = styled.div` ${globalMaxWidth} ${sectionTopBottomPadding} - - padding-right: 0; - display: flex; - justify-content: center; + + display: flex; + justify-content: space-between; align-items: center; - flex-direction: column; + gap: 60px; + + @media (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + } @media (max-width: 425px) { - padding-right: 0; + gap: 40px; } `; export const Title = styled.h2` - ${globalMaxWidth} - - padding-left: 0; - text-align: center; font-size: 2.5rem; font-weight: 600; line-height: 48px; color: #5072eb; - text-transform: uppercase; margin: 0; + text-transform: uppercase; - span { - color: #ffffff; + & span:nth-child(odd) { + color: #04192b; } - @media (max-width: 425px) { - padding-left: 0; - padding-right: 20px; - font-size: 1.75rem; - line-height: 33.6px; + @media (max-width: 1024px) { + font-size: 2.25rem; } `; export const Description = styled.p` - ${globalMaxWidth} - - padding-left: 0; - width: 100%; font-size: 1.25rem; font-weight: 400; line-height: 30px; - color: #ffffff; - margin: 24px 0 60px 0; - max-width: 940px; - text-align: center; + margin: 0; + color: #47506d; @media (max-width: 1024px) { font-size: 1rem; } + @media (max-width: 980px) { + max-width: 480px; + } +`; + +export const Button = styled(OutboundLinkFilled)` + padding: 16px 24px; + width: fit-content; + @media (max-width: 425px) { - padding-left: 0; - padding-right: 20px; - line-height: 30px; - margin: 16px 0 40px 0; + width: 100%; } `; + +export const IconWrapper = styled.div` + padding: 18px; + border: 1px solid #d7dce5; + border-radius: 8px; + width: fit-content; + display: flex; + align-items: center; + justify-content: center; + background-color: #ffffff; +`; + +export const LeftColumn = styled.div` + width: 100%; + display: flex; + align-items: center; + justify-content: center; +`; + +export const RightColumn = styled.div` + display: flex; + flex-direction: column; + gap: 24px; +`; diff --git a/src/components/Homepage/SectionSix/index.tsx b/src/components/Homepage/SectionSix/index.tsx index bb99eed9..5fbb8049 100644 --- a/src/components/Homepage/SectionSix/index.tsx +++ b/src/components/Homepage/SectionSix/index.tsx @@ -1,50 +1,23 @@ -import { StaticImage } from 'gatsby-plugin-image'; import * as React from 'react'; -import SingleDataflowIcon from '../../../svgs/metric-single-dataflow.svg'; -import { docsPageUrl } from '../../../../shared'; -import { - Button, - Container, - Description, - IconWrapper, - LeftColumn, - RightColumn, - Title, - Wrapper, -} from './styles'; +import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground'; +import FlowDemoVideo from '../../FlowDemoVideo'; +import { Description, Title, Wrapper } from './styles'; const SectionSix = () => { return ( - + - - - - - - - - - <span>AUTOMATE </span> - <span>DATAOPS</span> - - - Use schema inference, evolution, and automation along - with a complete CLI and API to implement true agile - DataOps that can handle constant change without breaking - pipelines. - - - + + <span>Build </span> + in minutes + + + Use the UI to quickly build end-to-end pipelines using + no-code connectors. Estuary Flow does the rest. + + - + ); }; diff --git a/src/components/Homepage/SectionSix/styles.ts b/src/components/Homepage/SectionSix/styles.ts index 13b91257..f2656737 100644 --- a/src/components/Homepage/SectionSix/styles.ts +++ b/src/components/Homepage/SectionSix/styles.ts @@ -1,44 +1,27 @@ import styled from 'styled-components'; import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; -import { OutboundLinkFilled } from '../../OutboundLink'; - -export const Container = styled.section` - background-color: #fdfdfe; -`; export const Wrapper = styled.div` ${globalMaxWidth} ${sectionTopBottomPadding} - - display: flex; - justify-content: space-between; - align-items: center; - gap: 60px; - @media (max-width: 1024px) { - flex-direction: column; - align-items: flex-start; - } - - @media (max-width: 425px) { - gap: 40px; - } + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; `; export const Title = styled.h2` + text-align: center; font-size: 2.5rem; font-weight: 600; line-height: 48px; color: #5072eb; - margin: 0; text-transform: uppercase; + margin: 0; - & span:nth-child(odd) { - color: #04192b; - } - - @media (max-width: 1024px) { - font-size: 2.25rem; + span { + color: #ffffff; } `; @@ -46,8 +29,10 @@ export const Description = styled.p` font-size: 1.25rem; font-weight: 400; line-height: 30px; - margin: 0; - color: #47506d; + color: #ffffff; + margin: 24px 0 60px 0; + max-width: 720px; + text-align: center; @media (max-width: 1024px) { font-size: 1rem; @@ -57,36 +42,3 @@ export const Description = styled.p` max-width: 480px; } `; - -export const Button = styled(OutboundLinkFilled)` - padding: 16px 24px; - width: fit-content; - - @media (max-width: 425px) { - width: 100%; - } -`; - -export const IconWrapper = styled.div` - padding: 18px; - border: 1px solid #d7dce5; - border-radius: 8px; - width: fit-content; - display: flex; - align-items: center; - justify-content: center; - background-color: #ffffff; -`; - -export const LeftColumn = styled.div` - width: 100%; - display: flex; - align-items: center; - justify-content: center; -`; - -export const RightColumn = styled.div` - display: flex; - flex-direction: column; - gap: 24px; -`; diff --git a/src/components/Homepage/SectionTen/index.tsx b/src/components/Homepage/SectionTen/index.tsx index 86f1babf..82325fb6 100644 --- a/src/components/Homepage/SectionTen/index.tsx +++ b/src/components/Homepage/SectionTen/index.tsx @@ -1,27 +1,16 @@ import * as React from 'react'; -import { dashboardRegisterUrl, webinarsUrl } from '../../../../shared'; -import { OutboundLinkOutlined } from '../../OutboundLink'; -import { ButtonFilled, Buttons, HubspotButton, Title, Wrapper } from './styles'; +import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground'; +import TestimonialsCarousel from '../../TestimonialsCarousel'; +import { Wrapper } from './styles'; const SectionTen = () => { return ( - - - <span>SEE HOW </span> - <span>ESTUARY CAN WORK FOR YOU AND YOUR DATA</span> - - - - Try Now - - - Watch Demo - - - Contact Us - - - + + +

What people are saying

+ + + ); }; diff --git a/src/components/Homepage/SectionTen/styles.ts b/src/components/Homepage/SectionTen/styles.ts index fd6f1a87..df5e308d 100644 --- a/src/components/Homepage/SectionTen/styles.ts +++ b/src/components/Homepage/SectionTen/styles.ts @@ -1,86 +1,20 @@ import styled from 'styled-components'; -import { - globalMaxWidth, - LinkOutlined, - sectionTopBottomPadding, -} from '../../../globalStyles'; -import { OutboundLinkFilled } from '../../OutboundLink'; +import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; -export const Wrapper = styled.section` +export const Wrapper = styled.div` ${globalMaxWidth} ${sectionTopBottomPadding} - - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - gap: 48px; - @media (max-width: 1024px) { - flex-direction: column; - align-items: flex-start; - } - - @media (max-width: 768px) { - gap: 24px; - } - - @media (max-width: 425px) { - gap: 40px; - } -`; - -export const Title = styled.h2` - font-size: 4rem; - font-weight: 600; - line-height: 89.6px; - margin: 0; - text-transform: uppercase; - max-width: 1072px; - text-align: center; - color: #47506d; - - & span:nth-child(odd) { + h2 { + font-size: 2.5rem; + font-weight: 600; color: #5072eb; - } - - @media (max-width: 768px) { - font-size: 2.25rem; - line-height: 43.2px; - } + text-align: center; + margin-bottom: 60px; + text-transform: uppercase; - @media (max-width: 425px) { - font-size: 1.5rem; - line-height: 36px; + @media (max-width: 425px) { + font-size: 1.75rem; + } } `; - -export const Buttons = styled.div` - display: grid; - grid-template-columns: 1fr 1fr 1fr; - justify-content: center; - align-items: center; - gap: 24px; - margin: auto; - - @media (max-width: 768px) { - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr 1fr; - width: 100%; - } -`; - -const BaseButtonStyling = ` - min-width: 176px; - width: 100%; - padding: 16px 24px; -`; - -export const ButtonFilled = styled(OutboundLinkFilled)` - ${BaseButtonStyling} -`; - -export const HubspotButton = styled(LinkOutlined)` - ${BaseButtonStyling} - border-color: #D0D9F9; -`; diff --git a/src/components/Homepage/index.tsx b/src/components/Homepage/index.tsx deleted file mode 100644 index 402f20d1..00000000 --- a/src/components/Homepage/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import SectionEight from './SectionEight'; -import SectionFive from './SectionFive'; -import SectionFour from './SectionFour'; -import SectionNine from './SectionNine'; -import SectionOne from './SectionOne'; -import SectionSeven from './SectionSeven'; -import SectionSix from './SectionSix'; -import SectionTen from './SectionTen'; -import SectionThree from './SectionThree'; -import SectionTwo from './SectionTwo'; - -export { - SectionEight, - SectionFive, - SectionFour, - SectionNine, - SectionOne, - SectionSeven, - SectionSix, - SectionTen, - SectionThree, - SectionTwo, -}; diff --git a/src/components/Product/SectionTen/index.tsx b/src/components/Product/SectionTen/index.tsx index ebcc4d31..8fa6c005 100644 --- a/src/components/Product/SectionTen/index.tsx +++ b/src/components/Product/SectionTen/index.tsx @@ -1,36 +1,11 @@ -import { StaticImage } from 'gatsby-plugin-image'; import React from 'react'; import { DefaultWrapperDark } from '../../../styles/wrappers'; -import Advantages from '../../Advantages'; -import { sectionTenAdvantages } from '../advantages'; +import SecurityCertificates from '../../SecuriityCertificates'; const SectionTen = () => { return ( - - } - title={ - <> - SECURE YOUR DATA - - } - subtitle="Estuary Flow is designed and tested to make sure your data and your systems stay secure." - image={ - - } - advantages={sectionTenAdvantages} - /> + ); }; diff --git a/src/components/SecuriityCertificates/index.tsx b/src/components/SecuriityCertificates/index.tsx new file mode 100644 index 00000000..34ff9c0d --- /dev/null +++ b/src/components/SecuriityCertificates/index.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { StaticImage } from 'gatsby-plugin-image'; +import Advantages from '../Advantages'; +import { sectionTenAdvantages } from '../Product/advantages'; + +const SecurityCertificates = () => { + return ( + + } + title={ + <> + SECURE YOUR DATA + + } + subtitle="Estuary Flow is designed and tested to make sure your data and your systems stay secure." + image={ + + } + advantages={sectionTenAdvantages} + /> + ); +}; + +export default SecurityCertificates; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e4900d5e..f99eddda 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,19 +1,18 @@ import * as React from 'react'; import { graphql, useStaticQuery } from 'gatsby'; -import { - SectionEight, - SectionFive, - SectionFour, - SectionNine, - SectionOne, - SectionSeven, - SectionSix, - SectionTen, - SectionThree, - SectionTwo, -} from '../components/Homepage'; import Layout from '../components/Layout'; import Seo from '../components/seo'; +import SectionOne from '../components/Homepage/SectionOne'; +import SectionTwo from '../components/Homepage/SectionTwo'; +import SectionThree from '../components/Homepage/SectionThree'; +import SectionFour from '../components/Homepage/SectionFour'; +import SectionFive from '../components/Homepage/SectionFive'; +import SectionSix from '../components/Homepage/SectionSix'; +import SectionSeven from '../components/Homepage/SectionSeven'; +import SectionEight from '../components/Homepage/SectionEight'; +import SectionNine from '../components/Homepage/SectionNine'; +import SectionTen from '../components/Homepage/SectionTen'; +import SectionEleven from '../components/Homepage/SectionEleven'; const IndexPage = () => { return ( @@ -28,6 +27,7 @@ const IndexPage = () => { + ); }; From dc1bebbd4f20f2132698aa37e1280c72e18ad6e0 Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 17 Oct 2024 15:17:46 -0300 Subject: [PATCH 2/8] Change security section background color to dark on homepage --- .../BackgroundImages/BackgroundWrapper.tsx | 21 +++++++++++++++++-- ...rkSwoopingLinesLeftDirectionBackground.tsx | 2 +- ...tSwoopingLinesRightDirectionBackground.tsx | 2 +- .../Homepage/SectionEight/styles.ts | 3 +-- src/components/Homepage/SectionFour/index.tsx | 8 +++---- src/components/Homepage/SectionSix/styles.ts | 3 +-- src/components/Homepage/SectionTen/styles.ts | 3 +-- .../Homepage/SectionThree/styles.ts | 7 +------ .../SecuriityCertificates/index.tsx | 7 ++++++- .../author/SectionOne/styles.module.less | 1 - src/templates/blog-post/styles.module.less | 1 - src/templates/connector/Hero/styles.ts | 3 +-- 12 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/components/BackgroundImages/BackgroundWrapper.tsx b/src/components/BackgroundImages/BackgroundWrapper.tsx index a1ea2778..869ad30b 100644 --- a/src/components/BackgroundImages/BackgroundWrapper.tsx +++ b/src/components/BackgroundImages/BackgroundWrapper.tsx @@ -1,12 +1,29 @@ import React from 'react'; +import clsx from 'clsx'; +import { sectionTopBottomPadding } from '../../globalStyles/wrappers.module.less'; import { wrapper } from './styles.module.less'; interface BackgroundWrapperProps { children: React.ReactNode; + isSection?: boolean; } -const BackgroundWrapper = ({ children }: BackgroundWrapperProps) => { - return
{children}
; +const BackgroundWrapper = ({ + children, + isSection = false, +}: BackgroundWrapperProps) => { + const HtmlElementTag = isSection ? 'section' : 'div'; + + return ( + + {children} + + ); }; export default BackgroundWrapper; diff --git a/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx b/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx index ca75f1e6..6db3e0a6 100644 --- a/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx +++ b/src/components/BackgroundImages/DarkSwoopingLinesLeftDirectionBackground.tsx @@ -11,7 +11,7 @@ const DarkSwoopingLinesLeftDirectionBackground = ({ className, }: React.HTMLAttributes) => { return ( - + ) => { return ( - + { return ( - - - + + + ); }; diff --git a/src/components/Homepage/SectionSix/styles.ts b/src/components/Homepage/SectionSix/styles.ts index f2656737..1f8efa14 100644 --- a/src/components/Homepage/SectionSix/styles.ts +++ b/src/components/Homepage/SectionSix/styles.ts @@ -1,9 +1,8 @@ import styled from 'styled-components'; -import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; +import { globalMaxWidth } from '../../../globalStyles'; export const Wrapper = styled.div` ${globalMaxWidth} - ${sectionTopBottomPadding} display: flex; justify-content: center; diff --git a/src/components/Homepage/SectionTen/styles.ts b/src/components/Homepage/SectionTen/styles.ts index df5e308d..f6cc7670 100644 --- a/src/components/Homepage/SectionTen/styles.ts +++ b/src/components/Homepage/SectionTen/styles.ts @@ -1,9 +1,8 @@ import styled from 'styled-components'; -import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; +import { globalMaxWidth } from '../../../globalStyles'; export const Wrapper = styled.div` ${globalMaxWidth} - ${sectionTopBottomPadding} h2 { font-size: 2.5rem; diff --git a/src/components/Homepage/SectionThree/styles.ts b/src/components/Homepage/SectionThree/styles.ts index aef9c77d..52714621 100644 --- a/src/components/Homepage/SectionThree/styles.ts +++ b/src/components/Homepage/SectionThree/styles.ts @@ -1,13 +1,8 @@ import styled from 'styled-components'; -import { - LinkOutlined, - globalMaxWidth, - sectionTopBottomPadding, -} from '../../../globalStyles'; +import { LinkOutlined, globalMaxWidth } from '../../../globalStyles'; export const Wrapper = styled.div` ${globalMaxWidth} - ${sectionTopBottomPadding} display: flex; flex-direction: column; diff --git a/src/components/SecuriityCertificates/index.tsx b/src/components/SecuriityCertificates/index.tsx index 34ff9c0d..97997cff 100644 --- a/src/components/SecuriityCertificates/index.tsx +++ b/src/components/SecuriityCertificates/index.tsx @@ -3,7 +3,11 @@ import { StaticImage } from 'gatsby-plugin-image'; import Advantages from '../Advantages'; import { sectionTenAdvantages } from '../Product/advantages'; -const SecurityCertificates = () => { +interface SecurityCertificatesProps { + isDarkTheme?: boolean; +} + +const SecurityCertificates = ({ isDarkTheme }: SecurityCertificatesProps) => { return ( { /> } advantages={sectionTenAdvantages} + isDarkTheme={isDarkTheme} /> ); }; diff --git a/src/templates/author/SectionOne/styles.module.less b/src/templates/author/SectionOne/styles.module.less index a10fc6e7..27990ad2 100644 --- a/src/templates/author/SectionOne/styles.module.less +++ b/src/templates/author/SectionOne/styles.module.less @@ -2,7 +2,6 @@ .container { .globalMaxWidth; - .sectionTopBottomPadding; display: flex; gap: 60px; diff --git a/src/templates/blog-post/styles.module.less b/src/templates/blog-post/styles.module.less index d9e07227..f0ef69ca 100644 --- a/src/templates/blog-post/styles.module.less +++ b/src/templates/blog-post/styles.module.less @@ -135,7 +135,6 @@ .blogPostHeaderWrapper { .globalMaxWidth; - .sectionTopBottomPadding; display: flex; flex-direction: row; diff --git a/src/templates/connector/Hero/styles.ts b/src/templates/connector/Hero/styles.ts index 1f0cb001..1b89b4d1 100644 --- a/src/templates/connector/Hero/styles.ts +++ b/src/templates/connector/Hero/styles.ts @@ -1,11 +1,10 @@ import styled, { CSSProperties } from 'styled-components'; import { ConnectorType } from '../../../../shared'; -import { globalMaxWidth, sectionTopBottomPadding } from '../../../globalStyles'; +import { globalMaxWidth } from '../../../globalStyles'; export const Container = styled.div` ${globalMaxWidth} - ${sectionTopBottomPadding}; display: flex; flex-direction: column; From 1b56d7e78f295fe4fb0bb7a86f352fe521a14873 Mon Sep 17 00:00:00 2001 From: Breno Date: Thu, 17 Oct 2024 15:38:09 -0300 Subject: [PATCH 3/8] Replace section component names to facilitate adding new sections --- .../index.tsx | 4 +- .../styles.ts | 0 .../{SectionSix => BuildInMinutes}/index.tsx | 4 +- .../{SectionSix => BuildInMinutes}/styles.ts | 0 .../{SectionThree => CaseStudies}/Card.tsx | 0 .../{SectionThree => CaseStudies}/index.tsx | 4 +- .../{SectionThree => CaseStudies}/styles.ts | 0 .../index.tsx | 8 ++-- .../styles.ts | 0 .../{SectionOne => Hero}/AnimFallback.tsx | 0 .../{SectionOne => Hero}/AnimatedHero.tsx | 0 .../Homepage/{SectionOne => Hero}/index.tsx | 4 +- .../Homepage/{SectionOne => Hero}/styles.ts | 0 .../index.tsx | 4 +- .../styles.ts | 0 .../index.tsx | 4 +- .../styles.ts | 0 .../{SectionFour => SecureYourData}/index.tsx | 4 +- .../{SectionEleven => SeeHow}/index.tsx | 4 +- .../{SectionEleven => SeeHow}/styles.ts | 0 .../Advantage.tsx | 0 .../index.tsx | 4 +- .../styles.ts | 0 .../index.tsx | 4 +- .../styles.ts | 0 src/pages/index.tsx | 44 +++++++++---------- 26 files changed, 46 insertions(+), 46 deletions(-) rename src/components/Homepage/{SectionSeven => AutomateDataops}/index.tsx (96%) rename src/components/Homepage/{SectionSeven => AutomateDataops}/styles.ts (100%) rename src/components/Homepage/{SectionSix => BuildInMinutes}/index.tsx (92%) rename src/components/Homepage/{SectionSix => BuildInMinutes}/styles.ts (100%) rename src/components/Homepage/{SectionThree => CaseStudies}/Card.tsx (100%) rename src/components/Homepage/{SectionThree => CaseStudies}/index.tsx (98%) rename src/components/Homepage/{SectionThree => CaseStudies}/styles.ts (100%) rename src/components/Homepage/{SectionNine => Do4xMoreWith25xLess}/index.tsx (84%) rename src/components/Homepage/{SectionNine => Do4xMoreWith25xLess}/styles.ts (100%) rename src/components/Homepage/{SectionOne => Hero}/AnimFallback.tsx (100%) rename src/components/Homepage/{SectionOne => Hero}/AnimatedHero.tsx (100%) rename src/components/Homepage/{SectionOne => Hero}/index.tsx (98%) rename src/components/Homepage/{SectionOne => Hero}/styles.ts (100%) rename src/components/Homepage/{SectionEight => InnovateFaster}/index.tsx (93%) rename src/components/Homepage/{SectionEight => InnovateFaster}/styles.ts (100%) rename src/components/Homepage/{SectionTwo => MoveAndTransform}/index.tsx (98%) rename src/components/Homepage/{SectionTwo => MoveAndTransform}/styles.ts (100%) rename src/components/Homepage/{SectionFour => SecureYourData}/index.tsx (86%) rename src/components/Homepage/{SectionEleven => SeeHow}/index.tsx (93%) rename src/components/Homepage/{SectionEleven => SeeHow}/styles.ts (100%) rename src/components/Homepage/{SectionFive => UseTheBestRealTimeCdc}/Advantage.tsx (100%) rename src/components/Homepage/{SectionFive => UseTheBestRealTimeCdc}/index.tsx (96%) rename src/components/Homepage/{SectionFive => UseTheBestRealTimeCdc}/styles.ts (100%) rename src/components/Homepage/{SectionTen => WhatPeopleAreSaying}/index.tsx (87%) rename src/components/Homepage/{SectionTen => WhatPeopleAreSaying}/styles.ts (100%) diff --git a/src/components/Homepage/SectionSeven/index.tsx b/src/components/Homepage/AutomateDataops/index.tsx similarity index 96% rename from src/components/Homepage/SectionSeven/index.tsx rename to src/components/Homepage/AutomateDataops/index.tsx index 0aa2193f..fee26fe4 100644 --- a/src/components/Homepage/SectionSeven/index.tsx +++ b/src/components/Homepage/AutomateDataops/index.tsx @@ -13,7 +13,7 @@ import { Wrapper, } from './styles'; -const SectionSeven = () => { +const AutomateDataops = () => { return ( @@ -48,4 +48,4 @@ const SectionSeven = () => { ); }; -export default SectionSeven; +export default AutomateDataops; diff --git a/src/components/Homepage/SectionSeven/styles.ts b/src/components/Homepage/AutomateDataops/styles.ts similarity index 100% rename from src/components/Homepage/SectionSeven/styles.ts rename to src/components/Homepage/AutomateDataops/styles.ts diff --git a/src/components/Homepage/SectionSix/index.tsx b/src/components/Homepage/BuildInMinutes/index.tsx similarity index 92% rename from src/components/Homepage/SectionSix/index.tsx rename to src/components/Homepage/BuildInMinutes/index.tsx index 5fbb8049..81348d4a 100644 --- a/src/components/Homepage/SectionSix/index.tsx +++ b/src/components/Homepage/BuildInMinutes/index.tsx @@ -3,7 +3,7 @@ import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/Dar import FlowDemoVideo from '../../FlowDemoVideo'; import { Description, Title, Wrapper } from './styles'; -const SectionSix = () => { +const BuildInMinutes = () => { return ( @@ -21,4 +21,4 @@ const SectionSix = () => { ); }; -export default SectionSix; +export default BuildInMinutes; diff --git a/src/components/Homepage/SectionSix/styles.ts b/src/components/Homepage/BuildInMinutes/styles.ts similarity index 100% rename from src/components/Homepage/SectionSix/styles.ts rename to src/components/Homepage/BuildInMinutes/styles.ts diff --git a/src/components/Homepage/SectionThree/Card.tsx b/src/components/Homepage/CaseStudies/Card.tsx similarity index 100% rename from src/components/Homepage/SectionThree/Card.tsx rename to src/components/Homepage/CaseStudies/Card.tsx diff --git a/src/components/Homepage/SectionThree/index.tsx b/src/components/Homepage/CaseStudies/index.tsx similarity index 98% rename from src/components/Homepage/SectionThree/index.tsx rename to src/components/Homepage/CaseStudies/index.tsx index df1647ab..0e0fa2d7 100644 --- a/src/components/Homepage/SectionThree/index.tsx +++ b/src/components/Homepage/CaseStudies/index.tsx @@ -8,7 +8,7 @@ import { Cards, SectionTitle, Wrapper } from './styles'; const cardsPerSlide = 3; -const SectionThree = () => { +const CaseStudies = () => { const { allStrapiCaseStudy: { nodes: allCaseStudies }, } = useStaticQuery(graphql` @@ -81,4 +81,4 @@ const SectionThree = () => { ); }; -export default SectionThree; +export default CaseStudies; diff --git a/src/components/Homepage/SectionThree/styles.ts b/src/components/Homepage/CaseStudies/styles.ts similarity index 100% rename from src/components/Homepage/SectionThree/styles.ts rename to src/components/Homepage/CaseStudies/styles.ts diff --git a/src/components/Homepage/SectionNine/index.tsx b/src/components/Homepage/Do4xMoreWith25xLess/index.tsx similarity index 84% rename from src/components/Homepage/SectionNine/index.tsx rename to src/components/Homepage/Do4xMoreWith25xLess/index.tsx index 1f29db45..3fd0570d 100644 --- a/src/components/Homepage/SectionNine/index.tsx +++ b/src/components/Homepage/Do4xMoreWith25xLess/index.tsx @@ -12,7 +12,7 @@ import { Wrapper, } from './styles'; -const SectionNine = () => { +const Do4xMoreWith25xLess = () => { return ( @@ -26,8 +26,8 @@ const SectionNine = () => { WITH 2-5X LESS - Estuary customers aren’t just benefitting from being - more real-time. They are 4x more productive. They + Estuary customers aren't just benefitting from + being more real-time. They are 4x more productive. They deliver new projects in days, not months. And they spend 2-5x less on Estuary than on batch ELT. @@ -43,4 +43,4 @@ const SectionNine = () => { ); }; -export default SectionNine; +export default Do4xMoreWith25xLess; diff --git a/src/components/Homepage/SectionNine/styles.ts b/src/components/Homepage/Do4xMoreWith25xLess/styles.ts similarity index 100% rename from src/components/Homepage/SectionNine/styles.ts rename to src/components/Homepage/Do4xMoreWith25xLess/styles.ts diff --git a/src/components/Homepage/SectionOne/AnimFallback.tsx b/src/components/Homepage/Hero/AnimFallback.tsx similarity index 100% rename from src/components/Homepage/SectionOne/AnimFallback.tsx rename to src/components/Homepage/Hero/AnimFallback.tsx diff --git a/src/components/Homepage/SectionOne/AnimatedHero.tsx b/src/components/Homepage/Hero/AnimatedHero.tsx similarity index 100% rename from src/components/Homepage/SectionOne/AnimatedHero.tsx rename to src/components/Homepage/Hero/AnimatedHero.tsx diff --git a/src/components/Homepage/SectionOne/index.tsx b/src/components/Homepage/Hero/index.tsx similarity index 98% rename from src/components/Homepage/SectionOne/index.tsx rename to src/components/Homepage/Hero/index.tsx index 9ccf3483..9b244280 100644 --- a/src/components/Homepage/SectionOne/index.tsx +++ b/src/components/Homepage/Hero/index.tsx @@ -23,7 +23,7 @@ import { const metricIconColor = '#FFFFFF'; -const SectionOne = () => { +const Hero = () => { return ( @@ -84,4 +84,4 @@ const SectionOne = () => { ); }; -export default SectionOne; +export default Hero; diff --git a/src/components/Homepage/SectionOne/styles.ts b/src/components/Homepage/Hero/styles.ts similarity index 100% rename from src/components/Homepage/SectionOne/styles.ts rename to src/components/Homepage/Hero/styles.ts diff --git a/src/components/Homepage/SectionEight/index.tsx b/src/components/Homepage/InnovateFaster/index.tsx similarity index 93% rename from src/components/Homepage/SectionEight/index.tsx rename to src/components/Homepage/InnovateFaster/index.tsx index 79dfd993..0dfcac77 100644 --- a/src/components/Homepage/SectionEight/index.tsx +++ b/src/components/Homepage/InnovateFaster/index.tsx @@ -3,7 +3,7 @@ import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/Dar import MainConnectors from '../../MainConnectors'; import { Description, Title, Wrapper } from './styles'; -const SectionEight = () => { +const InnovateFaster = () => { return ( @@ -20,4 +20,4 @@ const SectionEight = () => { ); }; -export default SectionEight; +export default InnovateFaster; diff --git a/src/components/Homepage/SectionEight/styles.ts b/src/components/Homepage/InnovateFaster/styles.ts similarity index 100% rename from src/components/Homepage/SectionEight/styles.ts rename to src/components/Homepage/InnovateFaster/styles.ts diff --git a/src/components/Homepage/SectionTwo/index.tsx b/src/components/Homepage/MoveAndTransform/index.tsx similarity index 98% rename from src/components/Homepage/SectionTwo/index.tsx rename to src/components/Homepage/MoveAndTransform/index.tsx index f379795b..b431e22c 100644 --- a/src/components/Homepage/SectionTwo/index.tsx +++ b/src/components/Homepage/MoveAndTransform/index.tsx @@ -20,7 +20,7 @@ import { Title, } from './styles'; -const SectionTwo = () => { +const MoveAndTransform = () => { return (
@@ -109,4 +109,4 @@ const SectionTwo = () => { ); }; -export default SectionTwo; +export default MoveAndTransform; diff --git a/src/components/Homepage/SectionTwo/styles.ts b/src/components/Homepage/MoveAndTransform/styles.ts similarity index 100% rename from src/components/Homepage/SectionTwo/styles.ts rename to src/components/Homepage/MoveAndTransform/styles.ts diff --git a/src/components/Homepage/SectionFour/index.tsx b/src/components/Homepage/SecureYourData/index.tsx similarity index 86% rename from src/components/Homepage/SectionFour/index.tsx rename to src/components/Homepage/SecureYourData/index.tsx index b22c8b87..958e4506 100644 --- a/src/components/Homepage/SectionFour/index.tsx +++ b/src/components/Homepage/SecureYourData/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import SecurityCertificates from '../../SecuriityCertificates'; import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/DarkSwoopingLinesLeftDirectionBackground'; -const SectionFour = () => { +const SecureYourData = () => { return ( @@ -10,4 +10,4 @@ const SectionFour = () => { ); }; -export default SectionFour; +export default SecureYourData; diff --git a/src/components/Homepage/SectionEleven/index.tsx b/src/components/Homepage/SeeHow/index.tsx similarity index 93% rename from src/components/Homepage/SectionEleven/index.tsx rename to src/components/Homepage/SeeHow/index.tsx index 7fe5b19a..f6b7364a 100644 --- a/src/components/Homepage/SectionEleven/index.tsx +++ b/src/components/Homepage/SeeHow/index.tsx @@ -3,7 +3,7 @@ import { dashboardRegisterUrl, webinarsUrl } from '../../../../shared'; import { OutboundLinkOutlined } from '../../OutboundLink'; import { ButtonFilled, Buttons, HubspotButton, Title, Wrapper } from './styles'; -const SectionEleven = () => { +const SeeHow = () => { return ( @@ -25,4 +25,4 @@ const SectionEleven = () => { ); }; -export default SectionEleven; +export default SeeHow; diff --git a/src/components/Homepage/SectionEleven/styles.ts b/src/components/Homepage/SeeHow/styles.ts similarity index 100% rename from src/components/Homepage/SectionEleven/styles.ts rename to src/components/Homepage/SeeHow/styles.ts diff --git a/src/components/Homepage/SectionFive/Advantage.tsx b/src/components/Homepage/UseTheBestRealTimeCdc/Advantage.tsx similarity index 100% rename from src/components/Homepage/SectionFive/Advantage.tsx rename to src/components/Homepage/UseTheBestRealTimeCdc/Advantage.tsx diff --git a/src/components/Homepage/SectionFive/index.tsx b/src/components/Homepage/UseTheBestRealTimeCdc/index.tsx similarity index 96% rename from src/components/Homepage/SectionFive/index.tsx rename to src/components/Homepage/UseTheBestRealTimeCdc/index.tsx index 88075da4..4c47de46 100644 --- a/src/components/Homepage/SectionFive/index.tsx +++ b/src/components/Homepage/UseTheBestRealTimeCdc/index.tsx @@ -14,7 +14,7 @@ import { Wrapper, } from './styles'; -const SectionFive = () => { +const UseTheBestRealTimeCdc = () => { return ( <Container> <Wrapper> @@ -56,4 +56,4 @@ const SectionFive = () => { ); }; -export default SectionFive; +export default UseTheBestRealTimeCdc; diff --git a/src/components/Homepage/SectionFive/styles.ts b/src/components/Homepage/UseTheBestRealTimeCdc/styles.ts similarity index 100% rename from src/components/Homepage/SectionFive/styles.ts rename to src/components/Homepage/UseTheBestRealTimeCdc/styles.ts diff --git a/src/components/Homepage/SectionTen/index.tsx b/src/components/Homepage/WhatPeopleAreSaying/index.tsx similarity index 87% rename from src/components/Homepage/SectionTen/index.tsx rename to src/components/Homepage/WhatPeopleAreSaying/index.tsx index 82325fb6..7c7483f6 100644 --- a/src/components/Homepage/SectionTen/index.tsx +++ b/src/components/Homepage/WhatPeopleAreSaying/index.tsx @@ -3,7 +3,7 @@ import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/Dar import TestimonialsCarousel from '../../TestimonialsCarousel'; import { Wrapper } from './styles'; -const SectionTen = () => { +const WhatPeopleAreSaying = () => { return ( <DarkSwoopingLinesLeftDirectionBackground> <Wrapper> @@ -14,4 +14,4 @@ const SectionTen = () => { ); }; -export default SectionTen; +export default WhatPeopleAreSaying; diff --git a/src/components/Homepage/SectionTen/styles.ts b/src/components/Homepage/WhatPeopleAreSaying/styles.ts similarity index 100% rename from src/components/Homepage/SectionTen/styles.ts rename to src/components/Homepage/WhatPeopleAreSaying/styles.ts diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f99eddda..976c4305 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,32 +2,32 @@ import * as React from 'react'; import { graphql, useStaticQuery } from 'gatsby'; import Layout from '../components/Layout'; import Seo from '../components/seo'; -import SectionOne from '../components/Homepage/SectionOne'; -import SectionTwo from '../components/Homepage/SectionTwo'; -import SectionThree from '../components/Homepage/SectionThree'; -import SectionFour from '../components/Homepage/SectionFour'; -import SectionFive from '../components/Homepage/SectionFive'; -import SectionSix from '../components/Homepage/SectionSix'; -import SectionSeven from '../components/Homepage/SectionSeven'; -import SectionEight from '../components/Homepage/SectionEight'; -import SectionNine from '../components/Homepage/SectionNine'; -import SectionTen from '../components/Homepage/SectionTen'; -import SectionEleven from '../components/Homepage/SectionEleven'; +import Hero from '../components/Homepage/Hero'; +import MoveAndTransform from '../components/Homepage/MoveAndTransform'; +import CaseStudies from '../components/Homepage/CaseStudies'; +import SecureYourData from '../components/Homepage/SecureYourData'; +import UseTheBestRealTimeCdc from '../components/Homepage/UseTheBestRealTimeCdc'; +import BuildInMinutes from '../components/Homepage/BuildInMinutes'; +import AutomateDataops from '../components/Homepage/AutomateDataops'; +import InnovateFaster from '../components/Homepage/InnovateFaster'; +import Do4xMoreWith25xLess from '../components/Homepage/Do4xMoreWith25xLess'; +import WhatPeopleAreSaying from '../components/Homepage/WhatPeopleAreSaying'; +import SeeHow from '../components/Homepage/SeeHow'; const IndexPage = () => { return ( <Layout> - <SectionOne /> - <SectionTwo /> - <SectionThree /> - <SectionFour /> - <SectionFive /> - <SectionSix /> - <SectionSeven /> - <SectionEight /> - <SectionNine /> - <SectionTen /> - <SectionEleven /> + <Hero /> + <MoveAndTransform /> + <CaseStudies /> + <SecureYourData /> + <UseTheBestRealTimeCdc /> + <BuildInMinutes /> + <AutomateDataops /> + <InnovateFaster /> + <Do4xMoreWith25xLess /> + <WhatPeopleAreSaying /> + <SeeHow /> </Layout> ); }; From 3b8d836a9511ea6bfe89b281a5bd8f47dec1585c Mon Sep 17 00:00:00 2001 From: Breno <breno@estuary.dev> Date: Thu, 17 Oct 2024 23:43:51 -0300 Subject: [PATCH 4/8] Add deployment tab panels for the deployment modes section --- .../DeploymentOptionDetails/index.tsx | 30 ++++ .../styles.module.less | 34 +++++ .../DeployentModes/KeyFeature/index.tsx | 17 +++ .../Homepage/DeployentModes/index.tsx | 128 ++++++++++++++++++ .../DeployentModes/styles.module.less | 26 ++++ src/pages/index.tsx | 2 + 6 files changed, 237 insertions(+) create mode 100644 src/components/Homepage/DeployentModes/DeploymentOptionDetails/index.tsx create mode 100644 src/components/Homepage/DeployentModes/DeploymentOptionDetails/styles.module.less create mode 100644 src/components/Homepage/DeployentModes/KeyFeature/index.tsx create mode 100644 src/components/Homepage/DeployentModes/index.tsx create mode 100644 src/components/Homepage/DeployentModes/styles.module.less diff --git a/src/components/Homepage/DeployentModes/DeploymentOptionDetails/index.tsx b/src/components/Homepage/DeployentModes/DeploymentOptionDetails/index.tsx new file mode 100644 index 00000000..6d6bca6c --- /dev/null +++ b/src/components/Homepage/DeployentModes/DeploymentOptionDetails/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import KeyFeature from '../KeyFeature'; +import { wrapper } from './styles.module.less'; + +interface DeploymentOptionDetailsProps { + title: string; + description: string; + keyFeatures: string[]; +} + +const DeploymentOptionDetails = ({ + title, + description, + keyFeatures, +}: DeploymentOptionDetailsProps) => { + return ( + <div className={wrapper}> + <h3>{title}</h3> + <p>{description}</p> + <h4>Key Features:</h4> + <ul> + {keyFeatures.map((keyFeature, index) => ( + <KeyFeature key={index} title={keyFeature} /> + ))} + </ul> + </div> + ); +}; + +export default DeploymentOptionDetails; diff --git a/src/components/Homepage/DeployentModes/DeploymentOptionDetails/styles.module.less b/src/components/Homepage/DeployentModes/DeploymentOptionDetails/styles.module.less new file mode 100644 index 00000000..97eaf3d6 --- /dev/null +++ b/src/components/Homepage/DeployentModes/DeploymentOptionDetails/styles.module.less @@ -0,0 +1,34 @@ +.wrapper { + display: flex; + flex-direction: column; + gap: 16px; + font-size: 1rem; + + h3 { + font-size: 1.25rem; + line-height: 24px; + } + + p { + margin: 0 0 8px 0; + } + + ul { + margin: 0; + } + + li { + display: flex; + align-items: center; + gap: 12px; + + p { + margin: 0; + } + } + + h4 { + color: #5072EB; + font-size: 1rem; + } +} \ No newline at end of file diff --git a/src/components/Homepage/DeployentModes/KeyFeature/index.tsx b/src/components/Homepage/DeployentModes/KeyFeature/index.tsx new file mode 100644 index 00000000..876566a2 --- /dev/null +++ b/src/components/Homepage/DeployentModes/KeyFeature/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Checkmark from '../../../../svgs/checkmark.svg'; + +interface KeyFeatureProps { + title: string; +} + +const KeyFeature = ({ title }: KeyFeatureProps) => { + return ( + <li> + <Checkmark width={16} color="#5072EB" /> + <p>{title}</p> + </li> + ); +}; + +export default KeyFeature; diff --git a/src/components/Homepage/DeployentModes/index.tsx b/src/components/Homepage/DeployentModes/index.tsx new file mode 100644 index 00000000..77171c49 --- /dev/null +++ b/src/components/Homepage/DeployentModes/index.tsx @@ -0,0 +1,128 @@ +import React from 'react'; +import TabContext from '@mui/lab/TabContext'; +import Tab from '@mui/material/Tab'; +import TabList from '@mui/lab/TabList'; +import TabPanel from '@mui/lab/TabPanel'; +import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; +import { container, leftColumn, rightColumn } from './styles.module.less'; +import DeploymentOptionDetails from './DeploymentOptionDetails'; + +const tabStyling = { + 'color': '#5072EB', + 'transition': 'var(--default-transition)', + 'opacity': '0.75', + 'textTransform': 'none', + 'maxWidth': '206px', + 'borderBottom': '1px solid #A4B6F4', + + '&:hover': { + backgroundColor: '#ECEFFC', + }, + + '&:active': { + backgroundColor: '#E3E8FB', + }, + + '&.Mui-selected': { + fontWeight: '600', + opacity: '1', + }, +}; + +const publicDeploymentFeatures = [ + 'Fully managed by Estuary', + 'Quick setup and minimal configuration required', + 'Automatic updates and maintenance', + 'Multiple data processing region options', + 'Suitable for organizations with less stringent data security requirements', +]; + +const privateDeploymentFeatures = [ + 'Enhanced security with data remaining within the private network', + 'Complete control over data pathways', + 'Immutable infrastructure pattern for up-to-date security', + 'Compliant with stringent data security requirements', + 'Ability to move data across regions', +]; + +const byocFeatures = [ + 'Full control over the cloud infrastructure', + 'Ability to leverage existing cloud resources and configurations', + 'Customizable to fit specific organizational needs', + 'Potential cost savings by using existing cloud credits or negotiated rates', + 'Greater flexibility in terms of data residency and compliance', +]; + +const tabPanelStyling = { padding: '40px 0 0 0', minHeight: '458px' }; + +const DeploymentModes = () => { + const [value, setValue] = React.useState('1'); + + const handleChange = (event: React.SyntheticEvent, newValue: string) => { + setValue(newValue); + }; + + return ( + <section className={defaultWrapperGrey}> + <div className={container}> + <div className={leftColumn}> + <div /> + <div /> + </div> + <div className={rightColumn}> + <h2> + <span>DEPLOYMENT MODES</span> FOR EVERY ENVIRONMENT + </h2> + <TabContext value={value}> + <TabList + onChange={handleChange} + aria-label="Deployment options tabs" + > + <Tab + label="Public Deployment" + value="1" + sx={tabStyling} + disableRipple + /> + <Tab + label="Private Deployment" + value="2" + sx={tabStyling} + disableRipple + /> + <Tab + label="BYOC (Bring Your Own Cloud)" + value="3" + sx={tabStyling} + disableRipple + /> + </TabList> + <TabPanel value="1" sx={tabPanelStyling}> + <DeploymentOptionDetails + title="PUBLIC DEPLOYMENT" + description="Public Deployment is the standard SaaS offering from Estuary Flow. Ideal for small to medium-sized businesses or teams that want a hassle-free, quick-to-implement solution without the need for extensive customization or heightened security measures." + keyFeatures={publicDeploymentFeatures} + /> + </TabPanel> + <TabPanel value="2" sx={tabPanelStyling}> + <DeploymentOptionDetails + title="PRIVATE DEPLOYMENT" + description="Private Deployment allows customers to run Estuary Flow's data infrastructure within their private environment while maintaining the simplicity of a SaaS platform. Suitable for enterprises and organizations with strict data security and compliance needs, such as those in highly regulated industries or handling sensitive data." + keyFeatures={privateDeploymentFeatures} + /> + </TabPanel> + <TabPanel value="3" sx={tabPanelStyling}> + <DeploymentOptionDetails + title="BRING YOUR OWN CLOUD" + description="BYOC allows customers to deploy Estuary Flow in their own cloud environment. Ideal for organizations that have invested heavily in their cloud infrastructure and want to maintain ownership over their entire stack while benefiting from Estuary Flow's capabilities." + keyFeatures={byocFeatures} + /> + </TabPanel> + </TabContext> + </div> + </div> + </section> + ); +}; + +export default DeploymentModes; diff --git a/src/components/Homepage/DeployentModes/styles.module.less b/src/components/Homepage/DeployentModes/styles.module.less new file mode 100644 index 00000000..1a2e72bf --- /dev/null +++ b/src/components/Homepage/DeployentModes/styles.module.less @@ -0,0 +1,26 @@ +@import '../../../globalStyles/sections.module.less'; + +.container { + .globalMaxWidth; + + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: space-between; + gap: 60px; + + h2 { + font-size: 2.5rem; + font-weight: 600; + line-height: 48px; + color: #04192B; + margin-bottom: 40px; + + span { + color: #5072EB; + } + } +} + +.rightColumn { +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 976c4305..9adfa773 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -13,6 +13,7 @@ import InnovateFaster from '../components/Homepage/InnovateFaster'; import Do4xMoreWith25xLess from '../components/Homepage/Do4xMoreWith25xLess'; import WhatPeopleAreSaying from '../components/Homepage/WhatPeopleAreSaying'; import SeeHow from '../components/Homepage/SeeHow'; +import DeploymentModes from '../components/Homepage/DeployentModes'; const IndexPage = () => { return ( @@ -20,6 +21,7 @@ const IndexPage = () => { <Hero /> <MoveAndTransform /> <CaseStudies /> + <DeploymentModes /> <SecureYourData /> <UseTheBestRealTimeCdc /> <BuildInMinutes /> From 93e927bf55c164217d3f8483ecc5494803d60f4d Mon Sep 17 00:00:00 2001 From: Breno <breno@estuary.dev> Date: Fri, 18 Oct 2024 14:36:26 -0300 Subject: [PATCH 5/8] Add first tabs and deployment option content --- .../DeployentModes/styles.module.less | 26 --- .../DeploymentOptionDetails/index.tsx | 0 .../styles.module.less | 4 + .../KeyFeature/index.tsx | 0 .../index.tsx | 112 +++++++++- .../DeploymentModes/styles.module.less | 205 ++++++++++++++++++ src/pages/index.tsx | 2 +- src/svgs/cloud-provider-icon.svg | 14 ++ src/svgs/control-plane-icon.svg | 12 + src/svgs/customer-cloud-icon.svg | 10 + src/svgs/customer-vpc-icon.svg | 3 + src/svgs/database-icon.svg | 23 ++ src/svgs/europe-flag-icon.svg | 22 ++ src/svgs/flow-storage-icon.svg | 19 ++ src/svgs/usa-flag-icon.svg | 37 ++++ 15 files changed, 452 insertions(+), 37 deletions(-) delete mode 100644 src/components/Homepage/DeployentModes/styles.module.less rename src/components/Homepage/{DeployentModes => DeploymentModes}/DeploymentOptionDetails/index.tsx (100%) rename src/components/Homepage/{DeployentModes => DeploymentModes}/DeploymentOptionDetails/styles.module.less (90%) rename src/components/Homepage/{DeployentModes => DeploymentModes}/KeyFeature/index.tsx (100%) rename src/components/Homepage/{DeployentModes => DeploymentModes}/index.tsx (51%) create mode 100644 src/components/Homepage/DeploymentModes/styles.module.less create mode 100644 src/svgs/cloud-provider-icon.svg create mode 100644 src/svgs/control-plane-icon.svg create mode 100644 src/svgs/customer-cloud-icon.svg create mode 100644 src/svgs/customer-vpc-icon.svg create mode 100644 src/svgs/database-icon.svg create mode 100644 src/svgs/europe-flag-icon.svg create mode 100644 src/svgs/flow-storage-icon.svg create mode 100644 src/svgs/usa-flag-icon.svg diff --git a/src/components/Homepage/DeployentModes/styles.module.less b/src/components/Homepage/DeployentModes/styles.module.less deleted file mode 100644 index 1a2e72bf..00000000 --- a/src/components/Homepage/DeployentModes/styles.module.less +++ /dev/null @@ -1,26 +0,0 @@ -@import '../../../globalStyles/sections.module.less'; - -.container { - .globalMaxWidth; - - display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; - justify-content: space-between; - gap: 60px; - - h2 { - font-size: 2.5rem; - font-weight: 600; - line-height: 48px; - color: #04192B; - margin-bottom: 40px; - - span { - color: #5072EB; - } - } -} - -.rightColumn { -} diff --git a/src/components/Homepage/DeployentModes/DeploymentOptionDetails/index.tsx b/src/components/Homepage/DeploymentModes/DeploymentOptionDetails/index.tsx similarity index 100% rename from src/components/Homepage/DeployentModes/DeploymentOptionDetails/index.tsx rename to src/components/Homepage/DeploymentModes/DeploymentOptionDetails/index.tsx diff --git a/src/components/Homepage/DeployentModes/DeploymentOptionDetails/styles.module.less b/src/components/Homepage/DeploymentModes/DeploymentOptionDetails/styles.module.less similarity index 90% rename from src/components/Homepage/DeployentModes/DeploymentOptionDetails/styles.module.less rename to src/components/Homepage/DeploymentModes/DeploymentOptionDetails/styles.module.less index 97eaf3d6..4e94f0b3 100644 --- a/src/components/Homepage/DeployentModes/DeploymentOptionDetails/styles.module.less +++ b/src/components/Homepage/DeploymentModes/DeploymentOptionDetails/styles.module.less @@ -25,6 +25,10 @@ p { margin: 0; } + + svg { + min-width: 16px; + } } h4 { diff --git a/src/components/Homepage/DeployentModes/KeyFeature/index.tsx b/src/components/Homepage/DeploymentModes/KeyFeature/index.tsx similarity index 100% rename from src/components/Homepage/DeployentModes/KeyFeature/index.tsx rename to src/components/Homepage/DeploymentModes/KeyFeature/index.tsx diff --git a/src/components/Homepage/DeployentModes/index.tsx b/src/components/Homepage/DeploymentModes/index.tsx similarity index 51% rename from src/components/Homepage/DeployentModes/index.tsx rename to src/components/Homepage/DeploymentModes/index.tsx index 77171c49..5b45747c 100644 --- a/src/components/Homepage/DeployentModes/index.tsx +++ b/src/components/Homepage/DeploymentModes/index.tsx @@ -3,8 +3,29 @@ import TabContext from '@mui/lab/TabContext'; import Tab from '@mui/material/Tab'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; +import clsx from 'clsx'; import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; -import { container, leftColumn, rightColumn } from './styles.module.less'; +import CloudProviderIcon from '../../../svgs/cloud-provider-icon.svg'; +import CustomerCloudIcon from '../../../svgs/customer-cloud-icon.svg'; +import ControlPlaneIcon from '../../../svgs/control-plane-icon.svg'; +import CustomerVpcIcon from '../../../svgs/customer-vpc-icon.svg'; +import DatabaseIcon from '../../../svgs/database-icon.svg'; +import FlowStorageIcon from '../../../svgs/flow-storage-icon.svg'; +import UsaFlagIcon from '../../../svgs/usa-flag-icon.svg'; +import EuropeFlagIcon from '../../../svgs/europe-flag-icon.svg'; +import { + container, + leftColumn, + solidBorderBox, + secondLevelSolidBorderBox, + dashedBorderBox, + middleTag, + arrowLeft, + arrowRight, + horizontalWrapper, + minHeight, + rightColumn, +} from './styles.module.less'; import DeploymentOptionDetails from './DeploymentOptionDetails'; const tabStyling = { @@ -12,8 +33,8 @@ const tabStyling = { 'transition': 'var(--default-transition)', 'opacity': '0.75', 'textTransform': 'none', - 'maxWidth': '206px', 'borderBottom': '1px solid #A4B6F4', + 'width': '33.333%', '&:hover': { backgroundColor: '#ECEFFC', @@ -55,28 +76,99 @@ const byocFeatures = [ const tabPanelStyling = { padding: '40px 0 0 0', minHeight: '458px' }; +const iconSize = 30; + const DeploymentModes = () => { - const [value, setValue] = React.useState('1'); + const [selectedTab, setSelectedTab] = React.useState('1'); - const handleChange = (event: React.SyntheticEvent, newValue: string) => { - setValue(newValue); + const handleTabChange = (event: React.SyntheticEvent, newValue: string) => { + setSelectedTab(newValue); }; return ( <section className={defaultWrapperGrey}> <div className={container}> <div className={leftColumn}> - <div /> - <div /> + <div className={solidBorderBox}> + <div className={dashedBorderBox}> + <CloudProviderIcon width={iconSize} /> + <span>Estuary Cloud provider & Region</span> + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox, + minHeight + )} + > + <ControlPlaneIcon width={iconSize} /> + <span>Control Plane</span> + </div> + <div className={horizontalWrapper}> + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox + )} + > + <UsaFlagIcon width={iconSize} /> + <span>US Data Plane</span> + </div> + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox + )} + > + <EuropeFlagIcon width={iconSize} /> + <span>EU Data Plane</span> + </div> + </div> + </div> + </div> + <div className={middleTag}> + <div className={arrowLeft} /> + <span>Internet</span> + <div className={arrowRight} /> + </div> + <div className={solidBorderBox}> + <div className={dashedBorderBox}> + <CustomerCloudIcon width={iconSize} /> + <span>Customer Cloud</span> + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox + )} + > + <CustomerVpcIcon width={iconSize} /> + <span>Customer VPC</span> + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox + )} + > + <DatabaseIcon width={iconSize} /> + <span>Database</span> + </div> + <div className={dashedBorderBox}> + <FlowStorageIcon width={iconSize} /> + <span>Flow Storage</span> + </div> + </div> + </div> + </div> </div> <div className={rightColumn}> <h2> <span>DEPLOYMENT MODES</span> FOR EVERY ENVIRONMENT </h2> - <TabContext value={value}> + <TabContext value={selectedTab}> <TabList - onChange={handleChange} - aria-label="Deployment options tabs" + onChange={handleTabChange} + aria-label="Scrollable deployment options tabs" + variant="scrollable" + scrollButtons={false} > <Tab label="Public Deployment" diff --git a/src/components/Homepage/DeploymentModes/styles.module.less b/src/components/Homepage/DeploymentModes/styles.module.less new file mode 100644 index 00000000..874851b7 --- /dev/null +++ b/src/components/Homepage/DeploymentModes/styles.module.less @@ -0,0 +1,205 @@ +@import '../../../globalStyles/sections.module.less'; + +.container { + .globalMaxWidth; + + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: space-between; + gap: 60px; + + h2 { + font-size: 2.5rem; + font-weight: 600; + line-height: 48px; + color: #04192B; + margin-bottom: 40px; + + span { + color: #5072EB; + } + } + + @media (max-width: 1024px) { + grid-template-columns: 1fr; + gap: 30px; + + h2 { + font-size: 2.25rem; + } + } + + @media (max-width: 360px) { + max-width: 100vw; + + h2 { + font-size: 1.5rem; + line-height: 30px; + margin-bottom: 24px; + } + } +} + +.leftColumn { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + justify-content: center; + gap: 40px; + position: relative; + max-width: 536px; + width: 100%; + margin: auto; + + div { + width: 100%; + } + + svg { + min-height: 30px; + } + + @media (max-width: 600px) { + gap: 20px; + + svg { + max-width: 20px; + max-height: 20px; + } + } + + @media (max-width: 360px) { + gap: 10px; + } +} + +.rightColumn { + @media (max-width: 360px) { + max-width: calc(100vw - 40px); + } +} + +.solidBorderBox { + border: 1px solid #A4B6F4; + border-radius: 16px; + padding: 16px; + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + height: 100%; + + @media (max-width: 600px) { + gap: 10px; + padding: 10px; + } + + @media (max-width: 450px) { + gap: 6px; + padding: 6px; + } +} + +.dashedBorderBox { + border: 1px dashed #A4B6F4B2; + border-radius: 12px; + padding: 16px; + background-color: #F5F7FF; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; + width: 100%; + height: 100%; + + @media (max-width: 600px) { + gap: 10px; + padding: 10px; + } + + @media (max-width: 450px) { + gap: 6px; + padding: 6px; + } + + span { + font-size: 0.75rem; + font-weight: 600; + line-height: 14.4px; + + @media (max-width: 600px) { + font-size: 0.6rem; + } + } +} + +.minHeight { + align-items: center; + justify-content: center; +} + +.middleTag { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + display: flex; + align-items: center; + + span { + background-color: #6ED5D6; + color: #FFFFFF; + font-size: 0.875rem; + font-weight: 700; + padding: 4px 12px; + min-width: 116px; + + @media (max-width: 600px) { + min-width: 70px; + font-size: 0.75rem; + } + } +} + +.arrowRight { + width: 0; + height: 0; + border-top: 14px solid transparent; + border-bottom: 14px solid transparent; + border-left: 14px solid #6ED5D6; +} + +.arrowLeft { + width: 0; + height: 0; + border-top: 14px solid transparent; + border-bottom: 14px solid transparent; + border-right: 14px solid #6ED5D6; +} + +.horizontalWrapper { + display: flex; + align-items: center; + gap: 16px; + + @media (max-width: 600px) { + gap: 10px; + } + + @media (max-width: 450px) { + gap: 6px; + } +} + +.secondLevelSolidBorderBox { + border-radius: 8px; + background-color: #FCFCFD; + width: 100%; + + span { + font-weight: 500; + } +} \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9adfa773..5c2c649f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -13,7 +13,7 @@ import InnovateFaster from '../components/Homepage/InnovateFaster'; import Do4xMoreWith25xLess from '../components/Homepage/Do4xMoreWith25xLess'; import WhatPeopleAreSaying from '../components/Homepage/WhatPeopleAreSaying'; import SeeHow from '../components/Homepage/SeeHow'; -import DeploymentModes from '../components/Homepage/DeployentModes'; +import DeploymentModes from '../components/Homepage/DeploymentModes'; const IndexPage = () => { return ( diff --git a/src/svgs/cloud-provider-icon.svg b/src/svgs/cloud-provider-icon.svg new file mode 100644 index 00000000..62d6c3f9 --- /dev/null +++ b/src/svgs/cloud-provider-icon.svg @@ -0,0 +1,14 @@ +<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M22.5005 15.9999C23.7155 16.001 24.8893 15.5592 25.8021 14.7574C26.715 13.9556 27.3044 12.8486 27.46 11.6437C27.6157 10.4387 27.327 9.21827 26.6479 8.21077C25.9688 7.20328 24.9459 6.47775 23.7705 6.16995C23.5809 5.63023 23.2775 5.13755 22.881 4.72524C22.4844 4.31293 22.0039 3.99062 21.472 3.78013C20.9401 3.56963 20.3691 3.47586 19.7978 3.50516C19.2265 3.53446 18.6681 3.68614 18.1605 3.94995C17.5356 2.88934 16.5991 2.04698 15.4784 1.53741C14.3578 1.02784 13.1074 0.875811 11.8973 1.10199C10.6872 1.32816 9.57612 1.92157 8.71519 2.80151C7.85426 3.68144 7.28525 4.8052 7.08554 6.01995C5.80585 6.13448 4.61936 6.73723 3.77219 7.70317C2.92502 8.6691 2.48219 9.92408 2.53557 11.2078C2.58895 12.4915 3.13444 13.7054 4.05888 14.5976C4.98332 15.4899 6.21576 15.9921 7.50054 15.9999H10.0005V13.9999H20.0005V15.9999H22.5005ZM19.0005 11.9999H10.0005V7.99995H20.0005V11.9999H19.0005Z" fill="#B8C7F7"/> +<path d="M1.5 30H2.5C2.76497 29.9992 3.01887 29.8936 3.20623 29.7062C3.3936 29.5189 3.49921 29.265 3.5 29V20C3.49921 19.735 3.3936 19.4811 3.20623 19.2938C3.01887 19.1064 2.76497 19.0008 2.5 19H1.5C1.23503 19.0008 0.981133 19.1064 0.793767 19.2938C0.606402 19.4811 0.500791 19.735 0.5 20V29C0.500791 29.265 0.606402 29.5189 0.793767 29.7062C0.981133 29.8936 1.23503 29.9992 1.5 30Z" fill="#B8C7F7"/> +<path d="M29.76 17.495C29.4964 17.0428 29.0656 16.7123 28.5605 16.5748C28.0554 16.4373 27.5165 16.5038 27.06 16.76L17.99 21.605C17.99 21.57 18 21.535 18 21.5C18 20.837 17.7366 20.2011 17.2678 19.7322C16.7989 19.2634 16.163 19 15.5 19H5.5C5.42173 19.0005 5.34466 19.0193 5.275 19.055L3.97 19.705C3.90186 19.3653 3.7182 19.0596 3.45022 18.8399C3.18225 18.6203 2.8465 18.5002 2.5 18.5H1.5C1.10254 18.5012 0.721699 18.6596 0.440651 18.9407C0.159604 19.2217 0.00118705 19.6025 0 20V29C0.00118705 29.3975 0.159604 29.7783 0.440651 30.0594C0.721699 30.3404 1.10254 30.4988 1.5 30.5H2.5C2.87249 30.4991 3.23123 30.3592 3.50593 30.1076C3.78063 29.8561 3.95148 29.511 3.985 29.14L5.38 29.485C5.41923 29.4949 5.45954 29.4999 5.5 29.5H12.37C12.8103 29.4991 13.2428 29.3837 13.625 29.165L29.035 20.22C29.4913 19.9536 29.8236 19.5176 29.9594 19.007C30.0953 18.4964 30.0236 17.9529 29.76 17.495ZM3 29C3 29.1326 2.94732 29.2598 2.85355 29.3536C2.75979 29.4473 2.63261 29.5 2.5 29.5H1.5C1.36739 29.5 1.24021 29.4473 1.14645 29.3536C1.05268 29.2598 1 29.1326 1 29V20C1 19.8674 1.05268 19.7402 1.14645 19.6464C1.24021 19.5527 1.36739 19.5 1.5 19.5H2.5C2.63261 19.5 2.75979 19.5527 2.85355 19.6464C2.94732 19.7402 3 19.8674 3 20V29ZM28.535 19.355L13.125 28.295C12.8959 28.4288 12.6354 28.4995 12.37 28.5H5.56L4 28.115V20.81L5.62 20H15.5C15.8978 20 16.2794 20.158 16.5607 20.4393C16.842 20.7206 17 21.1022 17 21.5C17 21.8978 16.842 22.2794 16.5607 22.5607C16.2794 22.842 15.8978 23 15.5 23H5.5V24H15.5C15.8828 23.999 16.2602 23.9095 16.6028 23.7387C16.9454 23.5678 17.2439 23.3202 17.475 23.015L27.545 17.635C27.7727 17.5102 28.0402 17.4796 28.2902 17.5498C28.5401 17.6199 28.7527 17.7852 28.8822 18.0103C29.0117 18.2353 29.0479 18.5021 28.983 18.7535C28.9181 19.0049 28.7573 19.2208 28.535 19.355Z" fill="#5072EB"/> +<path d="M24.1448 5.755C23.8011 4.93929 23.2246 4.24295 22.4874 3.75296C21.7502 3.26298 20.885 3.00109 19.9998 3C19.4331 2.99858 18.8713 3.10549 18.3448 3.315C17.6298 2.27436 16.6269 1.46488 15.4588 0.985724C14.2907 0.506572 13.0082 0.378566 11.7684 0.61739C10.5286 0.856215 9.38547 1.4515 8.47896 2.3303C7.57245 3.2091 6.94197 4.33325 6.66478 5.565C5.29634 5.77726 4.05832 6.49793 3.198 7.58308C2.33767 8.66823 1.91835 10.038 2.02379 11.4188C2.12923 12.7996 2.75166 14.0898 3.76677 15.0317C4.78189 15.9736 6.11497 16.498 7.49978 16.5H9.49978V18C9.49978 18.1326 9.55246 18.2598 9.64623 18.3536C9.74 18.4473 9.86718 18.5 9.99978 18.5H19.9998C20.1324 18.5 20.2596 18.4473 20.3533 18.3536C20.4471 18.2598 20.4998 18.1326 20.4998 18V16.5H22.4998C23.8125 16.4976 25.081 16.0257 26.0762 15.1697C27.0713 14.3136 27.7275 13.1299 27.9262 11.8323C28.1248 10.5348 27.8528 9.20893 27.1594 8.09438C26.4659 6.97983 25.3966 6.15006 24.1448 5.755ZM19.4998 17.5H10.4998V14.5H19.4998V17.5ZM10.4998 11.5V8.5H19.4998V11.5H10.4998ZM18.4998 12.5V13.5H11.4998V12.5H18.4998ZM22.4998 15.5H20.4998V14C20.4998 13.8674 20.4471 13.7402 20.3533 13.6464C20.2596 13.5527 20.1324 13.5 19.9998 13.5H19.4998V12.5H19.9998C20.1324 12.5 20.2596 12.4473 20.3533 12.3536C20.4471 12.2598 20.4998 12.1326 20.4998 12V8C20.4998 7.86739 20.4471 7.74021 20.3533 7.64645C20.2596 7.55268 20.1324 7.5 19.9998 7.5H9.99978C9.86718 7.5 9.74 7.55268 9.64623 7.64645C9.55246 7.74021 9.49978 7.86739 9.49978 8V12C9.49978 12.1326 9.55246 12.2598 9.64623 12.3536C9.74 12.4473 9.86718 12.5 9.99978 12.5H10.4998V13.5H9.99978C9.86718 13.5 9.74 13.5527 9.64623 13.6464C9.55246 13.7402 9.49978 13.8674 9.49978 14V15.5H7.49978C6.34723 15.487 5.24361 15.0322 4.41648 14.2295C3.58936 13.4267 3.10181 12.3372 3.05436 11.1855C3.0069 10.0339 3.40318 8.90794 4.16146 8.03986C4.91974 7.17178 5.98221 6.62777 7.12979 6.52C7.24089 6.51021 7.34554 6.46356 7.42708 6.38745C7.50862 6.31135 7.56237 6.21017 7.57978 6.1C7.76286 4.98667 8.28444 3.95676 9.0736 3.15038C9.86275 2.344 10.8812 1.80029 11.9903 1.59321C13.0994 1.38614 14.2454 1.52576 15.2723 1.99308C16.2993 2.4604 17.1573 3.23273 17.7298 4.205C17.7947 4.31497 17.8993 4.39592 18.022 4.43125C18.1447 4.46658 18.2763 4.45361 18.3898 4.395C18.886 4.13341 19.4389 3.99776 19.9998 4C20.7229 4.00112 21.428 4.22621 22.018 4.64434C22.608 5.06246 23.0541 5.65308 23.2948 6.335C23.322 6.41178 23.3678 6.48068 23.4279 6.53561C23.4881 6.59055 23.5608 6.62983 23.6398 6.65C24.6952 6.92953 25.613 7.58324 26.2222 8.48933C26.8313 9.39541 27.0903 10.4921 26.9508 11.5749C26.8113 12.6578 26.2829 13.653 25.464 14.3751C24.6451 15.0973 23.5916 15.4971 22.4998 15.5Z" fill="#5072EB"/> +<path d="M11.5 9.5H12.5V10.5H11.5V9.5Z" fill="#5072EB"/> +<path d="M14.5 9.5H15.5V10.5H14.5V9.5Z" fill="#5072EB"/> +<path d="M17.5 9.5H18.5V10.5H17.5V9.5Z" fill="#5072EB"/> +<path d="M11.5 15.5H12.5V16.5H11.5V15.5Z" fill="#5072EB"/> +<path d="M14.5 15.5H15.5V16.5H14.5V15.5Z" fill="#5072EB"/> +<path d="M17.5 15.5H18.5V16.5H17.5V15.5Z" fill="#5072EB"/> +<path d="M26 11C25.9994 10.2271 25.7428 9.47615 25.2702 8.86454C24.7976 8.25293 24.1358 7.81511 23.388 7.61951L23.135 8.58751C23.7224 8.74137 24.2336 9.10399 24.5729 9.6075C24.9122 10.111 25.0565 10.7209 24.9787 11.3231C24.9008 11.9253 24.6062 12.4785 24.15 12.8792C23.6938 13.2798 23.1072 13.5006 22.5 13.5V14.5C23.4279 14.4989 24.3176 14.1299 24.9737 13.4737C25.6299 12.8176 25.9989 11.9279 26 11Z" fill="#5072EB"/> +<path d="M7.49783 14.5001V13.5001C6.86028 13.4894 6.25094 13.2354 5.79445 12.7902C5.33797 12.345 5.06885 11.7422 5.04215 11.1051C5.01545 10.4681 5.23319 9.84486 5.65082 9.36302C6.06845 8.88119 6.65442 8.57715 7.28883 8.5131L7.20733 7.5161C6.31541 7.60102 5.49003 8.02475 4.90118 8.7C4.31233 9.37526 4.00485 10.2506 4.04209 11.1458C4.07932 12.041 4.45843 12.8878 5.10133 13.5118C5.74422 14.1358 6.60194 14.4895 7.49783 14.5001Z" fill="#5072EB"/> +</svg> diff --git a/src/svgs/control-plane-icon.svg b/src/svgs/control-plane-icon.svg new file mode 100644 index 00000000..93110307 --- /dev/null +++ b/src/svgs/control-plane-icon.svg @@ -0,0 +1,12 @@ +<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M29.58 12.505L26.475 11.99C26.2506 11.2567 25.9559 10.5467 25.595 9.87L27.43 7.305C27.4974 7.20791 27.5287 7.09034 27.5187 6.9726C27.5087 6.85485 27.4578 6.74429 27.375 6.66L23.84 3.125C23.7557 3.04217 23.6452 2.99135 23.5274 2.98131C23.4097 2.97127 23.2921 3.00264 23.195 3.07L20.63 4.905C19.9533 4.54415 19.2433 4.24945 18.51 4.025L17.995 0.920002C17.976 0.802546 17.9157 0.695729 17.8249 0.618745C17.7342 0.541762 17.619 0.499659 17.5 0.500002H12.5C12.381 0.499659 12.2658 0.541762 12.1751 0.618745C12.0843 0.695729 12.024 0.802546 12.005 0.920002L11.49 4.025C10.7567 4.24945 10.0467 4.54415 9.37 4.905L6.805 3.07C6.70791 3.00264 6.59034 2.97127 6.4726 2.98131C6.35485 2.99135 6.24429 3.04217 6.16 3.125L2.625 6.66C2.54217 6.74429 2.49135 6.85485 2.48131 6.9726C2.47127 7.09034 2.50264 7.20791 2.57 7.305L4.405 9.87C4.04415 10.5467 3.74945 11.2567 3.525 11.99L0.420002 12.505C0.302546 12.524 0.195729 12.5843 0.118745 12.6751C0.041762 12.7658 -0.000340885 12.881 2.07887e-06 13V18C-0.000340885 18.119 0.041762 18.2342 0.118745 18.3249C0.195729 18.4157 0.302546 18.476 0.420002 18.495L3.525 19.01C3.74945 19.7433 4.04415 20.4533 4.405 21.13L2.57 23.695C2.50264 23.7921 2.47127 23.9097 2.48131 24.0274C2.49135 24.1452 2.54217 24.2557 2.625 24.34L6.16 27.875C6.24429 27.9578 6.35485 28.0087 6.4726 28.0187C6.59034 28.0287 6.70791 27.9974 6.805 27.93L9.37 26.095C10.0467 26.4559 10.7567 26.7506 11.49 26.975L12.005 30.08C12.024 30.1975 12.0843 30.3043 12.1751 30.3813C12.2658 30.4582 12.381 30.5003 12.5 30.5H17.5C17.619 30.5003 17.7342 30.4582 17.8249 30.3813C17.9157 30.3043 17.976 30.1975 17.995 30.08L18.51 26.975C19.2433 26.7506 19.9533 26.4559 20.63 26.095L23.195 27.93C23.2921 27.9974 23.4097 28.0287 23.5274 28.0187C23.6452 28.0087 23.7557 27.9578 23.84 27.875L27.375 24.34C27.4578 24.2557 27.5087 24.1452 27.5187 24.0274C27.5287 23.9097 27.4974 23.7921 27.43 23.695L25.595 21.13C25.9559 20.4533 26.2506 19.7433 26.475 19.01L29.58 18.495C29.6975 18.476 29.8043 18.4157 29.8813 18.3249C29.9582 18.2342 30.0003 18.119 30 18V13C30.0003 12.881 29.9582 12.7658 29.8813 12.6751C29.8043 12.5843 29.6975 12.524 29.58 12.505ZM29 17.575L26 18.075C25.9064 18.0916 25.8192 18.1342 25.7485 18.1978C25.6778 18.2614 25.6264 18.3436 25.6 18.435C25.3614 19.303 25.0154 20.1378 24.57 20.92C24.5231 21.0027 24.501 21.097 24.5064 21.1919C24.5117 21.2868 24.5442 21.3781 24.6 21.455L26.37 23.93L23.43 26.87L20.955 25.1C20.8781 25.0441 20.7868 25.0116 20.6919 25.0063C20.597 25.0009 20.5026 25.0231 20.42 25.07C19.6378 25.5154 18.803 25.8614 17.935 26.1C17.8436 26.1264 17.7614 26.1778 17.6978 26.2485C17.6342 26.3192 17.5916 26.4064 17.575 26.5L17.075 29.5H12.925L12.425 26.5C12.4084 26.4064 12.3658 26.3192 12.3022 26.2485C12.2386 26.1778 12.1564 26.1264 12.065 26.1C11.197 25.8614 10.3623 25.5154 9.58 25.07C9.49737 25.0231 9.40297 25.0009 9.30809 25.0063C9.21321 25.0116 9.12187 25.0441 9.045 25.1L6.57 26.87L3.63 23.93L5.4 21.455C5.45582 21.3781 5.48833 21.2868 5.49365 21.1919C5.49897 21.097 5.47688 21.0027 5.43 20.92C4.98462 20.1378 4.63861 19.303 4.4 18.435C4.37363 18.3436 4.32217 18.2614 4.25147 18.1978C4.18077 18.1342 4.09365 18.0916 4 18.075L1 17.575V13.425L4 12.925C4.09365 12.9084 4.18077 12.8658 4.25147 12.8022C4.32217 12.7386 4.37363 12.6564 4.4 12.565C4.63861 11.697 4.98462 10.8623 5.43 10.08C5.47688 9.99735 5.49897 9.90296 5.49365 9.80809C5.48833 9.71323 5.45582 9.62189 5.4 9.545L3.63 7.07L6.57 4.13L9.045 5.9C9.12187 5.95588 9.21321 5.98843 9.30809 5.99375C9.40297 5.99907 9.49737 5.97694 9.58 5.93C10.3623 5.48462 11.197 5.13861 12.065 4.9C12.1564 4.87363 12.2386 4.82217 12.3022 4.75147C12.3658 4.68077 12.4084 4.59365 12.425 4.5L12.925 1.5H17.075L17.575 4.5C17.5916 4.59365 17.6342 4.68077 17.6978 4.75147C17.7614 4.82217 17.8436 4.87363 17.935 4.9C18.803 5.13861 19.6378 5.48462 20.42 5.93C20.5026 5.97694 20.597 5.99907 20.6919 5.99375C20.7868 5.98843 20.8781 5.95588 20.955 5.9L23.43 4.13L26.37 7.07L24.6 9.545C24.5442 9.62189 24.5117 9.71323 24.5064 9.80809C24.501 9.90296 24.5231 9.99735 24.57 10.08C25.0154 10.8623 25.3614 11.697 25.6 12.565C25.6264 12.6564 25.6778 12.7386 25.7485 12.8022C25.8192 12.8658 25.9064 12.9084 26 12.925L29 13.425V17.575Z" fill="#5072EB"/> +<path d="M15 5.5C15.2967 5.5 15.5867 5.41203 15.8334 5.24721C16.08 5.08238 16.2723 4.84811 16.3858 4.57403C16.4994 4.29994 16.5291 3.99834 16.4712 3.70737C16.4133 3.41639 16.2704 3.14912 16.0607 2.93934C15.8509 2.72956 15.5836 2.5867 15.2926 2.52882C15.0017 2.47094 14.7001 2.50065 14.426 2.61418C14.1519 2.72771 13.9176 2.91997 13.7528 3.16665C13.588 3.41332 13.5 3.70333 13.5 4C13.5 4.39783 13.658 4.77936 13.9393 5.06066C14.2206 5.34197 14.6022 5.5 15 5.5ZM15 3.5C15.0989 3.5 15.1956 3.52933 15.2778 3.58427C15.36 3.63921 15.4241 3.7173 15.4619 3.80866C15.4998 3.90002 15.5097 4.00056 15.4904 4.09755C15.4711 4.19454 15.4235 4.28363 15.3536 4.35355C15.2836 4.42348 15.1945 4.4711 15.0975 4.49039C15.0006 4.50969 14.9 4.49978 14.8087 4.46194C14.7173 4.4241 14.6392 4.36001 14.5843 4.27779C14.5293 4.19556 14.5 4.09889 14.5 4C14.5 3.86739 14.5527 3.74022 14.6464 3.64645C14.7402 3.55268 14.8674 3.5 15 3.5Z" fill="#5072EB"/> +<path d="M3.5 14C3.20333 14 2.91332 14.088 2.66665 14.2528C2.41997 14.4176 2.22771 14.6519 2.11418 14.926C2.00065 15.2001 1.97094 15.5017 2.02882 15.7926C2.0867 16.0836 2.22956 16.3509 2.43934 16.5607C2.64912 16.7704 2.91639 16.9133 3.20737 16.9712C3.49834 17.0291 3.79994 16.9994 4.07403 16.8858C4.34811 16.7723 4.58238 16.58 4.74721 16.3334C4.91203 16.0867 5 15.7967 5 15.5C5 15.1022 4.84197 14.7206 4.56066 14.4393C4.27936 14.158 3.89783 14 3.5 14ZM3.5 16C3.40111 16 3.30444 15.9707 3.22222 15.9157C3.13999 15.8608 3.0759 15.7827 3.03806 15.6913C3.00022 15.6 2.99032 15.4994 3.00961 15.4025C3.0289 15.3055 3.07652 15.2164 3.14645 15.1464C3.21637 15.0765 3.30547 15.0289 3.40246 15.0096C3.49945 14.9903 3.59998 15.0002 3.69134 15.0381C3.78271 15.0759 3.86079 15.14 3.91574 15.2222C3.97068 15.3044 4 15.4011 4 15.5C4 15.6326 3.94732 15.7598 3.85355 15.8536C3.75979 15.9473 3.63261 16 3.5 16Z" fill="#5072EB"/> +<path d="M15 25.5C14.7033 25.5 14.4133 25.588 14.1666 25.7528C13.92 25.9176 13.7277 26.1519 13.6142 26.426C13.5006 26.7001 13.4709 27.0017 13.5288 27.2926C13.5867 27.5836 13.7296 27.8509 13.9393 28.0607C14.1491 28.2704 14.4164 28.4133 14.7074 28.4712C14.9983 28.5291 15.2999 28.4994 15.574 28.3858C15.8481 28.2723 16.0824 28.08 16.2472 27.8334C16.412 27.5867 16.5 27.2967 16.5 27C16.5 26.6022 16.342 26.2206 16.0607 25.9393C15.7794 25.658 15.3978 25.5 15 25.5ZM15 27.5C14.9011 27.5 14.8044 27.4707 14.7222 27.4157C14.64 27.3608 14.5759 27.2827 14.5381 27.1913C14.5002 27.1 14.4903 26.9994 14.5096 26.9025C14.5289 26.8055 14.5765 26.7164 14.6464 26.6464C14.7164 26.5765 14.8055 26.5289 14.9025 26.5096C14.9994 26.4903 15.1 26.5002 15.1913 26.5381C15.2827 26.5759 15.3608 26.64 15.4157 26.7222C15.4707 26.8044 15.5 26.9011 15.5 27C15.5 27.1326 15.4473 27.2598 15.3536 27.3536C15.2598 27.4473 15.1326 27.5 15 27.5Z" fill="#5072EB"/> +<path d="M25 15.5C25 15.7967 25.088 16.0867 25.2528 16.3334C25.4176 16.58 25.6519 16.7723 25.926 16.8858C26.2001 16.9994 26.5017 17.0291 26.7926 16.9712C27.0836 16.9133 27.3509 16.7704 27.5607 16.5607C27.7704 16.3509 27.9133 16.0836 27.9712 15.7926C28.0291 15.5017 27.9994 15.2001 27.8858 14.926C27.7723 14.6519 27.58 14.4176 27.3334 14.2528C27.0867 14.088 26.7967 14 26.5 14C26.1022 14 25.7206 14.158 25.4393 14.4393C25.158 14.7206 25 15.1022 25 15.5ZM26.5 15C26.5989 15 26.6956 15.0293 26.7778 15.0843C26.86 15.1392 26.9241 15.2173 26.9619 15.3087C26.9998 15.4 27.0097 15.5006 26.9904 15.5975C26.9711 15.6945 26.9235 15.7836 26.8536 15.8536C26.7836 15.9235 26.6945 15.9711 26.5975 15.9904C26.5006 16.0097 26.4 15.9998 26.3087 15.9619C26.2173 15.9241 26.1392 15.86 26.0843 15.7778C26.0293 15.6956 26 15.5989 26 15.5C26 15.3674 26.0527 15.2402 26.1464 15.1464C26.2402 15.0527 26.3674 15 26.5 15Z" fill="#5072EB"/> +<path d="M7 9C7.29667 9 7.58668 8.91203 7.83335 8.74721C8.08003 8.58238 8.27229 8.34811 8.38582 8.07403C8.49935 7.79994 8.52906 7.49834 8.47118 7.20737C8.4133 6.91639 8.27044 6.64912 8.06066 6.43934C7.85088 6.22956 7.58361 6.0867 7.29264 6.02882C7.00166 5.97094 6.70006 6.00065 6.42597 6.11418C6.15189 6.22771 5.91762 6.41997 5.7528 6.66665C5.58797 6.91332 5.5 7.20333 5.5 7.5C5.5 7.89783 5.65804 8.27936 5.93934 8.56066C6.22064 8.84197 6.60218 9 7 9ZM7 7C7.09889 7 7.19556 7.02933 7.27779 7.08427C7.36001 7.13921 7.4241 7.2173 7.46194 7.30866C7.49978 7.40002 7.50969 7.50056 7.49039 7.59755C7.4711 7.69454 7.42348 7.78363 7.35355 7.85355C7.28363 7.92348 7.19454 7.9711 7.09755 7.99039C7.00056 8.00969 6.90002 7.99978 6.80866 7.96194C6.7173 7.9241 6.63921 7.86001 6.58427 7.77779C6.52932 7.69556 6.5 7.59889 6.5 7.5C6.5 7.36739 6.55268 7.24022 6.64645 7.14645C6.74021 7.05268 6.86739 7 7 7Z" fill="#5072EB"/> +<path d="M23 6C22.7033 6 22.4133 6.08797 22.1666 6.2528C21.92 6.41762 21.7277 6.65189 21.6142 6.92597C21.5007 7.20006 21.4709 7.50166 21.5288 7.79264C21.5867 8.08361 21.7296 8.35088 21.9393 8.56066C22.1491 8.77044 22.4164 8.9133 22.7074 8.97118C22.9983 9.02906 23.2999 8.99935 23.574 8.88582C23.8481 8.77229 24.0824 8.58003 24.2472 8.33335C24.412 8.08668 24.5 7.79667 24.5 7.5C24.5 7.10218 24.342 6.72064 24.0607 6.43934C23.7794 6.15804 23.3978 6 23 6ZM23 8C22.9011 8 22.8044 7.97068 22.7222 7.91574C22.64 7.86079 22.5759 7.7827 22.5381 7.69134C22.5002 7.59998 22.4903 7.49945 22.5096 7.40245C22.5289 7.30546 22.5765 7.21637 22.6464 7.14645C22.7164 7.07652 22.8055 7.0289 22.9025 7.00961C22.9994 6.99031 23.1 7.00022 23.1913 7.03806C23.2827 7.0759 23.3608 7.13999 23.4157 7.22221C23.4707 7.30444 23.5 7.40111 23.5 7.5C23.5 7.63261 23.4473 7.75979 23.3536 7.85355C23.2598 7.94732 23.1326 8 23 8Z" fill="#5072EB"/> +<path d="M23 22C22.7033 22 22.4133 22.088 22.1666 22.2528C21.92 22.4176 21.7277 22.6519 21.6142 22.926C21.5007 23.2001 21.4709 23.5017 21.5288 23.7926C21.5867 24.0836 21.7296 24.3509 21.9393 24.5607C22.1491 24.7704 22.4164 24.9133 22.7074 24.9712C22.9983 25.0291 23.2999 24.9994 23.574 24.8858C23.8481 24.7723 24.0824 24.58 24.2472 24.3334C24.412 24.0867 24.5 23.7967 24.5 23.5C24.5 23.1022 24.342 22.7206 24.0607 22.4393C23.7794 22.158 23.3978 22 23 22ZM23 24C22.9011 24 22.8044 23.9707 22.7222 23.9157C22.64 23.8608 22.5759 23.7827 22.5381 23.6913C22.5002 23.6 22.4903 23.4994 22.5096 23.4025C22.5289 23.3055 22.5765 23.2164 22.6464 23.1464C22.7164 23.0765 22.8055 23.0289 22.9025 23.0096C22.9994 22.9903 23.1 23.0002 23.1913 23.0381C23.2827 23.0759 23.3608 23.14 23.4157 23.2222C23.4707 23.3044 23.5 23.4011 23.5 23.5C23.5 23.6326 23.4473 23.7598 23.3536 23.8536C23.2598 23.9473 23.1326 24 23 24Z" fill="#5072EB"/> +<path d="M7 22C6.70333 22 6.41332 22.088 6.16665 22.2528C5.91997 22.4176 5.72771 22.6519 5.61418 22.926C5.50065 23.2001 5.47094 23.5017 5.52882 23.7926C5.5867 24.0836 5.72956 24.3509 5.93934 24.5607C6.14912 24.7704 6.41639 24.9133 6.70737 24.9712C6.99834 25.0291 7.29994 24.9994 7.57403 24.8858C7.84811 24.7723 8.08238 24.58 8.24721 24.3334C8.41203 24.0867 8.5 23.7967 8.5 23.5C8.5 23.1022 8.34197 22.7206 8.06066 22.4393C7.77936 22.158 7.39783 22 7 22ZM7 24C6.90111 24 6.80444 23.9707 6.72222 23.9157C6.63999 23.8608 6.5759 23.7827 6.53806 23.6913C6.50022 23.6 6.49032 23.4994 6.50961 23.4025C6.5289 23.3055 6.57652 23.2164 6.64645 23.1464C6.71637 23.0765 6.80547 23.0289 6.90246 23.0096C6.99945 22.9903 7.09998 23.0002 7.19134 23.0381C7.28271 23.0759 7.3608 23.14 7.41574 23.2222C7.47068 23.3044 7.5 23.4011 7.5 23.5C7.5 23.6326 7.44732 23.7598 7.35355 23.8536C7.25979 23.9473 7.13261 24 7 24Z" fill="#5072EB"/> +<path d="M15 6C13.1211 6 11.2844 6.55717 9.72209 7.60104C8.15982 8.64491 6.94218 10.1286 6.22315 11.8645C5.50412 13.6004 5.31598 15.5105 5.68254 17.3534C6.0491 19.1962 6.95389 20.8889 8.28249 22.2175C9.61109 23.5461 11.3038 24.4509 13.1466 24.8175C14.9895 25.184 16.8996 24.9959 18.6355 24.2769C20.3714 23.5578 21.8551 22.3402 22.899 20.7779C23.9428 19.2157 24.5 17.3789 24.5 15.5C24.4978 12.9811 23.4961 10.5661 21.715 8.78497C19.9339 7.00386 17.5189 6.00225 15 6ZM19 22.995C17.77 23.6548 16.3958 24 15 24C13.6042 24 12.23 23.6548 11 22.995V22H19V22.995ZM19 21H11V19H19V21ZM19 18H11V16H19V18ZM11.5 15C11.2374 15.0016 10.977 14.9515 10.7337 14.8525C10.4904 14.7535 10.269 14.6076 10.0821 14.4231C9.70471 14.0503 9.49082 13.5429 9.4875 13.0125C9.48586 12.7499 9.53597 12.4895 9.63496 12.2462C9.73395 12.0029 9.8799 11.7815 10.0645 11.5946C10.249 11.4077 10.4686 11.2591 10.7106 11.157C10.9526 11.055 11.2124 11.0016 11.475 11C11.4998 11.004 11.5249 11.0057 11.55 11.005C11.6653 11.005 11.777 10.9652 11.8663 10.8923C11.9556 10.8194 12.017 10.7179 12.04 10.605C12.1187 10.2104 12.3149 9.84875 12.6028 9.56763C12.8907 9.28651 13.2569 9.09903 13.6533 9.02981C14.0497 8.96058 14.4578 9.01286 14.8239 9.17976C15.1901 9.34666 15.4972 9.62039 15.705 9.965C15.7688 10.0721 15.8707 10.1511 15.9903 10.1863C16.1099 10.2215 16.2383 10.2104 16.35 10.155C16.5778 10.042 16.8308 9.9892 17.0848 10.0017C17.3388 10.0142 17.5854 10.0916 17.801 10.2265C18.0166 10.3614 18.194 10.5492 18.3164 10.7722C18.4388 10.9951 18.502 11.2457 18.5 11.5C18.5 11.6326 18.5527 11.7598 18.6465 11.8536C18.7402 11.9473 18.8674 12 19 12C19.3978 12 19.7794 12.158 20.0607 12.4393C20.342 12.7206 20.5 13.1022 20.5 13.5C20.5 13.8978 20.342 14.2794 20.0607 14.5607C19.7794 14.842 19.3978 15 19 15H11.5ZM20 22.36V15.79C20.4907 15.5764 20.8999 15.211 21.1674 14.7476C21.4349 14.2841 21.5467 13.7471 21.4862 13.2153C21.4258 12.6836 21.1963 12.1854 20.8316 11.7938C20.4669 11.4022 19.9861 11.138 19.46 11.04C19.3967 10.6971 19.2622 10.3714 19.0651 10.0837C18.8681 9.79612 18.6129 9.55304 18.316 9.37021C18.0191 9.18737 17.6872 9.06885 17.3417 9.02231C16.9961 8.97577 16.6447 9.00223 16.31 9.1C16.0319 8.75543 15.6799 8.47771 15.2801 8.28733C14.8803 8.09694 14.4428 7.99875 14 8C13.3765 8.00185 12.7689 8.19716 12.2611 8.55898C11.7533 8.92079 11.3704 9.43128 11.165 10.02C10.5374 10.0899 9.94795 10.3563 9.48072 10.7811C9.0135 11.2059 8.69239 11.7674 8.56322 12.3855C8.43406 13.0037 8.50343 13.6468 8.76145 14.2231C9.01946 14.7995 9.45293 15.2796 10 15.595V22.36C8.54871 21.3043 7.46878 19.8164 6.91493 18.1094C6.36107 16.4024 6.36171 14.5639 6.91675 12.8572C7.4718 11.1506 8.55276 9.66345 10.0048 8.6088C11.4568 7.55415 13.2054 6.98614 15 6.98614C16.7946 6.98614 18.5432 7.55415 19.9952 8.6088C21.4472 9.66345 22.5282 11.1506 23.0833 12.8572C23.6383 14.5639 23.6389 16.4024 23.0851 18.1094C22.5312 19.8164 21.4513 21.3043 20 22.36Z" fill="#5072EB"/> +</svg> diff --git a/src/svgs/customer-cloud-icon.svg b/src/svgs/customer-cloud-icon.svg new file mode 100644 index 00000000..78a8c3ee --- /dev/null +++ b/src/svgs/customer-cloud-icon.svg @@ -0,0 +1,10 @@ +<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M28 30.0001C28.8284 30.0001 29.5 29.3285 29.5 28.5001C29.5 27.6716 28.8284 27.0001 28 27.0001C27.1716 27.0001 26.5 27.6716 26.5 28.5001C26.5 29.3285 27.1716 30.0001 28 30.0001Z" fill="#B8C7F7"/> +<path d="M23.885 6.09507C23.7477 5.51374 23.4815 4.9707 23.106 4.5061C22.7306 4.04149 22.2556 3.66719 21.716 3.41086C21.1765 3.15453 20.5862 3.02272 19.9889 3.02518C19.3916 3.02764 18.8024 3.16431 18.265 3.42507C17.441 2.47821 16.3771 1.77084 15.1851 1.37733C13.9931 0.983826 12.7172 0.918716 11.4914 1.18885C10.2655 1.45898 9.13513 2.05437 8.21898 2.91244C7.30282 3.7705 6.63477 4.85954 6.28503 6.06507C4.76322 6.23221 3.34939 6.93164 2.29314 8.03987C1.23688 9.14811 0.60613 10.5939 0.512232 12.122C0.418334 13.65 0.867328 15.1622 1.77995 16.3914C2.69257 17.6206 4.01013 18.4879 5.50003 18.8401C5.8283 18.9213 6.16281 18.9748 6.50003 19.0001H9.54003C9.18331 18.215 8.99917 17.3624 9.00003 16.5001V13.5001H8.00003V12.5001C8.00003 10.6436 8.73753 8.86308 10.0503 7.55033C11.363 6.23757 13.1435 5.50007 15 5.50007C16.8565 5.50007 18.637 6.23757 19.9498 7.55033C21.2625 8.86308 22 10.6436 22 12.5001V13.5001H21V16.5001C21.0009 17.3624 20.8168 18.215 20.46 19.0001H23.5C23.8373 18.9748 24.1718 18.9213 24.5 18.8401C25.9754 18.4924 27.2825 17.6392 28.1945 16.4284C29.1065 15.2177 29.5658 13.7258 29.4928 12.2118C29.4197 10.6978 28.8189 9.2571 27.7946 8.1398C26.7702 7.02249 25.387 6.29907 23.885 6.09507Z" fill="#B8C7F7"/> +<path d="M16 22.5001H15H14V25.0001L15 27.0001L16 25.0001V22.5001Z" fill="#B8C7F7"/> +<path d="M2 30.0001C2.82843 30.0001 3.5 29.3285 3.5 28.5001C3.5 27.6716 2.82843 27.0001 2 27.0001C1.17157 27.0001 0.5 27.6716 0.5 28.5001C0.5 29.3285 1.17157 30.0001 2 30.0001Z" fill="#B8C7F7"/> +<path d="M15 20C14.4696 20 13.9609 19.7893 13.5858 19.4142C13.2107 19.0391 13 18.5304 13 18H12C12 18.7956 12.3161 19.5587 12.8787 20.1213C13.4413 20.6839 14.2044 21 15 21C15.7956 21 16.5587 20.6839 17.1213 20.1213C17.6839 19.5587 18 18.7956 18 18H17C17 18.5304 16.7893 19.0391 16.4142 19.4142C16.0391 19.7893 15.5304 20 15 20Z" fill="#5072EB"/> +<path d="M12 14H13V16H12V14Z" fill="#5072EB"/> +<path d="M17 14H18V16H17V14Z" fill="#5072EB"/> +<path d="M27.9987 26.5001C27.5564 26.5015 27.1271 26.6495 26.7779 26.9209C26.4286 27.1923 26.1792 27.5719 26.0687 28.0001H24.9987V19.2201C26.5038 18.7738 27.8147 17.8337 28.7201 16.5512C29.6256 15.2688 30.0727 13.7188 29.9896 12.1512C29.9064 10.5835 29.2977 9.08958 28.2616 7.91017C27.2256 6.73075 25.8225 5.93461 24.2787 5.65009C23.9907 4.74152 23.4203 3.94854 22.6506 3.3865C21.8808 2.82446 20.9518 2.52269 19.9987 2.52509C19.4496 2.52352 18.9051 2.6253 18.3937 2.82509C17.5029 1.89778 16.3883 1.21553 15.1573 0.844078C13.9263 0.47263 12.6203 0.424508 11.3653 0.70435C10.1103 0.984192 8.94849 1.58256 7.99189 2.44181C7.03529 3.30105 6.31612 4.39219 5.90368 5.61009C4.33695 5.85628 2.90053 6.62798 1.83034 7.79843C0.76016 8.96888 0.11985 10.4685 0.0145859 12.051C-0.0906786 13.6334 0.345361 15.2046 1.25109 16.5065C2.15681 17.8084 3.47836 18.7636 4.99868 19.2151V28.0001H3.92868C3.80698 27.5288 3.51756 27.118 3.11468 26.8448C2.71179 26.5716 2.22309 26.4547 1.74018 26.516C1.25727 26.5774 0.813313 26.8127 0.491518 27.178C0.169724 27.5432 -0.0078125 28.0133 -0.0078125 28.5001C-0.0078125 28.9869 0.169724 29.457 0.491518 29.8222C0.813313 30.1875 1.25727 30.4228 1.74018 30.4842C2.22309 30.5455 2.71179 30.4286 3.11468 30.1554C3.51756 29.8822 3.80698 29.4714 3.92868 29.0001H5.49868C5.63129 29.0001 5.75846 28.9474 5.85223 28.8536C5.946 28.7599 5.99868 28.6327 5.99868 28.5001V19.4401C6.16368 19.4601 6.32868 19.4851 6.49868 19.5001H9.23868C9.7743 20.5229 10.5713 21.3855 11.5487 22.0001H11.4987C10.3058 22.0019 9.16226 22.4766 8.31874 23.3202C7.47523 24.1637 7.00053 25.3072 6.99868 26.5001V30.0001C6.99868 30.1327 7.05136 30.2599 7.14513 30.3536C7.23889 30.4474 7.36607 30.5001 7.49868 30.5001H22.4987C22.6313 30.5001 22.7585 30.4474 22.8522 30.3536C22.946 30.2599 22.9987 30.1327 22.9987 30.0001V26.5001C22.9968 25.3072 22.5221 24.1637 21.6786 23.3202C20.8351 22.4766 19.6916 22.0019 18.4987 22.0001H18.4487C19.426 21.3855 20.2231 20.5229 20.7587 19.5001H23.5387C23.6937 19.4851 23.8437 19.4651 23.9987 19.4401V28.5001C23.9987 28.6327 24.0514 28.7599 24.1451 28.8536C24.2389 28.9474 24.3661 29.0001 24.4987 29.0001H26.0687C26.1627 29.3615 26.3563 29.6893 26.6273 29.9463C26.8983 30.2032 27.2359 30.379 27.6018 30.4537C27.9677 30.5284 28.3472 30.499 28.6973 30.3689C29.0473 30.2387 29.3538 30.013 29.582 29.7174C29.8103 29.4218 29.951 29.0681 29.9883 28.6966C30.0256 28.325 29.958 27.9504 29.7931 27.6153C29.6282 27.2802 29.3726 26.9981 29.0554 26.801C28.7382 26.6038 28.3721 26.4996 27.9987 26.5001ZM1.99868 29.5001C1.8009 29.5001 1.60756 29.4414 1.44311 29.3316C1.27866 29.2217 1.15049 29.0655 1.0748 28.8828C0.999112 28.7 0.979309 28.499 1.01789 28.305C1.05648 28.111 1.15172 27.9328 1.29157 27.793C1.43142 27.6531 1.60961 27.5579 1.80359 27.5193C1.99757 27.4807 2.19864 27.5005 2.38136 27.5762C2.56409 27.6519 2.72027 27.7801 2.83015 27.9445C2.94003 28.109 2.99868 28.3023 2.99868 28.5001C2.99789 28.7651 2.89228 29.019 2.70491 29.2063C2.51755 29.3937 2.26365 29.4993 1.99868 29.5001ZM18.4987 23.0001C19.4266 23.0012 20.3162 23.3702 20.9724 24.0264C21.6285 24.6825 21.9976 25.5722 21.9987 26.5001V29.5001H19.9987V27.5001H18.9987V29.5001H10.9987V27.5001H9.99868V29.5001H7.99868V26.5001C7.99974 25.5722 8.36883 24.6825 9.02497 24.0264C9.68112 23.3702 10.5707 23.0012 11.4987 23.0001H13.4987V25.0001C13.4991 25.0784 13.518 25.1554 13.5537 25.2251L14.5537 27.2251C14.5956 27.307 14.6594 27.3757 14.7379 27.4237C14.8164 27.4717 14.9067 27.4971 14.9987 27.4971C15.0907 27.4971 15.1809 27.4717 15.2595 27.4237C15.338 27.3757 15.4017 27.307 15.4437 27.2251L16.4437 25.2251C16.4794 25.1554 16.4982 25.0784 16.4987 25.0001V23.0001H18.4987ZM14.4987 24.8801V23.0001H15.4987V24.8801L14.9987 25.8801L14.4987 24.8801ZM20.4987 16.5001C20.4987 17.9588 19.9192 19.3577 18.8878 20.3892C17.8563 21.4206 16.4574 22.0001 14.9987 22.0001C13.54 22.0001 12.141 21.4206 11.1096 20.3892C10.0781 19.3577 9.49868 17.9588 9.49868 16.5001V13.8601L16.9837 11.3651C17.2481 11.2765 17.532 11.2637 17.8034 11.3282C18.0747 11.3927 18.3225 11.5319 18.5187 11.7301L20.4987 13.7051V16.5001ZM19.2287 11.0201C18.901 10.6904 18.4875 10.459 18.0351 10.352C17.5826 10.2451 17.1093 10.267 16.6687 10.4151L8.91868 13.0001H8.49868V12.5001C8.49868 10.7762 9.1835 9.12288 10.4025 7.9039C11.6215 6.68491 13.2748 6.00009 14.9987 6.00009C16.7226 6.00009 18.3759 6.68491 19.5949 7.9039C20.8139 9.12288 21.4987 10.7762 21.4987 12.5001V13.0001H21.2037L19.2287 11.0201ZM23.4987 18.5001H21.1787C21.3901 17.8545 21.4981 17.1795 21.4987 16.5001V14.0001H21.9987C22.1313 14.0001 22.2585 13.9474 22.3522 13.8536C22.446 13.7599 22.4987 13.6327 22.4987 13.5001V12.5001C22.4987 10.511 21.7085 8.60331 20.302 7.19679C18.8955 5.79027 16.9878 5.00009 14.9987 5.00009C13.0096 5.00009 11.1019 5.79027 9.69538 7.19679C8.28886 8.60331 7.49868 10.511 7.49868 12.5001V13.5001C7.49868 13.6327 7.55136 13.7599 7.64513 13.8536C7.73889 13.9474 7.86607 14.0001 7.99868 14.0001H8.49868V16.5001C8.49926 17.1795 8.60726 17.8545 8.81868 18.5001H6.53868C5.04854 18.3869 3.65435 17.7214 2.62929 16.634C1.60422 15.5465 1.02215 14.1155 0.99712 12.6212C0.972091 11.127 1.50591 9.67729 2.49398 8.55612C3.48205 7.43494 4.85316 6.72311 6.33868 6.56009C6.43694 6.55035 6.53001 6.51129 6.6058 6.44798C6.68159 6.38468 6.73659 6.30005 6.76368 6.20509C7.0884 5.08553 7.7088 4.07415 8.55964 3.27732C9.41048 2.48049 10.4603 1.92765 11.5987 1.67694C12.7372 1.42623 13.9221 1.48692 15.029 1.85261C16.1358 2.21831 17.1237 2.87551 17.8887 3.75509C17.9606 3.83816 18.058 3.89502 18.1657 3.91673C18.2734 3.93845 18.3852 3.92381 18.4837 3.87509C18.9555 3.64466 19.4736 3.52496 19.9987 3.52509C20.7851 3.52372 21.549 3.78821 22.1662 4.27562C22.7834 4.76303 23.2177 5.44474 23.3987 6.21009C23.4215 6.30876 23.4739 6.39808 23.549 6.46602C23.6241 6.53396 23.7182 6.57726 23.8187 6.59009C25.2811 6.79066 26.6181 7.52389 27.5733 8.64924C28.5285 9.77459 29.0349 11.2129 28.9952 12.6885C28.9556 14.1641 28.3727 15.5731 27.3585 16.6455C26.3442 17.718 24.9698 18.3783 23.4987 18.5001ZM27.9987 29.5001C27.8009 29.5001 27.6076 29.4414 27.4431 29.3316C27.2787 29.2217 27.1505 29.0655 27.0748 28.8828C26.9991 28.7 26.9793 28.499 27.0179 28.305C27.0565 28.111 27.1517 27.9328 27.2916 27.793C27.4314 27.6531 27.6096 27.5579 27.8036 27.5193C27.9976 27.4807 28.1986 27.5005 28.3814 27.5762C28.5641 27.6519 28.7203 27.7801 28.8302 27.9445C28.94 28.109 28.9987 28.3023 28.9987 28.5001C28.9979 28.7651 28.8923 29.019 28.7049 29.2063C28.5175 29.3937 28.2637 29.4993 27.9987 29.5001Z" fill="#5072EB"/> +</svg> diff --git a/src/svgs/customer-vpc-icon.svg b/src/svgs/customer-vpc-icon.svg new file mode 100644 index 00000000..37fdf899 --- /dev/null +++ b/src/svgs/customer-vpc-icon.svg @@ -0,0 +1,3 @@ +<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M28.5011 22.4999V21.9999C28.5011 21.3369 28.2377 20.701 27.7689 20.2322C27.3 19.7633 26.6641 19.4999 26.0011 19.4999C25.458 19.5015 24.9306 19.6825 24.5011 20.0149V19.3299C26.0785 18.9858 27.4882 18.1063 28.4908 16.8408C29.4934 15.5752 30.027 14.0017 30.0011 12.3874C29.9752 10.7731 29.3913 9.21748 28.3486 7.98478C27.306 6.75208 25.8688 5.91827 24.2811 5.62495C23.9931 4.71638 23.4228 3.92339 22.653 3.36135C21.8832 2.79931 20.9542 2.49754 20.0011 2.49995C19.452 2.49838 18.9075 2.60015 18.3961 2.79995C17.5053 1.87263 16.3907 1.19038 15.1597 0.818931C13.9287 0.447483 12.6227 0.399361 11.3677 0.679204C10.1127 0.959046 8.95091 1.55742 7.99431 2.41666C7.03771 3.2759 6.31854 4.36705 5.9061 5.58495C4.29488 5.83906 2.8231 6.64818 1.74521 7.87242C0.667315 9.09665 0.051078 10.659 0.00303706 12.2895C-0.0450039 13.9199 0.478171 15.5159 1.48211 16.8015C2.48605 18.087 3.90764 18.9814 5.5011 19.3299V27.9999C5.5011 29.9749 11.4711 30.4999 15.0011 30.4999C17.4214 30.5456 19.8377 30.2818 22.1911 29.7149C22.3189 29.9513 22.508 30.1489 22.7385 30.2871C22.969 30.4252 23.2324 30.4987 23.5011 30.4999H28.5011C28.8986 30.4988 29.2794 30.3403 29.5604 30.0593C29.8415 29.7782 29.9999 29.3974 30.0011 28.9999V23.9999C29.9999 23.6025 29.8415 23.2216 29.5604 22.9406C29.2794 22.6595 28.8986 22.5011 28.5011 22.4999ZM26.0011 20.4999C26.3986 20.5011 26.7794 20.6595 27.0604 20.9406C27.3415 21.2216 27.4999 21.6025 27.5011 21.9999V22.4999H24.5011V21.9999C24.5023 21.6025 24.6607 21.2216 24.9418 20.9406C25.2228 20.6595 25.6036 20.5011 26.0011 20.4999ZM5.5011 15.9999V18.3049C4.14409 17.9525 2.95335 17.136 2.13561 15.9971C1.31788 14.8582 0.924791 13.469 1.0246 12.0705C1.1244 10.672 1.7108 9.35265 2.68198 8.34146C3.65316 7.33026 4.94779 6.6911 6.3411 6.53495C6.43937 6.5252 6.53243 6.48614 6.60822 6.42284C6.68401 6.35953 6.73901 6.27491 6.7661 6.17995C7.09082 5.06038 7.71123 4.04901 8.56206 3.25217C9.4129 2.45534 10.4627 1.9025 11.6012 1.65179C12.7396 1.40108 13.9245 1.46177 15.0314 1.82747C16.1383 2.19317 17.1261 2.85036 17.8911 3.72995C17.963 3.81302 18.0604 3.86987 18.1681 3.89159C18.2758 3.91331 18.3876 3.89866 18.4861 3.84995C18.9579 3.61952 19.476 3.49981 20.0011 3.49995C20.7868 3.49849 21.55 3.76233 22.1671 4.24873C22.7842 4.73513 23.219 5.41561 23.4011 6.17995C23.4242 6.27762 23.4761 6.36609 23.5501 6.43387C23.6241 6.50164 23.7168 6.54557 23.8161 6.55995C25.193 6.74749 26.4621 7.40761 27.4061 8.4274C28.3501 9.44718 28.9105 10.7633 28.9914 12.1506C29.0723 13.5379 28.6687 14.9102 27.8497 16.0328C27.0306 17.1554 25.8469 17.9586 24.5011 18.3049V15.9999C24.5011 14.0249 18.5311 13.4999 15.0011 13.4999C11.4711 13.4999 5.5011 14.0249 5.5011 15.9999ZM23.5011 15.9949C23.3311 16.5249 20.2861 17.4999 15.0011 17.4999C9.7161 17.4999 6.6611 16.5199 6.5011 16.0049C6.6711 15.4749 9.7161 14.4999 15.0011 14.4999C20.2861 14.4999 23.3411 15.4749 23.5011 15.9949ZM22.0011 23.9999V28.7299C19.7109 29.2886 17.3579 29.5474 15.0011 29.4999C9.6961 29.4999 6.6461 28.5199 6.5011 27.9999V23.2299C8.3511 24.2049 12.3611 24.4999 15.0011 24.4999C17.3632 24.53 19.7207 24.285 22.0261 23.7699C22.0101 23.8456 22.0017 23.9226 22.0011 23.9999ZM15.0011 23.4999C9.6961 23.4999 6.6461 22.5199 6.5011 21.9999V17.2299C8.3511 18.2049 12.3611 18.4999 15.0011 18.4999C17.6411 18.4999 21.6511 18.2049 23.5011 17.2299V21.9949C23.3461 22.5199 20.2961 23.4999 15.0011 23.4999ZM29.0011 28.9999C29.0011 29.1326 28.9484 29.2597 28.8547 29.3535C28.7609 29.4473 28.6337 29.4999 28.5011 29.4999H23.5011C23.3685 29.4999 23.2413 29.4473 23.1475 29.3535C23.0538 29.2597 23.0011 29.1326 23.0011 28.9999V23.9999C23.0011 23.8673 23.0538 23.7402 23.1475 23.6464C23.2413 23.5526 23.3685 23.4999 23.5011 23.4999H28.5011C28.6337 23.4999 28.7609 23.5526 28.8547 23.6464C28.9484 23.7402 29.0011 23.8673 29.0011 23.9999V28.9999Z" fill="#5072EB"/> +</svg> diff --git a/src/svgs/database-icon.svg b/src/svgs/database-icon.svg new file mode 100644 index 00000000..e3767938 --- /dev/null +++ b/src/svgs/database-icon.svg @@ -0,0 +1,23 @@ +<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M22.4414 21.2324L21.7344 21.9394L23.1484 23.3534C23.2421 23.4472 23.3693 23.4998 23.5019 23.4998C23.6345 23.4998 23.7616 23.4472 23.8554 23.3534L26.6839 20.5249L25.9769 19.8179L23.5019 22.2929L22.4414 21.2324Z" fill="#5072EB"/> +<path d="M29.6894 17.04L28.6644 16.61C29.3584 15.6545 29.7991 14.5388 29.9454 13.3669C30.0917 12.195 29.9388 11.0052 29.5009 9.90836C29.0631 8.81155 28.3546 7.84349 27.4416 7.09449C26.5285 6.34549 25.4406 5.83994 24.2794 5.62501C23.9914 4.71644 23.421 3.92345 22.6513 3.36141C21.8815 2.79937 20.9525 2.49761 19.9994 2.50001C19.4503 2.49844 18.9058 2.60021 18.3944 2.80001C17.5036 1.87269 16.389 1.19044 15.158 0.818992C13.9269 0.447544 12.621 0.399422 11.366 0.679265C10.111 0.959107 8.94918 1.55748 7.99257 2.41672C7.03597 3.27596 6.3168 4.36711 5.90436 5.58501C4.22729 5.85467 2.70549 6.72493 1.62259 8.0336C0.53969 9.34227 -0.0304143 11 0.0185344 12.698C0.067483 14.3959 0.732145 16.018 1.88864 17.2622C3.04513 18.5063 4.61454 19.2874 6.30436 19.46C6.36605 19.4862 6.43235 19.4998 6.49936 19.5V22C6.49936 22.1326 6.55204 22.2598 6.64581 22.3536C6.73958 22.4473 6.86675 22.5 6.99936 22.5H8.49936V23.5H6.99936C6.86675 23.5 6.73958 23.5527 6.64581 23.6465C6.55204 23.7402 6.49936 23.8674 6.49936 24V30C6.49936 30.1326 6.55204 30.2598 6.64581 30.3536C6.73958 30.4473 6.86675 30.5 6.99936 30.5H22.9994C23.0877 30.4965 23.1737 30.4707 23.2494 30.425C23.3246 30.4717 23.4109 30.4976 23.4994 30.5C23.632 30.4995 23.7593 30.4475 23.8544 30.355L28.3894 25.82C28.9018 25.3104 29.3079 24.7041 29.5843 24.0364C29.8607 23.3686 30.0017 22.6527 29.9994 21.93V17.5C29.9997 17.4011 29.9704 17.3044 29.9151 17.2223C29.8598 17.1403 29.7812 17.0768 29.6894 17.04ZM6.49936 16V18.47C5.01354 18.3474 3.62671 17.6756 2.60947 16.5857C1.59222 15.4957 1.01754 14.0659 0.997555 12.5752C0.97757 11.0845 1.51372 9.63975 2.50138 8.52296C3.48904 7.40617 4.85736 6.69742 6.33936 6.53501C6.43763 6.52526 6.53069 6.4862 6.60648 6.4229C6.68227 6.35959 6.73728 6.27497 6.76436 6.18001C7.08909 5.06044 7.70949 4.04907 8.56033 3.25224C9.41117 2.4554 10.461 1.90256 11.5994 1.65186C12.7379 1.40115 13.9228 1.46183 15.0297 1.82753C16.1365 2.19323 17.1244 2.85042 17.8894 3.73001C17.9612 3.81308 18.0587 3.86993 18.1664 3.89165C18.2741 3.91337 18.3859 3.89872 18.4844 3.85001C18.9562 3.61958 19.4743 3.49987 19.9994 3.50001C20.7851 3.49855 21.5483 3.76239 22.1654 4.24879C22.7825 4.73519 23.2173 5.41567 23.3994 6.18001C23.4224 6.27768 23.4743 6.36616 23.5483 6.43393C23.6223 6.5017 23.715 6.54563 23.8144 6.56001C25.2484 6.76127 26.5619 7.47253 27.5142 8.56346C28.4664 9.65439 28.9937 11.0519 28.9994 12.5C28.9997 13.8476 28.5432 15.1554 27.7044 16.21L23.6894 14.54C23.6297 14.5128 23.5649 14.4987 23.4994 14.4987C23.4338 14.4987 23.369 14.5128 23.3094 14.54L21.4994 15.29V14.5H22.9994C23.132 14.5 23.2591 14.4473 23.3529 14.3536C23.4467 14.2598 23.4994 14.1326 23.4994 14V8.00001C23.4994 7.8674 23.4467 7.74022 23.3529 7.64645C23.2591 7.55269 23.132 7.50001 22.9994 7.50001H6.99936C6.86675 7.50001 6.73958 7.55269 6.64581 7.64645C6.55204 7.74022 6.49936 7.8674 6.49936 8.00001V14C6.49936 14.1326 6.55204 14.2598 6.64581 14.3536C6.73958 14.4473 6.86675 14.5 6.99936 14.5H8.49936V15.5H6.99936C6.86675 15.5 6.73958 15.5527 6.64581 15.6465C6.55204 15.7402 6.49936 15.8674 6.49936 16ZM7.49936 13.5V8.50001H22.4994V13.5H7.49936ZM20.4994 14.5V15.5H9.49936V14.5H20.4994ZM7.49936 21.5V16.5H18.5994L17.3094 17.04C17.2175 17.0768 17.1389 17.1403 17.0836 17.2223C17.0283 17.3044 16.999 17.4011 16.9994 17.5V21.5H7.49936ZM17.2294 23.5H9.49936V22.5H17.0294C17.0632 22.8391 17.1302 23.174 17.2294 23.5ZM7.49936 29.5V24.5H17.6344C17.892 24.986 18.2206 25.4309 18.6094 25.82L22.2944 29.5H7.49936ZM28.9994 21.93C29.0004 22.521 28.8843 23.1063 28.6577 23.6522C28.4312 24.198 28.0986 24.6935 27.6794 25.11L23.4994 29.295L19.3194 25.11C18.9001 24.6935 18.5675 24.198 18.341 23.6522C18.1144 23.1063 17.9983 22.521 17.9994 21.93V17.835L23.4994 15.54L28.9994 17.835V21.93Z" fill="#5072EB"/> +<path d="M28.19 18.04L23.69 16.165C23.6304 16.1378 23.5656 16.1237 23.5 16.1237C23.4345 16.1237 23.3697 16.1378 23.31 16.165L18.81 18.04C18.7182 18.0768 18.6395 18.1403 18.5843 18.2223C18.529 18.3044 18.4996 18.4011 18.5 18.5V21.93C18.4987 22.4549 18.6014 22.9747 18.8022 23.4596C19.0031 23.9445 19.298 24.3848 19.67 24.755L23.145 28.23C23.1911 28.2775 23.2463 28.3152 23.3073 28.341C23.3683 28.3668 23.4338 28.3801 23.5 28.3801C23.5662 28.3801 23.6317 28.3668 23.6927 28.341C23.7537 28.3152 23.8089 28.2775 23.855 28.23L27.33 24.755C27.702 24.3848 27.997 23.9445 28.1978 23.4596C28.3986 22.9747 28.5013 22.4549 28.5 21.93V18.5C28.5004 18.4011 28.471 18.3044 28.4158 18.2223C28.3605 18.1403 28.2818 18.0768 28.19 18.04ZM27.5 21.93C27.5016 22.3241 27.4247 22.7146 27.2736 23.0787C27.1225 23.4427 26.9003 23.7729 26.62 24.05L23.5 27.17L20.38 24.05C20.0997 23.7729 19.8776 23.4427 19.7265 23.0787C19.5754 22.7146 19.4984 22.3241 19.5 21.93V18.835L23.5 17.165L27.5 18.835V21.93Z" fill="#5072EB"/> +<path d="M10 9.5C9.70333 9.5 9.41332 9.58797 9.16665 9.7528C8.91997 9.91762 8.72771 10.1519 8.61418 10.426C8.50065 10.7001 8.47094 11.0017 8.52882 11.2926C8.5867 11.5836 8.72956 11.8509 8.93934 12.0607C9.14912 12.2704 9.41639 12.4133 9.70736 12.4712C9.99834 12.5291 10.2999 12.4994 10.574 12.3858C10.8481 12.2723 11.0824 12.08 11.2472 11.8334C11.412 11.5867 11.5 11.2967 11.5 11C11.5 10.6022 11.342 10.2206 11.0607 9.93934C10.7794 9.65804 10.3978 9.5 10 9.5ZM10 11.5C9.90111 11.5 9.80444 11.4707 9.72222 11.4157C9.63999 11.3608 9.5759 11.2827 9.53806 11.1913C9.50022 11.1 9.49032 10.9994 9.50961 10.9025C9.5289 10.8055 9.57652 10.7164 9.64645 10.6464C9.71637 10.5765 9.80546 10.5289 9.90246 10.5096C9.99945 10.4903 10.1 10.5002 10.1913 10.5381C10.2827 10.5759 10.3608 10.64 10.4157 10.7222C10.4707 10.8044 10.5 10.9011 10.5 11C10.5 11.1326 10.4473 11.2598 10.3536 11.3536C10.2598 11.4473 10.1326 11.5 10 11.5Z" fill="#5072EB"/> +<path d="M14 9.5C13.7033 9.5 13.4133 9.58797 13.1666 9.7528C12.92 9.91762 12.7277 10.1519 12.6142 10.426C12.5006 10.7001 12.4709 11.0017 12.5288 11.2926C12.5867 11.5836 12.7296 11.8509 12.9393 12.0607C13.1491 12.2704 13.4164 12.4133 13.7074 12.4712C13.9983 12.5291 14.2999 12.4994 14.574 12.3858C14.8481 12.2723 15.0824 12.08 15.2472 11.8334C15.412 11.5867 15.5 11.2967 15.5 11C15.5 10.6022 15.342 10.2206 15.0607 9.93934C14.7794 9.65804 14.3978 9.5 14 9.5ZM14 11.5C13.9011 11.5 13.8044 11.4707 13.7222 11.4157C13.64 11.3608 13.5759 11.2827 13.5381 11.1913C13.5002 11.1 13.4903 10.9994 13.5096 10.9025C13.5289 10.8055 13.5765 10.7164 13.6464 10.6464C13.7164 10.5765 13.8055 10.5289 13.9025 10.5096C13.9994 10.4903 14.1 10.5002 14.1913 10.5381C14.2827 10.5759 14.3608 10.64 14.4157 10.7222C14.4707 10.8044 14.5 10.9011 14.5 11C14.5 11.1326 14.4473 11.2598 14.3536 11.3536C14.2598 11.4473 14.1326 11.5 14 11.5Z" fill="#5072EB"/> +<path d="M17 9.5H18V10.5H17V9.5Z" fill="#5072EB"/> +<path d="M17 11.5H18V12.5H17V11.5Z" fill="#5072EB"/> +<path d="M20 9.5H21V10.5H20V9.5Z" fill="#5072EB"/> +<path d="M20 11.5H21V12.5H20V11.5Z" fill="#5072EB"/> +<path d="M10 17.5C9.70333 17.5 9.41332 17.588 9.16665 17.7528C8.91997 17.9176 8.72771 18.1519 8.61418 18.426C8.50065 18.7001 8.47094 19.0017 8.52882 19.2926C8.5867 19.5836 8.72956 19.8509 8.93934 20.0607C9.14912 20.2704 9.41639 20.4133 9.70736 20.4712C9.99834 20.5291 10.2999 20.4993 10.574 20.3858C10.8481 20.2723 11.0824 20.08 11.2472 19.8334C11.412 19.5867 11.5 19.2967 11.5 19C11.5 18.6022 11.342 18.2206 11.0607 17.9393C10.7794 17.658 10.3978 17.5 10 17.5ZM10 19.5C9.90111 19.5 9.80444 19.4707 9.72222 19.4157C9.63999 19.3608 9.5759 19.2827 9.53806 19.1913C9.50022 19.1 9.49032 18.9994 9.50961 18.9025C9.5289 18.8055 9.57652 18.7164 9.64645 18.6464C9.71637 18.5765 9.80546 18.5289 9.90246 18.5096C9.99945 18.4903 10.1 18.5002 10.1913 18.5381C10.2827 18.5759 10.3608 18.64 10.4157 18.7222C10.4707 18.8044 10.5 18.9011 10.5 19C10.5 19.1326 10.4473 19.2598 10.3536 19.3536C10.2598 19.4473 10.1326 19.5 10 19.5Z" fill="#5072EB"/> +<path d="M14 17.5C13.7033 17.5 13.4133 17.588 13.1666 17.7528C12.92 17.9176 12.7277 18.1519 12.6142 18.426C12.5006 18.7001 12.4709 19.0017 12.5288 19.2926C12.5867 19.5836 12.7296 19.8509 12.9393 20.0607C13.1491 20.2704 13.4164 20.4133 13.7074 20.4712C13.9983 20.5291 14.2999 20.4993 14.574 20.3858C14.8481 20.2723 15.0824 20.08 15.2472 19.8334C15.412 19.5867 15.5 19.2967 15.5 19C15.5 18.6022 15.342 18.2206 15.0607 17.9393C14.7794 17.658 14.3978 17.5 14 17.5ZM14 19.5C13.9011 19.5 13.8044 19.4707 13.7222 19.4157C13.64 19.3608 13.5759 19.2827 13.5381 19.1913C13.5002 19.1 13.4903 18.9994 13.5096 18.9025C13.5289 18.8055 13.5765 18.7164 13.6464 18.6464C13.7164 18.5765 13.8055 18.5289 13.9025 18.5096C13.9994 18.4903 14.1 18.5002 14.1913 18.5381C14.2827 18.5759 14.3608 18.64 14.4157 18.7222C14.4707 18.8044 14.5 18.9011 14.5 19C14.5 19.1326 14.4473 19.2598 14.3536 19.3536C14.2598 19.4473 14.1326 19.5 14 19.5Z" fill="#5072EB"/> +<path d="M10 25.5C9.70333 25.5 9.41332 25.588 9.16665 25.7528C8.91997 25.9176 8.72771 26.1519 8.61418 26.426C8.50065 26.7001 8.47094 27.0017 8.52882 27.2926C8.5867 27.5836 8.72956 27.8509 8.93934 28.0607C9.14912 28.2704 9.41639 28.4133 9.70736 28.4712C9.99834 28.5291 10.2999 28.4993 10.574 28.3858C10.8481 28.2723 11.0824 28.08 11.2472 27.8334C11.412 27.5867 11.5 27.2967 11.5 27C11.5 26.6022 11.342 26.2206 11.0607 25.9393C10.7794 25.658 10.3978 25.5 10 25.5ZM10 27.5C9.90111 27.5 9.80444 27.4707 9.72222 27.4157C9.63999 27.3608 9.5759 27.2827 9.53806 27.1913C9.50022 27.1 9.49032 26.9994 9.50961 26.9025C9.5289 26.8055 9.57652 26.7164 9.64645 26.6464C9.71637 26.5765 9.80546 26.5289 9.90246 26.5096C9.99945 26.4903 10.1 26.5002 10.1913 26.5381C10.2827 26.5759 10.3608 26.64 10.4157 26.7222C10.4707 26.8044 10.5 26.9011 10.5 27C10.5 27.1326 10.4473 27.2598 10.3536 27.3536C10.2598 27.4473 10.1326 27.5 10 27.5Z" fill="#5072EB"/> +<path d="M14 25.5C13.7033 25.5 13.4133 25.588 13.1666 25.7528C12.92 25.9176 12.7277 26.1519 12.6142 26.426C12.5006 26.7001 12.4709 27.0017 12.5288 27.2926C12.5867 27.5836 12.7296 27.8509 12.9393 28.0607C13.1491 28.2704 13.4164 28.4133 13.7074 28.4712C13.9983 28.5291 14.2999 28.4993 14.574 28.3858C14.8481 28.2723 15.0824 28.08 15.2472 27.8334C15.412 27.5867 15.5 27.2967 15.5 27C15.5 26.6022 15.342 26.2206 15.0607 25.9393C14.7794 25.658 14.3978 25.5 14 25.5ZM14 27.5C13.9011 27.5 13.8044 27.4707 13.7222 27.4157C13.64 27.3608 13.5759 27.2827 13.5381 27.1913C13.5002 27.1 13.4903 26.9994 13.5096 26.9025C13.5289 26.8055 13.5765 26.7164 13.6464 26.6464C13.7164 26.5765 13.8055 26.5289 13.9025 26.5096C13.9994 26.4903 14.1 26.5002 14.1913 26.5381C14.2827 26.5759 14.3608 26.64 14.4157 26.7222C14.4707 26.8044 14.5 26.9011 14.5 27C14.5 27.1326 14.4473 27.2598 14.3536 27.3536C14.2598 27.4473 14.1326 27.5 14 27.5Z" fill="#5072EB"/> +<path d="M17 25.5H18V26.5H17V25.5Z" fill="#5072EB"/> +<path d="M17 27.5H18V28.5H17V27.5Z" fill="#5072EB"/> +<path d="M0 23.5H1V24.5H0V23.5Z" fill="#5072EB"/> +<path d="M2 23.5H5V24.5H2V23.5Z" fill="#5072EB"/> +<path d="M0 26.5H1V27.5H0V26.5Z" fill="#5072EB"/> +<path d="M2 26.5H5V27.5H2V26.5Z" fill="#5072EB"/> +<path d="M0 29.5H1V30.5H0V29.5Z" fill="#5072EB"/> +<path d="M2 29.5H5V30.5H2V29.5Z" fill="#5072EB"/> +</svg> diff --git a/src/svgs/europe-flag-icon.svg b/src/svgs/europe-flag-icon.svg new file mode 100644 index 00000000..e0e11746 --- /dev/null +++ b/src/svgs/europe-flag-icon.svg @@ -0,0 +1,22 @@ +<svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_8928_23642)"> +<path d="M29.367 0.5H6.63299C2.96969 0.5 0 3.46969 0 7.13299V29.867C0 33.5303 2.96969 36.5 6.63299 36.5H29.367C33.0303 36.5 36 33.5303 36 29.867V7.13299C36 3.46969 33.0303 0.5 29.367 0.5Z" fill="#004CBA"/> +<path d="M6.91628 16.8356L7.31222 17.8474L8.38757 17.9012C8.43354 17.9028 8.47792 17.9184 8.51471 17.946C8.5515 17.9736 8.57893 18.0119 8.59332 18.0555C8.60771 18.0992 8.60835 18.1463 8.59516 18.1904C8.58196 18.2344 8.55557 18.2734 8.51954 18.302L7.6837 18.9912L7.95743 20.0274C7.96807 20.0709 7.96554 20.1165 7.95015 20.1584C7.93475 20.2004 7.90718 20.2368 7.87098 20.2631C7.83478 20.2893 7.7916 20.3041 7.74692 20.3057C7.70224 20.3073 7.6581 20.2955 7.62015 20.2718L6.7061 19.6999L5.79695 20.2718C5.759 20.2955 5.71486 20.3073 5.67018 20.3057C5.6255 20.3041 5.58232 20.2893 5.54612 20.2631C5.50992 20.2368 5.48235 20.2004 5.46695 20.1584C5.45156 20.1165 5.44902 20.0709 5.45967 20.0274L5.7334 18.9912L4.89756 18.2971C4.86153 18.2685 4.83514 18.2295 4.82194 18.1855C4.80875 18.1414 4.80939 18.0944 4.82378 18.0507C4.83816 18.007 4.8656 17.9688 4.90239 17.9411C4.93918 17.9135 4.98356 17.8979 5.02953 17.8963L6.10489 17.8425L6.49592 16.8307C6.51261 16.7882 6.54181 16.7519 6.57965 16.7264C6.61749 16.701 6.66218 16.6876 6.70779 16.6881C6.7534 16.6887 6.79776 16.7031 6.835 16.7294C6.87224 16.7557 6.90059 16.7928 6.91628 16.8356Z" fill="#FFE600"/> +<path d="M8.43117 22.6474L8.82222 23.6641L9.89756 23.7179C9.94238 23.7206 9.98537 23.7366 10.021 23.7639C10.0566 23.7913 10.0832 23.8286 10.0974 23.8712C10.1116 23.9138 10.1127 23.9597 10.1006 24.0029C10.0885 24.0461 10.0638 24.0848 10.0295 24.1138L9.19369 24.8128L9.46742 25.8441C9.4794 25.8879 9.47788 25.9343 9.46303 25.9771C9.44818 26.02 9.4207 26.0574 9.38421 26.0844C9.34772 26.1113 9.30392 26.1266 9.25858 26.1283C9.21324 26.1299 9.16846 26.1177 9.13015 26.0934L8.22099 25.5215L7.31183 26.0934C7.27312 26.1167 7.2284 26.1281 7.18326 26.1261C7.13812 26.1242 7.09457 26.1089 7.05805 26.0823C7.02153 26.0557 6.99366 26.0189 6.97794 25.9766C6.96222 25.9342 6.95935 25.8881 6.96967 25.8441L7.24339 24.8128L6.40755 24.1138C6.37331 24.0848 6.34854 24.0461 6.33644 24.0029C6.32434 23.9597 6.32547 23.9138 6.33966 23.8712C6.35386 23.8286 6.38048 23.7913 6.4161 23.7639C6.45172 23.7366 6.49471 23.7206 6.53952 23.7179L7.61488 23.6641L8.01081 22.6474C8.02701 22.6048 8.05578 22.5681 8.09331 22.5422C8.13085 22.5163 8.17539 22.5024 8.22099 22.5024C8.26659 22.5024 8.31112 22.5163 8.34866 22.5422C8.3862 22.5681 8.41497 22.6048 8.43117 22.6474Z" fill="#FFE600"/> +<path d="M8.01644 11.0678L7.62052 12.0796L6.54515 12.1334C6.49919 12.135 6.45482 12.1507 6.41803 12.1783C6.38124 12.2059 6.35379 12.2441 6.3394 12.2878C6.32502 12.3315 6.32438 12.3785 6.33757 12.4226C6.35076 12.4667 6.37716 12.5056 6.41318 12.5342L7.24902 13.2283L6.9753 14.2597C6.96498 14.3037 6.96786 14.3497 6.98358 14.3921C6.9993 14.4344 7.02716 14.4712 7.06368 14.4978C7.1002 14.5244 7.14376 14.5397 7.18889 14.5417C7.23403 14.5436 7.27876 14.5323 7.31746 14.509L8.22662 13.9371L9.13578 14.509C9.1741 14.5333 9.21887 14.5454 9.26421 14.5438C9.30956 14.5422 9.35336 14.5269 9.38984 14.4999C9.42633 14.4729 9.45381 14.4356 9.46867 14.3927C9.48352 14.3498 9.48504 14.3034 9.47305 14.2597L9.19933 13.2283L10.0352 12.5342C10.0712 12.5056 10.0976 12.4667 10.1108 12.4226C10.124 12.3785 10.1233 12.3315 10.1089 12.2878C10.0946 12.2441 10.0671 12.2059 10.0303 12.1783C9.99354 12.1507 9.94916 12.135 9.9032 12.1334L8.82785 12.0796L8.4368 11.0678C8.4206 11.0252 8.39183 10.9885 8.3543 10.9626C8.31676 10.9367 8.27222 10.9229 8.22662 10.9229C8.18102 10.9229 8.13649 10.9367 8.09895 10.9626C8.06141 10.9885 8.03264 11.0252 8.01644 11.0678Z" fill="#FFE600"/> +<path d="M18.2111 5.54435L18.6022 6.56105L19.6775 6.61482C19.7228 6.61659 19.7664 6.63198 19.8027 6.65895C19.8391 6.68593 19.8664 6.72325 19.8812 6.76603C19.896 6.8088 19.8975 6.85505 19.8856 6.89871C19.8737 6.94238 19.8489 6.98141 19.8144 7.01074L18.9786 7.70484L19.2474 8.74109C19.2594 8.78485 19.2579 8.83122 19.243 8.87409C19.2282 8.91696 19.2007 8.95434 19.1642 8.98131C19.1277 9.00828 19.0839 9.02358 19.0386 9.0252C18.9932 9.02682 18.9484 9.01468 18.9101 8.99038L18.001 8.41359L17.0918 8.99038C17.0528 9.00888 17.0093 9.01576 16.9665 9.01021C16.9237 9.00466 16.8834 8.9869 16.8504 8.95907C16.8175 8.93124 16.7932 8.8945 16.7805 8.85325C16.7678 8.812 16.7673 8.76798 16.779 8.72643L17.0478 7.69018L16.212 6.99608C16.1775 6.96675 16.1527 6.92771 16.1408 6.88405C16.1288 6.84039 16.1304 6.79414 16.1452 6.75137C16.1599 6.70859 16.1873 6.67127 16.2236 6.64429C16.26 6.61731 16.3036 6.60193 16.3488 6.60015L17.4242 6.54639L17.8152 5.52968C17.8358 5.49461 17.8654 5.46577 17.9011 5.44621C17.9367 5.42665 17.977 5.41711 18.0176 5.41861C18.0582 5.42012 18.0976 5.4326 18.1317 5.45474C18.1658 5.47688 18.1933 5.50785 18.2111 5.54435Z" fill="#FFE600"/> +<path d="M18.2121 28.1269L18.6032 29.1387L19.6785 29.1925C19.7238 29.1943 19.7674 29.2096 19.8037 29.2366C19.8401 29.2636 19.8674 29.3009 19.8822 29.3437C19.897 29.3865 19.8985 29.4327 19.8866 29.4764C19.8747 29.52 19.8499 29.5591 19.8154 29.5884L18.9796 30.2874L19.2484 31.3188C19.2604 31.3625 19.2589 31.4089 19.244 31.4518C19.2292 31.4946 19.2017 31.532 19.1652 31.559C19.1287 31.586 19.0849 31.6013 19.0396 31.6029C18.9942 31.6045 18.9494 31.5924 18.9111 31.5681L18.002 30.9962L17.0928 31.5681C17.0545 31.5924 17.0097 31.6045 16.9644 31.6029C16.919 31.6013 16.8752 31.586 16.8387 31.559C16.8023 31.532 16.7748 31.4946 16.7599 31.4518C16.7451 31.4089 16.7435 31.3625 16.7555 31.3188L17.0244 30.2874L16.1885 29.5884C16.1541 29.5591 16.1292 29.52 16.1173 29.4764C16.1054 29.4327 16.1069 29.3865 16.1217 29.3437C16.1365 29.3009 16.1639 29.2636 16.2002 29.2366C16.2365 29.2096 16.2802 29.1943 16.3254 29.1925L17.4007 29.1387L17.7918 28.1269C17.808 28.0843 17.8368 28.0476 17.8743 28.0217C17.9118 27.9958 17.9564 27.9819 18.002 27.9819C18.0476 27.9819 18.0921 27.9958 18.1296 28.0217C18.1672 28.0476 18.1959 28.0843 18.2121 28.1269Z" fill="#FFE600"/> +<path d="M12.7075 7.0793L13.1035 8.096L14.1788 8.14977C14.2236 8.15246 14.2666 8.16849 14.3022 8.19582C14.3379 8.22315 14.3645 8.26051 14.3787 8.3031C14.3929 8.3457 14.394 8.39157 14.3819 8.43481C14.3698 8.47804 14.345 8.51666 14.3108 8.5457L13.4749 9.24468L13.7487 10.276C13.759 10.32 13.7561 10.3661 13.7404 10.4084C13.7247 10.4508 13.6968 10.4876 13.6603 10.5142C13.6238 10.5408 13.5802 10.556 13.5351 10.558C13.4899 10.56 13.4452 10.5486 13.4065 10.5253L12.4973 9.95344L11.5882 10.5253C11.5499 10.5496 11.5051 10.5618 11.4598 10.5601C11.4144 10.5585 11.3706 10.5432 11.3341 10.5163C11.2976 10.4893 11.2702 10.4519 11.2553 10.409C11.2404 10.3662 11.2389 10.3198 11.2509 10.276L11.5246 9.24468L10.6888 8.5457C10.6545 8.51666 10.6298 8.47804 10.6177 8.43481C10.6056 8.39157 10.6067 8.3457 10.6209 8.3031C10.6351 8.26051 10.6617 8.22315 10.6973 8.19582C10.733 8.16849 10.776 8.15246 10.8208 8.14977L11.8961 8.096L12.2872 7.0793C12.3034 7.03668 12.3321 6.99997 12.3697 6.97408C12.4072 6.94819 12.4517 6.93433 12.4973 6.93433C12.5429 6.93433 12.5875 6.94819 12.625 6.97408C12.6626 6.99997 12.6913 7.03668 12.7075 7.0793Z" fill="#FFE600"/> +<path d="M23.9992 26.6359L24.3902 27.6477L25.4655 27.7015C25.5115 27.7031 25.5559 27.7188 25.5927 27.7464C25.6295 27.774 25.6569 27.8122 25.6713 27.8559C25.6857 27.8996 25.6863 27.9467 25.6731 27.9907C25.6599 28.0348 25.6335 28.0737 25.5975 28.1023L24.7666 28.7964L25.0354 29.8327C25.0461 29.8761 25.0435 29.9217 25.0281 29.9637C25.0127 30.0056 24.9852 30.0421 24.949 30.0683C24.9128 30.0945 24.8696 30.1094 24.8249 30.111C24.7802 30.1125 24.7361 30.1007 24.6981 30.0771L23.789 29.5052L22.8798 30.0771C22.8418 30.1024 22.7971 30.1156 22.7515 30.1148C22.7058 30.1141 22.6615 30.0995 22.6244 30.073C22.5872 30.0464 22.5591 30.0093 22.5436 29.9663C22.5281 29.9234 22.526 29.8768 22.5377 29.8327L22.8114 28.7964L21.9755 28.1023C21.9392 28.0735 21.9127 28.0341 21.8997 27.9896C21.8867 27.945 21.8877 27.8976 21.9027 27.8537C21.9177 27.8098 21.9459 27.7716 21.9834 27.7444C22.021 27.7171 22.066 27.7022 22.1124 27.7015L23.1829 27.6477L23.5788 26.6359C23.595 26.5933 23.6238 26.5566 23.6613 26.5307C23.6988 26.5048 23.7434 26.491 23.789 26.491C23.8346 26.491 23.8791 26.5048 23.9166 26.5307C23.9542 26.5566 23.983 26.5933 23.9992 26.6359Z" fill="#FFE600"/> +<path d="M29.4846 16.8357L29.8757 17.8475L30.951 17.9012C30.997 17.9028 31.0414 17.9185 31.0782 17.9461C31.115 17.9737 31.1424 18.0119 31.1568 18.0556C31.1712 18.0993 31.1718 18.1464 31.1586 18.1904C31.1454 18.2345 31.119 18.2734 31.083 18.302L30.2618 18.9913L30.5356 20.0275C30.5462 20.0709 30.5437 20.1165 30.5283 20.1585C30.5129 20.2005 30.4853 20.2369 30.4491 20.2631C30.4129 20.2894 30.3697 20.3042 30.325 20.3058C30.2804 20.3073 30.2362 20.2955 30.1983 20.2719L29.2891 19.7L28.3751 20.2719C28.3371 20.2955 28.293 20.3073 28.2483 20.3058C28.2036 20.3042 28.1604 20.2894 28.1242 20.2631C28.088 20.2369 28.0605 20.2005 28.0451 20.1585C28.0297 20.1165 28.0271 20.0709 28.0378 20.0275L28.3115 18.9913L27.4757 18.2972C27.4397 18.2686 27.4133 18.2296 27.4001 18.1855C27.3869 18.1415 27.3875 18.0944 27.4019 18.0507C27.4163 18.0071 27.4437 17.9688 27.4805 17.9412C27.5173 17.9136 27.5617 17.898 27.6077 17.8964L28.683 17.8426L29.0789 16.8308C29.0977 16.7927 29.1268 16.7607 29.163 16.7385C29.1992 16.7163 29.2409 16.7048 29.2833 16.7053C29.3258 16.7058 29.3672 16.7184 29.4028 16.7414C29.4384 16.7645 29.4668 16.7971 29.4846 16.8357Z" fill="#FFE600"/> +<path d="M11.9959 26.6359L11.6049 27.6477L10.5295 27.7015C10.4836 27.7031 10.4392 27.7188 10.4024 27.7464C10.3656 27.774 10.3382 27.8122 10.3238 27.8559C10.3094 27.8996 10.3088 27.9467 10.3219 27.9907C10.3351 28.0348 10.3615 28.0737 10.3976 28.1023L11.2285 28.7964L10.9597 29.8327C10.949 29.8761 10.9516 29.9217 10.967 29.9637C10.9823 30.0056 11.0099 30.0421 11.0461 30.0683C11.0823 30.0945 11.1255 30.1094 11.1702 30.111C11.2149 30.1125 11.259 30.1007 11.2969 30.0771L12.2061 29.5052L13.1153 30.0771C13.1532 30.1024 13.198 30.1156 13.2436 30.1148C13.2892 30.1141 13.3336 30.0995 13.3707 30.073C13.4078 30.0464 13.436 30.0093 13.4515 29.9663C13.467 29.9234 13.4691 29.8768 13.4574 29.8327L13.1837 28.7964L14.0195 28.1023C14.0556 28.0737 14.082 28.0348 14.0952 27.9907C14.1083 27.9467 14.1077 27.8996 14.0933 27.8559C14.0789 27.8122 14.0515 27.774 14.0147 27.7464C13.9779 27.7188 13.9335 27.7031 13.8876 27.7015L12.8122 27.6477L12.4163 26.6359C12.4001 26.5933 12.3713 26.5566 12.3338 26.5307C12.2962 26.5048 12.2517 26.491 12.2061 26.491C12.1605 26.491 12.116 26.5048 12.0784 26.5307C12.0409 26.5566 12.0121 26.5933 11.9959 26.6359Z" fill="#FFE600"/> +<path d="M23.2842 7.0793L22.8883 8.096L21.813 8.14977C21.7681 8.15246 21.7252 8.16849 21.6895 8.19582C21.6539 8.22315 21.6273 8.26051 21.6131 8.3031C21.5989 8.3457 21.5978 8.39157 21.6099 8.43481C21.622 8.47804 21.6467 8.51666 21.681 8.5457L22.5168 9.24468L22.2431 10.276C22.2328 10.32 22.2357 10.3661 22.2514 10.4084C22.2671 10.4508 22.295 10.4876 22.3315 10.5142C22.368 10.5408 22.4116 10.556 22.4567 10.558C22.5018 10.56 22.5466 10.5486 22.5853 10.5253L23.4944 9.95344L24.4036 10.5253C24.4419 10.5496 24.4867 10.5618 24.532 10.5601C24.5774 10.5585 24.6212 10.5432 24.6576 10.5163C24.6941 10.4893 24.7216 10.4519 24.7365 10.409C24.7513 10.3662 24.7528 10.3198 24.7409 10.276L24.4671 9.24468L25.303 8.5457C25.3372 8.51666 25.362 8.47804 25.3741 8.43481C25.3862 8.39157 25.3851 8.3457 25.3709 8.3031C25.3567 8.26051 25.33 8.22315 25.2944 8.19582C25.2588 8.16849 25.2158 8.15246 25.171 8.14977L24.0957 8.096L23.7046 7.0793C23.6884 7.03668 23.6596 6.99997 23.6221 6.97408C23.5846 6.94819 23.54 6.93433 23.4944 6.93433C23.4488 6.93433 23.4043 6.94819 23.3668 6.97408C23.3292 6.99997 23.3004 7.03668 23.2842 7.0793Z" fill="#FFE600"/> +<path d="M27.9866 11.361L28.3825 12.3728L29.4579 12.4266C29.5039 12.4282 29.5482 12.4439 29.585 12.4715C29.6218 12.4991 29.6492 12.5373 29.6636 12.581C29.678 12.6247 29.6787 12.6717 29.6655 12.7158C29.6523 12.7599 29.6259 12.7988 29.5899 12.8274L28.754 13.5215L29.0277 14.5529C29.0381 14.5969 29.0352 14.6429 29.0195 14.6853C29.0037 14.7276 28.9759 14.7644 28.9394 14.791C28.9028 14.8177 28.8593 14.8329 28.8141 14.8349C28.769 14.8369 28.7243 14.8255 28.6856 14.8022L27.7764 14.2303L26.8673 14.8022C26.8289 14.8265 26.7842 14.8386 26.7388 14.837C26.6935 14.8354 26.6497 14.8201 26.6132 14.7931C26.5767 14.7661 26.5492 14.7288 26.5344 14.6859C26.5195 14.643 26.518 14.5967 26.53 14.5529L26.8037 13.5215L25.9679 12.8274C25.9318 12.7988 25.9054 12.7599 25.8923 12.7158C25.8791 12.6717 25.8797 12.6247 25.8941 12.581C25.9085 12.5373 25.9359 12.4991 25.9727 12.4715C26.0095 12.4439 26.0539 12.4282 26.0998 12.4266L27.1752 12.3728L27.5662 11.361C27.5824 11.3184 27.6112 11.2817 27.6487 11.2558C27.6863 11.2299 27.7308 11.2161 27.7764 11.2161C27.822 11.2161 27.8666 11.2299 27.9041 11.2558C27.9416 11.2817 27.9704 11.3184 27.9866 11.361Z" fill="#FFE600"/> +<path d="M27.5684 22.3542L27.1774 23.3709L26.102 23.4247C26.0572 23.4274 26.0142 23.4434 25.9786 23.4707C25.943 23.4981 25.9164 23.5354 25.9022 23.578C25.888 23.6206 25.8868 23.6665 25.8989 23.7097C25.911 23.7529 25.9358 23.7916 25.97 23.8206L26.8059 24.5196L26.5322 25.551C26.5202 25.5947 26.5217 25.6411 26.5366 25.6839C26.5514 25.7268 26.5789 25.7642 26.6154 25.7912C26.6519 25.8181 26.6957 25.8334 26.741 25.835C26.7863 25.8367 26.8311 25.8245 26.8694 25.8002L27.7786 25.2283L28.6878 25.8002C28.7265 25.8235 28.7712 25.8349 28.8163 25.8329C28.8615 25.8309 28.905 25.8157 28.9415 25.7891C28.9781 25.7625 29.0059 25.7257 29.0216 25.6833C29.0374 25.641 29.0402 25.5949 29.0299 25.551L28.7562 24.5196L29.592 23.8206C29.6263 23.7916 29.651 23.7529 29.6631 23.7097C29.6752 23.6665 29.6741 23.6206 29.6599 23.578C29.6457 23.5354 29.6191 23.4981 29.5835 23.4707C29.5479 23.4434 29.5049 23.4274 29.4601 23.4247L28.3847 23.3709L27.9888 22.3542C27.9726 22.3116 27.9438 22.2749 27.9063 22.249C27.8687 22.2231 27.8242 22.2092 27.7786 22.2092C27.733 22.2092 27.6885 22.2231 27.6509 22.249C27.6134 22.2749 27.5846 22.3116 27.5684 22.3542Z" fill="#FFE600"/> +</g> +<defs> +<clipPath id="clip0_8928_23642"> +<rect width="36" height="36" fill="white" transform="translate(0 0.5)"/> +</clipPath> +</defs> +</svg> diff --git a/src/svgs/flow-storage-icon.svg b/src/svgs/flow-storage-icon.svg new file mode 100644 index 00000000..62d7ec41 --- /dev/null +++ b/src/svgs/flow-storage-icon.svg @@ -0,0 +1,19 @@ +<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M24.1448 19.755C23.8011 18.9393 23.2246 18.243 22.4874 17.753C21.7502 17.263 20.885 17.0011 19.9998 17C19.4331 16.9986 18.8713 17.1055 18.3448 17.315C17.6299 16.2744 16.6269 15.4649 15.4588 14.9857C14.2907 14.5066 13.0082 14.3786 11.7684 14.6174C10.5286 14.8562 9.38547 15.4515 8.47896 16.3303C7.57245 17.2091 6.94197 18.3333 6.66479 19.565C5.29634 19.7773 4.05832 20.4979 3.198 21.5831C2.33767 22.6682 1.91835 24.038 2.02379 25.4188C2.12923 26.7996 2.75166 28.0898 3.76677 29.0317C4.78189 29.9737 6.11497 30.498 7.49979 30.5H22.4998C23.8125 30.4976 25.081 30.0257 26.0762 29.1697C27.0713 28.3137 27.7275 27.1299 27.9262 25.8323C28.1248 24.5348 27.8528 23.2089 27.1594 22.0944C26.4659 20.9798 25.3966 20.1501 24.1448 19.755ZM22.4998 29.5H7.49979C6.34723 29.487 5.24361 29.0322 4.41648 28.2295C3.58936 27.4267 3.10181 26.3372 3.05436 25.1856C3.0069 24.0339 3.40318 22.908 4.16146 22.0399C4.91974 21.1718 5.98221 20.6278 7.12979 20.52C7.24089 20.5102 7.34554 20.4636 7.42708 20.3875C7.50862 20.3114 7.56237 20.2102 7.57979 20.1C7.76286 18.9867 8.28444 17.9568 9.0736 17.1504C9.86275 16.344 10.8812 15.8003 11.9903 15.5932C13.0994 15.3862 14.2454 15.5258 15.2723 15.9931C16.2993 16.4604 17.1573 17.2327 17.7298 18.205C17.7947 18.315 17.8993 18.3959 18.022 18.4313C18.1447 18.4666 18.2763 18.4536 18.3898 18.395C18.8334 18.1638 19.3216 18.0307 19.8212 18.0048C20.3208 17.9788 20.8202 18.0606 21.2854 18.2446C21.7506 18.4286 22.1708 18.7105 22.5175 19.0712C22.8642 19.4319 23.1293 19.8629 23.2948 20.335C23.322 20.4118 23.3678 20.4807 23.4279 20.5356C23.4881 20.5906 23.5608 20.6298 23.6398 20.65C24.6952 20.9295 25.613 21.5833 26.2222 22.4893C26.8313 23.3954 27.0903 24.4921 26.9508 25.5749C26.8113 26.6578 26.2829 27.653 25.464 28.3752C24.6451 29.0973 23.5916 29.4971 22.4998 29.5Z" fill="#5072EB"/> +<path d="M23.388 21.6195L23.135 22.587C23.7228 22.7405 24.2345 23.103 24.5743 23.6067C24.914 24.1103 25.0585 24.7206 24.9806 25.3231C24.9027 25.9256 24.6078 26.4791 24.1512 26.8798C23.6946 27.2805 23.1075 27.501 22.5 27.5V28.5C23.3507 28.5011 24.1726 28.192 24.8118 27.6307C25.451 27.0694 25.8637 26.2943 25.9725 25.4506C26.0814 24.6069 25.879 23.7525 25.4033 23.0473C24.9276 22.3421 24.2111 21.8345 23.388 21.6195Z" fill="#5072EB"/> +<path d="M4.99783 25.0001C5.00093 24.3745 5.23759 23.7727 5.6614 23.3125C6.08521 22.8523 6.66561 22.5671 7.28883 22.5126L7.20733 21.5161C6.31541 21.601 5.49003 22.0248 4.90118 22.7C4.31233 23.3753 4.00485 24.2506 4.04209 25.1458C4.07932 26.041 4.45843 26.8878 5.10133 27.5118C5.74422 28.1358 6.60194 28.4896 7.49783 28.5001V27.5001C6.83503 27.4993 6.1996 27.2357 5.73094 26.767C5.26227 26.2983 4.99862 25.6629 4.99783 25.0001Z" fill="#5072EB"/> +<path d="M8.5 27.5H10.5V28.5H8.5V27.5Z" fill="#5072EB"/> +<path d="M26 2H27V3H26V2Z" fill="#5072EB"/> +<path d="M28.9962 5.59V2C28.995 1.60254 28.8366 1.2217 28.5555 0.940651C28.2745 0.659604 27.8936 0.501187 27.4962 0.5H23.4962C23.0987 0.501187 22.7179 0.659604 22.4368 0.940651C22.1558 1.2217 21.9974 1.60254 21.9962 2V5.59C21.6655 5.70999 21.3875 5.94239 21.2108 6.24657C21.0341 6.55075 20.9699 6.90735 21.0295 7.25406C21.089 7.60076 21.2686 7.91549 21.5367 8.14324C21.8048 8.37099 22.1444 8.49727 22.4962 8.5H28.4962C28.8479 8.49727 29.1876 8.37099 29.4557 8.14324C29.7238 7.91549 29.9033 7.60076 29.9629 7.25406C30.0224 6.90735 29.9583 6.55075 29.7816 6.24657C29.6049 5.94239 29.3269 5.70999 28.9962 5.59ZM22.9962 2C22.9962 1.86739 23.0489 1.74021 23.1426 1.64645C23.2364 1.55268 23.3636 1.5 23.4962 1.5H27.4962C27.6288 1.5 27.756 1.55268 27.8497 1.64645C27.9435 1.74021 27.9962 1.86739 27.9962 2V5.5H22.9962V2ZM28.4962 7.5H22.4962C22.3636 7.5 22.2364 7.44732 22.1426 7.35355C22.0489 7.25979 21.9962 7.13261 21.9962 7C21.9962 6.86739 22.0489 6.74021 22.1426 6.64645C22.2364 6.55268 22.3636 6.5 22.4962 6.5H28.4962C28.6288 6.5 28.756 6.55268 28.8497 6.64645C28.9435 6.74021 28.9962 6.86739 28.9962 7C28.9962 7.13261 28.9435 7.25979 28.8497 7.35355C28.756 7.44732 28.6288 7.5 28.4962 7.5Z" fill="#5072EB"/> +<path d="M18.5 3H18V2C18 1.86739 17.9473 1.74021 17.8536 1.64645C17.7598 1.55268 17.6326 1.5 17.5 1.5H15V1C15 0.867392 14.9473 0.740215 14.8536 0.646447C14.7598 0.552678 14.6326 0.5 14.5 0.5H11.5C11.3674 0.5 11.2402 0.552678 11.1464 0.646447C11.0527 0.740215 11 0.867392 11 1V7C11 7.13261 11.0527 7.25979 11.1464 7.35355C11.2402 7.44732 11.3674 7.5 11.5 7.5H18.5C18.6326 7.5 18.7598 7.44732 18.8536 7.35355C18.9473 7.25979 19 7.13261 19 7V3.5C19 3.36739 18.9473 3.24021 18.8536 3.14645C18.7598 3.05268 18.6326 3 18.5 3ZM13 3C12.8674 3 12.7402 3.05268 12.6464 3.14645C12.5527 3.24021 12.5 3.36739 12.5 3.5V6.5H12V1.5H14V2C14 2.13261 14.0527 2.25979 14.1464 2.35355C14.2402 2.44732 14.3674 2.5 14.5 2.5H17V3H13ZM18 6.5H13.5V4H18V6.5Z" fill="#5072EB"/> +<path d="M2 2.5H3V3.5H2V2.5Z" fill="#5072EB"/> +<path d="M4 2.5H5V3.5H4V2.5Z" fill="#5072EB"/> +<path d="M6 2.5H7V3.5H6V2.5Z" fill="#5072EB"/> +<path d="M8.5 5.5C8.63261 5.5 8.75979 5.44732 8.85355 5.35355C8.94732 5.25979 9 5.13261 9 5V1C9 0.867392 8.94732 0.740215 8.85355 0.646447C8.75979 0.552678 8.63261 0.5 8.5 0.5H0.5C0.367392 0.5 0.240215 0.552678 0.146447 0.646447C0.0526784 0.740215 0 0.867392 0 1V5C0 5.13261 0.0526784 5.25979 0.146447 5.35355C0.240215 5.44732 0.367392 5.5 0.5 5.5H1V6.5H0.5C0.367392 6.5 0.240215 6.55268 0.146447 6.64645C0.0526784 6.74021 0 6.86739 0 7V11C0 11.1326 0.0526784 11.2598 0.146447 11.3536C0.240215 11.4473 0.367392 11.5 0.5 11.5H8.5C8.63261 11.5 8.75979 11.4473 8.85355 11.3536C8.94732 11.2598 9 11.1326 9 11V7C9 6.86739 8.94732 6.74021 8.85355 6.64645C8.75979 6.55268 8.63261 6.5 8.5 6.5H8V5.5H8.5ZM8 10.5H1V7.5H8V10.5ZM2 6.5V5.5H7V6.5H2ZM1 4.5V1.5H8V4.5H1Z" fill="#5072EB"/> +<path d="M2 8.5H3V9.5H2V8.5Z" fill="#5072EB"/> +<path d="M4 8.5H5V9.5H4V8.5Z" fill="#5072EB"/> +<path d="M6 8.5H7V9.5H6V8.5Z" fill="#5072EB"/> +<path d="M14.5 8.5H15.5V13.5H14.5V8.5Z" fill="#5072EB"/> +<path d="M22.0391 16.2825L25.0375 10.2855L25.9315 10.7325L22.9331 16.7295L22.0391 16.2825Z" fill="#5072EB"/> +<path d="M4.02344 12.6829L4.9519 12.3117L6.94974 17.309L6.02127 17.6801L4.02344 12.6829Z" fill="#5072EB"/> +</svg> diff --git a/src/svgs/usa-flag-icon.svg b/src/svgs/usa-flag-icon.svg new file mode 100644 index 00000000..580622d6 --- /dev/null +++ b/src/svgs/usa-flag-icon.svg @@ -0,0 +1,37 @@ +<svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_8928_23610)"> +<path d="M29.367 36.5049H6.63298C5.24167 36.5048 3.8856 36.0672 2.75665 35.2541C1.6277 34.4409 0.783024 33.2933 0.34215 31.9737C0.122191 31.3138 1.71079 30.654 1.71079 29.9159L0 28.2882V24.2214C0 24.2214 14.1165 0.5 16.189 0.5H29.3866C30.7779 0.500072 32.1339 0.937639 33.2629 1.7508C34.3918 2.56396 35.2365 3.71154 35.6774 5.03116C35.8973 5.69103 34.1768 6.44378 34.1768 7.17697L36.0195 8.7167V12.7835L34.5189 14.5921L36.0195 16.469V20.5358L34.3772 22.3786L36.0098 24.2214V28.2784L34.2892 29.7888C34.2892 30.522 35.8876 31.3041 35.6676 31.9639C35.2279 33.287 34.3825 34.4378 33.2514 35.253C32.1203 36.0681 30.7612 36.5062 29.367 36.5049Z" fill="#F4002F"/> +<path d="M0.347043 31.9738H35.6529C35.8808 31.298 35.998 30.5899 36 29.8768V28.2784H0V29.8621C0.000888969 30.5801 0.118085 31.2932 0.347043 31.9738Z" fill="white"/> +<path d="M36 24.2214H0V20.5309H4.84888H36V24.2214Z" fill="white"/> +<path d="M35.9997 16.469H3.01562V12.7834H35.9997V16.469Z" fill="white"/> +<path d="M12.1999 5.03101C11.413 6.14547 10.5624 7.39679 9.6875 8.71655H36.0093V7.13283C36.0073 6.41812 35.8902 5.70841 35.6622 5.03101H12.1999Z" fill="white"/> +<path d="M0 20.5358V7.13298C0.00129465 5.3742 0.700538 3.68783 1.94418 2.44418C3.18783 1.20054 4.8742 0.501295 6.63298 0.5H21.3312V20.5407L0 20.5358Z" fill="#004CBA"/> +<path d="M19.8368 13.5853L19.2894 13.5022L19.0401 13.0134C18.9179 12.769 18.7175 12.769 18.5953 13.0134L18.3509 13.5022L17.7985 13.5853C17.5395 13.6195 17.471 13.7955 17.6372 13.9812L18.0625 14.3918L17.9696 14.9441C17.9256 15.2032 18.0674 15.3205 18.2873 15.2228L18.8201 14.9441L19.348 15.2228C19.5729 15.3205 19.7146 15.2228 19.6706 14.9441L19.5778 14.3918L20.003 13.9812C20.1692 13.7955 20.1008 13.6146 19.8368 13.5853Z" fill="white"/> +<path d="M15.7636 13.5853L15.2112 13.5022L14.9668 13.0134C14.8398 12.769 14.6442 12.769 14.522 13.0134L14.2727 13.5022L13.7204 13.5853C13.4613 13.6195 13.3929 13.7955 13.5591 13.9812L13.9844 14.3918L13.8915 14.9441C13.8475 15.2032 13.9892 15.3205 14.2141 15.2228L14.742 14.9441L15.2748 15.2228C15.4947 15.3205 15.6414 15.2228 15.5925 14.9441L15.4996 14.3918L15.9249 13.9812C16.0911 13.7955 16.0226 13.6146 15.7636 13.5853Z" fill="white"/> +<path d="M11.6909 13.6829L11.1385 13.5998L10.8941 13.111C10.7719 12.8666 10.5715 12.8666 10.4493 13.111L10.2 13.5998L9.65258 13.6829C9.38863 13.722 9.32509 13.8931 9.48639 14.0789L9.91164 14.4943L9.81877 15.0418C9.77478 15.3009 9.91653 15.4182 10.1414 15.3204L10.6693 15.0418L11.2021 15.3204C11.4269 15.4182 11.5687 15.3204 11.5247 15.0418L11.4269 14.4943L11.8522 14.0789C12.0184 13.8931 11.9499 13.722 11.6909 13.6829Z" fill="white"/> +<path d="M17.7948 17.1876L17.2425 17.1045L16.9932 16.6157C16.871 16.3713 16.6755 16.3713 16.5484 16.6157L16.304 17.1045L15.7517 17.1876C15.4926 17.2267 15.4242 17.4026 15.5903 17.5835L16.0156 17.999L15.9227 18.5464C15.8739 18.8055 16.0205 18.9228 16.2405 18.825L16.7732 18.5464L17.306 18.825C17.526 18.9228 17.6677 18.825 17.6237 18.5464L17.5309 17.999L17.9561 17.5835C18.1223 17.3977 18.0539 17.2267 17.7948 17.1876Z" fill="white"/> +<path d="M13.7321 17.1876L13.1797 17.1045L12.9354 16.6157C12.8132 16.3713 12.6127 16.3713 12.4905 16.6157L12.2413 17.1045L11.6938 17.1876C11.4298 17.2267 11.3614 17.4026 11.5276 17.5835L11.9529 17.999L11.86 18.5464C11.816 18.8055 11.9577 18.9228 12.1826 18.825L12.7105 18.5464L13.2433 18.825C13.4633 18.9228 13.6099 18.825 13.5659 18.5464L13.4681 17.999L13.8934 17.5835C14.0596 17.3977 13.9912 17.2267 13.7321 17.1876Z" fill="white"/> +<path d="M9.64932 17.1876L9.09697 17.1045L8.85257 16.6157C8.73037 16.3713 8.52996 16.3713 8.40777 16.6157L8.16337 17.1045L7.61102 17.1876C7.35196 17.2267 7.28353 17.4026 7.44972 17.5835L7.87008 17.999L7.77721 18.5464C7.73322 18.8055 7.87497 18.9228 8.09982 18.825L8.62773 18.5464L9.16052 18.825C9.38537 18.9228 9.52712 18.825 9.48313 18.5464L9.39025 17.999L9.81061 17.5835C9.97681 17.3977 9.90838 17.2267 9.64932 17.1876Z" fill="white"/> +<path d="M7.61025 13.6829L7.05791 13.5998L6.81351 13.111C6.69131 12.8666 6.49091 12.8666 6.36871 13.111L6.12431 13.5998L5.57197 13.6829C5.31291 13.722 5.24447 13.8931 5.41066 14.0789L5.83103 14.4943L5.73816 15.0418C5.69417 15.3009 5.83592 15.4182 6.06077 15.3204L6.59356 15.0418L7.12145 15.3204C7.3463 15.4182 7.48805 15.3204 7.44406 15.0418L7.35119 14.4943L7.77156 14.0789C7.93775 13.8931 7.86931 13.722 7.61025 13.6829Z" fill="white"/> +<path d="M3.53994 13.6829L2.99249 13.5998L2.74319 13.111C2.62099 12.8666 2.42059 12.8666 2.29839 13.111L2.05399 13.5998L1.50166 13.6829C1.24259 13.722 1.17415 13.8931 1.34035 14.0789L1.7656 14.4943L1.66785 15.0418C1.62385 15.3009 1.7705 15.4182 1.99046 15.3204L2.52324 15.0418L3.05114 15.3204C3.27599 15.4182 3.41774 15.3204 3.37375 15.0418L3.28088 14.4943L3.70613 14.0789C3.87232 13.8931 3.80389 13.722 3.53994 13.6829Z" fill="white"/> +<path d="M5.57119 17.1876L5.01885 17.1045L4.77445 16.6157C4.65225 16.3713 4.45184 16.3713 4.32964 16.6157L4.08524 17.1045L3.5329 17.1876C3.27383 17.2267 3.20541 17.4026 3.3716 17.5835L3.79196 17.999L3.69909 18.5464C3.65509 18.8055 3.79685 18.9228 4.0217 18.825L4.55448 18.5464L5.08239 18.825C5.30724 18.9228 5.44899 18.825 5.405 18.5464L5.31213 17.999L5.73249 17.5835C5.89868 17.3977 5.83514 17.2267 5.57119 17.1876Z" fill="white"/> +<path d="M19.8368 6.46345L19.2894 6.38524L19.0401 5.89644C18.9179 5.64715 18.7175 5.64715 18.5953 5.89644L18.3509 6.38524L17.7985 6.46345C17.5395 6.50255 17.471 6.67852 17.6372 6.85937L18.0625 7.27485L17.9696 7.8272C17.9256 8.08137 18.0674 8.20358 18.2873 8.10582L18.8201 7.8272L19.348 8.10582C19.5729 8.20358 19.7146 8.08137 19.6706 7.8272L19.5778 7.27485L20.003 6.85937C20.1692 6.67852 20.1008 6.50255 19.8368 6.46345Z" fill="white"/> +<path d="M15.7636 6.46345L15.2112 6.38524L14.9668 5.89644C14.8398 5.64715 14.6442 5.64715 14.522 5.89644L14.2727 6.38524L13.7204 6.46345C13.4613 6.50255 13.3929 6.67852 13.5591 6.85937L13.9844 7.27485L13.8915 7.8272C13.8475 8.08137 13.9892 8.20358 14.2141 8.10582L14.742 7.8272L15.2748 8.10582C15.4947 8.20358 15.6414 8.08137 15.5925 7.8272L15.4996 7.27485L15.9249 6.85937C16.0911 6.67852 16.0226 6.50255 15.7636 6.46345Z" fill="white"/> +<path d="M11.693 6.56598L11.1407 6.48289L10.8963 5.99409C10.7741 5.74969 10.5737 5.74969 10.4515 5.99409L10.2022 6.48289L9.65474 6.56598C9.39078 6.60019 9.32235 6.77617 9.48855 6.96192L9.9138 7.37251L9.82093 7.92483C9.77693 8.1839 9.91869 8.30121 10.1435 8.20345L10.6714 7.92483L11.2042 8.20345C11.4291 8.30121 11.5708 8.20345 11.5268 7.92483L11.4291 7.37251L11.8543 6.96192C12.0205 6.77129 11.9521 6.60019 11.693 6.56598Z" fill="white"/> +<path d="M17.7948 10.0706L17.2425 9.98753L16.9932 9.49873C16.871 9.25433 16.6755 9.25433 16.5484 9.49873L16.304 9.98753L15.7517 10.0706C15.4926 10.1097 15.4242 10.2808 15.5903 10.4666L16.0156 10.8771L15.9227 11.4295C15.8739 11.6886 16.0205 11.8059 16.2405 11.7081L16.7732 11.4295L17.306 11.7081C17.526 11.8059 17.6677 11.7081 17.6237 11.4295L17.5309 10.8771L17.9561 10.4666C18.1223 10.2808 18.0539 10.1048 17.7948 10.0706Z" fill="white"/> +<path d="M13.7321 10.0706L13.1797 9.98753L12.9354 9.49873C12.8132 9.25433 12.6127 9.25433 12.4905 9.49873L12.2413 9.98753L11.6938 10.0706C11.4298 10.1097 11.3614 10.2808 11.5276 10.4666L11.9529 10.8771L11.86 11.4295C11.816 11.6886 11.9577 11.8059 12.1826 11.7081L12.7105 11.4295L13.2433 11.7081C13.4633 11.8059 13.6099 11.7081 13.5659 11.4295L13.4681 10.8771L13.8934 10.4666C14.0596 10.2808 13.9912 10.1048 13.7321 10.0706Z" fill="white"/> +<path d="M9.64932 10.0706L9.09697 9.98753L8.85257 9.49873C8.73037 9.25433 8.52996 9.25433 8.40777 9.49873L8.16337 9.98753L7.61102 10.0706C7.35196 10.1097 7.28353 10.2808 7.44972 10.4666L7.87008 10.8771L7.77721 11.4295C7.73322 11.6886 7.87497 11.8059 8.09982 11.7081L8.62773 11.4295L9.16052 11.7081C9.38537 11.8059 9.52712 11.7081 9.48313 11.4295L9.39025 10.8771L9.81061 10.4666C9.97681 10.2808 9.90838 10.1048 9.64932 10.0706Z" fill="white"/> +<path d="M7.61025 6.56598L7.05791 6.48289L6.81351 5.99409C6.69131 5.74481 6.49091 5.74481 6.36871 5.99409L6.12431 6.48289L5.57197 6.56598C5.31291 6.60508 5.24447 6.77618 5.41066 6.96192L5.83103 7.37251L5.73816 7.92484C5.69417 8.1839 5.83592 8.30122 6.06077 8.20346L6.59356 7.92484L7.12145 8.20346C7.3463 8.30122 7.48805 8.20345 7.44406 7.92484L7.35119 7.37251L7.77156 6.96192C7.93775 6.77129 7.86931 6.6002 7.61025 6.56598Z" fill="white"/> +<path d="M3.53994 6.56598L2.99249 6.48289L2.74319 5.99409C2.62099 5.74481 2.42059 5.74481 2.29839 5.99409L2.05399 6.48289L1.50166 6.56598C1.24259 6.60508 1.17415 6.77618 1.34035 6.96192L1.7656 7.37251L1.66785 7.92484C1.62385 8.1839 1.7705 8.30122 1.99046 8.20346L2.52324 7.92484L3.05114 8.20346C3.27599 8.30122 3.41774 8.20345 3.37375 7.92484L3.28088 7.37251L3.70613 6.96192C3.87232 6.77129 3.80389 6.6002 3.53994 6.56598Z" fill="white"/> +<path d="M5.57119 10.0706L5.01885 9.98753L4.77445 9.49873C4.65225 9.25433 4.45184 9.25433 4.32964 9.49873L4.08524 9.98753L3.5329 10.0706C3.27383 10.1097 3.20541 10.2808 3.3716 10.4666L3.79196 10.8771L3.69909 11.4295C3.65509 11.6886 3.79685 11.8059 4.0217 11.7081L4.55448 11.4295L5.08239 11.7081C5.30724 11.8059 5.44899 11.7081 5.405 11.4295L5.31213 10.8771L5.73249 10.4666C5.89868 10.2808 5.83514 10.1048 5.57119 10.0706Z" fill="white"/> +<path d="M17.8065 2.94392L17.2737 2.86082L17.0244 2.37202C16.9022 2.12274 16.7067 2.12274 16.5796 2.37202L16.3352 2.86082L15.7829 2.94392C15.5238 2.97814 15.4554 3.15411 15.6216 3.33985L16.0468 3.75044L15.954 4.30278C15.9051 4.56185 16.0517 4.67915 16.2717 4.58139L16.7849 4.32722L17.3177 4.60584C17.5377 4.7036 17.6794 4.60583 17.6354 4.32722L17.5426 3.77487L17.9678 3.36428C18.134 3.1541 18.0656 2.97814 17.8065 2.94392Z" fill="white"/> +<path d="M13.7321 2.94392L13.1797 2.86082L12.9354 2.37202C12.8132 2.12274 12.6127 2.12274 12.4905 2.37202L12.2413 2.86082L11.6938 2.94392C11.4298 2.97814 11.3614 3.15411 11.5276 3.33985L11.9529 3.75044L11.86 4.30278C11.816 4.56185 11.9577 4.67915 12.1826 4.58139L12.7105 4.30278L13.2433 4.58139C13.4633 4.67915 13.6099 4.5814 13.5659 4.30278L13.4681 3.75044L13.8934 3.33985C14.0596 3.15411 13.9912 2.97814 13.7321 2.94392Z" fill="white"/> +<path d="M9.64932 2.94392L9.09697 2.86082L8.85257 2.37202C8.73037 2.12274 8.52996 2.12274 8.40777 2.37202L8.16337 2.86082L7.61102 2.94392C7.35196 2.97814 7.28353 3.15411 7.44972 3.33985L7.87008 3.75044L7.77721 4.30278C7.73322 4.56185 7.87497 4.67915 8.09982 4.58139L8.62773 4.30278L9.16052 4.58139C9.38537 4.67915 9.52712 4.5814 9.48313 4.30278L9.39025 3.75044L9.81061 3.33985C9.97681 3.15411 9.90838 2.97814 9.64932 2.94392Z" fill="white"/> +<path d="M5.57119 2.94392L5.01885 2.86082L4.77445 2.37202C4.65225 2.12274 4.45184 2.12274 4.32964 2.37202L4.08524 2.86082L3.5329 2.94392C3.27383 2.97814 3.20541 3.15411 3.3716 3.33985L3.79196 3.75044L3.69909 4.30278C3.65509 4.56185 3.79685 4.67915 4.0217 4.58139L4.55938 4.32722L5.08727 4.60584C5.31212 4.7036 5.45387 4.60583 5.40988 4.32722L5.31701 3.77487L5.73738 3.36428C5.89869 3.1541 5.83514 2.97814 5.57119 2.94392Z" fill="white"/> +</g> +<defs> +<clipPath id="clip0_8928_23610"> +<rect width="36" height="36" fill="white" transform="translate(0 0.5)"/> +</clipPath> +</defs> +</svg> From 7589d943e9a0065a35c9e704da01b72a51185adb Mon Sep 17 00:00:00 2001 From: Breno <breno@estuary.dev> Date: Mon, 21 Oct 2024 05:12:26 -0300 Subject: [PATCH 6/8] Add missing deployment mode diagrams --- .../DeploymentDiagram/index.tsx | 187 ++++++++++++++++++ .../Homepage/DeploymentModes/index.tsx | 110 ++--------- .../DeploymentModes/styles.module.less | 99 ++++++++-- src/svgs/customer-vpc-icon.svg | 3 - src/svgs/database-icon.svg | 51 ++--- src/svgs/flow-storage-icon.svg | 39 ++-- src/svgs/private-data-plane-icon.svg | 7 + src/svgs/vpc-icon.svg | 14 ++ 8 files changed, 359 insertions(+), 151 deletions(-) create mode 100644 src/components/Homepage/DeploymentModes/DeploymentDiagram/index.tsx delete mode 100644 src/svgs/customer-vpc-icon.svg create mode 100644 src/svgs/private-data-plane-icon.svg create mode 100644 src/svgs/vpc-icon.svg diff --git a/src/components/Homepage/DeploymentModes/DeploymentDiagram/index.tsx b/src/components/Homepage/DeploymentModes/DeploymentDiagram/index.tsx new file mode 100644 index 00000000..d83ae4e1 --- /dev/null +++ b/src/components/Homepage/DeploymentModes/DeploymentDiagram/index.tsx @@ -0,0 +1,187 @@ +import React from 'react'; +import clsx from 'clsx'; +import CloudProviderIcon from '../../../../svgs/cloud-provider-icon.svg'; +import CustomerCloudIcon from '../../../../svgs/customer-cloud-icon.svg'; +import ControlPlaneIcon from '../../../../svgs/control-plane-icon.svg'; +import VpcIcon from '../../../../svgs/vpc-icon.svg'; +import DatabaseIcon from '../../../../svgs/database-icon.svg'; +import FlowStorageIcon from '../../../../svgs/flow-storage-icon.svg'; +import UsaFlagIcon from '../../../../svgs/usa-flag-icon.svg'; +import EuropeFlagIcon from '../../../../svgs/europe-flag-icon.svg'; +import PrivateDataPlaneIcon from '../../../../svgs/private-data-plane-icon.svg'; +import { + solidBorderBox, + secondLevelSolidBorderBox, + dashedBorderBox, + middleTag, + arrowLeft, + arrowRight, + horizontalWrapper, + minHeight, + privateLinkTag, + vpcMarginBottom, + privateDeploymentTag, + privateVpcBox, + metadataOnlyDarkerBlueTag, + metadataOnlyLighterBlueTag, + relativePosition, +} from '../styles.module.less'; + +const iconSize = 30; + +interface DeploymentDiagramProps { + selectedTab: string; +} + +const DeploymentDiagram = ({ selectedTab = '1' }: DeploymentDiagramProps) => { + return ( + <> + <div className={solidBorderBox}> + <div className={dashedBorderBox}> + <CloudProviderIcon width={iconSize} /> + <span>Estuary Cloud provider & Region</span> + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox, + minHeight + )} + > + <ControlPlaneIcon width={iconSize} /> + <span>Control Plane</span> + </div> + {selectedTab === '1' ? ( + <div className={horizontalWrapper}> + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox + )} + > + <UsaFlagIcon width={iconSize} /> + <span>US Data Plane</span> + </div> + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox + )} + > + <EuropeFlagIcon width={iconSize} /> + <span>EU Data Plane</span> + </div> + </div> + ) : null} + </div> + </div> + <div className={clsx(solidBorderBox, relativePosition)}> + <div className={dashedBorderBox}> + <CustomerCloudIcon width={iconSize} /> + <span> + {selectedTab === '1' + ? 'Customer Cloud' + : 'Customer Cloud & Region'} + </span> + <div className={horizontalWrapper}> + {selectedTab === '2' ? ( + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox, + privateVpcBox + )} + > + <VpcIcon width={iconSize} /> + <span className={vpcMarginBottom}> + Private Deployment VPC + </span> + <div className={dashedBorderBox}> + <PrivateDataPlaneIcon width={iconSize} /> + <span>Private Data Plane</span> + </div> + <div + className={clsx( + middleTag, + privateDeploymentTag, + privateLinkTag + )} + > + <div className={arrowLeft} /> + <span>PrivateLink</span> + <div className={arrowRight} /> + </div> + <div + className={clsx( + middleTag, + privateDeploymentTag, + metadataOnlyDarkerBlueTag + )} + > + <div className={arrowLeft} /> + <span>metadata only</span> + <div className={arrowRight} /> + </div> + </div> + ) : null} + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox + )} + > + <VpcIcon width={iconSize} /> + <span + className={ + selectedTab === '2' ? vpcMarginBottom : null + } + > + Customer VPC + </span> + <div className={horizontalWrapper}> + {selectedTab === '3' ? ( + <div className={dashedBorderBox}> + <PrivateDataPlaneIcon + width={iconSize} + /> + <span>Private Data Plane</span> + </div> + ) : null} + <div + className={clsx( + solidBorderBox, + secondLevelSolidBorderBox + )} + > + <DatabaseIcon width={iconSize} /> + <span>Database</span> + </div> + </div> + <div className={dashedBorderBox}> + <FlowStorageIcon width={iconSize} /> + <span>Flow Storage</span> + </div> + </div> + </div> + </div> + {['1', '3'].includes(selectedTab) ? ( + <div + className={clsx( + middleTag, + selectedTab === '3' + ? metadataOnlyLighterBlueTag + : null + )} + > + <div className={arrowLeft} /> + <span> + {selectedTab === '1' ? 'Internet' : 'metadata only'} + </span> + <div className={arrowRight} /> + </div> + ) : null} + </div> + </> + ); +}; + +export default DeploymentDiagram; diff --git a/src/components/Homepage/DeploymentModes/index.tsx b/src/components/Homepage/DeploymentModes/index.tsx index 5b45747c..0a0de356 100644 --- a/src/components/Homepage/DeploymentModes/index.tsx +++ b/src/components/Homepage/DeploymentModes/index.tsx @@ -3,30 +3,10 @@ import TabContext from '@mui/lab/TabContext'; import Tab from '@mui/material/Tab'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; -import clsx from 'clsx'; import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; -import CloudProviderIcon from '../../../svgs/cloud-provider-icon.svg'; -import CustomerCloudIcon from '../../../svgs/customer-cloud-icon.svg'; -import ControlPlaneIcon from '../../../svgs/control-plane-icon.svg'; -import CustomerVpcIcon from '../../../svgs/customer-vpc-icon.svg'; -import DatabaseIcon from '../../../svgs/database-icon.svg'; -import FlowStorageIcon from '../../../svgs/flow-storage-icon.svg'; -import UsaFlagIcon from '../../../svgs/usa-flag-icon.svg'; -import EuropeFlagIcon from '../../../svgs/europe-flag-icon.svg'; -import { - container, - leftColumn, - solidBorderBox, - secondLevelSolidBorderBox, - dashedBorderBox, - middleTag, - arrowLeft, - arrowRight, - horizontalWrapper, - minHeight, - rightColumn, -} from './styles.module.less'; +import { container, leftColumn, rightColumn } from './styles.module.less'; import DeploymentOptionDetails from './DeploymentOptionDetails'; +import DeploymentDiagram from './DeploymentDiagram'; const tabStyling = { 'color': '#5072EB', @@ -76,8 +56,6 @@ const byocFeatures = [ const tabPanelStyling = { padding: '40px 0 0 0', minHeight: '458px' }; -const iconSize = 30; - const DeploymentModes = () => { const [selectedTab, setSelectedTab] = React.useState('1'); @@ -89,75 +67,15 @@ const DeploymentModes = () => { <section className={defaultWrapperGrey}> <div className={container}> <div className={leftColumn}> - <div className={solidBorderBox}> - <div className={dashedBorderBox}> - <CloudProviderIcon width={iconSize} /> - <span>Estuary Cloud provider & Region</span> - <div - className={clsx( - solidBorderBox, - secondLevelSolidBorderBox, - minHeight - )} - > - <ControlPlaneIcon width={iconSize} /> - <span>Control Plane</span> - </div> - <div className={horizontalWrapper}> - <div - className={clsx( - solidBorderBox, - secondLevelSolidBorderBox - )} - > - <UsaFlagIcon width={iconSize} /> - <span>US Data Plane</span> - </div> - <div - className={clsx( - solidBorderBox, - secondLevelSolidBorderBox - )} - > - <EuropeFlagIcon width={iconSize} /> - <span>EU Data Plane</span> - </div> - </div> - </div> - </div> - <div className={middleTag}> - <div className={arrowLeft} /> - <span>Internet</span> - <div className={arrowRight} /> - </div> - <div className={solidBorderBox}> - <div className={dashedBorderBox}> - <CustomerCloudIcon width={iconSize} /> - <span>Customer Cloud</span> - <div - className={clsx( - solidBorderBox, - secondLevelSolidBorderBox - )} - > - <CustomerVpcIcon width={iconSize} /> - <span>Customer VPC</span> - <div - className={clsx( - solidBorderBox, - secondLevelSolidBorderBox - )} - > - <DatabaseIcon width={iconSize} /> - <span>Database</span> - </div> - <div className={dashedBorderBox}> - <FlowStorageIcon width={iconSize} /> - <span>Flow Storage</span> - </div> - </div> - </div> - </div> + {selectedTab === '1' ? ( + <DeploymentDiagram selectedTab="1" /> + ) : null} + {selectedTab === '2' ? ( + <DeploymentDiagram selectedTab="2" /> + ) : null} + {selectedTab === '3' ? ( + <DeploymentDiagram selectedTab="3" /> + ) : null} </div> <div className={rightColumn}> <h2> @@ -189,21 +107,21 @@ const DeploymentModes = () => { disableRipple /> </TabList> - <TabPanel value="1" sx={tabPanelStyling}> + <TabPanel value="1" sx={tabPanelStyling} keepMounted> <DeploymentOptionDetails title="PUBLIC DEPLOYMENT" description="Public Deployment is the standard SaaS offering from Estuary Flow. Ideal for small to medium-sized businesses or teams that want a hassle-free, quick-to-implement solution without the need for extensive customization or heightened security measures." keyFeatures={publicDeploymentFeatures} /> </TabPanel> - <TabPanel value="2" sx={tabPanelStyling}> + <TabPanel value="2" sx={tabPanelStyling} keepMounted> <DeploymentOptionDetails title="PRIVATE DEPLOYMENT" description="Private Deployment allows customers to run Estuary Flow's data infrastructure within their private environment while maintaining the simplicity of a SaaS platform. Suitable for enterprises and organizations with strict data security and compliance needs, such as those in highly regulated industries or handling sensitive data." keyFeatures={privateDeploymentFeatures} /> </TabPanel> - <TabPanel value="3" sx={tabPanelStyling}> + <TabPanel value="3" sx={tabPanelStyling} keepMounted> <DeploymentOptionDetails title="BRING YOUR OWN CLOUD" description="BYOC allows customers to deploy Estuary Flow in their own cloud environment. Ideal for organizations that have invested heavily in their cloud infrastructure and want to maintain ownership over their entire stack while benefiting from Estuary Flow's capabilities." diff --git a/src/components/Homepage/DeploymentModes/styles.module.less b/src/components/Homepage/DeploymentModes/styles.module.less index 874851b7..7631d30e 100644 --- a/src/components/Homepage/DeploymentModes/styles.module.less +++ b/src/components/Homepage/DeploymentModes/styles.module.less @@ -32,7 +32,7 @@ @media (max-width: 360px) { max-width: 100vw; - + h2 { font-size: 1.5rem; line-height: 30px; @@ -46,7 +46,7 @@ grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; - gap: 40px; + gap: 20px; position: relative; max-width: 536px; width: 100%; @@ -61,8 +61,6 @@ } @media (max-width: 600px) { - gap: 20px; - svg { max-width: 20px; max-height: 20px; @@ -101,6 +99,10 @@ } } +.relativePosition { + position: relative; +} + .dashedBorderBox { border: 1px dashed #A4B6F4B2; border-radius: 12px; @@ -110,6 +112,7 @@ display: flex; flex-direction: column; align-items: center; + justify-content: center; gap: 16px; width: 100%; height: 100%; @@ -142,9 +145,8 @@ .middleTag { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + top: 46%; + left: -55%; text-align: center; display: flex; align-items: center; @@ -155,34 +157,49 @@ font-size: 0.875rem; font-weight: 700; padding: 4px 12px; + white-space: nowrap; min-width: 116px; @media (max-width: 600px) { min-width: 70px; - font-size: 0.75rem; + font-size: 0.6rem; + padding: 2px 0; } } } -.arrowRight { +.arrowLeft { width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; - border-left: 14px solid #6ED5D6; + border-right: 14px solid #6ED5D6; + + @media (max-width: 600px) { + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + border-right: 9px solid #6ED5D6; + } } -.arrowLeft { +.arrowRight { width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; - border-right: 14px solid #6ED5D6; + border-left: 14px solid #6ED5D6; + + @media (max-width: 600px) { + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + border-left: 9px solid #6ED5D6; + } } .horizontalWrapper { display: flex; align-items: center; + justify-content: center; gap: 16px; @media (max-width: 600px) { @@ -202,4 +219,62 @@ span { font-weight: 500; } +} + +.vpcMarginBottom { + margin-bottom: 54px; + + @media (max-width: 600px) { + margin-bottom: 26px; + } +} + +.privateVpcBox { + position: relative; +} + +.privateDeploymentTag { + span { + min-width: auto; + padding: 7px 8px; + } + + @media (max-width: 600px) { + span { + padding: 2px 0; + } + } +} + +.privateLinkTag { + top: 29%; + left: 50%; + + @media (max-width: 600px) { + top: 31.8%; + } +} + +.metadataOnlyDarkerBlueTag { + top: 88%; + left: -115%; + + span { + background-color: #5072EB; + } + + .arrowLeft { + border-right-color: #5072EB; + } + + .arrowRight { + border-left-color: #5072EB; + } + + + @media (max-width: 600px) { + span { + min-width: 80px; + } + } } \ No newline at end of file diff --git a/src/svgs/customer-vpc-icon.svg b/src/svgs/customer-vpc-icon.svg deleted file mode 100644 index 37fdf899..00000000 --- a/src/svgs/customer-vpc-icon.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M28.5011 22.4999V21.9999C28.5011 21.3369 28.2377 20.701 27.7689 20.2322C27.3 19.7633 26.6641 19.4999 26.0011 19.4999C25.458 19.5015 24.9306 19.6825 24.5011 20.0149V19.3299C26.0785 18.9858 27.4882 18.1063 28.4908 16.8408C29.4934 15.5752 30.027 14.0017 30.0011 12.3874C29.9752 10.7731 29.3913 9.21748 28.3486 7.98478C27.306 6.75208 25.8688 5.91827 24.2811 5.62495C23.9931 4.71638 23.4228 3.92339 22.653 3.36135C21.8832 2.79931 20.9542 2.49754 20.0011 2.49995C19.452 2.49838 18.9075 2.60015 18.3961 2.79995C17.5053 1.87263 16.3907 1.19038 15.1597 0.818931C13.9287 0.447483 12.6227 0.399361 11.3677 0.679204C10.1127 0.959046 8.95091 1.55742 7.99431 2.41666C7.03771 3.2759 6.31854 4.36705 5.9061 5.58495C4.29488 5.83906 2.8231 6.64818 1.74521 7.87242C0.667315 9.09665 0.051078 10.659 0.00303706 12.2895C-0.0450039 13.9199 0.478171 15.5159 1.48211 16.8015C2.48605 18.087 3.90764 18.9814 5.5011 19.3299V27.9999C5.5011 29.9749 11.4711 30.4999 15.0011 30.4999C17.4214 30.5456 19.8377 30.2818 22.1911 29.7149C22.3189 29.9513 22.508 30.1489 22.7385 30.2871C22.969 30.4252 23.2324 30.4987 23.5011 30.4999H28.5011C28.8986 30.4988 29.2794 30.3403 29.5604 30.0593C29.8415 29.7782 29.9999 29.3974 30.0011 28.9999V23.9999C29.9999 23.6025 29.8415 23.2216 29.5604 22.9406C29.2794 22.6595 28.8986 22.5011 28.5011 22.4999ZM26.0011 20.4999C26.3986 20.5011 26.7794 20.6595 27.0604 20.9406C27.3415 21.2216 27.4999 21.6025 27.5011 21.9999V22.4999H24.5011V21.9999C24.5023 21.6025 24.6607 21.2216 24.9418 20.9406C25.2228 20.6595 25.6036 20.5011 26.0011 20.4999ZM5.5011 15.9999V18.3049C4.14409 17.9525 2.95335 17.136 2.13561 15.9971C1.31788 14.8582 0.924791 13.469 1.0246 12.0705C1.1244 10.672 1.7108 9.35265 2.68198 8.34146C3.65316 7.33026 4.94779 6.6911 6.3411 6.53495C6.43937 6.5252 6.53243 6.48614 6.60822 6.42284C6.68401 6.35953 6.73901 6.27491 6.7661 6.17995C7.09082 5.06038 7.71123 4.04901 8.56206 3.25217C9.4129 2.45534 10.4627 1.9025 11.6012 1.65179C12.7396 1.40108 13.9245 1.46177 15.0314 1.82747C16.1383 2.19317 17.1261 2.85036 17.8911 3.72995C17.963 3.81302 18.0604 3.86987 18.1681 3.89159C18.2758 3.91331 18.3876 3.89866 18.4861 3.84995C18.9579 3.61952 19.476 3.49981 20.0011 3.49995C20.7868 3.49849 21.55 3.76233 22.1671 4.24873C22.7842 4.73513 23.219 5.41561 23.4011 6.17995C23.4242 6.27762 23.4761 6.36609 23.5501 6.43387C23.6241 6.50164 23.7168 6.54557 23.8161 6.55995C25.193 6.74749 26.4621 7.40761 27.4061 8.4274C28.3501 9.44718 28.9105 10.7633 28.9914 12.1506C29.0723 13.5379 28.6687 14.9102 27.8497 16.0328C27.0306 17.1554 25.8469 17.9586 24.5011 18.3049V15.9999C24.5011 14.0249 18.5311 13.4999 15.0011 13.4999C11.4711 13.4999 5.5011 14.0249 5.5011 15.9999ZM23.5011 15.9949C23.3311 16.5249 20.2861 17.4999 15.0011 17.4999C9.7161 17.4999 6.6611 16.5199 6.5011 16.0049C6.6711 15.4749 9.7161 14.4999 15.0011 14.4999C20.2861 14.4999 23.3411 15.4749 23.5011 15.9949ZM22.0011 23.9999V28.7299C19.7109 29.2886 17.3579 29.5474 15.0011 29.4999C9.6961 29.4999 6.6461 28.5199 6.5011 27.9999V23.2299C8.3511 24.2049 12.3611 24.4999 15.0011 24.4999C17.3632 24.53 19.7207 24.285 22.0261 23.7699C22.0101 23.8456 22.0017 23.9226 22.0011 23.9999ZM15.0011 23.4999C9.6961 23.4999 6.6461 22.5199 6.5011 21.9999V17.2299C8.3511 18.2049 12.3611 18.4999 15.0011 18.4999C17.6411 18.4999 21.6511 18.2049 23.5011 17.2299V21.9949C23.3461 22.5199 20.2961 23.4999 15.0011 23.4999ZM29.0011 28.9999C29.0011 29.1326 28.9484 29.2597 28.8547 29.3535C28.7609 29.4473 28.6337 29.4999 28.5011 29.4999H23.5011C23.3685 29.4999 23.2413 29.4473 23.1475 29.3535C23.0538 29.2597 23.0011 29.1326 23.0011 28.9999V23.9999C23.0011 23.8673 23.0538 23.7402 23.1475 23.6464C23.2413 23.5526 23.3685 23.4999 23.5011 23.4999H28.5011C28.6337 23.4999 28.7609 23.5526 28.8547 23.6464C28.9484 23.7402 29.0011 23.8673 29.0011 23.9999V28.9999Z" fill="#5072EB"/> -</svg> diff --git a/src/svgs/database-icon.svg b/src/svgs/database-icon.svg index e3767938..9402e61d 100644 --- a/src/svgs/database-icon.svg +++ b/src/svgs/database-icon.svg @@ -1,23 +1,30 @@ -<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M22.4414 21.2324L21.7344 21.9394L23.1484 23.3534C23.2421 23.4472 23.3693 23.4998 23.5019 23.4998C23.6345 23.4998 23.7616 23.4472 23.8554 23.3534L26.6839 20.5249L25.9769 19.8179L23.5019 22.2929L22.4414 21.2324Z" fill="#5072EB"/> -<path d="M29.6894 17.04L28.6644 16.61C29.3584 15.6545 29.7991 14.5388 29.9454 13.3669C30.0917 12.195 29.9388 11.0052 29.5009 9.90836C29.0631 8.81155 28.3546 7.84349 27.4416 7.09449C26.5285 6.34549 25.4406 5.83994 24.2794 5.62501C23.9914 4.71644 23.421 3.92345 22.6513 3.36141C21.8815 2.79937 20.9525 2.49761 19.9994 2.50001C19.4503 2.49844 18.9058 2.60021 18.3944 2.80001C17.5036 1.87269 16.389 1.19044 15.158 0.818992C13.9269 0.447544 12.621 0.399422 11.366 0.679265C10.111 0.959107 8.94918 1.55748 7.99257 2.41672C7.03597 3.27596 6.3168 4.36711 5.90436 5.58501C4.22729 5.85467 2.70549 6.72493 1.62259 8.0336C0.53969 9.34227 -0.0304143 11 0.0185344 12.698C0.067483 14.3959 0.732145 16.018 1.88864 17.2622C3.04513 18.5063 4.61454 19.2874 6.30436 19.46C6.36605 19.4862 6.43235 19.4998 6.49936 19.5V22C6.49936 22.1326 6.55204 22.2598 6.64581 22.3536C6.73958 22.4473 6.86675 22.5 6.99936 22.5H8.49936V23.5H6.99936C6.86675 23.5 6.73958 23.5527 6.64581 23.6465C6.55204 23.7402 6.49936 23.8674 6.49936 24V30C6.49936 30.1326 6.55204 30.2598 6.64581 30.3536C6.73958 30.4473 6.86675 30.5 6.99936 30.5H22.9994C23.0877 30.4965 23.1737 30.4707 23.2494 30.425C23.3246 30.4717 23.4109 30.4976 23.4994 30.5C23.632 30.4995 23.7593 30.4475 23.8544 30.355L28.3894 25.82C28.9018 25.3104 29.3079 24.7041 29.5843 24.0364C29.8607 23.3686 30.0017 22.6527 29.9994 21.93V17.5C29.9997 17.4011 29.9704 17.3044 29.9151 17.2223C29.8598 17.1403 29.7812 17.0768 29.6894 17.04ZM6.49936 16V18.47C5.01354 18.3474 3.62671 17.6756 2.60947 16.5857C1.59222 15.4957 1.01754 14.0659 0.997555 12.5752C0.97757 11.0845 1.51372 9.63975 2.50138 8.52296C3.48904 7.40617 4.85736 6.69742 6.33936 6.53501C6.43763 6.52526 6.53069 6.4862 6.60648 6.4229C6.68227 6.35959 6.73728 6.27497 6.76436 6.18001C7.08909 5.06044 7.70949 4.04907 8.56033 3.25224C9.41117 2.4554 10.461 1.90256 11.5994 1.65186C12.7379 1.40115 13.9228 1.46183 15.0297 1.82753C16.1365 2.19323 17.1244 2.85042 17.8894 3.73001C17.9612 3.81308 18.0587 3.86993 18.1664 3.89165C18.2741 3.91337 18.3859 3.89872 18.4844 3.85001C18.9562 3.61958 19.4743 3.49987 19.9994 3.50001C20.7851 3.49855 21.5483 3.76239 22.1654 4.24879C22.7825 4.73519 23.2173 5.41567 23.3994 6.18001C23.4224 6.27768 23.4743 6.36616 23.5483 6.43393C23.6223 6.5017 23.715 6.54563 23.8144 6.56001C25.2484 6.76127 26.5619 7.47253 27.5142 8.56346C28.4664 9.65439 28.9937 11.0519 28.9994 12.5C28.9997 13.8476 28.5432 15.1554 27.7044 16.21L23.6894 14.54C23.6297 14.5128 23.5649 14.4987 23.4994 14.4987C23.4338 14.4987 23.369 14.5128 23.3094 14.54L21.4994 15.29V14.5H22.9994C23.132 14.5 23.2591 14.4473 23.3529 14.3536C23.4467 14.2598 23.4994 14.1326 23.4994 14V8.00001C23.4994 7.8674 23.4467 7.74022 23.3529 7.64645C23.2591 7.55269 23.132 7.50001 22.9994 7.50001H6.99936C6.86675 7.50001 6.73958 7.55269 6.64581 7.64645C6.55204 7.74022 6.49936 7.8674 6.49936 8.00001V14C6.49936 14.1326 6.55204 14.2598 6.64581 14.3536C6.73958 14.4473 6.86675 14.5 6.99936 14.5H8.49936V15.5H6.99936C6.86675 15.5 6.73958 15.5527 6.64581 15.6465C6.55204 15.7402 6.49936 15.8674 6.49936 16ZM7.49936 13.5V8.50001H22.4994V13.5H7.49936ZM20.4994 14.5V15.5H9.49936V14.5H20.4994ZM7.49936 21.5V16.5H18.5994L17.3094 17.04C17.2175 17.0768 17.1389 17.1403 17.0836 17.2223C17.0283 17.3044 16.999 17.4011 16.9994 17.5V21.5H7.49936ZM17.2294 23.5H9.49936V22.5H17.0294C17.0632 22.8391 17.1302 23.174 17.2294 23.5ZM7.49936 29.5V24.5H17.6344C17.892 24.986 18.2206 25.4309 18.6094 25.82L22.2944 29.5H7.49936ZM28.9994 21.93C29.0004 22.521 28.8843 23.1063 28.6577 23.6522C28.4312 24.198 28.0986 24.6935 27.6794 25.11L23.4994 29.295L19.3194 25.11C18.9001 24.6935 18.5675 24.198 18.341 23.6522C18.1144 23.1063 17.9983 22.521 17.9994 21.93V17.835L23.4994 15.54L28.9994 17.835V21.93Z" fill="#5072EB"/> -<path d="M28.19 18.04L23.69 16.165C23.6304 16.1378 23.5656 16.1237 23.5 16.1237C23.4345 16.1237 23.3697 16.1378 23.31 16.165L18.81 18.04C18.7182 18.0768 18.6395 18.1403 18.5843 18.2223C18.529 18.3044 18.4996 18.4011 18.5 18.5V21.93C18.4987 22.4549 18.6014 22.9747 18.8022 23.4596C19.0031 23.9445 19.298 24.3848 19.67 24.755L23.145 28.23C23.1911 28.2775 23.2463 28.3152 23.3073 28.341C23.3683 28.3668 23.4338 28.3801 23.5 28.3801C23.5662 28.3801 23.6317 28.3668 23.6927 28.341C23.7537 28.3152 23.8089 28.2775 23.855 28.23L27.33 24.755C27.702 24.3848 27.997 23.9445 28.1978 23.4596C28.3986 22.9747 28.5013 22.4549 28.5 21.93V18.5C28.5004 18.4011 28.471 18.3044 28.4158 18.2223C28.3605 18.1403 28.2818 18.0768 28.19 18.04ZM27.5 21.93C27.5016 22.3241 27.4247 22.7146 27.2736 23.0787C27.1225 23.4427 26.9003 23.7729 26.62 24.05L23.5 27.17L20.38 24.05C20.0997 23.7729 19.8776 23.4427 19.7265 23.0787C19.5754 22.7146 19.4984 22.3241 19.5 21.93V18.835L23.5 17.165L27.5 18.835V21.93Z" fill="#5072EB"/> -<path d="M10 9.5C9.70333 9.5 9.41332 9.58797 9.16665 9.7528C8.91997 9.91762 8.72771 10.1519 8.61418 10.426C8.50065 10.7001 8.47094 11.0017 8.52882 11.2926C8.5867 11.5836 8.72956 11.8509 8.93934 12.0607C9.14912 12.2704 9.41639 12.4133 9.70736 12.4712C9.99834 12.5291 10.2999 12.4994 10.574 12.3858C10.8481 12.2723 11.0824 12.08 11.2472 11.8334C11.412 11.5867 11.5 11.2967 11.5 11C11.5 10.6022 11.342 10.2206 11.0607 9.93934C10.7794 9.65804 10.3978 9.5 10 9.5ZM10 11.5C9.90111 11.5 9.80444 11.4707 9.72222 11.4157C9.63999 11.3608 9.5759 11.2827 9.53806 11.1913C9.50022 11.1 9.49032 10.9994 9.50961 10.9025C9.5289 10.8055 9.57652 10.7164 9.64645 10.6464C9.71637 10.5765 9.80546 10.5289 9.90246 10.5096C9.99945 10.4903 10.1 10.5002 10.1913 10.5381C10.2827 10.5759 10.3608 10.64 10.4157 10.7222C10.4707 10.8044 10.5 10.9011 10.5 11C10.5 11.1326 10.4473 11.2598 10.3536 11.3536C10.2598 11.4473 10.1326 11.5 10 11.5Z" fill="#5072EB"/> -<path d="M14 9.5C13.7033 9.5 13.4133 9.58797 13.1666 9.7528C12.92 9.91762 12.7277 10.1519 12.6142 10.426C12.5006 10.7001 12.4709 11.0017 12.5288 11.2926C12.5867 11.5836 12.7296 11.8509 12.9393 12.0607C13.1491 12.2704 13.4164 12.4133 13.7074 12.4712C13.9983 12.5291 14.2999 12.4994 14.574 12.3858C14.8481 12.2723 15.0824 12.08 15.2472 11.8334C15.412 11.5867 15.5 11.2967 15.5 11C15.5 10.6022 15.342 10.2206 15.0607 9.93934C14.7794 9.65804 14.3978 9.5 14 9.5ZM14 11.5C13.9011 11.5 13.8044 11.4707 13.7222 11.4157C13.64 11.3608 13.5759 11.2827 13.5381 11.1913C13.5002 11.1 13.4903 10.9994 13.5096 10.9025C13.5289 10.8055 13.5765 10.7164 13.6464 10.6464C13.7164 10.5765 13.8055 10.5289 13.9025 10.5096C13.9994 10.4903 14.1 10.5002 14.1913 10.5381C14.2827 10.5759 14.3608 10.64 14.4157 10.7222C14.4707 10.8044 14.5 10.9011 14.5 11C14.5 11.1326 14.4473 11.2598 14.3536 11.3536C14.2598 11.4473 14.1326 11.5 14 11.5Z" fill="#5072EB"/> -<path d="M17 9.5H18V10.5H17V9.5Z" fill="#5072EB"/> -<path d="M17 11.5H18V12.5H17V11.5Z" fill="#5072EB"/> -<path d="M20 9.5H21V10.5H20V9.5Z" fill="#5072EB"/> -<path d="M20 11.5H21V12.5H20V11.5Z" fill="#5072EB"/> -<path d="M10 17.5C9.70333 17.5 9.41332 17.588 9.16665 17.7528C8.91997 17.9176 8.72771 18.1519 8.61418 18.426C8.50065 18.7001 8.47094 19.0017 8.52882 19.2926C8.5867 19.5836 8.72956 19.8509 8.93934 20.0607C9.14912 20.2704 9.41639 20.4133 9.70736 20.4712C9.99834 20.5291 10.2999 20.4993 10.574 20.3858C10.8481 20.2723 11.0824 20.08 11.2472 19.8334C11.412 19.5867 11.5 19.2967 11.5 19C11.5 18.6022 11.342 18.2206 11.0607 17.9393C10.7794 17.658 10.3978 17.5 10 17.5ZM10 19.5C9.90111 19.5 9.80444 19.4707 9.72222 19.4157C9.63999 19.3608 9.5759 19.2827 9.53806 19.1913C9.50022 19.1 9.49032 18.9994 9.50961 18.9025C9.5289 18.8055 9.57652 18.7164 9.64645 18.6464C9.71637 18.5765 9.80546 18.5289 9.90246 18.5096C9.99945 18.4903 10.1 18.5002 10.1913 18.5381C10.2827 18.5759 10.3608 18.64 10.4157 18.7222C10.4707 18.8044 10.5 18.9011 10.5 19C10.5 19.1326 10.4473 19.2598 10.3536 19.3536C10.2598 19.4473 10.1326 19.5 10 19.5Z" fill="#5072EB"/> -<path d="M14 17.5C13.7033 17.5 13.4133 17.588 13.1666 17.7528C12.92 17.9176 12.7277 18.1519 12.6142 18.426C12.5006 18.7001 12.4709 19.0017 12.5288 19.2926C12.5867 19.5836 12.7296 19.8509 12.9393 20.0607C13.1491 20.2704 13.4164 20.4133 13.7074 20.4712C13.9983 20.5291 14.2999 20.4993 14.574 20.3858C14.8481 20.2723 15.0824 20.08 15.2472 19.8334C15.412 19.5867 15.5 19.2967 15.5 19C15.5 18.6022 15.342 18.2206 15.0607 17.9393C14.7794 17.658 14.3978 17.5 14 17.5ZM14 19.5C13.9011 19.5 13.8044 19.4707 13.7222 19.4157C13.64 19.3608 13.5759 19.2827 13.5381 19.1913C13.5002 19.1 13.4903 18.9994 13.5096 18.9025C13.5289 18.8055 13.5765 18.7164 13.6464 18.6464C13.7164 18.5765 13.8055 18.5289 13.9025 18.5096C13.9994 18.4903 14.1 18.5002 14.1913 18.5381C14.2827 18.5759 14.3608 18.64 14.4157 18.7222C14.4707 18.8044 14.5 18.9011 14.5 19C14.5 19.1326 14.4473 19.2598 14.3536 19.3536C14.2598 19.4473 14.1326 19.5 14 19.5Z" fill="#5072EB"/> -<path d="M10 25.5C9.70333 25.5 9.41332 25.588 9.16665 25.7528C8.91997 25.9176 8.72771 26.1519 8.61418 26.426C8.50065 26.7001 8.47094 27.0017 8.52882 27.2926C8.5867 27.5836 8.72956 27.8509 8.93934 28.0607C9.14912 28.2704 9.41639 28.4133 9.70736 28.4712C9.99834 28.5291 10.2999 28.4993 10.574 28.3858C10.8481 28.2723 11.0824 28.08 11.2472 27.8334C11.412 27.5867 11.5 27.2967 11.5 27C11.5 26.6022 11.342 26.2206 11.0607 25.9393C10.7794 25.658 10.3978 25.5 10 25.5ZM10 27.5C9.90111 27.5 9.80444 27.4707 9.72222 27.4157C9.63999 27.3608 9.5759 27.2827 9.53806 27.1913C9.50022 27.1 9.49032 26.9994 9.50961 26.9025C9.5289 26.8055 9.57652 26.7164 9.64645 26.6464C9.71637 26.5765 9.80546 26.5289 9.90246 26.5096C9.99945 26.4903 10.1 26.5002 10.1913 26.5381C10.2827 26.5759 10.3608 26.64 10.4157 26.7222C10.4707 26.8044 10.5 26.9011 10.5 27C10.5 27.1326 10.4473 27.2598 10.3536 27.3536C10.2598 27.4473 10.1326 27.5 10 27.5Z" fill="#5072EB"/> -<path d="M14 25.5C13.7033 25.5 13.4133 25.588 13.1666 25.7528C12.92 25.9176 12.7277 26.1519 12.6142 26.426C12.5006 26.7001 12.4709 27.0017 12.5288 27.2926C12.5867 27.5836 12.7296 27.8509 12.9393 28.0607C13.1491 28.2704 13.4164 28.4133 13.7074 28.4712C13.9983 28.5291 14.2999 28.4993 14.574 28.3858C14.8481 28.2723 15.0824 28.08 15.2472 27.8334C15.412 27.5867 15.5 27.2967 15.5 27C15.5 26.6022 15.342 26.2206 15.0607 25.9393C14.7794 25.658 14.3978 25.5 14 25.5ZM14 27.5C13.9011 27.5 13.8044 27.4707 13.7222 27.4157C13.64 27.3608 13.5759 27.2827 13.5381 27.1913C13.5002 27.1 13.4903 26.9994 13.5096 26.9025C13.5289 26.8055 13.5765 26.7164 13.6464 26.6464C13.7164 26.5765 13.8055 26.5289 13.9025 26.5096C13.9994 26.4903 14.1 26.5002 14.1913 26.5381C14.2827 26.5759 14.3608 26.64 14.4157 26.7222C14.4707 26.8044 14.5 26.9011 14.5 27C14.5 27.1326 14.4473 27.2598 14.3536 27.3536C14.2598 27.4473 14.1326 27.5 14 27.5Z" fill="#5072EB"/> -<path d="M17 25.5H18V26.5H17V25.5Z" fill="#5072EB"/> -<path d="M17 27.5H18V28.5H17V27.5Z" fill="#5072EB"/> -<path d="M0 23.5H1V24.5H0V23.5Z" fill="#5072EB"/> -<path d="M2 23.5H5V24.5H2V23.5Z" fill="#5072EB"/> -<path d="M0 26.5H1V27.5H0V26.5Z" fill="#5072EB"/> -<path d="M2 26.5H5V27.5H2V26.5Z" fill="#5072EB"/> -<path d="M0 29.5H1V30.5H0V29.5Z" fill="#5072EB"/> -<path d="M2 29.5H5V30.5H2V29.5Z" fill="#5072EB"/> +<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M24.1354 6.06493C23.9973 5.48414 23.7306 4.94177 23.3548 4.47785C22.9791 4.01392 22.504 3.64028 21.9646 3.3845C21.4252 3.12871 20.8352 2.9973 20.2383 2.99997C19.6413 3.00264 19.0525 3.13932 18.5154 3.39993C17.6914 2.45306 16.6275 1.74569 15.4355 1.35219C14.2435 0.958679 12.9676 0.893569 11.7418 1.1637C10.5159 1.43383 9.38552 2.02923 8.46937 2.88729C7.55322 3.74536 6.88516 4.8344 6.53543 6.03993C4.92668 6.21708 3.44198 6.98835 2.37205 8.20272C1.30212 9.41709 0.724 10.9871 0.750898 12.6054C0.777796 14.2236 1.40777 15.7736 2.51747 16.9517C3.62717 18.1298 5.13668 18.8513 6.75043 18.9749V18.9999H7.25043V15.9999H21.3504L17.7504 17.4999V21.9999H9.25043V23.9999H18.2004C18.4478 24.5454 18.7916 25.0417 19.2154 25.4649L23.2504 29.4999L23.7504 29.9999L28.2854 25.4649C28.75 25.0009 29.1184 24.4498 29.3698 23.8433C29.6212 23.2367 29.7505 22.5865 29.7504 21.9299V17.4999L28.1104 16.8149C28.8922 15.9351 29.4203 14.8593 29.6381 13.7026C29.856 12.5459 29.7554 11.3517 29.3472 10.2477C28.9389 9.14372 28.2384 8.17141 27.3205 7.43468C26.4025 6.69795 25.3016 6.2245 24.1354 6.06493ZM21.2504 13.9999H7.25043V7.99993H23.2504V13.9999H21.2504ZM28.2504 18.4999V21.9299C28.2516 22.3897 28.1616 22.8452 27.9857 23.27C27.8097 23.6948 27.5513 24.0806 27.2254 24.4049L23.7504 27.8799L20.2754 24.4049C19.9495 24.0806 19.6911 23.6948 19.5152 23.27C19.3393 22.8452 19.2493 22.3897 19.2504 21.9299V18.4999L23.7504 16.6249L28.2504 18.4999Z" fill="#B8C7F7"/> +<path d="M14.25 11.9999C14.8023 11.9999 15.25 11.5522 15.25 10.9999C15.25 10.4477 14.8023 9.99994 14.25 9.99994C13.6977 9.99994 13.25 10.4477 13.25 10.9999C13.25 11.5522 13.6977 11.9999 14.25 11.9999Z" fill="#B8C7F7"/> +<path d="M14.25 19.9999C14.8023 19.9999 15.25 19.5522 15.25 18.9999C15.25 18.4477 14.8023 17.9999 14.25 17.9999C13.6977 17.9999 13.25 18.4477 13.25 18.9999C13.25 19.5522 13.6977 19.9999 14.25 19.9999Z" fill="#B8C7F7"/> +<path d="M14.25 27.9999C14.8023 27.9999 15.25 27.5522 15.25 26.9999C15.25 26.4477 14.8023 25.9999 14.25 25.9999C13.6977 25.9999 13.25 26.4477 13.25 26.9999C13.25 27.5522 13.6977 27.9999 14.25 27.9999Z" fill="#B8C7F7"/> +<path d="M10.25 11.9999C10.8023 11.9999 11.25 11.5522 11.25 10.9999C11.25 10.4477 10.8023 9.99994 10.25 9.99994C9.69772 9.99994 9.25 10.4477 9.25 10.9999C9.25 11.5522 9.69772 11.9999 10.25 11.9999Z" fill="#B8C7F7"/> +<path d="M10.25 19.9999C10.8023 19.9999 11.25 19.5522 11.25 18.9999C11.25 18.4477 10.8023 17.9999 10.25 17.9999C9.69772 17.9999 9.25 18.4477 9.25 18.9999C9.25 19.5522 9.69772 19.9999 10.25 19.9999Z" fill="#B8C7F7"/> +<path d="M10.25 27.9999C10.8023 27.9999 11.25 27.5522 11.25 26.9999C11.25 26.4477 10.8023 25.9999 10.25 25.9999C9.69772 25.9999 9.25 26.4477 9.25 26.9999C9.25 27.5522 9.69772 27.9999 10.25 27.9999Z" fill="#B8C7F7"/> +<path d="M22.6914 21.2324L21.9844 21.9394L23.3984 23.3534C23.4921 23.4471 23.6193 23.4998 23.7519 23.4998C23.8845 23.4998 24.0116 23.4471 24.1054 23.3534L26.9339 20.5249L26.2269 19.8179L23.7519 22.2929L22.6914 21.2324Z" fill="#5072EB"/> +<path d="M29.9394 17.0399L28.9144 16.6099C29.6084 15.6544 30.0491 14.5387 30.1954 13.3668C30.3417 12.1949 30.1888 11.0051 29.7509 9.9083C29.3131 8.81149 28.6046 7.84343 27.6916 7.09443C26.7785 6.34543 25.6906 5.83988 24.5294 5.62495C24.2414 4.71638 23.671 3.92339 22.9013 3.36135C22.1315 2.79931 21.2025 2.49754 20.2494 2.49995C19.7003 2.49838 19.1558 2.60015 18.6444 2.79995C17.7536 1.87263 16.639 1.19038 15.408 0.818931C14.1769 0.447483 12.871 0.399361 11.616 0.679204C10.361 0.959046 9.19918 1.55742 8.24257 2.41666C7.28597 3.2759 6.5668 4.36705 6.15436 5.58495C4.47729 5.8546 2.95549 6.72487 1.87259 8.03354C0.78969 9.34221 0.219586 11 0.268534 12.6979C0.317483 14.3958 0.982145 16.018 2.13864 17.2621C3.29513 18.5062 4.86454 19.2874 6.55436 19.4599C6.61605 19.4861 6.68235 19.4997 6.74936 19.4999V21.9999C6.74936 22.1326 6.80204 22.2597 6.89581 22.3535C6.98958 22.4473 7.11675 22.4999 7.24936 22.4999H8.74936V23.4999H7.24936C7.11675 23.4999 6.98958 23.5526 6.89581 23.6464C6.80204 23.7402 6.74936 23.8673 6.74936 23.9999V29.9999C6.74936 30.1326 6.80204 30.2597 6.89581 30.3535C6.98958 30.4473 7.11675 30.4999 7.24936 30.4999H23.2494C23.3377 30.4965 23.4237 30.4707 23.4994 30.4249C23.5746 30.4716 23.6609 30.4975 23.7494 30.4999C23.882 30.4994 24.0093 30.4474 24.1044 30.3549L28.6394 25.8199C29.1518 25.3103 29.5579 24.7041 29.8343 24.0363C30.1107 23.3686 30.2517 22.6526 30.2494 21.9299V17.4999C30.2497 17.401 30.2204 17.3043 30.1651 17.2223C30.1098 17.1402 30.0312 17.0767 29.9394 17.0399ZM6.74936 15.9999V18.4699C5.26354 18.3473 3.87671 17.6755 2.85947 16.5856C1.84222 15.4957 1.26754 14.0659 1.24755 12.5751C1.22757 11.0844 1.76372 9.63969 2.75138 8.5229C3.73904 7.40611 5.10736 6.69736 6.58936 6.53495C6.68763 6.5252 6.78069 6.48614 6.85648 6.42284C6.93227 6.35953 6.98728 6.27491 7.01436 6.17995C7.33909 5.06038 7.95949 4.04901 8.81033 3.25217C9.66117 2.45534 10.711 1.9025 11.8494 1.65179C12.9879 1.40108 14.1728 1.46177 15.2797 1.82747C16.3865 2.19317 17.3744 2.85036 18.1394 3.72995C18.2112 3.81302 18.3087 3.86987 18.4164 3.89159C18.5241 3.91331 18.6359 3.89866 18.7344 3.84995C19.2062 3.61952 19.7243 3.49981 20.2494 3.49995C21.0351 3.49849 21.7983 3.76233 22.4154 4.24873C23.0325 4.73513 23.4673 5.41561 23.6494 6.17995C23.6724 6.27762 23.7243 6.36609 23.7983 6.43387C23.8723 6.50164 23.965 6.54557 24.0644 6.55995C25.4984 6.76121 26.8119 7.47247 27.7642 8.5634C28.7164 9.65433 29.2437 11.0519 29.2494 12.4999C29.2497 13.8475 28.7932 15.1553 27.9544 16.2099L23.9394 14.5399C23.8797 14.5128 23.8149 14.4987 23.7494 14.4987C23.6838 14.4987 23.619 14.5128 23.5594 14.5399L21.7494 15.2899V14.4999H23.2494C23.382 14.4999 23.5091 14.4473 23.6029 14.3535C23.6967 14.2597 23.7494 14.1326 23.7494 13.9999V7.99995C23.7494 7.86734 23.6967 7.74016 23.6029 7.64639C23.5091 7.55262 23.382 7.49995 23.2494 7.49995H7.24936C7.11675 7.49995 6.98958 7.55262 6.89581 7.64639C6.80204 7.74016 6.74936 7.86734 6.74936 7.99995V13.9999C6.74936 14.1326 6.80204 14.2597 6.89581 14.3535C6.98958 14.4473 7.11675 14.4999 7.24936 14.4999H8.74936V15.4999H7.24936C7.11675 15.4999 6.98958 15.5526 6.89581 15.6464C6.80204 15.7402 6.74936 15.8673 6.74936 15.9999ZM7.74936 13.4999V8.49995H22.7494V13.4999H7.74936ZM20.7494 14.4999V15.4999H9.74936V14.4999H20.7494ZM7.74936 21.4999V16.4999H18.8494L17.5594 17.0399C17.4675 17.0767 17.3889 17.1402 17.3336 17.2223C17.2783 17.3043 17.249 17.401 17.2494 17.4999V21.4999H7.74936ZM17.4794 23.4999H9.74936V22.4999H17.2794C17.3132 22.839 17.3802 23.174 17.4794 23.4999ZM7.74936 29.4999V24.4999H17.8844C18.142 24.986 18.4706 25.4309 18.8594 25.8199L22.5444 29.4999H7.74936ZM29.2494 21.9299C29.2504 22.5209 29.1343 23.1063 28.9077 23.6521C28.6812 24.1979 28.3486 24.6934 27.9294 25.1099L23.7494 29.2949L19.5694 25.1099C19.1501 24.6934 18.8175 24.1979 18.591 23.6521C18.3644 23.1063 18.2483 22.5209 18.2494 21.9299V17.8349L23.7494 15.5399L29.2494 17.8349V21.9299Z" fill="#5072EB"/> +<path d="M28.44 18.04L23.94 16.165C23.8804 16.1378 23.8156 16.1237 23.75 16.1237C23.6845 16.1237 23.6197 16.1378 23.56 16.165L19.06 18.04C18.9682 18.0767 18.8895 18.1403 18.8343 18.2223C18.779 18.3043 18.7496 18.401 18.75 18.5V21.93C18.7487 22.4548 18.8514 22.9747 19.0522 23.4596C19.2531 23.9445 19.548 24.3847 19.92 24.755L23.395 28.23C23.4411 28.2774 23.4963 28.3152 23.5573 28.3409C23.6183 28.3667 23.6838 28.38 23.75 28.38C23.8162 28.38 23.8817 28.3667 23.9427 28.3409C24.0037 28.3152 24.0589 28.2774 24.105 28.23L27.58 24.755C27.952 24.3847 28.247 23.9445 28.4478 23.4596C28.6486 22.9747 28.7513 22.4548 28.75 21.93V18.5C28.7504 18.401 28.721 18.3043 28.6658 18.2223C28.6105 18.1403 28.5318 18.0767 28.44 18.04ZM27.75 21.93C27.7516 22.3241 27.6747 22.7146 27.5236 23.0786C27.3725 23.4426 27.1503 23.7728 26.87 24.05L23.75 27.17L20.63 24.05C20.3497 23.7728 20.1276 23.4426 19.9765 23.0786C19.8254 22.7146 19.7484 22.3241 19.75 21.93V18.835L23.75 17.165L27.75 18.835V21.93Z" fill="#5072EB"/> +<path d="M10.25 9.49994C9.95333 9.49994 9.66332 9.58791 9.41665 9.75273C9.16997 9.91756 8.97771 10.1518 8.86418 10.4259C8.75065 10.7 8.72094 11.0016 8.77882 11.2926C8.8367 11.5835 8.97956 11.8508 9.18934 12.0606C9.39912 12.2704 9.66639 12.4132 9.95736 12.4711C10.2483 12.529 10.5499 12.4993 10.824 12.3858C11.0981 12.2722 11.3324 12.08 11.4972 11.8333C11.662 11.5866 11.75 11.2966 11.75 10.9999C11.75 10.6021 11.592 10.2206 11.3107 9.93928C11.0294 9.65797 10.6478 9.49994 10.25 9.49994ZM10.25 11.4999C10.1511 11.4999 10.0544 11.4706 9.97222 11.4157C9.88999 11.3607 9.8259 11.2826 9.78806 11.1913C9.75022 11.0999 9.74032 10.9994 9.75961 10.9024C9.7789 10.8054 9.82652 10.7163 9.89645 10.6464C9.96637 10.5765 10.0555 10.5288 10.1525 10.5095C10.2494 10.4903 10.35 10.5002 10.4413 10.538C10.5327 10.5758 10.6108 10.6399 10.6657 10.7222C10.7207 10.8044 10.75 10.901 10.75 10.9999C10.75 11.1325 10.6973 11.2597 10.6036 11.3535C10.5098 11.4473 10.3826 11.4999 10.25 11.4999Z" fill="#5072EB"/> +<path d="M14.25 9.49994C13.9533 9.49994 13.6633 9.58791 13.4166 9.75273C13.17 9.91756 12.9777 10.1518 12.8642 10.4259C12.7506 10.7 12.7209 11.0016 12.7788 11.2926C12.8367 11.5835 12.9796 11.8508 13.1893 12.0606C13.3991 12.2704 13.6664 12.4132 13.9574 12.4711C14.2483 12.529 14.5499 12.4993 14.824 12.3858C15.0981 12.2722 15.3324 12.08 15.4972 11.8333C15.662 11.5866 15.75 11.2966 15.75 10.9999C15.75 10.6021 15.592 10.2206 15.3107 9.93928C15.0294 9.65797 14.6478 9.49994 14.25 9.49994ZM14.25 11.4999C14.1511 11.4999 14.0544 11.4706 13.9722 11.4157C13.89 11.3607 13.8259 11.2826 13.7881 11.1913C13.7502 11.0999 13.7403 10.9994 13.7596 10.9024C13.7789 10.8054 13.8265 10.7163 13.8964 10.6464C13.9664 10.5765 14.0555 10.5288 14.1525 10.5095C14.2494 10.4903 14.35 10.5002 14.4413 10.538C14.5327 10.5758 14.6108 10.6399 14.6657 10.7222C14.7207 10.8044 14.75 10.901 14.75 10.9999C14.75 11.1325 14.6973 11.2597 14.6036 11.3535C14.5098 11.4473 14.3826 11.4999 14.25 11.4999Z" fill="#5072EB"/> +<path d="M17.25 9.49994H18.25V10.4999H17.25V9.49994Z" fill="#5072EB"/> +<path d="M17.25 11.4999H18.25V12.4999H17.25V11.4999Z" fill="#5072EB"/> +<path d="M20.25 9.49994H21.25V10.4999H20.25V9.49994Z" fill="#5072EB"/> +<path d="M20.25 11.4999H21.25V12.4999H20.25V11.4999Z" fill="#5072EB"/> +<path d="M10.25 17.4999C9.95333 17.4999 9.66332 17.5879 9.41665 17.7527C9.16997 17.9176 8.97771 18.1518 8.86418 18.4259C8.75065 18.7 8.72094 19.0016 8.77882 19.2926C8.8367 19.5835 8.97956 19.8508 9.18934 20.0606C9.39912 20.2704 9.66639 20.4132 9.95736 20.4711C10.2483 20.529 10.5499 20.4993 10.824 20.3858C11.0981 20.2722 11.3324 20.08 11.4972 19.8333C11.662 19.5866 11.75 19.2966 11.75 18.9999C11.75 18.6021 11.592 18.2206 11.3107 17.9393C11.0294 17.658 10.6478 17.4999 10.25 17.4999ZM10.25 19.4999C10.1511 19.4999 10.0544 19.4706 9.97222 19.4157C9.88999 19.3607 9.8259 19.2826 9.78806 19.1913C9.75022 19.0999 9.74032 18.9994 9.75961 18.9024C9.7789 18.8054 9.82652 18.7163 9.89645 18.6464C9.96637 18.5765 10.0555 18.5288 10.1525 18.5095C10.2494 18.4903 10.35 18.5002 10.4413 18.538C10.5327 18.5758 10.6108 18.6399 10.6657 18.7222C10.7207 18.8044 10.75 18.901 10.75 18.9999C10.75 19.1325 10.6973 19.2597 10.6036 19.3535C10.5098 19.4473 10.3826 19.4999 10.25 19.4999Z" fill="#5072EB"/> +<path d="M14.25 17.4999C13.9533 17.4999 13.6633 17.5879 13.4166 17.7527C13.17 17.9176 12.9777 18.1518 12.8642 18.4259C12.7506 18.7 12.7209 19.0016 12.7788 19.2926C12.8367 19.5835 12.9796 19.8508 13.1893 20.0606C13.3991 20.2704 13.6664 20.4132 13.9574 20.4711C14.2483 20.529 14.5499 20.4993 14.824 20.3858C15.0981 20.2722 15.3324 20.08 15.4972 19.8333C15.662 19.5866 15.75 19.2966 15.75 18.9999C15.75 18.6021 15.592 18.2206 15.3107 17.9393C15.0294 17.658 14.6478 17.4999 14.25 17.4999ZM14.25 19.4999C14.1511 19.4999 14.0544 19.4706 13.9722 19.4157C13.89 19.3607 13.8259 19.2826 13.7881 19.1913C13.7502 19.0999 13.7403 18.9994 13.7596 18.9024C13.7789 18.8054 13.8265 18.7163 13.8964 18.6464C13.9664 18.5765 14.0555 18.5288 14.1525 18.5095C14.2494 18.4903 14.35 18.5002 14.4413 18.538C14.5327 18.5758 14.6108 18.6399 14.6657 18.7222C14.7207 18.8044 14.75 18.901 14.75 18.9999C14.75 19.1325 14.6973 19.2597 14.6036 19.3535C14.5098 19.4473 14.3826 19.4999 14.25 19.4999Z" fill="#5072EB"/> +<path d="M10.25 25.4999C9.95333 25.4999 9.66332 25.5879 9.41665 25.7527C9.16997 25.9176 8.97771 26.1518 8.86418 26.4259C8.75065 26.7 8.72094 27.0016 8.77882 27.2926C8.8367 27.5835 8.97956 27.8508 9.18934 28.0606C9.39912 28.2704 9.66639 28.4132 9.95736 28.4711C10.2483 28.529 10.5499 28.4993 10.824 28.3858C11.0981 28.2722 11.3324 28.08 11.4972 27.8333C11.662 27.5866 11.75 27.2966 11.75 26.9999C11.75 26.6021 11.592 26.2206 11.3107 25.9393C11.0294 25.658 10.6478 25.4999 10.25 25.4999ZM10.25 27.4999C10.1511 27.4999 10.0544 27.4706 9.97222 27.4157C9.88999 27.3607 9.8259 27.2826 9.78806 27.1913C9.75022 27.0999 9.74032 26.9994 9.75961 26.9024C9.7789 26.8054 9.82652 26.7163 9.89645 26.6464C9.96637 26.5765 10.0555 26.5288 10.1525 26.5095C10.2494 26.4903 10.35 26.5002 10.4413 26.538C10.5327 26.5758 10.6108 26.6399 10.6657 26.7222C10.7207 26.8044 10.75 26.901 10.75 26.9999C10.75 27.1325 10.6973 27.2597 10.6036 27.3535C10.5098 27.4473 10.3826 27.4999 10.25 27.4999Z" fill="#5072EB"/> +<path d="M14.25 25.4999C13.9533 25.4999 13.6633 25.5879 13.4166 25.7527C13.17 25.9176 12.9777 26.1518 12.8642 26.4259C12.7506 26.7 12.7209 27.0016 12.7788 27.2926C12.8367 27.5835 12.9796 27.8508 13.1893 28.0606C13.3991 28.2704 13.6664 28.4132 13.9574 28.4711C14.2483 28.529 14.5499 28.4993 14.824 28.3858C15.0981 28.2722 15.3324 28.08 15.4972 27.8333C15.662 27.5866 15.75 27.2966 15.75 26.9999C15.75 26.6021 15.592 26.2206 15.3107 25.9393C15.0294 25.658 14.6478 25.4999 14.25 25.4999ZM14.25 27.4999C14.1511 27.4999 14.0544 27.4706 13.9722 27.4157C13.89 27.3607 13.8259 27.2826 13.7881 27.1913C13.7502 27.0999 13.7403 26.9994 13.7596 26.9024C13.7789 26.8054 13.8265 26.7163 13.8964 26.6464C13.9664 26.5765 14.0555 26.5288 14.1525 26.5095C14.2494 26.4903 14.35 26.5002 14.4413 26.538C14.5327 26.5758 14.6108 26.6399 14.6657 26.7222C14.7207 26.8044 14.75 26.901 14.75 26.9999C14.75 27.1325 14.6973 27.2597 14.6036 27.3535C14.5098 27.4473 14.3826 27.4999 14.25 27.4999Z" fill="#5072EB"/> +<path d="M17.25 25.4999H18.25V26.4999H17.25V25.4999Z" fill="#5072EB"/> +<path d="M17.25 27.4999H18.25V28.4999H17.25V27.4999Z" fill="#5072EB"/> +<path d="M0.25 23.4999H1.25V24.4999H0.25V23.4999Z" fill="#5072EB"/> +<path d="M2.25 23.4999H5.25V24.4999H2.25V23.4999Z" fill="#5072EB"/> +<path d="M0.25 26.4999H1.25V27.4999H0.25V26.4999Z" fill="#5072EB"/> +<path d="M2.25 26.4999H5.25V27.4999H2.25V26.4999Z" fill="#5072EB"/> +<path d="M0.25 29.4999H1.25V30.4999H0.25V29.4999Z" fill="#5072EB"/> +<path d="M2.25 29.4999H5.25V30.4999H2.25V29.4999Z" fill="#5072EB"/> </svg> diff --git a/src/svgs/flow-storage-icon.svg b/src/svgs/flow-storage-icon.svg index 62d7ec41..c683eaf9 100644 --- a/src/svgs/flow-storage-icon.svg +++ b/src/svgs/flow-storage-icon.svg @@ -1,19 +1,22 @@ -<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M24.1448 19.755C23.8011 18.9393 23.2246 18.243 22.4874 17.753C21.7502 17.263 20.885 17.0011 19.9998 17C19.4331 16.9986 18.8713 17.1055 18.3448 17.315C17.6299 16.2744 16.6269 15.4649 15.4588 14.9857C14.2907 14.5066 13.0082 14.3786 11.7684 14.6174C10.5286 14.8562 9.38547 15.4515 8.47896 16.3303C7.57245 17.2091 6.94197 18.3333 6.66479 19.565C5.29634 19.7773 4.05832 20.4979 3.198 21.5831C2.33767 22.6682 1.91835 24.038 2.02379 25.4188C2.12923 26.7996 2.75166 28.0898 3.76677 29.0317C4.78189 29.9737 6.11497 30.498 7.49979 30.5H22.4998C23.8125 30.4976 25.081 30.0257 26.0762 29.1697C27.0713 28.3137 27.7275 27.1299 27.9262 25.8323C28.1248 24.5348 27.8528 23.2089 27.1594 22.0944C26.4659 20.9798 25.3966 20.1501 24.1448 19.755ZM22.4998 29.5H7.49979C6.34723 29.487 5.24361 29.0322 4.41648 28.2295C3.58936 27.4267 3.10181 26.3372 3.05436 25.1856C3.0069 24.0339 3.40318 22.908 4.16146 22.0399C4.91974 21.1718 5.98221 20.6278 7.12979 20.52C7.24089 20.5102 7.34554 20.4636 7.42708 20.3875C7.50862 20.3114 7.56237 20.2102 7.57979 20.1C7.76286 18.9867 8.28444 17.9568 9.0736 17.1504C9.86275 16.344 10.8812 15.8003 11.9903 15.5932C13.0994 15.3862 14.2454 15.5258 15.2723 15.9931C16.2993 16.4604 17.1573 17.2327 17.7298 18.205C17.7947 18.315 17.8993 18.3959 18.022 18.4313C18.1447 18.4666 18.2763 18.4536 18.3898 18.395C18.8334 18.1638 19.3216 18.0307 19.8212 18.0048C20.3208 17.9788 20.8202 18.0606 21.2854 18.2446C21.7506 18.4286 22.1708 18.7105 22.5175 19.0712C22.8642 19.4319 23.1293 19.8629 23.2948 20.335C23.322 20.4118 23.3678 20.4807 23.4279 20.5356C23.4881 20.5906 23.5608 20.6298 23.6398 20.65C24.6952 20.9295 25.613 21.5833 26.2222 22.4893C26.8313 23.3954 27.0903 24.4921 26.9508 25.5749C26.8113 26.6578 26.2829 27.653 25.464 28.3752C24.6451 29.0973 23.5916 29.4971 22.4998 29.5Z" fill="#5072EB"/> -<path d="M23.388 21.6195L23.135 22.587C23.7228 22.7405 24.2345 23.103 24.5743 23.6067C24.914 24.1103 25.0585 24.7206 24.9806 25.3231C24.9027 25.9256 24.6078 26.4791 24.1512 26.8798C23.6946 27.2805 23.1075 27.501 22.5 27.5V28.5C23.3507 28.5011 24.1726 28.192 24.8118 27.6307C25.451 27.0694 25.8637 26.2943 25.9725 25.4506C26.0814 24.6069 25.879 23.7525 25.4033 23.0473C24.9276 22.3421 24.2111 21.8345 23.388 21.6195Z" fill="#5072EB"/> -<path d="M4.99783 25.0001C5.00093 24.3745 5.23759 23.7727 5.6614 23.3125C6.08521 22.8523 6.66561 22.5671 7.28883 22.5126L7.20733 21.5161C6.31541 21.601 5.49003 22.0248 4.90118 22.7C4.31233 23.3753 4.00485 24.2506 4.04209 25.1458C4.07932 26.041 4.45843 26.8878 5.10133 27.5118C5.74422 28.1358 6.60194 28.4896 7.49783 28.5001V27.5001C6.83503 27.4993 6.1996 27.2357 5.73094 26.767C5.26227 26.2983 4.99862 25.6629 4.99783 25.0001Z" fill="#5072EB"/> -<path d="M8.5 27.5H10.5V28.5H8.5V27.5Z" fill="#5072EB"/> -<path d="M26 2H27V3H26V2Z" fill="#5072EB"/> -<path d="M28.9962 5.59V2C28.995 1.60254 28.8366 1.2217 28.5555 0.940651C28.2745 0.659604 27.8936 0.501187 27.4962 0.5H23.4962C23.0987 0.501187 22.7179 0.659604 22.4368 0.940651C22.1558 1.2217 21.9974 1.60254 21.9962 2V5.59C21.6655 5.70999 21.3875 5.94239 21.2108 6.24657C21.0341 6.55075 20.9699 6.90735 21.0295 7.25406C21.089 7.60076 21.2686 7.91549 21.5367 8.14324C21.8048 8.37099 22.1444 8.49727 22.4962 8.5H28.4962C28.8479 8.49727 29.1876 8.37099 29.4557 8.14324C29.7238 7.91549 29.9033 7.60076 29.9629 7.25406C30.0224 6.90735 29.9583 6.55075 29.7816 6.24657C29.6049 5.94239 29.3269 5.70999 28.9962 5.59ZM22.9962 2C22.9962 1.86739 23.0489 1.74021 23.1426 1.64645C23.2364 1.55268 23.3636 1.5 23.4962 1.5H27.4962C27.6288 1.5 27.756 1.55268 27.8497 1.64645C27.9435 1.74021 27.9962 1.86739 27.9962 2V5.5H22.9962V2ZM28.4962 7.5H22.4962C22.3636 7.5 22.2364 7.44732 22.1426 7.35355C22.0489 7.25979 21.9962 7.13261 21.9962 7C21.9962 6.86739 22.0489 6.74021 22.1426 6.64645C22.2364 6.55268 22.3636 6.5 22.4962 6.5H28.4962C28.6288 6.5 28.756 6.55268 28.8497 6.64645C28.9435 6.74021 28.9962 6.86739 28.9962 7C28.9962 7.13261 28.9435 7.25979 28.8497 7.35355C28.756 7.44732 28.6288 7.5 28.4962 7.5Z" fill="#5072EB"/> -<path d="M18.5 3H18V2C18 1.86739 17.9473 1.74021 17.8536 1.64645C17.7598 1.55268 17.6326 1.5 17.5 1.5H15V1C15 0.867392 14.9473 0.740215 14.8536 0.646447C14.7598 0.552678 14.6326 0.5 14.5 0.5H11.5C11.3674 0.5 11.2402 0.552678 11.1464 0.646447C11.0527 0.740215 11 0.867392 11 1V7C11 7.13261 11.0527 7.25979 11.1464 7.35355C11.2402 7.44732 11.3674 7.5 11.5 7.5H18.5C18.6326 7.5 18.7598 7.44732 18.8536 7.35355C18.9473 7.25979 19 7.13261 19 7V3.5C19 3.36739 18.9473 3.24021 18.8536 3.14645C18.7598 3.05268 18.6326 3 18.5 3ZM13 3C12.8674 3 12.7402 3.05268 12.6464 3.14645C12.5527 3.24021 12.5 3.36739 12.5 3.5V6.5H12V1.5H14V2C14 2.13261 14.0527 2.25979 14.1464 2.35355C14.2402 2.44732 14.3674 2.5 14.5 2.5H17V3H13ZM18 6.5H13.5V4H18V6.5Z" fill="#5072EB"/> -<path d="M2 2.5H3V3.5H2V2.5Z" fill="#5072EB"/> -<path d="M4 2.5H5V3.5H4V2.5Z" fill="#5072EB"/> -<path d="M6 2.5H7V3.5H6V2.5Z" fill="#5072EB"/> -<path d="M8.5 5.5C8.63261 5.5 8.75979 5.44732 8.85355 5.35355C8.94732 5.25979 9 5.13261 9 5V1C9 0.867392 8.94732 0.740215 8.85355 0.646447C8.75979 0.552678 8.63261 0.5 8.5 0.5H0.5C0.367392 0.5 0.240215 0.552678 0.146447 0.646447C0.0526784 0.740215 0 0.867392 0 1V5C0 5.13261 0.0526784 5.25979 0.146447 5.35355C0.240215 5.44732 0.367392 5.5 0.5 5.5H1V6.5H0.5C0.367392 6.5 0.240215 6.55268 0.146447 6.64645C0.0526784 6.74021 0 6.86739 0 7V11C0 11.1326 0.0526784 11.2598 0.146447 11.3536C0.240215 11.4473 0.367392 11.5 0.5 11.5H8.5C8.63261 11.5 8.75979 11.4473 8.85355 11.3536C8.94732 11.2598 9 11.1326 9 11V7C9 6.86739 8.94732 6.74021 8.85355 6.64645C8.75979 6.55268 8.63261 6.5 8.5 6.5H8V5.5H8.5ZM8 10.5H1V7.5H8V10.5ZM2 6.5V5.5H7V6.5H2ZM1 4.5V1.5H8V4.5H1Z" fill="#5072EB"/> -<path d="M2 8.5H3V9.5H2V8.5Z" fill="#5072EB"/> -<path d="M4 8.5H5V9.5H4V8.5Z" fill="#5072EB"/> -<path d="M6 8.5H7V9.5H6V8.5Z" fill="#5072EB"/> -<path d="M14.5 8.5H15.5V13.5H14.5V8.5Z" fill="#5072EB"/> -<path d="M22.0391 16.2825L25.0375 10.2855L25.9315 10.7325L22.9331 16.7295L22.0391 16.2825Z" fill="#5072EB"/> -<path d="M4.02344 12.6829L4.9519 12.3117L6.94974 17.309L6.02127 17.6801L4.02344 12.6829Z" fill="#5072EB"/> +<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M28.75 6H22.75C22.4854 6.00196 22.2322 6.10795 22.0451 6.29506C21.858 6.48217 21.752 6.73539 21.75 7C21.7508 7.26497 21.8564 7.51887 22.0438 7.70623C22.2311 7.8936 22.485 7.99921 22.75 8H28.75C29.0146 7.99804 29.2678 7.89205 29.4549 7.70494C29.642 7.51783 29.748 7.26461 29.75 7C29.7492 6.73503 29.6436 6.48113 29.4562 6.29377C29.2689 6.1064 29.015 6.00079 28.75 6Z" fill="#B8C7F7"/> +<path d="M7.33554 20.02C6.05585 20.1345 4.86936 20.7372 4.02219 21.7032C3.17502 22.6691 2.73219 23.9241 2.78557 25.2078C2.83895 26.4915 3.38444 27.7054 4.30888 28.5976C5.23332 29.4899 6.46576 29.9921 7.75054 30H22.7505C23.9655 30.001 25.1393 29.5593 26.0521 28.7574C26.965 27.9556 27.5544 26.8487 27.71 25.6437C27.8657 24.4387 27.577 23.2183 26.8979 22.2108C26.2188 21.2033 25.1959 20.4778 24.0205 20.17C23.8309 19.6302 23.5275 19.1376 23.131 18.7253C22.7344 18.3129 22.2539 17.9906 21.722 17.7801C21.1901 17.5696 20.6191 17.4759 20.0478 17.5052C19.4765 17.5345 18.9181 17.6862 18.4105 17.95C17.7856 16.8894 16.8491 16.047 15.7284 15.5374C14.6078 15.0279 13.3574 14.8758 12.1473 15.102C10.9372 15.3282 9.82612 15.9216 8.96519 16.8015C8.10426 17.6815 7.53525 18.8052 7.33554 20.02Z" fill="#B8C7F7"/> +<path d="M11.75 1V2.5V3V7H13.25V3.5H17.75V2H14.75V1H11.75Z" fill="#B8C7F7"/> +<path d="M24.3948 19.755C24.0511 18.9393 23.4746 18.243 22.7374 17.753C22.0002 17.263 21.135 17.0011 20.2498 17C19.6831 16.9986 19.1213 17.1055 18.5948 17.315C17.8799 16.2744 16.8769 15.4649 15.7088 14.9857C14.5407 14.5066 13.2582 14.3786 12.0184 14.6174C10.7786 14.8562 9.63547 15.4515 8.72896 16.3303C7.82245 17.2091 7.19197 18.3333 6.91479 19.565C5.54634 19.7773 4.30832 20.4979 3.448 21.5831C2.58767 22.6682 2.16835 24.038 2.27379 25.4188C2.37923 26.7996 3.00166 28.0898 4.01677 29.0317C5.03189 29.9737 6.36497 30.498 7.74979 30.5H22.7498C24.0625 30.4976 25.331 30.0257 26.3262 29.1697C27.3213 28.3137 27.9775 27.1299 28.1762 25.8323C28.3748 24.5348 28.1028 23.2089 27.4094 22.0944C26.7159 20.9798 25.6466 20.1501 24.3948 19.755ZM22.7498 29.5H7.74979C6.59723 29.487 5.49361 29.0322 4.66648 28.2295C3.83936 27.4267 3.35181 26.3372 3.30436 25.1856C3.2569 24.0339 3.65318 22.908 4.41146 22.0399C5.16974 21.1718 6.23221 20.6278 7.37979 20.52C7.49089 20.5102 7.59554 20.4636 7.67708 20.3875C7.75862 20.3114 7.81237 20.2102 7.82979 20.1C8.01286 18.9867 8.53444 17.9568 9.3236 17.1504C10.1127 16.344 11.1312 15.8003 12.2403 15.5932C13.3494 15.3862 14.4954 15.5258 15.5223 15.9931C16.5493 16.4604 17.4073 17.2327 17.9798 18.205C18.0447 18.315 18.1493 18.3959 18.272 18.4313C18.3947 18.4666 18.5263 18.4536 18.6398 18.395C19.0834 18.1638 19.5716 18.0307 20.0712 18.0048C20.5708 17.9788 21.0702 18.0606 21.5354 18.2446C22.0006 18.4286 22.4208 18.7105 22.7675 19.0712C23.1142 19.4319 23.3793 19.8629 23.5448 20.335C23.572 20.4118 23.6178 20.4807 23.6779 20.5356C23.7381 20.5906 23.8108 20.6298 23.8898 20.65C24.9452 20.9295 25.863 21.5833 26.4722 22.4893C27.0813 23.3954 27.3403 24.4921 27.2008 25.5749C27.0613 26.6578 26.5329 27.653 25.714 28.3752C24.8951 29.0973 23.8416 29.4971 22.7498 29.5Z" fill="#5072EB"/> +<path d="M23.638 21.6195L23.385 22.587C23.9728 22.7405 24.4845 23.103 24.8243 23.6067C25.164 24.1103 25.3085 24.7206 25.2306 25.3231C25.1527 25.9256 24.8578 26.4791 24.4012 26.8798C23.9446 27.2805 23.3575 27.501 22.75 27.5V28.5C23.6007 28.5011 24.4226 28.192 25.0618 27.6307C25.701 27.0694 26.1137 26.2943 26.2225 25.4506C26.3314 24.6069 26.129 23.7525 25.6533 23.0473C25.1776 22.3421 24.4611 21.8345 23.638 21.6195Z" fill="#5072EB"/> +<path d="M5.24783 25.0001C5.25093 24.3745 5.48759 23.7727 5.9114 23.3125C6.33521 22.8523 6.91561 22.5671 7.53883 22.5126L7.45733 21.5161C6.56541 21.601 5.74003 22.0248 5.15118 22.7C4.56233 23.3753 4.25485 24.2506 4.29209 25.1458C4.32932 26.041 4.70843 26.8878 5.35133 27.5118C5.99422 28.1358 6.85194 28.4896 7.74783 28.5001V27.5001C7.08503 27.4993 6.4496 27.2357 5.98094 26.767C5.51227 26.2983 5.24862 25.6629 5.24783 25.0001Z" fill="#5072EB"/> +<path d="M8.75 27.5H10.75V28.5H8.75V27.5Z" fill="#5072EB"/> +<path d="M26.25 2H27.25V3H26.25V2Z" fill="#5072EB"/> +<path d="M29.2462 5.59V2C29.245 1.60254 29.0866 1.2217 28.8055 0.940651C28.5245 0.659604 28.1436 0.501187 27.7462 0.5H23.7462C23.3487 0.501187 22.9679 0.659604 22.6868 0.940651C22.4058 1.2217 22.2474 1.60254 22.2462 2V5.59C21.9155 5.70999 21.6375 5.94239 21.4608 6.24657C21.2841 6.55075 21.2199 6.90735 21.2795 7.25406C21.339 7.60076 21.5186 7.91549 21.7867 8.14324C22.0548 8.37099 22.3944 8.49727 22.7462 8.5H28.7462C29.0979 8.49727 29.4376 8.37099 29.7057 8.14324C29.9738 7.91549 30.1533 7.60076 30.2129 7.25406C30.2724 6.90735 30.2083 6.55075 30.0316 6.24657C29.8549 5.94239 29.5769 5.70999 29.2462 5.59ZM23.2462 2C23.2462 1.86739 23.2989 1.74021 23.3926 1.64645C23.4864 1.55268 23.6136 1.5 23.7462 1.5H27.7462C27.8788 1.5 28.006 1.55268 28.0997 1.64645C28.1935 1.74021 28.2462 1.86739 28.2462 2V5.5H23.2462V2ZM28.7462 7.5H22.7462C22.6136 7.5 22.4864 7.44732 22.3926 7.35355C22.2989 7.25979 22.2462 7.13261 22.2462 7C22.2462 6.86739 22.2989 6.74021 22.3926 6.64645C22.4864 6.55268 22.6136 6.5 22.7462 6.5H28.7462C28.8788 6.5 29.006 6.55268 29.0997 6.64645C29.1935 6.74021 29.2462 6.86739 29.2462 7C29.2462 7.13261 29.1935 7.25979 29.0997 7.35355C29.006 7.44732 28.8788 7.5 28.7462 7.5Z" fill="#5072EB"/> +<path d="M18.75 3H18.25V2C18.25 1.86739 18.1973 1.74021 18.1036 1.64645C18.0098 1.55268 17.8826 1.5 17.75 1.5H15.25V1C15.25 0.867392 15.1973 0.740215 15.1036 0.646447C15.0098 0.552678 14.8826 0.5 14.75 0.5H11.75C11.6174 0.5 11.4902 0.552678 11.3964 0.646447C11.3027 0.740215 11.25 0.867392 11.25 1V7C11.25 7.13261 11.3027 7.25979 11.3964 7.35355C11.4902 7.44732 11.6174 7.5 11.75 7.5H18.75C18.8826 7.5 19.0098 7.44732 19.1036 7.35355C19.1973 7.25979 19.25 7.13261 19.25 7V3.5C19.25 3.36739 19.1973 3.24021 19.1036 3.14645C19.0098 3.05268 18.8826 3 18.75 3ZM13.25 3C13.1174 3 12.9902 3.05268 12.8964 3.14645C12.8027 3.24021 12.75 3.36739 12.75 3.5V6.5H12.25V1.5H14.25V2C14.25 2.13261 14.3027 2.25979 14.3964 2.35355C14.4902 2.44732 14.6174 2.5 14.75 2.5H17.25V3H13.25ZM18.25 6.5H13.75V4H18.25V6.5Z" fill="#5072EB"/> +<path d="M2.25 2.5H3.25V3.5H2.25V2.5Z" fill="#5072EB"/> +<path d="M4.25 2.5H5.25V3.5H4.25V2.5Z" fill="#5072EB"/> +<path d="M6.25 2.5H7.25V3.5H6.25V2.5Z" fill="#5072EB"/> +<path d="M8.75 5.5C8.88261 5.5 9.00979 5.44732 9.10355 5.35355C9.19732 5.25979 9.25 5.13261 9.25 5V1C9.25 0.867392 9.19732 0.740215 9.10355 0.646447C9.00979 0.552678 8.88261 0.5 8.75 0.5H0.75C0.617392 0.5 0.490215 0.552678 0.396447 0.646447C0.302678 0.740215 0.25 0.867392 0.25 1V5C0.25 5.13261 0.302678 5.25979 0.396447 5.35355C0.490215 5.44732 0.617392 5.5 0.75 5.5H1.25V6.5H0.75C0.617392 6.5 0.490215 6.55268 0.396447 6.64645C0.302678 6.74021 0.25 6.86739 0.25 7V11C0.25 11.1326 0.302678 11.2598 0.396447 11.3536C0.490215 11.4473 0.617392 11.5 0.75 11.5H8.75C8.88261 11.5 9.00979 11.4473 9.10355 11.3536C9.19732 11.2598 9.25 11.1326 9.25 11V7C9.25 6.86739 9.19732 6.74021 9.10355 6.64645C9.00979 6.55268 8.88261 6.5 8.75 6.5H8.25V5.5H8.75ZM8.25 10.5H1.25V7.5H8.25V10.5ZM2.25 6.5V5.5H7.25V6.5H2.25ZM1.25 4.5V1.5H8.25V4.5H1.25Z" fill="#5072EB"/> +<path d="M2.25 8.5H3.25V9.5H2.25V8.5Z" fill="#5072EB"/> +<path d="M4.25 8.5H5.25V9.5H4.25V8.5Z" fill="#5072EB"/> +<path d="M6.25 8.5H7.25V9.5H6.25V8.5Z" fill="#5072EB"/> +<path d="M14.75 8.5H15.75V13.5H14.75V8.5Z" fill="#5072EB"/> +<path d="M22.2891 16.2825L25.2875 10.2855L26.1815 10.7325L23.1831 16.7295L22.2891 16.2825Z" fill="#5072EB"/> +<path d="M4.27344 12.6829L5.2019 12.3117L7.19974 17.309L6.27127 17.6801L4.27344 12.6829Z" fill="#5072EB"/> </svg> diff --git a/src/svgs/private-data-plane-icon.svg b/src/svgs/private-data-plane-icon.svg new file mode 100644 index 00000000..37501b88 --- /dev/null +++ b/src/svgs/private-data-plane-icon.svg @@ -0,0 +1,7 @@ +<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M25 6.99996C24.537 6.99929 24.0755 7.05299 23.625 7.15996C23.1318 5.65944 22.1775 4.35294 20.8981 3.42672C19.6187 2.50049 18.0795 2.00183 16.5 2.00183C14.9205 2.00183 13.3813 2.50049 12.1019 3.42672C10.8225 4.35294 9.86819 5.65944 9.375 7.15996C8.92451 7.05299 8.46302 6.99929 8 6.99996C6.4087 6.99996 4.88258 7.6321 3.75736 8.75732C2.63214 9.88253 2 11.4087 2 13C2 14.5913 2.63214 16.1174 3.75736 17.2426C4.88258 18.3678 6.4087 19 8 19H9V18C9 17.4695 9.21071 16.9608 9.58579 16.5857C9.96086 16.2107 10.4696 16 11 16H11.5V13C11.5 11.6739 12.0268 10.4021 12.9645 9.46442C13.9021 8.52674 15.1739 7.99996 16.5 7.99996C17.8261 7.99996 19.0979 8.52674 20.0355 9.46442C20.9732 10.4021 21.5 11.6739 21.5 13V16H22C22.5304 16 23.0391 16.2107 23.4142 16.5857C23.7893 16.9608 24 17.4695 24 18V19H25C26.5913 19 28.1174 18.3678 29.2426 17.2426C30.3679 16.1174 31 14.5913 31 13C31 11.4087 30.3679 9.88253 29.2426 8.75732C28.1174 7.6321 26.5913 6.99996 25 6.99996Z" fill="#B8C7F7"/> +<path d="M22 16H11C10.4696 16 9.96086 16.2107 9.58579 16.5858C9.21071 16.9608 9 17.4695 9 18V29C9 29.5304 9.21071 30.0391 9.58579 30.4142C9.96086 30.7893 10.4696 31 11 31H22C22.5304 31 23.0391 30.7893 23.4142 30.4142C23.7893 30.0391 24 29.5304 24 29V18C24 17.4695 23.7893 16.9608 23.4142 16.5858C23.0391 16.2107 22.5304 16 22 16ZM17.5 23.23V26.5C17.5 26.7652 17.3946 27.0195 17.2071 27.2071C17.0196 27.3946 16.7652 27.5 16.5 27.5C16.2348 27.5 15.9804 27.3946 15.7929 27.2071C15.6054 27.0195 15.5 26.7652 15.5 26.5V23.23C15.1187 23.0098 14.8207 22.67 14.6522 22.2633C14.4838 21.8565 14.4542 21.4055 14.5681 20.9803C14.6821 20.555 14.9332 20.1792 15.2825 19.9112C15.6318 19.6432 16.0597 19.4979 16.5 19.4979C16.9403 19.4979 17.3682 19.6432 17.7175 19.9112C18.0668 20.1792 18.3179 20.555 18.4319 20.9803C18.5458 21.4055 18.5162 21.8565 18.3478 22.2633C18.1793 22.67 17.8813 23.0098 17.5 23.23Z" fill="#B8C7F7"/> +<path d="M16.5 9.99997C15.7046 10.0008 14.942 10.3171 14.3796 10.8795C13.8171 11.442 13.5008 12.2046 13.5 13V16H19.5V13C19.4992 12.2046 19.1829 11.442 18.6204 10.8795C18.058 10.3171 17.2954 10.0008 16.5 9.99997Z" fill="#B8C7F7"/> +<path d="M24.5114 21.5H28.5864C28.7043 21.8336 28.9364 22.1147 29.2416 22.2938C29.5468 22.4728 29.9055 22.5382 30.2543 22.4783C30.603 22.4185 30.9194 22.2373 31.1475 21.9668C31.3755 21.6962 31.5006 21.3538 31.5006 21C31.5006 20.6461 31.3755 20.3037 31.1475 20.0331C30.9194 19.7626 30.603 19.5814 30.2543 19.5216C29.9055 19.4617 29.5468 19.5271 29.2416 19.7061C28.9364 19.8852 28.7043 20.1663 28.5864 20.5H24.5114C24.5064 20.5 24.5014 20.505 24.4964 20.505V19.5H24.9964C26.7203 19.5 28.3736 18.8151 29.5926 17.5961C30.8116 16.3772 31.4964 14.7239 31.4964 13C31.4964 11.276 30.8116 9.62275 29.5926 8.40376C28.3736 7.18477 26.7203 6.49995 24.9964 6.49995C24.6447 6.50052 24.2936 6.52894 23.9464 6.58495C23.3601 5.08643 22.3354 3.79956 21.0064 2.89241C19.6773 1.98526 18.1055 1.5 16.4964 1.5C14.8873 1.5 13.3155 1.98526 11.9864 2.89241C10.6574 3.79956 9.63274 5.08643 9.0464 6.58495C8.69919 6.52894 8.3481 6.50052 7.9964 6.49995C6.27249 6.49995 4.61919 7.18477 3.40021 8.40376C2.18122 9.62275 1.4964 11.276 1.4964 13C1.4964 14.7239 2.18122 16.3772 3.40021 17.5961C4.61919 18.8151 6.27249 19.5 7.9964 19.5H8.4964V20.505C8.4914 20.505 8.4864 20.5 8.4814 20.5H4.4064C4.28845 20.1663 4.05637 19.8852 3.75116 19.7061C3.44596 19.5271 3.08728 19.4617 2.73853 19.5216C2.38979 19.5814 2.07342 19.7626 1.84535 20.0331C1.61728 20.3037 1.49219 20.6461 1.49219 21C1.49219 21.3538 1.61728 21.6962 1.84535 21.9668C2.07342 22.2373 2.38979 22.4185 2.73853 22.4783C3.08728 22.5382 3.44596 22.4728 3.75116 22.2938C4.05637 22.1147 4.28845 21.8336 4.4064 21.5H8.4814C8.4864 21.5 8.4914 21.495 8.4964 21.495V24.505C8.4914 24.505 8.4864 24.5 8.4814 24.5H6.4064C6.28845 24.1663 6.05637 23.8852 5.75116 23.7061C5.44596 23.5271 5.08728 23.4617 4.73853 23.5216C4.38979 23.5814 4.07342 23.7626 3.84535 24.0331C3.61728 24.3037 3.49219 24.6461 3.49219 25C3.49219 25.3538 3.61728 25.6962 3.84535 25.9668C4.07342 26.2373 4.38979 26.4185 4.73853 26.4783C5.08728 26.5382 5.44596 26.4728 5.75116 26.2938C6.05637 26.1147 6.28845 25.8336 6.4064 25.5H8.4814C8.4864 25.5 8.4914 25.495 8.4964 25.495V28.505C8.4914 28.505 8.4864 28.5 8.4814 28.5H4.4064C4.28845 28.1663 4.05637 27.8852 3.75116 27.7061C3.44596 27.5271 3.08728 27.4617 2.73853 27.5216C2.38979 27.5814 2.07342 27.7626 1.84535 28.0331C1.61728 28.3037 1.49219 28.6461 1.49219 29C1.49219 29.3538 1.61728 29.6962 1.84535 29.9668C2.07342 30.2373 2.38979 30.4185 2.73853 30.4783C3.08728 30.5382 3.44596 30.4728 3.75116 30.2938C4.05637 30.1147 4.28845 29.8336 4.4064 29.5H8.4814C8.50355 29.4973 8.52535 29.4923 8.5464 29.485C8.65862 30.0524 8.96413 30.5634 9.41088 30.9308C9.85763 31.2982 10.418 31.4994 10.9964 31.5H21.9964C22.5748 31.4994 23.1352 31.2982 23.5819 30.9308C24.0287 30.5634 24.3342 30.0524 24.4464 29.485C24.4675 29.4923 24.4893 29.4973 24.5114 29.5H28.5864C28.7043 29.8336 28.9364 30.1147 29.2416 30.2938C29.5468 30.4728 29.9055 30.5382 30.2543 30.4783C30.603 30.4185 30.9194 30.2373 31.1475 29.9668C31.3755 29.6962 31.5006 29.3538 31.5006 29C31.5006 28.6461 31.3755 28.3037 31.1475 28.0331C30.9194 27.7626 30.603 27.5814 30.2543 27.5216C29.9055 27.4617 29.5468 27.5271 29.2416 27.7061C28.9364 27.8852 28.7043 28.1663 28.5864 28.5H24.5114C24.5064 28.5 24.5014 28.505 24.4964 28.505V25.495C24.5014 25.495 24.5064 25.5 24.5114 25.5H26.5864C26.7043 25.8336 26.9364 26.1147 27.2416 26.2938C27.5468 26.4728 27.9055 26.5382 28.2543 26.4783C28.603 26.4185 28.9194 26.2373 29.1475 25.9668C29.3755 25.6962 29.5006 25.3538 29.5006 25C29.5006 24.6461 29.3755 24.3037 29.1475 24.0331C28.9194 23.7626 28.603 23.5814 28.2543 23.5216C27.9055 23.4617 27.5468 23.5271 27.2416 23.7061C26.9364 23.8852 26.7043 24.1663 26.5864 24.5H24.5114C24.5064 24.5 24.5014 24.505 24.4964 24.505V21.495C24.5014 21.495 24.5064 21.5 24.5114 21.5ZM29.9964 20.5C30.0953 20.5 30.192 20.5293 30.2742 20.5842C30.3564 20.6392 30.4205 20.7172 30.4583 20.8086C30.4962 20.9 30.5061 21.0005 30.4868 21.0975C30.4675 21.1945 30.4199 21.2836 30.35 21.3535C30.28 21.4234 30.1909 21.4711 30.0939 21.4903C29.997 21.5096 29.8964 21.4997 29.8051 21.4619C29.7137 21.424 29.6356 21.36 29.5807 21.2777C29.5257 21.1955 29.4964 21.0988 29.4964 21C29.4964 20.8673 29.5491 20.7402 29.6428 20.6464C29.7366 20.5526 29.8638 20.5 29.9964 20.5ZM2.9964 21.5C2.89751 21.5 2.80084 21.4706 2.71862 21.4157C2.63639 21.3607 2.57231 21.2827 2.53446 21.1913C2.49662 21.0999 2.48672 20.9994 2.50601 20.9024C2.5253 20.8054 2.57292 20.7163 2.64285 20.6464C2.71277 20.5765 2.80187 20.5289 2.89886 20.5096C2.99585 20.4903 3.09638 20.5002 3.18774 20.538C3.27911 20.5759 3.3572 20.6399 3.41214 20.7222C3.46708 20.8044 3.4964 20.9011 3.4964 21C3.4964 21.1326 3.44372 21.2597 3.34995 21.3535C3.25619 21.4473 3.12901 21.5 2.9964 21.5ZM4.9964 25.5C4.89751 25.5 4.80084 25.4706 4.71862 25.4157C4.63639 25.3607 4.5723 25.2827 4.53446 25.1913C4.49662 25.0999 4.48672 24.9994 4.50601 24.9024C4.5253 24.8054 4.57292 24.7163 4.64285 24.6464C4.71277 24.5765 4.80187 24.5289 4.89886 24.5096C4.99585 24.4903 5.09638 24.5002 5.18774 24.538C5.27911 24.5759 5.3572 24.6399 5.41214 24.7222C5.46708 24.8044 5.4964 24.9011 5.4964 25C5.4964 25.1326 5.44372 25.2597 5.34995 25.3535C5.25619 25.4473 5.12901 25.5 4.9964 25.5ZM2.9964 29.5C2.89751 29.5 2.80084 29.4706 2.71862 29.4157C2.63639 29.3607 2.57231 29.2827 2.53446 29.1913C2.49662 29.0999 2.48672 28.9994 2.50601 28.9024C2.5253 28.8054 2.57292 28.7163 2.64285 28.6464C2.71277 28.5765 2.80187 28.5289 2.89886 28.5096C2.99585 28.4903 3.09638 28.5002 3.18774 28.538C3.27911 28.5759 3.3572 28.6399 3.41214 28.7222C3.46708 28.8044 3.4964 28.9011 3.4964 29C3.4964 29.1326 3.44372 29.2597 3.34995 29.3535C3.25619 29.4473 3.12901 29.5 2.9964 29.5ZM29.9964 28.5C30.0953 28.5 30.192 28.5293 30.2742 28.5842C30.3564 28.6392 30.4205 28.7172 30.4583 28.8086C30.4962 28.9 30.5061 29.0005 30.4868 29.0975C30.4675 29.1945 30.4199 29.2836 30.35 29.3535C30.28 29.4234 30.1909 29.4711 30.0939 29.4903C29.997 29.5096 29.8964 29.4997 29.8051 29.4619C29.7137 29.424 29.6356 29.36 29.5807 29.2777C29.5257 29.1955 29.4964 29.0988 29.4964 29C29.4964 28.8673 29.5491 28.7402 29.6428 28.6464C29.7366 28.5526 29.8638 28.5 29.9964 28.5ZM27.9964 24.5C28.0953 24.5 28.192 24.5293 28.2742 24.5842C28.3564 24.6392 28.4205 24.7172 28.4583 24.8086C28.4962 24.9 28.5061 25.0005 28.4868 25.0975C28.4675 25.1945 28.4199 25.2836 28.35 25.3535C28.28 25.4234 28.1909 25.4711 28.0939 25.4903C27.997 25.5096 27.8964 25.4997 27.8051 25.4619C27.7137 25.424 27.6356 25.36 27.5807 25.2777C27.5257 25.1955 27.4964 25.0988 27.4964 25C27.4964 24.8673 27.5491 24.7402 27.6428 24.6464C27.7366 24.5526 27.8638 24.5 27.9964 24.5ZM23.4964 29C23.4952 29.3974 23.3368 29.7783 23.0557 30.0593C22.7747 30.3403 22.3939 30.4988 21.9964 30.5H10.9964C10.5989 30.4988 10.2181 30.3403 9.93705 30.0593C9.656 29.7783 9.49759 29.3974 9.4964 29V18C9.49759 17.6025 9.656 17.2217 9.93705 16.9406C10.2181 16.6596 10.5989 16.5011 10.9964 16.5H21.9964C22.3939 16.5011 22.7747 16.6596 23.0557 16.9406C23.3368 17.2217 23.4952 17.6025 23.4964 18V29ZM16.4964 9.49995C15.5685 9.50101 14.6788 9.8701 14.0227 10.5262C13.3665 11.1824 12.9975 12.072 12.9964 13V15.5H11.9964V13C11.9964 11.8065 12.4705 10.6619 13.3144 9.81797C14.1583 8.97406 15.3029 8.49995 16.4964 8.49995C17.6899 8.49995 18.8345 8.97406 19.6784 9.81797C20.5223 10.6619 20.9964 11.8065 20.9964 13V15.5H19.9964V13C19.9953 12.072 19.6263 11.1824 18.9701 10.5262C18.314 9.8701 17.4243 9.50101 16.4964 9.49995ZM18.9964 13V15.5H13.9964V13C13.9964 12.3369 14.2598 11.701 14.7286 11.2322C15.1975 10.7633 15.8334 10.5 16.4964 10.5C17.1594 10.5 17.7953 10.7633 18.2642 11.2322C18.733 11.701 18.9964 12.3369 18.9964 13ZM21.9964 15.5V13C21.9964 11.5413 21.4169 10.1423 20.3855 9.11087C19.354 8.07942 17.9551 7.49995 16.4964 7.49995C15.0377 7.49995 13.6388 8.07942 12.6073 9.11087C11.5759 10.1423 10.9964 11.5413 10.9964 13V15.5C10.3334 15.5 9.69747 15.7633 9.22863 16.2322C8.75979 16.701 8.4964 17.3369 8.4964 18V18.5H7.9964C6.53771 18.5 5.13876 17.9205 4.10731 16.889C3.07586 15.8576 2.4964 14.4586 2.4964 13C2.4964 11.5413 3.07586 10.1423 4.10731 9.11087C5.13876 8.07942 6.53771 7.49995 7.9964 7.49995C8.42055 7.50011 8.8433 7.54876 9.2564 7.64495C9.3782 7.67378 9.50638 7.65587 9.61562 7.59477C9.72486 7.53367 9.80721 7.43382 9.8464 7.31495C10.3067 5.91447 11.1974 4.69507 12.3915 3.83059C13.5857 2.96612 15.0222 2.5007 16.4964 2.5007C17.9706 2.5007 19.4071 2.96612 20.6013 3.83059C21.7954 4.69507 22.6861 5.91447 23.1464 7.31495C23.1856 7.43382 23.2679 7.53367 23.3772 7.59477C23.4864 7.65587 23.6146 7.67378 23.7364 7.64495C24.1495 7.54876 24.5722 7.50011 24.9964 7.49995C26.4551 7.49995 27.854 8.07942 28.8855 9.11087C29.9169 10.1423 30.4964 11.5413 30.4964 13C30.4964 14.4586 29.9169 15.8576 28.8855 16.889C27.854 17.9205 26.4551 18.5 24.9964 18.5H24.4964V18C24.4964 17.6716 24.4317 17.3466 24.3061 17.0432C24.1805 16.7399 23.9963 16.4643 23.7642 16.2322C23.532 16 23.2564 15.8159 22.9531 15.6903C22.6498 15.5646 22.3247 15.5 21.9964 15.5Z" fill="#5072EB"/> +<path d="M17.1066 19.072C16.7354 18.9809 16.3484 18.9754 15.9748 19.0562C15.6012 19.1369 15.251 19.3017 14.9506 19.538C14.6501 19.7753 14.4082 20.0784 14.2434 20.424C14.0786 20.7696 13.9954 21.1484 14.0002 21.5312C14.005 21.914 14.0976 22.2906 14.271 22.632C14.4443 22.9733 14.6938 23.2703 15.0001 23.5V26.5C15.0001 26.8978 15.1581 27.2794 15.4394 27.5607C15.7207 27.842 16.1022 28 16.5001 28C16.8979 28 17.2794 27.842 17.5607 27.5607C17.842 27.2794 18.0001 26.8978 18.0001 26.5V23.5C18.3957 23.2031 18.6947 22.7957 18.8592 22.3292C19.0237 21.8627 19.0465 21.3579 18.9246 20.8785C18.8155 20.44 18.5883 20.0398 18.2678 19.7214C17.9473 19.4029 17.5457 19.1783 17.1066 19.072ZM17.2506 22.7965C17.1745 22.8404 17.1113 22.9036 17.0674 22.9797C17.0235 23.0558 17.0005 23.1421 17.0006 23.23V26.5C17.0006 26.6326 16.9479 26.7598 16.8541 26.8536C16.7604 26.9473 16.6332 27 16.5006 27C16.368 27 16.2408 26.9473 16.147 26.8536C16.0532 26.7598 16.0006 26.6326 16.0006 26.5V23.23C16.0007 23.1421 15.9776 23.0558 15.9337 22.9797C15.8898 22.9036 15.8266 22.8404 15.7506 22.7965C15.539 22.6739 15.3605 22.5014 15.2308 22.294C15.1011 22.0867 15.0241 21.8508 15.0065 21.6069C14.9888 21.3629 15.0311 21.1184 15.1296 20.8945C15.2281 20.6707 15.3798 20.4743 15.5716 20.3225C15.8344 20.1128 16.1609 19.9991 16.4971 20C16.6246 20.0003 16.7516 20.0155 16.8756 20.0455C17.1347 20.1101 17.3716 20.2435 17.5613 20.4316C17.7509 20.6196 17.8863 20.8554 17.9531 21.114C18.0354 21.4327 18.0112 21.7696 17.8843 22.0734C17.7574 22.3771 17.5352 22.6311 17.2506 22.7965Z" fill="#5072EB"/> +</svg> diff --git a/src/svgs/vpc-icon.svg b/src/svgs/vpc-icon.svg new file mode 100644 index 00000000..78433a6e --- /dev/null +++ b/src/svgs/vpc-icon.svg @@ -0,0 +1,14 @@ +<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M28.7503 23H23.7503C23.4853 23.0008 23.2314 23.1064 23.044 23.2938C22.8567 23.4811 22.7511 23.735 22.7503 24V29C22.7493 29.0334 22.751 29.0668 22.7553 29.1C22.7807 29.3464 22.8964 29.5747 23.0801 29.7409C23.2638 29.907 23.5025 29.9993 23.7503 30H28.7503C29.0152 29.9992 29.2691 29.8936 29.4565 29.7062C29.6439 29.5189 29.7495 29.265 29.7503 29V24C29.7495 23.735 29.6439 23.4811 29.4565 23.2938C29.2691 23.1064 29.0152 23.0008 28.7503 23ZM26.2503 28.5C26.0525 28.5 25.8591 28.4414 25.6947 28.3315C25.5302 28.2216 25.4021 28.0654 25.3264 27.8827C25.2507 27.7 25.2309 27.4989 25.2695 27.3049C25.3081 27.1109 25.4033 26.9327 25.5432 26.7929C25.683 26.653 25.8612 26.5578 26.0552 26.5192C26.2492 26.4806 26.4502 26.5004 26.6329 26.5761C26.8157 26.6518 26.9719 26.78 27.0817 26.9444C27.1916 27.1089 27.2503 27.3022 27.2503 27.5C27.2495 27.765 27.1439 28.0189 26.9565 28.2062C26.7691 28.3936 26.5152 28.4992 26.2503 28.5Z" fill="#B8C7F7"/> +<path d="M24.1388 6.06493C24.0007 5.48414 23.7339 4.94177 23.3582 4.47785C22.9825 4.01392 22.5074 3.64028 21.968 3.3845C21.4286 3.12871 20.8386 2.9973 20.2416 2.99997C19.6447 3.00264 19.0559 3.13932 18.5188 3.39993C17.6948 2.45306 16.6308 1.74569 15.4389 1.35219C14.2469 0.958679 12.9709 0.893569 11.7451 1.1637C10.5193 1.43383 9.3889 2.02923 8.47275 2.88729C7.55659 3.74536 6.88854 4.8344 6.5388 6.03993C4.97538 6.21585 3.52883 6.95285 2.46748 8.11421C1.40613 9.27557 0.802021 10.7825 0.767217 12.3554C0.732413 13.9283 1.26928 15.4604 2.27822 16.6676C3.28716 17.8748 4.6997 18.675 6.2538 18.9199V15.9999C6.2538 14.8949 10.2838 13.9999 15.2538 13.9999C20.2238 13.9999 24.2538 14.8949 24.2538 15.9999V18.9199C25.7955 18.6806 27.1995 17.8944 28.2092 16.7051C29.2189 15.5158 29.7669 14.0028 29.753 12.4427C29.739 10.8827 29.164 9.37971 28.1332 8.20866C27.1024 7.0376 25.6845 6.27666 24.1388 6.06493Z" fill="#B8C7F7"/> +<path d="M14.25 20.5H16.25V21.5H14.25V20.5Z" fill="#5072EB"/> +<path d="M14.25 26.5H16.25V27.5H14.25V26.5Z" fill="#5072EB"/> +<path d="M28.7511 22.4999V21.9999C28.7511 21.3369 28.4877 20.701 28.0189 20.2322C27.55 19.7633 26.9141 19.4999 26.2511 19.4999C25.708 19.5015 25.1806 19.6825 24.7511 20.0149V19.3299C26.3285 18.9858 27.7382 18.1063 28.7408 16.8408C29.7434 15.5752 30.277 14.0017 30.2511 12.3874C30.2252 10.7731 29.6413 9.21748 28.5986 7.98478C27.556 6.75208 26.1188 5.91827 24.5311 5.62495C24.2431 4.71638 23.6728 3.92339 22.903 3.36135C22.1332 2.79931 21.2042 2.49754 20.2511 2.49995C19.702 2.49838 19.1575 2.60015 18.6461 2.79995C17.7553 1.87263 16.6407 1.19038 15.4097 0.818931C14.1787 0.447483 12.8727 0.399361 11.6177 0.679204C10.3627 0.959046 9.20091 1.55742 8.24431 2.41666C7.28771 3.2759 6.56854 4.36705 6.1561 5.58495C4.54488 5.83906 3.0731 6.64818 1.99521 7.87242C0.917315 9.09665 0.301078 10.659 0.253037 12.2895C0.204996 13.9199 0.728171 15.5159 1.73211 16.8015C2.73605 18.087 4.15764 18.9814 5.7511 19.3299V27.9999C5.7511 29.9749 11.7211 30.4999 15.2511 30.4999C17.6714 30.5456 20.0877 30.2818 22.4411 29.7149C22.5689 29.9513 22.758 30.1489 22.9885 30.2871C23.219 30.4252 23.4824 30.4987 23.7511 30.4999H28.7511C29.1486 30.4988 29.5294 30.3403 29.8104 30.0593C30.0915 29.7782 30.2499 29.3974 30.2511 28.9999V23.9999C30.2499 23.6025 30.0915 23.2216 29.8104 22.9406C29.5294 22.6595 29.1486 22.5011 28.7511 22.4999ZM26.2511 20.4999C26.6486 20.5011 27.0294 20.6595 27.3104 20.9406C27.5915 21.2216 27.7499 21.6025 27.7511 21.9999V22.4999H24.7511V21.9999C24.7523 21.6025 24.9107 21.2216 25.1918 20.9406C25.4728 20.6595 25.8536 20.5011 26.2511 20.4999ZM5.7511 15.9999V18.3049C4.39409 17.9525 3.20335 17.136 2.38561 15.9971C1.56788 14.8582 1.17479 13.469 1.2746 12.0705C1.3744 10.672 1.9608 9.35265 2.93198 8.34146C3.90316 7.33026 5.19779 6.6911 6.5911 6.53495C6.68937 6.5252 6.78243 6.48614 6.85822 6.42284C6.93401 6.35953 6.98901 6.27491 7.0161 6.17995C7.34082 5.06038 7.96123 4.04901 8.81206 3.25217C9.6629 2.45534 10.7127 1.9025 11.8512 1.65179C12.9896 1.40108 14.1745 1.46177 15.2814 1.82747C16.3883 2.19317 17.3761 2.85036 18.1411 3.72995C18.213 3.81302 18.3104 3.86987 18.4181 3.89159C18.5258 3.91331 18.6376 3.89866 18.7361 3.84995C19.2079 3.61952 19.726 3.49981 20.2511 3.49995C21.0368 3.49849 21.8 3.76233 22.4171 4.24873C23.0342 4.73513 23.469 5.41561 23.6511 6.17995C23.6742 6.27762 23.7261 6.36609 23.8001 6.43387C23.8741 6.50164 23.9668 6.54557 24.0661 6.55995C25.443 6.74749 26.7121 7.40761 27.6561 8.4274C28.6001 9.44718 29.1605 10.7633 29.2414 12.1506C29.3223 13.5379 28.9187 14.9102 28.0997 16.0328C27.2806 17.1554 26.0969 17.9586 24.7511 18.3049V15.9999C24.7511 14.0249 18.7811 13.4999 15.2511 13.4999C11.7211 13.4999 5.7511 14.0249 5.7511 15.9999ZM23.7511 15.9949C23.5811 16.5249 20.5361 17.4999 15.2511 17.4999C9.9661 17.4999 6.9111 16.5199 6.7511 16.0049C6.9211 15.4749 9.9661 14.4999 15.2511 14.4999C20.5361 14.4999 23.5911 15.4749 23.7511 15.9949ZM22.2511 23.9999V28.7299C19.9609 29.2886 17.6079 29.5474 15.2511 29.4999C9.9461 29.4999 6.8961 28.5199 6.7511 27.9999V23.2299C8.6011 24.2049 12.6111 24.4999 15.2511 24.4999C17.6132 24.53 19.9707 24.285 22.2761 23.7699C22.2601 23.8456 22.2517 23.9226 22.2511 23.9999ZM15.2511 23.4999C9.9461 23.4999 6.8961 22.5199 6.7511 21.9999V17.2299C8.6011 18.2049 12.6111 18.4999 15.2511 18.4999C17.8911 18.4999 21.9011 18.2049 23.7511 17.2299V21.9949C23.5961 22.5199 20.5461 23.4999 15.2511 23.4999ZM29.2511 28.9999C29.2511 29.1326 29.1984 29.2597 29.1047 29.3535C29.0109 29.4473 28.8837 29.4999 28.7511 29.4999H23.7511C23.6185 29.4999 23.4913 29.4473 23.3975 29.3535C23.3038 29.2597 23.2511 29.1326 23.2511 28.9999V23.9999C23.2511 23.8673 23.3038 23.7402 23.3975 23.6464C23.4913 23.5526 23.6185 23.4999 23.7511 23.4999H28.7511C28.8837 23.4999 29.0109 23.5526 29.1047 23.6464C29.1984 23.7402 29.2511 23.8673 29.2511 23.9999V28.9999Z" fill="#5072EB"/> +<path d="M26.25 26C25.9533 26 25.6633 26.088 25.4166 26.2528C25.17 26.4176 24.9777 26.6519 24.8642 26.926C24.7507 27.2001 24.7209 27.5017 24.7788 27.7926C24.8367 28.0836 24.9796 28.3509 25.1893 28.5607C25.3991 28.7704 25.6664 28.9133 25.9574 28.9712C26.2483 29.0291 26.5499 28.9993 26.824 28.8858C27.0981 28.7723 27.3324 28.58 27.4972 28.3334C27.662 28.0867 27.75 27.7967 27.75 27.5C27.75 27.1022 27.592 26.7206 27.3107 26.4393C27.0294 26.158 26.6478 26 26.25 26ZM26.25 28C26.1511 28 26.0544 27.9707 25.9722 27.9157C25.89 27.8608 25.8259 27.7827 25.7881 27.6913C25.7502 27.6 25.7403 27.4994 25.7596 27.4025C25.7789 27.3055 25.8265 27.2164 25.8964 27.1464C25.9664 27.0765 26.0555 27.0289 26.1525 27.0096C26.2494 26.9903 26.35 27.0002 26.4413 27.0381C26.5327 27.0759 26.6108 27.14 26.6657 27.2222C26.7207 27.3044 26.75 27.4011 26.75 27.5C26.75 27.6326 26.6973 27.7598 26.6036 27.8536C26.5098 27.9473 26.3826 28 26.25 28Z" fill="#5072EB"/> +<path d="M9.25 6.5H11.25V7.5H9.25V6.5Z" fill="#5072EB"/> +<path d="M12.25 6.5H21.25V7.5H12.25V6.5Z" fill="#5072EB"/> +<path d="M9.25 8.5H11.25V9.5H9.25V8.5Z" fill="#5072EB"/> +<path d="M12.25 8.5H21.25V9.5H12.25V8.5Z" fill="#5072EB"/> +<path d="M9.25 10.5H11.25V11.5H9.25V10.5Z" fill="#5072EB"/> +<path d="M12.25 10.5H21.25V11.5H12.25V10.5Z" fill="#5072EB"/> +</svg> From db53b6caa954c8fb82d2d0b99c14aa65c24d21aa Mon Sep 17 00:00:00 2001 From: Breno <breno@estuary.dev> Date: Mon, 21 Oct 2024 06:13:40 -0300 Subject: [PATCH 7/8] Optimize the code --- .../index.tsx | 75 ++++++----- .../DeploymentTabPanel/index.tsx | 17 +++ .../DiagramContainer/index.tsx | 8 ++ .../DeploymentModes/TabPanels/index.tsx | 51 ++++++++ .../Homepage/DeploymentModes/Tabs/index.tsx | 45 +++++++ .../Homepage/DeploymentModes/index.tsx | 121 ++---------------- .../DeploymentModes/styles.module.less | 79 ++++++------ 7 files changed, 213 insertions(+), 183 deletions(-) rename src/components/Homepage/DeploymentModes/{DeploymentDiagram => DeploymentOptionDiagram}/index.tsx (79%) create mode 100644 src/components/Homepage/DeploymentModes/DeploymentTabPanel/index.tsx create mode 100644 src/components/Homepage/DeploymentModes/DiagramContainer/index.tsx create mode 100644 src/components/Homepage/DeploymentModes/TabPanels/index.tsx create mode 100644 src/components/Homepage/DeploymentModes/Tabs/index.tsx diff --git a/src/components/Homepage/DeploymentModes/DeploymentDiagram/index.tsx b/src/components/Homepage/DeploymentModes/DeploymentOptionDiagram/index.tsx similarity index 79% rename from src/components/Homepage/DeploymentModes/DeploymentDiagram/index.tsx rename to src/components/Homepage/DeploymentModes/DeploymentOptionDiagram/index.tsx index d83ae4e1..d7306b8d 100644 --- a/src/components/Homepage/DeploymentModes/DeploymentDiagram/index.tsx +++ b/src/components/Homepage/DeploymentModes/DeploymentOptionDiagram/index.tsx @@ -14,17 +14,18 @@ import { secondLevelSolidBorderBox, dashedBorderBox, middleTag, - arrowLeft, - arrowRight, + tagArrow, + tagArrowLeft, + tagArrowRight, horizontalWrapper, minHeight, privateLinkTag, vpcMarginBottom, privateDeploymentTag, - privateVpcBox, metadataOnlyDarkerBlueTag, metadataOnlyLighterBlueTag, relativePosition, + privateDeploymentVpcBox, } from '../styles.module.less'; const iconSize = 30; @@ -33,7 +34,9 @@ interface DeploymentDiagramProps { selectedTab: string; } -const DeploymentDiagram = ({ selectedTab = '1' }: DeploymentDiagramProps) => { +const DeploymentOptionDiagram = ({ + selectedTab = '1', +}: DeploymentDiagramProps) => { return ( <> <div className={solidBorderBox}> @@ -87,40 +90,22 @@ const DeploymentDiagram = ({ selectedTab = '1' }: DeploymentDiagramProps) => { <div className={clsx( solidBorderBox, - secondLevelSolidBorderBox, - privateVpcBox + secondLevelSolidBorderBox )} > <VpcIcon width={iconSize} /> - <span className={vpcMarginBottom}> + <span + className={clsx( + privateDeploymentVpcBox, + vpcMarginBottom + )} + > Private Deployment VPC </span> <div className={dashedBorderBox}> <PrivateDataPlaneIcon width={iconSize} /> <span>Private Data Plane</span> </div> - <div - className={clsx( - middleTag, - privateDeploymentTag, - privateLinkTag - )} - > - <div className={arrowLeft} /> - <span>PrivateLink</span> - <div className={arrowRight} /> - </div> - <div - className={clsx( - middleTag, - privateDeploymentTag, - metadataOnlyDarkerBlueTag - )} - > - <div className={arrowLeft} /> - <span>metadata only</span> - <div className={arrowRight} /> - </div> </div> ) : null} <div @@ -172,16 +157,42 @@ const DeploymentDiagram = ({ selectedTab = '1' }: DeploymentDiagramProps) => { : null )} > - <div className={arrowLeft} /> + <div className={clsx(tagArrow, tagArrowLeft)} /> <span> {selectedTab === '1' ? 'Internet' : 'metadata only'} </span> - <div className={arrowRight} /> + <div className={clsx(tagArrow, tagArrowRight)} /> </div> ) : null} + {selectedTab === '2' ? ( + <> + <div + className={clsx( + middleTag, + privateDeploymentTag, + privateLinkTag + )} + > + <div className={clsx(tagArrow, tagArrowLeft)} /> + <span>PrivateLink</span> + <div className={clsx(tagArrow, tagArrowRight)} /> + </div> + <div + className={clsx( + middleTag, + privateDeploymentTag, + metadataOnlyDarkerBlueTag + )} + > + <div className={clsx(tagArrow, tagArrowLeft)} /> + <span>metadata only</span> + <div className={clsx(tagArrow, tagArrowRight)} /> + </div> + </> + ) : null} </div> </> ); }; -export default DeploymentDiagram; +export default DeploymentOptionDiagram; diff --git a/src/components/Homepage/DeploymentModes/DeploymentTabPanel/index.tsx b/src/components/Homepage/DeploymentModes/DeploymentTabPanel/index.tsx new file mode 100644 index 00000000..1e244b34 --- /dev/null +++ b/src/components/Homepage/DeploymentModes/DeploymentTabPanel/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import TabPanel from '@mui/lab/TabPanel'; +import DeploymentOptionDetails from '../DeploymentOptionDetails'; + +const tabPanelStyling = { padding: '40px 0 0 0', minHeight: '458px' }; + +const DeploymentTabPanel = ({ value, title, description, keyFeatures }) => ( + <TabPanel value={value} sx={tabPanelStyling} keepMounted> + <DeploymentOptionDetails + title={title} + description={description} + keyFeatures={keyFeatures} + /> + </TabPanel> +); + +export default DeploymentTabPanel; diff --git a/src/components/Homepage/DeploymentModes/DiagramContainer/index.tsx b/src/components/Homepage/DeploymentModes/DiagramContainer/index.tsx new file mode 100644 index 00000000..2045e5e0 --- /dev/null +++ b/src/components/Homepage/DeploymentModes/DiagramContainer/index.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import DeploymentOptionDiagram from '../DeploymentOptionDiagram'; + +const DiagramContainer = ({ selectedTab }) => ( + <DeploymentOptionDiagram selectedTab={selectedTab} /> +); + +export default DiagramContainer; diff --git a/src/components/Homepage/DeploymentModes/TabPanels/index.tsx b/src/components/Homepage/DeploymentModes/TabPanels/index.tsx new file mode 100644 index 00000000..b0a23eff --- /dev/null +++ b/src/components/Homepage/DeploymentModes/TabPanels/index.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import DeploymentTabPanel from '../DeploymentTabPanel'; + +const features = { + public: [ + 'Fully managed by Estuary', + 'Quick setup and minimal configuration required', + 'Automatic updates and maintenance', + 'Multiple data processing region options', + 'Suitable for organizations with less stringent data security requirements', + ], + private: [ + 'Enhanced security with data remaining within the private network', + 'Complete control over data pathways', + 'Immutable infrastructure pattern for up-to-date security', + 'Compliant with stringent data security requirements', + 'Ability to move data across regions', + ], + byoc: [ + 'Full control over the cloud infrastructure', + 'Ability to leverage existing cloud resources and configurations', + 'Customizable to fit specific organizational needs', + 'Potential cost savings by using existing cloud credits or negotiated rates', + 'Greater flexibility in terms of data residency and compliance', + ], +}; + +const TabPanels = () => ( + <> + <DeploymentTabPanel + value="1" + title="PUBLIC DEPLOYMENT" + description="Public Deployment is the standard SaaS offering from Estuary Flow. Ideal for small to medium-sized businesses or teams that want a hassle-free, quick-to-implement solution without the need for extensive customization or heightened security measures." + keyFeatures={features.public} + /> + <DeploymentTabPanel + value="2" + title="PRIVATE DEPLOYMENT" + description="Private Deployment allows customers to run Estuary Flow's data infrastructure within their private environment while maintaining the simplicity of a SaaS platform. Suitable for enterprises and organizations with strict data security and compliance needs, such as those in highly regulated industries or handling sensitive data." + keyFeatures={features.private} + /> + <DeploymentTabPanel + value="3" + title="BRING YOUR OWN CLOUD" + description="BYOC allows customers to deploy Estuary Flow in their own cloud environment. Ideal for organizations that have invested heavily in their cloud infrastructure and want to maintain ownership over their entire stack while benefiting from Estuary Flow's capabilities." + keyFeatures={features.byoc} + /> + </> +); + +export default TabPanels; diff --git a/src/components/Homepage/DeploymentModes/Tabs/index.tsx b/src/components/Homepage/DeploymentModes/Tabs/index.tsx new file mode 100644 index 00000000..4426671d --- /dev/null +++ b/src/components/Homepage/DeploymentModes/Tabs/index.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import Tab from '@mui/material/Tab'; +import TabList from '@mui/lab/TabList'; + +const tabStyling = { + 'color': '#5072EB', + 'transition': 'var(--default-transition)', + 'opacity': '0.75', + 'textTransform': 'none', + 'borderBottom': '1px solid #A4B6F4', + 'width': '33.333%', + '&:hover': { backgroundColor: '#ECEFFC' }, + '&:active': { backgroundColor: '#E3E8FB' }, + '&.Mui-selected': { fontWeight: '600', opacity: '1' }, +}; + +const Tabs = ({ handleTabChange }) => ( + <TabList + onChange={handleTabChange} + aria-label="Scrollable deployment options tabs" + variant="scrollable" + scrollButtons={false} + > + <Tab + label="Public Deployment" + value="1" + sx={tabStyling} + disableRipple + /> + <Tab + label="Private Deployment" + value="2" + sx={tabStyling} + disableRipple + /> + <Tab + label="BYOC (Bring Your Own Cloud)" + value="3" + sx={tabStyling} + disableRipple + /> + </TabList> +); + +export default Tabs; diff --git a/src/components/Homepage/DeploymentModes/index.tsx b/src/components/Homepage/DeploymentModes/index.tsx index 0a0de356..5ed3378f 100644 --- a/src/components/Homepage/DeploymentModes/index.tsx +++ b/src/components/Homepage/DeploymentModes/index.tsx @@ -1,60 +1,11 @@ import React from 'react'; import TabContext from '@mui/lab/TabContext'; -import Tab from '@mui/material/Tab'; -import TabList from '@mui/lab/TabList'; -import TabPanel from '@mui/lab/TabPanel'; +import clsx from 'clsx'; import { defaultWrapperGrey } from '../../../globalStyles/wrappers.module.less'; -import { container, leftColumn, rightColumn } from './styles.module.less'; -import DeploymentOptionDetails from './DeploymentOptionDetails'; -import DeploymentDiagram from './DeploymentDiagram'; - -const tabStyling = { - 'color': '#5072EB', - 'transition': 'var(--default-transition)', - 'opacity': '0.75', - 'textTransform': 'none', - 'borderBottom': '1px solid #A4B6F4', - 'width': '33.333%', - - '&:hover': { - backgroundColor: '#ECEFFC', - }, - - '&:active': { - backgroundColor: '#E3E8FB', - }, - - '&.Mui-selected': { - fontWeight: '600', - opacity: '1', - }, -}; - -const publicDeploymentFeatures = [ - 'Fully managed by Estuary', - 'Quick setup and minimal configuration required', - 'Automatic updates and maintenance', - 'Multiple data processing region options', - 'Suitable for organizations with less stringent data security requirements', -]; - -const privateDeploymentFeatures = [ - 'Enhanced security with data remaining within the private network', - 'Complete control over data pathways', - 'Immutable infrastructure pattern for up-to-date security', - 'Compliant with stringent data security requirements', - 'Ability to move data across regions', -]; - -const byocFeatures = [ - 'Full control over the cloud infrastructure', - 'Ability to leverage existing cloud resources and configurations', - 'Customizable to fit specific organizational needs', - 'Potential cost savings by using existing cloud credits or negotiated rates', - 'Greater flexibility in terms of data residency and compliance', -]; - -const tabPanelStyling = { padding: '40px 0 0 0', minHeight: '458px' }; +import { grid, container, leftColumn, rightColumn } from './styles.module.less'; +import DiagramContainer from './DiagramContainer'; +import TabPanels from './TabPanels'; +import Tabs from './Tabs'; const DeploymentModes = () => { const [selectedTab, setSelectedTab] = React.useState('1'); @@ -65,69 +16,17 @@ const DeploymentModes = () => { return ( <section className={defaultWrapperGrey}> - <div className={container}> - <div className={leftColumn}> - {selectedTab === '1' ? ( - <DeploymentDiagram selectedTab="1" /> - ) : null} - {selectedTab === '2' ? ( - <DeploymentDiagram selectedTab="2" /> - ) : null} - {selectedTab === '3' ? ( - <DeploymentDiagram selectedTab="3" /> - ) : null} + <div className={clsx(grid, container)}> + <div className={clsx(grid, leftColumn)}> + <DiagramContainer selectedTab={selectedTab} /> </div> <div className={rightColumn}> <h2> <span>DEPLOYMENT MODES</span> FOR EVERY ENVIRONMENT </h2> <TabContext value={selectedTab}> - <TabList - onChange={handleTabChange} - aria-label="Scrollable deployment options tabs" - variant="scrollable" - scrollButtons={false} - > - <Tab - label="Public Deployment" - value="1" - sx={tabStyling} - disableRipple - /> - <Tab - label="Private Deployment" - value="2" - sx={tabStyling} - disableRipple - /> - <Tab - label="BYOC (Bring Your Own Cloud)" - value="3" - sx={tabStyling} - disableRipple - /> - </TabList> - <TabPanel value="1" sx={tabPanelStyling} keepMounted> - <DeploymentOptionDetails - title="PUBLIC DEPLOYMENT" - description="Public Deployment is the standard SaaS offering from Estuary Flow. Ideal for small to medium-sized businesses or teams that want a hassle-free, quick-to-implement solution without the need for extensive customization or heightened security measures." - keyFeatures={publicDeploymentFeatures} - /> - </TabPanel> - <TabPanel value="2" sx={tabPanelStyling} keepMounted> - <DeploymentOptionDetails - title="PRIVATE DEPLOYMENT" - description="Private Deployment allows customers to run Estuary Flow's data infrastructure within their private environment while maintaining the simplicity of a SaaS platform. Suitable for enterprises and organizations with strict data security and compliance needs, such as those in highly regulated industries or handling sensitive data." - keyFeatures={privateDeploymentFeatures} - /> - </TabPanel> - <TabPanel value="3" sx={tabPanelStyling} keepMounted> - <DeploymentOptionDetails - title="BRING YOUR OWN CLOUD" - description="BYOC allows customers to deploy Estuary Flow in their own cloud environment. Ideal for organizations that have invested heavily in their cloud infrastructure and want to maintain ownership over their entire stack while benefiting from Estuary Flow's capabilities." - keyFeatures={byocFeatures} - /> - </TabPanel> + <Tabs handleTabChange={handleTabChange} /> + <TabPanels /> </TabContext> </div> </div> diff --git a/src/components/Homepage/DeploymentModes/styles.module.less b/src/components/Homepage/DeploymentModes/styles.module.less index 7631d30e..21df3c8e 100644 --- a/src/components/Homepage/DeploymentModes/styles.module.less +++ b/src/components/Homepage/DeploymentModes/styles.module.less @@ -1,11 +1,17 @@ @import '../../../globalStyles/sections.module.less'; -.container { - .globalMaxWidth; +@primaryTagColor: #6ED5D6; +@secondaryTagColor: #5072EB; +.grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; +} + +.container { + .globalMaxWidth; + justify-content: space-between; gap: 60px; @@ -17,7 +23,7 @@ margin-bottom: 40px; span { - color: #5072EB; + color: @secondaryTagColor; } } @@ -42,9 +48,6 @@ } .leftColumn { - display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; justify-content: center; gap: 20px; position: relative; @@ -152,7 +155,7 @@ align-items: center; span { - background-color: #6ED5D6; + background-color: @primaryTagColor; color: #FFFFFF; font-size: 0.875rem; font-weight: 700; @@ -168,31 +171,31 @@ } } -.arrowLeft { +.tagArrow { width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; - border-right: 14px solid #6ED5D6; @media (max-width: 600px) { border-top: 9px solid transparent; border-bottom: 9px solid transparent; - border-right: 9px solid #6ED5D6; } } -.arrowRight { - width: 0; - height: 0; - border-top: 14px solid transparent; - border-bottom: 14px solid transparent; - border-left: 14px solid #6ED5D6; +.tagArrowLeft { + border-right: 14px solid @primaryTagColor; @media (max-width: 600px) { - border-top: 9px solid transparent; - border-bottom: 9px solid transparent; - border-left: 9px solid #6ED5D6; + border-right: 9px solid @primaryTagColor; + } +} + +.tagArrowRight { + border-left: 14px solid @primaryTagColor; + + @media (max-width: 600px) { + border-left: 9px solid @primaryTagColor; } } @@ -214,7 +217,6 @@ .secondLevelSolidBorderBox { border-radius: 8px; background-color: #FCFCFD; - width: 100%; span { font-weight: 500; @@ -225,20 +227,19 @@ margin-bottom: 54px; @media (max-width: 600px) { - margin-bottom: 26px; + margin-bottom: 40px; } } -.privateVpcBox { - position: relative; -} +.privateDeploymentVpcBox { + margin-bottom: 26px; -.privateDeploymentTag { - span { - min-width: auto; - padding: 7px 8px; + @media (max-width: 600px) { + margin-bottom: 25px; } +} +.privateDeploymentTag { @media (max-width: 600px) { span { padding: 2px 0; @@ -247,34 +248,32 @@ } .privateLinkTag { - top: 29%; - left: 50%; + top: 41%; + left: -2%; @media (max-width: 600px) { - top: 31.8%; + top: 44.5%; } } .metadataOnlyDarkerBlueTag { - top: 88%; - left: -115%; + top: 85%; span { - background-color: #5072EB; + background-color: @secondaryTagColor; } - .arrowLeft { - border-right-color: #5072EB; + .tagArrowLeft { + border-right-color: @secondaryTagColor; } - .arrowRight { - border-left-color: #5072EB; + .tagArrowRight { + border-left-color: @secondaryTagColor; } - @media (max-width: 600px) { span { min-width: 80px; } } -} \ No newline at end of file +} From 6cdb34f628a7aed7032a8b0440079370dc1b1abe Mon Sep 17 00:00:00 2001 From: Breno <breno@estuary.dev> Date: Mon, 21 Oct 2024 06:16:46 -0300 Subject: [PATCH 8/8] Remove "Use" from component name --- .../Advantage.tsx | 0 .../{UseTheBestRealTimeCdc => TheBestRealTimeCdc}/index.tsx | 4 ++-- .../{UseTheBestRealTimeCdc => TheBestRealTimeCdc}/styles.ts | 0 src/pages/index.tsx | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) rename src/components/Homepage/{UseTheBestRealTimeCdc => TheBestRealTimeCdc}/Advantage.tsx (100%) rename src/components/Homepage/{UseTheBestRealTimeCdc => TheBestRealTimeCdc}/index.tsx (96%) rename src/components/Homepage/{UseTheBestRealTimeCdc => TheBestRealTimeCdc}/styles.ts (100%) diff --git a/src/components/Homepage/UseTheBestRealTimeCdc/Advantage.tsx b/src/components/Homepage/TheBestRealTimeCdc/Advantage.tsx similarity index 100% rename from src/components/Homepage/UseTheBestRealTimeCdc/Advantage.tsx rename to src/components/Homepage/TheBestRealTimeCdc/Advantage.tsx diff --git a/src/components/Homepage/UseTheBestRealTimeCdc/index.tsx b/src/components/Homepage/TheBestRealTimeCdc/index.tsx similarity index 96% rename from src/components/Homepage/UseTheBestRealTimeCdc/index.tsx rename to src/components/Homepage/TheBestRealTimeCdc/index.tsx index 4c47de46..84b494cc 100644 --- a/src/components/Homepage/UseTheBestRealTimeCdc/index.tsx +++ b/src/components/Homepage/TheBestRealTimeCdc/index.tsx @@ -14,7 +14,7 @@ import { Wrapper, } from './styles'; -const UseTheBestRealTimeCdc = () => { +const TheBestRealTimeCdc = () => { return ( <Container> <Wrapper> @@ -56,4 +56,4 @@ const UseTheBestRealTimeCdc = () => { ); }; -export default UseTheBestRealTimeCdc; +export default TheBestRealTimeCdc; diff --git a/src/components/Homepage/UseTheBestRealTimeCdc/styles.ts b/src/components/Homepage/TheBestRealTimeCdc/styles.ts similarity index 100% rename from src/components/Homepage/UseTheBestRealTimeCdc/styles.ts rename to src/components/Homepage/TheBestRealTimeCdc/styles.ts diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5c2c649f..348b12a8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,7 +6,7 @@ import Hero from '../components/Homepage/Hero'; import MoveAndTransform from '../components/Homepage/MoveAndTransform'; import CaseStudies from '../components/Homepage/CaseStudies'; import SecureYourData from '../components/Homepage/SecureYourData'; -import UseTheBestRealTimeCdc from '../components/Homepage/UseTheBestRealTimeCdc'; +import TheBestRealTimeCdc from '../components/Homepage/TheBestRealTimeCdc'; import BuildInMinutes from '../components/Homepage/BuildInMinutes'; import AutomateDataops from '../components/Homepage/AutomateDataops'; import InnovateFaster from '../components/Homepage/InnovateFaster'; @@ -23,7 +23,7 @@ const IndexPage = () => { <CaseStudies /> <DeploymentModes /> <SecureYourData /> - <UseTheBestRealTimeCdc /> + <TheBestRealTimeCdc /> <BuildInMinutes /> <AutomateDataops /> <InnovateFaster />