diff --git a/package-lock.json b/package-lock.json index ceb1a8a9..7b4a3556 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,7 @@ "caniuse-lite": "^1.0.30001414", "clsx": "^1.2.1", "firebase": "^9.14.0", - "framer-motion": "^4.1.17", + "framer-motion": "^10.16.5", "ga-gtag": "^1.1.5", "material-ui-popup-state": "^5.0.9", "moment": "^2.29.4", @@ -34,6 +34,7 @@ "react": "^18.2.0", "react-countdown": "^2.3.2", "react-dom": "^18.2.0", + "react-intersection-observer": "^9.5.3", "react-meta-tags": "^1.0.1", "react-moment": "^1.1.1", "react-parallax": "^3.5.1", @@ -13626,12 +13627,6 @@ "esbuild": ">=0.10.0" } }, - "node_modules/@yarnpkg/esbuild-plugin-pnp/node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "dev": true - }, "node_modules/@yarnpkg/fslib": { "version": "2.10.3", "resolved": "https://registry.npmjs.org/@yarnpkg/fslib/-/fslib-2.10.3.tgz", @@ -18718,30 +18713,26 @@ } }, "node_modules/framer-motion": { - "version": "4.1.17", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz", - "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==", - "dependencies": { - "framesync": "5.3.0", - "hey-listen": "^1.0.8", - "popmotion": "9.3.6", - "style-value-types": "4.1.4", - "tslib": "^2.1.0" + "version": "10.16.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.5.tgz", + "integrity": "sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==", + "dependencies": { + "tslib": "^2.4.0" }, "optionalDependencies": { "@emotion/is-prop-valid": "^0.8.2" }, "peerDependencies": { - "react": ">=16.8 || ^17.0.0", - "react-dom": ">=16.8 || ^17.0.0" - } - }, - "node_modules/framesync": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", - "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", - "dependencies": { - "tslib": "^2.1.0" + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } } }, "node_modules/fresh": { @@ -19329,11 +19320,6 @@ "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.1.2.tgz", "integrity": "sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA==" }, - "node_modules/hey-listen": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", - "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" - }, "node_modules/highlight.js": { "version": "10.7.3", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", @@ -24927,17 +24913,6 @@ "node": ">=10" } }, - "node_modules/popmotion": { - "version": "9.3.6", - "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz", - "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==", - "dependencies": { - "framesync": "5.3.0", - "hey-listen": "^1.0.8", - "style-value-types": "4.1.4", - "tslib": "^2.1.0" - } - }, "node_modules/postcss": { "version": "8.4.30", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", @@ -26911,6 +26886,14 @@ "react": "^16.8.4 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-intersection-observer": { + "version": "9.5.3", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.3.tgz", + "integrity": "sha512-NJzagSdUPS5rPhaLsHXYeJbsvdpbJwL6yCHtMk91hc0ufQ2BnXis+0QQ9NBh6n9n+Q3OyjR6OQLShYbaNBkThQ==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -28854,15 +28837,6 @@ "webpack": "^5.0.0" } }, - "node_modules/style-value-types": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", - "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", - "dependencies": { - "hey-listen": "^1.0.8", - "tslib": "^2.1.0" - } - }, "node_modules/stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -29734,9 +29708,9 @@ } }, "node_modules/tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -40846,14 +40820,6 @@ "dev": true, "requires": { "tslib": "^2.4.0" - }, - "dependencies": { - "tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "dev": true - } } }, "@yarnpkg/fslib": { @@ -44573,24 +44539,12 @@ "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==" }, "framer-motion": { - "version": "4.1.17", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-4.1.17.tgz", - "integrity": "sha512-thx1wvKzblzbs0XaK2X0G1JuwIdARcoNOW7VVwjO8BUltzXPyONGAElLu6CiCScsOQRI7FIk/45YTFtJw5Yozw==", + "version": "10.16.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.5.tgz", + "integrity": "sha512-GEzVjOYP2MIpV9bT/GbhcsBNoImG3/2X3O/xVNWmktkv9MdJ7P/44zELm/7Fjb+O3v39SmKFnoDQB32giThzpg==", "requires": { "@emotion/is-prop-valid": "^0.8.2", - "framesync": "5.3.0", - "hey-listen": "^1.0.8", - "popmotion": "9.3.6", - "style-value-types": "4.1.4", - "tslib": "^2.1.0" - } - }, - "framesync": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/framesync/-/framesync-5.3.0.tgz", - "integrity": "sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==", - "requires": { - "tslib": "^2.1.0" + "tslib": "^2.4.0" } }, "fresh": { @@ -45021,11 +44975,6 @@ "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.1.2.tgz", "integrity": "sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA==" }, - "hey-listen": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", - "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" - }, "highlight.js": { "version": "10.7.3", "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", @@ -49106,17 +49055,6 @@ "@babel/runtime": "^7.17.8" } }, - "popmotion": { - "version": "9.3.6", - "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.3.6.tgz", - "integrity": "sha512-ZTbXiu6zIggXzIliMi8LGxXBF5ST+wkpXGEjeTUDUOCdSQ356hij/xjeUdv0F8zCQNeqB1+PR5/BB+gC+QLAPw==", - "requires": { - "framesync": "5.3.0", - "hey-listen": "^1.0.8", - "style-value-types": "4.1.4", - "tslib": "^2.1.0" - } - }, "postcss": { "version": "8.4.30", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.30.tgz", @@ -50351,6 +50289,11 @@ "integrity": "sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==", "dev": true }, + "react-intersection-observer": { + "version": "9.5.3", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.3.tgz", + "integrity": "sha512-NJzagSdUPS5rPhaLsHXYeJbsvdpbJwL6yCHtMk91hc0ufQ2BnXis+0QQ9NBh6n9n+Q3OyjR6OQLShYbaNBkThQ==" + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -51773,15 +51716,6 @@ "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz", "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==" }, - "style-value-types": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-4.1.4.tgz", - "integrity": "sha512-LCJL6tB+vPSUoxgUBt9juXIlNJHtBMy8jkXzUJSBzeHWdBu6lhzHqCvLVkXFGsFIlNa2ln1sQHya/gzaFmB2Lg==", - "requires": { - "hey-listen": "^1.0.8", - "tslib": "^2.1.0" - } - }, "stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -52413,9 +52347,9 @@ } }, "tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "tsutils": { "version": "3.21.0", diff --git a/package.json b/package.json index 8f034d8d..fe9876f8 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "caniuse-lite": "^1.0.30001414", "clsx": "^1.2.1", "firebase": "^9.14.0", - "framer-motion": "^4.1.17", + "framer-motion": "^10.16.5", "ga-gtag": "^1.1.5", "material-ui-popup-state": "^5.0.9", "moment": "^2.29.4", @@ -29,6 +29,7 @@ "react": "^18.2.0", "react-countdown": "^2.3.2", "react-dom": "^18.2.0", + "react-intersection-observer": "^9.5.3", "react-meta-tags": "^1.0.1", "react-moment": "^1.1.1", "react-parallax": "^3.5.1", diff --git a/sanityIo/schemas/contentContainer.js b/sanityIo/schemas/contentContainer.js index 0661ab5b..b25f40a8 100644 --- a/sanityIo/schemas/contentContainer.js +++ b/sanityIo/schemas/contentContainer.js @@ -25,6 +25,7 @@ export default { {name: 'header', title: 'Header Menu',type: 'reference', to: [{type: 'menuContainer',}]}, {name: 'footer', title: 'Footer Menu',type: 'reference', to: [{type: 'menuContainer',}]}, {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'}]}, {name: 'Resume Bio Section', title: 'Resume Bio Section',type: 'reference', to: [{type: 'ResumeBioSection'}]}, {name: 'Resume Skill Section', title: 'Resume Skill Section',type: 'reference', to: [{type: 'ResumeSkillSection'}]}, diff --git a/sanityIo/schemas/schema.js b/sanityIo/schemas/schema.js index 7033a55c..a2cac0a0 100644 --- a/sanityIo/schemas/schema.js +++ b/sanityIo/schemas/schema.js @@ -84,6 +84,7 @@ import scheduleGroup from "./scheduleGroup"; import scheduleEntry from "./scheduleEntry"; import AnimatedHeroContentSection from "./sections/hero/AnimatedHeroContentSection"; import HeroSlideContent from "./sections/hero/HeroSlideContent"; +import AnimatedAboutUsSection from "./services/AnimatedAboutUsSection"; import AnimatedServicesSection from "./services/AnimatedServicesSection"; // Then we give our schema to the builder and provide the result to Sanity @@ -174,6 +175,7 @@ export default [ scheduleGroup, scheduleEntry, AnimatedHeroContentSection, + AnimatedAboutUsSection, AnimatedServicesSection, HeroSlideContent ] diff --git a/sanityIo/schemas/services/AnimatedAboutUsSection.js b/sanityIo/schemas/services/AnimatedAboutUsSection.js new file mode 100644 index 00000000..6e8c75a4 --- /dev/null +++ b/sanityIo/schemas/services/AnimatedAboutUsSection.js @@ -0,0 +1,78 @@ +export default { + name: 'AnimatedAboutUsSection', + title: "Animated About Us Section", + type: 'document', + fields: [ + { + name: 'name', + title: 'Name', + type: 'string', + }, + { + name: 'heroBullet', + title: 'Hero Bullet', + type: 'image', + }, + { + name: 'contentPreTitle', + title: 'Pre Title', + type: 'string', + }, + { + name: 'contentTitle', + title: 'Large Title', + type: 'string', + }, + { + name: 'contentTexts', + title: 'Content Text', + type: 'array', + of: [{type: 'text'}] + }, + { + name: 'highlightedAmenitiesTitle', + title: 'Highlighted Amenities Title', + type: 'string', + }, + { + name: 'highlightedAmenities', + title: 'Highlighted Amenities', + type: 'array', + validation: Rule => Rule.max(2), + of: [{type: 'ServiceAmenityItem'}] + }, + { + name: 'highlightedAmenitiesTexts', + title: 'Highlighted Amenities Texts', + type: 'array', + of: [{type: 'text'}] + }, + { + name: 'highlightedAmenitiesBullets', + title: 'Highlighted Amenities Bullets', + type: 'array', + of: [{type: 'string'}] + }, + { + name: 'servicesImageSrcArr', + title: 'Services Images', + type: 'array', + validation: Rule => Rule.max(3), + of: [{type: 'image'}] + }, + { + name: 'servicesMasonryAccentImageSrc', + title: 'servicesMasonryAccent', + type: 'image', + }, + { + name: 'servicesList', + title: 'List Items', + type: 'array', + of: [{type: 'reference', to: {type: 'ServiceItem'}}] + } + ] +} + + + diff --git a/sanityIo/schemas/services/AnimatedServicesSection.js b/sanityIo/schemas/services/AnimatedServicesSection.js index 06617682..743770da 100644 --- a/sanityIo/schemas/services/AnimatedServicesSection.js +++ b/sanityIo/schemas/services/AnimatedServicesSection.js @@ -29,48 +29,69 @@ export default { type: 'array', of: [{type: 'text'}] }, + // { + // name: 'highlightedAmenitiesTitle', + // title: 'Highlighted Amenities Title', + // type: 'string', + // }, + // { + // name: 'highlightedAmenities', + // title: 'Highlighted Amenities', + // type: 'array', + // validation: Rule => Rule.max(2), + // of: [{type: 'ServiceAmenityItem'}] + // }, + // { + // name: 'highlightedAmenitiesTexts', + // title: 'Highlighted Amenities Texts', + // type: 'array', + // of: [{type: 'text'}] + // }, + // { + // name: 'highlightedAmenitiesBullets', + // title: 'Highlighted Amenities Bullets', + // type: 'array', + // of: [{type: 'string'}] + // }, + // { + // name: 'servicesImageSrcArr', + // title: 'Services Images', + // type: 'array', + // validation: Rule => Rule.max(3), + // of: [{type: 'image'}] + // }, + // { + // name: 'servicesMasonryAccentImageSrc', + // title: 'servicesMasonryAccent', + // type: 'image', + // }, { - name: 'highlightedAmenitiesTitle', - title: 'Highlighted Amenities Title', - type: 'string', - }, - { - name: 'highlightedAmenities', - title: 'Highlighted Amenities', + name: 'servicesList', + title: 'List Items', type: 'array', - validation: Rule => Rule.max(2), - of: [{type: 'ServiceAmenityItem'}] + of: [{type: 'reference', to: {type: 'ServiceItem'}}] }, { - name: 'highlightedAmenitiesTexts', - title: 'Highlighted Amenities Texts', - type: 'array', - of: [{type: 'text'}] + name: 'contentSummaryTitle', + title: 'Content Summary Title', + type: 'string', }, { - name: 'highlightedAmenitiesBullets', - title: 'Highlighted Amenities Bullets', + name: 'contentSummaryTexts', + title: 'Content Summary Text', type: 'array', - of: [{type: 'string'}] + of: [{type: 'text'}] }, { - name: 'servicesImageSrcArr', - title: 'Services Images', - type: 'array', - validation: Rule => Rule.max(3), - of: [{type: 'image'}] + name: 'ctaButtonText', + title: 'CTA Button Text', + type: 'string' }, { - name: 'servicesMasonryAccentImageSrc', - title: 'servicesMasonryAccent', - type: 'image', + name: 'ctaButtonLink', + title: 'CTA Button Link', + type: 'string' }, - { - name: 'servicesList', - title: 'List Items', - type: 'array', - of: [{type: 'reference', to: {type: 'ServiceItem'}}] - } ] } diff --git a/src/components/BlockContentLayoutContainer.tsx b/src/components/BlockContentLayoutContainer.tsx index a947909f..a7da10af 100644 --- a/src/components/BlockContentLayoutContainer.tsx +++ b/src/components/BlockContentLayoutContainer.tsx @@ -4,7 +4,7 @@ import {Card, Grid, Link} from '@mui/material' import sanityClient from '../sanityClient' import {blockSerializers} from '../common/sanityIo/BlockContentRenderer' import { - AnimatedServicesSectionType, + AnimatedAboutUsSectionType, AnimatedServicesSectionType, HeroAnimatedContentSectionType, HowItWorksSectionType, PortfolioSectionType, @@ -55,6 +55,7 @@ import WebDevHowItWorksSection from "./templates/web-dev-site/WebDevHowItWorksSe import TheWebsiteTheme from "../theme/Theme"; import HeroAnimatedContentSection from "./animated/HeroAnimatedContentSection"; import AnimatedAboutUsSection from "./animated/AnimatedAboutUsSection"; +import AnimatedServicesSection from './animated/AnimatedServicesSection' export type BlockContentLayoutContainerProps = { content?: any, @@ -414,13 +415,24 @@ const BlockContentLayoutContainer: FunctionComponent ); - case 'AnimatedServicesSection': - const animatedServicesSection: AnimatedServicesSectionType = columnLayoutContainer + case 'AnimatedAboutUsSection': + const animatedAboutusSection: AnimatedAboutUsSectionType = columnLayoutContainer return ( <> + + ); + case 'AnimatedServicesSection': + const animatedServicesSection: AnimatedServicesSectionType = columnLayoutContainer + return ( + + <> + + diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts index 3b9c004b..7c24c8d3 100644 --- a/src/components/BlockContentTypes.ts +++ b/src/components/BlockContentTypes.ts @@ -212,7 +212,7 @@ export type AnimatedServiceItemNoRefType = { slug: SanitySlug } & SanityDocumentFields -export type AnimatedServicesSectionType = { +export type AnimatedAboutUsSectionType = { name: string heroBullet?:SanityImageAsset title:string @@ -229,6 +229,19 @@ export type AnimatedServicesSectionType = { servicesMasonryAccentImageSrc: SanityImageAsset } +export type AnimatedServicesSectionType = { + name: string + heroBullet?:SanityImageAsset + contentTitle: string + contentPreTitle: string + contentTexts: string[] + servicesList: AnimatedServiceItemNoRefType[] + contentSummaryTitle: string + contentSummaryTexts: string[] + ctaButtonText: string + ctaButtonLink: string +} + export type ThwServicesSectionType = { name: string contentTitle: string diff --git a/src/components/animated/AnimatedAboutUsItem.tsx b/src/components/animated/AnimatedAboutUsItem.tsx index 851d341f..d8bf032b 100644 --- a/src/components/animated/AnimatedAboutUsItem.tsx +++ b/src/components/animated/AnimatedAboutUsItem.tsx @@ -5,6 +5,7 @@ import {AnimatedServiceItemNoRefType} from "../BlockContentTypes"; import ImageWIthButtonOverlay from "../image-with-button-overlay/ImageWithButtonOverlay"; import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext"; import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient"; +import {motion, useAnimationControls} from "framer-motion"; interface IProps { @@ -17,58 +18,100 @@ interface IProps { const AnimatedAboutUsItem: FunctionComponent = (props: IProps) => { const customizedTheme = useContext(CustomizedThemeContext) + const controls = useAnimationControls() + const textColorControls = useAnimationControls() + const overlayControl = useAnimationControls() + + const animateServiceHover = async () => { + overlayControl.start({opacity: 1}, {duration: .5}) + controls.start({scale: 1}, {duration: .5}) + textColorControls.start({color: customizedTheme.customizedTheme.palette.primary.main}) + } + + const animateServiceNoHover = async () => { + controls.start({scale: 1.1}, {duration: .25}) + overlayControl.start({opacity: 0}, {duration: .5}) + textColorControls.start({color: customizedTheme.customizedTheme.palette.text.primary}) + } + return ( - - - - + { + animateServiceHover() + }} onHoverEnd={async () => { + animateServiceNoHover() + }}> + + + + + + + + + + + - - - - + + + + + + + + + - - - - - - {props.service.contentTitle} - - - {props.service.contentText} + + + + {props.service.contentTitle} + + + + {props.service.contentText} + - - + + ) } diff --git a/src/components/animated/AnimatedAboutUsSection.tsx b/src/components/animated/AnimatedAboutUsSection.tsx index 47d17b26..764eac9c 100644 --- a/src/components/animated/AnimatedAboutUsSection.tsx +++ b/src/components/animated/AnimatedAboutUsSection.tsx @@ -4,11 +4,12 @@ import makeStyles from '@mui/styles/makeStyles'; import {Card, Grid, Typography} from '@mui/material' import AnimatedAboutUsItem from "./AnimatedAboutUsItem"; import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext"; -import {AnimatedServiceItemNoRefType, AnimatedServicesSectionType, ServiceAmenityType} from "../BlockContentTypes"; +import {AnimatedAboutUsSectionType, AnimatedServiceItemNoRefType, ServiceAmenityType} from "../BlockContentTypes"; import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient"; import {Circle} from "@mui/icons-material"; -import {motion} from "framer-motion" -import widthUtils from "../../utils/widthUtils"; +import {motion, useAnimationControls} from "framer-motion" +import BulletedHeader from "./BulletedHeader"; +import HorizontalAmenity from "./HorizontalAmenity"; export const useStyles = makeStyles((theme: Theme) => ({ root: { @@ -19,7 +20,7 @@ export const useStyles = makeStyles((theme: Theme) => ({ interface IProps { - sectionData: AnimatedServicesSectionType + sectionData: AnimatedAboutUsSectionType } const AnimatedAboutUsSection: FunctionComponent = (props) => { @@ -40,31 +41,7 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { spacing={2} justifyContent='center'> - - - {props.sectionData?.heroBullet && - } - - - {props.sectionData.contentPreTitle} - - + @@ -89,35 +66,7 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { {props.sectionData.highlightedAmenities?.map((amenity: ServiceAmenityType, index: number) => { - return - - - - - - - - - - {amenity.name} - - - {amenity.description} - - - + return })} diff --git a/src/components/animated/AnimatedServiceItem.tsx b/src/components/animated/AnimatedServiceItem.tsx new file mode 100644 index 00000000..93dec76f --- /dev/null +++ b/src/components/animated/AnimatedServiceItem.tsx @@ -0,0 +1,101 @@ +import React, {FunctionComponent, useContext} from 'react' +import {Card, Grid, ThemeProvider, Typography} from '@mui/material' +import {v4 as uuidv4} from 'uuid' +import {AnimatedServiceItemNoRefType} from "../BlockContentTypes"; +import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext"; +import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient"; +import ColoredPng from "../colored-png/ColoredPng"; +import {motion, useAnimationControls} from "framer-motion" + +interface IProps { + service: AnimatedServiceItemNoRefType + hideLearnMoreButton?: boolean + hideCtaButton?: boolean + source?: string + showAmenities?: boolean +} + +const AnimatedServiceItem: FunctionComponent = (props: IProps) => { + const customizedTheme = useContext(CustomizedThemeContext) + const controls = useAnimationControls() + + const animateShrinkIcon = async () => { + await controls.start({scale: 1}) + } + + const animateGrowIcon = async () => { + await controls.start({scale: 1.1}) + } + + return ( + + { + await animateShrinkIcon() + }} + onHoverEnd={() => { + animateGrowIcon() + }} + > + + + + + + + + + + + + + + + {props.service.contentTitle} + + + {props.service.contentText} + + + + + + + ) +} + +export default AnimatedServiceItem \ No newline at end of file diff --git a/src/components/animated/AnimatedServicesSection.tsx b/src/components/animated/AnimatedServicesSection.tsx new file mode 100644 index 00000000..03483415 --- /dev/null +++ b/src/components/animated/AnimatedServicesSection.tsx @@ -0,0 +1,127 @@ +import React, {FunctionComponent, useContext} from 'react' +import {Theme, ThemeProvider} from '@mui/material/styles'; +import makeStyles from '@mui/styles/makeStyles'; +import {Button, Grid, Typography} from '@mui/material' +import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext"; +import {AnimatedServiceItemNoRefType, AnimatedServicesSectionType} from "../BlockContentTypes"; +import firebaseAnalyticsClient from "../../common/firebase/FirebaseAnalyticsClient"; +import PageContext from "../page-context/PageContext"; +import AnimatedServiceItem from "./AnimatedServiceItem"; +import BulletedHeader from "./BulletedHeader"; +import shape2 from "./abstract-shapes-background/services-v1-shape2-dark-blue.png" +import shape3 from "./abstract-shapes-background/services-v1-shape3-dark-blue.png" +import shape4 from "./abstract-shapes-background/services-v1-shape4-cyan.png" +import shape5 from "./abstract-shapes-background/services-v1-shape5-dark-blue.png" +import shape6 from "./abstract-shapes-background/services-v1-shape6-dark-blue.png" +import shape7 from "./abstract-shapes-background/services-v1-shape7-dark-blue.png" +import shape8 from "./abstract-shapes-background/services-v1-shape8-cyan.png" +import shape9 from "./abstract-shapes-background/services-v1-shape9-dark-blue.png" +import shape10 from "./abstract-shapes-background/services-v1-shape10-dark-blue.png" +import shape11 from "./abstract-shapes-background/services-v1-shape11-dark-blue.png" +import AbstractShapesBackground from "./abstract-shapes-background/AbstractShapesBackground"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: { + paddingTop: '56px', + paddingBottom: '64px', + overflow: "hidden" + }, +})) + + +interface IProps { + sectionData: AnimatedServicesSectionType +} + +const AnimatedServicesSection: FunctionComponent = (props) => { + const classes = useStyles() + + const pageContext = useContext(PageContext) + // const mdDown = widthUtils.useIsWidthDown('md') + const customizedThemeContext = useContext(CustomizedThemeContext) + + return ( + + + + + + + + + + + {props.sectionData.contentTitle} + + + + + + {props.sectionData?.contentTexts?.map((segment: string, index: number) => ( + + {segment} + ))} + + + + + + {props.sectionData.servicesList?.map((service: AnimatedServiceItemNoRefType, index: number) => { + return + })} + + + + + {props.sectionData.contentSummaryTitle} + + + + {props.sectionData?.contentSummaryTexts?.map((segment: string, index: number) => ( + + {segment} + ))} + + + + + + + + + + ) +} + +export default AnimatedServicesSection \ No newline at end of file diff --git a/src/components/animated/BulletedHeader.tsx b/src/components/animated/BulletedHeader.tsx new file mode 100644 index 00000000..ad0915a6 --- /dev/null +++ b/src/components/animated/BulletedHeader.tsx @@ -0,0 +1,60 @@ +import React, {FunctionComponent, useContext} from 'react' +import {Grid, Typography} from "@mui/material"; +import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext"; +import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient"; +import makeStyles from "@mui/styles/makeStyles"; +import {Theme} from "@mui/material/styles"; +import {SanityImageAsset} from "../BlockContentTypes"; +import ColoredPng from "../colored-png/ColoredPng"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: {}, +})) + +interface IProps { + textContent?: string + heroBullet?: SanityImageAsset + color?: string + isCenter?: boolean +} + +const BulletedHeader: FunctionComponent = (props: IProps) => { + const classes = useStyles() + + React.useEffect(() => { + }, []) + const customizedThemeContext = useContext(CustomizedThemeContext) + + + return ( + + {props.heroBullet && + + // + } + + + + {props.textContent} + + ) +} + +export default BulletedHeader \ No newline at end of file diff --git a/src/components/animated/HorizontalAmenity.tsx b/src/components/animated/HorizontalAmenity.tsx new file mode 100644 index 00000000..34ce2524 --- /dev/null +++ b/src/components/animated/HorizontalAmenity.tsx @@ -0,0 +1,62 @@ +import React, {FunctionComponent, useContext} from 'react' +import {Card, Grid, Typography} from "@mui/material"; +import {motion, useAnimationControls} from "framer-motion"; +import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient"; +import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext"; +import {ServiceAmenityType} from "../BlockContentTypes"; +import makeStyles from "@mui/styles/makeStyles"; +import {Theme} from "@mui/material/styles"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: {}, +})) + +interface IProps { + amenity: ServiceAmenityType +} + +const HorizontalAmenity: FunctionComponent = (props: IProps) => { + const customizedThemeContext = useContext(CustomizedThemeContext) + + const controls = useAnimationControls() + + const animateFlipIcon = async () => { + await controls.start({rotateY: 180},{duration: .5}) + } + + const animateUnFlipIcon = async () => { + await controls.start({rotateY: 0}, {duration: .2}) + } + + return ( + + + + + + + + + + + {props.amenity.name} + + + {props.amenity.description} + + + ) +} + +export default HorizontalAmenity diff --git a/src/components/animated/abstract-shapes-background/AbstractShapesBackground.tsx b/src/components/animated/abstract-shapes-background/AbstractShapesBackground.tsx new file mode 100644 index 00000000..fbeb0d9e --- /dev/null +++ b/src/components/animated/abstract-shapes-background/AbstractShapesBackground.tsx @@ -0,0 +1,119 @@ +import React, {FunctionComponent, useContext} from 'react' +import shape3 from "./services-v1-shape3-dark-blue.png"; +import shape9 from "./services-v1-shape9-dark-blue.png"; +import shape11 from "./services-v1-shape11-dark-blue.png"; +import shape4 from "./services-v1-shape4-cyan.png"; +import shape7 from "./services-v1-shape7-dark-blue.png"; +import shape8 from "./services-v1-shape8-cyan.png"; +import shape5 from "./services-v1-shape5-dark-blue.png"; +import shape2 from "./services-v1-shape2-dark-blue.png"; +import shape6 from "./services-v1-shape6-dark-blue.png"; +import shape10 from "./services-v1-shape10-dark-blue.png"; +import CustomizedThemeContext from "../../customized-theme-provider/CustomizedThemeContext"; +import {Grid} from "@mui/material"; +import makeStyles from "@mui/styles/makeStyles"; +import {Theme} from "@mui/material/styles"; +import AnimatedAbstractShape from "./AnimatedAbstractShape"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: {}, +})) + +interface IProps { +} + +const AbstractShapesBackground: FunctionComponent = (props: IProps) => { + const customizedThemeContext = useContext(CustomizedThemeContext) + + const shape2Variants = { + onScreen: {top: 0, transition: {duration: .45}}, + offScreen: {top: -440, transition: {duration: .45}} + }; + + const shape3Variants = { + onScreen: {bottom: -5, transition: {duration: .5}}, + offScreen: {bottom: -500, transition: {duration: .5}} + }; + + const shape4Variants = { + onScreen: {bottom: -5, transition: {duration: .75}}, + offScreen: {bottom: -300, transition: {duration: .75}} + }; + + const shape5Variants = { + onScreen: {top: 0, transition: {duration: .45}}, + offScreen: {top: -900, transition: {duration: .45}} + }; + + const shape6Variants = { + onScreen: {right: 0, top: 0, transition: {duration: .45}}, + offScreen: {right: 0, top: -720, transition: {duration: .45}} + }; + + const shape7Variants = { + onScreen: {right: 0, top: 0, transition: {duration: 1}}, + offScreen: {right: 0, top: -250, transition: {duration: 1}} + }; + + const shape8Variants = { + onScreen: {right: 0, top: 0, transition: {duration: .45}}, + offScreen: {right: 0, top: -250, transition: {duration: .45}} + }; + + const shape9Variants = { + onScreen: {bottom: 0, transition: {duration: .65}}, + offScreen: {bottom: -900, transition: {duration: .65}} + }; + + const shape10Variants = { + onScreen: {top: 0, right: 0, bottom: 0, transition: {duration: .45}}, + offScreen: {top: -980, right: 0, bottom: 0, transition: {duration: .45}} + }; + + const shape11Variants = { + onScreen: {bottom: 0, transition: {duration: .55}}, + offScreen: {bottom: -800, transition: {duration: .55}} + }; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default AbstractShapesBackground \ No newline at end of file diff --git a/src/components/animated/abstract-shapes-background/AnimatedAbstractShape.tsx b/src/components/animated/abstract-shapes-background/AnimatedAbstractShape.tsx new file mode 100644 index 00000000..6449f52a --- /dev/null +++ b/src/components/animated/abstract-shapes-background/AnimatedAbstractShape.tsx @@ -0,0 +1,38 @@ +import React, {FunctionComponent} from 'react' +import shape4 from "./services-v1-shape4-cyan.png"; +import {motion, useAnimation, Variants} from "framer-motion"; +import {useInView} from "react-intersection-observer"; +import makeStyles from "@mui/styles/makeStyles"; +import {Theme} from "@mui/material/styles"; + +export const useStyles = makeStyles((theme: Theme) => ({ + root: { + }, +})) + +interface IProps { shapeVariants:Variants, opacity?: number, image: any } + +const AnimatedAbstractShape: FunctionComponent = (props:IProps) => { + const shapeControls = useAnimation(); + const [shapeRef, shapeInView] = useInView(); + + React.useEffect(() => { + if (shapeInView) { + shapeControls.start("onScreen"); + } + else { + shapeControls.start("offScreen"); + } + }, [shapeControls, shapeInView]); + + return ( + abstract shape + ) +} + +export default AnimatedAbstractShape \ No newline at end of file diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape10-dark-blue.png b/src/components/animated/abstract-shapes-background/services-v1-shape10-dark-blue.png new file mode 100644 index 00000000..3424923f Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape10-dark-blue.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape11-dark-blue.png b/src/components/animated/abstract-shapes-background/services-v1-shape11-dark-blue.png new file mode 100644 index 00000000..fd3237ca Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape11-dark-blue.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape2-dark-blue.png b/src/components/animated/abstract-shapes-background/services-v1-shape2-dark-blue.png new file mode 100644 index 00000000..6891db05 Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape2-dark-blue.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape3-dark-blue.png b/src/components/animated/abstract-shapes-background/services-v1-shape3-dark-blue.png new file mode 100644 index 00000000..88785b8c Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape3-dark-blue.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape4-cyan.png b/src/components/animated/abstract-shapes-background/services-v1-shape4-cyan.png new file mode 100644 index 00000000..d0ab9c77 Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape4-cyan.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape5-dark-blue.png b/src/components/animated/abstract-shapes-background/services-v1-shape5-dark-blue.png new file mode 100644 index 00000000..0d0f73db Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape5-dark-blue.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape6-dark-blue.png b/src/components/animated/abstract-shapes-background/services-v1-shape6-dark-blue.png new file mode 100644 index 00000000..08785adf Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape6-dark-blue.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape7-dark-blue.png b/src/components/animated/abstract-shapes-background/services-v1-shape7-dark-blue.png new file mode 100644 index 00000000..1eef7321 Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape7-dark-blue.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape8-cyan.png b/src/components/animated/abstract-shapes-background/services-v1-shape8-cyan.png new file mode 100644 index 00000000..d7ab94bb Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape8-cyan.png differ diff --git a/src/components/animated/abstract-shapes-background/services-v1-shape9-dark-blue.png b/src/components/animated/abstract-shapes-background/services-v1-shape9-dark-blue.png new file mode 100644 index 00000000..833ffaff Binary files /dev/null and b/src/components/animated/abstract-shapes-background/services-v1-shape9-dark-blue.png differ diff --git a/src/components/block-content-ui/cmsClient.ts b/src/components/block-content-ui/cmsClient.ts index 1fa9791e..f86c0f47 100644 --- a/src/components/block-content-ui/cmsClient.ts +++ b/src/components/block-content-ui/cmsClient.ts @@ -475,12 +475,14 @@ const fullTextSearch = (textToSearch: string): Promise => { title, name, contentText, + contentTexts, contentTitle, contentPreTitle, highlightedAmenitiesTitle, highlightedAmenitiesText, - contentTexts, - contentWelcomeMessage + contentWelcomeMessage, + contentSummaryTitle, + contentSummaryTexts ] match '*${textToSearch}*']`, // {searchText: textToSearch} ).then((data: any) => { diff --git a/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx b/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx index 59cf8965..a31ef2dd 100644 --- a/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx +++ b/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx @@ -10,7 +10,7 @@ import {Theme} from "@mui/material/styles"; import TheWebsiteTheme from "../../../../theme/Theme"; import ServiceItem from "../../../../../sanityIo/schemas/services/ServiceItem"; import { - AnimatedServicesSectionType, + AnimatedAboutUsSectionType, HeroAnimatedContentSectionType, SanityHeroContentSlide, ServiceItemNoRefType } from "../../../BlockContentTypes"; @@ -140,7 +140,7 @@ const FullTextSearch: FunctionComponent = (props: IProps) => { case "AnimatedServicesSection": - const convertedAnimatedServicesSection: AnimatedServicesSectionType = theResult; + const convertedAnimatedServicesSection: AnimatedAboutUsSectionType = theResult; console.log(convertedAnimatedServicesSection) return diff --git a/src/components/templates/mackenzies-mind/pages/PageLayout.tsx b/src/components/templates/mackenzies-mind/pages/PageLayout.tsx index 43041f39..2b267626 100644 --- a/src/components/templates/mackenzies-mind/pages/PageLayout.tsx +++ b/src/components/templates/mackenzies-mind/pages/PageLayout.tsx @@ -63,6 +63,7 @@ const PageLayout: FunctionComponent = (props: IProps) => { backgroundColor: "white", position: "static", bottom: 0, + zIndex: 10, padding: theme.spacing(1, 3, .5) }} // xs={11}