Feat: Woodpecker

src/containers/Malkoha/index.tsx

@@ -72,8 +72,8 @@ const Malkoha: React.FC<MalkohaProps> = ({
             button.link ? (
               <ContainedButton
                 color="secondary"
-                aria-label='view more about us'
-                vocab='view more about us'
+                aria-label={button.buttonText}
+                vocab={button.buttonText}
                 sx={{ my: 3 }}
                 component={Link}
                 href={button.link}
@@ -83,8 +83,8 @@ const Malkoha: React.FC<MalkohaProps> = ({
             ) : (
               <ContainedButton
                 color="secondary"
-                aria-label='view more about us'
-                vocab='view more about us'
+                aria-label={button.buttonText}
+                vocab={button.buttonText}
                 sx={{ my: 3 }}
                 onClick={button.onClick}
               >

src/containers/Parakeet/BackgroundImage/index.tsx

@@ -0,0 +1,49 @@
+import { alpha, styled } from '@mui/material';
+import Image from 'next/image';
+import React from 'react';
+
+const Glass = styled('div')(({ theme }) => ({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  backgroundColor: alpha(theme.Colors.bhasma, 0.25),
+  zIndex: 1,
+  boxShadow: 'inset ' + theme.shadows[20],
+}));
+
+const StyledImage = styled(Image)(({ theme }) => ({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  zIndex: 0,
+  filter: 'blur(10px)',
+  transform: 'scale(1.05)',
+}));
+
+
+export interface BackgroundImageProps {
+  src?: string;
+  alt?: string;
+};
+
+const BackgroundImage: React.FC<BackgroundImageProps> = ({
+  src,
+  alt
+}) => {
+  return (
+    <React.Fragment>
+      <Glass />
+      <StyledImage
+        src={src || ''}
+        alt={alt || ''}
+        layout="fill"
+        objectFit="cover"
+        quality={100}
+      />
+    </React.Fragment>
+  )
+}
+
+export default BackgroundImage;

src/containers/Parakeet/Content/index.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Box, BoxProps, styled } from '@mui/material';
+import ContainedButton from '@components/Button/ContainedButton';
+import BodyText from '@components/Texts/BodyText';
+import TitleText from '@components/Texts/TitleText';
+import Link from 'next/link';
+
+const Headline = styled(BodyText)(({ theme }) => ({
+  paddingLeft: theme.spacing(0.5),
+  paddingTop: theme.spacing(4),
+  paddingBottom: theme.spacing(1),
+  fontWeight: theme.FontWeights.fontWeightBlack,
+  color: theme.Colors.white,
+}));
+
+const Title = styled(TitleText)(({ theme }) => ({
+  fontWeight: theme.FontWeights.fontWeightUltra,
+  color: theme.Colors.white,
+  padding: theme.Spaces.lg + ' 0',
+}));
+
+type Button = {
+  buttonText?: string;
+  link?: string;
+  onClick?: () => void;
+};
+
+export interface AdsContentProps extends BoxProps {
+  headline?: string;
+  slogan?: string;
+  button?: Button;
+};
+
+const AdsContent: React.FC<AdsContentProps> = ({
+  headline,
+  slogan,
+  button,
+  ...props
+}) => {
+  return (
+    <Box {...props}>
+      <Headline>
+        {headline}
+      </Headline>
+      <Title dangerouslySetInnerHTML={{ __html: slogan || '' }} />
+      {
+        button && (
+          button.link ? (
+            <ContainedButton
+              flipped
+              color="secondary"
+              aria-label={button.buttonText}
+              vocab={button.buttonText}
+              sx={{ my: 3 }}
+              component={Link}
+              href={button.link}
+            >
+              {button.buttonText}
+            </ContainedButton>
+          ) : (
+            <ContainedButton
+              flipped
+              color="secondary"
+              aria-label={button.buttonText}
+              vocab={button.buttonText}
+              sx={{ my: 3 }}
+              onClick={button.onClick}
+            >
+              {button.buttonText}
+            </ContainedButton>
+          )
+        )
+      }
+    </Box>
+  )
+}
+
+export default styled(AdsContent)(({ theme }) => ({
+  maxWidth: theme.breakpoints.values.xl,
+  width: '100%',
+  height: '100%',
+  padding: '0 ' + theme.Spaces.md,
+
+  position: 'absolute',
+  zIndex: 2,
+
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'start',
+
+  '@media (max-width: 1400px)': {
+    alignItems: 'center',
+
+    '& > *': {
+      textAlign: 'center',
+    },
+  },
+}))

src/containers/Parakeet/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { styled } from '@mui/material';
+import BackgroundImage, { BackgroundImageProps } from './BackgroundImage';
+import Content, { AdsContentProps } from './Content';
+
+interface ParakeetProps extends React.HTMLAttributes<HTMLDivElement> {
+  image?: BackgroundImageProps;
+  advertisement?: AdsContentProps;
+};
+
+const Parakeet: React.FC<ParakeetProps> = ({
+  children,
+  image,
+  advertisement,
+  ...props
+}) => {
+  return (
+    <div {...props}>
+      <BackgroundImage
+        src={image?.src}
+        alt={image?.alt}
+      />
+      <Content 
+        headline={advertisement?.headline}
+        slogan={advertisement?.slogan}
+        button={advertisement?.button}
+      />
+    </div>
+  )
+};
+
+export default styled(Parakeet)(({ theme }) => ({
+  width: '100%',
+  height: '25rem',
+  position: 'relative',
+  overflow: 'hidden',
+
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));

src/pages/index.tsx

@@ -219,7 +219,20 @@ const Home: NextPage = () => {
             link: "/business/subscription"
           }}
         />
-        <Parakeet />
+        <Parakeet 
+          image={{
+            src: '/images/home/container-8/background.jpg',
+            alt: 'Production Ready IMS Resources'
+          }}
+          advertisement={{
+            headline: 'Production Ready IMS Resources',
+            slogan: 'Get your<br /> Free IMS Resources',
+            button: {
+              buttonText: 'Get Started',
+              link: '/signup'
+            }
+          }}
+        />
       </MainLayout>
     </React.Fragment>
   );