Skip to content

N
nextjs-starter-template
Commit cb616f80 by Moorthy G
Options

refactor: update stories layout

parent e4f424b4
Showing with 303 additions and 687 deletions
README.md
# MAF CORPORATE WEBSITE # NEXTJS STARTER TEMPLATE
## Tools Configured ## Tools Configured
......
components/base/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/nextjs';
import { Button } from "@heroui/button"; import { Button, type ButtonProps } from '@heroui/button';
import type { ButtonProps } from "@heroui/button"; const meta: Meta<typeof Button> = {
title: 'Basic/Button',
const meta: Meta<typeof Button> = { component: Button,
title: 'Basic/Button', tags: ['autodocs']
component: Button, };
tags: ['autodocs']
}; export default meta;
export default meta; type Story = StoryObj<typeof meta>;
type Story = StoryObj<typeof meta>; type TemplateProps = {
color: ButtonProps['color'];
type TemplateProps = { };
color: ButtonProps['color'];
}; const Template = ({ color }: TemplateProps) => {
return (
const Template = ({ color }: TemplateProps) => { <div>
return ( <h6 className="mb-2 font-semibold">Size</h6>
<div> <div className="flex gap-5 mb-4 flex-wrap items-center">
<h6 className="mb-2 font-semibold">Size</h6> <Button color={color} size="sm">
<div className="flex gap-5 mb-4 flex-wrap items-center"> Small button
<Button color={color} size="sm"> </Button>
Small button <Button color={color} size="md">
</Button> Medium button
<Button color={color} size="md"> </Button>
Medium button <Button color={color} size="lg">
</Button> Large button
<Button color={color} size="lg"> </Button>
Large button </div>
</Button> <h6 className="mb-2 font-semibold">Variants</h6>
<Button color={color} size="sm" variant="ghost"> <div className="flex gap-5 mb-4 flex-wrap items-center">
Small Outline <Button color={color} variant="solid">
</Button> Solid Button
<Button color={color} size="md" variant="ghost"> </Button>
Medium Outline <Button color={color} variant="faded">
</Button> Faded Button
<Button color={color} size="lg" variant="ghost"> </Button>
Large Outline <Button color={color} variant="bordered">
</Button> Bordered Button
</div> </Button>
<h6 className="mb-2 font-semibold">Loading</h6> <Button color={color} variant="light">
<div className="flex gap-5 mb-4 flex-wrap items-center"> Light Button
<Button color={color} size="sm" isLoading> </Button>
Small button <Button color={color} variant="flat">
</Button> Flat Button
<Button color={color} size="md" isLoading> </Button>
Medium button <Button color={color} variant="ghost">
</Button> Ghost Button
<Button color={color} size="lg" isLoading> </Button>
Large button <Button color={color} variant="shadow">
</Button> Shadow Button
<Button color={color} size="sm" variant="ghost" isLoading> </Button>
Small Outline </div>
</Button> <h6 className="mb-2 font-semibold">Loading Variants</h6>
<Button color={color} size="md" variant="ghost" isLoading> <div className="flex gap-5 mb-4 flex-wrap items-center">
Medium Outline <Button color={color} variant="solid">
</Button> Solid Button
<Button color={color} size="lg" variant="ghost" isLoading> </Button>
Large Outline <Button color={color} variant="faded" isLoading>
</Button> Faded Button
</div> </Button>
<h6 className="mb-2 font-semibold">Disabled</h6> <Button color={color} variant="bordered" isLoading>
<div className="flex gap-5 mb-4 flex-wrap items-center"> Bordered Button
<Button color={color} size="sm" isDisabled> </Button>
Small button <Button color={color} variant="light" isLoading>
</Button> Light Button
<Button color={color} size="md" isDisabled> </Button>
Medium button <Button color={color} variant="flat" isLoading>
</Button> Flat Button
<Button color={color} size="lg" isDisabled> </Button>
Large button <Button color={color} variant="ghost" isLoading>
</Button> Ghost Button
<Button color={color} size="sm" variant="ghost" isDisabled> </Button>
Small Outline <Button color={color} variant="shadow" isLoading>
</Button> Shadow Button
<Button color={color} size="md" variant="ghost" isDisabled> </Button>
Medium Outline </div>
</Button> <h6 className="mb-2 font-semibold">Disabled Variants</h6>
<Button color={color} size="lg" variant="ghost" isDisabled> <div className="flex gap-5 mb-4 flex-wrap items-center">
Large Outline <Button color={color} variant="solid" isDisabled>
</Button> Solid Button
</div> </Button>
<h6 className="mb-2 font-semibold">Full Width</h6> <Button color={color} variant="faded" isDisabled>
<div className="flex flex-col gap-5"> Faded Button
<Button color={color} size="sm" fullWidth> </Button>
Small button <Button color={color} variant="bordered" isDisabled>
</Button> Bordered Button
<Button color={color} size="md" fullWidth> </Button>
Medium button <Button color={color} variant="light" isDisabled>
</Button> Light Button
<Button color={color} size="lg" fullWidth> </Button>
Large button <Button color={color} variant="flat" isDisabled>
</Button> Flat Button
<Button color={color} size="sm" variant="ghost" fullWidth> </Button>
Small Outline <Button color={color} variant="ghost" isDisabled>
</Button> Ghost Button
<Button color={color} size="md" variant="ghost" fullWidth> </Button>
Medium Outline <Button color={color} variant="shadow" isDisabled>
</Button> Shadow Button
<Button color={color} size="lg" variant="ghost" fullWidth> </Button>
Large Outline </div>
</Button> </div>
</div> );
</div> };
);
}; export const Default: Story = {
render: () => <Template color="default" />
export const Default: Story = { };
render: () => <Template color="default" /> export const Primary: Story = {
}; render: () => <Template color="primary" />
export const Primary: Story = { };
render: () => <Template color="primary" /> export const Secondary: Story = {
}; render: () => <Template color="secondary" />
export const Secondary: Story = { };
render: () => <Template color="secondary" />
};
export const Success: Story = {
render: () => <Template color="success" />
};
export const Warning: Story = {
render: () => <Template color="warning" />
};
export const Danger: Story = {
render: () => <Template color="danger" />
};
package.json
...@@ -11,21 +11,21 @@ ...@@ -11,21 +11,21 @@
"analyze": "cross-env ANALYZE=true next build" "analyze": "cross-env ANALYZE=true next build"
}, },
"dependencies": { "dependencies": {
"@heroui/react": "2.8.0-beta.4", "@heroui/react": "2.8.0-beta.15",
"@storybook/react": "^9.0.15", "@storybook/react": "^9.0.16",
"@tailwindcss/postcss": "^4.1.11", "@tailwindcss/postcss": "^4.1.11",
"@types/node": "^24.0.10", "@types/node": "^24.0.13",
"@types/react": "^19.1.8", "@types/react": "^19.1.8",
"autoprefixer": "^10.4.21", "autoprefixer": "^10.4.21",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"color2k": "^2.0.3", "color2k": "^2.0.3",
"framer-motion": "^12.23.0", "framer-motion": "^12.23.3",
"next": "^15.3.5", "next": "^15.3.5",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"sharp": "^0.34.2", "sharp": "^0.34.3",
"tailwindcss": "^4.1.11", "tailwindcss": "^4.1.11",
"typescript": "^5.8.3" "typescript": "^5.8.3"
}, },
...@@ -33,19 +33,19 @@ ...@@ -33,19 +33,19 @@
"@commitlint/cli": "^19.8.1", "@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1", "@commitlint/config-conventional": "^19.8.1",
"@next/bundle-analyzer": "^15.3.5", "@next/bundle-analyzer": "^15.3.5",
"@storybook/addon-links": "^9.0.15", "@storybook/addon-links": "^9.0.16",
"@storybook/addon-themes": "^9.0.15", "@storybook/addon-themes": "^9.0.16",
"@storybook/nextjs": "^9.0.15", "@storybook/nextjs": "^9.0.16",
"@types/eslint": "^9.6.1", "@types/eslint": "^9.6.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0", "cz-conventional-changelog": "^3.3.0",
"eslint": "^9.30.1", "eslint": "^9.30.1",
"eslint-config-next": "^15.3.5", "eslint-config-next": "^15.3.5",
"eslint-plugin-storybook": "^9.0.15", "eslint-plugin-storybook": "^9.0.16",
"husky": "^9.1.7", "husky": "^9.1.7",
"prettier": "^3.6.2", "prettier": "^3.6.2",
"pretty-quick": "^4.2.2", "pretty-quick": "^4.2.2",
"storybook": "^9.0.15" "storybook": "^9.0.16"
}, },
"packageManager": "pnpm@10.6.5+sha256.47c8bca42b4b48534b5b1b28d573c506773937b02f68e52992fbd8269131c5c8" "packageManager": "pnpm@10.6.5+sha256.47c8bca42b4b48534b5b1b28d573c506773937b02f68e52992fbd8269131c5c8"
} }
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
styles/stories/colors.stories.tsx
import React from 'react'; import React from 'react';
import { Meta } from '@storybook/react'; import { Meta } from '@storybook/nextjs';
import { parseToRgba, readableColor } from 'color2k';
type ColorsItem = {
type ColorsItem = { color: string;
color: string; className?: string;
className?: string; textClassName?: string;
textClassName?: string; };
};
type SwatchColors = {
type SwatchColors = { title: string;
title: string; items: ColorsItem[];
items: ColorsItem[]; };
};
type SwatchSetProps = {
type SwatchSetProps = { colors: SwatchColors[];
colors: SwatchColors[]; };
isSemantic?: boolean;
}; const SemanticSwatch = ({
color,
const Swatch = ({ color }: { color: string }) => { className,
const colorText = color textClassName
? `#${parseToRgba(color) }: {
.slice(0, 3) color: string;
.map((x) => x.toString(16).padStart(2, '0')) className?: string;
.join('') textClassName?: string;
.toUpperCase()}` }) => {
: 'N/A'; return (
<div
return ( className={`${className} ${textClassName} text-sm flex flex-col items-center justify-center w-24 h-24 m-1 rounded shadow-lg`}>
<div <span>{color}</span>
className="flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg" </div>
style={{ );
backgroundColor: color };
}}>
<span const SwatchSet = ({ colors }: SwatchSetProps) => (
style={{ <div className="flex flex-row flex-wrap items-center justify-center w-full h-full py-2">
color: readableColor(color) {colors.map(({ title, items }) => (
}}> <div key={title} className="flex flex-col items-start w-full h-full">
{colorText} <h2 className="text-xl font-bold text-foreground">{title}</h2>
</span> <div className="flex flex-row flex-wrap items-center justify-start w-full h-full py-4">
</div> {items.map((c, index) => (
); <SemanticSwatch
}; key={`${c.color}-${index}`}
className={c.className}
const SemanticSwatch = ({ color={c.color}
color, textClassName={c.textClassName}
className, />
textClassName ))}
}: { </div>
color: string; </div>
className?: string; ))}
textClassName?: string; </div>
}) => { );
return (
<div // Background color key -> Text color value mapping
className={`${className} flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg`}> /** we need it for tailwind to detect the color */
<span className={`${textClassName} text-sm`}>{color}</span> const COLOR_CLASS_MAP = {
</div> layout: {
); 'bg-background': 'text-foreground',
}; 'bg-foreground': 'text-background',
'bg-divider': 'text-foreground',
const SwatchSet = ({ colors, isSemantic = false }: SwatchSetProps) => ( 'bg-focus': 'text-primary-foreground'
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-2"> },
{colors.map(({ title, items }) => ( base: {
<div key={title} className="flex flex-col items-start w-full h-full"> 'bg-default': 'text-default-foreground',
<h2 className="text-xl font-bold text-foreground">{title}</h2> 'bg-primary': 'text-primary-foreground',
<div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4"> 'bg-secondary': 'text-secondary-foreground',
{items.map((c, index) => 'bg-danger': 'text-danger-foreground',
isSemantic ? ( 'bg-warning': 'text-warning-foreground',
<SemanticSwatch 'bg-success': 'text-success-foreground'
key={`${c.color}-${index}`} },
className={c.className} default: {
color={c.color} 'bg-default-50': 'text-default-900',
textClassName={c.textClassName} 'bg-default-100': 'text-default-900',
/> 'bg-default-200': 'text-default-800',
) : ( 'bg-default-300': 'text-default-800',
<Swatch key={`${c.color}-${index}`} color={c.color} /> 'bg-default-400': 'text-default-800',
) 'bg-default-500': 'text-default-foreground',
)} 'bg-default-600': 'text-default-50',
</div> 'bg-default-700': 'text-default-100',
</div> 'bg-default-800': 'text-default-100',
))} 'bg-default-900': 'text-default-100'
</div> },
); primary: {
'bg-primary-50': 'text-primary-900',
export default { 'bg-primary-100': 'text-primary-900',
title: 'Foundations/SemanticColors', 'bg-primary-200': 'text-primary-800',
component: SwatchSet, 'bg-primary-300': 'text-primary-800',
argTypes: { 'bg-primary-400': 'text-primary-800',
isSemantic: { 'bg-primary-500': 'text-primary-foreground',
control: false 'bg-primary-600': 'text-primary-50',
} 'bg-primary-700': 'text-primary-100',
} 'bg-primary-800': 'text-primary-100',
} as Meta<typeof SwatchSet>; 'bg-primary-900': 'text-primary-100'
},
export const SemanticColors = { secondary: {
args: { 'bg-secondary-50': 'text-secondary-900',
isSemantic: true, 'bg-secondary-100': 'text-secondary-700',
colors: [ 'bg-secondary-200': 'text-secondary-700',
{ 'bg-secondary-300': 'text-secondary-700',
title: 'Layout', 'bg-secondary-400': 'text-secondary-700',
items: [ 'bg-secondary-500': 'text-secondary-50',
{ 'bg-secondary-600': 'text-secondary-50',
color: 'background', 'bg-secondary-700': 'text-secondary-100',
className: 'bg-background', 'bg-secondary-800': 'text-secondary-100',
textClassName: 'text-foreground' 'bg-secondary-900': 'text-secondary-100'
}, }
{ };
color: 'foreground',
className: 'bg-foreground', const generateColorScale = (colorName: string): ColorsItem[] => {
textClassName: 'text-background' const colorMap = COLOR_CLASS_MAP[colorName as keyof typeof COLOR_CLASS_MAP];
}, if (!colorMap) return [];
{
color: 'divider', return Object.keys(colorMap).map((bgClassName) => {
className: 'bg-divider', // Extract color name from bg class (e.g., 'bg-default-50' -> 'default-50')
textClassName: 'text-foreground' const colorDisplayName = bgClassName.replace('bg-', '');
},
{ return {
color: 'focus', color: colorDisplayName,
className: 'bg-focus', className: bgClassName,
textClassName: 'text-primary-foreground' textClassName: colorMap[bgClassName as keyof typeof colorMap]
} };
] });
}, };
{
title: 'Content', const generateColorSections = (): SwatchColors[] => {
items: [ const colorNames = Object.keys(COLOR_CLASS_MAP);
{
color: 'content1', return colorNames.map((colorName) => ({
className: 'bg-content1', title: colorName.charAt(0).toUpperCase() + colorName.slice(1),
textClassName: 'text-content1-foreground' items: generateColorScale(colorName)
}, }));
{ };
color: 'content2',
className: 'bg-content2', export default {
textClassName: 'text-content2-foreground' title: 'Foundations/01-SemanticColors',
}, component: SwatchSet
{ } as Meta<typeof SwatchSet>;
color: 'content3',
className: 'bg-content3', export const SemanticColors = {
textClassName: 'text-content3-foreground' args: {
}, colors: generateColorSections()
{ }
color: 'content4', };
className: 'bg-content4',
textClassName: 'text-content4-foreground'
}
]
},
{
title: 'Base',
items: [
{
color: 'default',
className: 'bg-default',
textClassName: 'text-default-foreground'
},
{
color: 'primary',
className: 'bg-primary',
textClassName: 'text-primary-foreground'
},
{
color: 'secondary',
className: 'bg-secondary',
textClassName: 'text-secondary-foreground'
},
{
color: 'success',
className: 'bg-success',
textClassName: 'text-success-foreground'
},
{
color: 'warning',
className: 'bg-warning',
textClassName: 'text-warning-foreground'
},
{
color: 'danger',
className: 'bg-danger',
textClassName: 'text-danger-foreground'
}
]
},
{
title: 'Default',
items: [
{
color: 'default-50',
className: 'bg-default-50',
textClassName: 'text-default-900'
},
{
color: 'default-100',
className: 'bg-default-100',
textClassName: 'text-default-900'
},
{
color: 'default-200',
className: 'bg-default-200',
textClassName: 'text-default-800'
},
{
color: 'default-300',
className: 'bg-default-300',
textClassName: 'text-default-800'
},
{
color: 'default-400',
className: 'bg-default-400',
textClassName: 'text-default-800'
},
{
color: 'default-500',
className: 'bg-default-500',
textClassName: 'text-default-foreground'
},
{
color: 'default-600',
className: 'bg-default-600',
textClassName: 'text-default-50'
},
{
color: 'default-700',
className: 'bg-default-700',
textClassName: 'text-default-100'
},
{
color: 'default-800',
className: 'bg-default-800',
textClassName: 'text-default-100'
},
{
color: 'default-900',
className: 'bg-default-900',
textClassName: 'text-default-100'
}
]
},
{
title: 'Primary',
items: [
{
color: 'primary-50',
className: 'bg-primary-50',
textClassName: 'text-primary-900'
},
{
color: 'primary-100',
className: 'bg-primary-100',
textClassName: 'text-primary-900'
},
{
color: 'primary-200',
className: 'bg-primary-200',
textClassName: 'text-primary-800'
},
{
color: 'primary-300',
className: 'bg-primary-300',
textClassName: 'text-primary-800'
},
{
color: 'primary-400',
className: 'bg-primary-400',
textClassName: 'text-primary-800'
},
{
color: 'primary-500',
className: 'bg-primary-500',
textClassName: 'text-primary-foreground'
},
{
color: 'primary-600',
className: 'bg-primary-600',
textClassName: 'text-primary-50'
},
{
color: 'primary-700',
className: 'bg-primary-700',
textClassName: 'text-primary-100'
},
{
color: 'primary-800',
className: 'bg-primary-800',
textClassName: 'text-primary-100'
},
{
color: 'primary-900',
className: 'bg-primary-900',
textClassName: 'text-primary-100'
}
]
},
{
title: 'Secondary',
items: [
{
color: 'secondary-50',
className: 'bg-secondary-50',
textClassName: 'text-secondary-900'
},
{
color: 'secondary-100',
className: 'bg-secondary-100',
textClassName: 'text-secondary-900'
},
{
color: 'secondary-200',
className: 'bg-secondary-200',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-300',
className: 'bg-secondary-300',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-400',
className: 'bg-secondary-400',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-500',
className: 'bg-secondary-500',
textClassName: 'text-secondary-foreground'
},
{
color: 'secondary-600',
className: 'bg-secondary-600',
textClassName: 'text-secondary-50'
},
{
color: 'secondary-700',
className: 'bg-secondary-700',
textClassName: 'text-secondary-100'
},
{
color: 'secondary-800',
className: 'bg-secondary-800',
textClassName: 'text-secondary-100'
},
{
color: 'secondary-900',
className: 'bg-secondary-900',
textClassName: 'text-secondary-100'
}
]
},
{
title: 'Success',
items: [
{
color: 'success-50',
className: 'bg-success-50',
textClassName: 'text-success-900'
},
{
color: 'success-100',
className: 'bg-success-100',
textClassName: 'text-success-900'
},
{
color: 'success-200',
className: 'bg-success-200',
textClassName: 'text-success-800'
},
{
color: 'success-300',
className: 'bg-success-300',
textClassName: 'text-success-800'
},
{
color: 'success-400',
className: 'bg-success-400',
textClassName: 'text-success-800'
},
{
color: 'success-500',
className: 'bg-success-500',
textClassName: 'text-success-foreground'
},
{
color: 'success-600',
className: 'bg-success-600',
textClassName: 'text-success-50'
},
{
color: 'success-700',
className: 'bg-success-700',
textClassName: 'text-success-100'
},
{
color: 'success-800',
className: 'bg-success-800',
textClassName: 'text-success-100'
},
{
color: 'success-900',
className: 'bg-success-900',
textClassName: 'text-success-100'
}
]
},
{
title: 'Warning',
items: [
{
color: 'warning-50',
className: 'bg-warning-50',
textClassName: 'text-warning-900'
},
{
color: 'warning-100',
className: 'bg-warning-100',
textClassName: 'text-warning-900'
},
{
color: 'warning-200',
className: 'bg-warning-200',
textClassName: 'text-warning-800'
},
{
color: 'warning-300',
className: 'bg-warning-300',
textClassName: 'text-warning-800'
},
{
color: 'warning-400',
className: 'bg-warning-400',
textClassName: 'text-warning-800'
},
{
color: 'warning-500',
className: 'bg-warning-500',
textClassName: 'text-warning-foreground'
},
{
color: 'warning-600',
className: 'bg-warning-600',
textClassName: 'text-warning-50'
},
{
color: 'warning-700',
className: 'bg-warning-700',
textClassName: 'text-warning-100'
},
{
color: 'warning-800',
className: 'bg-warning-800',
textClassName: 'text-warning-100'
},
{
color: 'warning-900',
className: 'bg-warning-900',
textClassName: 'text-warning-100'
}
]
},
{
title: 'Danger',
items: [
{
color: 'danger-50',
className: 'bg-danger-50',
textClassName: 'text-danger-900'
},
{
color: 'danger-100',
className: 'bg-danger-100',
textClassName: 'text-danger-900'
},
{
color: 'danger-200',
className: 'bg-danger-200',
textClassName: 'text-danger-800'
},
{
color: 'danger-300',
className: 'bg-danger-300',
textClassName: 'text-danger-800'
},
{
color: 'danger-400',
className: 'bg-danger-400',
textClassName: 'text-danger-800'
},
{
color: 'danger-500',
className: 'bg-danger-500',
textClassName: 'text-danger-foreground'
},
{
color: 'danger-600',
className: 'bg-danger-600',
textClassName: 'text-danger-50'
},
{
color: 'danger-700',
className: 'bg-danger-700',
textClassName: 'text-danger-100'
},
{
color: 'danger-800',
className: 'bg-danger-800',
textClassName: 'text-danger-100'
},
{
color: 'danger-900',
className: 'bg-danger-900',
textClassName: 'text-danger-100'
}
]
}
]
}
};
styles/stories/typography.stories.tsx
export default { export default {
title: 'Foundations/Typography' title: 'Foundations/02-Typography'
}; };
export const Typography = () => ( export const Typography = () => (
<div className="container"> <div className="container">
<div className="flex flex-col gap-4 mb-5"> <div className="flex flex-col gap-4 mb-5">
<div className="text-9xl font-bold">Heading</div> <div className="text-9xl font-bold">Heading</div>
<div className="text-8xl font-bold">Heading</div> <div className="text-8xl font-bold">Heading</div>
<div className="text-7xl font-bold">Heading</div> <div className="text-7xl font-bold">Heading</div>
<div className="text-6xl font-bold">Heading</div> <div className="text-6xl font-bold">Heading</div>
<div className="text-5xl font-bold">Heading</div> <div className="text-5xl font-bold">Heading</div>
<div className="text-4xl font-bold">Heading</div> <div className="text-4xl font-bold">Heading</div>
<div className="text-3xl font-bold">Heading</div> <div className="text-3xl font-bold">Heading</div>
<div className="text-2xl font-bold">Heading</div> <div className="text-2xl font-bold">Heading</div>
<div className="text-xl font-bold">Heading</div> <div className="text-xl font-bold">Heading</div>
</div> </div>
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p> </p>
<p> <p>
Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
facilis et quod hic, cumque repellendus quidem expedita explicabo facilis et quod hic, cumque repellendus quidem expedita explicabo
architecto, possimus minima! architecto, possimus minima!
</p> </p>
</div> </div>
); );
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment