3 files changed, 181 insertions, 0 deletions
diff --git a/src/components/templates/sectioned/sectioned-layout.stories.tsx b/src/components/templates/sectioned/sectioned-layout.stories.tsx
new file mode 100644
index 0000000..689f9a7
--- /dev/null
+++ b/src/components/templates/sectioned/sectioned-layout.stories.tsx
@@ -0,0 +1,80 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { LayoutBase } from '../layout/layout.stories';
+import SectionedLayoutComponent from './sectioned-layout';
+
+/**
+ * SectionedLayout - Storybook Meta
+ */
+export default {
+  title: 'Templates/Sectioned',
+  component: SectionedLayoutComponent,
+  args: {
+    breadcrumbSchema: [],
+  },
+  argTypes: {
+    breadcrumbSchema: {
+      control: {
+        type: null,
+      },
+      description: 'The JSON schema for breadcrumb items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    sections: {
+      description: 'The different sections.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <LayoutBase {...LayoutBase.args}>
+        <Story />
+      </LayoutBase>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof SectionedLayoutComponent>;
+
+const Template: ComponentStory<typeof SectionedLayoutComponent> = (args) => (
+  <SectionedLayoutComponent {...args} />
+);
+
+const sections = [
+  {
+    title: 'Section 1',
+    content:
+      'Qui suscipit ea et aut dicta. Quia ut dignissimos. Sapiente beatae voluptatem quis et. Nemo vitae magni. Nihil iste officia est sed esse molestiae doloribus. Quia temporibus nobis ea fuga quis incidunt doloribus eaque.',
+  },
+  {
+    title: 'Section 2',
+    content:
+      'Reprehenderit aut magnam ut quos. Voluptatibus beatae et. Earum non atque voluptatum illum rem distinctio repellat.',
+  },
+  {
+    title: 'Section 3',
+    content:
+      'Placeat rem dolores dolore illum earum officia dolore. Ut est ducimus. Officia eveniet pariatur ut laboriosam voluptatibus aut doloremque natus quis.',
+  },
+  {
+    title: 'Section 4',
+    content:
+      'Vitae facere ipsa eum sunt debitis veritatis dolorem labore qui. Dolores recusandae omnis aut. Repudiandae quia neque porro in blanditiis. A atque minima fugit. Totam quidem voluptas natus velit at.',
+  },
+];
+
+/**
+ * Sectioned Layout Stories - Default
+ */
+export const Sectioned = Template.bind({});
+Sectioned.args = {
+  sections,
+};
diff --git a/src/components/templates/sectioned/sectioned-layout.test.tsx b/src/components/templates/sectioned/sectioned-layout.test.tsx
new file mode 100644
index 0000000..9b8bab5
--- /dev/null
+++ b/src/components/templates/sectioned/sectioned-layout.test.tsx
@@ -0,0 +1,41 @@
+import { render, screen } from '@test-utils';
+import { BreadcrumbList } from 'schema-dts';
+import SectionedLayout from './sectioned-layout';
+
+const breadcrumbSchema: BreadcrumbList['itemListElement'][] = [];
+const sections = [
+  {
+    title: 'Section 1',
+    content:
+      'Qui suscipit ea et aut dicta. Quia ut dignissimos. Sapiente beatae voluptatem quis et. Nemo vitae magni. Nihil iste officia est sed esse molestiae doloribus. Quia temporibus nobis ea fuga quis incidunt doloribus eaque.',
+  },
+  {
+    title: 'Section 2',
+    content:
+      'Reprehenderit aut magnam ut quos. Voluptatibus beatae et. Earum non atque voluptatum illum rem distinctio repellat.',
+  },
+  {
+    title: 'Section 3',
+    content:
+      'Placeat rem dolores dolore illum earum officia dolore. Ut est ducimus. Officia eveniet pariatur ut laboriosam voluptatibus aut doloremque natus quis.',
+  },
+  {
+    title: 'Section 4',
+    content:
+      'Vitae facere ipsa eum sunt debitis veritatis dolorem labore qui. Dolores recusandae omnis aut. Repudiandae quia neque porro in blanditiis. A atque minima fugit. Totam quidem voluptas natus velit at.',
+  },
+];
+
+describe('SectionedLayout', () => {
+  it('renders the correct number of section', () => {
+    render(
+      <SectionedLayout
+        breadcrumbSchema={breadcrumbSchema}
+        sections={sections}
+      />
+    );
+    expect(screen.getAllByRole('heading', { name: /^Section/ })).toHaveLength(
+      sections.length
+    );
+  });
+});
diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
new file mode 100644
index 0000000..f91c354
--- /dev/null
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -0,0 +1,60 @@
+import Section, {
+  type SectionProps,
+  type SectionVariant,
+} from '@components/atoms/layout/section';
+import Script from 'next/script';
+import { FC } from 'react';
+import { BreadcrumbList } from 'schema-dts';
+
+export type Section = Pick<SectionProps, 'content' | 'title'>;
+
+export type SectionedLayoutProps = {
+  /**
+   * The breadcrumb JSON schema.
+   */
+  breadcrumbSchema: BreadcrumbList['itemListElement'][];
+  /**
+   * An array of objects describing each section.
+   */
+  sections: Section[];
+};
+
+/**
+ * SectionedLayout component
+ *
+ * Render a sectioned layout.
+ */
+const SectionedLayout: FC<SectionedLayoutProps> = ({
+  breadcrumbSchema,
+  sections,
+}) => {
+  const getSections = (items: SectionProps[]) => {
+    return items.map((section, index) => {
+      const variant: SectionVariant = index % 2 ? 'light' : 'dark';
+      const isLastSection = index === items.length - 1;
+
+      return (
+        <Section
+          key={`section-${index}`}
+          title={section.title}
+          content={section.content}
+          variant={variant}
+          withBorder={!isLastSection}
+        />
+      );
+    });
+  };
+
+  return (
+    <>
+      <Script
+        id="schema-breadcrumb"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+      {getSections(sections)}
+    </>
+  );
+};
+
+export default SectionedLayout;