feat: add business card page

package.json

@@ -9,11 +9,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/partytown": "^2.1.5",
-    "@astrojs/sitemap": "^3.7.1",
+    "@astrojs/partytown": "^2.1.7",
+    "@astrojs/sitemap": "^3.7.2",
     "@astrolib/seo": "1.0.0-beta.8",
-    "astro": "^6.0.8",
+    "astro": "^6.1.8",
     "astro-robots-txt": "^1.0.0",
-    "gsap": "^3.14.2"
+    "gsap": "^3.15.0"
   }
 }

src/pages/business-card.astro

@@ -0,0 +1,53 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import QrCode from "../assets/img/bc-qrcode-white.svg";
+---
+
+<BaseLayout pageTitle="Business Card">
+    <div class="business-card">
+        <h1 class="heading-gradient">Business Card</h1>
+
+        <div class="qrcode">
+            <QrCode class="qrcode-img" />
+        </div>
+    </div>
+</BaseLayout>
+
+<style>
+    .business-card {
+        padding-inline: var(--padding-x);
+        max-width: var(--max-content-width);
+        margin-inline: auto;
+        text-align: center;
+    }
+
+    h1 {
+        margin-top: 7rem;
+        font-size: var(--fs-page-title);
+        line-height: var(--leading-title);
+        letter-spacing: var(--tracking-narrow);
+        font-weight: 600;
+
+        @media screen and (min-width: 25rem) {
+            margin-top: 10rem;
+        }
+    }
+
+    .qrcode {
+        display: flex;
+        justify-content: center;
+        margin-top: 4rem;
+
+        @media screen and (min-width: 25rem) {
+            margin-top: 6rem;
+        }
+    }
+
+    .qrcode-img {
+        width: 100%;
+        height: 100%;
+        max-width: 30rem;
+        max-height: 30rem;
+        border-radius: 0.25rem;
+    }
+</style>