Merge pull request #23 from Brahmware:add-koel-container

Add-koel-container

src/containers/Malkoha/index.tsx

@@ -37,7 +37,6 @@ interface SectionProps extends React.HTMLAttributes<HTMLDivElement> {
 const Section = styled('section')<SectionProps>(({ theme, updown }) => ({
   height: 'max-content',
   width: '100%',
-  paddingBottom: theme.Spaces.md,
   backgroundColor: updown === 'up' ? theme.palette.background.default : theme.palette.background.paper,
 }));
 
@@ -62,7 +61,7 @@ const Malkoha: React.FC<MalkohaProps> = ({
         {
           descriptionHTML && (
             <BodyText
-              sx={{ maxWidth: mediumWidth }}
+              sx={{ maxWidth: mediumWidth, pb: 2 }}
               dangerouslySetInnerHTML={{ __html: descriptionHTML || '' }}
             />
           )
@@ -73,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}
@@ -84,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/containers/Woodpecker/Packages/index.tsx

@@ -31,8 +31,7 @@ const Packages: React.FC<PackagesProps> = ({
 
 export default styled(Packages)(({ theme }) => ({
   width: '100%',
-  paddingTop: theme.Spaces.lg,
-  paddingBottom: theme.Spaces.xl,
+  padding: theme.Spaces.lg + ' 0',
   display: 'flex',
   justifyContent: 'space-around',
 

src/pages/index.tsx

@@ -8,6 +8,7 @@ import Malkoha from "@containers/Malkoha";
 import Myna from "@containers/Myna";
 import Honeyguide from "@containers/Honeyguide";
 import Woodpaker from "@containers/Woodpecker";
+import Parakeet from "@containers/Parakeet";
 
 const MetaData: React.FC = () => {
   return (
@@ -23,9 +24,7 @@ const Home: NextPage = () => {
     <React.Fragment>
       <MetaData />
       <MainLayout>
-
         <Carousel />
-
         <Koel
           updown="up"
           images={{
@@ -48,7 +47,6 @@ const Home: NextPage = () => {
             }
           }}
         />
-
         <Malkoha
           updown="down"
           heading={{
@@ -57,7 +55,6 @@ const Home: NextPage = () => {
             description: 'By making every Information, every Discovery, every Invention, every Human Challenge accessible to every person starting with the Indian pacific Region. We\'ll Disrupt conventional Indian Media System, consumption and value by providing open platform to millions of minds with their theories about existence.',
           }}
         />
-
         <Myna
           updown="up"
           content={[
@@ -90,7 +87,6 @@ const Home: NextPage = () => {
             },
           ]}
         />
-
         <Malkoha
           updown="down"
           heading={{
@@ -99,7 +95,6 @@ const Home: NextPage = () => {
             description: 'By achieving real-time universal connection in a decentralized multi-linguistic Human society with technology at our disposal.',
           }}
         />
-
         <Koel
           updown="up"
           direction="rtl"
@@ -224,6 +219,20 @@ const Home: NextPage = () => {
             link: "/business/subscription"
           }}
         />
+        <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>
   );