feat: Dynamic hero image

src/app/page.module.scss

@@ -5,19 +5,6 @@ $heroImage-change-width: 1280px;
 $header-change-width: 1200px;
 $background-color: #F1F1F1;
 
-/* heroImageとヘッダーのpadding調整 */
-@media (min-width: $heroImage-change-width) {
-  .heroImage {
-    height: 60vh;
-  }
-}
-
-@media (max-width: $heroImage-change-width) {
-  .heroImage {
-    height: 100%;
-  } 
-}
-
 @media (max-width: $header-change-width) {
   .main {
     padding-top: 64px;
@@ -204,11 +191,6 @@ $background-color: #F1F1F1;
 }
 
 /* 共通 */
-.heroImage {
-  width: 100%;
-  object-fit: cover;
-}
-
 .main {
   flex-direction: column;
   background-color: $background-color;

src/app/page.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import Link from 'next/link';
+import { DynamicHeroImage } from '../components/DynamicHeroImage';
 import { LinkButton } from '../components/LinkButton';
 import style from './page.module.scss';
 import { NewsList } from '@/components/news-list';
@@ -9,7 +10,7 @@ export default function Home() {
     <div className={style.container}>
       <main className={style.main}>
         <div className={style.hero}>
-          <img src='/images/hero.png' alt='Hero' className={style.heroImage} />
+          <DynamicHeroImage type='thumbnail' />
           <div className={style.breadcrumb}>
             <Link href='/' className={style.breadcrumbLink}>
               Top

src/components/DynamicHeroImage/DynamicHeroImage.module.scss

@@ -0,0 +1,42 @@
+@use 'src/app/variables';
+$heroImage-change-width: 1280px;
+
+.heroImagesContainer {
+  position: relative;
+  width: 100%;
+}
+
+.heroImage {
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+
+.blur {
+  filter: blur(9px);
+}
+
+.heroTitle {
+  white-space: nowrap;
+  color: #455749;
+  font-weight: bold;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  font-size: calc((100vw + 320px) / 40);
+}
+
+/* heroImageとヘッダーのpadding調整 */
+@media (min-width: $heroImage-change-width) {
+  .heroImage {
+    height: 60vh;
+  }
+}
+
+@media (max-width: $heroImage-change-width) {
+  .heroImage {
+    height: 100%;
+  } 
+}

src/components/DynamicHeroImage/DynamicHeroImage.stories.tsx

@@ -0,0 +1,18 @@
+import { StoryFn, Meta } from '@storybook/react';
+import React from 'react';
+import { DynamicHeroImage } from './DynamicHeroImage';
+
+export default {
+  title: 'Components/DynamicHeroImage',
+  component: DynamicHeroImage,
+} as Meta;
+
+const Template: StoryFn<typeof DynamicHeroImage> = (args) => (
+  <DynamicHeroImage {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Maximumの活動について',
+  blur: false,
+};

src/components/DynamicHeroImage/DynamicHeroImage.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import React from 'react';
+import style from './DynamicHeroImage.module.scss';
+
+interface Props {
+  title?: string;
+  blur?: boolean;
+  type?: 'default' | 'thumbnail';
+}
+
+export const DynamicHeroImage: React.FC<Props> = ({
+  title,
+  blur = false,
+  type = 'default',
+}) => {
+  return (
+    <div className={style.heroImagesContainer}>
+      <img
+        src={type === 'default' ? '/images/hero2.png' : '/images/hero.png'}
+        alt='hero'
+        className={clsx(style.heroImage, {
+          [style.blur]: blur,
+          [style.default]: type === 'default',
+          [style.thumbnail]: type === 'thumbnail',
+        })}
+      />
+      <div className={style.heroTitle}>{title}</div>
+    </div>
+  );
+};

src/components/DynamicHeroImage/index.ts

@@ -0,0 +1 @@
+export * from './DynamicHeroImage';