From 9042736b94803a7b3b5f24b64822da30b8f8da70 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 16 Apr 2024 23:35:52 -0300
Subject: [PATCH 1/6] start layout props

---
 components/product/ProductShelf.tsx       | 13 +--
 components/product/ProductShelfTabbed.tsx | 18 ++---
 components/ui/CategoryBanner.tsx          |  2 +-
 components/ui/SectionHeader.tsx           | 62 --------------
 sections/Category/CategoryGrid.tsx        | 14 ++--
 sections/Category/CategoryList.tsx        | 16 ++--
 sections/Content/Benefits.tsx             | 86 ++++----------------
 sections/Content/BlogPosts.tsx            | 13 +--
 sections/Content/Faq.tsx                  | 29 +++----
 sections/Content/Logos.tsx                | 14 +---
 sections/Content/Testimonials.tsx         | 12 +--
 sections/Images/ImageGallery.tsx          | 28 ++-----
 sections/Newsletter/Newsletter.tsx        | 98 ++++-------------------
 sections/Social/InstagramPosts.tsx        | 11 +--
 14 files changed, 80 insertions(+), 336 deletions(-)
 delete mode 100644 components/ui/SectionHeader.tsx

diff --git a/components/product/ProductShelf.tsx b/components/product/ProductShelf.tsx
index d67eac99..a03812c5 100644
--- a/components/product/ProductShelf.tsx
+++ b/components/product/ProductShelf.tsx
@@ -1,7 +1,6 @@
 import { SendEventOnView } from "../../components/Analytics.tsx";
 import ProductCard from "../../components/product/ProductCard.tsx";
 import Icon from "../../components/ui/Icon.tsx";
-import Header from "../../components/ui/SectionHeader.tsx";
 import Slider from "../../components/ui/Slider.tsx";
 import SliderJS from "../../islands/SliderJS.tsx";
 import { useId } from "../../sdk/useId.ts";
@@ -20,8 +19,6 @@ export interface Props {
       mobile?: 1 | 2 | 3 | 4 | 5;
       desktop?: 1 | 2 | 3 | 4 | 5;
     };
-    headerAlignment?: "center" | "left";
-    headerfontSize?: "Normal" | "Large" | "Small";
     showArrows?: boolean;
   };
 }
