feat(SW-243): implement mobile design

2024-08-19 14:37:17 +02:00
parent 8dae837ef2
commit bdafef492f
9 changed files with 257 additions and 0 deletions
@@ -0,0 +1,41 @@
+import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./confirmationCard.module.css"
+
+export default function ConfirmationCard() {
+  return (
+    <section className={styles.test}>
+      <div>
+        <Image
+          src="https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640"
+          alt=""
+          height={400}
+          width={200}
+          className={styles.image}
+        />
+      </div>
+      <div className={styles.info}>
+        <header>
+          <ScandicLogoIcon color="red" />
+          <Title as="h5" textTransform="capitalize">
+            Helsinki Hub
+          </Title>
+        </header>
+        <div className={styles.hotel}>
+          <span>Kaisaniemenkatu 7, Helsinki</span>
+          <span>Call us at +358 300 870680</span>
+        </div>
+        <div className={styles.stay}>
+          <span>1 night</span>
+          <div className={styles.dates}>
+            <span>2024.03.09</span>
+            <ArrowRightIcon height={15} width={15} />
+            <span>2024.03.10</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}