Merge pull request #377 from uyupun/feat/355_vision

Visionコンポーネントの作成

src/components/domain/Vision/index.stories.tsx

@@ -0,0 +1,19 @@
+import { Vision as DomainVision } from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof DomainVision> = {
+  title: 'Domain/Vision',
+  component: DomainVision,
+};
+export default meta;
+
+type Story = StoryObj<typeof DomainVision>;
+export const Vision: Story = {
+  render: () => (
+    <DomainVision
+      description="クリック一つで求める情報にアクセスできる時代は到来しました。これからの時代に求められるのは、スワイプ一つでいかに高い顧客体験を提供できるか、だと確信しています。"
+      title="スワイプ一つで笑みが溢れる世界"
+    />
+  ),
+};

src/components/domain/Vision/index.tsx

@@ -0,0 +1,40 @@
+import { Heading } from '@/components/base/Heading';
+import { Text } from '@/components/base/Text';
+
+import { styles } from './styles.css';
+
+import type { FC } from 'react';
+
+type Props = {
+  /**
+   * ビジョンのタイトル
+   */
+  title: string;
+  /**
+   * ビジョンの説明
+   */
+  description: string;
+};
+
+const Vision: FC<Props> = ({ title, description }) => {
+  return (
+    <section className={styles.section}>
+      <Heading className={styles.heading} tagName="h2">
+        Vision
+      </Heading>
+      <Text
+        className={styles.title}
+        fontSize={{ mobile: 20, desktop: 36 }}
+        lineHeight={1.3}
+        tagName="p"
+      >
+        <strong className={styles.strong}>{title}</strong>
+      </Text>
+      <Text className={styles.description} tagName="p">
+        {description}
+      </Text>
+    </section>
+  );
+};
+
+export { Vision };

src/components/domain/Vision/styles.css.ts

@@ -0,0 +1,27 @@
+import { sprinkles } from '@/styles/sprinkles.css';
+
+const styles = {
+  section: sprinkles({
+    textAlign: 'center',
+  }),
+  heading: sprinkles({
+    marginBottom: {
+      mobile: 6,
+      desktop: 10,
+    },
+  }),
+  title: sprinkles({
+    marginBottom: {
+      mobile: 3,
+      desktop: 5,
+    },
+  }),
+  strong: sprinkles({
+    fontWeight: 'bold',
+  }),
+  description: sprinkles({
+    textAlign: 'left',
+  }),
+};
+
+export { styles };