fix(SW-190): moved Hero component from TempDesignSystem to components

components/Hero/hero.module.css

@@ -0,0 +1,14 @@
+.hero {
+  height: 400px;
+  margin-bottom: var(--Spacing-x2);
+  max-width: 100%;
+  object-fit: cover;
+  border-radius: var(--Corner-radius-xLarge);
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .hero {
+    height: 480px;
+  }
+}

components/Hero/hero.ts

@@ -0,0 +1,4 @@
+export interface HeroProps {
+  alt: string
+  src: string
+}

components/Hero/index.tsx

@@ -0,0 +1,17 @@
+import Image from "@/components/Image"
+
+import { HeroProps } from "./hero"
+
+import styles from "./hero.module.css"
+
+export default async function Hero({ alt, src }: HeroProps) {
+  return (
+    <Image
+      className={styles.hero}
+      alt={alt}
+      height={480}
+      width={1196}
+      src={src}
+    />
+  )
+}