Skip to content

Commit

Permalink
Adapt Flow diagram component to company updates hero section (#648)
Browse files Browse the repository at this point in the history 
* Adapt diagram component to company updates hero section

* Add some tweaks

* Add some more tweaks

---------

Co-authored-by: Breno <[email protected]>
  • Loading branch information
@Brenosalv
Brenosalv and Breno authored Jan 24, 2025
1 parent 909308c commit 9554200
Show file tree
Hide file tree
Showing 6 changed files with 543 additions and 414 deletions.
29 changes: 7 additions & 22 deletions src/components/CompanyUpdatesPage/Hero/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,23 @@
import { StaticImage } from 'gatsby-plugin-image';
import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less';
import Container from '../../Container';
import HeroSectionDetails from '../../HeroSectionDetails';
import HeroSectionActions from '../../HeroSectionActions';
import { container, baseImage } from './styles.module.less';
import FlowDiagram from '../../FlowDiagram';
import { diagramCardPositions } from './styles.module.less';

const Hero = () => {
return (
<section className={defaultWrapperDarkBlue}>
<Container className={container}>
<Container>
<HeroSectionDetails
title="STAY CURRENT WITH ESTUARY FLOW"
description="Stay informed and make the most of Flow's powerful capabilities."
ctaButtons={<HeroSectionActions />}
/>
<div className={baseImage}>
<span>Fully managed connectors</span>
<span>Materialize</span>
<span>Store and Transform</span>
<span>Streaming CDC</span>
<span>Real-time</span>
<span>Batch</span>
<span>SaaS</span>
<span>Analytics</span>
<span>Ops</span>
<span>AI</span>
<StaticImage
src="../../../images/company-updates/hero-image.png"
alt="Data Pipeline diagram - store, transform, and materialize processes with real-time and batch data integration."
quality={100}
placeholder="blurred"
loading="eager"
/>
</div>
<FlowDiagram
DiagramCardsClassName={diagramCardPositions}
hasDesktopImageOnly
/>
</Container>
</section>
);
Expand Down
272 changes: 210 additions & 62 deletions src/components/CompanyUpdatesPage/Hero/styles.module.less
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,245 @@
.baseImage {
position: relative;
}

.container {
> :nth-child(2) {
flex: none;
max-width: 57%;
.diagramCardPositions {
h4 {
top: 0.9vw;
font-size: 0.65vw;
line-height: 0.65vw;

@media (min-width: 1601px) {
font-size: 0.65rem;
line-height: 10px;
}

@media (max-width: 1024px) {
font-size: 1.3vw;
line-height: normal;
}
}

span {
position: absolute;
z-index: 1;
line-height: 100%;
color: var(--grey);
text-align: center;
font-size: 0.6rem;
h4:first-of-type {
left: 1vw;

@media (max-width: 1600px) {
font-size: 0.6vw;
@media (min-width: 1601px) {
top: 16px;
left: 15px;
}

@media (max-width: 1024px) {
font-size: 1.04vw;
top: 5%;
left: 3.2%;
}

@media (max-width: 768px) {
top: 5%;
left: 3.6%;
font-size: 1.25vw;
line-height: normal;
}

@media (max-width: 425px) {
font-size: 1.16vw;
left: 3.2%;
font-size: 1.5vw;
}
}

span:nth-child(1) {
top: 16%;
left: 2.8%;
font-weight: 600;
}
h4:nth-of-type(2) {
top: 0.55vw;
right: 1.9vw;

span:nth-child(2) {
top: 16%;
right: 7.75%;
font-weight: 600;
}
@media (min-width: 1601px) {
top: 12px;
right: 30px;
}

span:nth-child(3) {
top: 51.5%;
left: 44.5%;
font-weight: 600;
max-width: 11%;
@media (max-width: 1024px) {
top: 3%;
right: 5%;
}

@media (max-width: 768px) {
top: 2.8%;
left: 82.5%;
font-size: 1.25vw;
line-height: normal;
}

@media (max-width: 425px) {
font-size: 1.5vw;
white-space: nowrap;
}
}

span:nth-child(4) {
top: 31.5%;
left: 6.5%;
div {
gap: 0.2vw;

@media (max-width: 425px) {
gap: 1vw;
}

span {
font-size: 0.65vw;
line-height: normal;

@media (min-width: 1601px) {
font-size: 0.65rem;
}

@media (max-width: 1024px) {
font-size: 1.3vw;
}

@media (max-width: 425px) {
font-size: 1.5vw;
}
}

svg {
width: 1.5vw;
height: 1.5vw;

@media (min-width: 1601px) {
width: 24px;
height: 24px;
}

@media (max-width: 1024px) {
width: 3vw;
height: 3vw;
}

@media (max-width: 425px) {
width: 3.5vw;
height: 3.5vw;
}
}
}

span:nth-child(5) {
top: 50%;
left: 8%;
div:first-of-type {
top: 3.4vw;
left: 2.8vw;

@media (min-width: 1601px) {
top: 56px;
left: 44px;
}

@media (max-width: 1024px) {
top: 19%;
left: 7.8%;
}
}

span:nth-child(6) {
top: 69%;
left: 9.8%;
div:nth-of-type(2) {
top: 9.1vw;
left: 1.5vw;

@media (min-width: 1601px) {
top: 148px;
left: 26px;
}

@media (max-width: 1280px) {
top: 48%;
left: 3.6%;
}

@media (max-width: 1024px) {
top: 48%;
left: 4.4%;
}
}

span:nth-child(7) {
top: 89%;
left: 9.8%;
div:nth-of-type(3) {
top: 14vw;
left: 2.2vw;

@media (min-width: 1601px) {
top: 230px;
left: 36px;
}

@media (max-width: 1280px) {
top: 75%;
left: 6%;
}
}

span:nth-child(8) {
top: 37%;
right: 8.5%;
div:nth-of-type(4) {
top: 3.4vw;
right: 2.8vw;

@media (min-width: 1601px) {
top: 55px;
right: 46px;
}

@media (max-width: 1280px) {
top: 18%;
right: 7.5%;
}

@media (max-width: 768px) {
left: 85%;
}
}

span:nth-child(9) {
top: 62%;
right: 10%;
div:nth-of-type(5) {
top: 9vw;
right: 2.6vw;

@media (min-width: 1601px) {
top: 144px;
right: 42px;
}

@media (max-width: 1280px) {
top: 46%;
right: 7%;
}

@media (max-width: 768px) {
left: 84%;
}
}

span:nth-child(10) {
top: 86%;
right: 10.7%;
div:nth-of-type(6) {
top: 14.5vw;
right: 3.5vw;

@media (min-width: 1601px) {
top: 236px;
right: 58px;
}

@media (max-width: 1280px) {
top: 76%;
right: 9.5%;
}

@media (max-width: 768px) {
left: 86%;
}
}

@media (max-width: 1024px) {
> :nth-child(1) {
flex: none;
max-width: 100%;
div:nth-of-type(7) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

div {
display: flex;
align-items: center;
gap: 8px;
flex-direction: row;
position: static;
}

> :nth-child(2) {
flex: none;
max-width: 100%;
h4 {
position: static;

@media (max-width: 1024px) {
font-size: 1vw;
line-height: 1.25vw;
}
}
}
}
Loading

0 comments on commit 9554200

Please sign in to comment.