design system token v0.1

stories/Composition/Hero.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Hero } from '@/components/ui/hero'
+import { Button } from '@/components/ui/button'
+
+const meta = {
+  title: 'Composition/Hero',
+  component: Hero,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['centered', 'left-aligned', 'split'],
+    },
+    background: {
+      control: 'select',
+      options: ['default', 'muted', 'accent', 'dark'],
+    },
+  },
+} satisfies Meta<typeof Hero>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultActions = (
+  <>
+    <Button size="lg">Get Started</Button>
+    <Button size="lg" variant="outline">Learn More</Button>
+  </>
+)
+
+export const Centered: Story = {
+  args: {
+    variant: 'centered',
+    heading: 'Build better products with Greyhaven',
+    subheading:
+      'A modern design system that helps you create consistent, accessible, and beautiful user interfaces.',
+    actions: defaultActions,
+  },
+}
+
+export const LeftAligned: Story = {
+  args: {
+    variant: 'left-aligned',
+    heading: 'Ship faster with confidence',
+    subheading:
+      'Pre-built components, design tokens, and patterns so your team can focus on what matters.',
+    actions: defaultActions,
+  },
+}
+
+export const Split: Story = {
+  args: {
+    variant: 'split',
+    heading: 'Design meets engineering',
+    subheading:
+      'Bridging the gap between design and code with a shared language of components and tokens.',
+    actions: defaultActions,
+    media: (
+      <div className="w-full aspect-video bg-muted rounded-lg flex items-center justify-center text-muted-foreground">
+        Image / Media Placeholder
+      </div>
+    ),
+  },
+}
+
+export const MutedBackground: Story = {
+  args: {
+    variant: 'centered',
+    background: 'muted',
+    heading: 'Welcome to the platform',
+    subheading: 'Everything you need to build and scale your project.',
+    actions: defaultActions,
+  },
+}
+
+export const AccentBackground: Story = {
+  args: {
+    variant: 'centered',
+    background: 'accent',
+    heading: 'Start building today',
+    subheading: 'Join thousands of developers using our design system.',
+    actions: defaultActions,
+  },
+}
+
+export const DarkBackground: Story = {
+  args: {
+    variant: 'centered',
+    background: 'dark',
+    heading: 'The future of design systems',
+    subheading: 'A bold new approach to building consistent user interfaces at scale.',
+    actions: (
+      <>
+        <Button size="lg" variant="secondary">Get Started</Button>
+        <Button size="lg" variant="outline" className="border-background/20 text-background hover:bg-background/10">
+          Learn More
+        </Button>
+      </>
+    ),
+  },
+}
+
+export const WithoutActions: Story = {
+  args: {
+    variant: 'centered',
+    heading: 'A hero section without action buttons',
+    subheading: 'Sometimes you just need a heading and description.',
+  },
+}