adds headline section with CTA (#9)

sanityIo/schemas/HeadlineCTASection.js

@@ -0,0 +1,61 @@
+
+export default {
+    name: 'HeadlineCTASection',
+    title: "Headline CTA",
+    type: 'document',
+    fields: [
+        {
+            name: 'name',
+            title: 'Name',
+            type: 'string',
+        },
+        {
+            name: 'contentText',
+            title: 'Content Text',
+            type: 'text',
+        },
+        {
+            name: 'backgroundImgSrc',
+            title: 'Background Image',
+            type: 'image',
+        },
+        {
+            name: 'ctaButtonText',
+            title: 'CTA Button Text',
+            type: 'string'
+        },
+        {
+            name: 'ctaButtonLink',
+            title: 'CTA Button Link',
+            type: 'string'
+        },
+        {
+            name: 'insetTop',
+            title: 'Top Inset',
+            type: 'string'
+        },
+        {
+            name: 'insetBottom',
+            title: 'Bottom Inset',
+            type: 'string'
+        },
+        {
+            name: 'insetLeft',
+            title: 'Left Inset',
+            type: 'string'
+        },
+        {
+            name: 'insetRight',
+            title: 'Right Inset',
+            type: 'string'
+        }
+    ],
+    preview: {
+        select: {
+            title: 'name',
+        },
+    },
+}
+
+
+

sanityIo/schemas/contentContainer.js

@@ -24,6 +24,7 @@ export default {
         {name: 'column2BlockContent', title: 'Custom 2 Column Section',type: 'reference', to: [{type: 'column2BlockContent'}]},
         {name: 'header', title: 'Header Menu',type: 'reference', to: [{type: 'menuContainer',}]},
         {name: 'footer', title: 'Footer Menu',type: 'reference', to: [{type: 'menuContainer',}]},
+        {name: 'Headline with CTA', title: 'Headline with CTA',type: 'reference', to: [{type: 'HeadlineCTASection',}]},
         {name: 'HeroAnimatedContentSection', title: 'Animated Hero Content',type: 'reference', to: [{type: 'HeroAnimatedContentSection'}]},
         {name: 'AnimatedAboutUsSection', title: 'Animated About Us Section',type: 'reference', to: [{type: 'AnimatedAboutUsSection'}]},
         {name: 'AnimatedServicesSection', title: 'Animated Services Section',type: 'reference', to: [{type: 'AnimatedServicesSection'}]},

sanityIo/schemas/schema.js

@@ -90,6 +90,7 @@ import MuiFontFace from "./mui/MuiFontFace";
 import MuiMediaQuery from "./mui/MuiMediaQuery";
 import AnimatedPortfolioItem from "./sections/animated/AnimatedPortfolioItem";
 import AnimatedPortfolioSection from "./sections/animated/AnimatedPortfolioSection";
+import HeadlineCTASection from "./HeadlineCTASection";
 
 // Then we give our schema to the builder and provide the result to Sanity
 export default [
@@ -185,5 +186,6 @@ export default [
     AnimatedServicesSection,
     AnimatedPortfolioItem,
     AnimatedPortfolioSection,
-    HeroSlideContent
+    HeroSlideContent,
+    HeadlineCTASection
 ]

src/components/BlockContentLayoutContainer.tsx

@@ -4,7 +4,7 @@ import {Card, Grid, Link, useTheme} from '@mui/material'
 import sanityClient from '../sanityClient'
 import {blockSerializers} from '../common/sanityIo/BlockContentRenderer'
 import {
-    AnimatedAboutUsSectionType, AnimatedPortfolioSectionType, AnimatedServicesSectionType,
+    AnimatedAboutUsSectionType, AnimatedPortfolioSectionType, AnimatedServicesSectionType, HeadlineCTASectionType,
     HeroAnimatedContentSectionType,
     HowItWorksSectionType,
     PortfolioSectionType,
@@ -56,6 +56,7 @@ import HeroAnimatedContentSection from "./animated/HeroAnimatedContentSection";
 import AnimatedAboutUsSection from "./animated/AnimatedAboutUsSection";
 import AnimatedServicesSection from './animated/AnimatedServicesSection'
 import AnimatedPortfolioSection from "./animated/AnimatedPortfolioSection";
+import HeadlineCTASection from "./animated/HeadlineCTASection";
 
 export type BlockContentLayoutContainerProps = {
     content?: any,
@@ -449,6 +450,14 @@ const BlockContentLayoutContainer: FunctionComponent<BlockContentLayoutContainer
                                 />
                             </Grid>
                         );
+                    case 'HeadlineCTASection':
+                        const headlineSection: HeadlineCTASectionType = columnLayoutContainer
+
+                        return <Grid key={'headline-section'} container item>
+                            <HeadlineCTASection
+                                sectionData={headlineSection}
+                            />
+                        </Grid>
                     default:
                         return <Grid container item></Grid>
                     // return <span key={index}>Undefined section {columnLayoutContainer._type}</span>

src/components/BlockContentTypes.ts

@@ -623,4 +623,16 @@ export type SanityDocumentFields = {
     _updatedAt?: string
     _type?: string
     _id?: string
+}
+
+export type HeadlineCTASectionType = {
+    name: string
+    contentText: string
+    ctaButtonText: string
+    ctaButtonLink: string
+    insetTop: string
+    insetBottom: string
+    insetLeft: string
+    insetRight: string
+    backgroundImgSrc: SanityImageAsset
 }

src/components/animated/AnimatedPortfolioSection.tsx

@@ -37,7 +37,7 @@ const AnimatedPortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
     }
 
     return (
-        <Grid container item style={{padding: theme.spacing(4)}}
+        <Grid container item style={{padding: theme.spacing(2,4,12,4), borderBottom: "1px solid gray"}}
               justifyContent={'center'}>
             <Grid
                 container item spacing={3} justifyContent='center'>

src/components/animated/HeadlineCTASection.tsx

@@ -0,0 +1,58 @@
+import React, {FunctionComponent, useContext} from 'react'
+import {Button, Grid, Typography, useMediaQuery, useTheme} from "@mui/material";
+import firebaseAnalyticsClient from "../../common/firebase/FirebaseAnalyticsClient";
+import makeStyles from "@mui/styles/makeStyles";
+import {Theme} from "@mui/material/styles";
+import {HeadlineCTASectionType} from "../BlockContentTypes";
+import PageContext from "../page-context/PageContext";
+import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+    },
+}))
+
+interface IProps { sectionData: HeadlineCTASectionType }
+
+const HeadlineCTASection: FunctionComponent<IProps> = (props:IProps) => {
+    const theme = useTheme()
+    const pageContext = useContext(PageContext)
+
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
+    const mdDown = useMediaQuery(theme.breakpoints.down('md'))
+
+    React.useEffect(()=>{
+    }, [])
+
+    return (<Grid container item sx={{
+        backgroundColor: theme.palette.secondary.main,
+        backgroundImage: `url(${urlFor(props.sectionData.backgroundImgSrc).url()})`,
+        backgroundSize: "40%, 40%",
+        // backgroundRepeat: "no-repeat",
+        borderRadius: mdDown?0:1,
+        border:mdDown?'none':`1px solid ${theme.palette.primary.main}`,
+        marginLeft: mdDown?0:props.sectionData.insetLeft,
+        marginRight: mdDown?0:props.sectionData.insetRight,
+        marginTop: mdDown?0:props.sectionData.insetTop,
+        marginBottom: mdDown?0:props.sectionData.insetBottom,
+    }}>
+        <Grid container alignItems='center' alignContent='center' item
+              style={{ padding: "40px"}} md={8}>
+            <Typography variant={'h4'} color='primary'>
+                {props.sectionData.contentText}
+            </Typography>
+        </Grid>
+        <Grid style={{padding: "40px"}} container item justifyContent={smDown?'center':'flex-end'} alignItems='center' alignContent='center' md={4} >
+            <Button color='primary' variant='contained'
+                    onClick={() => {
+                        firebaseAnalyticsClient.ctaClick("hero-section", props.sectionData.ctaButtonText, pageContext.analyticsId,)
+                    }}
+                    href={props.sectionData.ctaButtonLink ?? ""}>
+                <Typography variant='button'
+                            color='secondary'>{props.sectionData.ctaButtonText}</Typography>
+            </Button>
+        </Grid>
+    </Grid>)
+}
+
+export default HeadlineCTASection