From d9964868ce5f687f7e5e929ee6d12f2ca30fbb6c Mon Sep 17 00:00:00 2001
From: Drew Bednar <drew@runcible.io>
Date: Sat, 26 Jul 2025 16:24:50 -0400
Subject: [PATCH] Initial Marketing

---
 .../hero_sections/simple_centered.html        | 240 ++++++++++++++
 ...simple_centered_with_background_image.html | 250 ++++++++++++++
 .../split_with_bordered_screenshot.html       | 101 ++++++
 .../split_with_code_example.html              | 130 ++++++++
 .../hero_sections/split_with_image.html       |  63 ++++
 .../hero_sections/split_with_screenshot.html  | 130 ++++++++
 .../with_angled_image_on_right.html           | 225 +++++++++++++
 .../hero_sections/with_app_screen_shot.html   | 238 ++++++++++++++
 .../with_bordered_app_screenshot.html         | 243 ++++++++++++++
 .../hero_sections/with_image_tiles.html       | 307 ++++++++++++++++++
 .../hero_sections/with_offset_image.html      | 191 +++++++++++
 .../hero_sections/with_phone_mockup.html      | 268 +++++++++++++++
 12 files changed, 2386 insertions(+)
 create mode 100644 marketing/page_sections/hero_sections/simple_centered.html
 create mode 100644 marketing/page_sections/hero_sections/simple_centered_with_background_image.html
 create mode 100644 marketing/page_sections/hero_sections/split_with_bordered_screenshot.html
 create mode 100644 marketing/page_sections/hero_sections/split_with_code_example.html
 create mode 100644 marketing/page_sections/hero_sections/split_with_image.html
 create mode 100644 marketing/page_sections/hero_sections/split_with_screenshot.html
 create mode 100644 marketing/page_sections/hero_sections/with_angled_image_on_right.html
 create mode 100644 marketing/page_sections/hero_sections/with_app_screen_shot.html
 create mode 100644 marketing/page_sections/hero_sections/with_bordered_app_screenshot.html
 create mode 100644 marketing/page_sections/hero_sections/with_image_tiles.html
 create mode 100644 marketing/page_sections/hero_sections/with_offset_image.html
 create mode 100644 marketing/page_sections/hero_sections/with_phone_mockup.html

