init

src/components/Section.astro

@@ -0,0 +1,34 @@
+---
+import { cn } from '@/libs/cn'
+
+type Props = {
+  title?: string
+  description?: string
+  className?: string
+  id?: string
+}
+
+const { title, description, className, id } = Astro.props
+---
+
+<section
+  class={cn(
+    'flex flex-col gap-6 py-10 px-6 md:p-24 md:gap-14',
+    className
+  )}
+  id={id}
+>
+  {
+    (title || description) && (
+      <div class="flex w-full max-w-[750px] flex-col gap-6 self-center text-center">
+        {title && (
+          <h2 class="text-4xl font-bold leading-tight md:text-5xl">
+            <Fragment set:html={title} />
+          </h2>
+        )}
+        {description && <p>{description}</p>}
+      </div>
+    )
+  }
+  <slot />
+</section>