Merge remote-tracking branch 'origin/master' into travjenkins/seo/upd…

…ate-footer-content
estuary · Jul 10, 2024 · 9ec12cc · 9ec12cc
2 parents 681cde0 + 7e85562
commit 9ec12cc
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 36 deletions.
diff --git a/firebase.json b/firebase.json
@@ -135,6 +135,16 @@
                 "source": "/products",
                 "destination": "/product",
                 "type": 301
+            },
+            {
+                "source": "/integrations/s-to-pinecone",
+                "destination": "/integrations/s3-to-pinecone",
+                "type": 301
+            },
+            {
+                "source": "/source/s",
+                "destination": "/source/s3",
+                "type": 301
             }
         ],
         "public": "public",

diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx
@@ -94,6 +94,7 @@ export const onRenderBody = ({ setHtmlAttributes, setHeadComponents }) => {
             dangerouslySetInnerHTML={{
                 __html: reoDevHTML,
             }}
+            async
         />,
     ]);
 };
diff --git a/src/components/HeaderNavbar/styles.ts b/src/components/HeaderNavbar/styles.ts
@@ -68,5 +68,5 @@ export const MenuBackground = styled.div`
     height: 100vh;
     display: flex;
     background-color: rgba(0, 0, 0, 0.6);
-    z-index: 2;
+    z-index: 3;
 `;
diff --git a/src/components/Product/SectionTwo/Hover/index.tsx b/src/components/Product/SectionTwo/Hover/index.tsx
@@ -1,5 +1,4 @@
 import { Typography } from '@mui/material';
-import Fade from '@mui/material/Fade';
 import { StaticImage } from 'gatsby-plugin-image';
 import React, { ReactNode, useCallback, useState } from 'react';
 import AiIcon from '../../../../svgs/android-brain.svg';