diff --git a/marketing/page_sections/hero_sections/simple_centered.html b/marketing/page_sections/hero_sections/simple_centered.html
new file mode 100644
index 0000000..c81964e
--- /dev/null
+++ b/marketing/page_sections/hero_sections/simple_centered.html
@@ -0,0 +1,240 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div class="bg-white">
+    <header class="absolute inset-x-0 top-0 z-50">
+        <nav
+            aria-label="Global"
+            class="flex items-center justify-between p-6 lg:px-8"
+        >
+            <div class="flex lg:flex-1">
+                <a href="#" class="-m-1.5 p-1.5">
+                    <span class="sr-only">Your Company</span>
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt=""
+                        class="h-8 w-auto"
+                    />
+                </a>
+            </div>
+            <div class="flex lg:hidden">
+                <button
+                    type="button"
+                    command="show-modal"
+                    commandfor="mobile-menu"
+                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                >
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex lg:gap-x-12">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Product</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Features</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Marketplace</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Company</a
+                >
+            </div>
+            <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Log in <span aria-hidden="true">&rarr;</span></a
+                >
+            </div>
+        </nav>
+        <el-dialog>
+            <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
+                <div tabindex="0" class="fixed inset-0 focus:outline-none">
+                    <el-dialog-panel
+                        class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+                    >
+                        <div class="flex items-center justify-between">
+                            <a href="#" class="-m-1.5 p-1.5">
+                                <span class="sr-only">Your Company</span>
+                                <img
+                                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                                    alt=""
+                                    class="h-8 w-auto"
+                                />
+                            </a>
+                            <button
+                                type="button"
+                                command="close"
+                                commandfor="mobile-menu"
+                                class="-m-2.5 rounded-md p-2.5 text-gray-700"
+                            >
+                                <span class="sr-only">Close menu</span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M6 18 18 6M6 6l12 12"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="mt-6 flow-root">
+                            <div class="-my-6 divide-y divide-gray-500/10">
+                                <div class="space-y-2 py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Product</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Features</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Marketplace</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Company</a
+                                    >
+                                </div>
+                                <div class="py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Log in</a
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </el-dialog-panel>
+                </div>
+            </dialog>
+        </el-dialog>
+    </header>
+
+    <div class="relative isolate px-6 pt-14 lg:px-8">
+        <div
+            aria-hidden="true"
+            class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+            <div
+                style="
+                    clip-path: polygon(
+                        74.1% 44.1%,
+                        100% 61.6%,
+                        97.5% 26.9%,
+                        85.5% 0.1%,
+                        80.7% 2%,
+                        72.5% 32.5%,
+                        60.2% 62.4%,
+                        52.4% 68.1%,
+                        47.5% 58.3%,
+                        45.2% 34.5%,
+                        27.5% 76.7%,
+                        0.1% 64.9%,
+                        17.9% 100%,
+                        27.6% 76.8%,
+                        76.1% 97.7%,
+                        74.1% 44.1%
+                    );
+                "
+                class="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"
+            ></div>
+        </div>
+        <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+            <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+                <div
+                    class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
+                >
+                    Announcing our next round of funding.
+                    <a href="#" class="font-semibold text-indigo-600"
+                        ><span
+                            aria-hidden="true"
+                            class="absolute inset-0"
+                        ></span
+                        >Read more <span aria-hidden="true">&rarr;</span></a
+                    >
+                </div>
+            </div>
+            <div class="text-center">
+                <h1
+                    class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
+                >
+                    Data to enrich your online business
+                </h1>
+                <p
+                    class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
+                >
+                    Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
+                    qui lorem cupidatat commodo. Elit sunt amet fugiat veniam
+                    occaecat.
+                </p>
+                <div class="mt-10 flex items-center justify-center gap-x-6">
+                    <a
+                        href="#"
+                        class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                        >Get started</a
+                    >
+                    <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                        >Learn more <span aria-hidden="true">→</span></a
+                    >
+                </div>
+            </div>
+        </div>
+        <div
+            aria-hidden="true"
+            class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+        >
+            <div
+                style="
+                    clip-path: polygon(
+                        74.1% 44.1%,
+                        100% 61.6%,
+                        97.5% 26.9%,
+                        85.5% 0.1%,
+                        80.7% 2%,
+                        72.5% 32.5%,
+                        60.2% 62.4%,
+                        52.4% 68.1%,
+                        47.5% 58.3%,
+                        45.2% 34.5%,
+                        27.5% 76.7%,
+                        0.1% 64.9%,
+                        17.9% 100%,
+                        27.6% 76.8%,
+                        76.1% 97.7%,
+                        74.1% 44.1%
+                    );
+                "
+                class="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-288.75"
+            ></div>
+        </div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/simple_centered_with_background_image.html b/marketing/page_sections/hero_sections/simple_centered_with_background_image.html
new file mode 100644
index 0000000..5347674
--- /dev/null
+++ b/marketing/page_sections/hero_sections/simple_centered_with_background_image.html
@@ -0,0 +1,250 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div class="bg-gray-900">
+    <header class="absolute inset-x-0 top-0 z-50">
+        <nav
+            aria-label="Global"
+            class="flex items-center justify-between p-6 lg:px-8"
+        >
+            <div class="flex lg:flex-1">
+                <a href="#" class="-m-1.5 p-1.5">
+                    <span class="sr-only">Your Company</span>
+
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                        alt=""
+                        class="h-8 w-auto"
+                    />
+                </a>
+            </div>
+            <div class="flex lg:hidden">
+                <button
+                    type="button"
+                    command="show-modal"
+                    commandfor="mobile-menu"
+                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
+                >
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex lg:gap-x-12">
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Product</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Features</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Marketplace</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Company</a
+                >
+            </div>
+            <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Log in <span aria-hidden="true">&rarr;</span></a
+                >
+            </div>
+        </nav>
+        <el-dialog>
+            <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
+                <div tabindex="0" class="fixed inset-0 focus:outline-none">
+                    <el-dialog-panel
+                        class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-100/10"
+                    >
+                        <div class="flex items-center justify-between">
+                            <a href="#" class="-m-1.5 p-1.5">
+                                <span class="sr-only">Your Company</span>
+
+                                <img
+                                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                                    alt=""
+                                    class="h-8 w-auto"
+                                />
+                            </a>
+                            <button
+                                type="button"
+                                command="close"
+                                commandfor="mobile-menu"
+                                class="-m-2.5 rounded-md p-2.5 text-gray-400"
+                            >
+                                <span class="sr-only">Close menu</span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M6 18 18 6M6 6l12 12"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="mt-6 flow-root">
+                            <div class="-my-6 divide-y divide-gray-500/25">
+                                <div class="space-y-2 py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Product</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Features</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Marketplace</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Company</a
+                                    >
+                                </div>
+                                <div class="py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Log in</a
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </el-dialog-panel>
+                </div>
+            </dialog>
+        </el-dialog>
+    </header>
+
+    <div class="relative isolate overflow-hidden pt-14">
+        <img
+            src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply"
+            alt=""
+            class="absolute inset-0 -z-10 size-full object-cover"
+        />
+
+        <div
+            aria-hidden="true"
+            class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+            <div
+                style="
+                    clip-path: polygon(
+                        74.1% 44.1%,
+                        100% 61.6%,
+                        97.5% 26.9%,
+                        85.5% 0.1%,
+                        80.7% 2%,
+                        72.5% 32.5%,
+                        60.2% 62.4%,
+                        52.4% 68.1%,
+                        47.5% 58.3%,
+                        45.2% 34.5%,
+                        27.5% 76.7%,
+                        0.1% 64.9%,
+                        17.9% 100%,
+                        27.6% 76.8%,
+                        76.1% 97.7%,
+                        74.1% 44.1%
+                    );
+                "
+                class="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75"
+            ></div>
+        </div>
+        <div class="mx-auto max-w-7xl px-6 lg:px-8">
+            <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+                <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+                    <div
+                        class="relative rounded-full px-3 py-1 text-sm/6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20"
+                    >
+                        Announcing our next round of funding.
+                        <a href="#" class="font-semibold text-indigo-400"
+                            ><span
+                                aria-hidden="true"
+                                class="absolute inset-0"
+                            ></span
+                            >Read more <span aria-hidden="true">&rarr;</span></a
+                        >
+                    </div>
+                </div>
+                <div class="text-center">
+                    <h1
+                        class="text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl"
+                    >
+                        Data to enrich your online business
+                    </h1>
+                    <p
+                        class="mt-8 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8"
+                    >
+                        Anim aute id magna aliqua ad ad non deserunt sunt. Qui
+                        irure qui lorem cupidatat commodo. Elit sunt amet fugiat
+                        veniam occaecat.
+                    </p>
+                    <div class="mt-10 flex items-center justify-center gap-x-6">
+                        <a
+                            href="#"
+                            class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                            >Get started</a
+                        >
+                        <a href="#" class="text-sm/6 font-semibold text-white"
+                            >Learn more <span aria-hidden="true">→</span></a
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            aria-hidden="true"
+            class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+        >
+            <div
+                style="
+                    clip-path: polygon(
+                        74.1% 44.1%,
+                        100% 61.6%,
+                        97.5% 26.9%,
+                        85.5% 0.1%,
+                        80.7% 2%,
+                        72.5% 32.5%,
+                        60.2% 62.4%,
+                        52.4% 68.1%,
+                        47.5% 58.3%,
+                        45.2% 34.5%,
+                        27.5% 76.7%,
+                        0.1% 64.9%,
+                        17.9% 100%,
+                        27.6% 76.8%,
+                        76.1% 97.7%,
+                        74.1% 44.1%
+                    );
+                "
+                class="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75"
+            ></div>
+        </div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/split_with_bordered_screenshot.html b/marketing/page_sections/hero_sections/split_with_bordered_screenshot.html
new file mode 100644
index 0000000..d621e67
--- /dev/null
+++ b/marketing/page_sections/hero_sections/split_with_bordered_screenshot.html
@@ -0,0 +1,101 @@
+<div class="relative isolate overflow-hidden bg-white">
+    <svg
+        aria-hidden="true"
+        class="absolute inset-0 -z-10 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200"
+    >
+        <defs>
+            <pattern
+                id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
+                width="200"
+                height="200"
+                x="50%"
+                y="-1"
+                patternUnits="userSpaceOnUse"
+            >
+                <path d="M.5 200V.5H200" fill="none" />
+            </pattern>
+        </defs>
+        <rect
+            width="100%"
+            height="100%"
+            fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
+            stroke-width="0"
+        />
+    </svg>
+    <div
+        class="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:px-8 lg:py-40"
+    >
+        <div class="mx-auto max-w-2xl lg:mx-0 lg:shrink-0 lg:pt-8">
+            <img
+                src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                alt="Your Company"
+                class="h-11"
+            />
+
+            <div class="mt-24 sm:mt-32 lg:mt-16">
+                <a href="#" class="inline-flex space-x-6">
+                    <span
+                        class="rounded-full bg-indigo-50 px-3 py-1 text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-600/20 ring-inset"
+                        >What's new</span
+                    >
+                    <span
+                        class="inline-flex items-center space-x-2 text-sm/6 font-medium text-gray-600"
+                    >
+                        <span>Just shipped v1.0</span>
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-5 text-gray-400"
+                        >
+                            <path
+                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </span>
+                </a>
+            </div>
+            <h1
+                class="mt-10 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
+            >
+                Deploy to the cloud with confidence
+            </h1>
+            <p
+                class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
+            >
+                Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
+                lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.
+            </p>
+            <div class="mt-10 flex items-center gap-x-6">
+                <a
+                    href="#"
+                    class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                    >Get started</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Learn more <span aria-hidden="true">→</span></a
+                >
+            </div>
+        </div>
+        <div
+            class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32"
+        >
+            <div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
+                <div
+                    class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 ring-inset lg:-m-4 lg:rounded-2xl lg:p-4"
+                >
+                    <img
+                        width="2432"
+                        height="1442"
+                        src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png"
+                        alt="App screenshot"
+                        class="w-304 rounded-md bg-gray-50 shadow-xl ring-1 ring-gray-900/10"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/split_with_code_example.html b/marketing/page_sections/hero_sections/split_with_code_example.html
new file mode 100644
index 0000000..8a44d7f
--- /dev/null
+++ b/marketing/page_sections/hero_sections/split_with_code_example.html
@@ -0,0 +1,130 @@
+<div class="bg-white">
+    <div
+        class="relative isolate overflow-hidden bg-linear-to-b from-indigo-100/20"
+    >
+        <div
+            class="mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-40"
+        >
+            <div class="px-6 lg:px-0 lg:pt-4">
+                <div class="mx-auto max-w-2xl">
+                    <div class="max-w-lg">
+                        <img
+                            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                            alt="Your Company"
+                            class="h-11"
+                        />
+
+                        <div class="mt-24 sm:mt-32 lg:mt-16">
+                            <a href="#" class="inline-flex space-x-6">
+                                <span
+                                    class="rounded-full bg-indigo-50 px-3 py-1 text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-600/20 ring-inset"
+                                    >What's new</span
+                                >
+                                <span
+                                    class="inline-flex items-center space-x-2 text-sm/6 font-medium text-gray-600"
+                                >
+                                    <span>Just shipped v1.0</span>
+                                    <svg
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                        data-slot="icon"
+                                        aria-hidden="true"
+                                        class="size-5 text-gray-400"
+                                    >
+                                        <path
+                                            d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                            clip-rule="evenodd"
+                                            fill-rule="evenodd"
+                                        />
+                                    </svg>
+                                </span>
+                            </a>
+                        </div>
+                        <h1
+                            class="mt-10 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
+                        >
+                            Supercharge your web app
+                        </h1>
+                        <p
+                            class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
+                        >
+                            Anim aute id magna aliqua ad ad non deserunt sunt.
+                            Qui irure qui lorem cupidatat commodo.
+                        </p>
+                        <div class="mt-10 flex items-center gap-x-6">
+                            <a
+                                href="#"
+                                class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >Documentation</a
+                            >
+                            <a
+                                href="#"
+                                class="text-sm/6 font-semibold text-gray-900"
+                                >View on GitHub
+                                <span aria-hidden="true">→</span></a
+                            >
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div
+                class="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen"
+            >
+                <div
+                    aria-hidden="true"
+                    class="absolute inset-y-0 right-1/2 -z-10 -mr-10 w-[200%] skew-x-[-30deg] bg-white shadow-xl ring-1 shadow-indigo-600/10 ring-indigo-50 md:-mr-20 lg:-mr-36"
+                ></div>
+                <div class="shadow-lg md:rounded-3xl">
+                    <div
+                        class="bg-indigo-500 [clip-path:inset(0)] md:[clip-path:inset(0_round_var(--radius-3xl))]"
+                    >
+                        <div
+                            aria-hidden="true"
+                            class="absolute -inset-y-px left-1/2 -z-10 ml-10 w-[200%] skew-x-[-30deg] bg-indigo-100 opacity-20 inset-ring inset-ring-white md:ml-20 lg:ml-36"
+                        ></div>
+                        <div
+                            class="relative px-6 pt-8 sm:pt-16 md:pr-0 md:pl-16"
+                        >
+                            <div
+                                class="mx-auto max-w-2xl md:mx-0 md:max-w-none"
+                            >
+                                <div
+                                    class="w-screen overflow-hidden rounded-tl-xl bg-gray-900"
+                                >
+                                    <div
+                                        class="flex bg-gray-800/40 ring-1 ring-white/5"
+                                    >
+                                        <div
+                                            class="-mb-px flex text-sm/6 font-medium text-gray-400"
+                                        >
+                                            <div
+                                                class="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white"
+                                            >
+                                                NotificationSetting.jsx
+                                            </div>
+                                            <div
+                                                class="border-r border-gray-600/10 px-4 py-2"
+                                            >
+                                                App.jsx
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="px-6 pt-6 pb-14">
+                                        <!-- Your code example -->
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                aria-hidden="true"
+                                class="pointer-events-none absolute inset-0 ring-1 ring-black/10 ring-inset md:rounded-3xl"
+                            ></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-linear-to-t from-white sm:h-32"
+        ></div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/split_with_image.html b/marketing/page_sections/hero_sections/split_with_image.html
new file mode 100644
index 0000000..31abc17
--- /dev/null
+++ b/marketing/page_sections/hero_sections/split_with_image.html
@@ -0,0 +1,63 @@
+<div class="relative bg-white">
+    <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
+        <div
+            class="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-6"
+        >
+            <div class="mx-auto max-w-lg lg:mx-0">
+                <img
+                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                    alt="Your Company"
+                    class="h-11"
+                />
+
+                <div class="hidden sm:mt-32 sm:flex lg:mt-16">
+                    <div
+                        class="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
+                    >
+                        Anim aute id magna aliqua ad ad non deserunt sunt.
+                        <a
+                            href="#"
+                            class="font-semibold whitespace-nowrap text-indigo-600"
+                            ><span
+                                aria-hidden="true"
+                                class="absolute inset-0"
+                            ></span
+                            >Read more <span aria-hidden="true">&rarr;</span></a
+                        >
+                    </div>
+                </div>
+                <h1
+                    class="mt-24 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:mt-10 sm:text-7xl"
+                >
+                    Data to enrich your business
+                </h1>
+                <p
+                    class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
+                >
+                    Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
+                    qui lorem cupidatat commodo. Elit sunt amet fugiat veniam
+                    occaecat.
+                </p>
+                <div class="mt-10 flex items-center gap-x-6">
+                    <a
+                        href="#"
+                        class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                        >Get started</a
+                    >
+                    <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                        >Learn more <span aria-hidden="true">→</span></a
+                    >
+                </div>
+            </div>
+        </div>
+        <div
+            class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0"
+        >
+            <img
+                src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80"
+                alt=""
+                class="aspect-3/2 w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
+            />
+        </div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/split_with_screenshot.html b/marketing/page_sections/hero_sections/split_with_screenshot.html
new file mode 100644
index 0000000..015e00c
--- /dev/null
+++ b/marketing/page_sections/hero_sections/split_with_screenshot.html
@@ -0,0 +1,130 @@
+<div class="relative isolate overflow-hidden bg-gray-900">
+    <svg
+        aria-hidden="true"
+        class="absolute inset-0 -z-10 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-white/10"
+    >
+        <defs>
+            <pattern
+                id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
+                width="200"
+                height="200"
+                x="50%"
+                y="-1"
+                patternUnits="userSpaceOnUse"
+            >
+                <path d="M.5 200V.5H200" fill="none" />
+            </pattern>
+        </defs>
+        <svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
+            <path
+                d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+                stroke-width="0"
+            />
+        </svg>
+        <rect
+            width="100%"
+            height="100%"
+            fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
+            stroke-width="0"
+        />
+    </svg>
+    <div
+        aria-hidden="true"
+        class="absolute top-10 left-[calc(50%-4rem)] -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:top-[calc(50%-30rem)] lg:left-48 xl:left-[calc(50%-24rem)]"
+    >
+        <div
+            style="
+                clip-path: polygon(
+                    73.6% 51.7%,
+                    91.7% 11.8%,
+                    100% 46.4%,
+                    97.4% 82.2%,
+                    92.5% 84.9%,
+                    75.7% 64%,
+                    55.3% 47.5%,
+                    46.5% 49.4%,
+                    45% 62.9%,
+                    50.3% 87.2%,
+                    21.3% 64.1%,
+                    0.1% 100%,
+                    5.4% 51.1%,
+                    21.4% 63.9%,
+                    58.9% 0.2%,
+                    73.6% 51.7%
+                );
+            "
+            class="aspect-1108/632 w-277 bg-linear-to-r from-[#80caff] to-[#4f46e5] opacity-20"
+        ></div>
+    </div>
+    <div
+        class="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:px-8 lg:py-40"
+    >
+        <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
+            <img
+                src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                alt="Your Company"
+                class="h-11"
+            />
+            <div class="mt-24 sm:mt-32 lg:mt-16">
+                <a href="#" class="inline-flex space-x-6">
+                    <span
+                        class="rounded-full bg-indigo-500/10 px-3 py-1 text-sm/6 font-semibold text-indigo-400 ring-1 ring-indigo-500/25 ring-inset"
+                        >What's new</span
+                    >
+                    <span
+                        class="inline-flex items-center space-x-2 text-sm/6 font-medium text-gray-300"
+                    >
+                        <span>Just shipped v1.0</span>
+                        <svg
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-5 text-gray-500"
+                        >
+                            <path
+                                d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                clip-rule="evenodd"
+                                fill-rule="evenodd"
+                            />
+                        </svg>
+                    </span>
+                </a>
+            </div>
+            <h1
+                class="mt-10 text-5xl font-semibold tracking-tight text-pretty text-white sm:text-7xl"
+            >
+                Deploy to the cloud with confidence
+            </h1>
+            <p
+                class="mt-8 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8"
+            >
+                Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
+                lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.
+            </p>
+            <div class="mt-10 flex items-center gap-x-6">
+                <a
+                    href="#"
+                    class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                    >Get started</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Learn more <span aria-hidden="true">→</span></a
+                >
+            </div>
+        </div>
+        <div
+            class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32"
+        >
+            <div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
+                <img
+                    width="2432"
+                    height="1442"
+                    src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png"
+                    alt="App screenshot"
+                    class="w-304 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
+                />
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/with_angled_image_on_right.html b/marketing/page_sections/hero_sections/with_angled_image_on_right.html
new file mode 100644
index 0000000..266eb68
--- /dev/null
+++ b/marketing/page_sections/hero_sections/with_angled_image_on_right.html
@@ -0,0 +1,225 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div class="bg-white">
+    <header class="absolute inset-x-0 top-0 z-50">
+        <div class="mx-auto max-w-7xl">
+            <div class="px-6 pt-6 lg:max-w-2xl lg:pr-0 lg:pl-8">
+                <nav
+                    aria-label="Global"
+                    class="flex items-center justify-between lg:justify-start"
+                >
+                    <a href="#" class="-m-1.5 p-1.5">
+                        <span class="sr-only">Your Company</span>
+                        <img
+                            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                            alt="Your Company"
+                            class="h-8 w-auto"
+                        />
+                    </a>
+                    <button
+                        type="button"
+                        command="show-modal"
+                        commandfor="mobile-menu"
+                        class="-m-2.5 rounded-md p-2.5 text-gray-700 lg:hidden"
+                    >
+                        <span class="sr-only">Open main menu</span>
+                        <svg
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="1.5"
+                            data-slot="icon"
+                            aria-hidden="true"
+                            class="size-6"
+                        >
+                            <path
+                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+                    <div class="hidden lg:ml-12 lg:flex lg:gap-x-14">
+                        <a
+                            href="#"
+                            class="text-sm/6 font-semibold text-gray-900"
+                            >Product</a
+                        >
+                        <a
+                            href="#"
+                            class="text-sm/6 font-semibold text-gray-900"
+                            >Features</a
+                        >
+                        <a
+                            href="#"
+                            class="text-sm/6 font-semibold text-gray-900"
+                            >Marketplace</a
+                        >
+                        <a
+                            href="#"
+                            class="text-sm/6 font-semibold text-gray-900"
+                            >Company</a
+                        >
+                        <a
+                            href="#"
+                            class="text-sm/6 font-semibold text-gray-900"
+                            >Log in</a
+                        >
+                    </div>
+                </nav>
+            </div>
+        </div>
+        <el-dialog>
+            <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
+                <div tabindex="0" class="fixed inset-0 focus:outline-none">
+                    <el-dialog-panel
+                        class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+                    >
+                        <div class="flex items-center justify-between">
+                            <a href="#" class="-m-1.5 p-1.5">
+                                <span class="sr-only">Your Company</span>
+                                <img
+                                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                                    alt=""
+                                    class="h-8 w-auto"
+                                />
+                            </a>
+                            <button
+                                type="button"
+                                command="close"
+                                commandfor="mobile-menu"
+                                class="-m-2.5 rounded-md p-2.5 text-gray-700"
+                            >
+                                <span class="sr-only">Close menu</span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M6 18 18 6M6 6l12 12"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="mt-6 flow-root">
+                            <div class="-my-6 divide-y divide-gray-500/10">
+                                <div class="space-y-2 py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Product</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Features</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Marketplace</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Company</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Log in</a
+                                    >
+                                </div>
+                                <div class="py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Log in</a
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </el-dialog-panel>
+                </div>
+            </dialog>
+        </el-dialog>
+    </header>
+
+    <div class="relative">
+        <div class="mx-auto max-w-7xl">
+            <div class="relative z-10 pt-14 lg:w-full lg:max-w-2xl">
+                <svg
+                    viewBox="0 0 100 100"
+                    preserveAspectRatio="none"
+                    aria-hidden="true"
+                    class="absolute inset-y-0 right-8 hidden h-full w-80 translate-x-1/2 transform fill-white lg:block"
+                >
+                    <polygon points="0,0 90,0 50,100 0,100" />
+                </svg>
+
+                <div
+                    class="relative px-6 py-32 sm:py-40 lg:px-8 lg:py-56 lg:pr-0"
+                >
+                    <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
+                        <div class="hidden sm:mb-10 sm:flex">
+                            <div
+                                class="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
+                            >
+                                Anim aute id magna aliqua ad ad non deserunt
+                                sunt.
+                                <a
+                                    href="#"
+                                    class="font-semibold whitespace-nowrap text-indigo-600"
+                                    ><span
+                                        aria-hidden="true"
+                                        class="absolute inset-0"
+                                    ></span
+                                    >Read more
+                                    <span aria-hidden="true">&rarr;</span></a
+                                >
+                            </div>
+                        </div>
+                        <h1
+                            class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
+                        >
+                            Data to enrich your business
+                        </h1>
+                        <p
+                            class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
+                        >
+                            Anim aute id magna aliqua ad ad non deserunt sunt.
+                            Qui irure qui lorem cupidatat commodo. Elit sunt
+                            amet fugiat veniam occaecat fugiat aliqua.
+                        </p>
+                        <div class="mt-10 flex items-center gap-x-6">
+                            <a
+                                href="#"
+                                class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                >Get started</a
+                            >
+                            <a
+                                href="#"
+                                class="text-sm/6 font-semibold text-gray-900"
+                                >Learn more <span aria-hidden="true">→</span></a
+                            >
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-gray-50 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
+            <img
+                src="https://images.unsplash.com/photo-1483389127117-b6a2102724ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
+                alt=""
+                class="aspect-3/2 object-cover lg:aspect-auto lg:size-full"
+            />
+        </div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/with_app_screen_shot.html b/marketing/page_sections/hero_sections/with_app_screen_shot.html
new file mode 100644
index 0000000..46950f4
--- /dev/null
+++ b/marketing/page_sections/hero_sections/with_app_screen_shot.html
@@ -0,0 +1,238 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div class="bg-gray-900">
+    <header class="absolute inset-x-0 top-0 z-50">
+        <nav
+            aria-label="Global"
+            class="flex items-center justify-between p-6 lg:px-8"
+        >
+            <div class="flex lg:flex-1">
+                <a href="#" class="-m-1.5 p-1.5">
+                    <span class="sr-only">Your Company</span>
+
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                        alt=""
+                        class="h-8 w-auto"
+                    />
+                </a>
+            </div>
+            <div class="flex lg:hidden">
+                <button
+                    type="button"
+                    command="show-modal"
+                    commandfor="mobile-menu"
+                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
+                >
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex lg:gap-x-12">
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Product</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Features</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Marketplace</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Company</a
+                >
+            </div>
+            <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="#" class="text-sm/6 font-semibold text-white"
+                    >Log in <span aria-hidden="true">&rarr;</span></a
+                >
+            </div>
+        </nav>
+        <el-dialog>
+            <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
+                <div tabindex="0" class="fixed inset-0 focus:outline-none">
+                    <el-dialog-panel
+                        class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-100/10"
+                    >
+                        <div class="flex items-center justify-between">
+                            <a href="#" class="-m-1.5 p-1.5">
+                                <span class="sr-only">Your Company</span>
+
+                                <img
+                                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
+                                    alt=""
+                                    class="h-8 w-auto"
+                                />
+                            </a>
+                            <button
+                                type="button"
+                                command="close"
+                                commandfor="mobile-menu"
+                                class="-m-2.5 rounded-md p-2.5 text-gray-400"
+                            >
+                                <span class="sr-only">Close menu</span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M6 18 18 6M6 6l12 12"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="mt-6 flow-root">
+                            <div class="-my-6 divide-y divide-gray-500/25">
+                                <div class="space-y-2 py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Product</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Features</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Marketplace</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Company</a
+                                    >
+                                </div>
+                                <div class="py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-white hover:bg-white/5"
+                                        >Log in</a
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </el-dialog-panel>
+                </div>
+            </dialog>
+        </el-dialog>
+    </header>
+
+    <div class="relative isolate pt-14">
+        <div
+            aria-hidden="true"
+            class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+            <div
+                style="
+                    clip-path: polygon(
+                        74.1% 44.1%,
+                        100% 61.6%,
+                        97.5% 26.9%,
+                        85.5% 0.1%,
+                        80.7% 2%,
+                        72.5% 32.5%,
+                        60.2% 62.4%,
+                        52.4% 68.1%,
+                        47.5% 58.3%,
+                        45.2% 34.5%,
+                        27.5% 76.7%,
+                        0.1% 64.9%,
+                        17.9% 100%,
+                        27.6% 76.8%,
+                        76.1% 97.7%,
+                        74.1% 44.1%
+                    );
+                "
+                class="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75"
+            ></div>
+        </div>
+        <div class="py-24 sm:py-32 lg:pb-40">
+            <div class="mx-auto max-w-7xl px-6 lg:px-8">
+                <div class="mx-auto max-w-2xl text-center">
+                    <h1
+                        class="text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl"
+                    >
+                        Data to enrich your online business
+                    </h1>
+                    <p
+                        class="mt-8 text-lg font-medium text-pretty text-gray-400 sm:text-xl/8"
+                    >
+                        Anim aute id magna aliqua ad ad non deserunt sunt. Qui
+                        irure qui lorem cupidatat commodo. Elit sunt amet fugiat
+                        veniam occaecat.
+                    </p>
+                    <div class="mt-10 flex items-center justify-center gap-x-6">
+                        <a
+                            href="#"
+                            class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                            >Get started</a
+                        >
+                        <a href="#" class="text-sm/6 font-semibold text-white"
+                            >Learn more <span aria-hidden="true">→</span></a
+                        >
+                    </div>
+                </div>
+
+                <img
+                    width="2432"
+                    height="1442"
+                    src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png"
+                    alt="App screenshot"
+                    class="mt-16 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
+                />
+            </div>
+        </div>
+        <div
+            aria-hidden="true"
+            class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+        >
+            <div
+                style="
+                    clip-path: polygon(
+                        74.1% 44.1%,
+                        100% 61.6%,
+                        97.5% 26.9%,
+                        85.5% 0.1%,
+                        80.7% 2%,
+                        72.5% 32.5%,
+                        60.2% 62.4%,
+                        52.4% 68.1%,
+                        47.5% 58.3%,
+                        45.2% 34.5%,
+                        27.5% 76.7%,
+                        0.1% 64.9%,
+                        17.9% 100%,
+                        27.6% 76.8%,
+                        76.1% 97.7%,
+                        74.1% 44.1%
+                    );
+                "
+                class="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75"
+            ></div>
+        </div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/with_bordered_app_screenshot.html b/marketing/page_sections/hero_sections/with_bordered_app_screenshot.html
new file mode 100644
index 0000000..cb4afc3
--- /dev/null
+++ b/marketing/page_sections/hero_sections/with_bordered_app_screenshot.html
@@ -0,0 +1,243 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div class="bg-white">
+    <header class="absolute inset-x-0 top-0 z-50">
+        <nav
+            aria-label="Global"
+            class="flex items-center justify-between p-6 lg:px-8"
+        >
+            <div class="flex lg:flex-1">
+                <a href="#" class="-m-1.5 p-1.5">
+                    <span class="sr-only">Your Company</span>
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt=""
+                        class="h-8 w-auto"
+                    />
+                </a>
+            </div>
+            <div class="flex lg:hidden">
+                <button
+                    type="button"
+                    command="show-modal"
+                    commandfor="mobile-menu"
+                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                >
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex lg:gap-x-12">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Product</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Features</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Marketplace</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Company</a
+                >
+            </div>
+            <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Log in <span aria-hidden="true">&rarr;</span></a
+                >
+            </div>
+        </nav>
+        <el-dialog>
+            <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
+                <div tabindex="0" class="fixed inset-0 focus:outline-none">
+                    <el-dialog-panel
+                        class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+                    >
+                        <div class="flex items-center justify-between">
+                            <a href="#" class="-m-1.5 p-1.5">
+                                <span class="sr-only">Your Company</span>
+                                <img
+                                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                                    alt=""
+                                    class="h-8 w-auto"
+                                />
+                            </a>
+                            <button
+                                type="button"
+                                command="close"
+                                commandfor="mobile-menu"
+                                class="-m-2.5 rounded-md p-2.5 text-gray-700"
+                            >
+                                <span class="sr-only">Close menu</span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M6 18 18 6M6 6l12 12"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="mt-6 flow-root">
+                            <div class="-my-6 divide-y divide-gray-500/10">
+                                <div class="space-y-2 py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Product</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Features</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Marketplace</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Company</a
+                                    >
+                                </div>
+                                <div class="py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Log in</a
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </el-dialog-panel>
+                </div>
+            </dialog>
+        </el-dialog>
+    </header>
+
+    <div class="relative isolate pt-14">
+        <div
+            aria-hidden="true"
+            class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+            <div
+                style="
+                    clip-path: polygon(
+                        74.1% 44.1%,
+                        100% 61.6%,
+                        97.5% 26.9%,
+                        85.5% 0.1%,
+                        80.7% 2%,
+                        72.5% 32.5%,
+                        60.2% 62.4%,
+                        52.4% 68.1%,
+                        47.5% 58.3%,
+                        45.2% 34.5%,
+                        27.5% 76.7%,
+                        0.1% 64.9%,
+                        17.9% 100%,
+                        27.6% 76.8%,
+                        76.1% 97.7%,
+                        74.1% 44.1%
+                    );
+                "
+                class="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"
+            ></div>
+        </div>
+        <div class="py-24 sm:py-32 lg:pb-40">
+            <div class="mx-auto max-w-7xl px-6 lg:px-8">
+                <div class="mx-auto max-w-2xl text-center">
+                    <h1
+                        class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
+                    >
+                        Data to enrich your online business
+                    </h1>
+                    <p
+                        class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
+                    >
+                        Anim aute id magna aliqua ad ad non deserunt sunt. Qui
+                        irure qui lorem cupidatat commodo. Elit sunt amet fugiat
+                        veniam occaecat.
+                    </p>
+                    <div class="mt-10 flex items-center justify-center gap-x-6">
+                        <a
+                            href="#"
+                            class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                            >Get started</a
+                        >
+                        <a
+                            href="#"
+                            class="text-sm/6 font-semibold text-gray-900"
+                            >Learn more <span aria-hidden="true">→</span></a
+                        >
+                    </div>
+                </div>
+                <div class="mt-16 flow-root sm:mt-24">
+                    <div
+                        class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 ring-inset lg:-m-4 lg:rounded-2xl lg:p-4"
+                    >
+                        <img
+                            width="2432"
+                            height="1442"
+                            src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png"
+                            alt="App screenshot"
+                            class="w-304 rounded-md bg-gray-50 shadow-xl ring-1 ring-gray-900/10"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            aria-hidden="true"
+            class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+        >
+            <div
+                style="
+                    clip-path: polygon(
+                        74.1% 44.1%,
+                        100% 61.6%,
+                        97.5% 26.9%,
+                        85.5% 0.1%,
+                        80.7% 2%,
+                        72.5% 32.5%,
+                        60.2% 62.4%,
+                        52.4% 68.1%,
+                        47.5% 58.3%,
+                        45.2% 34.5%,
+                        27.5% 76.7%,
+                        0.1% 64.9%,
+                        17.9% 100%,
+                        27.6% 76.8%,
+                        76.1% 97.7%,
+                        74.1% 44.1%
+                    );
+                "
+                class="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-288.75"
+            ></div>
+        </div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/with_image_tiles.html b/marketing/page_sections/hero_sections/with_image_tiles.html
new file mode 100644
index 0000000..bd8c3dd
--- /dev/null
+++ b/marketing/page_sections/hero_sections/with_image_tiles.html
@@ -0,0 +1,307 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div class="bg-white">
+    <header class="absolute inset-x-0 top-0 z-50">
+        <nav
+            aria-label="Global"
+            class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+        >
+            <div class="flex lg:flex-1">
+                <a href="#" class="-m-1.5 p-1.5">
+                    <span class="sr-only">Your Company</span>
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt=""
+                        class="h-8 w-auto"
+                    />
+                </a>
+            </div>
+            <div class="flex lg:hidden">
+                <button
+                    type="button"
+                    command="show-modal"
+                    commandfor="mobile-menu"
+                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                >
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex lg:gap-x-12">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Product</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Features</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Marketplace</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Company</a
+                >
+            </div>
+            <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Log in <span aria-hidden="true">&rarr;</span></a
+                >
+            </div>
+        </nav>
+        <el-dialog>
+            <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
+                <div tabindex="0" class="fixed inset-0 focus:outline-none">
+                    <el-dialog-panel
+                        class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+                    >
+                        <div class="flex items-center justify-between">
+                            <a href="#" class="-m-1.5 p-1.5">
+                                <span class="sr-only">Your Company</span>
+                                <img
+                                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                                    alt=""
+                                    class="h-8 w-auto"
+                                />
+                            </a>
+                            <button
+                                type="button"
+                                command="close"
+                                commandfor="mobile-menu"
+                                class="-m-2.5 rounded-md p-2.5 text-gray-700"
+                            >
+                                <span class="sr-only">Close menu</span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M6 18 18 6M6 6l12 12"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="mt-6 flow-root">
+                            <div class="-my-6 divide-y divide-gray-500/10">
+                                <div class="space-y-2 py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Product</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Features</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Marketplace</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Company</a
+                                    >
+                                </div>
+                                <div class="py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Log in</a
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </el-dialog-panel>
+                </div>
+            </dialog>
+        </el-dialog>
+    </header>
+    <main>
+        <div class="relative isolate">
+            <svg
+                aria-hidden="true"
+                class="absolute inset-x-0 top-0 -z-10 h-256 w-full mask-[radial-gradient(32rem_32rem_at_center,white,transparent)] stroke-gray-200"
+            >
+                <defs>
+                    <pattern
+                        id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
+                        width="200"
+                        height="200"
+                        x="50%"
+                        y="-1"
+                        patternUnits="userSpaceOnUse"
+                    >
+                        <path d="M.5 200V.5H200" fill="none" />
+                    </pattern>
+                </defs>
+                <svg x="50%" y="-1" class="overflow-visible fill-gray-50">
+                    <path
+                        d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+                        stroke-width="0"
+                    />
+                </svg>
+                <rect
+                    width="100%"
+                    height="100%"
+                    fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
+                    stroke-width="0"
+                />
+            </svg>
+            <div
+                aria-hidden="true"
+                class="absolute top-0 right-0 left-1/2 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
+            >
+                <div
+                    style="
+                        clip-path: polygon(
+                            63.1% 29.5%,
+                            100% 17.1%,
+                            76.6% 3%,
+                            48.4% 0%,
+                            44.6% 4.7%,
+                            54.5% 25.3%,
+                            59.8% 49%,
+                            55.2% 57.8%,
+                            44.4% 57.2%,
+                            27.8% 47.9%,
+                            35.1% 81.5%,
+                            0% 97.7%,
+                            39.2% 100%,
+                            35.2% 81.4%,
+                            97.2% 52.8%,
+                            63.1% 29.5%
+                        );
+                    "
+                    class="aspect-801/1036 w-200.25 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
+                ></div>
+            </div>
+            <div class="overflow-hidden">
+                <div
+                    class="mx-auto max-w-7xl px-6 pt-36 pb-32 sm:pt-60 lg:px-8 lg:pt-32"
+                >
+                    <div
+                        class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center"
+                    >
+                        <div
+                            class="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl"
+                        >
+                            <h1
+                                class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
+                            >
+                                We’re changing the way people connect
+                            </h1>
+                            <p
+                                class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none"
+                            >
+                                Anim aute id magna aliqua ad ad non deserunt
+                                sunt. Qui irure qui lorem cupidatat commodo.
+                                Elit sunt amet fugiat veniam occaecat fugiat
+                                aliqua. Anim aute id magna aliqua ad ad non
+                                deserunt sunt.
+                            </p>
+                            <div class="mt-10 flex items-center gap-x-6">
+                                <a
+                                    href="#"
+                                    class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                                    >Get started</a
+                                >
+                                <a
+                                    href="#"
+                                    class="text-sm/6 font-semibold text-gray-900"
+                                    >Live demo
+                                    <span aria-hidden="true">→</span></a
+                                >
+                            </div>
+                        </div>
+                        <div
+                            class="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0"
+                        >
+                            <div
+                                class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80"
+                            >
+                                <div class="relative">
+                                    <img
+                                        src="https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
+                                        alt=""
+                                        class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                                    />
+                                    <div
+                                        class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
+                                    ></div>
+                                </div>
+                            </div>
+                            <div
+                                class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36"
+                            >
+                                <div class="relative">
+                                    <img
+                                        src="https://images.unsplash.com/photo-1485217988980-11786ced9454?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
+                                        alt=""
+                                        class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                                    />
+                                    <div
+                                        class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
+                                    ></div>
+                                </div>
+                                <div class="relative">
+                                    <img
+                                        src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-x=.4&w=396&h=528&q=80"
+                                        alt=""
+                                        class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                                    />
+                                    <div
+                                        class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
+                                    ></div>
+                                </div>
+                            </div>
+                            <div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
+                                <div class="relative">
+                                    <img
+                                        src="https://images.unsplash.com/photo-1670272504528-790c24957dda?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=left&w=400&h=528&q=80"
+                                        alt=""
+                                        class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                                    />
+                                    <div
+                                        class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
+                                    ></div>
+                                </div>
+                                <div class="relative">
+                                    <img
+                                        src="https://images.unsplash.com/photo-1670272505284-8faba1c31f7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&h=528&q=80"
+                                        alt=""
+                                        class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                                    />
+                                    <div
+                                        class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
+                                    ></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</div>
diff --git a/marketing/page_sections/hero_sections/with_offset_image.html b/marketing/page_sections/hero_sections/with_offset_image.html
new file mode 100644
index 0000000..d8f5867
--- /dev/null
+++ b/marketing/page_sections/hero_sections/with_offset_image.html
@@ -0,0 +1,191 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div class="bg-white">
+    <header class="absolute inset-x-0 top-0 z-50">
+        <nav
+            aria-label="Global"
+            class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+        >
+            <div class="flex lg:flex-1">
+                <a href="#" class="-m-1.5 p-1.5">
+                    <span class="sr-only">Your Company</span>
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt=""
+                        class="h-8 w-auto"
+                    />
+                </a>
+            </div>
+            <div class="flex lg:hidden">
+                <button
+                    type="button"
+                    command="show-modal"
+                    commandfor="mobile-menu"
+                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                >
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex lg:gap-x-12">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Product</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Features</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Marketplace</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Company</a
+                >
+            </div>
+            <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Log in <span aria-hidden="true">&rarr;</span></a
+                >
+            </div>
+        </nav>
+        <el-dialog>
+            <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
+                <div tabindex="0" class="fixed inset-0 focus:outline-none">
+                    <el-dialog-panel
+                        class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+                    >
+                        <div class="flex items-center justify-between">
+                            <a href="#" class="-m-1.5 p-1.5">
+                                <span class="sr-only">Your Company</span>
+                                <img
+                                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                                    alt=""
+                                    class="h-8 w-auto"
+                                />
+                            </a>
+                            <button
+                                type="button"
+                                command="close"
+                                commandfor="mobile-menu"
+                                class="-m-2.5 rounded-md p-2.5 text-gray-700"
+                            >
+                                <span class="sr-only">Close menu</span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M6 18 18 6M6 6l12 12"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="mt-6 flow-root">
+                            <div class="-my-6 divide-y divide-gray-500/10">
+                                <div class="space-y-2 py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Product</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Features</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Marketplace</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Company</a
+                                    >
+                                </div>
+                                <div class="py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Log in</a
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </el-dialog-panel>
+                </div>
+            </dialog>
+        </el-dialog>
+    </header>
+    <div
+        class="relative isolate overflow-hidden bg-linear-to-b from-indigo-100/20 pt-14"
+    >
+        <div
+            aria-hidden="true"
+            class="absolute inset-y-0 right-1/2 -z-10 -mr-96 w-[200%] origin-top-right skew-x-[-30deg] bg-white shadow-xl ring-1 shadow-indigo-600/10 ring-indigo-50 sm:-mr-80 lg:-mr-96"
+        ></div>
+        <div class="mx-auto max-w-7xl px-6 py-32 sm:py-40 lg:px-8">
+            <div
+                class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-x-16 lg:gap-y-8 xl:grid-cols-1 xl:grid-rows-1 xl:gap-x-8"
+            >
+                <h1
+                    class="max-w-2xl text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl lg:col-span-2 xl:col-auto"
+                >
+                    We’re changing the way people connect
+                </h1>
+                <div class="mt-6 max-w-xl lg:mt-0 xl:col-end-1 xl:row-start-1">
+                    <p
+                        class="text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
+                    >
+                        Anim aute id magna aliqua ad ad non deserunt sunt. Qui
+                        irure qui lorem cupidatat commodo. Elit sunt amet fugiat
+                        veniam occaecat fugiat aliqua. Anim aute id magna aliqua
+                        ad ad non deserunt sunt. Qui irure qui lorem cupidatat
+                        commodo.
+                    </p>
+                    <div class="mt-10 flex items-center gap-x-6">
+                        <a
+                            href="#"
+                            class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                            >Get started</a
+                        >
+                        <a
+                            href="#"
+                            class="text-sm/6 font-semibold text-gray-900"
+                            >Learn more <span aria-hidden="true">→</span></a
+                        >
+                    </div>
+                </div>
+                <img
+                    src="https://images.unsplash.com/photo-1567532900872-f4e906cbf06a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80"
+                    alt=""
+                    class="mt-10 aspect-6/5 w-full max-w-lg rounded-2xl object-cover sm:mt-16 lg:mt-0 lg:max-w-none xl:row-span-2 xl:row-end-2 xl:mt-36"
+                />
+            </div>
+        </div>
+        <div
+            class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-linear-to-t from-white sm:h-32"
+        ></div>
+    </div>
+</div>
diff --git a/marketing/page_sections/hero_sections/with_phone_mockup.html b/marketing/page_sections/hero_sections/with_phone_mockup.html
new file mode 100644
index 0000000..3ee12fa
--- /dev/null
+++ b/marketing/page_sections/hero_sections/with_phone_mockup.html
@@ -0,0 +1,268 @@
+<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
+<div class="bg-white">
+    <header class="absolute inset-x-0 top-0 z-50">
+        <nav
+            aria-label="Global"
+            class="flex items-center justify-between p-6 lg:px-8"
+        >
+            <div class="flex lg:flex-1">
+                <a href="#" class="-m-1.5 p-1.5">
+                    <span class="sr-only">Your Company</span>
+                    <img
+                        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                        alt=""
+                        class="h-8 w-auto"
+                    />
+                </a>
+            </div>
+            <div class="flex lg:hidden">
+                <button
+                    type="button"
+                    command="show-modal"
+                    commandfor="mobile-menu"
+                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+                >
+                    <span class="sr-only">Open main menu</span>
+                    <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        data-slot="icon"
+                        aria-hidden="true"
+                        class="size-6"
+                    >
+                        <path
+                            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                        />
+                    </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex lg:gap-x-12">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Product</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Features</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Marketplace</a
+                >
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Company</a
+                >
+            </div>
+            <div class="hidden lg:flex lg:flex-1 lg:justify-end">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                    >Log in <span aria-hidden="true">&rarr;</span></a
+                >
+            </div>
+        </nav>
+        <el-dialog>
+            <dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
+                <div tabindex="0" class="fixed inset-0 focus:outline-none">
+                    <el-dialog-panel
+                        class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
+                    >
+                        <div class="flex items-center justify-between">
+                            <a href="#" class="-m-1.5 p-1.5">
+                                <span class="sr-only">Your Company</span>
+                                <img
+                                    src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
+                                    alt=""
+                                    class="h-8 w-auto"
+                                />
+                            </a>
+                            <button
+                                type="button"
+                                command="close"
+                                commandfor="mobile-menu"
+                                class="-m-2.5 rounded-md p-2.5 text-gray-700"
+                            >
+                                <span class="sr-only">Close menu</span>
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    data-slot="icon"
+                                    aria-hidden="true"
+                                    class="size-6"
+                                >
+                                    <path
+                                        d="M6 18 18 6M6 6l12 12"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                    />
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="mt-6 flow-root">
+                            <div class="-my-6 divide-y divide-gray-500/10">
+                                <div class="space-y-2 py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Product</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Features</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Marketplace</a
+                                    >
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Company</a
+                                    >
+                                </div>
+                                <div class="py-6">
+                                    <a
+                                        href="#"
+                                        class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
+                                        >Log in</a
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    </el-dialog-panel>
+                </div>
+            </dialog>
+        </el-dialog>
+    </header>
+
+    <div class="relative isolate pt-14">
+        <svg
+            aria-hidden="true"
+            class="absolute inset-0 -z-10 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200"
+        >
+            <defs>
+                <pattern
+                    id="83fd4e5a-9d52-42fc-97b6-718e5d7ee527"
+                    width="200"
+                    height="200"
+                    x="50%"
+                    y="-1"
+                    patternUnits="userSpaceOnUse"
+                >
+                    <path d="M100 200V.5M.5 .5H200" fill="none" />
+                </pattern>
+            </defs>
+            <svg x="50%" y="-1" class="overflow-visible fill-gray-50">
+                <path
+                    d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z"
+                    stroke-width="0"
+                />
+            </svg>
+            <rect
+                width="100%"
+                height="100%"
+                fill="url(#83fd4e5a-9d52-42fc-97b6-718e5d7ee527)"
+                stroke-width="0"
+            />
+        </svg>
+        <div
+            class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-10 lg:px-8 lg:py-40"
+        >
+            <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
+                <div class="flex">
+                    <div
+                        class="relative flex items-center gap-x-4 rounded-full bg-white px-4 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
+                    >
+                        <span class="font-semibold text-indigo-600"
+                            >We’re hiring</span
+                        >
+                        <span
+                            aria-hidden="true"
+                            class="h-4 w-px bg-gray-900/10"
+                        ></span>
+                        <a href="#" class="flex items-center gap-x-1">
+                            <span
+                                aria-hidden="true"
+                                class="absolute inset-0"
+                            ></span>
+                            See open positions
+                            <svg
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                data-slot="icon"
+                                aria-hidden="true"
+                                class="-mr-2 size-5 text-gray-400"
+                            >
+                                <path
+                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+                                    clip-rule="evenodd"
+                                    fill-rule="evenodd"
+                                />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+                <h1
+                    class="mt-10 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
+                >
+                    A better way to ship your projects
+                </h1>
+                <p
+                    class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
+                >
+                    Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
+                    qui lorem cupidatat commodo. Elit sunt amet fugiat veniam
+                    occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non
+                    deserunt sunt.
+                </p>
+                <div class="mt-10 flex items-center gap-x-6">
+                    <a
+                        href="#"
+                        class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                        >Get started</a
+                    >
+                    <a href="#" class="text-sm/6 font-semibold text-gray-900"
+                        >Learn more <span aria-hidden="true">→</span></a
+                    >
+                </div>
+            </div>
+            <div class="mt-16 sm:mt-24 lg:mt-0 lg:shrink-0 lg:grow">
+                <svg
+                    role="img"
+                    viewBox="0 0 366 729"
+                    class="mx-auto w-91.5 max-w-full drop-shadow-xl"
+                >
+                    <title>App screenshot</title>
+                    <defs>
+                        <clipPath id="2ade4387-9c63-4fc4-b754-10e687a0d332">
+                            <rect width="316" height="684" rx="36" />
+                        </clipPath>
+                    </defs>
+                    <path
+                        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
+                        fill="#4B5563"
+                    />
+                    <path
+                        d="M16 59c0-23.748 19.252-43 43-43h246c23.748 0 43 19.252 43 43v615c0 23.196-18.804 42-42 42H58c-23.196 0-42-18.804-42-42V59Z"
+                        fill="#343E4E"
+                    />
+                    <foreignObject
+                        width="316"
+                        height="684"
+                        clip-path="url(#2ade4387-9c63-4fc4-b754-10e687a0d332)"
+                        transform="translate(24 24)"
+                    >
+                        <img
+                            src="https://tailwindcss.com/plus-assets/img/component-images/mobile-app-screenshot.png"
+                            alt=""
+                        />
+                    </foreignObject>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>