feat: HeroSplit section

wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { tv, type VariantProps } from "tailwind-variants";
+import type { SectionHeroSplitFragment } from "#graphql/operations";
+
+const tvSectionHeroSplit = tv({
+  slots: {
+    base: "py-6",
+    container: "container flex flex-col gap-6 items-center",
+    content: "flex-1",
+    media: "w-full basis-1/2",
+  },
+  variants: {
+    reverse: {
+      false: {
+        container: "lg:flex-row",
+      },
+      true: {
+        container: "lg:flex-row-reverse",
+      },
+    },
+  },
+  defaultVariants: {
+    reverse: false,
+  },
+});
+
+const props = defineProps<SectionHeroSplitFragment>();
+const classes = tvSectionHeroSplit({
+  reverse: props.reverse,
+} as VariantProps<typeof tvSectionHeroSplit>);
+</script>
+
+<template>
+  <section :class="classes.base()">
+    <div :class="classes.container()">
+      <UiProse :content="content" :class="classes.content()" />
+      <AcfMedia :media="$props" :class="classes.media()" />
+    </div>
+  </section>
+</template>