feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Overview/Friend/Hero/hero.module.css

@@ -0,0 +1,21 @@
+.hero {
+  border-radius: var(--Corner-radius-xLarge);
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: 1fr;
+  padding: var(--Spacing-x7) var(--Spacing-x6);
+}
+
+.burgundy {
+  background-color: var(--Scandic-Brand-Burgundy);
+}
+
+.red {
+  background-color: var(--Scandic-Brand-Scandic-Red);
+}
+
+@media screen and (min-width: 768px) {
+  .hero {
+    grid-template-columns: 1fr 1fr;
+  }
+}

components/Blocks/DynamicContent/Overview/Friend/Hero/hero.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from "class-variance-authority"
+
+import { heroVariants } from "./heroVariants"
+
+export interface HeroProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
+    VariantProps<typeof heroVariants> {}

components/Blocks/DynamicContent/Overview/Friend/Hero/heroVariants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./hero.module.css"
+
+export const heroVariants = cva(styles.hero, {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      red: styles.red,
+    },
+  },
+  defaultVariants: {
+    color: "red",
+  },
+})

components/Blocks/DynamicContent/Overview/Friend/Hero/index.tsx

@@ -0,0 +1,7 @@
+import { HeroProps } from "./hero"
+import { heroVariants } from "./heroVariants"
+
+export default function Hero({ className, color, children }: HeroProps) {
+  const classNames = heroVariants({ className, color })
+  return <section className={classNames}>{children}</section>
+}