Added Marq case study, created new storyboard carousel component

_caseStudies/marq-animated-product-explainer.mdx

@@ -0,0 +1,163 @@
+---
+active: true
+client: Marq
+title: Content That Converts
+date: '2022-09'
+tags:
+  - 2d animation
+  - Motion design
+  - Post-production
+  - Creative Concepting
+  - Script Writing
+  - Character Design
+  - Illustration
+  - Sound design
+excerpt: 'An animated explainer for a SaaS product'
+vimeoID: '736914558'
+vimeoPreview: 'marq-animatedExplainer-preview'
+website: 'https://marq.com'
+logo: 'pixelbakery_client_backcountry.png'
+credits:
+  - name: Jordan Lambrecht
+    title: Creative Director
+  - name: Samee Callahan
+    title: Associate Creative Director
+  - name: Daniel Hinz
+    title: Animation Lead
+  - name: Rebecca Cook
+    title: Motion Graphics
+  - name: Olivia Boldt
+    title: Project Manager
+---
+<Marq_MarchingSolders/>
+
+<CaseStudiesIntro title={"Adding animation and character design to Marq's rebrand."}>
+
+
+Marq is a brand templating platform made for non-designers. At the crossroads of intuitive design and powerful brand management, you’ll find Marq.
+
+With this explainer video (among other assets), Marq is officially leaving its old name (Lucidpress) behind and launching into a new era. It was our job to bring that new brand to life. The animation walks users through key features and benefits, and introduces the new brand. 
+
+Our goal for this project was for the viewer to walk away knowing exactly who Marq is as a company, and what the product does both literally and figuratively for its audience (literal: brand templating, figurative: easy-to-use so makes your life easier). 
+
+</CaseStudiesIntro>
+<Marq_Unicorn bgColor={'blue'} />
+
+<CaseStudies_Storyboards
+bgColor='blue'
+headerColor='blue-dark'
+slideColor='cream'
+objectFit='cover'
+aspectH='9'
+aspectW='16'
+slides={[
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_01.jpg',
+      alt: 'Marq Product Explainer Animation Slide 01',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_02.jpg',
+      alt: 'Marq Product Explainer Animation Slide 02',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_03.jpg',
+      alt: 'Marq Product Explainer Animation Slide 03',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_04.jpg',
+      alt: 'Marq Product Explainer Animation Slide 04',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_05.jpg',
+      alt: 'Marq Product Explainer Animation Slide 05',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_06.jpg',
+      alt: 'Marq Product Explainer Animation Slide 06',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_07.jpg',
+      alt: 'Marq Product Explainer Animation Slide 07',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_08.jpg',
+      alt: 'Marq Product Explainer Animation Slide 08',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_09.jpg',
+      alt: 'Marq Product Explainer Animation Slide 09',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_10.jpg',
+      alt: 'Marq Product Explainer Animation Slide 10',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_11.jpg',
+      alt: 'Marq Product Explainer Animation Slide 11',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_12.jpg',
+      alt: 'Marq Product Explainer Animation Slide 12',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_13.jpg',
+      alt: 'Marq Product Explainer Animation Slide 13',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_14.jpg',
+      alt: 'Marq Product Explainer Animation Slide 14',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_15.jpg',
+      alt: 'Marq Product Explainer Animation Slide 15',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_16.jpg',
+      alt: 'Marq Product Explainer Animation Slide 16',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_17.jpg',
+      alt: 'Marq Product Explainer Animation Slide 17',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_18.jpg',
+      alt: 'Marq Product Explainer Animation Slide 18',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_19.jpg',
+      alt: 'Marq Product Explainer Animation Slide 19',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_20.jpg',
+      alt: 'Marq Product Explainer Animation Slide 20',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_21.jpg',
+      alt: 'Marq Product Explainer Animation Slide 21',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_22.jpg',
+      alt: 'Marq Product Explainer Animation Slide 22',
+    },
+    {
+      src: '/img/case-studies/marq/MARQ_Storyboard_v3_Page_23.jpg',
+      alt: 'Marq Product Explainer Animation Slide 23',
+    },
+  ]}
+/> 
+
+<CaseStudiesDescription textColor={'cream'} bgColor={'pink-light'} headerColor={'pink'} header={'Target Audience'}>
+
+We catered this animation towards decision makers on mid-to-large scale businesses. These customers are typically on a marketing team and looking for efficiencies + consistencies. This audience differs from ther competitors as Marq aims for larger-scale operations. 
+
+Marq stands out to this audience because of its intuitive desktop publishing on which platform—users can create ebooks, pamphlets, magazines and other types of long-form content. This audience loves Marq because of the extensive training and support they provide.
+
+</CaseStudiesDescription>
+
+<CaseStudiesDescription textColor={'wine'} bgColor={'egg'} headerColor={'blue-dark'} header={'Company Profile'}>
+
+Marq is a brand templating platform made for non-designers. At the crossroads of intuitive design and powerful brand management, you’ll find Marq. The platform is easy-to-use and laden with user-friendly features, so anyone can create beautiful, on-brand content and materials. 
+
+Users can create their entire brand ecosystem in Marq: from social media posts to flyers to ebooks and much more. Companies can upload their logos, colors schemes, and any other brand elements into their library to easily apply to one of many templates or import a unique template straight from InDesign. 
+
+</CaseStudiesDescription>

