Merge branch 'main' into update-docs-next

.github/dependabot.yml

@@ -0,0 +1,24 @@
+version: 2
+updates:
+
+# Maintain dependencies for GitHub Actions 
+  - package-ecosystem: "github-actions"
+    directory: "/.github/workflows"
+    schedule:
+      interval: "weekly"
+    labels:
+      - dependencies
+    commit-message:
+      prefix: "⬆️ Actions"
+    rebase-strategy: auto
+
+  # Maintain dependencies for npm
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    labels:
+      - dependencies
+    commit-message:
+      prefix: "⬆️ NPM"
+    rebase-strategy: auto

components/blocks/Blocks.tsx

@@ -19,6 +19,7 @@ import { ShowcaseItemsBlock } from './Showcase'
 import { TestimonialsBlock } from './Testimonials'
 import { VerticalCardsBlock } from './VerticalCards'
 import { CompareBoxBlock } from './CompareBox'
+import { BookingBlock } from './Booking'
 
 export const Blocks = ({
   blocks,
@@ -43,6 +44,9 @@ export const Blocks = ({
         return <FlyingBlock key={`block-${index}`} data={block} index={index} />
       case 'PageBlocksVerticalCards':
         return <VerticalCardsBlock key={`block-${index}`} data={block} index={index} />
+      case 'PageBlocksBooking':
+        return <BookingBlock key={`block-${index}`} data={block} index={index} />
+
       case 'PageBlocksHero':
         return <HeroBlock key={`block-${index}`} data={block} index={index} />
       case 'PageBlocksPricing':

components/blocks/Booking.template.ts

@@ -0,0 +1,10 @@
+import { Template } from 'tinacms';
+
+export const bookingTemplate: Template = {
+  label: 'Booking',
+  name: 'booking',
+  fields: [
+    {name: 'title', label: 'Title', type: 'string'},
+    {name: 'description', label: 'Description', type: 'string'},
+  ],
+};

components/blocks/Booking.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import { FaChevronRight } from 'react-icons/fa'
+import { fetchMeetingLinks } from 'utils/getMeetingLinks'
+
+export type BookingItem = {
+  name: string
+  description: string
+  image: string
+  url: string
+}
+
+const BookingCard = ({ cardItem }) => {
+  const isValidImage = (url) => {
+    return url && (url.startsWith('http') || url.startsWith('/'))
+  }
+
+  return (
+    <Link href={cardItem.url || '#'}>
+      <div className="relative p-2 mb-4 rounded-md group flex flex-col md:flex-row lg:flex-row w-full h-full items-center justify-between bg-background p-4 shadow transition transform duration-200 hover:scale-105 hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring text-blue-800 hover:text-blue-700 bg-gradient-to-br from-white/25 via-white/50 to-white/75 sm:pt-1">
+        {isValidImage(cardItem.image) && (
+          <Image
+            src={cardItem.image}
+            alt={`${cardItem.name} Portrait`}
+            className="hidden md:block w-24 h-24 rounded-full mr-4"
+            width={96}
+            height={96}
+          />
+        )}
+        <div className="flex-grow text-center md:text-left lg:pl-4 lg:text-left">
+          <div className="font-medium text-3xl">{cardItem.name}</div>
+          <div className="text-muted-foreground text-md">
+            {cardItem.description}
+          </div>
+        </div>
+        <div className="flex-shrink-0 sm:self-center">
+          <FaChevronRight className="h-10 w-10 text-muted-foreground pr-6" />
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+const BookingBlock = ({ data, index }) => {
+  const [meetingPeople, setMeetingPeople] = useState<BookingItem[]>([]);
+
+  useEffect(() => { 
+    const fetchData = async () => {
+      const meetingPeopleData = await fetchMeetingLinks();
+      setMeetingPeople(meetingPeopleData);
+    }
+
+    fetchData();
+  }, []);
+
+  if (!meetingPeople.length) return null;
+
+  return (
+    <div className="flex justify-center">
+      <div className="md:my-18 lg:w-1/2 p-6 sm:pt-1 container mx-auto px-4">
+        <div className="flex justify-center mb-6 step-indicator items-center">
+          <div className="step flex flex-col items-center relative z-10">
+            <div className="step-icon w-6 h-6 border-2 border-orange-300 flex items-center justify-center rounded-full"></div>
+            <p className="text-center absolute bottom-[-20px] text-xxs md:text-xs whitespace-nowrap">
+              CHOOSE LOCATION
+            </p>
+          </div>
+          <div className="indicator-line h-0.5 w-20 md:w-40 bg-gray-300"></div>
+          <div className="step flex flex-col items-center relative z-10">
+            <div className="step-icon w-6 h-6 border-2 border-gray-300 flex items-center justify-center rounded-full"></div>
+            <p className="text-center absolute bottom-[-20px] text-xxs md:text-xs whitespace-nowrap">
+              CHOOSE TIME
+            </p>
+          </div>
+          <div className="indicator-line h-0.5 w-20 md:w-40 bg-gray-300"></div>
+          <div className="step flex flex-col items-center relative z-10">
+            <div className="step-icon w-6 h-6 border-2 border-gray-300 flex items-center justify-center rounded-full"></div>
+            <p className="text-center absolute bottom-[-20px] text-xxs md:text-xs whitespace-nowrap">
+              YOUR INFO
+            </p>
+          </div>
+        </div>
+        <div className="grid gap-3 my-16 px-10 py-12 md:bg-gradient-to-br from-white/25 via-white/50 to-white/75 break-inside-avoid md:shadow-md rounded-lg">
+          <h1 className="w-full text-center inline-block m-0 md:text-4xl font-tuner lg:text-4xl text-2xl whitespace-nowrap lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent">
+            {data.title}
+          </h1>
+          <h3 className="w-full text-center mb-6 inline-block m-0 pb-4 text-lg md:whitespace-nowrap lg:leading-tight text-black">
+            {data.description}
+          </h3>
+          {meetingPeople.map((cardItem, idx) => (
+            <BookingCard key={idx} cardItem={cardItem} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+}
+
+export { BookingBlock }

components/blocks/Features.tsx

@@ -8,6 +8,7 @@ import playImage from '../../public/img/playButton.png'
 import { Actions } from './ActionsButton'
 import { ModalB } from './ModalButton'
 import RenderButton from 'utils/renderButtonArrayHelper'
+import Image from 'next/image'
 
 export function FeatureBlock({ data, index }) {
   const isReversed = data.isReversed
@@ -72,13 +73,14 @@ export function FeatureBlock({ data, index }) {
           >
             {data.media && data.media[0].image && (
               <>
-                <img
-                  src={data.media[0].image}
-                  alt={data.headline}
-                  className={`w-full h-auto rounded-lg ${
-                    isBackgroundEnabled ? 'shadow-panel' : ''
-                  } overflow-hidden bg-transparent`}
-                />
+          <Image
+            src={data.media[0].image}
+            alt={data.headline}
+            className={`w-full h-auto rounded-lg ${isBackgroundEnabled ? 'shadow-panel' : ''} overflow-hidden bg-transparent`}
+            width={1200}
+            height={1200}
+          />
+
               </>
             )}
             {data.media && data.media[0].src && (
@@ -90,10 +92,12 @@ export function FeatureBlock({ data, index }) {
                   className="absolute w-20 h-20 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 lg:left-[-35px] lg:top-[70px] lg:transform-none z-10"
                   id="play-button-overlay"
                 >
-                  <img
+                  <Image
                     src={playImage.src}
                     alt="Play-button-overlay"
                     className="w-full h-full"
+                    width={72}
+                    height={72}
                   />
                 </a>
                 <FeatureVideo

components/blocks/Flying.tsx

@@ -2,6 +2,7 @@ import { Actions } from './ActionsButton'
 import CloudsOne from '../../public/svg/clouds-1.svg'
 import CloudsTwo from '../../public/svg/clouds-2.svg'
 import RenderButton from 'utils/renderButtonArrayHelper'
+import Image from 'next/image'
 
 export function FlyingBlock({ data, index }) {
   return (
@@ -17,10 +18,12 @@ export function FlyingBlock({ data, index }) {
               ))}
           </div>
           <div className="learnImageWrapper">
-            <img
+            <Image
               className="learnImage"
               src="/img/flyingTina.png"
               alt="Tina learning"
+              width={600}
+              height={600}
             />
           </div>
         </div>

components/blocks/Hero.tsx

@@ -2,6 +2,7 @@ import RenderButton from 'utils/renderButtonArrayHelper'
 import { Actions } from './ActionsButton'
 import { Container } from './Container'
 import { tinaField } from 'tinacms/dist/react'
+import Image from 'next/image'
 
 export function HeroBlock({ data, index }) {
   return (
@@ -21,10 +22,12 @@ export function HeroBlock({ data, index }) {
               }`}
             >
               {data.media && data.media[0].image && (
-                <img
+                <Image
                   src={data.media[0].image}
                   alt={data.headline}
                   className="w-full h-auto"
+                  width={1200}
+                  height={1200}
                 />
               )}
               {data.media && data.media[0].src && (

components/blocks/LogoGrid.template.ts

@@ -43,7 +43,7 @@ export const logoGridTemplate: TinaTemplate = {
             },
           },
         },
-        { name: 'logo', label: 'Logo Link', type: 'string' },
+        { name: 'logo', label: 'Logo Image', type: 'image' },
         { name: 'size', label: 'Size', type: 'number' },
       ],
     },

components/blocks/LogoGrid.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import React from 'react';
 import Slider from 'react-infinite-logo-slider';
 
@@ -16,10 +17,12 @@ const Logo = ({ data, windowWidth = 1000 }) => {
         padding: '0 8px',
       }}
     >
-      <img
+      <Image
         src={data.logo}
         className="block w-full h-auto m-0"
         alt={data.name}
+        width={200}
+        height={200}
       />
     </a>
   );

components/blocks/Quote.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { tinaField } from 'tinacms/dist/react'
 import { Container } from './Container'
+import Image from 'next/image'
 
 export const QuoteBlock = ({ data, index }) => {
   return (
@@ -10,7 +11,11 @@ export const QuoteBlock = ({ data, index }) => {
         <Container width="wide">
           <div className="flex flex-col items-center lg:justify-center gap-12 lg:gap-36 perspective lg:flex-row">
             <div className="lg:w-1/5 flex flex-col gap-6 lg:gap-8  max-w-sm">
-              <img src={data.logo} />
+              <Image src={data.logo}
+              alt={data.title2}
+              height={600}
+              width={600}
+               />
             </div>
             <div className="min-w-0 lg:w-1/2 ">
               <blockquote className="text-3xl italic mb-2" data-tina-field={tinaField(data, 'title2')}>{data.title2}</blockquote>

components/blocks/Showcase.template.ts

@@ -30,7 +30,7 @@ export const showcaseTemplate: TinaTemplate = {
           name: 'media',
           label: 'Media',
           type: 'object',
-          fields: [{ name: 'src', label: 'Image Source', type: 'string' }],
+          fields: [{ name: 'src', label: 'Image Source', type: 'image' }],
         },
       ],
     },

components/blocks/Showcase.tsx

@@ -2,10 +2,13 @@ import React from 'react'
 import ReactMarkdown from 'react-markdown'
 import { Actions } from './ActionsButton'
 import { Container } from './Container'
+import Image from 'next/image'
 
 export function ShowcaseBlock({ data, index }) {
   const isReversed = index % 2 === 1
-  const id = data.headline.toLowerCase().replace(/[^a-z0-9]+/g, '-')
+  const id = data.headline 
+  ? data.headline.toLowerCase().replace(/[^a-z0-9]+/g, '-') 
+  : 'showcase-' + index;
 
   return (
     <>
@@ -31,12 +34,12 @@ export function ShowcaseBlock({ data, index }) {
         {data.media && data.media.src && (
           <div className={`featureImage`}>
             <a href={data.url} target="_blank">
-              <img
+              <Image
                 className="showcaseImage"
                 src={data.media.src}
                 alt={data.headline}
-                width="1120px"
-                height="800px"
+                width={1120}
+                height={800}
               />
             </a>
           </div>

components/blocks/VerticalCards.template.ts

@@ -24,7 +24,7 @@ export const verticalCardsTemplate: TinaTemplate = {
         { name: 'startDate', label: 'Start Date', type: 'datetime' },
         { name: 'endDate', label: 'End Date', type: 'datetime', description: 'Note this field is not mandatory. Leave blank if no end date specified (or only 1 day event)' },
         { name: 'location', label: 'Location', type: 'string' },
-        { name: 'image', label: 'Image', type: 'string' },
+        { name: 'image', label: 'Image', type: 'image' },
         { name: 'link', label: 'URL', type: 'string' },
         { name: 'markerLAT', label: 'Marker Latitude', type: 'number', description: 'Note this field corresponds to the Latitude position of the marker on the globe.' },
         { name: 'markerLONG', label: 'Marker Longitude', type: 'number', description: 'Note this field corresponds to the Longitude position of the marker on the globe.' },

components/layout/MarkdownContent.tsx

@@ -19,6 +19,7 @@ import styled from 'styled-components'
 import * as shortcodeRenderers from '../../utils/shortcodes'
 
 import GithubSlugger from 'github-slugger'
+import Image from 'next/image'
 
 interface MarkdownContentProps {
   content: string
@@ -187,7 +188,7 @@ const CodeSnippet = (props) => {
             <div className="flex flex-col lg:flex-row gap-4">
               <div className="flex-1">{props.children[codeIndex]}</div>
               <div className="flex-1 bg-gray-50 bg-[#f6f6f9] border border-gray-100 rounded-md overflow-hidden">
-                <img src={props.url} />
+                <Image src={props.url} alt={props.children} height={1200} width={1200} />
               </div>
             </div>
           </Disclosure.Panel>