design system token v0.1

stories/Composition/CTASection.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { CTASection } from '@/components/ui/cta-section'
+import { Button } from '@/components/ui/button'
+
+const meta = {
+  title: 'Composition/CTASection',
+  component: CTASection,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['centered', 'left-aligned'],
+    },
+    background: {
+      control: 'select',
+      options: ['default', 'muted', 'accent', 'subtle'],
+    },
+  },
+} satisfies Meta<typeof CTASection>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultActions = (
+  <>
+    <Button size="lg">Get Started</Button>
+    <Button size="lg" variant="outline">Contact Sales</Button>
+  </>
+)
+
+export const Default: Story = {
+  args: {
+    heading: 'Ready to get started?',
+    description: 'Join thousands of teams building better products with our design system.',
+    actions: defaultActions,
+  },
+}
+
+export const Centered: Story = {
+  args: {
+    variant: 'centered',
+    background: 'muted',
+    heading: 'Start building today',
+    description: 'Free for open source. Affordable for teams.',
+    actions: defaultActions,
+  },
+}
+
+export const LeftAligned: Story = {
+  args: {
+    variant: 'left-aligned',
+    background: 'muted',
+    heading: 'Need help getting started?',
+    description: 'Our team is ready to help you integrate the design system into your project.',
+    actions: (
+      <>
+        <Button size="lg">Talk to us</Button>
+      </>
+    ),
+  },
+}
+
+export const AccentBackground: Story = {
+  args: {
+    variant: 'centered',
+    background: 'accent',
+    heading: 'Upgrade your workflow',
+    description: 'Take your team to the next level with our premium plan.',
+    actions: (
+      <>
+        <Button size="lg" variant="secondary">Start Free Trial</Button>
+        <Button
+          size="lg"
+          variant="outline"
+          className="border-primary-foreground/20 text-primary-foreground hover:bg-primary-foreground/10"
+        >
+          Learn More
+        </Button>
+      </>
+    ),
+  },
+}
+
+export const SubtleBackground: Story = {
+  args: {
+    variant: 'centered',
+    background: 'subtle',
+    heading: 'Stay in the loop',
+    description: 'Subscribe to our newsletter for the latest updates and releases.',
+    actions: (
+      <Button size="lg">Subscribe</Button>
+    ),
+  },
+}
+
+export const DefaultBackground: Story = {
+  args: {
+    variant: 'centered',
+    background: 'default',
+    heading: 'Questions? We have answers.',
+    description: 'Check out our documentation or reach out to our support team.',
+    actions: (
+      <>
+        <Button size="lg">View Docs</Button>
+        <Button size="lg" variant="ghost">Contact Support</Button>
+      </>
+    ),
+  },
+}