From ef8f83a11216e68f2c5240effb33f268d7d3f3fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Gaudencio=20do=20R=C3=AAgo?=
 <matheusgr@users.noreply.github.com>
Date: Tue, 7 Nov 2023 16:06:18 -0300
Subject: [PATCH] Update edit section.

---
 docs/developing/editable-sections/pt.md | 76 ++++++++++++++-----------
 1 file changed, 44 insertions(+), 32 deletions(-)

diff --git a/docs/developing/editable-sections/pt.md b/docs/developing/editable-sections/pt.md
index b0377b64..df62e39e 100644
--- a/docs/developing/editable-sections/pt.md
+++ b/docs/developing/editable-sections/pt.md
@@ -114,45 +114,57 @@ Execute o projeto localmente (`deno task start`) e altere o código da `Hero` pa
 
 ```tsx
 import type { ImageWidget } from "apps/admin/widgets.ts";
-import Image from "apps/website/components/Image.tsx";
 
+/** @title {{{title}}} - {{{href}}} */
+export interface Link {
+  title: string;
+  href: string;
+  hightlight?: boolean;
+}
 
 export interface Props {
-   /**
-    * @title Post image.
-    */
-   photo?: ImageWidget;
-   /**
-   * @title Post body.
-   */
-   post: string;
-   /**
-   * @title Publish date.
-   * @format datetime
-   */
-   datetime: string;
-   /**
-   * @title Post title.
-   */
-   title: string;
+  logo?: ImageWidget;
+  title?: string;
+  /** @format textarea */
+  headline?: string;
+  links?: Array<Link>;
 }
 
-export default function LatestPosts({ title, photo }: Props) {
-   return (
-      <div>
-      {photo && <Image
-         src={photo}
-         alt={`${title} image`}
-         height={500}
-         width={500}
-         class="rounded"
-      />}
-      <h1 class="font-bold">{title}</h1>
-      <p>This is an example section</p>
+export default function Hero({
+  title = "deco.cx",
+  logo = "/logo.svg",
+  headline =
+    "The digital experience platform that combines performance and personalization for the ultimate sales results.",
+  links = [
+    { title: "Official website", "href": "https://deco.cx/" },
+    { title: "Linkedin", "href": "https://www.linkedin.com/company/deco-cx/" },
+    { title: "Discord", "href": "https://deco.cx/discord" },
+  ],
+}: Props) {
+  return (
+    <header class="lg:container mx-8 md:mx-16 lg:mx-auto mt-8 md:mt-12 mb-28 text-xl md:text-base">
+      <div class="mb-10 md:mb-20">
+        <img
+          class="object-cover w-20"
+          src={logo}
+          alt={title}
+        />
       </div>
-   );
+      <div class="font-bold text-2xl lg:text-6xl leading-tight lg:leading-none xl:w-5/6">
+        {headline}
+      </div>
+      {!!links?.length && (
+        <ul class="mt-8 flex flex-col md:flex-row gap-2 md:gap-4">
+            {links.map(({ href, title, hightlight }) => (
+              <a href={href} aria-label={title}>
+                <li class={`${hightlight ? "font-black" : ""}`}>{title}</li>
+              </a>
+            ))}
+        </ul>
+      )}
+    </header>
+  );
 }
-
 ```
 _Alterando o tipo Link e o JSX com a nova propriedade `hightlight`_