Merge pull request #19 from terra-money/adding-ui

Adding UI

frontend/.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+build
 dist
 dist-ssr
 *.local

frontend/package.json

@@ -14,13 +14,18 @@
     "@terra-money/feather.js": "^1.2.1",
     "@terra-money/wallet-kit": "^1.0.15",
     "buffer": "^6.0.3",
+    "classnames": "^2.3.2",
     "process": "^0.11.10",
     "react": "^18.2.0",
+    "react-confetti-explosion": "^2.1.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "stream-browserify": "^3.0.0",
+    "usehooks-ts": "^2.9.1",
     "vite-plugin-node-polyfills": "^0.16.0",
-    "vite-plugin-notifier": "^0.1.5"
+    "vite-plugin-notifier": "^0.1.5",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

frontend/src/App.module.scss

@@ -0,0 +1,32 @@
+
+.main__container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100vh;
+
+  background: linear-gradient(180deg, #F1EEE9 0%, #DCD7CF 100%);
+
+  &.mobile__nav__open {
+    overflow: hidden;
+  }
+
+  h1 {
+    color: var(--token-dark-500, #2F2E2D);
+    font-size: 32px;
+    font-weight: 600;
+  }
+
+  h2 {
+    color: var(--token-dark-500, #2F2E2D);
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  p {
+    color: var(--token-dark-500, #2F2E2D);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px; /* 137.5% */
+  }
+}

frontend/src/App.tsx

@@ -1,36 +1,21 @@
-import { NavLink } from "react-router-dom"
-import { useNav } from "./config/routes"
+import { useState } from 'react';
+import classNames from 'classnames/bind';
+import Navigation from './components/navigations/Navigation';
+import { useNav } from './config/routes';
+import styles from './App.module.scss';
 
-function Menu() {
-  const { menu } = useNav()
-  return (
-    <div style={{ display: "flex", justifyContent: "space-between" }}>
-      {menu.map(({ path, name, isExternal }) => {
-        if (isExternal) {
-          return (
-            <a href={path} key={path} target="_blank" rel="noopener noreferrer">
-              {name}
-            </a>
-          )
-        }
-        return (
-          <NavLink to={path} key={path}>
-            {name}
-          </NavLink>
-        )
-      })}
-    </div>
-  )
-}
+const cx = classNames.bind(styles);
+
+const App = () => {
+  const { element: routes } = useNav();
+  const [isMobileNavOpen, setMobileNavOpen] = useState(false);
 
-function App() {
-  const { element: routes } = useNav()
   return (
-    <div>
-      <Menu />
+    <div className={cx(styles.main__container, { [styles.mobile__nav__open]: isMobileNavOpen })}>
+      <Navigation isMobileNavOpen={isMobileNavOpen} setMobileNavOpen={setMobileNavOpen} />
       {routes}
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

frontend/src/components/background/AnimatedBackground.module.scss

@@ -0,0 +1,129 @@
+.main__svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes orbitAroundLargeCircle1 {
+  0% {
+    transform: rotate(270deg) translateX(386.487px); /* Radius of the first large circle */
+  }
+  100% {
+    transform: rotate(400deg) translateX(386.487px);
+  }
+}
+.smallCircle1 {
+  animation: orbitAroundLargeCircle1 20s linear infinite;
+  animation-delay: -1s;
+  transform-origin: -66.1984px 1056.8px; /* Adjusted center */
+}
+
+@keyframes orbitAroundLargeCircle2 {
+  0% {
+    transform: rotate(250deg) translateX(481.408px); /* Radius of the first large circle */
+  }
+  100% {
+    transform: rotate(500deg) translateX(481.408px);
+  }
+}
+.smallCircle2 {
+  animation: orbitAroundLargeCircle2 40s linear infinite;
+  transform-origin: -73.4999px 1049.5px; /* Adjusted center */
+}
+
+@keyframes orbitAroundLargeCircle3 {
+  0% {
+    transform: rotate(500deg) translateX(579.25px);
+  }
+  100% {
+    transform: rotate(150deg) translateX(579.25px); /* Radius of the first large circle */
+  }
+}
+.smallCircle3 {
+  animation: orbitAroundLargeCircle3 40s linear infinite;
+  transform-origin: -72.0397px 1050.96px; /* Adjusted center */
+}
+
+@keyframes orbitAroundLargeCircle4 {
+  0% {
+    transform: rotate(150deg) translateX(677.092px);
+  }
+  100% {
+    transform: rotate(500deg) translateX(677.092px); /* Radius of the first large circle */
+  }
+}
+.smallCircle4 {
+  animation: orbitAroundLargeCircle4 40s linear infinite;
+  animation-delay: 4s;
+  transform-origin: -73.4999px 1049.5px; /* Adjusted center */
+}
+
+@keyframes orbitAroundLargeCircle5 {
+  0% {
+    transform: rotate(250deg) translateX(773.474px);
+  }
+  100% {
+    transform: rotate(500deg) translateX(773.474px); /* Radius of the first large circle */
+  }
+}
+.smallCircle5 {
+  animation: orbitAroundLargeCircle5 40s linear infinite;
+  // animation-delay: 4s;
+  transform-origin: -73.5001px 1049.5px; /* Adjusted center */
+}
+
+@keyframes orbitAroundLargeCircle6 {
+  0% {
+    transform: rotate(-90deg) translateX(868.395px);
+  }
+  100% {
+    transform: rotate(300deg) translateX(868.395px); /* Radius of the first large circle */
+  }
+}
+.smallCircle6 {
+  animation: orbitAroundLargeCircle6 100s linear infinite;
+  // animation-delay: 4s;
+  transform-origin: -72.0397px 1050.96px; /* Adjusted center */
+}
+
+@keyframes orbitAroundLargeCircle7 {
+  0% {
+    transform: rotate(-190deg) translateX(966.237px);
+  }
+  100% {
+    transform: rotate(300deg) translateX(966.237px); /* Radius of the first large circle */
+  }
+}
+.smallCircle7 {
+  animation: orbitAroundLargeCircle7 100s linear infinite;
+  // animation-delay: 4s;
+  transform-origin: -73.5px 1049.5px; /* Adjusted center */
+}
+
+@keyframes orbitAroundLargeCircle8 {
+  0% {
+    transform: rotate(45deg) translateX(1062.62px); /* Radius of the first large circle */
+  }
+  100% {
+    transform: rotate(-180deg) translateX(1062.62px);
+  }
+}
+.smallCircle8 {
+  animation: orbitAroundLargeCircle8 40s linear infinite;
+  // animation-delay: 4s;
+  transform-origin: -53.5px 1029.5px; /* Adjusted center */
+}
+
+@keyframes orbitAroundLargeCircle9 {
+  0% {
+    transform: rotate(45deg) translateX(1159px); /* Radius of the first large circle */
+  }
+  100% {
+    transform: rotate(-180deg) translateX(1159px);
+  }
+}
+.smallCircle9 {
+  animation: orbitAroundLargeCircle9 60s linear infinite;
+  // animation-delay: 4s;
+  transform-origin: -23.5px 999.5px; /* Adjusted center */
+}

frontend/src/components/background/AnimatedBackground.tsx

@@ -0,0 +1,34 @@
+import styles from "./AnimatedBackground.module.scss";
+
+export const AnimatedBackground = () => {
+  return (
+    <svg className={styles.main__svg} width="1136" height="940" viewBox="0 0 1136 940" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="-66.1984" cy="1056.8" r="386.487" stroke="#4D4A48"/>
+      <circle cx="-66.1984" cy="1056.8" r="25.7859" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle1} />
+
+      <circle cx="-73.4999" cy="1049.5" r="481.408" stroke="#4D4A48"/>
+      <circle cx="-73.4999" cy="1049.5" r="31.6272" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle2} />
+
+      <circle cx="-72.0397" cy="1050.96" r="579.25" stroke="#4D4A48"/>
+      <circle cx="-72.0397" cy="1050.96" r="34.5479" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle3} />
+
+      <circle cx="-73.4999" cy="1049.5" r="677.092" stroke="#4D4A48"/>
+      <circle cx="-73.4999" cy="1049.5" r="37.4685" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle4} />
+
+      <circle cx="-73.5001" cy="1049.5" r="773.474" stroke="#4D4A48"/>
+      <circle cx="-73.5001" cy="1049.5" r="34.5479" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle5} />
+
+      <circle cx="-72.0397" cy="1050.96" r="868.395" stroke="#4D4A48"/>
+      <circle cx="-72.0397" cy="1050.96" r="60.8338" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle6} />
+
+      <circle cx="-73.5" cy="1049.5" r="966.237" stroke="#4D4A48"/>
+      <circle cx="-73.5" cy="1049.5" r="49.1511" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle7} />
+
+      <circle cx="-53.5" cy="1029.5" r="1062.62" stroke="#4D4A48"/>
+      <circle cx="-53.5" cy="1029.5" r="34.5479" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle8} />
+
+      <circle cx="-23.5" cy="999.5" r="1159" stroke="#4D4A48"/>
+      <circle cx="-23.5" cy="999.5" r="25.7859" fill="#2F2E2D" stroke="#4D4A48" className={styles.smallCircle9}/>
+    </svg>
+  );
+};