Added become a creator component

autogpt_platform/frontend/src/components/agptui/BecomeACreator.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BecomeACreator } from "./BecomeACreator";
+import { userEvent, within } from "@storybook/test";
+
+const meta = {
+  title: "AGPTUI/BecomeACreator",
+  component: BecomeACreator,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: { control: "text" },
+    heading: { control: "text" },
+    description: { control: "text" },
+    buttonText: { control: "text" },
+    onButtonClick: { action: "buttonClicked" },
+  },
+} satisfies Meta<typeof BecomeACreator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Want to contribute?",
+    heading: "We're always looking for more Creators!",
+    description: "Join our ever-growing community of hackers and tinkerers",
+    buttonText: "Become a Creator",
+    onButtonClick: () => console.log("Button clicked"),
+  },
+};
+
+export const CustomText: Story = {
+  args: {
+    title: "Become a Creator Today!",
+    heading: "Join Our Creator Community",
+    description: "Share your ideas and build amazing AI agents with us",
+    buttonText: "Start Creating",
+    onButtonClick: () => console.log("Custom button clicked"),
+  },
+};
+
+export const LongDescription: Story = {
+  args: {
+    ...Default.args,
+    description:
+      "Join our vibrant community of innovators, developers, and AI enthusiasts. Share your unique perspectives, collaborate on groundbreaking projects, and help shape the future of AI technology.",
+  },
+};
+
+export const WithInteraction: Story = {
+  args: {
+    ...Default.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByText("Become a Creator");
+
+    await userEvent.click(button);
+  },
+};

autogpt_platform/frontend/src/components/agptui/BecomeACreator.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Button } from "./Button";
+
+interface BecomeACreatorProps {
+  title: string;
+  heading: string;
+  description: string;
+  buttonText: string;
+  onButtonClick: () => void;
+}
+
+export const BecomeACreator: React.FC<BecomeACreatorProps> = ({
+  title = "Want to contribute?",
+  heading = "We're always looking for more Creators!",
+  description = "Join our ever-growing community of hackers and tinkerers",
+  buttonText = "Become a Creator",
+  onButtonClick = () => {},
+}) => {
+  return (
+    <div className="w-full flex flex-col items-center justify-between space-y-8 py-8">
+      <div className="font-['PP Neue Montreal TT'] mb-8 self-start text-[23px] font-bold leading-9 tracking-tight text-[#282828]">
+        {title}
+      </div>
+      <div className="font-['PP Neue Montreal TT'] text-center text-5xl font-medium leading-9 tracking-wide text-[#272727] max-w-full">
+        {heading}
+      </div>
+      <div className="font-['PP Neue Montreal TT'] text-center text-[26px] font-medium leading-9 tracking-tight text-[#878787] max-w-full">
+        {description}
+      </div>
+      <Button onClick={onButtonClick} className="mt-8">
+        {buttonText}
+      </Button>
+    </div>
+  );
+};