@@ -18,6 +17,7 @@ import {
     ConnectorsGroupsLeftWrapper,
     ConnectorsGroupsRightWrapper,
     Container,
+    FadeTransition,
     FeatureWrapper,
     FlowStepDescription,
     FlowStepImageWrapper,
@@ -76,7 +76,7 @@ const Hover = ({ slide, children }: HoverProps) => {
     return (
         <Container $slide={slide}>
             {[1, 2].includes(slide) ? (
-                <ConnectorsGroupsLeftWrapper>
+                <ConnectorsGroupsLeftWrapper className="connectors-groups">
                     <ConnectorsGroup>
                         <Connector to="/source/oracle-flashback">
                             <LogoWrapper>
@@ -293,7 +293,7 @@ const Hover = ({ slide, children }: HoverProps) => {
             ) : null}
             <ImageWrapper $slide={slide}>{children}</ImageWrapper>
             {[1, 4].includes(slide) ? (
-                <ConnectorsGroupsRightWrapper>
+                <ConnectorsGroupsRightWrapper className="connectors-groups">
                     <ConnectorsGroup>
                         <Connector to="/destination/snowflake">
                             <LogoWrapper>
@@ -456,7 +456,7 @@ const Hover = ({ slide, children }: HoverProps) => {
                     </ConnectorsGroup>
                 </ConnectorsGroupsRightWrapper>
             ) : null}
-            <Fade in={hoveredFlowStepBlock === 'transform'}>
+            <FadeTransition in={hoveredFlowStepBlock === 'transform'}>
                 {slide === 3 ? (
                     <HoverableBlock>
                         <FlowStepImageWrapper $slide={slide}>
@@ -498,8 +498,8 @@ const Hover = ({ slide, children }: HoverProps) => {
                         </TooltipTop>
                     </HoverableBlock>
                 )}
-            </Fade>
-            <Fade in={hoveredFlowStepBlock === 'stream'}>
+            </FadeTransition>
+            <FadeTransition in={hoveredFlowStepBlock === 'stream'}>
                 {slide === 3 ? (
                     <HoverableBlock>
                         <FlowStepImageWrapper $slide={slide}>
@@ -538,8 +538,8 @@ const Hover = ({ slide, children }: HoverProps) => {
                         </TooltipLeft>
                     </HoverableBlock>
                 )}
-            </Fade>
-            <Fade in={hoveredFlowStepBlock === 'replay'}>
+            </FadeTransition>
+            <FadeTransition in={hoveredFlowStepBlock === 'replay'}>
                 {slide === 3 ? (
                     <HoverableBlock>
                         <FlowStepImageWrapper $slide={slide}>
@@ -581,8 +581,8 @@ const Hover = ({ slide, children }: HoverProps) => {
                         </TooltipTop>
                     </HoverableBlock>
                 )}
-            </Fade>
-            <Fade in={hoveredFlowStepBlock === 'store'}>
+            </FadeTransition>
+            <FadeTransition in={hoveredFlowStepBlock === 'store'}>
                 {slide === 3 ? (
                     <HoverableBlock>
                         <FlowStepImageWrapper $slide={slide}>
@@ -626,9 +626,9 @@ const Hover = ({ slide, children }: HoverProps) => {
                         </TooltipBottom>
                     </HoverableBlock>
                 )}
-            </Fade>
+            </FadeTransition>
             {slide === 1 ? (
-                <Fade in={hoveredFlowStepBlock === 'center'}>
+                <FadeTransition in={hoveredFlowStepBlock === 'center'}>
                     <HoverableBlock>
                         <FlowStepImageWrapper $slide={slide}>
                             <StaticImage
@@ -646,7 +646,7 @@ const Hover = ({ slide, children }: HoverProps) => {
                             </FlowStepDescription>
                         </TooltipCenter>
                     </HoverableBlock>
-                </Fade>
+                </FadeTransition>
             ) : null}
             {[1, 3].includes(slide) ? (
                 <>

diff --git a/src/components/Product/SectionTwo/Hover/styles.ts b/src/components/Product/SectionTwo/Hover/styles.ts
@@ -1,3 +1,4 @@
+import Fade from '@mui/material/Fade';
 import { Link } from 'gatsby';
 import styled, { css } from 'styled-components';
 
@@ -59,6 +60,17 @@ export const Container = styled.div<Slide>`
     @media (max-width: 768px) {
         display: none;
     }
+
+    .connectors-groups {
+        max-width: 406px;
+        display: flex;
+        flex-direction: column;
+        z-index: 2;
+
+        @media (max-width: 1280px) {
+            max-width: 320px;
+        }
+    }
 `;
 
 const baseBlockStyling = `
@@ -116,42 +128,31 @@ export const ImageWrapper = styled.div<Slide>`
     justify-content: center;
     margin-top: ${(props) => (props.$slide === 1 ? '8%' : 0)};
     max-width: ${(props) => (props.$slide === 3 ? '1024px' : '100%')};
+    z-index: 1;
 `;
 
 export const ConnectorsGroupsLeftWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
     align-items: flex-end;
     justify-content: right;
     margin-right: -24%;
 `;
 
 export const ConnectorsGroupsRightWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
     align-items: flex-start;
     justify-content: left;
     margin-left: -24%;
 `;
 
 export const ConnectorsGroup = styled.div`
     width: 100%;
-    height: 100%;
-    max-width: 406px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1.5fr;
+    display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     gap: 4%;
     padding: 3% 3% 3% 9%;
     border: 2px solid #e5e9f5;
     border-radius: 100px;
     background-color: #fdfdfe;
-    z-index: 1;
-
-    @media (max-width: 1280px) {
-        max-width: 320px;
-    }
 
     &:not(:first-child) {
         margin-top: 2%;
@@ -167,6 +168,7 @@ export const Connector = styled(Link)`
     transition: transform 0.2s ease-in-out;
     cursor: pointer;
     margin-bottom: -40px;
+    max-width: 42px;
 
     &:hover {
         transform: translateY(-12px);
@@ -218,7 +220,7 @@ export const HiddenLogoTitle = styled.span`
         font-size: 0.75rem;
     }
 
-    @media (max-width: 940px) {
+    @media (max-width: 1024px) {
         font-size: 0.5rem;
     }
 `;
@@ -378,3 +380,7 @@ export const FlowStepDescription = styled.p`
         line-height: 16.2px;
     }
 `;
+
+export const FadeTransition = styled(Fade)`
+    z-index: 3;
+`;
diff --git a/src/components/Product/SectionTwo/styles.ts b/src/components/Product/SectionTwo/styles.ts
@@ -58,13 +58,13 @@ export const SlideDescription = styled.p`
 export const TabletImageWrapper = styled.div`
     margin-top: 4.5%;
 
-    @media (max-width: 425px), (min-width: 769px) {
+    @media (max-width: 425px), (min-width: 811px) {
         display: none;
     }
 `;
 
 export const DesktopImageWrapper = styled.div`
-    @media (max-width: 768px) {
+    @media (max-width: 810px) {
         display: none;
     }
 `;

diff --git a/src/components/seo.tsx b/src/components/seo.tsx
@@ -92,13 +92,13 @@ const Seo: React.FC<SeoProps> = ({
                     '@type': 'Organization',
                     'name': 'Estuary',
                     'alternateName': 'Estuary Flow',
-                    'description':
-                        'Estuary helps organizations gain real-time access to their data without having to manage infrastructure. Capture data from SaaS or technology sources, transform it and materialize it back into the same types of systems all with millisecond latency.',
-                    image,
-                    'logo': site.siteMetadata?.siteUrl + logoUrl,
                     'url':
                         url ??
                         (site.siteMetadata?.siteUrl || 'https://estuary.dev/'),
+                    'description':
+                        'Estuary is a real-time data operations (DataOps) platform that simplifies data pipelines. Capture data from any source, transform it with low-latency processing, and materialize it back into your systems for immediate action. Estuary enables data integration, stream processing, and change data capture in a unified platform.',
+                    'logo': site.siteMetadata?.siteUrl + logoUrl,
+                    'image': site.siteMetadata?.siteUrl + logoUrl,
                     'telephone': '',
                     'sameAs': [
                         'https://twitter.com/EstuaryDev',
@@ -109,10 +109,35 @@ const Seo: React.FC<SeoProps> = ({
                     'address': {
                         '@type': 'PostalAddress',
                         'streetAddress': '244 5th Ave, Suite 1277',
-                        'addressLocality': 'New York, NY',
+                        'addressLocality': 'New York',
+                        'addressRegion': 'NY',
                         'postalCode': '10001',
                         'addressCountry': 'US',
                     },
+                    'knowsAbout': [
+                        'https://en.wikipedia.org/wiki/Data_integration',
+                        'https://en.wikipedia.org/wiki/Extract,_transform,_load',
+                        'https://en.wikipedia.org/wiki/Data_pipeline',
+                        'https://en.wikipedia.org/wiki/Real-time_data',
+                        'https://en.wikipedia.org/wiki/Data_warehouse',
+                        'https://en.wikipedia.org/wiki/Change_data_capture',
+                    ],
+                    'numberOfEmployees': '11-50',
+                    'founders': [
+                        {
+                            '@type': 'Person',
+                            'name': 'David Yaffe',
+                            'jobTitle': 'Co-founder',
+                            'description':
+                                'David Yaffe is a co-founder and the CEO of Estuary. He previously served as the COO of LiveRamp and the co-founder / CEO of Arbor which was sold to LiveRamp in 2016. He has an extensive background in product management, serving as head of product for Doubleclick Bid Manager and Invite Media.',
+                            'sameAs': [
+                                'https://www.linkedin.com/in/davidyaffe',
+                                'https://www.crunchbase.com/person/david-yaffe',
+                                'https://twitter.com/dyaffe',
+                                'https://www.producthunt.com/@dyaffe',
+                            ],
+                        },
+                    ],
                 })}
             </script>
         </>
-Original file line number
+Diff line change
@@ Expand Up @@
                 dangerouslySetInnerHTML={{
                     __html: reoDevHTML,
                 }}
+                async
             />,
         ]);
     };