💄 Talk to a Tina Expert + Features Component add toggle for features (#…

…1837) As per #1804 we have created a new features section to match the figma mockups. To do so we have adde an option in features with a switch that allows for content to be on the right versus image on the left so we can re-use the features component (image and text together). Changes: - [ ] Added a toggle to feature component allowing user to specify which side text lives on - [ ] Added a toggle to feature component to disable shadow / background around media - [ ] Added a new feature component to the homepage 'Talk to a Tina Expert' - [ ] Changed 'TinaCloud' to 'My TinaCloud' in nav bar as per #1831 ![Screenshot 2024-06-12 at 9 31 45 am](https://github.com/tinacms/tina.io/assets/137844305/d2ccf720-30ca-437e-923d-5934f20d06eb) **Figure: Test Passed, Talk to a Tina Expert!** --------- Co-authored-by: joshua berman <jber4409@uni.sydney.edu.au>
tinacms · Jun 12, 2024 · 4acd9c1 · 4acd9c1
1 parent 30cce42
commit 4acd9c1
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 17 deletions.
diff --git a/components/blocks/Features.template.ts b/components/blocks/Features.template.ts
@@ -15,7 +15,7 @@ export const featuresTemplate: Template = {
       list: true,
       ui: {
         itemProps: (item) => {
-          return { label: item?.headline }
+          return { label: item?.headline };
         },
       },
       fields: [
@@ -28,7 +28,6 @@ export const featuresTemplate: Template = {
         },
         // @ts-ignore
         actionsTemplate,
-        // Block field with image, video or text as template options
         {
           name: 'media',
           label: 'Media',
@@ -102,7 +101,29 @@ export const featuresTemplate: Template = {
             },
           ],
         },
+        {
+          name: 'isReversed',
+          label: 'Text on Right?',
+          description: 'This is the position of the text, relative to the media. Off is left, and on is right.',
+          type: 'boolean',
+          ui: {
+            component: 'toggle',
+            parse: (value) => !!value,
+            format: (value) => !!value,
+          },
+        },
+        {
+          name: 'imageBackground',
+          label: 'Image Background',
+          description: 'This will toggle the background and bordering of the media. This will only have visible changes if the media has a transparent background.',
+          type: 'boolean',
+          ui: {
+            component: 'toggle',
+            parse: (value) => !!value,
+            format: (value) => !!value,
+          },
+        }
       ] as TinaField[],
     },
   ],
-}
+};
diff --git a/components/blocks/Features.tsx b/components/blocks/Features.tsx
@@ -7,9 +7,13 @@ import styled from 'styled-components';
 import playImage from '../../public/img/playButton.png';
 
 export function FeatureBlock({ data, index }) {
-  const isReversed = index % 2 === 1;
+
+  const isReversed = data.isReversed;
+  const isBackgroundEnabled = data.imageBackground;
+
   const isVideo = data.media && data.media[0] && data.media[0].src;
 
+
   return (
     <>
       <div
@@ -39,14 +43,14 @@ export function FeatureBlock({ data, index }) {
         </div>
         {data.media && data.media[0] && (
           <div
-            className={`relative min-w-0 lg:w-1/2 ${(data.media[0].image || data.media[0].src) && ''}`}
+            className={`relative min-w-0 lg:w-1/2 ${isReversed ? 'lg:pr-8' : ''} ${(data.media[0].image || data.media[0].src) && ''}`}
           >
             {data.media && data.media[0].image && (
               <>
                 <img
                   src={data.media[0].image}
                   alt={data.headline}
-                  className="w-full h-auto rounded-lg shadow-panel overflow-hidden bg-transparent"
+                  className={`w-full h-auto rounded-lg ${isBackgroundEnabled ? 'shadow-panel' : ''} overflow-hidden bg-transparent`}
                 />
               </>
             )}
@@ -79,7 +83,7 @@ export function FeatureBlock({ data, index }) {
                   className={`file relative ${data.media[0].file
                     ? 'rounded-lg rounded-tl-none'
                     : 'rounded-lg'
-                    } overflow-hidden w-full text-blue-50 border-2 border-blue-800 bg-gradient-to-br from-blue-800 via-blue-900 to-blue-1000 shadow-panel`}
+                    } overflow-hidden w-full text-blue-50 border-2 border-blue-800 bg-gradient-to-br from-blue-800 via-blue-900 to-blue-1000 ${isBackgroundEnabled ? 'shadow-panel' : ''}`}
                   style={{
                     fontSize:
                       1.25 * (data.media[0].scale ? data.media[0].scale : 1) +
@@ -135,7 +139,7 @@ export function FeatureBlock({ data, index }) {
         }
 
         :global(.hljs) {
-          font-size: unquote('clamp(0.75em,0.676em + 0.37vw, 1em)			');
+          font-size: unquote('clamp(0.75em,0.676em + 0.37vw, 1em)');
           padding: 1.5em;
           color: var(--blue-250);
           font-weight: medium;
@@ -172,7 +176,7 @@ export function FeatureBlock({ data, index }) {
         }
       `}</style>
     </>
-  )
+  );
 }
 
 export function FeaturesBlock({ data, index }) {
@@ -187,12 +191,12 @@ export function FeaturesBlock({ data, index }) {
           {/* @ts-ignore */}
           {data.features &&
             data.features.map((data, index) => {
-              return <FeatureBlock data={data} index={index} />
+              return <FeatureBlock data={data} index={index} />;
             })}
         </div>
       </Container>
     </section>
-  )
+  );
 }
 
 export const FeatureVideo = ({ src, className = '' }) => {
@@ -214,9 +218,9 @@ export const FeatureVideo = ({ src, className = '' }) => {
         type="video/mp4"
       />
     </video>
-  )
+  );
 }
 
 const CodeWrapper = styled.div`
   ${DocsRichText}
-`
+`;
diff --git a/content/blocksPages/home.json b/content/blocksPages/home.json
@@ -160,7 +160,8 @@
               "scale": 1,
               "_template": "code"
             }
-          ]
+          ],
+          "textPosition": true
         },
         {
           "headline": "Configure with Code",
@@ -182,7 +183,34 @@
               "scale": 0.8,
               "_template": "code"
             }
-          ]
+          ],
+          "textPosition": false
+        }
+      ],
+      "_template": "features"
+    },
+    {
+      "features": [
+        {
+          "headline": "Talk to a Tina Expert",
+          "text": "Evaluating Tina for your project? Book a 30-minute call with a TinaCMS Architect",
+          "actions": [
+            {
+              "label": "Schedule Call",
+              "icon": true,
+              "variant": "blue",
+              "size": "medium",
+              "url": "https://meetings-eu1.hubspot.com/scott15?uuid=2f12f1a3-8b6a-4472-bfb5-2f3f930a1b19"
+            }
+          ],
+          "media": [
+            {
+              "image": "/img/TinaExpert.png",
+              "_template": "image"
+            }
+          ],
+          "textPosition": true,
+          "imageBackground": false
         }
       ],
       "_template": "features"

diff --git a/content/navigation.json b/content/navigation.json
@@ -79,7 +79,7 @@
   },
   {
     "id": "tinacloud",
-    "label": "TinaCloud",
+    "label": "My TinaCloud",
     "href": "https://app.tina.io/signin",
     "external": false
   }

diff --git a/public/img/TinaExpert.png b/public/img/TinaExpert.png
diff --git a/tina/tina-lock.json b/tina/tina-lock.json