_posts/professional-of-the-year-2020.mdx

@@ -13,24 +13,25 @@ ogImage:
   url: /img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_02.jpg
 ---
 <Carousel
+objectFit={'cover'}
   slides={[
     {
-      src: '/img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_02.jpg',
+      src: 'https://cdn.pixelbakery.com/img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_02.jpg',
       alt: 'Jordan Lambrecht poses with Young Professional Award',
       fit: 'cover',
     },
     {
-      src: '/img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_03.jpg',
+      src: 'https://cdn.pixelbakery.com/img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_03.jpg',
       alt: 'Jordan Lambrecht poses with Young Professional Award',
       fit: 'cover',
     },
     {
-      src: '/img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_04.jpg',
+      src: 'https://cdn.pixelbakery.com/img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_04.jpg',
       alt: 'Jordan Lambrecht poses with Young Professional Award',
       fit: 'cover',
     },
     {
-      src: '/img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_01.jpg',
+      src: 'https://cdn.pixelbakery.com/img/blog/PixelBakery_JordanLambrecht_YoungProfessionalAward_01.jpg',
       alt: 'Jordan Lambrecht poses with Young Professional Award',
       fit: 'cover',
     },

components/pageHeaders/PageHeader_VarH_Test.tsx

@@ -12,7 +12,7 @@ interface LottieProps {
 }
 
 const Lottie = ({ animationData }: LottieProps) => {
-  const element = useRef<HTMLDivElement>(null)
+  const element = useRef<HTMLDivElement>()
   const lottieInstance = useRef<any>()
 
   useEffect(() => {

components/pageSpecific/caseStudies/CaseStudies_Storyboards.tsx

@@ -0,0 +1,45 @@
+import InnerWrapper from '@parts/InnerWrapper'
+import PageSection from '@parts/PageSection'
+import Carousel from '@parts/Carousel'
+import H2 from '@typography/H2'
+
+type CarouselProps = {
+  slideColor?: string
+  objectFit?: string
+  aspectH?: string
+  aspectW?: string
+  slides: Array<any>
+  bgColor?: string
+  id?: string
+  headerColor?: string
+}
+function CaseStudies_Storyboards({
+  slideColor,
+  objectFit,
+  aspectH,
+  aspectW,
+  slides,
+  bgColor,
+  id,
+  headerColor,
+}: CarouselProps) {
+  return (
+    <PageSection id={id} color={bgColor}>
+      <InnerWrapper>
+        <H2 color={headerColor} className={'relative z-20'}>
+          Storyboards
+        </H2>
+        <Carousel
+          textColor={headerColor}
+          slides={slides}
+          slideColor={slideColor}
+          objectFit={objectFit}
+          aspectH={aspectH}
+          aspectW={aspectW}
+        />
+      </InnerWrapper>
+    </PageSection>
+  )
+}
+
+export default CaseStudies_Storyboards

components/pageSpecific/caseStudies/CaseStudies_TikTok.tsx

@@ -1,6 +1,6 @@
 import PageSection from '@parts/PageSection'
 import H2 from '@typography/H2'
-import { Navigation, Pagination, Scrollbar, A11y, Keyboard } from 'swiper'
+import { Navigation, Pagination } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/css'
 import 'swiper/css/pagination'

components/parts/Carousel.tsx

@@ -2,29 +2,57 @@
 import { Navigation, Pagination, Scrollbar, A11y, Keyboard } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import Image from 'next/image'
+import cn from 'classnames'
 // Import Swiper styles
 import 'swiper/css'
 
 import 'swiper/css/pagination'
 import 'swiper/css/keyboard'
 import { ChevronRightIcon } from '@images/UI_Icons'
 
-function Carousel({ slides }) {
+type CarouselProps = {
+  slides: Array<any>
+  aspectH?: string
+  aspectW?: string
+  objectFit?: any
+  slideColor?: string
+  textColor?: string
+}
+const Carousel = ({
+  slides,
+  aspectH,
+  aspectW,
+  objectFit,
+  slideColor,
+  textColor,
+}: CarouselProps) => {
+  let slideBGColor
+  if (slideColor === undefined || slideColor === '') slideBGColor = 'bg-blue-dark'
+  else slideBGColor = `bg-${slideColor}`
+
+  let navColor
+  if (textColor === undefined || textColor === '') navColor = 'text-blue-dark'
+  else navColor = `text-${textColor}`
   function SetSlide({ slide }) {
     return (
-      <div className='relative w-full aspect-w-4 aspect-h-3'>
+      <div
+        className={cn('relative w-full', {
+          [`aspect-w-4 aspect-h-3`]: aspectW === undefined && aspectH === undefined,
+          [`aspect-w-${aspectW} aspect-h-${aspectH}`]: aspectW != undefined && aspectH != undefined,
+        })}
+      >
         <Image
           src={slide.src}
           alt={slide.alt}
           placeholder='blur'
           layout='fill'
-          objectFit={slide.fill}
-          className='w-full h-full object-center object-cover'
+          objectFit={objectFit}
           blurDataURL={slide.src}
         />
       </div>
     )
   }
+
   return (
     <div>
       <Swiper
@@ -35,6 +63,7 @@ function Carousel({ slides }) {
           prevEl: '.carousel-button-prev',
         }}
         pagination={{
+          clickable: true,
           el: '.carousel-pagination',
           type: 'fraction',
         }}
@@ -47,21 +76,39 @@ function Carousel({ slides }) {
       >
         {slides.map((slide) => {
           return (
-            <SwiperSlide key={slide.src} className='bg-blue-dark'>
+            <SwiperSlide key={slide.src} className={cn('cursor-grab', [slideBGColor])}>
               <SetSlide slide={slide} />
             </SwiperSlide>
           )
         })}
       </Swiper>
-      <div className='flex flex-row justify-around'>
-        <button className='carousel-button-prev'>
-          <i>
-            {' '}
+      <div className='flex flex-row justify-around mt-2'>
+        <button className={cn('carousel-button-prev flex', `${navColor}`)}>
+          <i
+            className={cn(
+              'mx-0 px-0 self-center h-8 w-8 flex flex-col justify-center rotate-180',
+              `${navColor}`,
+            )}
+          >
+            <ChevronRightIcon />
+          </i>
+          <span className='self-center'> prev</span>
+        </button>
+        <div
+          className={`text-center carousel-pagination self-center h-full mt-1 font-italic ${navColor}`}
+        />
+        {/* <div className={cn('carousel-button-pagination block relative', `${navColor}`)} /> */}
+        <button className={cn('carousel-button-next flex', `${navColor}`)}>
+          <span className='self-center'> next</span>
+          <i
+            className={cn(
+              'mx-0 px-0 self-center h-8 w-8 flex flex-col justify-center',
+              `${navColor}`,
+            )}
+          >
             <ChevronRightIcon />
           </i>
         </button>
-        <div className='inline-block carousel-pagination'></div>
-        <button className='carousel-button-next'>next</button>
       </div>
     </div>
   )