Add home page bg assets

pages/index.tsx

@@ -13,6 +13,7 @@ import { ConnectWalletModal } from "../components/connect-wallet-modal";
 import MainTitle from "../public/images/svg/main-title.svg";
 import MainLogo from "../public/images/svg/main-logo.svg";
 import CheckIcon from "../public/images/svg/check-icon.svg";
+import StarIcon from "../public/images/svg/bg-asset-3.svg";
 import { Logo } from "../components/logo";
 import { useEffect, useState } from "react";
 import { MINIMUM_OSMO_FEE, SELECTED_WALLET_KEY } from "../constants/wallet";
@@ -48,6 +49,20 @@ export default function Home() {
       <MainContainer>
         <MainTitleContainer>
           <MainTitleImageBackground>
+            <Image
+              src={StarIcon}
+              width={50}
+              height={50}
+              alt="Star Icon"
+              className="starIcon first"
+            />
+            <Image
+              src={StarIcon}
+              width={50}
+              height={50}
+              alt="Star Icon"
+              className="starIcon last"
+            />
             <MainTitleImageContainer>
               <Image
                 src={MainTitle}
@@ -112,6 +127,15 @@ const Container = styled.div`
 
   width: 100vw;
   height: 100vh;
+
+  background-image: url("/images/svg/bg-asset-1.svg"),
+    url("/images/svg/bg-asset-2.svg"), url("/images/svg/bg-asset-2.svg"),
+    url("/images/svg/bg-asset-3.svg"), url("/images/svg/bg-asset-3.svg");
+  background-size: 5rem 5rem, 5rem 5rem, 5rem 5rem, 3.125rem 3.125rem,
+    3.125rem 3.125rem;
+  background-position: 80px 640px, 960px 80px, 1200px 720px, 136px 776px,
+    1016px 696px;
+  background-repeat: no-repeat;
 `;
 
 const MainContainer = styled.div`
@@ -120,6 +144,20 @@ const MainContainer = styled.div`
 
   margin-top: 15rem;
   margin-left: 10rem;
+
+  img.starIcon {
+    position: absolute;
+
+    &.first {
+      left: -24px;
+      top: -24px;
+    }
+
+    &.last {
+      right: -23px;
+      top: -24px;
+    }
+  }
 `;
 
 const MainTitleContainer = styled.div`

public/images/svg/bg-asset-1.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0C-9.27438e-07 10.6087 4.21427 20.7828 11.7157 28.2843C19.2172 35.7857 29.3913 40 40 40C50.6087 40 60.7828 35.7857 68.2843 28.2843C75.7857 20.7828 80 10.6087 80 1.30337e-05L0 0Z" fill="#242424"/>
+<path d="M0 40C-9.27438e-07 50.6087 4.21427 60.7828 11.7157 68.2843C19.2172 75.7857 29.3913 80 40 80C50.6087 80 60.7828 75.7857 68.2843 68.2843C75.7857 60.7828 80 50.6087 80 40L0 40Z" fill="#242424"/>
+</svg>

public/images/svg/bg-asset-2.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 80C10.6087 80 20.7828 75.7857 28.2843 68.2843C35.7857 60.7828 40 50.6087 40 40C40 29.3913 35.7857 19.2172 28.2843 11.7157C20.7828 4.21428 10.6087 -4.6372e-07 9.53674e-06 0L0 80Z" fill="#242424"/>
+<path d="M40 80C50.6087 80 60.7828 75.7857 68.2843 68.2843C75.7857 60.7828 80 50.6087 80 40C80 29.3913 75.7857 19.2172 68.2843 11.7157C60.7828 4.21428 50.6087 -4.6372e-07 40 0L40 80Z" fill="#242424"/>
+</svg>

public/images/svg/bg-asset-3.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25 0L25.3504 2.74704C26.8096 14.1848 35.8152 23.1904 47.253 24.6496L50 25L47.253 25.3504C35.8152 26.8096 26.8096 35.8152 25.3504 47.253L25 50L24.6496 47.253C23.1904 35.8152 14.1848 26.8096 2.74704 25.3504L0 25L2.74704 24.6496C14.1848 23.1904 23.1904 14.1848 24.6496 2.74704L25 0Z" fill="#2B2B2B"/>
+</svg>