add: Add HomeTitle SectionTitle

app/components/Title/SubTitle.css

@@ -0,0 +1,18 @@
+.sub-title {
+    color: #9D9F9F;
+    font-weight: 900;
+}
+
+.home-sub-title {
+    width: 440px;
+    height: 36px;
+    font-size: 30px;
+    font-weight: 400;
+}
+
+.section-sub-title {
+    width: 449px;
+    height: 43px;
+    font-size: 36px;
+    font-weight: 900;
+}

app/components/Title/SubTitle.tsx

@@ -0,0 +1,21 @@
+import './SubTitle.css';
+
+export interface SubTitleProps {
+    label: string;
+    variant?: 'home' | 'section';
+}
+
+export const SubTitle = ({
+    label,
+    variant = 'section',
+    ...props
+}: SubTitleProps) => {
+    return (
+        <p
+            className={`sub-title ${variant}-sub-title`}
+            {...props}
+        >
+            {label}
+        </p>
+    );
+}

app/components/Title/Title.css

@@ -0,0 +1,40 @@
+.title {
+    font-weight: 900;
+    color: #F5F5F5;
+    font-size: 96px;
+}
+
+.home-title {
+    width: 537px;
+    height: 115px;
+}
+
+.section-title {
+    width: 419px;
+    height: 115px;
+}
+
+.t-highlight {
+    color: #1E89E0;
+}
+
+.title-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.title-container-center {
+    align-items: center;
+    text-align: center;
+}
+
+.title-container-left {
+    align-items: flex-start;
+    text-align: left;
+}
+
+.title-container-right {
+    align-items: flex-end;
+    text-align: right;
+}

app/components/Title/Title.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Title } from './Title';
+
+const meta = {
+    title: 'Common/Title',
+    component: Title,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['home', 'section'],
+        },
+        align: {
+            control: 'select',
+            options: ['left', 'right'],
+        }
+    },
+} satisfies Meta<typeof Title>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const HomeTitle: Story = {
+    args: {
+        label: 'Object<T>',
+        subLabel: '学生の未来をもっと「明るく」',
+        variant: 'home',
+    },
+};
+
+export const SectionTitle: Story = {
+    args: {
+        label: 'ABOUT',
+        subLabel: '私たちについて',
+        variant: 'section',
+        align: 'left',
+    },
+};

app/components/Title/Title.tsx

@@ -0,0 +1,50 @@
+import './Title.css';
+import { SubTitle } from './SubTitle';
+
+export interface TitleProps {
+    label: string;
+    subLabel?: string;
+    variant?: 'home' | 'section';
+    align?: 'left' | 'right'; 
+}
+
+export const Title = ({
+    label,
+    subLabel,
+    variant = 'section',
+    align = 'left',
+    ...props
+}: TitleProps) => {
+    const objectTPattern = /^Object<(T)>$/;
+    const match = label.match(objectTPattern);
+
+    const renderTitle = () => {
+        if (match && match[1] === 'T') {
+            const beforeT = "Object<";
+            const t = "T";
+            const afterT = ">";
+
+            return (
+                <h1 {...props} className={`title ${variant}-title`}>
+                    {beforeT}<span className="t-highlight">{t}</span>{afterT}
+                </h1>
+            );
+        } else {
+            return (
+                <h1 {...props} className={`title ${variant}-title`}>
+                    {label}
+                </h1>
+            );
+        }
+    };
+
+    const containerClassName = `title-container ${variant === 'home' ? 'title-container-center' : `title-container-${align}`
+        }`;
+
+    return (
+        <div className={containerClassName}>
+            {renderTitle()}
+            {subLabel && <SubTitle label={subLabel} variant={variant} />}
+        </div>
+    );
+}