Skip to content

Commit

Permalink
Scrolling icons on homepage (#138)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ceriverso
ceriverso authored Oct 24, 2023
1 parent 8bd3778 commit a35f1bc
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 34 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"react": "^18.2.0",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.6.1",
"react-helmet": "^6.1.0",
"react-hubspot-form": "^1.3.7",
"react-lunr": "^1.1.0",
Expand All @@ -85,7 +86,7 @@
"scripts": {
"build:plugins": "yarn --cwd ./plugins/estuary-rehype-transformers install && yarn --cwd ./plugins/estuary-rehype-transformers build",
"build": "yarn run build:plugins && gatsby build",
"develop": "yarn run build:plugins && gatsby develop",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "yarn run build:plugins && gatsby develop",
"serve": "yarn run build:plugins && gatsby serve",
Expand Down
70 changes: 38 additions & 32 deletions src/components/SectionOne.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { GatsbyImage, StaticImage } from "gatsby-plugin-image"
import type { LottieRef } from "lottie-react"
import { useMediaQuery, useTheme } from "@mui/material"
import { OutboundLink } from "gatsby-plugin-google-gtag"
import Marquee from "react-fast-marquee";



const animFallback = (
Expand All @@ -20,8 +22,8 @@ const animFallback = (
)

const AnimatedHero = () => {
const HeroAnimation = React.useMemo(()=>import("../images/hero-animation.json"),[]);
const Lottie = React.useMemo(()=>React.lazy(() => import("lottie-react")),[]);
const HeroAnimation = React.useMemo(() => import("../images/hero-animation.json"), []);
const Lottie = React.useMemo(() => React.lazy(() => import("lottie-react")), []);

const [heroAnim, setHeroAnim] = React.useState<Awaited<
typeof HeroAnimation
Expand Down Expand Up @@ -98,23 +100,24 @@ const SectionOne = () => {
}
}
`)

const theme = useTheme();
const isSmall = useMediaQuery(theme.breakpoints.down("sm"))


return (
<div className="section-one">
<div className="section-one-wrapper">
<div className="section-one-left">
<h1>Your data,</h1>
<h1>where you <span style={{whiteSpace:"nowrap"}}>want it,</span></h1>
<h1>in <span style={{wordBreak:"break-word", hyphens:"auto"}}>milliseconds</span></h1>
<h1>where you <span style={{ whiteSpace: "nowrap" }}>want it,</span></h1>
<h1>in <span style={{ wordBreak: "break-word", hyphens: "auto" }}>milliseconds</span></h1>
<div className="section-one-subtext-wrapper">
<p className="section-one-subtext">
Managed CDC and Real-time ETL pipelines with streaming SQL transforms.
</p>
</div>
<div style={{display:"flex", flexShrink: 1}}>
<div style={{ display: "flex", flexShrink: 1 }}>
<OutboundLink
target="_blank"
href="https://dashboard.estuary.dev/register"
Expand All @@ -127,39 +130,42 @@ const SectionOne = () => {
target="_blank"
href="/why"
className="section-one-tour-button"
style={{marginLeft:16}}
style={{ marginLeft: 16 }}
>Product Tour</OutboundLink>
)}
</div>
</div>
<div className="section-one-right">
{isMobile || isSmall ? animFallback : <AnimatedHero/>}
{isMobile || isSmall ? animFallback : <AnimatedHero />}
</div>
</div>
<div className="section-one-bottom">
{logos.allStrapiVanityLogo.nodes.map(logo =>
logo.logo.localFile.internal.mediaType ===
"image/svg+xml" ? (
<div
key={logo.id}
style={{ width: 120 }}
dangerouslySetInnerHTML={{
__html: logo.logo.localFile.svg.content,
}}
/>
) : (
<GatsbyImage
key={logo.id}
alt={`logo`}
className="section-one-bottom-logo"
loading="eager"
image={
logo.logo.localFile.childImageSharp
.gatsbyImageData
}
/>
)
)}
<div className="custom-slides slide-container">
<Marquee>

{logos.allStrapiVanityLogo.nodes?.map((logo) =>
logo.logo.localFile.internal.mediaType === "image/svg+xml" ? (
<div className="custom-slider" key={logo.id} >
<div
dangerouslySetInnerHTML={{
__html: logo.logo.localFile.svg.content,
}}
/>
</div>
) : (
<div className="custom-slider">
<GatsbyImage
key={logo.id}
alt={`logo`}
loading="eager"
image={
logo.logo.localFile.childImageSharp.gatsbyImageData
}
/>
</div>
)
)}
</Marquee>

</div>
</div>
)
Expand Down
78 changes: 77 additions & 1 deletion src/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6272,4 +6272,80 @@ table th {
}
}
}
/*Blog post template updates end*/



/*Blog post template updates end*/
.custom-slides{
.slick-slider{
@media(min-width: 801px){
padding-right: 100px;
}
@media(max-width: 800px){
padding-right: 20px;
}
}
.slick-slide{margin: 0px 10px;overflow: visible !important; width: 190px !important;}
.slick-track{
overflow: visible !important;
display: flex;
justify-content: center;
align-items: center;
}
.slick-list{height: 80px;}
.gatsby-image-wrapper{
height: 46px !important;
display: flex !important;
align-items: center;
justify-content: space-between;

}
.rfm-marquee, .rfm-initial-child-container{
display: flex;
align-items: end;
gap: 120px;
@media (max-width: 810px){
gap: 50px;
}

}
.rfm-initial-child-container{
padding-right: 60px;
}
}

.custom-slider{
display: flex !important;
align-items: center;
justify-content: space-between;

img,svg{
width:100%;
max-width: 120px;
height: 40px;
opacity: 1;visibility: visible;
object-fit:contain !important;
}
.slick-slide{
width: 130px !important;
}
}

.slide-container{
padding: 0px ~"calc(min(9%, 146px))" 0px 0px;
height: 140px;
padding-bottom: 20px;
display: flex;
@media (max-width: 810px){
padding-right: 16px;
height: 120px;
padding-bottom: 20px;
}
}

// section-one-subtext-wrapper
.section-one-subtext-wrapper {
@media (max-width: 810px){
margin-top: 0px;
}
}

0 comments on commit a35f1bc

Please sign in to comment.