feat: add HelloWorld component

- Create HelloWorld component following established patterns
- Add comprehensive Storybook stories with multiple variants
- Use proper TypeScript interfaces and Tailwind styling
- Component renders 'Hello World' with optional custom message and className props

Co-Authored-By: bruno@coder.com <bruno_nonato_quaresma@hotmail.com>

site/src/components/HelloWorld/HelloWorld.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HelloWorld } from "./HelloWorld";
+
+const meta: Meta<typeof HelloWorld> = {
+	title: "components/HelloWorld",
+	component: HelloWorld,
+};
+
+export default meta;
+type Story = StoryObj<typeof HelloWorld>;
+
+export const Default: Story = {};
+
+export const CustomMessage: Story = {
+	args: {
+		children: "Hello from Coder!",
+	},
+};
+
+export const WithCustomClassName: Story = {
+	args: {
+		className: "p-8 bg-surface-secondary rounded-lg",
+		children: "Styled Hello World",
+	},
+};
+
+export const LongMessage: Story = {
+	args: {
+		children:
+			"This is a longer hello world message to test text wrapping and layout",
+	},
+};

site/src/components/HelloWorld/HelloWorld.tsx

@@ -0,0 +1,22 @@
+import type { FC, PropsWithChildren } from "react";
+import { cn } from "utils/cn";
+
+const Language = {
+	defaultMessage: "Hello World",
+};
+
+type HelloWorldProps = Readonly<
+	PropsWithChildren<{
+		className?: string;
+	}>
+>;
+
+export const HelloWorld: FC<HelloWorldProps> = ({ children, className }) => {
+	return (
+		<div className={cn("text-center", className)}>
+			<h1 className="text-2xl font-semibold text-content-primary">
+				{children || Language.defaultMessage}
+			</h1>
+		</div>
+	);
+};