@@ -55,12 +52,10 @@ function ProductShelf({
   };
   return (
     <div class="w-full container py-8 flex flex-col gap-6 lg:py-10">
-      <Header
-        title={title || ""}
-        description={description || ""}
-        fontSize={layout?.headerfontSize || "Large"}
-        alignment={layout?.headerAlignment || "center"}
-      />
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <p class="text-center">{description}</p>
+      </div>
 
       <div
         id={id}
diff --git a/components/product/ProductShelfTabbed.tsx b/components/product/ProductShelfTabbed.tsx
index 43362eb8..e3409e8d 100644
--- a/components/product/ProductShelfTabbed.tsx
+++ b/components/product/ProductShelfTabbed.tsx
@@ -4,7 +4,6 @@ import { usePartialSection } from "deco/hooks/usePartialSection.ts";
 import { SendEventOnView } from "../../components/Analytics.tsx";
 import ProductCard from "../../components/product/ProductCard.tsx";
 import Icon from "../../components/ui/Icon.tsx";
-import Header from "../../components/ui/SectionHeader.tsx";
 import Slider from "../../components/ui/Slider.tsx";
 import SliderJS from "../../islands/SliderJS.tsx";
 import { useId } from "../../sdk/useId.ts";
@@ -21,10 +20,6 @@ export interface Props {
   tabs: Tab[];
   title?: string;
   description?: string;
-  layout?: {
-    headerAlignment?: "center" | "left";
-    headerfontSize?: "Normal" | "Large";
-  };
   tabIndex?: number;
 }
 
@@ -32,7 +27,6 @@ function TabbedProductShelf({
   tabs,
   title,
   description,
-  layout,
   tabIndex,
 }: Props) {
   const id = useId();
@@ -48,12 +42,10 @@ function TabbedProductShelf({
 
   return (
     <div class="w-full container  py-8 flex flex-col gap-8 lg:gap-12 lg:py-10">
-      <Header
-        title={title || ""}
-        description={description || ""}
-        fontSize={layout?.headerfontSize || "Large"}
-        alignment={layout?.headerAlignment || "center"}
-      />
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <p class="text-center">{description}</p>
+      </div>
 
       <div class="flex justify-center">
         <div class="tabs tabs-boxed">
@@ -94,7 +86,7 @@ function TabbedProductShelf({
               <Icon size={24} id="ChevronLeft" strokeWidth={3} />
             </Slider.PrevButton>
           </div>
-          <div class="hidden relative sm:block z-10 col-start-3 row-start-3">
+          <div class="hidden relative sm:block z-10 col-start-3 row-start-3 font-">
             <Slider.NextButton class="btn btn-circle btn-outline absolute left-1/2 bg-base-100">
               <Icon size={24} id="ChevronRight" strokeWidth={3} />
             </Slider.NextButton>
diff --git a/components/ui/CategoryBanner.tsx b/components/ui/CategoryBanner.tsx
index bf706831..58d96577 100644
--- a/components/ui/CategoryBanner.tsx
+++ b/components/ui/CategoryBanner.tsx
@@ -73,7 +73,7 @@ function Banner(props: SectionProps<ReturnType<typeof loader>>) {
             {title}
           </span>
         </h1>
-        <h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
           <span class="text-xl font-medium text-base-100">
             {subtitle}
           </span>
diff --git a/components/ui/SectionHeader.tsx b/components/ui/SectionHeader.tsx
deleted file mode 100644
index f896b808..00000000
--- a/components/ui/SectionHeader.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { clx } from "../../sdk/clx.ts";
-
-export interface Props {
-  title?: string;
-  fontSize?: "Small" | "Normal" | "Large";
-  description?: string;
-  alignment?: "center" | "left";
-  colorReverse?: boolean;
-}
-
-const fontSizeClasses = {
-  "Small": "lg:text-2xl",
-  "Normal": "lg:text-3xl",
-  "Large": "lg:text-4xl",
-};
-
-function Header(props: Props) {
-  return (
-    <>
-      {props.title || props.description
-        ? (
-          <div
-            class={`flex flex-col gap-2 ${
-              props.alignment === "left" ? "text-left" : "text-center"
-            }`}
-          >
-            {props.title &&
-              (
-                <h1
-                  class={clx(
-                    "text-2xl font-light leading-8 lg:leading-10",
-                    props.colorReverse
-                      ? "text-primary-content"
-                      : "text-base-content",
-                    fontSizeClasses[props.fontSize || "Normal"],
-                  )}
-                >
-                  {props.title}
-                </h1>
-              )}
-            {props.description &&
-              (
-                <h2
-                  class={clx(
-                    "leading-6 lg:leading-8",
-                    props.colorReverse
-                      ? "text-primary-content"
-                      : "text-base-content",
-                    fontSizeClasses[props.fontSize || "Normal"],
-                  )}
-                >
-                  {props.description}
-                </h2>
-              )}
-          </div>
-        )
-        : null}
-    </>
-  );
-}
-
-export default Header;
diff --git a/sections/Category/CategoryGrid.tsx b/sections/Category/CategoryGrid.tsx
index bb459c4d..aba093d8 100644
--- a/sections/Category/CategoryGrid.tsx
+++ b/sections/Category/CategoryGrid.tsx
@@ -1,4 +1,3 @@
-import Header from "../../components/ui/SectionHeader.tsx";
 import { useId } from "../../sdk/useId.ts";
 import Image from "apps/website/components/Image.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
@@ -25,7 +24,6 @@ export interface Props {
   };
   list?: CategoryGridProps[];
   layout?: {
-    headerAlignment?: "center" | "left";
     categoryCard?: {
       textPosition?: "top" | "bottom";
       textAlignment?: "center" | "left";
@@ -73,7 +71,6 @@ function CategoryGrid(props: Props) {
     },
     list = DEFAULT_LIST,
     layout = {
-      headerAlignment: "center",
       categoryCard: {
         textPosition: "bottom",
         textAlignment: "left",
@@ -85,12 +82,11 @@ function CategoryGrid(props: Props) {
     <div
       id={id}
       class="container mt-16"
-    >
-      <Header
-        title={header.title}
-        description={header.description || ""}
-        alignment={layout.headerAlignment || "center"}
-      />
+    > 
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{header.title}</h2>
+        <p class="text-base-content text-center">{header.description}</p>
+      </div>
 
       <div class="grid md:grid-cols-2 grid-cols-1 mt-6">
         {list.map((
diff --git a/sections/Category/CategoryList.tsx b/sections/Category/CategoryList.tsx
index c0025c6c..ea3c24f9 100644
--- a/sections/Category/CategoryList.tsx
+++ b/sections/Category/CategoryList.tsx
@@ -1,4 +1,3 @@
-import Header from "../../components/ui/SectionHeader.tsx";
 import Slider from "../../components/ui/Slider.tsx";
 import SliderJS from "../../islands/SliderJS.tsx";
 import { useId } from "../../sdk/useId.ts";
@@ -21,7 +20,6 @@ export interface Props {
   };
   list?: Category[];
   layout?: {
-    headerAlignment?: "center" | "left";
     categoryCard?: {
       textPosition?: "top" | "bottom";
       textAlignment?: "center" | "left";
@@ -107,7 +105,6 @@ function CategoryList(props: Props) {
     },
     list = DEFAULT_LIST,
     layout = {
-      headerAlignment: "center",
       categoryCard: {
         textPosition: "top",
         textAlignment: "center",
@@ -118,13 +115,12 @@ function CategoryList(props: Props) {
   return (
     <div
       id={id}
-      class="container py-8 flex flex-col gap-8 lg:gap-10 text-base-content  lg:py-10"
-    >
-      <Header
-        title={header.title}
-        description={header.description || ""}
-        alignment={layout.headerAlignment || "center"}
-      />
+      class="container py-8 flex flex-col gap-8 lg:gap-10 text-base-content"
+    > 
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{header.title}</h2>
+        <p class="text-base-content text-center">{header.description}</p>
+      </div>
 
       <Slider class="carousel carousel-start gap-4 lg:gap-8 row-start-2 row-end-5">
         {list.map((
diff --git a/sections/Content/Benefits.tsx b/sections/Content/Benefits.tsx
index ef2581f3..dc6e7e55 100644
--- a/sections/Content/Benefits.tsx
+++ b/sections/Content/Benefits.tsx
@@ -1,5 +1,4 @@
 import Icon, { AvailableIcons } from "../../components/ui/Icon.tsx";
-import Header from "../../components/ui/SectionHeader.tsx";
 
 interface Benefit {
   label: string;
@@ -21,10 +20,6 @@ export interface Props {
    */
   description?: string;
   benefits?: Array<Benefit>;
-  layout?: {
-    variation?: "Simple" | "With border" | "Color reverse";
-    headerAlignment?: "center" | "left";
-  };
 }
 
 export default function Benefits(
@@ -46,29 +41,15 @@ export default function Benefits(
       label: "Devolução grátis",
       description: "Veja as condições para devolver seu produto.",
     }],
-    layout,
   } = props;
 
   const listOfBenefits = benefits.map((benefit, index) => {
     const showDivider = index < benefits.length - 1;
-    const reverse = layout?.variation === "Color reverse";
-    const benefitLayout = !layout?.variation || layout?.variation === "Simple"
-      ? "tiled"
-      : "piledup";
+    const benefitLayout = "tiled";
 
     return (
       <div
-        class={`${
-          reverse ? "bg-primary text-primary-content p-4 lg:px-8 lg:py-4" : ""
-        } flex gap-4 ${
-          benefitLayout == "piledup" ? "flex-col items-center text-center" : ""
-        } ${
-          showDivider && benefitLayout !== "piledup"
-            ? "border-b border-neutral-300"
-            : ""
-        } ${showDivider ? "pb-4 lg:pr-8 lg:border-r lg:border-b-0" : ""} ${
-          showDivider && !reverse ? "lg:pb-0" : ""
-        }`}
+        class={`flex gap-4 ${showDivider ? "pb-4 lg:pr-8 lg:border-r lg:border-b-0" : ""}`}
       >
         <div class="flex-none">
           <Icon
@@ -82,16 +63,12 @@ export default function Benefits(
         </div>
         <div class="flex-auto flex flex-col gap-1 lg:gap-2">
           <div
-            class={`text-base lg:text-xl leading-7 ${
-              reverse ? "text-base-100" : "text-base-content"
-            }`}
+            class="text-base lg:text-xl leading-7 text-base-content"
           >
             {benefit.label}
           </div>
           <p
-            class={`text-sm leading-5 ${
-              reverse ? "text-base-100" : "text-neutral"
-            } ${benefitLayout == "piledup" ? "hidden lg:block" : ""}`}
+            class="text-sm leading-5 text-neutral"
           >
             {benefit.description}
           </p>
@@ -101,51 +78,16 @@ export default function Benefits(
   });
 
   return (
-    <>
-      {!layout?.variation || layout?.variation === "Simple"
-        ? (
-          <div class="w-full container px-4 py-8 flex flex-col gap-8 lg:gap-10 lg:py-10 lg:px-0">
-            <Header
-              title={title}
-              description={description}
-              alignment={layout?.headerAlignment || "center"}
-            />
-            <div class="w-full flex justify-center">
-              <div class="flex flex-col gap-4 lg:gap-8 w-full lg:grid grid-flow-col auto-cols-fr">
-                {listOfBenefits}
-              </div>
-            </div>
-          </div>
-        )
-        : ""}
-      {layout?.variation === "With border" && (
-        <div class="w-full container flex flex-col px-4 py-8 gap-8 lg:gap-10 lg:py-10 lg:px-0">
-          <Header
-            title={title}
-            description={description}
-            alignment={layout?.headerAlignment || "center"}
-          />
-          <div class="w-full flex justify-center">
-            <div class="grid grid-cols-2 gap-4 w-full py-6 px-4 border border-base-300 lg:gap-8 lg:grid-flow-col lg:auto-cols-fr lg:p-10">
-              {listOfBenefits}
-            </div>
-          </div>
-        </div>
-      )}
-      {layout?.variation === "Color reverse" && (
-        <div class="w-full container flex flex-col px-4 py-8 gap-8 lg:gap-10 lg:py-10 lg:px-0">
-          <Header
-            title={title}
-            description={description}
-            alignment={layout?.headerAlignment || "center"}
-          />
-          <div class="w-full flex justify-center">
-            <div class="grid grid-cols-2 gap-4 w-full lg:gap-8 lg:grid-flow-col lg:auto-cols-fr">
-              {listOfBenefits}
-            </div>
-          </div>
+    <div class="w-full container px-4 py-8 flex flex-col gap-8 lg:gap-10 lg:py-10 lg:px-0">
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <p class="text-center">{description}</p>
+      </div>
+      <div class="w-full flex justify-center">
+        <div class="flex flex-col gap-4 lg:gap-8 w-full lg:grid grid-flow-col auto-cols-fr">
+          {listOfBenefits}
         </div>
-      )}
-    </>
+      </div>
+    </div>
   );
 }
diff --git a/sections/Content/BlogPosts.tsx b/sections/Content/BlogPosts.tsx
index cb00ebf5..dfad08af 100644
--- a/sections/Content/BlogPosts.tsx
+++ b/sections/Content/BlogPosts.tsx
@@ -1,7 +1,6 @@
 import Icon from "../../components/ui/Icon.tsx";
 import Image from "apps/website/components/Image.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
-import Header from "../../components/ui/SectionHeader.tsx";
 import Slider from "../../components/ui/Slider.tsx";
 import SliderJS from "../../islands/SliderJS.tsx";
 import { useId } from "../../sdk/useId.ts";
@@ -14,8 +13,6 @@ export interface Props {
       mobile?: 1 | 2 | 3 | 4 | 5;
       desktop?: 1 | 2 | 3 | 4 | 5;
     };
-    headerAlignment?: "center" | "left";
-    headerfontSize?: "Normal" | "Large" | "Small";
     showArrows?: boolean;
   };
 }
@@ -37,8 +34,6 @@ function BlogPosts({
       mobile: 1,
       desktop: 3,
     },
-    headerAlignment: "center",
-    headerfontSize: "Normal",
     showArrows: false,
   } as Props["layout"],
   posts = [
@@ -124,11 +119,9 @@ function BlogPosts({
   return (
     <div class="w-full container py-8 flex flex-col gap-6 pb-16">
       <div class="px-9">
-        <Header
-          title={title || "BlogPosts"}
-          fontSize={layout?.headerfontSize || "Normal"}
-          alignment={layout?.headerAlignment || "center"}
-        />
+       <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+      </div>
       </div>
       <div
         id={id}
diff --git a/sections/Content/Faq.tsx b/sections/Content/Faq.tsx
index 58b2f98f..d10882ad 100644
--- a/sections/Content/Faq.tsx
+++ b/sections/Content/Faq.tsx
@@ -1,4 +1,3 @@
-import Header from "../../components/ui/SectionHeader.tsx";
 
 export interface Question {
   question: string;
@@ -23,7 +22,6 @@ export interface Props {
   contact?: Contact;
   layout?: {
     variation?: "Compact" | "Full" | "Side to side";
-    headerAlignment?: "center" | "left";
   };
 }
 
@@ -98,11 +96,10 @@ export default function FAQ(props: Props) {
       {(!layout?.variation || layout?.variation === "Compact") && (
         <div class="w-full container px-4 py-8 flex flex-col gap-4 lg:gap-8 lg:py-10 lg:px-40">
           <div class="flex flex-col gap-8 lg:gap-10">
-            <Header
-              title={title || ""}
-              description={description || ""}
-              alignment={layout?.headerAlignment || "center"}
-            />
+            <div class="flex flex-col gap-2">
+              <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+              <p class="text-center">{description}</p>
+            </div>
             <div class="join join-vertical w-full">
               {questions.map((question) => <Question {...question} />)}
             </div>
@@ -115,11 +112,10 @@ export default function FAQ(props: Props) {
       {layout?.variation === "Full" && (
         <div class="w-full container px-4 py-8 flex flex-col gap-4 lg:gap-8 lg:py-10 lg:px-0">
           <div class="flex flex-col gap-8 lg:gap-10">
-            <Header
-              title={title || ""}
-              description={description || ""}
-              alignment={layout?.headerAlignment || "center"}
-            />
+          <div class="flex flex-col gap-2">
+            <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+            <p class="text-center">{description}</p>
+          </div>
             <div class="join join-vertical w-full">
               {questions.map((question) => <Question {...question} />)}
             </div>
@@ -132,11 +128,10 @@ export default function FAQ(props: Props) {
       {layout?.variation === "Side to side" && (
         <div class="w-full container px-4 py-8 grid gap-8 grid-flow-row grid-cols-1 lg:grid-flow-col lg:grid-cols-2 lg:grid-rows-2 lg:py-10 lg:px-0">
           <div class="order-1 lg:order-1">
-            <Header
-              title={title || ""}
-              description={description || ""}
-              alignment={layout?.headerAlignment || "center"}
-            />
+          <div class="flex flex-col gap-2">
+            <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+            <p class="text-center">{description}</p>
+          </div>
           </div>
           <div class="order-2 lg:order-3 lg:row-span-2">
             <div class="join join-vertical">
diff --git a/sections/Content/Logos.tsx b/sections/Content/Logos.tsx
index ef059966..4b399d38 100644
--- a/sections/Content/Logos.tsx
+++ b/sections/Content/Logos.tsx
@@ -1,5 +1,4 @@
 import Image from "apps/website/components/Image.tsx";
-import Header from "../../components/ui/SectionHeader.tsx";
 import { useMemo } from "preact/hooks";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 
@@ -12,9 +11,6 @@ export interface Props {
   title?: string;
   description?: string;
   images?: Image[];
-  layout?: {
-    headerAlignment?: "center" | "left";
-  };
 }
 
 const IMAGES = [
@@ -35,7 +31,6 @@ function Logos(props: Props) {
     title,
     description,
     images,
-    layout,
   } = props;
   const list = useMemo(
     () =>
@@ -47,11 +42,10 @@ function Logos(props: Props) {
 
   return (
     <div class="w-full container px-4 py-8 flex flex-col gap-8 lg:gap-12 lg:py-10 lg:px-0">
-      <Header
-        title={title}
-        description={description}
-        alignment={layout?.headerAlignment || "center"}
-      />
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <p class="text-center">{description}</p>
+      </div>
       <div class="w-full text-center items-center">
         {list.map((element) => (
           <div class="w-36 lg:w-40 h-17 lg:h-20 px-4 lg:px-6 py-6 lg:py-4 inline-block align-middle">
diff --git a/sections/Content/Testimonials.tsx b/sections/Content/Testimonials.tsx
index 9da683f5..316746af 100644
--- a/sections/Content/Testimonials.tsx
+++ b/sections/Content/Testimonials.tsx
@@ -1,6 +1,5 @@
 import Icon from "../../components/ui/Icon.tsx";
 import Image from "apps/website/components/Image.tsx";
-import Header from "../../components/ui/SectionHeader.tsx";
 import Slider from "../../components/ui/Slider.tsx";
 import SliderJS from "../../islands/SliderJS.tsx";
 import { useId } from "../../sdk/useId.ts";
@@ -26,7 +25,6 @@ export interface Props {
   testimonials?: Testimonial[];
   layout?: {
     variation?: "Grid" | "Slider";
-    headerAlignment?: "center" | "left";
   };
 }
 
@@ -78,7 +76,6 @@ const DEFAULT_PROPS: Props = {
   }],
   "layout": {
     "variation": "Grid",
-    "headerAlignment": "center",
   },
 };
 
@@ -134,11 +131,10 @@ export default function Testimonials(
 
   return (
     <div class="w-full container px-4 py-8 flex flex-col gap-14 lg:gap-20 lg:py-10 lg:px-0">
-      <Header
-        title={title}
-        description={description}
-        alignment={layout?.headerAlignment || "center"}
-      />
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <p class="text-center">{description}</p>
+      </div>
 
       {layout?.variation === "Grid" && (
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
diff --git a/sections/Images/ImageGallery.tsx b/sections/Images/ImageGallery.tsx
index ea44a98d..015ec45e 100644
--- a/sections/Images/ImageGallery.tsx
+++ b/sections/Images/ImageGallery.tsx
@@ -1,6 +1,4 @@
 import { Picture, Source } from "apps/website/components/Picture.tsx";
-import Image from "apps/website/components/Image.tsx";
-import Header from "../../components/ui/SectionHeader.tsx";
 import type { ImageWidget } from "apps/admin/widgets.ts";
 
 /**
@@ -38,16 +36,6 @@ export interface Props {
    */
   banners?: Banner[];
   layout?: {
-    /**
-     * @description Aplique borda a sua imagem
-     */
-    borderRadius?: {
-      /** @default none */
-      mobile?: BorderRadius;
-      /** @default none */
-      desktop?: BorderRadius;
-    };
-    headerAlignment?: "center" | "left";
     mobile?: "Asymmetric" | "Symmetrical";
     desktop?: "Asymmetric" | "Symmetrical";
   };
@@ -112,11 +100,6 @@ const DEFAULT_PROPS: Props = {
     },
   ],
   "layout": {
-    "borderRadius": {
-      "mobile": "3xl",
-      "desktop": "2xl",
-    },
-    "headerAlignment": "center",
     "mobile": "Asymmetric",
     "desktop": "Asymmetric",
   },
@@ -189,15 +172,14 @@ export default function Gallery(props: Props) {
 
   return (
     <section class="container px-4 py-8 flex flex-col gap-8 lg:gap-10 lg:py-10 lg:px-0">
-      <Header
-        title={title}
-        description={description}
-        alignment={layout?.headerAlignment || "center"}
-      />
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <p class="text-center">{description}</p>
+      </div>
       <ul class="grid grid-flow-col grid-cols-2 grid-rows-6 gap-4 list-none">
         {banners?.map((banner, index) => (
           <li class={`${mobileItemLayout(index)} ${desktopItemLayout(index)}`}>
-            <Banner {...banner} borderRadius={props.layout?.borderRadius} />
+            <Banner {...banner} />
           </li>
         ))}
       </ul>
diff --git a/sections/Newsletter/Newsletter.tsx b/sections/Newsletter/Newsletter.tsx
index eccbc991..476b97fe 100644
--- a/sections/Newsletter/Newsletter.tsx
+++ b/sections/Newsletter/Newsletter.tsx
@@ -1,4 +1,3 @@
-import Header from "../../components/ui/SectionHeader.tsx";
 
 export interface Form {
   placeholder?: string;
@@ -7,35 +6,11 @@ export interface Form {
   helpText?: string;
 }
 
-interface Content {
-  border?: boolean;
-  /**
-   * @format button-group
-   * @options deco-sites/storefront/loaders/icons.ts
-   */
-  alignment?: "Left" | "Center" | "Right";
-  bgColor?: "Normal" | "Reverse";
-}
-
-interface Header {
-  /**
-   * @format button-group
-   * @options deco-sites/storefront/loaders/icons.ts
-   */
-  fontSize?: "Small" | "Normal" | "Large";
-}
-
-interface Layout {
-  header?: Header;
-  content?: Content;
-}
-
 export interface Props {
   title?: string;
   /** @format textarea */
   description?: string;
   form?: Form;
-  layout?: Layout;
 }
 
 const DEFAULT_PROPS: Props = {
@@ -46,31 +21,17 @@ const DEFAULT_PROPS: Props = {
     buttonText: "Inscrever",
     helpText:
       'Ao se inscrever, você concorda com nossa <a class="link" href="/politica-de-privacidade">Política de privacidade</a>.',
-  },
-  layout: {
-    header: {
-      fontSize: "Large",
-    },
-    content: {
-      border: false,
-      alignment: "Left",
-    },
-  },
+  }
 };
 
 export default function Newsletter(props: Props) {
-  const { title, description, form, layout } = { ...DEFAULT_PROPS, ...props };
-  const isReverse = layout?.content?.bgColor === "Reverse";
-  const bordered = Boolean(layout?.content?.border);
+  const { title, description, form } = { ...DEFAULT_PROPS, ...props };
 
   const headerLayout = (
-    <Header
-      title={title}
-      description={description}
-      alignment={layout?.content?.alignment === "Left" ? "left" : "center"}
-      colorReverse={isReverse}
-      fontSize={layout?.header?.fontSize}
-    />
+    <div class="flex flex-col gap-2">
+      <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+      <p class="text-center">{description}</p>
+    </div>
   );
 
   const formLayout = form && (
@@ -82,7 +43,7 @@ export default function Newsletter(props: Props) {
           placeholder={form.placeholder}
         />
         <button
-          class={`btn ${isReverse ? "btn-accent" : ""}`}
+          class="btn"
           type="submit"
         >
           {form.buttonText}
@@ -97,49 +58,18 @@ export default function Newsletter(props: Props) {
     </form>
   );
 
-  const bgLayout = isReverse
-    ? "bg-secondary text-secondary-content"
-    : "bg-transparent";
-
   return (
     <div
-      class={`${
-        bordered
-          ? isReverse ? "bg-secondary-content" : "bg-secondary"
-          : bgLayout
-      } ${bordered ? "p-4 lg:p-16" : "p-0"}`}
+      class="bg-transparent p-0"
     >
-      {(!layout?.content?.alignment ||
-        layout?.content?.alignment === "Center") && (
-        <div
-          class={`container flex flex-col rounded p-4 gap-6 lg:p-16 lg:gap-12 ${bgLayout}`}
+      <div
+          class="container flex flex-col rounded p-4 gap-6 lg:p-16 lg:gap-12 bg-transparent"
         >
-          {headerLayout}
-          <div class="flex justify-center">
-            {formLayout}
-          </div>
+        {headerLayout}
+        <div class="flex justify-center">
+          {formLayout}
         </div>
-      )}
-      {layout?.content?.alignment === "Left" && (
-        <div
-          class={`container flex flex-col rounded p-4 gap-6 lg:p-16 lg:gap-12 ${bgLayout}`}
-        >
-          {headerLayout}
-          <div class="flex justify-start">
-            {formLayout}
-          </div>
-        </div>
-      )}
-      {layout?.content?.alignment === "Right" && (
-        <div
-          class={`container flex flex-col rounded justify-between lg:flex-row p-4 gap-6 lg:p-16 lg:gap-12 ${bgLayout}`}
-        >
-          {headerLayout}
-          <div class="flex justify-center">
-            {formLayout}
-          </div>
-        </div>
-      )}
+      </div>
     </div>
   );
 }
diff --git a/sections/Social/InstagramPosts.tsx b/sections/Social/InstagramPosts.tsx
index f0872d79..0c2de79e 100644
--- a/sections/Social/InstagramPosts.tsx
+++ b/sections/Social/InstagramPosts.tsx
@@ -1,9 +1,7 @@
 import type { SectionProps } from "deco/mod.ts";
 import Image from "apps/website/components/Image.tsx";
-import Header from "../../components/ui/SectionHeader.tsx";
 
 export interface layout {
-  headerAlignment?: "center" | "left";
   /** @description Default is 12 */
   numberOfPosts?: number;
   /** @description Up to 6. Default is 4 */
@@ -72,12 +70,9 @@ export default function InstagramPosts({
 }: SectionProps<typeof loader>) {
   return (
     <div class="w-full container px-4 py-8 flex flex-col gap-14 lg:gap-20 lg:py-10 lg:px-0">
-      <Header
-        title={title}
-        description={description}
-        alignment={layout?.headerAlignment || "center"}
-      />
-      <div class="hidden lg:grid-cols-1 lg:grid-cols-2 lg:grid-cols-3 lg:grid-cols-4 lg:grid-cols-5 lg:grid-cols-6">
+      <div class="flex flex-col gap-2">
+        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <p class="text-center">{description}</p>
       </div>
       <div
         class={`grid grid-cols-2 lg:grid-cols-${

From 4ed64112a2f32f5c45be48445b315d796c544de9 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 16 Apr 2024 23:42:39 -0300
Subject: [PATCH 2/6] improve footer

---
 components/footer/Footer.tsx              | 236 +++-------------------
 components/product/ProductShelf.tsx       |   4 +-
 components/product/ProductShelfTabbed.tsx |   4 +-
 sections/Category/CategoryGrid.tsx        |   6 +-
 sections/Category/CategoryList.tsx        |   6 +-
 sections/Content/Benefits.tsx             |  16 +-
 sections/Content/BlogPosts.tsx            |   8 +-
 sections/Content/Faq.tsx                  |  25 ++-
 sections/Content/Logos.tsx                |   4 +-
 sections/Content/Testimonials.tsx         |   4 +-
 sections/Images/ImageGallery.tsx          |   4 +-
 sections/Newsletter/Newsletter.tsx        |  15 +-
 sections/Social/InstagramPosts.tsx        |   4 +-
 13 files changed, 92 insertions(+), 244 deletions(-)

diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
index 5b8e13fc..b463ab78 100644
--- a/components/footer/Footer.tsx
+++ b/components/footer/Footer.tsx
@@ -56,32 +56,6 @@ export interface NewsletterForm {
   helpText?: string;
 }
 
-export interface Layout {
-  backgroundColor?:
-    | "Primary"
-    | "Secondary"
-    | "Accent"
-    | "Base 100"
-    | "Base 100 inverted";
-  variation?:
-    | "Variation 1"
-    | "Variation 2"
-    | "Variation 3"
-    | "Variation 4"
-    | "Variation 5";
-  hide?: {
-    logo?: boolean;
-    newsletter?: boolean;
-    sectionLinks?: boolean;
-    socialLinks?: boolean;
-    paymentMethods?: boolean;
-    mobileApps?: boolean;
-    regionOptions?: boolean;
-    extraLinks?: boolean;
-    backToTheTop?: boolean;
-  };
-}
-
 export interface Props {
   logo?: {
     image: ImageWidget;
@@ -108,17 +82,8 @@ export interface Props {
   backToTheTop?: {
     text?: string;
   };
-  layout?: Layout;
 }
 
-const LAYOUT = {
-  "Primary": "bg-primary text-primary-content",
-  "Secondary": "bg-secondary text-secondary-content",
-  "Accent": "bg-accent text-accent-content",
-  "Base 100": "bg-base-100 text-base-content",
-  "Base 100 inverted": "bg-base-content text-base-100",
-};
-
 function Footer({
   logo,
   newsletter = {
@@ -170,190 +135,53 @@ function Footer({
   mobileApps = { apple: "/", android: "/" },
   regionOptions = { currency: [], language: [] },
   extraLinks = [],
-  backToTheTop,
-  layout = {
-    backgroundColor: "Primary",
-    variation: "Variation 1",
-    hide: {
-      logo: false,
-      newsletter: false,
-      sectionLinks: false,
-      socialLinks: false,
-      paymentMethods: false,
-      mobileApps: false,
-      regionOptions: false,
-      extraLinks: false,
-      backToTheTop: false,
-    },
-  },
+  backToTheTop
 }: Props) {
-  const _logo = layout?.hide?.logo ? <></> : <Logo logo={logo} />;
-  const _newsletter = layout?.hide?.newsletter ? <></> : (
-    <Newsletter
-      content={newsletter}
-      layout={{
-        tiled: layout?.variation == "Variation 4" ||
-          layout?.variation == "Variation 5",
-      }}
-    />
-  );
-  const _sectionLinks = layout?.hide?.sectionLinks ? <></> : (
-    <FooterItems
-      sections={sections}
-      justify={layout?.variation == "Variation 2" ||
-        layout?.variation == "Variation 3"}
-    />
-  );
-  const _social = layout?.hide?.socialLinks
-    ? <></>
-    : <Social content={social} vertical={layout?.variation == "Variation 3"} />;
-  const _payments = layout?.hide?.paymentMethods
-    ? <></>
-    : <PaymentMethods content={payments} />;
-  const _apps = layout?.hide?.mobileApps
-    ? <></>
-    : <MobileApps content={mobileApps} />;
-  const _region = layout?.hide?.regionOptions
-    ? <></>
-    : <RegionSelector content={regionOptions} />;
-  const _links = layout?.hide?.extraLinks
-    ? <></>
-    : <ExtraLinks content={extraLinks} />;
+  const _logo = <Logo logo={logo} />;
+  const _newsletter = <Newsletter
+    content={newsletter}
+  />
+  const _sectionLinks = <FooterItems
+    sections={sections}
+    justify={false}
+  />
+  const _social = <Social content={social}/>;
+  const _payments = <PaymentMethods content={payments} />;
+  const _apps = <MobileApps content={mobileApps} />;
+  const _region = <RegionSelector content={regionOptions} />;
+  const _links = <ExtraLinks content={extraLinks} />;
 
   return (
     <footer
       class={clx(
         "w-full flex flex-col pt-10 pb-2 md:pb-10 gap-10",
-        LAYOUT[layout?.backgroundColor ?? "Primary"],
+        "bg-primary text-primary-content",
       )}
     >
       <div class="lg:container mx-6 lg:mx-auto">
-        {(!layout?.variation || layout?.variation == "Variation 1") && (
-          <div class="flex flex-col gap-10">
-            <div class="flex flex-col md:flex-row md:justify-between md:flex-wrap lg:flex-nowrap gap-8 lg:gap-12">
-              {_logo}
-              {_sectionLinks}
-              {_newsletter}
-            </div>
-            <Divider />
-            <div class="flex flex-col md:flex-row gap-10 md:gap-14 md:items-end">
-              {_payments}
-              {_social}
-              <div class="flex flex-col lg:flex-row gap-10 lg:gap-14 lg:items-end">
-                {_apps}
-                {_region}
-              </div>
-            </div>
-            <Divider />
-            <div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
-              <PoweredByDeco />
-              {_links}
-            </div>
-          </div>
-        )}
-        {layout?.variation == "Variation 2" && (
-          <div class="flex flex-col gap-10">
-            <div class="flex flex-col md:flex-row gap-10">
-              <div class="flex flex-col gap-10 lg:w-1/2">
-                {_logo}
-                {_social}
-                {_payments}
-                {_apps}
-                {_region}
-              </div>
-              <div class="flex flex-col gap-10 lg:gap-20 lg:w-1/2 lg:pr-10">
-                {_newsletter}
-                {_sectionLinks}
-              </div>
-            </div>
-            <Divider />
-            <div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
-              <PoweredByDeco />
-              {_links}
-            </div>
-          </div>
-        )}
-        {layout?.variation == "Variation 3" && (
-          <div class="flex flex-col gap-10">
+        <div class="flex flex-col gap-10">
+          <div class="flex flex-col md:flex-row md:justify-between md:flex-wrap lg:flex-nowrap gap-8 lg:gap-12">
             {_logo}
-            <div class="flex flex-col lg:flex-row gap-14">
-              <div class="flex flex-col md:flex-row lg:flex-col md:justify-between lg:justify-normal gap-10 lg:w-2/5">
-                {_newsletter}
-                <div class="flex flex-col gap-10">
-                  {_payments}
-                  {_apps}
-                </div>
-              </div>
-              <div class="flex flex-col gap-10 lg:gap-20 lg:w-3/5 lg:items-end">
-                <div class="flex flex-col md:flex-row gap-10">
-                  {_sectionLinks}
-                  {_social}
-                </div>
-                {_region}
-              </div>
-            </div>
-            <Divider />
-            <div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
-              <PoweredByDeco />
-              {_links}
-            </div>
-          </div>
-        )}
-        {layout?.variation == "Variation 4" && (
-          <div class="flex flex-col gap-10">
+            {_sectionLinks}
             {_newsletter}
-            {layout?.hide?.newsletter ? <></> : <Divider />}
-            <div class="flex flex-col lg:flex-row gap-10 lg:gap-20 lg:justify-between">
-              {_sectionLinks}
-              <div class="flex flex-col md:flex-row lg:flex-col gap-10 lg:gap-10 lg:w-2/5 lg:pl-10">
-                <div class="flex flex-col md:flex-row gap-10 lg:gap-20">
-                  <div class="lg:flex-auto">
-                    {_payments}
-                  </div>
-                  <div class="lg:flex-auto">
-                    {_social}
-                  </div>
-                </div>
-                <div class="flex flex-col gap-10 lg:gap-10">
-                  {_region}
-                  {_apps}
-                </div>
-              </div>
-            </div>
-            <Divider />
-            <div class="flex flex-col md:flex-row md:justify-between gap-10 md:items-center">
-              {_logo}
-              <PoweredByDeco />
-            </div>
           </div>
-        )}
-        {layout?.variation == "Variation 5" && (
-          <div class="flex flex-col gap-10">
-            {_newsletter}
-            {layout?.hide?.newsletter ? <></> : <Divider />}
-            {_logo}
-            <div class="flex flex-col md:flex-row gap-10 lg:gap-20 md:justify-between">
-              {_sectionLinks}
-              <div class="flex flex-col gap-10 md:w-2/5 lg:pl-10">
-                {_payments}
-                {_social}
-                {_apps}
-              </div>
-            </div>
-            <Divider />
-            <div class="flex flex-col-reverse md:flex-row md:justify-between gap-10 md:items-center">
-              <PoweredByDeco />
-              <div class="flex flex-col md:flex-row gap-10 md:items-center">
-                {_links}
-                {_region}
-              </div>
+          <Divider />
+          <div class="flex flex-col md:flex-row gap-10 md:gap-14 md:items-end">
+            {_payments}
+            {_social}
+            <div class="flex flex-col lg:flex-row gap-10 lg:gap-14 lg:items-end">
+              {_apps}
+              {_region}
             </div>
           </div>
-        )}
+          <Divider />
+          <div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
+            <PoweredByDeco />
+            {_links}
+          </div>
+        </div>
       </div>
-      {layout?.hide?.backToTheTop
-        ? <></>
-        : <BackToTop content={backToTheTop?.text} />}
+      <BackToTop content={backToTheTop?.text} />
     </footer>
   );
 }
diff --git a/components/product/ProductShelf.tsx b/components/product/ProductShelf.tsx
index a03812c5..b07c32be 100644
--- a/components/product/ProductShelf.tsx
+++ b/components/product/ProductShelf.tsx
@@ -53,7 +53,9 @@ function ProductShelf({
   return (
     <div class="w-full container py-8 flex flex-col gap-6 lg:py-10">
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {title}
+        </h2>
         <p class="text-center">{description}</p>
       </div>
 
diff --git a/components/product/ProductShelfTabbed.tsx b/components/product/ProductShelfTabbed.tsx
index e3409e8d..4da31a15 100644
--- a/components/product/ProductShelfTabbed.tsx
+++ b/components/product/ProductShelfTabbed.tsx
@@ -43,7 +43,9 @@ function TabbedProductShelf({
   return (
     <div class="w-full container  py-8 flex flex-col gap-8 lg:gap-12 lg:py-10">
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {title}
+        </h2>
         <p class="text-center">{description}</p>
       </div>
 
diff --git a/sections/Category/CategoryGrid.tsx b/sections/Category/CategoryGrid.tsx
index aba093d8..a723a0b6 100644
--- a/sections/Category/CategoryGrid.tsx
+++ b/sections/Category/CategoryGrid.tsx
@@ -82,9 +82,11 @@ function CategoryGrid(props: Props) {
     <div
       id={id}
       class="container mt-16"
-    > 
+    >
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{header.title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {header.title}
+        </h2>
         <p class="text-base-content text-center">{header.description}</p>
       </div>
 
diff --git a/sections/Category/CategoryList.tsx b/sections/Category/CategoryList.tsx
index ea3c24f9..49ade28a 100644
--- a/sections/Category/CategoryList.tsx
+++ b/sections/Category/CategoryList.tsx
@@ -116,9 +116,11 @@ function CategoryList(props: Props) {
     <div
       id={id}
       class="container py-8 flex flex-col gap-8 lg:gap-10 text-base-content"
-    > 
+    >
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{header.title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {header.title}
+        </h2>
         <p class="text-base-content text-center">{header.description}</p>
       </div>
 
diff --git a/sections/Content/Benefits.tsx b/sections/Content/Benefits.tsx
index dc6e7e55..f4abf67d 100644
--- a/sections/Content/Benefits.tsx
+++ b/sections/Content/Benefits.tsx
@@ -49,7 +49,9 @@ export default function Benefits(
 
     return (
       <div
-        class={`flex gap-4 ${showDivider ? "pb-4 lg:pr-8 lg:border-r lg:border-b-0" : ""}`}
+        class={`flex gap-4 ${
+          showDivider ? "pb-4 lg:pr-8 lg:border-r lg:border-b-0" : ""
+        }`}
       >
         <div class="flex-none">
           <Icon
@@ -62,14 +64,10 @@ export default function Benefits(
           />
         </div>
         <div class="flex-auto flex flex-col gap-1 lg:gap-2">
-          <div
-            class="text-base lg:text-xl leading-7 text-base-content"
-          >
+          <div class="text-base lg:text-xl leading-7 text-base-content">
             {benefit.label}
           </div>
-          <p
-            class="text-sm leading-5 text-neutral"
-          >
+          <p class="text-sm leading-5 text-neutral">
             {benefit.description}
           </p>
         </div>
@@ -80,7 +78,9 @@ export default function Benefits(
   return (
     <div class="w-full container px-4 py-8 flex flex-col gap-8 lg:gap-10 lg:py-10 lg:px-0">
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {title}
+        </h2>
         <p class="text-center">{description}</p>
       </div>
       <div class="w-full flex justify-center">
diff --git a/sections/Content/BlogPosts.tsx b/sections/Content/BlogPosts.tsx
index dfad08af..9817957b 100644
--- a/sections/Content/BlogPosts.tsx
+++ b/sections/Content/BlogPosts.tsx
@@ -119,9 +119,11 @@ function BlogPosts({
   return (
     <div class="w-full container py-8 flex flex-col gap-6 pb-16">
       <div class="px-9">
-       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
-      </div>
+        <div class="flex flex-col gap-2">
+          <h2 class="text-base-content text-center text-3xl font-semibold">
+            {title}
+          </h2>
+        </div>
       </div>
       <div
         id={id}
diff --git a/sections/Content/Faq.tsx b/sections/Content/Faq.tsx
index d10882ad..a8cb7e6e 100644
--- a/sections/Content/Faq.tsx
+++ b/sections/Content/Faq.tsx
@@ -1,4 +1,3 @@
-
 export interface Question {
   question: string;
   /** @format html */
@@ -97,7 +96,9 @@ export default function FAQ(props: Props) {
         <div class="w-full container px-4 py-8 flex flex-col gap-4 lg:gap-8 lg:py-10 lg:px-40">
           <div class="flex flex-col gap-8 lg:gap-10">
             <div class="flex flex-col gap-2">
-              <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+              <h2 class="text-base-content text-center text-3xl font-semibold">
+                {title}
+              </h2>
               <p class="text-center">{description}</p>
             </div>
             <div class="join join-vertical w-full">
@@ -112,10 +113,12 @@ export default function FAQ(props: Props) {
       {layout?.variation === "Full" && (
         <div class="w-full container px-4 py-8 flex flex-col gap-4 lg:gap-8 lg:py-10 lg:px-0">
           <div class="flex flex-col gap-8 lg:gap-10">
-          <div class="flex flex-col gap-2">
-            <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
-            <p class="text-center">{description}</p>
-          </div>
+            <div class="flex flex-col gap-2">
+              <h2 class="text-base-content text-center text-3xl font-semibold">
+                {title}
+              </h2>
+              <p class="text-center">{description}</p>
+            </div>
             <div class="join join-vertical w-full">
               {questions.map((question) => <Question {...question} />)}
             </div>
@@ -128,10 +131,12 @@ export default function FAQ(props: Props) {
       {layout?.variation === "Side to side" && (
         <div class="w-full container px-4 py-8 grid gap-8 grid-flow-row grid-cols-1 lg:grid-flow-col lg:grid-cols-2 lg:grid-rows-2 lg:py-10 lg:px-0">
           <div class="order-1 lg:order-1">
-          <div class="flex flex-col gap-2">
-            <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
-            <p class="text-center">{description}</p>
-          </div>
+            <div class="flex flex-col gap-2">
+              <h2 class="text-base-content text-center text-3xl font-semibold">
+                {title}
+              </h2>
+              <p class="text-center">{description}</p>
+            </div>
           </div>
           <div class="order-2 lg:order-3 lg:row-span-2">
             <div class="join join-vertical">
diff --git a/sections/Content/Logos.tsx b/sections/Content/Logos.tsx
index 4b399d38..3a90fa93 100644
--- a/sections/Content/Logos.tsx
+++ b/sections/Content/Logos.tsx
@@ -43,7 +43,9 @@ function Logos(props: Props) {
   return (
     <div class="w-full container px-4 py-8 flex flex-col gap-8 lg:gap-12 lg:py-10 lg:px-0">
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {title}
+        </h2>
         <p class="text-center">{description}</p>
       </div>
       <div class="w-full text-center items-center">
diff --git a/sections/Content/Testimonials.tsx b/sections/Content/Testimonials.tsx
index 316746af..b29f9293 100644
--- a/sections/Content/Testimonials.tsx
+++ b/sections/Content/Testimonials.tsx
@@ -132,7 +132,9 @@ export default function Testimonials(
   return (
     <div class="w-full container px-4 py-8 flex flex-col gap-14 lg:gap-20 lg:py-10 lg:px-0">
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {title}
+        </h2>
         <p class="text-center">{description}</p>
       </div>
 
diff --git a/sections/Images/ImageGallery.tsx b/sections/Images/ImageGallery.tsx
index 015ec45e..9752ba3b 100644
--- a/sections/Images/ImageGallery.tsx
+++ b/sections/Images/ImageGallery.tsx
@@ -173,7 +173,9 @@ export default function Gallery(props: Props) {
   return (
     <section class="container px-4 py-8 flex flex-col gap-8 lg:gap-10 lg:py-10 lg:px-0">
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {title}
+        </h2>
         <p class="text-center">{description}</p>
       </div>
       <ul class="grid grid-flow-col grid-cols-2 grid-rows-6 gap-4 list-none">
diff --git a/sections/Newsletter/Newsletter.tsx b/sections/Newsletter/Newsletter.tsx
index 476b97fe..fe376268 100644
--- a/sections/Newsletter/Newsletter.tsx
+++ b/sections/Newsletter/Newsletter.tsx
@@ -1,4 +1,3 @@
-
 export interface Form {
   placeholder?: string;
   buttonText?: string;
@@ -21,7 +20,7 @@ const DEFAULT_PROPS: Props = {
     buttonText: "Inscrever",
     helpText:
       'Ao se inscrever, você concorda com nossa <a class="link" href="/politica-de-privacidade">Política de privacidade</a>.',
-  }
+  },
 };
 
 export default function Newsletter(props: Props) {
@@ -29,7 +28,9 @@ export default function Newsletter(props: Props) {
 
   const headerLayout = (
     <div class="flex flex-col gap-2">
-      <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+      <h2 class="text-base-content text-center text-3xl font-semibold">
+        {title}
+      </h2>
       <p class="text-center">{description}</p>
     </div>
   );
@@ -59,12 +60,8 @@ export default function Newsletter(props: Props) {
   );
 
   return (
-    <div
-      class="bg-transparent p-0"
-    >
-      <div
-          class="container flex flex-col rounded p-4 gap-6 lg:p-16 lg:gap-12 bg-transparent"
-        >
+    <div class="bg-transparent p-0">
+      <div class="container flex flex-col rounded p-4 gap-6 lg:p-16 lg:gap-12 bg-transparent">
         {headerLayout}
         <div class="flex justify-center">
           {formLayout}
diff --git a/sections/Social/InstagramPosts.tsx b/sections/Social/InstagramPosts.tsx
index 0c2de79e..235011eb 100644
--- a/sections/Social/InstagramPosts.tsx
+++ b/sections/Social/InstagramPosts.tsx
@@ -71,7 +71,9 @@ export default function InstagramPosts({
   return (
     <div class="w-full container px-4 py-8 flex flex-col gap-14 lg:gap-20 lg:py-10 lg:px-0">
       <div class="flex flex-col gap-2">
-        <h2 class="text-base-content text-center text-3xl font-semibold">{title}</h2>
+        <h2 class="text-base-content text-center text-3xl font-semibold">
+          {title}
+        </h2>
         <p class="text-center">{description}</p>
       </div>
       <div

From 8548f5372f22c035c0316e9433bc73bb121746e1 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 16 Apr 2024 23:42:47 -0300
Subject: [PATCH 3/6] fmt

---
 components/footer/Footer.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
index b463ab78..1cb5a058 100644
--- a/components/footer/Footer.tsx
+++ b/components/footer/Footer.tsx
@@ -135,17 +135,21 @@ function Footer({
   mobileApps = { apple: "/", android: "/" },
   regionOptions = { currency: [], language: [] },
   extraLinks = [],
-  backToTheTop
+  backToTheTop,
 }: Props) {
   const _logo = <Logo logo={logo} />;
-  const _newsletter = <Newsletter
-    content={newsletter}
-  />
-  const _sectionLinks = <FooterItems
-    sections={sections}
-    justify={false}
-  />
-  const _social = <Social content={social}/>;
+  const _newsletter = (
+    <Newsletter
+      content={newsletter}
+    />
+  );
+  const _sectionLinks = (
+    <FooterItems
+      sections={sections}
+      justify={false}
+    />
+  );
+  const _social = <Social content={social} />;
   const _payments = <PaymentMethods content={payments} />;
   const _apps = <MobileApps content={mobileApps} />;
   const _region = <RegionSelector content={regionOptions} />;

From ffea419d5301c9b37a06a6ea66a60fcf90cf48bd Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 16 Apr 2024 23:46:10 -0300
Subject: [PATCH 4/6] improve cookie consent

---
 components/ui/CookieConsent.tsx | 49 ++++-----------------------------
 1 file changed, 5 insertions(+), 44 deletions(-)

diff --git a/components/ui/CookieConsent.tsx b/components/ui/CookieConsent.tsx
index ee13d9c9..8dea77df 100644
--- a/components/ui/CookieConsent.tsx
+++ b/components/ui/CookieConsent.tsx
@@ -37,10 +37,6 @@ export interface Props {
     allowText: string;
     cancelText?: string;
   };
-  layout?: {
-    position?: "Expanded" | "Left" | "Center" | "Right";
-    content?: "Tiled" | "Piled up";
-  };
 }
 
 const DEFAULT_PROPS = {
@@ -55,15 +51,11 @@ const DEFAULT_PROPS = {
     allowText: "Aceitar",
     cancelText: "Fechar",
   },
-  layout: {
-    position: "Expanded",
-    content: "Tiled",
-  },
 };
 
 function CookieConsent(props: Props) {
   const id = useId();
-  const { title, text, policy, buttons, layout } = {
+  const { title, text, policy, buttons } = {
     ...DEFAULT_PROPS,
     ...props,
   };
@@ -72,40 +64,13 @@ function CookieConsent(props: Props) {
     <>
       <div
         id={id}
-        class={`
-          transform-gpu translate-y-[200%] transition fixed bottom-0 lg:bottom-2 w-screen z-50 lg:flex
-          ${layout?.position === "Left" ? "lg:justify-start" : ""}
-          ${layout?.position === "Center" ? "lg:justify-center" : ""}
-          ${layout?.position === "Right" ? "lg:justify-end" : ""}
-        `}
+        class="transform-gpu translate-y-[200%] transition fixed bottom-0 lg:bottom-2 w-screen z-50 lg:flex lg:justify-center"
       >
         <div
-          class={`
-          p-4 mx-4 my-2 flex flex-col gap-4 shadow bg-base-100 rounded border border-base-200 
-          ${
-            !layout?.position || layout?.position === "Expanded"
-              ? "lg:container lg:mx-auto"
-              : `
-            ${layout?.content === "Piled up" ? "lg:w-[480px]" : ""}
-            ${
-                !layout?.content || layout?.content === "Tiled"
-                  ? "lg:w-[520px]"
-                  : ""
-              }
-          `
-          }
-          ${
-            !layout?.content || layout?.content === "Tiled"
-              ? "lg:flex-row lg:items-end"
-              : ""
-          }
-          
-        `}
+          class="p-4 mx-4 my-2 flex flex-col gap-4 shadow bg-base-100 rounded border border-base-200 lg:w-[520px] lg:flex-row lg:items-end"
         >
           <div
-            class={`flex-auto flex flex-col gap-4 ${
-              !layout?.content || layout?.content === "Tiled" ? "lg:gap-2" : ""
-            }`}
+            class="flex-auto flex flex-col gap-4 lg:gap-2"
           >
             <h3 class="text-xl">{title}</h3>
             {text && (
@@ -121,11 +86,7 @@ function CookieConsent(props: Props) {
           </div>
 
           <div
-            class={`flex flex-col gap-2 ${
-              !layout?.position || layout?.position === "Expanded"
-                ? "lg:flex-row"
-                : ""
-            }`}
+            class={`flex flex-col gap-2 lg:flex-row`}
           >
             <button class="btn" data-button-cc-accept>
               {buttons.allowText}

From 3520dd783b15d045e33baef1c3cce6ee2a23b04a Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 16 Apr 2024 23:48:43 -0300
Subject: [PATCH 5/6] improve faq

---
 components/ui/CookieConsent.tsx |  8 +---
 sections/Content/Faq.tsx        | 71 ++++++---------------------------
 2 files changed, 14 insertions(+), 65 deletions(-)

diff --git a/components/ui/CookieConsent.tsx b/components/ui/CookieConsent.tsx
index 8dea77df..ad72a1a0 100644
--- a/components/ui/CookieConsent.tsx
+++ b/components/ui/CookieConsent.tsx
@@ -66,12 +66,8 @@ function CookieConsent(props: Props) {
         id={id}
         class="transform-gpu translate-y-[200%] transition fixed bottom-0 lg:bottom-2 w-screen z-50 lg:flex lg:justify-center"
       >
-        <div
-          class="p-4 mx-4 my-2 flex flex-col gap-4 shadow bg-base-100 rounded border border-base-200 lg:w-[520px] lg:flex-row lg:items-end"
-        >
-          <div
-            class="flex-auto flex flex-col gap-4 lg:gap-2"
-          >
+        <div class="p-4 mx-4 my-2 flex flex-col gap-4 shadow bg-base-100 rounded border border-base-200 lg:w-[520px] lg:flex-row lg:items-end">
+          <div class="flex-auto flex flex-col gap-4 lg:gap-2">
             <h3 class="text-xl">{title}</h3>
             {text && (
               <div
diff --git a/sections/Content/Faq.tsx b/sections/Content/Faq.tsx
index a8cb7e6e..60a62cb5 100644
--- a/sections/Content/Faq.tsx
+++ b/sections/Content/Faq.tsx
@@ -19,9 +19,6 @@ export interface Props {
   description?: string;
   questions?: Question[];
   contact?: Contact;
-  layout?: {
-    variation?: "Compact" | "Full" | "Side to side";
-  };
 }
 
 const DEFAULT_PROPS = {
@@ -87,67 +84,23 @@ export default function FAQ(props: Props) {
     title,
     description,
     contact,
-    layout,
   } = { ...DEFAULT_PROPS, ...props };
 
   return (
-    <>
-      {(!layout?.variation || layout?.variation === "Compact") && (
-        <div class="w-full container px-4 py-8 flex flex-col gap-4 lg:gap-8 lg:py-10 lg:px-40">
-          <div class="flex flex-col gap-8 lg:gap-10">
-            <div class="flex flex-col gap-2">
-              <h2 class="text-base-content text-center text-3xl font-semibold">
-                {title}
-              </h2>
-              <p class="text-center">{description}</p>
-            </div>
-            <div class="join join-vertical w-full">
-              {questions.map((question) => <Question {...question} />)}
-            </div>
-          </div>
-
-          <Contact {...contact} />
+    <div class="w-full container px-4 py-8 flex flex-col gap-4 lg:gap-8 lg:py-10 lg:px-40">
+      <div class="flex flex-col gap-8 lg:gap-10">
+        <div class="flex flex-col gap-2">
+          <h2 class="text-base-content text-center text-3xl font-semibold">
+            {title}
+          </h2>
+          <p class="text-center">{description}</p>
         </div>
-      )}
-
-      {layout?.variation === "Full" && (
-        <div class="w-full container px-4 py-8 flex flex-col gap-4 lg:gap-8 lg:py-10 lg:px-0">
-          <div class="flex flex-col gap-8 lg:gap-10">
-            <div class="flex flex-col gap-2">
-              <h2 class="text-base-content text-center text-3xl font-semibold">
-                {title}
-              </h2>
-              <p class="text-center">{description}</p>
-            </div>
-            <div class="join join-vertical w-full">
-              {questions.map((question) => <Question {...question} />)}
-            </div>
-          </div>
-
-          <Contact {...contact} />
+        <div class="join join-vertical w-full">
+          {questions.map((question) => <Question {...question} />)}
         </div>
-      )}
+      </div>
 
-      {layout?.variation === "Side to side" && (
-        <div class="w-full container px-4 py-8 grid gap-8 grid-flow-row grid-cols-1 lg:grid-flow-col lg:grid-cols-2 lg:grid-rows-2 lg:py-10 lg:px-0">
-          <div class="order-1 lg:order-1">
-            <div class="flex flex-col gap-2">
-              <h2 class="text-base-content text-center text-3xl font-semibold">
-                {title}
-              </h2>
-              <p class="text-center">{description}</p>
-            </div>
-          </div>
-          <div class="order-2 lg:order-3 lg:row-span-2">
-            <div class="join join-vertical">
-              {questions.map((question) => <Question {...question} />)}
-            </div>
-          </div>
-          <div class="order-3 lg:order-2">
-            <Contact {...contact} />
-          </div>
-        </div>
-      )}
-    </>
+      <Contact {...contact} />
+    </div>
   );
 }

From cff66e7d9192edeec15f91143280fafad2ec1112 Mon Sep 17 00:00:00 2001
From: guitavano <tavano62@gmail.com>
Date: Tue, 16 Apr 2024 23:53:21 -0300
Subject: [PATCH 6/6] improve category card list and banner

---
 sections/Category/CategoryGrid.tsx  | 22 +-----------------
 sections/Category/CategoryList.tsx  | 35 +++++------------------------
 sections/Images/ShoppableBanner.tsx | 24 +++-----------------
 3 files changed, 9 insertions(+), 72 deletions(-)

diff --git a/sections/Category/CategoryGrid.tsx b/sections/Category/CategoryGrid.tsx
index a723a0b6..fbdee6f1 100644
--- a/sections/Category/CategoryGrid.tsx
+++ b/sections/Category/CategoryGrid.tsx
@@ -23,12 +23,6 @@ export interface Props {
     description?: string;
   };
   list?: CategoryGridProps[];
-  layout?: {
-    categoryCard?: {
-      textPosition?: "top" | "bottom";
-      textAlignment?: "center" | "left";
-    };
-  };
 }
 
 const DEFAULT_LIST = [
@@ -70,12 +64,6 @@ function CategoryGrid(props: Props) {
       description: "Your description",
     },
     list = DEFAULT_LIST,
-    layout = {
-      categoryCard: {
-        textPosition: "bottom",
-        textAlignment: "left",
-      },
-    },
   } = props;
 
   return (
@@ -97,15 +85,7 @@ function CategoryGrid(props: Props) {
           <div>
             <a
               href={href}
-              class={`relative flex ${
-                layout.categoryCard?.textAlignment === "left"
-                  ? "justify-start"
-                  : "justify-start items-center"
-              } ${
-                layout.categoryCard?.textPosition === "bottom"
-                  ? "flex-col-reverse"
-                  : "flex-col"
-              }`}
+              class="relative flex justify-start items-center flex-col"
             >
               {image &&
                 (
diff --git a/sections/Category/CategoryList.tsx b/sections/Category/CategoryList.tsx
index 49ade28a..acd38aa2 100644
--- a/sections/Category/CategoryList.tsx
+++ b/sections/Category/CategoryList.tsx
@@ -19,12 +19,6 @@ export interface Props {
     description?: string;
   };
   list?: Category[];
-  layout?: {
-    categoryCard?: {
-      textPosition?: "top" | "bottom";
-      textAlignment?: "center" | "left";
-    };
-  };
 }
 
 function CardText(
@@ -104,12 +98,6 @@ function CategoryList(props: Props) {
       description: "",
     },
     list = DEFAULT_LIST,
-    layout = {
-      categoryCard: {
-        textPosition: "top",
-        textAlignment: "center",
-      },
-    },
   } = props;
 
   return (
@@ -137,15 +125,11 @@ function CategoryList(props: Props) {
               href={href}
               class="flex flex-col gap-4 lg:w-[280px] w-40 lg:h-auto"
             >
-              {layout.categoryCard?.textPosition === "top" &&
-                (
-                  <CardText
-                    tag={tag}
-                    label={label}
-                    description={description}
-                    alignment={layout?.categoryCard?.textAlignment}
-                  />
-                )}
+              <CardText
+                tag={tag}
+                label={label}
+                description={description}
+              />
               {image &&
                 (
                   <figure>
@@ -159,15 +143,6 @@ function CategoryList(props: Props) {
                     />
                   </figure>
                 )}
-              {layout.categoryCard?.textPosition === "bottom" &&
-                (
-                  <CardText
-                    tag={tag}
-                    label={label}
-                    description={description}
-                    alignment={layout?.categoryCard?.textAlignment}
-                  />
-                )}
             </a>
             {buttonText &&
               <a href={href} class="btn">{buttonText}</a>}
diff --git a/sections/Images/ShoppableBanner.tsx b/sections/Images/ShoppableBanner.tsx
index c6bb5667..32742185 100644
--- a/sections/Images/ShoppableBanner.tsx
+++ b/sections/Images/ShoppableBanner.tsx
@@ -13,20 +13,11 @@ export interface Props {
 
   title?: {
     content?: string;
-    layout?: {
-      position?: "justify-start" | "justify-center" | "justify-end";
-    };
   };
   text?: {
     content?: string;
-    layout?: {
-      position?: "text-center" | "text-left" | "text-right";
-    };
   };
   link?: {
-    layout?: {
-      position?: "justify-start" | "justify-center" | "justify-end";
-    };
     text: string;
     href: string;
   };
@@ -47,21 +38,12 @@ export interface Pin {
 
 const DEFAULT_PROPS: Props = {
   title: {
-    layout: {
-      position: "justify-center",
-    },
     content: "Collection",
   },
   text: {
-    layout: {
-      position: "text-center",
-    },
     content: "Your text",
   },
   link: {
-    layout: {
-      position: "justify-center",
-    },
     href: "#",
     text: "Text link",
   },
@@ -128,13 +110,13 @@ export default function ShoppableBanner(props: Props) {
           ))}
         </figure>
         <div class="flex flex-col justify-center gap-6 py-20 px-8 bg-neutral-content">
-          <h2 class={`card-title flex ${title?.layout?.position}`}>
+          <h2 class="card-title flex justify-center">
             {title?.content}
           </h2>
-          <p class={`text-base-content ${text?.layout?.position}`}>
+          <p class="text-base-content justify-center">
             {text?.content}
           </p>
-          <div class={`card-actions ${link?.layout?.position}`}>
+          <div class="card-actions $justify-center">
             <a class="underline" href={link?.href}>{link?.text}</a>
           </div>
         </div>