Merge pull request #143 from Varbintech/feature/hire-engineers-new-en…

…tity Feature/hire engineers new entity
Varbintech · Aug 7, 2024 · ce4c7b0 · ce4c7b0
2 parents e34ae68 + 47bc355
commit ce4c7b0
Show file tree

Hide file tree

Showing 30 changed files with 1,291 additions and 240 deletions.
diff --git a/components-pages/case-study/CallToAction.tsx b/components-pages/case-study/CallToAction.tsx
@@ -9,14 +9,17 @@ import Button from '../../components/common/buttons/Button';
 import { useGenerateEventGa } from '../../hooks/use-generate-event-ga';
 
 const CallToActionComponent = (props: CallToAction) => {
-  const { title, action, actionText, actionId } = props;
+  const { title, action, actionText, actionId, noPadding } = props;
 
   const handleCtaClick = useGenerateEventGa('link');
 
   return (
     <Container
       maxWidth="lg"
-      sx={{ paddingTop: { xs: '64px' }, paddingBottom: { xs: '64px', lg: '120px' } }}
+      sx={{
+        paddingTop: noPadding ? 0 : { xs: '64px' },
+        paddingBottom: noPadding ? 0 : { xs: '64px', lg: '120px' },
+      }}
     >
       <Stack
         direction={{ xs: 'column', sm: 'row' }}

diff --git a/components-pages/layout/Layout.tsx b/components-pages/layout/Layout.tsx
@@ -12,6 +12,8 @@ import Navigation from '../../components/common/navigation/Navigation';
 import Contact from '../../components/contact/Contact';
 import Footer from '../../components/footer/Footer';
 
+import type { HireEngineersLink } from '../../models';
+
 import { socialIcons } from '../../mocks/social-icons';
 import { footerData } from '../../mocks/footer-data';
 
@@ -26,11 +28,18 @@ const MainStyled = styled('main')`
 `;
 
 interface LayoutProps {
-  children: ReactNode;
+  children: ReactNode & {
+    props: {
+      hireEngineersLinks: Array<HireEngineersLink>;
+    };
+  };
   className?: string;
+  hireEngineersLinks: Array<HireEngineersLink>;
 }
 
-function Layout({ children, className }: LayoutProps) {
+function Layout(props: LayoutProps) {
+  const { children, className, hireEngineersLinks } = props;
+
   const [acceptsCookies, setAcceptsCookies] = useLocalStorageState('varbintech-accepts-cookies', {
     defaultValue: false,
   });
@@ -57,7 +66,12 @@ function Layout({ children, className }: LayoutProps) {
         <Contact data={socialIcons} />
       </MainStyled>
 
-      <Footer data={footerData} />
+      <Footer
+        data={{
+          ...footerData,
+          hireEngineerLinks: hireEngineersLinks,
+        }}
+      />
     </div>
   );
 }

diff --git a/components/common/chip/ChipTechGroup.tsx b/components/common/chip/ChipTechGroup.tsx
@@ -1,14 +1,21 @@
-import type { ReactNode } from 'react';
+import type { ElementType } from 'react';
 
-import Stack from '@mui/material/Stack';
+import Stack, { type StackProps } from '@mui/material/Stack';
 
-interface ChipTechGroupProps {
-  children: ReactNode;
-}
-
-const ChipTechGroup = ({ children }: ChipTechGroupProps) => {
+const ChipTechGroup = ({
+  children,
+  direction,
+  gap,
+  flexWrap,
+  ...restProps
+}: StackProps & { component?: ElementType }) => {
   return (
-    <Stack direction="row" gap={2} flexWrap="wrap">
+    <Stack
+      direction={direction || 'row'}
+      gap={gap || 2}
+      flexWrap={flexWrap || 'wrap'}
+      {...restProps}
+    >
       {children}
     </Stack>
   );

diff --git a/components/common/result/Result.tsx b/components/common/result/Result.tsx
@@ -12,6 +12,7 @@ import { PageContainer } from './styled-components';
 interface ResultProps {
   data: {
     resultInfo: Array<ProjectResultInfo>;
+    title?: string;
   };
 }
 
@@ -23,20 +24,20 @@ export const ResultContainer = ({ children }: ResultContainerProps) => (
   <PageContainer>{children}</PageContainer>
 );
 
-const Result: FC<ResultProps> = props => {
-  const { data } = props;
+const Result: FC<ResultProps> = ({ data }) => {
+  const { resultInfo, title } = data;
 
   return (
     <ResultContainer>
       <Container maxWidth="lg">
         <Grid container spacing={3} columns={12} sx={{ marginBottom: { xs: '36px', lg: '58px' } }}>
           <Grid container item direction="column" xs={12} md={3}>
             <Typography variant="subtitle1" sx={{ fontWeight: 500 }}>
-              Results
+              {title || 'Results'}
             </Typography>
           </Grid>
 
-          {data.resultInfo.map((item, index) => {
+          {resultInfo.map((item, index) => {
             return (
               <Grid key={index} container item direction="column" xs={4} md={3}>
                 <Typography variant="h3" marginBottom={1.25}>

diff --git a/components/common/typography/Markdown.tsx b/components/common/typography/Markdown.tsx
@@ -5,6 +5,8 @@ import Typography from '@mui/material/Typography';
 import MuiLink from '../link/Link';
 import { TextColumnListStyled, TextColumnListItem } from '../text-column/TextColumn';
 
+import { ListContainer } from './styled-components';
+
 import ReactMarkdown from 'react-markdown';
 
 export const MarkdownText = ({
@@ -41,6 +43,16 @@ export const MarkdownList = ({
   <TextColumnListStyled {...restProps}>{children}</TextColumnListStyled>
 );
 
+export const MarkdownListOl = ({
+  children,
+  // Comes from ReactMarkdown
+  // @ts-expect-error
+  node: _,
+  ...restProps
+}: HTMLAttributes<HTMLOListElement> | HTMLAttributes<HTMLOListElement>) => (
+  <ListContainer {...restProps}>{children}</ListContainer>
+);
+
 export const MarkdownListItem = ({
   children,
   // Comes from ReactMarkdown

diff --git a/components/common/typography/styled-components.ts b/components/common/typography/styled-components.ts
@@ -0,0 +1,9 @@
+import { styled } from '@mui/material/styles';
+
+export const ListContainer = styled('ol')(({ theme }) => ({
+  paddingLeft: 0,
+
+  [theme.breakpoints.up('md')]: {
+    paddingLeft: '40px',
+  },
+}));
diff --git a/components/common/update-label/styled-components.ts b/components/common/update-label/styled-components.ts
@@ -14,6 +14,52 @@ const animatedGradient = keyframes`
   }
 `;
 
+const animatedColor = keyframes`
+  0% {
+    color: #f79533;
+  }
+
+  10% {
+    color: #f37055;
+  }
+
+  20% {
+    color: #ef4e7b;
+  }
+
+  30% {
+    color: #a166ab;
+  }
+
+  40% {
+    color: #5073b8;
+  }
+
+  50% {
+    color: #1098ad;
+  }
+
+  60% {
+    color: #07b39b;
+  }
+
+  70% {
+    color: #6fba82;
+  }
+
+  80% {
+    color: #f79533;
+  }
+
+  90% {
+    color: #f37055;
+  }
+
+  100% {
+    color: #ef4e7b;
+  }
+`;
+
 export const UpdateLabelContainer = styled('span')(({ theme }) => ({
   display: 'inline-block',
   marginRight: '16px',
@@ -35,6 +81,8 @@ export const UpdateLabelContainer = styled('span')(({ theme }) => ({
     position: 'relative',
     backgroundColor: theme.palette.background.paper,
     borderColor: 'transparent',
+    animation: `${animatedColor} 3s ease alternate infinite`,
+    fontWeight: 500,
 
     '&::before': {
       content: '""',

diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
@@ -3,79 +3,75 @@ import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 
-import type { FooterData } from '../../models';
+import type { FooterData, HireEngineersLink } from '../../models';
 
 import { Settings } from '../../constants/settings';
+import { MetaData } from '../../constants/meta';
 import { useGenerateEventGa } from '../../hooks/use-generate-event-ga';
 
-import Link, { type LinkProps } from '../common/link/Link';
 import NavigationLink from '../common/link/NavigationLink';
 import RectangleIcon from '../common/icon-rectangle/RectangleIcon';
 import SiteLogo from '../common/navigation/SiteLogo';
 
 import { FooterList, FooterListItem, IconRightContainer, PageContainer } from './styled-components';
 
 interface FooterProps {
-  data: FooterData;
+  data: Omit<FooterData, 'hireEngineers'> & {
+    hireEngineerLinks: Array<HireEngineersLink>;
+  };
 }
 
 const Footer = ({ data }: FooterProps) => {
   const handleGa = useGenerateEventGa('link');
 
   const currentYear = new Date().getFullYear();
 
-  const additionalFooterLinkProps = (
-    link: string,
-  ): Pick<LinkProps, 'component' | 'href' | 'underline' | 'className'> => {
-    return link
-      ? { href: link, underline: 'hover', className: 'footer-link' }
-      : { component: 'div' };
-  };
-
   return (
     <footer>
       <PageContainer>
         <IconRightContainer>
           <RectangleIcon />
         </IconRightContainer>
+
         <Container maxWidth="lg">
           <Grid container spacing={{ xs: 6.5, md: 3, lg: 5.5 }} columns={12}>
-            <Grid container item direction="column" xs={12} md={3}>
+            <Grid container item direction="column" xs={12} md={4}>
               <SiteLogo
                 onGa={handleGa}
                 id="siteLogoLink_footer"
                 isDarkTheme={Settings.DarkThemeAvailable}
               />
-              <Typography marginTop={2}>
-                We help startups and companies of all shapes and sizes to build high-quality
-                Front-End solutions.
-              </Typography>
+              <Typography marginTop={2}>{MetaData.Description}</Typography>
             </Grid>
-            <Grid container item direction="column" xs={6} md={3}>
+
+            <Grid container item direction="column" xs={6} md={4} mx={{ xs: 'unset', md: 'auto' }}>
               <Typography variant="subtitle2" component="h4">
                 Navigation
               </Typography>
 
-              <FooterList>
-                {data.navigations.map(singleRoute => {
-                  if (singleRoute.href || singleRoute.scrollTo) {
-                    return (
-                      <FooterListItem key={singleRoute.id}>
-                        <NavigationLink
-                          href={singleRoute.href || singleRoute.scrollTo}
-                          id={`${singleRoute.linkId}_footer`}
-                        >
-                          {singleRoute.text}
-                        </NavigationLink>
-                      </FooterListItem>
-                    );
-                  }
-
-                  return null;
-                })}
-              </FooterList>
+              <nav>
+                <FooterList>
+                  {data.navigations.map(singleRoute => {
+                    if (singleRoute.href || singleRoute.scrollTo) {
+                      return (
+                        <FooterListItem key={singleRoute.id}>
+                          <NavigationLink
+                            href={singleRoute.href || singleRoute.scrollTo}
+                            id={`${singleRoute.linkId}_footer`}
+                          >
+                            {singleRoute.text}
+                          </NavigationLink>
+                        </FooterListItem>
+                      );
+                    }
+
+                    return null;
+                  })}
+                </FooterList>
+              </nav>
             </Grid>
-            <Grid container item direction="column" xs={6} md={3}>
+
+            {/* <Grid container item direction="column" xs={6} md={3}>
               <Typography variant="subtitle2" component="h4">
                 Services
               </Typography>
@@ -90,24 +86,30 @@ const Footer = ({ data }: FooterProps) => {
                   );
                 })}
               </FooterList>
-            </Grid>
+            </Grid> */}
+
             <Grid container item direction="column" xs={10} md={3}>
               <Typography variant="subtitle2" component="h4">
                 Hire Engineers
               </Typography>
-              <FooterList>
-                {data.hireEngineers.map(hireEngineer => {
-                  return (
+
+              <nav>
+                <FooterList>
+                  {data.hireEngineerLinks.map(hireEngineer => (
                     <FooterListItem key={hireEngineer.id}>
-                      <Link {...additionalFooterLinkProps(hireEngineer.hireLink)}>
-                        {hireEngineer.hireText}
-                      </Link>
+                      <NavigationLink
+                        href={`/hire-engineers/${hireEngineer.slug}`}
+                        id={`hireEngineer_${hireEngineer.id}`}
+                      >
+                        {hireEngineer.title}
+                      </NavigationLink>
                     </FooterListItem>
-                  );
-                })}
-              </FooterList>
+                  ))}
+                </FooterList>
+              </nav>
             </Grid>
           </Grid>
+
           <Divider sx={{ margin: { xs: '30px 0 22px', md: '60px 0 22px', lg: '118px 0 22px' } }} />
 
           <Typography variant="subtitle2" sx={{ textAlign: { md: 'center' } }} component="h5">