adilalloandCursor
9769bcc76d
Figma uses a normal fill, not opacity, stacked paths, or multiply grain. Co-authored-by: Cursor <cursoragent@cursor.com>
59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
import HeroDecor from "../../app/components/sections/HeroBanner/HeroDecor";
|
|
|
|
export default {
|
|
title: "Components/Sections/HeroDecor",
|
|
component: HeroDecor,
|
|
parameters: {
|
|
layout: "centered",
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"A decorative SVG component that provides background visual elements for the HeroBanner. Organic shapes sit behind content using the brand darker-accent fill.",
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
className: {
|
|
control: { type: "text" },
|
|
description: "Additional CSS classes for positioning and styling",
|
|
},
|
|
},
|
|
tags: ["autodocs"],
|
|
};
|
|
|
|
export const Default = {
|
|
args: {
|
|
className: "w-[400px] h-[200px]",
|
|
},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story: "Default hero decoration with standard sizing and positioning.",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export const WithBackground = {
|
|
args: {
|
|
className: "w-[600px] h-[300px]",
|
|
},
|
|
render: (args) => (
|
|
<div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden">
|
|
<HeroDecor {...args} />
|
|
<div className="relative z-10 text-white mt-4">
|
|
<h3>Content Overlay</h3>
|
|
<p>This demonstrates how the decoration appears behind content.</p>
|
|
</div>
|
|
</div>
|
|
),
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
story:
|
|
"Hero decoration with background color to show how it integrates with content.",
|
|
},
|
|
},
|
|
},
|
|
};
|