npm - @woodsportal/hubspot-kit - Versions diffs - 1.0.41-dev.4 → 1.0.41-dev.6 - Mend

@woodsportal/hubspot-kit 1.0.41-dev.4 → 1.0.41-dev.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (580) hide show

package/examples/greenfield/module-hybrid-cdn-auth-starter/hubspot.config.yml.example ADDED Viewed

@@ -0,0 +1,10 @@
+# HubSpot CLI personal access key — copy to hubspot.config.yml (gitignored).
+# Generate at: https://app.hubspot.com/l/personal-access-key
+# Docs: https://developers.hubspot.com/docs/cms/developer-reference/local-development-cli
+defaultPortal: your-portal-id
+portals:
+  - name: staging
+    portalId: 12345678
+    authType: personalaccesskey
+    personalAccessKey: YOUR_PAT_HERE

package/examples/greenfield/module-hybrid-cdn-auth-starter/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WoodsCLI dev</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/examples/greenfield/module-hybrid-cdn-auth-starter/package.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "name": "module-hybrid-cdn-auth-starter",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "local": "wp dev",
+    "doctor": "wp doctor",
+    "build:prod": "wp build --tier prod",
+    "deploy:prod": "wp deploy --tier prod --yes",
+    "dev": "wp dev",
+    "build:dev": "wp build --tier dev",
+    "deploy:dev": "wp deploy --tier dev --yes"
+  },
+  "devDependencies": {
+    "@woodsportal/hubspot-kit": "^1.0.30",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-router": "^1.121.2",
+    "@tanstack/router-plugin": "^1.121.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.6",
+    "vite": "^6.1.0",
+    "woodsportal-client-sdk": "^4.0.7-dev.11",
+    "@tanstack/react-query": "^5.66.9",
+    "@t3-oss/env-core": "^0.12.0",
+    "zod": "^3.24.2",
+    "sonner": "^2.0.1"
+  }
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/portal.cdn.json.example ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "publishMode": "jsdelivr",
+  "github": "your-org/your-portal-cdn-mirror",
+  "gitRemote": "https://github.com/your-org/your-portal-cdn-mirror.git",
+  "cdnPathInRepo": "dist/cdn",
+  "defaultBranch": "main",
+  "_note": "Forks: point github/gitRemote at your jsDelivr mirror repo, or set cdn.mode custom in woodscli.json."
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/public/fields.json ADDED Viewed

@@ -0,0 +1,100 @@
+[
+  {
+    "type": "group",
+    "name": "content",
+    "label": "Content",
+    "tab": "CONTENT",
+    "children": [
+      {
+        "name": "title",
+        "label": "Portal title",
+        "type": "text",
+        "default": "My HubSpot Portal"
+      },
+      {
+        "name": "tagline",
+        "label": "Tagline",
+        "type": "text",
+        "display": "textarea",
+        "help_text": "Subtitle shown under the hero title.",
+        "default": "Customize this preview with Ctrl+Shift+Z, then replace StarterPage with your portal app."
+      },
+      {
+        "name": "show_feature_cards",
+        "label": "Show feature cards",
+        "type": "boolean",
+        "display": "toggle",
+        "default": true
+      }
+    ]
+  },
+  {
+    "type": "group",
+    "name": "style",
+    "label": "Style",
+    "tab": "STYLE",
+    "children": [
+      {
+        "type": "group",
+        "name": "module_global_colors",
+        "label": "Module Global Colors",
+        "tab": "STYLE",
+        "children": [
+          {
+            "name": "primary_color",
+            "label": "Primary Color",
+            "type": "color",
+            "default": {
+              "color": "#FF7A59",
+              "opacity": 100
+            }
+          },
+          {
+            "name": "secondary_color",
+            "label": "Secondary Color",
+            "type": "color",
+            "default": {
+              "color": "#2797AF",
+              "opacity": 100
+            }
+          },
+          {
+            "name": "button_text_color",
+            "label": "Button Text Color",
+            "type": "color",
+            "default": {
+              "color": "#FFFFFF",
+              "opacity": 100
+            }
+          }
+        ],
+        "default": {
+          "primary_color": {
+            "color": "#FF7A59",
+            "opacity": 100
+          },
+          "secondary_color": {
+            "color": "#2797AF",
+            "opacity": 100
+          },
+          "button_text_color": {
+            "color": "#FFFFFF",
+            "opacity": 100
+          }
+        }
+      },
+      {
+        "name": "hero_style",
+        "label": "Hero style",
+        "type": "choice",
+        "display": "select",
+        "choices": [
+          ["gradient", "Gradient"],
+          ["minimal", "Minimal"],
+          ["bold", "Bold"]
+        ],
+        "default": "gradient"
+      }
+    ]
+  }
+]

