Add editor seciton to tina starter

components/blocks/hero.tsx

@@ -27,7 +27,7 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
         size="large"
         className="grid grid-cols-1 md:grid-cols-5 gap-14 items-center justify-center"
       >
-        <div className="row-start-2 md:row-start-1 md:col-span-3 text-center md:text-left">
+        <div className="row-start-2 md:row-start-1 md:col-span-5 text-center md:text-left">
           {data.tagline && (
             <h2
               data-tina-field={tinaField(data, "tagline")}
@@ -40,7 +40,7 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
           {data.headline && (
             <h3
               data-tina-field={tinaField(data, "headline")}
-              className={`w-full relative	mb-10 text-5xl font-extrabold tracking-normal leading-tight title-font`}
+              className={`w-full relative mb-10 text-5xl font-extrabold tracking-normal leading-tight title-font`}
             >
               <span
                 className={`bg-clip-text text-transparent bg-gradient-to-r  ${
@@ -53,16 +53,28 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
               </span>
             </h3>
           )}
-          {data.text && (
-            <div
-              data-tina-field={tinaField(data, "text")}
-              className={`prose prose-lg mx-auto md:mx-0 mb-10 ${
-                data.color === "primary" ? `prose-primary` : `dark:prose-dark`
-              }`}
-            >
-              <TinaMarkdown content={data.text} />
-            </div>
-          )}
+          <div className="flex flex-col md:flex-row gap-6">
+            {data.text && (
+              <div
+                data-tina-field={tinaField(data, "text")}
+                className={`prose prose-lg mx-auto md:mx-0 mb-10 ${
+                  data.color === "primary" ? `prose-primary` : `dark:prose-dark`
+                }`}
+              >
+                <TinaMarkdown content={data.text} />
+              </div>
+            )}
+            {data.text2 && (
+              <div
+                data-tina-field={tinaField(data, "text2")}
+                className={`prose prose-lg mx-auto md:mx-0 mb-10 ${
+                  data.color === "primary" ? `prose-primary` : `dark:prose-dark`
+                }`}
+              >
+                <TinaMarkdown content={data.text2} />
+              </div>
+            )}
+          </div>
           {data.actions && (
             <Actions
               className="justify-center md:justify-start py-2"
@@ -74,18 +86,14 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
         {data.image && (
           <div
             data-tina-field={tinaField(data.image, "src")}
-            className="relative row-start-1 md:col-span-2 flex justify-center"
+            className="relative row-start-3 md:col-span-5 flex justify-center mt-10"
           >
             <img
-              className="absolute w-full rounded-lg max-w-xs md:max-w-none h-auto blur-2xl brightness-150 contrast-[0.9] dark:brightness-150 saturate-200 opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-hard-light"
+              className="w-full rounded-lg max-w-xs h-auto"              
               src={data.image.src}
               aria-hidden="true"
             />
-            <img
-              className="relative z-10 w-full max-w-xs rounded-lg md:max-w-none h-auto"
-              alt={data.image.alt}
-              src={data.image.src}
-            />
+
           </div>
         )}
       </Container>
@@ -116,7 +124,12 @@ export const heroBlockSchema: TinaTemplate = {
       name: "headline",
     },
     {
-      label: "Text",
+      type: "rich-text",
+      label: "Text-2",
+      name: "text2",
+    },
+    {
+      label: "Text-1",
       name: "text",
       type: "rich-text",
     },

content/pages/home.md

@@ -2,12 +2,29 @@
 title: Tina Cloud Starter
 blocks:
   - headline: Welcome to the Tina Starter
-    text: >
+    text2: >
+      ## Developers
+
+
       This project is set up to show you the basics of working with Tina. You're
       looking at the landing page, which pulls content from
       `content/pages/home.md`, components from components/blocks, and puts them
       all together in `pages/[filename].tsx`, all based on a config
       `tina/config.tsx`.
+    text: >
+      ## **Editors**
+
+
+      **Click this box to start editing it**. You will see the matching field
+      appear in the left sidebar for you to make changes. The edits will show in
+      this live preview. In that left panel, you can also navigate around the
+      page to change what you are editing (or just click a component here in the
+      preview, like you did before).
+
+
+      **Clicking 'Save' won't do anything in this demo** - but on your site it
+      will save the changes immediately or send an approval request to your team
+      for review.
     actions:
       - label: Get Started
         type: button
@@ -57,5 +74,3 @@ blocks:
     _template: testimonial
 ---
 
-
-