🐛💄 Homepage - sizing between components (tinacms#2766)

make full screen optional

components/blocks/Features/Features.template.ts

@@ -126,6 +126,17 @@ export const featuresTemplate: Template = {
             },
           ],
         },
+        {
+          name: 'isFullScreen',
+          label: 'Should the feature blocks be set to a full screen?',
+          description: 'use this for large bold stand alone items',
+          type: 'boolean',
+          ui: {
+            component: 'toggle',
+            parse: (value) => !!value,
+            format: (value) => !!value,
+          },
+        },
         {
           name: 'isReversed',
           label: 'Text on Right?',

components/blocks/Features/Features.tsx

@@ -9,6 +9,7 @@ import { Container } from '../Container';
 
 export function FeatureBlock({ data, index }) {
   const isReversed = data.isReversed;
+  const isFullScreen = data.isFullScreen
   const isBackgroundEnabled = data.imageBackground;
   const isVideo = data.media && data.media[0] && data.media[0].src;
 
@@ -32,7 +33,7 @@ export function FeatureBlock({ data, index }) {
     <>
       <div
         key={'feature-' + index}
-        className={`relative w-full flex flex-col-reverse items-center lg:justify-center lg:min-h-[70vh] perspective ${
+        className={`relative w-full flex flex-col-reverse items-center lg:justify-center ${isFullScreen ? 'lg:min-h-[70vh]' : ''} perspective ${
           isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row'
         }`}
       >
@@ -223,7 +224,7 @@ export function FeaturesBlock({ data, index }) {
       className={'py-12 lg:py-16 last:pb-20 last:lg:pb-32'}
     >
       <Container width="wide">
-        <div className="flex flex-col gap-16 w-full">
+        <div className="flex flex-col gap-32 lg:gap-48 w-full">
           {/* TODO: why is there a type error here */}
           {/* @ts-ignore */}
           {data.features &&

content/blocksPages/home.json

@@ -31,6 +31,7 @@
               "_template": "video"
             }
           ],
+          "isFullScreen": true,
           "isReversed": false,
           "imageBackground": false
         }