Added Icon to hero section + fixed Copy

content/pages/home.mdx

@@ -16,20 +16,23 @@ blocks:
         _template: codeButton
     media: /uploads/TinaDocs Design System.png
     informationBlock1:
-      title: Open Source
+      title: 'Visual Editing '
       desc: >
-        TinaDocs is open source and **free to use**. Edit and extend however you
-        like.
+        TinaDocs turns your static markdown into a **live editing experience**.
+        Let your team edit content directly on the page.
+      icon: Eye
     informationBlock2:
-      title: GitHub Backed
+      title: Git-Backed Workflow
       desc: >
-        TinaDocs is backed by GitHub, so **you control your content** in
-        document format.
+        Content **lives in your repo,** not a database. Every edit is
+        version-controlled by default.
+      icon: FaGithub
     informationBlock3:
-      title: API Generation
+      title: 'API Documentation '
       desc: >
         Create document pages from **your own OpenAPI spec**, with tailored
         components for your API.
+      icon: GitBranch
     _template: Hero
   - quote: 'Tina is {transforming} the way we do docs at Unity'
     author: Anton Iancu

src/components/blocks/Hero/Hero.template.tsx

@@ -1,3 +1,4 @@
+import { iconOptions } from "@/src/constants";
 import { Template } from "tinacms";
 
 export const actionsButtonTemplateFields = {
@@ -71,7 +72,7 @@ export const HeroBlockSchema: Template = {
   name: "Hero",
   label: "Hero",
   ui: {
-    previewSrc: '/blocks/hero.png',
+    previewSrc: "/blocks/hero.png",
   },
   fields: [
     { name: "title", type: "string", label: "Title" },
@@ -106,7 +107,12 @@ export const HeroBlockSchema: Template = {
       fields: [
         { name: "title", type: "string", label: "Title" },
         { name: "desc", type: "rich-text", label: "Description" },
-        { name: "icon", type: "image", label: "Icon" },
+        {
+          name: "icon",
+          label: "Icon",
+          type: "string",
+          options: iconOptions,
+        },
       ],
     },
     {
@@ -116,7 +122,12 @@ export const HeroBlockSchema: Template = {
       fields: [
         { name: "title", type: "string", label: "Title" },
         { name: "desc", type: "rich-text", label: "Description" },
-        { name: "icon", type: "image", label: "Icon" },
+        {
+          name: "icon",
+          label: "Icon",
+          type: "string",
+          options: iconOptions,
+        },
       ],
     },
     {
@@ -126,7 +137,12 @@ export const HeroBlockSchema: Template = {
       fields: [
         { name: "title", type: "string", label: "Title" },
         { name: "desc", type: "rich-text", label: "Description" },
-        { name: "icon", type: "image", label: "Icon" },
+        {
+          name: "icon",
+          label: "Icon",
+          type: "string",
+          options: iconOptions,
+        },
       ],
     },
   ],

src/components/blocks/Hero/Hero.tsx

@@ -15,17 +15,33 @@ import {
 import Lenis from "lenis";
 import { CodeButton } from "@/components/ui/code-button";
 import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
+import { Icon } from "../../icon";
 
 function InformationBlock({
   title,
   description,
+  icon,
 }: {
   title: string;
   description: TinaMarkdownContent;
+  icon?: string;
 }) {
   return (
     <div className="max-w-md flex flex-col gap-4 border border-white/20 rounded-md p-4 bg-[#191918]/60 shadow-lg text-left 2xl:w-lg w-sm">
-      <h2 className="text-2xl font-semibold">{title}</h2>
+      <div className="flex items-center gap-2">
+        {icon && (
+          <Icon
+            data={{
+              name: icon,
+              color: "primary",
+              size: "small",
+              style: "regular",
+            }}
+          />
+        )}
+        <h2 className="text-2xl font-semibold">{title}</h2>
+      </div>
+
       <TinaMarkdown content={description} />
     </div>
   );
@@ -38,6 +54,10 @@ export default function Hero({ data }: { data?: PageBlocksHero }) {
     offset: ["start start", "end end"],
   });
 
+  useMotionValueEvent(scrollYProgress, "change", (latest) => {
+    console.log("ScrollYProgress: ", latest);
+  });
+
   const [screenHeight, setScreenHeight] = useState(0);
   const [screenWidth, setScreenWidth] = useState(0);
 
@@ -185,14 +205,17 @@ export default function Hero({ data }: { data?: PageBlocksHero }) {
                 <InformationBlock
                   title={data?.informationBlock1?.title || "Undefined Title"}
                   description={data?.informationBlock1?.desc}
+                  icon={data?.informationBlock1?.icon || undefined}
                 />
                 <InformationBlock
                   title={data?.informationBlock2?.title || "Undefined Title"}
                   description={data?.informationBlock2?.desc}
+                  icon={data?.informationBlock2?.icon || undefined}
                 />
                 <InformationBlock
                   title={data?.informationBlock3?.title || "Undefined Title"}
                   description={data?.informationBlock3?.desc}
+                  icon={data?.informationBlock3?.icon || undefined}
                 />
               </motion.div>
 
@@ -210,14 +233,17 @@ export default function Hero({ data }: { data?: PageBlocksHero }) {
                 />
               </motion.div>
             </div>
-            <div className="block lg:hidden pt-16">
-              <Image
-                src={data.media}
-                alt={data.title || ""}
-                width={1000}
-                height={1000}
-                className="border-10 border-[#F6F6F513] rounded-lg shadow-xl"
-              />
+
+            <div className="block lg:hidden pt-16 px-10 min-h-[30vh] md:min-h-[50vh] overflow-hidden p-10">
+              <div className="absolute left-1/2 -translate-x-1/2 bg-[#252934] rounded-lg border-[0.5px] border-sand-6 shadow-xl p-2 w-[calc(100%-2rem)] max-w-2xl">
+                <Image
+                  src={data.media}
+                  alt={data.title || ""}
+                  width={1000}
+                  height={1000}
+                  className=" border-[#F6F6F513] rounded-lg shadow-xl "
+                />
+              </div>
             </div>
           </>
         )}

styles.css

@@ -159,7 +159,11 @@
   * {
     @apply border-border outline-ring/50;
   }
+  html {
+    overflow-x: hidden;
+  }
   body {
     @apply bg-background text-foreground;
+    overflow-x: hidden;
   }
 }