feat: Dynamic hero image

src/app/page.module.scss

@@ -199,11 +199,6 @@
 }
 
 /* 共通 */
-.heroImage {
-  width: 100%;
-  object-fit: cover;
-}
-
 .main {
   flex-direction: column;
   background-color: variables.$background-color;

src/app/page.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import Link from 'next/link';
+import { HeroImage } from '../components/HeroImage';
 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} />
+          <HeroImage type='thumbnail' />
           <div className={style.breadcrumb}>
             <Link href='/' className={style.breadcrumbLink}>
               Top

src/components/HeroImage/HeroImage.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/HeroImage/HeroImage.stories.tsx

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

src/components/HeroImage/HeroImage.tsx

@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import React from 'react';
+import style from './HeroImage.module.scss';
+
+interface Props {
+  title?: string;
+  blur?: boolean;
+  type?: 'default' | 'thumbnail';
+}
+
+export const HeroImage: 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,
+          blur && style.blur,
+          type === 'default' && style.default,
+          type === 'thumbnail' && style.thumbnail,
+        )}
+      />
+      <div className={style.heroTitle}>{title}</div>
+    </div>
+  );
+};

src/components/HeroImage/index.ts

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