feat: add guide route and message page and empty person page

src/components/GuideBar/index.scss

@@ -0,0 +1,88 @@
+@use '~@/scss/images.scss' as img;
+
+.guide-bar-container {
+  padding-top: calc(60px + 20px + env(safe-area-inset-bottom));
+}
+
+.guide-bar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: calc(60px + 20px + env(safe-area-inset-bottom));
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 12px env(safe-area-inset-bottom);
+
+  &-pages {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    display: inline-flex;
+    height: 60px;
+    padding: 8px 6px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: rgba(255, 255, 255, 0.40);
+    box-shadow: 0 4px 64px 0 rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(16px);
+
+    &-item {
+      display: flex;
+      width: 76px;
+      height: 48px;
+      padding: 14px 22px;
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      color: rgba(60, 60, 67, 0.60);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 125% */
+    }
+
+    &-item-active {
+      display: flex;
+      width: 76px;
+      height: 48px;
+      padding: 14px 22px;
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      border-radius: 999px;
+      border: 0.5px solid rgba(0, 0, 0, 0.06);
+      background: #FFF;
+      box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+      color: #000;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 125% */
+    }
+  }
+
+  &-publish {
+    display: flex;
+    width: 60px;
+    height: 60px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: 999px;
+    // border: 2px solid rgba(0, 0, 0, 0.06);
+    background: radial-gradient(75.92% 98.69% at 26.67% 8.33%, #BDFF4A 16.88%, #95F23E 54.19%, #32D838 100%);
+    box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+    backdrop-filter: blur(16px);
+
+    &-icon {
+      width: 36px;
+      height: 36px;
+    }
+  }
+}