diff --git a/components/cards/IconCard.tsx b/components/cards/IconCard.tsx
new file mode 100644
index 00000000..e889461f
--- /dev/null
+++ b/components/cards/IconCard.tsx
@@ -0,0 +1,88 @@
+import Icon, { AvailableIcons } from "$store/components/ui/Icon.tsx";
+import { clx } from "$store/sdk/clx.ts";
+import {
+  borderColorClasses2,
+  BorderColors,
+  BorderRadius,
+  borderRadiusClasses,
+  BorderWidth,
+  borderWidthClasses,
+  colorClasses,
+  Colors,
+  flex,
+} from "../../constants.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+
+export interface Bg {
+  bgColor?: Colors;
+  bgImage?: ImageWidget;
+}
+
+export interface Props {
+  label: string;
+  icon: AvailableIcons;
+  description: string;
+  layout?: {
+    iconPosition?: "Top" | "Left";
+  };
+  style?: {
+    background?: Bg;
+    border?: {
+      width?: BorderWidth;
+      color?: BorderColors;
+      radius?: BorderRadius;
+    };
+  };
+}
+
+export default function Card({
+  icon = "Deco",
+  label = "Item",
+  description = "A text describing this item",
+  layout,
+  style,
+}: Props) {
+  const bgColor = style?.background?.bgColor || "Primary";
+
+  const hasPadding = (bgColor && bgColor !== "Transparent") ||
+    (style?.border?.width && style.border.width !== "None");
+
+  return (
+    <div
+      class={clx(
+        "flex gap-3",
+        layout?.iconPosition === "Left" ? "flex-row" : "flex-col",
+        bgColor && colorClasses[bgColor],
+        hasPadding && "p-4 lg:p-8",
+        style?.border?.color && borderColorClasses2[style.border.color],
+        style?.border?.width && borderWidthClasses[style.border.width],
+        style?.border?.radius && borderRadiusClasses[style.border.radius],
+        style?.background?.bgImage ? "bg-cover bg-center" : "",
+      )}
+      style={{
+        "background-image": style?.background?.bgImage
+          ? `url(${style?.background?.bgImage})`
+          : "",
+      }}
+    >
+      <div class="flex-none">
+        <Icon
+          id={icon}
+          width={36}
+          height={36}
+          strokeWidth={0.01}
+          fill="currentColor"
+          class="text-primary-content"
+        />
+      </div>
+      <div class="flex-auto flex flex-col gap-1 lg:gap-2">
+        <div class="text-base lg:text-xl leading-7">
+          {label}
+        </div>
+        <p class="text-sm leading-5">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/components/cards/IconCardsCarousel.tsx b/components/cards/IconCardsCarousel.tsx
new file mode 100644
index 00000000..8c81cdd3
--- /dev/null
+++ b/components/cards/IconCardsCarousel.tsx
@@ -0,0 +1,22 @@
+import Card, { Props as CardProps } from "$store/components/cards/IconCard.tsx";
+import Carousel, {
+  Props as CarouselProps,
+} from "$store/components/layout/Carousel.tsx";
+
+export interface Props {
+  placeholderItems?: number;
+  items?: CardProps[];
+  slider?: CarouselProps;
+}
+
+export default function Section({ placeholderItems, items, slider }: Props) {
+  const ITEMS: CardProps[] = new Array(placeholderItems || 10).fill({});
+  const allItems = !items || items?.length === 0 ? ITEMS : items;
+
+  return (
+    <Carousel
+      {...slider}
+      children={allItems.map((item) => <Card {...item} />)}
+    />
+  );
+}
diff --git a/components/cards/ImageCard.tsx b/components/cards/ImageCard.tsx
new file mode 100644
index 00000000..99835067
--- /dev/null
+++ b/components/cards/ImageCard.tsx
@@ -0,0 +1,110 @@
+import { ButtonType, getButtonClasses } from "../../constants.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
+
+interface Style {
+  /** @description In px */
+  width?: number;
+  textPosition?: "Top" | "Bottom";
+  textAlignment?: "Center" | "Left";
+  button?: ButtonType;
+}
+
+/** @titleBy label */
+export interface Props {
+  image?: ImageWidget;
+  label: string;
+  description?: string;
+  tag?: string;
+  href?: string;
+  buttonText?: string;
+  style?: Style;
+}
+
+function CardText({
+  label = "Item",
+  description = "A text describing this item",
+  tag = "Tag",
+  alignment,
+}: {
+  label?: string;
+  description?: string;
+  tag?: string;
+  alignment?: "Center" | "Left";
+}) {
+  return (
+    <div
+      class={`flex flex-col ${
+        !alignment || alignment === "Center" ? "items-center" : "items-start"
+      }`}
+    >
+      {tag && (
+        <div class="text-xs bg-primary text-primary-content py-1 px-2 rounded mb-2">
+          {tag}
+        </div>
+      )}
+      {label && <h3 class="text-xl">{label}</h3>}
+      {description && <div class="text-sm">{description}</div>}
+    </div>
+  );
+}
+
+function Card(
+  {
+    href,
+    tag,
+    label,
+    description,
+    buttonText = "Button",
+    style,
+    image =
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2753/b2278d2d-2270-482b-98d4-f09d5f05ba97",
+  }: Props,
+) {
+  const position = style?.textPosition === "Bottom" ? "Bottom" : "Top";
+  const alignment = style?.textAlignment === "Left" ? "Left" : "Center";
+  return (
+    <div
+      class="flex flex-col gap-4 justify-center"
+      style={{ width: style?.width || "auto" }}
+    >
+      <a href={href} class="flex flex-col gap-4 lg:w-full w-full lg:h-auto">
+        {position === "Top" && (
+          <CardText
+            tag={tag}
+            label={label}
+            description={description}
+            alignment={alignment}
+          />
+        )}
+        {image && (
+          <figure>
+            <Image
+              class="card"
+              src={image}
+              alt={description || label || tag}
+              width={160}
+              height={195}
+              loading="lazy"
+            />
+          </figure>
+        )}
+        {position === "Bottom" && (
+          <CardText
+            tag={tag}
+            label={label}
+            description={description}
+            alignment={alignment}
+          />
+        )}
+      </a>
+      {buttonText && (
+        <a href={href} class={getButtonClasses(style?.button || {})}>
+          {buttonText}
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default Card;
diff --git a/components/cards/ImageCardsCarousel.tsx b/components/cards/ImageCardsCarousel.tsx
new file mode 100644
index 00000000..e08e7e4c
--- /dev/null
+++ b/components/cards/ImageCardsCarousel.tsx
@@ -0,0 +1,21 @@
+import Card, { Props as CardProps } from "../../components/cards/ImageCard.tsx";
+import Carousel, { Props as CarouselProps } from "../layout/Carousel.tsx";
+
+export interface Props {
+  placeholderItems?: number;
+  items?: CardProps[];
+  slider?: CarouselProps;
+}
+
+export default function Section({ placeholderItems, items, slider }: Props) {
+  const ITEMS: CardProps[] = new Array(placeholderItems || 10).fill({});
+  const allItems = !items || items?.length === 0 ? ITEMS : items;
+
+  return (
+    <Carousel
+      layout={{ itemWidth: 200 }}
+      {...slider}
+      children={allItems.map((item) => <Card {...item} />)}
+    />
+  );
+}
diff --git a/components/layout/Carousel.tsx b/components/layout/Carousel.tsx
new file mode 100644
index 00000000..01d7aa71
--- /dev/null
+++ b/components/layout/Carousel.tsx
@@ -0,0 +1,132 @@
+import Icon from "$store/components/ui/Icon.tsx";
+import Slider from "$store/components/ui/Slider.tsx";
+import SliderJS from "$store/islands/SliderJS.tsx";
+import { clx } from "$store/sdk/clx.ts";
+import type { Section } from "deco/blocks/section.ts";
+import { ComponentChildren, toChildArray } from "preact";
+import { useId } from "preact/hooks";
+import { buttonClasses, ButtonColor, grid } from "../../constants.tsx";
+
+interface Layout {
+  /** @description For desktop in px. */
+  itemWidth?: number;
+  gap?: {
+    /** @default 2 */
+    mobile?: "1" | "2" | "4" | "8" | "12" | "16";
+    /** @default 4 */
+    desktop?: "1" | "2" | "4" | "8" | "12" | "16";
+  };
+  hide?: {
+    controls?: boolean;
+    indicators?: boolean;
+  };
+}
+
+/**
+ * @title Carousel
+ */
+export interface Props {
+  children?: ComponentChildren;
+  /** @description For automatic sliding in seconds. */
+  interval?: number;
+  layout?: Layout;
+  style?: {
+    controlsColor?: ButtonColor;
+    controlsOutline?: boolean;
+  };
+}
+
+function Section({ interval = 0, layout, style, children }: Props) {
+  const id = useId();
+  const items = toChildArray(children);
+
+  if (!items.length) {
+    return null;
+  }
+
+  const controlClx = clx(
+    buttonClasses[style?.controlsColor || "Default"],
+    style?.controlsOutline && "btn-outline",
+  );
+
+  return (
+    <>
+      <div
+        id={id}
+        class={clx(
+          "grid grid-rows-[1fr_48px_1fr_40px]",
+          !layout?.hide?.controls
+            ? "grid-cols-[48px_1fr_48px] sm:grid-cols-[48px_1fr_48px]"
+            : "grid-cols-[0_1fr_0]",
+        )}
+      >
+        <Slider
+          class={clx(
+            "relative carousel carousel-center col-start-2 col-end-2 row-start-1 row-end-4",
+            layout?.gap?.mobile
+              ? grid.gap.mobile[layout.gap.mobile]
+              : grid.gap.mobile[2],
+            layout?.gap?.desktop
+              ? grid.gap.desktop[layout.gap.desktop]
+              : grid.gap.mobile[4],
+          )}
+        >
+          {items?.map((item, index) => (
+            <Slider.Item
+              index={index}
+              class="carousel-item"
+              style={{ width: layout?.itemWidth || "auto" }}
+            >
+              {item}
+            </Slider.Item>
+          ))}
+        </Slider>
+
+        {!layout?.hide?.controls && (
+          <>
+            <div class="flex items-center justify-start z-10 col-start-1 row-start-2">
+              <Slider.PrevButton
+                class={clx(controlClx, "btn btn-circle btn-sm")}
+              >
+                <Icon
+                  class="text-base-content"
+                  size={24}
+                  id="ChevronLeft"
+                  strokeWidth={3}
+                />
+              </Slider.PrevButton>
+            </div>
+            <div class="flex items-center justify-end z-10 col-start-3 row-start-2">
+              <Slider.NextButton
+                class={clx(controlClx, "btn btn-circle btn-sm")}
+              >
+                <Icon
+                  class="text-base-content"
+                  size={24}
+                  id="ChevronRight"
+                  strokeWidth={3}
+                />
+              </Slider.NextButton>
+            </div>
+          </>
+        )}
+
+        {!layout?.hide?.indicators && (
+          <ul class="carousel items-end justify-center col-span-full gap-4 z-10 row-start-4">
+            {items?.map((_, index) => (
+              <li class="carousel-item">
+                <Slider.Dot index={index}>
+                  <div class="w-4 h-4 rounded-full group-disabled:bg-primary bg-transparent border-[1px] border-primary" />
+                </Slider.Dot>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <SliderJS rootId={id} interval={interval && interval * 1e3} infinite />
+      </div>
+    </>
+  );
+}
+
+export default Section;
diff --git a/components/minicart/vtex/Cart.tsx b/components/minicart/vtex/Cart.tsx
index 9cbc5019..f1bfcaf6 100644
--- a/components/minicart/vtex/Cart.tsx
+++ b/components/minicart/vtex/Cart.tsx
@@ -5,7 +5,8 @@ function Cart() {
   const { cart, loading, updateItems, addCouponsToCart } = useCart();
   const { items, totalizers } = cart.value ?? { items: [] };
   const total = totalizers?.find((item) => item.id === "Items")?.value || 0;
-  const discounts = (totalizers?.find((item) => item.id === "Discounts")?.value || 0) * -1;
+  const discounts =
+    (totalizers?.find((item) => item.id === "Discounts")?.value || 0) * -1;
   const locale = cart.value?.clientPreferencesData.locale ?? "pt-BR";
   const currency = cart.value?.storePreferencesData.currencyCode ?? "BRL";
   const coupon = cart.value?.marketingData?.coupon ?? undefined;
@@ -31,8 +32,7 @@ function Cart() {
       coupon={coupon}
       onAddCoupon={(text) => addCouponsToCart({ text })}
       onUpdateQuantity={(quantity, index) =>
-        updateItems({ orderItems: [{ index, quantity }] })
-      }
+        updateItems({ orderItems: [{ index, quantity }] })}
       itemToAnalyticsItem={(index) => {
         const item = items[index];
 
diff --git a/components/ui/Partners.tsx b/components/ui/Partners.tsx
new file mode 100644
index 00000000..b3565743
--- /dev/null
+++ b/components/ui/Partners.tsx
@@ -0,0 +1,77 @@
+import { useMemo } from "preact/hooks";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+
+export interface Image {
+  image: ImageWidget;
+  altText: string;
+}
+
+export interface Props {
+  title?: string;
+
+  rowImages?: ColumnImages[];
+}
+
+export interface ColumnImages {
+  colImages: Image[];
+}
+
+const IMAGES = [
+  {
+    altText: "deco",
+    image:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fe7cd8ba-c954-45d6-9282-ee7d8ca8e3c7",
+  },
+  {
+    altText: "deco",
+    image:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/637e8601-6b86-4979-aa97-68013a2a60fd",
+  },
+];
+
+function Partners(props: Props) {
+  const {
+    title,
+    rowImages,
+  } = props;
+  const list = useMemo(
+    () =>
+      rowImages && rowImages.length > 0
+        ? rowImages
+        : [{ colImages: Array(20).fill(null).map((_, i) => IMAGES[i % 2]) }],
+    [],
+  );
+
+  return (
+    <div class="w-full pb-16">
+      <div class="flex flex-col gap-10 lg:gap-16">
+        {title && <p class="text-[18px] font-bold text-center">{title}</p>}
+
+        <div class="w-full text-center items-center relative">
+          <div class="overflow-hidden pt-2 px-1">
+            {list.map(({ colImages }, index) => (
+              <div
+                class={`flex flex-row flex-nowrap w-full animate-walk text-white ${
+                  index > 0 && index < list.length - 1 ? "py-6" : "py-2"
+                } items-center gap-24`}
+                style={`animation-delay: ${300 * index}ms`}
+              >
+                {colImages.map((item: Image) => (
+                  <img
+                    key={index}
+                    src={item.image}
+                    alt={item.altText || ""}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+          <div class="gradient-right" />
+          <div class="gradient-left" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Partners;
diff --git a/components/ui/SectionHeader.tsx b/components/ui/SectionHeader.tsx
index acbfc9b0..2c6a93d8 100644
--- a/components/ui/SectionHeader.tsx
+++ b/components/ui/SectionHeader.tsx
@@ -1,8 +1,8 @@
-interface Props {
+export interface Props {
   title?: string;
   fontSize?: "Small" | "Normal" | "Large";
   description?: string;
-  alignment: "center" | "left";
+  alignment?: "center" | "left";
   colorReverse?: boolean;
 }
 
@@ -43,7 +43,9 @@ function Header(props: Props) {
                   class={`
                   leading-6 lg:leading-8
                   ${
-                    props.colorReverse ? "text-primary-content" : "text-neutral"
+                    props.colorReverse
+                      ? "text-primary-content"
+                      : "text-base-content"
                   }
                   ${fontSizeClasses[props.fontSize || "Normal"]}
                 `}
diff --git a/components/ui/SimpleImage.tsx b/components/ui/SimpleImage.tsx
new file mode 100644
index 00000000..8e989d95
--- /dev/null
+++ b/components/ui/SimpleImage.tsx
@@ -0,0 +1,72 @@
+import { Picture, Source } from "apps/website/components/Picture.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import { clx } from "../../sdk/clx.ts";
+
+export interface Props {
+  altText?: string;
+  position?: "Left" | "Right";
+  width?: "30%" | "50%" | "70%";
+  mobile?: ImageWidget;
+  desktop?: ImageWidget;
+}
+
+export default function SimpleImage({
+  altText = "Image",
+  position = "Left",
+  width,
+  mobile =
+    "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2753/b2278d2d-2270-482b-98d4-f09d5f05ba97",
+  desktop =
+    "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2753/b2278d2d-2270-482b-98d4-f09d5f05ba97",
+}: Props) {
+  const style = {
+    width: {
+      "30%": "lg:w-1/3",
+      "50%": "lg:w-1/2",
+      "70%": "lg:w-[70%]",
+    },
+  };
+
+  return (
+    <div
+      class={clx(
+        "flex-none",
+        width ? style.width[width] : style.width["30%"],
+      )}
+    >
+      <span
+        class={clx(
+          "hidden",
+          style.width["30%"],
+          style.width["50%"],
+          style.width["70%"],
+        )}
+      >
+      </span>
+      <figure class="relative">
+        <Picture>
+          <Source
+            media="(max-width: 767px)"
+            src={mobile}
+            width={150}
+            height={150}
+          />
+          <Source
+            media="(min-width: 768px)"
+            src={desktop ? desktop : mobile}
+            width={384}
+            height={227}
+          />
+          <img
+            class="w-full object-cover"
+            sizes="(max-width: 640px) 100vw, 30vw"
+            src={mobile}
+            alt={altText}
+            decoding="async"
+            loading="lazy"
+          />
+        </Picture>
+      </figure>
+    </div>
+  );
+}
diff --git a/manifest.gen.ts b/manifest.gen.ts
index cf879d88..c360bf65 100644
--- a/manifest.gen.ts
+++ b/manifest.gen.ts
@@ -17,38 +17,45 @@ import * as $$$$$$9 from "./sections/Layout/Container.tsx";
 import * as $$$$$$10 from "./sections/Layout/Grid.tsx";
 import * as $$$$$$11 from "./sections/Layout/Flex.tsx";
 import * as $$$$$$12 from "./sections/Layout/GridItem.tsx";
-import * as $$$$$$13 from "./sections/Animation/Animation.tsx";
-import * as $$$$$$14 from "./sections/Content/Hero.tsx";
-import * as $$$$$$15 from "./sections/Content/Features.tsx";
-import * as $$$$$$16 from "./sections/Content/BlogPosts.tsx";
-import * as $$$$$$17 from "./sections/Content/RichText.tsx";
-import * as $$$$$$18 from "./sections/Content/Testimonials.tsx";
-import * as $$$$$$19 from "./sections/Content/Logos.tsx";
-import * as $$$$$$20 from "./sections/Content/CallToAction.tsx";
-import * as $$$$$$21 from "./sections/Content/Table.tsx";
-import * as $$$$$$22 from "./sections/Content/Faq.tsx";
-import * as $$$$$$23 from "./sections/Content/Benefits.tsx";
-import * as $$$$$$24 from "./sections/Content/ImageSection.tsx";
-import * as $$$$$$25 from "./sections/Product/Wishlist.tsx";
-import * as $$$$$$26 from "./sections/Product/NotFoundChallenge.tsx";
-import * as $$$$$$27 from "./sections/Product/SearchResult.tsx";
-import * as $$$$$$28 from "./sections/Product/ProductInfo.tsx";
-import * as $$$$$$29 from "./sections/Product/ProductShelf.tsx";
-import * as $$$$$$30 from "./sections/Product/ImageGallerySlider.tsx";
-import * as $$$$$$31 from "./sections/Product/ImageGalleryFrontBack.tsx";
-import * as $$$$$$32 from "./sections/Product/ShelfWithImage.tsx";
-import * as $$$$$$33 from "./sections/Product/ProductShelfTabbed.tsx";
-import * as $$$$$$34 from "./sections/Product/NotFound.tsx";
-import * as $$$$$$35 from "./sections/Miscellaneous/CampaignTimer.tsx";
-import * as $$$$$$36 from "./sections/Miscellaneous/CookieConsent.tsx";
-import * as $$$$$$37 from "./sections/Miscellaneous/Slide.tsx";
-import * as $$$$$$38 from "./sections/Social/WhatsApp.tsx";
-import * as $$$$$$39 from "./sections/Social/InstagramPosts.tsx";
-import * as $$$$$$40 from "./sections/Theme/Theme.tsx";
-import * as $$$$$$41 from "./sections/Links/LinkTree.tsx";
-import * as $$$$$$42 from "./sections/Links/Shortcuts.tsx";
-import * as $$$$$$43 from "./sections/Newsletter/Newsletter.tsx";
-import * as $$$$$$44 from "./sections/Header/Header.tsx";
+import * as $$$$$$13 from "./sections/Cards/ImageCardsCarousel.tsx";
+import * as $$$$$$14 from "./sections/Cards/IconCardsCarouselWithImage.tsx";
+import * as $$$$$$15 from "./sections/Cards/ImageCardsCarouselWithImage.tsx";
+import * as $$$$$$16 from "./sections/Cards/IconCardsCarousel.tsx";
+import * as $$$$$$17 from "./sections/Animation/Animation.tsx";
+import * as $$$$$$18 from "./sections/Content/Hero.tsx";
+import * as $$$$$$19 from "./sections/Content/Features.tsx";
+import * as $$$$$$20 from "./sections/Content/Intro.tsx";
+import * as $$$$$$21 from "./sections/Content/BlogPosts.tsx";
+import * as $$$$$$22 from "./sections/Content/TextWithImage.tsx";
+import * as $$$$$$23 from "./sections/Content/RichText.tsx";
+import * as $$$$$$24 from "./sections/Content/Partners.tsx";
+import * as $$$$$$25 from "./sections/Content/Testimonials.tsx";
+import * as $$$$$$26 from "./sections/Content/Logos.tsx";
+import * as $$$$$$27 from "./sections/Content/CallToAction.tsx";
+import * as $$$$$$28 from "./sections/Content/Table.tsx";
+import * as $$$$$$29 from "./sections/Content/Faq.tsx";
+import * as $$$$$$30 from "./sections/Content/Benefits.tsx";
+import * as $$$$$$31 from "./sections/Content/ImageSection.tsx";
+import * as $$$$$$32 from "./sections/Product/Wishlist.tsx";
+import * as $$$$$$33 from "./sections/Product/NotFoundChallenge.tsx";
+import * as $$$$$$34 from "./sections/Product/SearchResult.tsx";
+import * as $$$$$$35 from "./sections/Product/ProductInfo.tsx";
+import * as $$$$$$36 from "./sections/Product/ProductShelf.tsx";
+import * as $$$$$$37 from "./sections/Product/ImageGallerySlider.tsx";
+import * as $$$$$$38 from "./sections/Product/ImageGalleryFrontBack.tsx";
+import * as $$$$$$39 from "./sections/Product/ShelfWithImage.tsx";
+import * as $$$$$$40 from "./sections/Product/ProductShelfTabbed.tsx";
+import * as $$$$$$41 from "./sections/Product/NotFound.tsx";
+import * as $$$$$$42 from "./sections/Miscellaneous/CampaignTimer.tsx";
+import * as $$$$$$43 from "./sections/Miscellaneous/CookieConsent.tsx";
+import * as $$$$$$44 from "./sections/Miscellaneous/Slide.tsx";
+import * as $$$$$$45 from "./sections/Social/WhatsApp.tsx";
+import * as $$$$$$46 from "./sections/Social/InstagramPosts.tsx";
+import * as $$$$$$47 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$48 from "./sections/Links/LinkTree.tsx";
+import * as $$$$$$49 from "./sections/Links/Shortcuts.tsx";
+import * as $$$$$$50 from "./sections/Newsletter/Newsletter.tsx";
+import * as $$$$$$51 from "./sections/Header/Header.tsx";
 import * as $$$$$$$$$$$0 from "./apps/decohub.ts";
 import * as $$$$$$$$$$$1 from "./apps/site.ts";
 
@@ -58,24 +65,33 @@ const manifest = {
     "deco-sites/storefront/loaders/List/Sections.tsx": $$$1,
   },
   "sections": {
-    "deco-sites/storefront/sections/Animation/Animation.tsx": $$$$$$13,
+    "deco-sites/storefront/sections/Animation/Animation.tsx": $$$$$$17,
+    "deco-sites/storefront/sections/Cards/IconCardsCarousel.tsx": $$$$$$16,
+    "deco-sites/storefront/sections/Cards/IconCardsCarouselWithImage.tsx":
+      $$$$$$14,
+    "deco-sites/storefront/sections/Cards/ImageCardsCarousel.tsx": $$$$$$13,
+    "deco-sites/storefront/sections/Cards/ImageCardsCarouselWithImage.tsx":
+      $$$$$$15,
     "deco-sites/storefront/sections/Category/CategoryBanner.tsx": $$$$$$2,
     "deco-sites/storefront/sections/Category/CategoryGrid.tsx": $$$$$$4,
     "deco-sites/storefront/sections/Category/CategoryList.tsx": $$$$$$3,
-    "deco-sites/storefront/sections/Content/Benefits.tsx": $$$$$$23,
-    "deco-sites/storefront/sections/Content/BlogPosts.tsx": $$$$$$16,
-    "deco-sites/storefront/sections/Content/CallToAction.tsx": $$$$$$20,
-    "deco-sites/storefront/sections/Content/Faq.tsx": $$$$$$22,
-    "deco-sites/storefront/sections/Content/Features.tsx": $$$$$$15,
-    "deco-sites/storefront/sections/Content/Hero.tsx": $$$$$$14,
-    "deco-sites/storefront/sections/Content/ImageSection.tsx": $$$$$$24,
-    "deco-sites/storefront/sections/Content/Logos.tsx": $$$$$$19,
-    "deco-sites/storefront/sections/Content/RichText.tsx": $$$$$$17,
-    "deco-sites/storefront/sections/Content/Table.tsx": $$$$$$21,
-    "deco-sites/storefront/sections/Content/Testimonials.tsx": $$$$$$18,
+    "deco-sites/storefront/sections/Content/Benefits.tsx": $$$$$$30,
+    "deco-sites/storefront/sections/Content/BlogPosts.tsx": $$$$$$21,
+    "deco-sites/storefront/sections/Content/CallToAction.tsx": $$$$$$27,
+    "deco-sites/storefront/sections/Content/Faq.tsx": $$$$$$29,
+    "deco-sites/storefront/sections/Content/Features.tsx": $$$$$$19,
+    "deco-sites/storefront/sections/Content/Hero.tsx": $$$$$$18,
+    "deco-sites/storefront/sections/Content/ImageSection.tsx": $$$$$$31,
+    "deco-sites/storefront/sections/Content/Intro.tsx": $$$$$$20,
+    "deco-sites/storefront/sections/Content/Logos.tsx": $$$$$$26,
+    "deco-sites/storefront/sections/Content/Partners.tsx": $$$$$$24,
+    "deco-sites/storefront/sections/Content/RichText.tsx": $$$$$$23,
+    "deco-sites/storefront/sections/Content/Table.tsx": $$$$$$28,
+    "deco-sites/storefront/sections/Content/Testimonials.tsx": $$$$$$25,
+    "deco-sites/storefront/sections/Content/TextWithImage.tsx": $$$$$$22,
     "deco-sites/storefront/sections/Footer/Footer.tsx": $$$$$$1,
     "deco-sites/storefront/sections/Gallery.tsx": $$$$$$0,
-    "deco-sites/storefront/sections/Header/Header.tsx": $$$$$$44,
+    "deco-sites/storefront/sections/Header/Header.tsx": $$$$$$51,
     "deco-sites/storefront/sections/Images/BannerGrid.tsx": $$$$$$6,
     "deco-sites/storefront/sections/Images/Carousel.tsx": $$$$$$8,
     "deco-sites/storefront/sections/Images/ImageGallery.tsx": $$$$$$7,
@@ -84,26 +100,26 @@ const manifest = {
     "deco-sites/storefront/sections/Layout/Flex.tsx": $$$$$$11,
     "deco-sites/storefront/sections/Layout/Grid.tsx": $$$$$$10,
     "deco-sites/storefront/sections/Layout/GridItem.tsx": $$$$$$12,
-    "deco-sites/storefront/sections/Links/LinkTree.tsx": $$$$$$41,
-    "deco-sites/storefront/sections/Links/Shortcuts.tsx": $$$$$$42,
-    "deco-sites/storefront/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$35,
-    "deco-sites/storefront/sections/Miscellaneous/CookieConsent.tsx": $$$$$$36,
-    "deco-sites/storefront/sections/Miscellaneous/Slide.tsx": $$$$$$37,
-    "deco-sites/storefront/sections/Newsletter/Newsletter.tsx": $$$$$$43,
+    "deco-sites/storefront/sections/Links/LinkTree.tsx": $$$$$$48,
+    "deco-sites/storefront/sections/Links/Shortcuts.tsx": $$$$$$49,
+    "deco-sites/storefront/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$42,
+    "deco-sites/storefront/sections/Miscellaneous/CookieConsent.tsx": $$$$$$43,
+    "deco-sites/storefront/sections/Miscellaneous/Slide.tsx": $$$$$$44,
+    "deco-sites/storefront/sections/Newsletter/Newsletter.tsx": $$$$$$50,
     "deco-sites/storefront/sections/Product/ImageGalleryFrontBack.tsx":
-      $$$$$$31,
-    "deco-sites/storefront/sections/Product/ImageGallerySlider.tsx": $$$$$$30,
-    "deco-sites/storefront/sections/Product/NotFound.tsx": $$$$$$34,
-    "deco-sites/storefront/sections/Product/NotFoundChallenge.tsx": $$$$$$26,
-    "deco-sites/storefront/sections/Product/ProductInfo.tsx": $$$$$$28,
-    "deco-sites/storefront/sections/Product/ProductShelf.tsx": $$$$$$29,
-    "deco-sites/storefront/sections/Product/ProductShelfTabbed.tsx": $$$$$$33,
-    "deco-sites/storefront/sections/Product/SearchResult.tsx": $$$$$$27,
-    "deco-sites/storefront/sections/Product/ShelfWithImage.tsx": $$$$$$32,
-    "deco-sites/storefront/sections/Product/Wishlist.tsx": $$$$$$25,
-    "deco-sites/storefront/sections/Social/InstagramPosts.tsx": $$$$$$39,
-    "deco-sites/storefront/sections/Social/WhatsApp.tsx": $$$$$$38,
-    "deco-sites/storefront/sections/Theme/Theme.tsx": $$$$$$40,
+      $$$$$$38,
+    "deco-sites/storefront/sections/Product/ImageGallerySlider.tsx": $$$$$$37,
+    "deco-sites/storefront/sections/Product/NotFound.tsx": $$$$$$41,
+    "deco-sites/storefront/sections/Product/NotFoundChallenge.tsx": $$$$$$33,
+    "deco-sites/storefront/sections/Product/ProductInfo.tsx": $$$$$$35,
+    "deco-sites/storefront/sections/Product/ProductShelf.tsx": $$$$$$36,
+    "deco-sites/storefront/sections/Product/ProductShelfTabbed.tsx": $$$$$$40,
+    "deco-sites/storefront/sections/Product/SearchResult.tsx": $$$$$$34,
+    "deco-sites/storefront/sections/Product/ShelfWithImage.tsx": $$$$$$39,
+    "deco-sites/storefront/sections/Product/Wishlist.tsx": $$$$$$32,
+    "deco-sites/storefront/sections/Social/InstagramPosts.tsx": $$$$$$46,
+    "deco-sites/storefront/sections/Social/WhatsApp.tsx": $$$$$$45,
+    "deco-sites/storefront/sections/Theme/Theme.tsx": $$$$$$47,
   },
   "apps": {
     "deco-sites/storefront/apps/decohub.ts": $$$$$$$$$$$0,
diff --git a/sections/Animation/Animation.tsx b/sections/Animation/Animation.tsx
index 0185e359..2c22d740 100644
--- a/sections/Animation/Animation.tsx
+++ b/sections/Animation/Animation.tsx
@@ -152,3 +152,24 @@ const animationByType = {
         }
     `,
 };
+
+export function Preview() {
+  const animationClass = animationClasses["slide-left"];
+  const id = useId();
+
+  return (
+    <div>
+      <style
+        dangerouslySetInnerHTML={{ __html: animationByType["slide-left"] }}
+      >
+      </style>
+      <div
+        id={id}
+        class="flex justify-center items-center"
+        style={{ animationDuration: "2s" }}
+      >
+        <h1 class="text-9xl text-base-content font-semibold my-8">Animation</h1>
+      </div>
+    </div>
+  );
+}
diff --git a/sections/Cards/IconCardsCarousel.tsx b/sections/Cards/IconCardsCarousel.tsx
new file mode 100644
index 00000000..54e2a4b1
--- /dev/null
+++ b/sections/Cards/IconCardsCarousel.tsx
@@ -0,0 +1 @@
+export { default } from "$store/components/cards/IconCardsCarousel.tsx";
diff --git a/sections/Cards/IconCardsCarouselWithImage.tsx b/sections/Cards/IconCardsCarouselWithImage.tsx
new file mode 100644
index 00000000..52aedbb7
--- /dev/null
+++ b/sections/Cards/IconCardsCarouselWithImage.tsx
@@ -0,0 +1,34 @@
+import SimpleImage, {
+  Props as SimpleImageProps,
+} from "../../components/ui/SimpleImage.tsx";
+import IconCardsCarousel, {
+  Props as CarouselProps,
+} from "$store/components/cards/IconCardsCarousel.tsx";
+import { clx } from "../../sdk/clx.ts";
+import { flex } from "../../constants.tsx";
+
+export interface Props {
+  image?: SimpleImageProps;
+  carousel?: CarouselProps;
+}
+
+export default function Section({
+  image = {
+    width: "30%",
+  },
+  carousel,
+}: Props) {
+  return (
+    <div
+      class={clx(
+        "flex flex-col lg:flex-row items-center gap-8",
+        image.position ? flex.position[image.position] : flex.position["Left"],
+      )}
+    >
+      <SimpleImage width={image.width || "30%"} {...image} />
+      <div class="flex-auto">
+        <IconCardsCarousel placeholderItems={8} {...carousel} />
+      </div>
+    </div>
+  );
+}
diff --git a/sections/Cards/ImageCardsCarousel.tsx b/sections/Cards/ImageCardsCarousel.tsx
new file mode 100644
index 00000000..25b1dbef
--- /dev/null
+++ b/sections/Cards/ImageCardsCarousel.tsx
@@ -0,0 +1,11 @@
+import ImageCardsCarousel, {
+  Props as CarouselProps,
+} from "$store/components/cards/ImageCardsCarousel.tsx";
+
+type Props = {
+  carousel?: CarouselProps;
+};
+
+export default function Section({ carousel }: Props) {
+  return <ImageCardsCarousel {...carousel} />;
+}
diff --git a/sections/Cards/ImageCardsCarouselWithImage.tsx b/sections/Cards/ImageCardsCarouselWithImage.tsx
new file mode 100644
index 00000000..1774d08e
--- /dev/null
+++ b/sections/Cards/ImageCardsCarouselWithImage.tsx
@@ -0,0 +1,35 @@
+import SimpleImage, {
+  Props as SimpleImageProps,
+} from "../../components/ui/SimpleImage.tsx";
+
+import ImageCardsCarousel, {
+  Props as CarouselProps,
+} from "$store/components/cards/ImageCardsCarousel.tsx";
+import { clx } from "../../sdk/clx.ts";
+import { flex } from "../../constants.tsx";
+
+export interface Props {
+  image?: SimpleImageProps;
+  carousel?: CarouselProps;
+}
+
+export default function Section({
+  image = {
+    width: "30%",
+  },
+  carousel,
+}: Props) {
+  return (
+    <div
+      class={clx(
+        "flex flex-col lg:flex-row items-center gap-8",
+        image.position ? flex.position[image.position] : flex.position["Left"],
+      )}
+    >
+      <SimpleImage width={image.width || "30%"} {...image} />
+      <div class="flex-auto">
+        <ImageCardsCarousel {...carousel} />
+      </div>
+    </div>
+  );
+}
diff --git a/sections/Category/CategoryGrid.tsx b/sections/Category/CategoryGrid.tsx
index e786f946..53752847 100644
--- a/sections/Category/CategoryGrid.tsx
+++ b/sections/Category/CategoryGrid.tsx
@@ -14,7 +14,13 @@ export interface CategoryGridProps {
 
 export interface Props {
   header?: {
+    /**
+     * @default Explore Our Categories
+     */
     title?: string;
+    /**
+     * @default Your description here
+     */
     description?: string;
   };
   list?: CategoryGridProps[];
@@ -27,6 +33,37 @@ export interface Props {
   };
 }
 
+const DEFAULT_LIST = [
+  {
+    href: "/category",
+    image:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/01c01ba9-ac16-4371-82ca-b93d17545f9c",
+    label: "category",
+    buttonText: "Explore collection",
+  },
+  {
+    href: "/category",
+    image:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/9b80d57d-64b0-4eef-a3cd-fa8daafaae9c",
+    label: "category",
+    buttonText: "Explore collection",
+  },
+  {
+    href: "/category",
+    image:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/ed4c0eb3-96ab-484f-b293-e91d196a5063",
+    label: "category",
+    buttonText: "Explore collection",
+  },
+  {
+    href: "/category",
+    image:
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9882ff7-3dbc-43e4-9813-5cec23c012cd",
+    label: "category",
+    buttonText: "Explore collection",
+  },
+];
+
 function CategoryGrid(props: Props) {
   const id = useId();
   const {
@@ -34,36 +71,7 @@ function CategoryGrid(props: Props) {
       title: "Explore Our Categories",
       description: "Your description",
     },
-    list = [
-      {
-        href: "/category",
-        image:
-          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/01c01ba9-ac16-4371-82ca-b93d17545f9c",
-        label: "category",
-        buttonText: "Explore collection",
-      },
-      {
-        href: "/category",
-        image:
-          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/9b80d57d-64b0-4eef-a3cd-fa8daafaae9c",
-        label: "category",
-        buttonText: "Explore collection",
-      },
-      {
-        href: "/category",
-        image:
-          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/ed4c0eb3-96ab-484f-b293-e91d196a5063",
-        label: "category",
-        buttonText: "Explore collection",
-      },
-      {
-        href: "/category",
-        image:
-          "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2291/b9882ff7-3dbc-43e4-9813-5cec23c012cd",
-        label: "category",
-        buttonText: "Explore collection",
-      },
-    ],
+    list = DEFAULT_LIST,
     layout = {
       headerAlignment: "center",
       categoryCard: {
diff --git a/sections/Category/CategoryList.tsx b/sections/Category/CategoryList.tsx
index 1aecf46a..8008d11c 100644
--- a/sections/Category/CategoryList.tsx
+++ b/sections/Category/CategoryList.tsx
@@ -50,6 +50,54 @@ function CardText(
   );
 }
 
+const DEFAULT_LIST = [
+  {
+    tag: "10% off",
+    label: "Feminino",
+    description: "Moda feminina direto de Milão",
+    href: "/feminino",
+    image:
+      "https://ik.imagekit.io/decocx/tr:w-680,h-680/https:/ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fdcb3c8f-d629-485e-bf70-8060bd8a9f65",
+    buttonText: "Ver produtos",
+  },
+  {
+    tag: "10% off",
+    label: "Feminino",
+    description: "Moda feminina direto de Milão",
+    href: "/feminino",
+    image:
+      "https://ik.imagekit.io/decocx/tr:w-680,h-680/https:/ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fdcb3c8f-d629-485e-bf70-8060bd8a9f65",
+    buttonText: "Ver produtos",
+  },
+  {
+    tag: "10% off",
+    label: "Feminino",
+    description: "Moda feminina direto de Milão",
+    href: "/feminino",
+    image:
+      "https://ik.imagekit.io/decocx/tr:w-680,h-680/https:/ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fdcb3c8f-d629-485e-bf70-8060bd8a9f65",
+    buttonText: "Ver produtos",
+  },
+  {
+    tag: "10% off",
+    label: "Feminino",
+    description: "Moda feminina direto de Milão",
+    href: "/feminino",
+    image:
+      "https://ik.imagekit.io/decocx/tr:w-680,h-680/https:/ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fdcb3c8f-d629-485e-bf70-8060bd8a9f65",
+    buttonText: "Ver produtos",
+  },
+  {
+    tag: "10% off",
+    label: "Feminino",
+    description: "Moda feminina direto de Milão",
+    href: "/feminino",
+    image:
+      "https://ik.imagekit.io/decocx/tr:w-680,h-680/https:/ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fdcb3c8f-d629-485e-bf70-8060bd8a9f65",
+    buttonText: "Ver produtos",
+  },
+];
+
 function CategoryList(props: Props) {
   const id = useId();
   const {
@@ -57,17 +105,7 @@ function CategoryList(props: Props) {
       title: "",
       description: "",
     },
-    list = [
-      {
-        tag: "10% off",
-        label: "Feminino",
-        description: "Moda feminina direto de Milão",
-        href: "/feminino",
-        image:
-          "https://ik.imagekit.io/decocx/tr:w-680,h-680/https:/ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/239/fdcb3c8f-d629-485e-bf70-8060bd8a9f65",
-        buttonText: "Ver produtos",
-      },
-    ],
+    list = DEFAULT_LIST,
     layout = {
       headerAlignment: "center",
       categoryCard: {
diff --git a/sections/Content/Benefits.tsx b/sections/Content/Benefits.tsx
index 7e524e0d..eceae97f 100644
--- a/sections/Content/Benefits.tsx
+++ b/sections/Content/Benefits.tsx
@@ -2,7 +2,13 @@ import Icon, { AvailableIcons } from "$store/components/ui/Icon.tsx";
 import Header from "$store/components/ui/SectionHeader.tsx";
 
 export interface Props {
+  /**
+   * @default Benefits
+   */
   title?: string;
+  /**
+   * @default Check out the benefits
+   */
   description?: string;
   benefits?: Array<{
     label: string;
@@ -19,8 +25,8 @@ export default function Benefits(
   props: Props,
 ) {
   const {
-    title = "",
-    description = "",
+    title = "Benefits",
+    description = "Check out the benefits",
     benefits = [{
       icon: "Truck",
       label: "Entrega em todo Brasil",
@@ -61,7 +67,7 @@ export default function Benefits(
         <div class="flex-none">
           <Icon
             id={benefit.icon}
-            class={reverse ? "text-base-100" : "text-primary"}
+            class={"text-base-content"}
             width={36}
             height={36}
             strokeWidth={0.01}
diff --git a/sections/Content/CallToAction.tsx b/sections/Content/CallToAction.tsx
index ebc26970..3c507324 100644
--- a/sections/Content/CallToAction.tsx
+++ b/sections/Content/CallToAction.tsx
@@ -10,7 +10,7 @@ export interface Props {
   cta: CTA[];
 }
 
-export default function CallToAction({ text, cta }: Props) {
+export default function CallToAction({ text = "Call to Action", cta }: Props) {
   return (
     <div class="py-16 md:py-28">
       <section class="xl:container mx-auto flex flex-col items-center justify-center gap-8 mb-16 lg:mb-0 z-10">
diff --git a/sections/Content/Features.tsx b/sections/Content/Features.tsx
index d2464762..179a613b 100644
--- a/sections/Content/Features.tsx
+++ b/sections/Content/Features.tsx
@@ -38,7 +38,27 @@ function FeatureCard({ icon, title, text }: Card) {
   );
 }
 
-export default function Features({ title, cards }: Props) {
+const DEFAULT_CARDS = [
+  {
+    "icon": "Discount" as AvailableIcons,
+    "text": ":)",
+    "title": "<p>Visit our coupon page!</p>",
+  },
+  {
+    "icon": "Discount" as AvailableIcons,
+    "text": ":)",
+    "title": "<p>Visit our coupon page!</p>",
+  },
+  {
+    "icon": "Discount" as AvailableIcons,
+    "text": ":)",
+    "title": "<p>Visit our coupon page!</p>",
+  },
+];
+
+export default function Features(
+  { title = "Feature", cards = DEFAULT_CARDS }: Props,
+) {
   return (
     <section class="relative bg-white text-black py-20 max-w-screen">
       <div class="mx-6 lg:container lg:mx-auto flex justify-center items-center flex-col gap-20">
diff --git a/sections/Content/Hero.tsx b/sections/Content/Hero.tsx
index 98a480bc..7a50a436 100644
--- a/sections/Content/Hero.tsx
+++ b/sections/Content/Hero.tsx
@@ -25,8 +25,8 @@ const PLACEMENT = {
 };
 
 export default function HeroFlats({
-  title,
-  description,
+  title = "Hero",
+  description = "Your description here",
   image,
   placement,
   cta,
diff --git a/sections/Content/Intro.tsx b/sections/Content/Intro.tsx
new file mode 100644
index 00000000..050a1913
--- /dev/null
+++ b/sections/Content/Intro.tsx
@@ -0,0 +1,37 @@
+export interface IntroProps {
+  text: string;
+  subheading?: string;
+  alignment: "Left" | "Center" | "Right";
+}
+
+const ALIGNMENT_TEXT = {
+  "Left": "items-start text-start",
+  "Center": "items-center text-center",
+  "Right": "items-end text-end",
+};
+
+export default function Intro(
+  {
+    text =
+      "Lorem ipsum dolor sit amet consectetur. Placerat ornare diam nulla fringilla gravida justo elementum. Ut sed in.",
+    subheading,
+    alignment = "Left",
+  }: IntroProps,
+) {
+  return (
+    <section class="bg-base-100">
+      <div class="xl:container xl:mx-auto mx-5 md:mx-10 py-10 md:py-24">
+        <div
+          class={`flex flex-col gap-6 ${ALIGNMENT_TEXT[alignment ?? "Left"]}`}
+        >
+          <h1 class="font-bold text-base-content text-[40px] leading-[120%]">
+            {text}
+          </h1>
+          {subheading && (
+            <p class="text-base-content text-[18px]">{subheading}</p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/sections/Content/Partners.tsx b/sections/Content/Partners.tsx
new file mode 100644
index 00000000..a64e1b66
--- /dev/null
+++ b/sections/Content/Partners.tsx
@@ -0,0 +1 @@
+export { default } from "$store/components/ui/Partners.tsx";
diff --git a/sections/Content/TextWithImage.tsx b/sections/Content/TextWithImage.tsx
new file mode 100644
index 00000000..7d4e9244
--- /dev/null
+++ b/sections/Content/TextWithImage.tsx
@@ -0,0 +1,66 @@
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import type { HTMLWidget } from "apps/admin/widgets.ts";
+
+export interface ServiceProps {
+  type?: string;
+  label?: string;
+  description?: HTMLWidget;
+  image: ImageWidget;
+  placement: "left" | "right";
+}
+
+export interface Props {
+  services?: ServiceProps[];
+}
+
+const PLACEMENT = {
+  left: "flex-col lg:flex-row-reverse",
+  right: "flex-col lg:flex-row",
+};
+
+export default function Services({
+  services = [
+    {
+      type: "Service",
+      label: "Your Title Here",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam id tincidunt dapibus, elit arcu ultricies massa, quis ornare nisl libero vitae urna.",
+      image:
+        "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/3290/488e5dc5-9a24-48c9-9795-09b97394fb5f",
+      placement: "left",
+    },
+  ],
+}: Props) {
+  return (
+    <div class="bg-base-100 flex flex-col py-28">
+      {services?.map((service, index) => (
+        <div
+          key={index}
+          class={`flex xl:container xl:mx-auto first:pt-0 py-12 lg:py-28 mx-5 md:mx-10 ${
+            PLACEMENT[service.placement]
+          } gap-12 md:gap-20 text-left items-center justify-evenly`}
+        >
+          <img
+            class="w-full lg:w-1/2 flex-1 object-cover rounded-xl aspect-[31/21]"
+            sizes="(max-width: 640px) 100vw, 30vw"
+            src={service.image}
+            alt={service.label}
+            decoding="async"
+            loading="lazy"
+          />
+          <div class="w-full lg:w-1/2 flex-1 space-y-2 lg:space-y-4 lg:max-w-xl gap-4">
+            {service.type && <p>{service.type}</p>}
+            <p class="text-base-content text-[36px] md:text-[48px] leading-[120%] font-bold">
+              {service.label}
+            </p>
+            <p
+              class="text-base-content text-[16px] md:text-[18px]"
+              dangerouslySetInnerHTML={{ __html: service.description || "" }}
+            >
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/sections/Layout/Grid.tsx b/sections/Layout/Grid.tsx
index 2355388a..bcca7db5 100644
--- a/sections/Layout/Grid.tsx
+++ b/sections/Layout/Grid.tsx
@@ -20,7 +20,6 @@ export interface GridMobile {
     | "12"
     | "None";
   rows?: "1" | "2" | "3" | "4" | "5" | "6" | "None";
-  /** @default 8 */
   gap?: "1" | "2" | "4" | "8" | "12" | "16";
   /** @default Center */
   placeItems?: "Center" | "Start" | "End" | "Baseline" | "Stretch";
@@ -44,7 +43,6 @@ export interface GridDesktop {
     | "12"
     | "None";
   rows?: "1" | "2" | "3" | "4" | "5" | "6" | "None";
-  /** @default 8 */
   gap?: "1" | "2" | "4" | "8" | "12" | "16";
   /** @default Center */
   placeItems?: "Center" | "Start" | "End" | "Baseline" | "Stretch";
@@ -54,6 +52,9 @@ export interface GridDesktop {
  * @title Grid
  */
 export interface Props {
+  /**
+   * @hide
+   */
   children?: VNode | null;
   sectionChildrens?: Section[];
   mobile?: GridMobile;