package/examples/greenfield/module-hybrid-cdn-auth-starter/public/meta.json ADDED Viewed

@@ -0,0 +1,9 @@
+{
+  "label": "WoodsPortal hybrid module",
+  "css_assets": [],
+  "external_js": [],
+  "global": false,
+  "host_template_types": ["PAGE", "BLOG_POST", "BLOG_LISTING"],
+  "content_types": ["SITE_PAGE", "LANDING_PAGE", "BLOG_POST", "BLOG_LISTING"],
+  "is_available_for_new_content": true
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/public/module.html ADDED Viewed

@@ -0,0 +1,38 @@
+{# Hybrid CDN — React app loads from jsDelivr; module.js is a thin bootstrap only. #}
+{% set in_cms_editor = is_in_editor or is_in_page_editor or is_in_previewer %}
+{% require_css %}
+<style>
+{% scope_css %}
+:root {
+  --primary-color: {{ module.style.module_global_colors.primary_color.color|default('#FF7A59') }};
+  --secondary-color: {{ module.style.module_global_colors.secondary_color.color|default('#2797AF') }};
+  --button-text-color: {{ module.style.module_global_colors.button_text_color.color|default('#FFFFFF') }};
+}
+p:not([class]) {
+  margin: 0;
+}
+ul, ol {
+  margin: 0;
+}
+{% end_scope_css %}
+</style>
+{% end_require_css %}
+<script>
+  window.hsInEditor = {{ in_cms_editor|lower }};
+  window.hubSpotData = {
+    title: {{ module.content.title|default(module.title)|tojson }},
+    tagline: {{ module.content.tagline|default(module.tagline)|tojson }},
+    show_feature_cards: {{ module.content.show_feature_cards|default(module.show_feature_cards)|lower }},
+    hero_style: {{ module.style.hero_style|tojson }},
+    assetBaseUrl: "__PORTAL_CDN_BASE__",
+    buildId: "__PORTAL_BUILD_ID__",
+    isInEditor: {{ in_cms_editor|lower }}
+  };
+</script>
+{% set portal_cdn_base = "__PORTAL_CDN_BASE__" %}
+{% set portal_vendor_script = "__PORTAL_VENDOR_FILE__" %}
+{% set portal_app_script = "__PORTAL_APP_FILE__" %}
+{# App styles ship in module.css (HubSpot editor cannot rely on external CDN CSS). #}
+{{ require_js(portal_cdn_base ~ '/' ~ portal_vendor_script, { position: 'footer', defer: true }) }}
+{{ require_js(portal_cdn_base ~ '/' ~ portal_app_script, { position: 'footer', defer: true }) }}
+<div id="app"></div>

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/app.tsx ADDED Viewed

@@ -0,0 +1,173 @@
+import { useEffect, useRef, useState } from 'react'
+import { RouterProvider } from '@tanstack/react-router'
+import { installCrossTabSessionListener } from 'woodsportal-client-sdk'
+import { api } from '@/integrations/woodsportal-sdk'
+import * as TanStackQueryProvider from '@/integrations/tanstack-query/root-provider'
+import { env } from '@/env'
+import Loader from '@/components/ui/loader/loader'
+import { skipCurrentPublicPath } from '@/utils/ValidationSchema'
+import { isHubSpotCmsEditor } from '@/hubspot/is-cms-editor'
+import { navigateAfterFullAuth, navigateToLogin } from '@/features/auth/auth-navigation'
+import { isProtectedHashPath, readHashPathname, isPublicAuthRoute } from '@/features/auth/auth-route-paths'
+import { hardReplaceToHashPath } from '@/utils/safe-router-navigation'
+import {
+  isFullyAuthenticatedSession,
+  isMfaPendingSession,
+  recoverMfaGateOnBoot,
+} from '@/features/auth/auth-session'
+import { shouldBootstrapRefreshSession } from '@/features/auth/app-bootstrap-guards'
+import {
+  clearClientAuthSession,
+  registerClientSessionQueryClear,
+} from '@/features/auth/clear-client-auth-session'
+import { Routes } from '@/config/routes'
+import { AUTH_SCAFFOLD_TIER } from '@/config/auth-tier'
+import type { router } from '@/integrations/tanstack-router/router'
+const BOOTSTRAP_TIMEOUT_MS = 35_000
+type AppProps = {
+  router: typeof router
+}
+export function App({ router }: AppProps) {
+  const session = api.auth.session
+  const [isLoading, setIsLoading] = useState(true)
+  const inCmsEditor = isHubSpotCmsEditor()
+  const initialBootstrapDone = useRef(false)
+  const bootstrapStarted = useRef(false)
+  useEffect(() => {
+    const queryClient = TanStackQueryProvider.getContext().queryClient
+    registerClientSessionQueryClear(() => {
+      queryClient.cancelQueries()
+      queryClient.clear()
+    })
+    return installCrossTabSessionListener((kind) => {
+      if (kind === 'rev') {
+        clearClientAuthSession({ signalCrossTab: false })
+        queryClient.cancelQueries()
+        queryClient.clear()
+      }
+    })
+  }, [])
+  useEffect(() => {
+    if (bootstrapStarted.current) {
+      return
+    }
+    bootstrapStarted.current = true
+    if (!initialBootstrapDone.current) {
+      setIsLoading(true)
+    }
+    let mounted = true
+    const { logout } = api.auth.logout({})
+    const redirectProtectedPathToLogin = async (): Promise<void> => {
+      if (!skipCurrentPublicPath() || inCmsEditor) {
+        return
+      }
+      const hashPath = readHashPathname()
+      const routerPath = router?.state?.location?.pathname
+      const currentPath = routerPath && routerPath !== '/' ? routerPath : hashPath
+      const returnHref = router?.state?.location?.href ?? window.location.hash.replace(/^#/, '') ?? ''
+      const redirectPath =
+        currentPath !== Routes.login ? `?r=${encodeURIComponent(returnHref)}` : ''
+      const loginTarget = `${Routes.login}${redirectPath}`
+      await navigateToLogin(router, loginTarget)
+      if (isProtectedHashPath()) {
+        hardReplaceToHashPath(loginTarget)
+      }
+    }
+    const teardownAndRedirectToLogin = async (): Promise<void> => {
+      clearClientAuthSession()
+      try {
+        await logout()
+      } catch {
+        // stale session
+      }
+      await redirectProtectedPathToLogin()
+    }
+    const runBootstrap = async (): Promise<void> => {
+      // MFA gate recovery on cold load (full tier only)
+      const sessionRefreshExhausted = session.isSessionRefreshExhausted?.() ?? false
+      const refreshToken = session.getRefreshToken()
+      const hasRefresh =
+        !sessionRefreshExhausted &&
+        Boolean(refreshToken) &&
+        !session.isCookieExpired(env.VITE_REFRESH_TOKEN)
+      if (
+        !shouldBootstrapRefreshSession({
+          isMfaPendingSession: isMfaPendingSession(),
+          hasRefresh,
+          isPublicAuthRoute: isPublicAuthRoute(readHashPathname()),
+        })
+      ) {
+        if (!hasRefresh && skipCurrentPublicPath() && !inCmsEditor) {
+          await teardownAndRedirectToLogin()
+        }
+        return
+      }
+      try {
+        await session.refreshSession({ force: true })
+      } catch {
+        if (!inCmsEditor) {
+          await teardownAndRedirectToLogin()
+        }
+        return
+      }
+      if (isFullyAuthenticatedSession()) {
+        const hashPath = readHashPathname()
+        if (hashPath === Routes.twoFa || hashPath === Routes.login) {
+          navigateAfterFullAuth(router)
+        }
+      }
+    }
+    const bootstrap = async () => {
+      try {
+        await Promise.race([
+          runBootstrap(),
+          new Promise<never>((_, reject) => {
+            window.setTimeout(() => reject(new Error('bootstrap_timeout')), BOOTSTRAP_TIMEOUT_MS)
+          }),
+        ])
+      } catch (error) {
+        if (!inCmsEditor && skipCurrentPublicPath()) {
+          await teardownAndRedirectToLogin()
+        } else if (error instanceof Error && error.message !== 'bootstrap_timeout') {
+          throw error
+        }
+      } finally {
+        if (mounted) {
+          initialBootstrapDone.current = true
+          setIsLoading(false)
+        }
+      }
+    }
+    void bootstrap()
+    return () => {
+      mounted = false
+    }
+  }, [inCmsEditor, router])
+  if (isLoading) {
+    return <Loader showText={false} />
+  }
+  return (
+    <TanStackQueryProvider.Provider>
+      <RouterProvider router={router} />
+    </TanStackQueryProvider.Provider>
+  )
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/assets/css/main.dev.css ADDED Viewed

@@ -0,0 +1,23 @@
+/**
+ * LOCAL DEV ONLY (wp dev) — unprefixed Tailwind utilities.
+ *
+ * Never merge with main.prod.css:
+ * - Do not add dw prefix on this file
+ * - Do not point @source at .temp/ only (that is for HubSpot builds)
+ */
+@import 'tailwindcss';
+@import './tailwind.css.config.css';
+/* WoodsPortal module global colors — defaults until HubSpot fields / module-config apply overrides */
+:root {
+  --primary-color: #ff7a59;
+  --secondary-color: #2797af;
+  --button-text-color: #ffffff;
+}
+/* Kit dev-module-config — paths relative to this file (src/assets/css/) */
+@source '../../../.wphs/.kit-module-config/**/*.{ts,tsx}';
+@source '../../../.wphs/.kit-bootstrap.tsx';
+@source '../../../.wphs/.kit-bootstrap-greenfield.tsx';
+@source '../../../src/**/*.{ts,tsx}';
+@source '../../../node_modules/@woodsportal/hubspot-kit/src/dev-module-config/**/*.{ts,tsx}';

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/assets/css/main.prod.css ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * HUBSPOT / CDN BUILDS ONLY (wp build) — dw-prefixed Tailwind utilities.
+ *
+ * Never merge with main.dev.css:
+ * - Do not remove @source for .temp/ (prefix plugin + tailwind-content.js)
+ * - Do not add raw src/** @source (class names would not match prefixed JS)
+ */
+@import 'tailwindcss' prefix(dw);
+@import './tailwind.css.config.css';
+/* Prefixed utilities from tailwind-content.js (.temp) — must match prefix plugin on TSX */
+@source '../../../.temp/**/*.{js,jsx,ts,tsx}';

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/assets/css/tailwind.css.config.css ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * Shared Tailwind theme tokens — import from both main.dev.css and main.prod.css.
+ * Do not add prefix(dw) here; prefix is set only in main.prod.css.
+ */
+@theme {
+  --color-starter-accent: var(--starter-accent, #0091ae);
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/cdn/app-entry.ts ADDED Viewed

@@ -0,0 +1,48 @@
+/**
+ * CDN application chunk — mounts after vendor.js (HubSpot require_js order).
+ *
+ * Build-time: main.prod.css → app.{buildId}.css (merged into module.css at post-build).
+ * Runtime: skip JS CSS imports — HubSpot serves module.css on published pages.
+ */
+import '@/assets/css/main.prod.css'
+import { resolvePortalApiEndpoint } from '@/portal/api-endpoint'
+import { ensurePortalCdnStylesheetIfNeeded } from '@/portal/ensure-portal-cdn-stylesheet'
+import { mountPortal } from '@/portal/mount-portal'
+declare const __PORTAL_BUILD_ID__: string | undefined
+declare global {
+  interface Window {
+    WoodsPortal?: {
+      mount: typeof mountPortal
+      version: string
+      apiEndpoint: string
+    }
+  }
+}
+const buildId =
+  typeof __PORTAL_BUILD_ID__ !== 'undefined' ? String(__PORTAL_BUILD_ID__) : 'dev'
+window.WoodsPortal = {
+  mount: mountPortal,
+  version: buildId,
+  apiEndpoint: resolvePortalApiEndpoint(),
+}
+async function autoMount() {
+  if (!document.getElementById('app')) {
+    return
+  }
+  await ensurePortalCdnStylesheetIfNeeded()
+  await mountPortal({ skipRuntimeCss: true })
+}
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    void autoMount()
+  })
+} else {
+  void autoMount()
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/cdn/vendor-entry.ts ADDED Viewed

@@ -0,0 +1,28 @@
+/**
+ * CDN vendor chunk — React + ReactDOM on `window` for the app IIFE externals.
+ */
+import React from 'react'
+import * as ReactDOM from 'react-dom'
+import * as ReactDOMClient from 'react-dom/client'
+import * as jsxRuntime from 'react/jsx-runtime'
+import * as jsxDevRuntime from 'react/jsx-dev-runtime'
+declare global {
+  interface Window {
+    WoodsPortalVendor?: {
+      React: typeof React
+      ReactDOM: typeof ReactDOM
+      ReactDOMClient: typeof ReactDOMClient
+      jsxRuntime: typeof jsxRuntime
+      jsxDevRuntime: typeof jsxDevRuntime
+    }
+  }
+}
+window.WoodsPortalVendor = {
+  React,
+  ReactDOM,
+  ReactDOMClient,
+  jsxRuntime,
+  jsxDevRuntime,
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/components/Layouts/AppLayoutWrapper.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import { Outlet, useMatches } from '@tanstack/react-router'
+import { Toaster } from '@/components/ui/Toaster'
+import { layoutMap } from '@/components/Layouts'
+import PrivateRoute from '@/utils/private-route'
+import PublicRoute from '@/utils/public-route'
+export default function AppLayoutWrapper() {
+  const matches = useMatches()
+  const match = [...matches].reverse().find((m) => (m.context as { layout?: string })?.layout)
+  const context = (match?.context ?? {}) as {
+    layout?: keyof typeof layoutMap
+    requiresAuth?: boolean
+  }
+  const requiresAuth = context.requiresAuth ?? false
+  const RouteGuard = requiresAuth ? PrivateRoute : PublicRoute
+  const LayoutComponent = layoutMap[context.layout ?? 'DefaultLayout'] ?? layoutMap.DefaultLayout
+  if (context.layout === 'UnauthorizedLayout') {
+    return (
+      <>
+        <LayoutComponent>
+          <Outlet />
+        </LayoutComponent>
+        <Toaster />
+      </>
+    )
+  }
+  return (
+    <RouteGuard>
+      <LayoutComponent>
+        <Outlet />
+      </LayoutComponent>
+      <Toaster />
+    </RouteGuard>
+  )
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/components/Layouts/AuthLayout.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+export default function AuthLayout({ children }: { children?: ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">{children}</div>
+  )
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/components/Layouts/DefaultLayout.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+export default function DefaultLayout({ children }: { children?: ReactNode }) {
+  return <div className="min-h-screen">{children}</div>
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/components/Layouts/MainLayout.tsx ADDED Viewed

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+import { Link } from '@/components/ui/link'
+import { portalNavItems } from '@/config/portal-nav'
+import { usePortalSession } from '@/features/auth/use-portal-session'
+import { api } from '@/integrations/woodsportal-sdk'
+export default function MainLayout({ children }: { children?: ReactNode }) {
+  const isAuthenticated = usePortalSession()
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return
+    }
+    const { me } = api.auth.me({})
+    void me()
+  }, [isAuthenticated])
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between gap-4">
+          <span className="text-sm font-semibold text-gray-900">WoodsPortal</span>
+          <nav className="flex flex-wrap items-center gap-4 text-sm">
+            {portalNavItems.map((item) => (
+              <Link
+                key={item.to}
+                to={item.to}
+                activeProps={{ className: 'font-semibold text-gray-900 no-underline' }}
+                activeOptions={{ exact: true }}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">{children}</main>
+    </div>
+  )
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/components/Layouts/UnauthorizedLayout.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+export default function UnauthorizedLayout({ children }: { children?: ReactNode }) {
+  return <div className="min-h-screen bg-gray-50">{children}</div>
+}

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/components/Layouts/index.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import MainLayout from '@/components/Layouts/MainLayout'
+import AuthLayout from '@/components/Layouts/AuthLayout'
+import DefaultLayout from '@/components/Layouts/DefaultLayout'
+import UnauthorizedLayout from '@/components/Layouts/UnauthorizedLayout'
+export const layoutMap = {
+  MainLayout,
+  AuthLayout,
+  DefaultLayout,
+  UnauthorizedLayout,
+} as const
+export type LayoutName = keyof typeof layoutMap

package/examples/greenfield/module-hybrid-cdn-auth-starter/src/components/layout/section-card.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+export function SectionCard({
+  title,
+  children,
+  className = '',
+}: {
+  title: string
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <section
+      className={`rounded-lg border border-[#cbd6e2] bg-white p-6 shadow-sm ${className}`}
+    >
+      <h2 className="text-base font-semibold text-[#33475b]">{title}</h2>
+      <div className="mt-4">{children}</div>
+    </section>
+  )
+}