update home page

components/shared/SectionContainer.tsx

@@ -0,0 +1,54 @@
+import { type ReactNode } from "react";
+
+type PaddingSize = "none" | "sm" | "md" | "lg" | "xl";
+
+interface SectionContainerProps {
+  children: ReactNode;
+  className?: string;
+  /** Vertical padding preset — maps to spacing tokens */
+  paddingY?: PaddingSize;
+  /** HTML element to render */
+  as?: "section" | "div";
+  /** Section id for anchor links */
+  id?: string;
+}
+
+/**
+ * Tailwind class map for vertical section padding.
+ *
+ * Values use the spacing tokens from design-tokens.ts:
+ *   sm  = 60px
+ *   md  = 60px → 80px
+ *   lg  = 60px → 80px → 100px
+ *   xl  = 60px → 80px → 100px → 120px
+ */
+const paddingYClasses: Record<PaddingSize, string> = {
+  none: "",
+  sm: "py-[60px]",
+  md: "py-[60px] md:py-[80px]",
+  lg: "py-[60px] md:py-[80px] lg:py-[100px]",
+  xl: "py-[60px] md:py-[80px] lg:py-[100px] xl:py-[120px]",
+};
+
+/**
+ * SectionContainer — consistent vertical spacing for page sections.
+ *
+ * Use this to wrap every major page section. The `paddingY` prop
+ * selects from predefined responsive spacing tokens.
+ *
+ * Does NOT include horizontal constraints — nest a `PageContainer`
+ * inside for boxed content.
+ */
+export function SectionContainer({
+  children,
+  className = "",
+  paddingY = "lg",
+  as: Tag = "section",
+  id,
+}: SectionContainerProps) {
+  return (
+    <Tag id={id} className={`${paddingYClasses[paddingY]} ${className}`}>
+      {children}
+    </Tag>
+  );
+}