From 458e9e722d89918aaed37f8810466fbb63cfc6f3 Mon Sep 17 00:00:00 2001
From: jinkang-0 <jinkang.fang@gmail.com>
Date: Fri, 19 Jan 2024 17:54:00 -0800
Subject: [PATCH] add graphics for schedule

---
 src/components/Schedule.astro | 39 +++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/components/Schedule.astro b/src/components/Schedule.astro
index 780aafe..46ec828 100644
--- a/src/components/Schedule.astro
+++ b/src/components/Schedule.astro
@@ -1,4 +1,13 @@
+---
+import { Image } from 'astro:assets';
+import shapesLeft from '../graphics/shapes_twirl_1.svg';
+import shapesRight from '../graphics/shapes_sparkle_1.svg';
+---
+
 <section>
+  <Image class="shape-left" src={shapesLeft} alt="" />
+  <Image class="shape-right" src={shapesRight} alt="" />
+
   <div class="header-container">
     <h4 id="schedule">SCHEDULE</h4>
     <h3>1 day, but <b>countless</b> possibilities</h3>
@@ -135,4 +144,34 @@
       border-collapse: collapse;
     }
   }
+
+  .shape-left {
+    $offset: 200px;
+
+    position: absolute;
+    top: 100px;
+    left: -$offset;
+    z-index: -1;
+    display: none;
+    transform: translateX(clamp(0px, 15vw, $offset));
+
+    @media (min-width: breakpoints.$tablet) {
+      display: block;
+    }
+  }
+
+  .shape-right {
+    $offset: 100px;
+
+    position: absolute;
+    top: 150px;
+    right: -$offset;
+    z-index: -1;
+    display: none;
+    transform: translateX(clamp(#{-$offset}, -15vw, 0px));
+
+    @media (min-width: breakpoints.$tablet) {
+      display: block;
+    }
+  }
 </style>