add event round and submit

src/components/Layout/BottomNavigation.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 export default function BottomNavigation() {
   return (
-    <div className='fixed bottom-0 w-screen px-2 py-4 bg-black grid grid-cols-4 text-xxs font-semibold text-white'>
+    <div className='fixed z-20 bottom-0 w-screen px-2 py-4 bg-black grid grid-cols-4 text-xxs font-semibold text-white'>
       <Link
         href='/'
         className={`flex flex-col items-center gap-2 ${location.pathname == '/' ? 'text-text-brand-hover' : ''}`}>

src/components/Layout/index.tsx

@@ -1,23 +1,27 @@
-import Footer from "components/Footer";
-import Header from "components/Header";
-import { Roboto_Condensed } from "next/font/google";
-import BottomNavigation from "./BottomNavigation";
-import { useWindowSize } from "usehooks-ts";
-import NHeader from "./Header";
+import Footer from 'components/Footer'
+import Header from 'components/Header'
+import { IBM_Plex_Sans, Roboto_Condensed } from 'next/font/google'
+import BottomNavigation from './BottomNavigation'
+import { useWindowSize } from 'usehooks-ts'
+import NHeader from './Header'
 const roboto = Roboto_Condensed({
-  subsets: ["latin", "vietnamese"],
-  weight: ["400", "300", "700"],
-  variable: "--font-roboto",
-});
+  subsets: ['latin', 'vietnamese'],
+  weight: ['400', '300', '700'],
+  variable: '--font-roboto',
+})
+const ibmplex = IBM_Plex_Sans({
+  subsets: ['latin', 'vietnamese'],
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-ibmplex',
+})
+
 export default function Layout({ children }: any) {
-  const { width } = useWindowSize();
+  const { width } = useWindowSize()
   return (
-    <main className={`bg-gray-50 max-w-screen ${roboto.variable}`}>
+    <main className={`bg-gray-50 max-w-screen ${roboto.variable} ${ibmplex.variable}`}>
       {width < 1280 ? <NHeader /> : <Header />}
-      <div className="min-h-[70vh] text-text-primary relative pt-14 pb-20 xl:pt-0 xl:pb-0">
-        {children}
-      </div>
+      <div className='min-h-[70vh] text-text-primary relative pt-14 pb-20 xl:pt-0 xl:pb-0 z-10'>{children}</div>
       {width < 1280 ? <BottomNavigation /> : <Footer />}
     </main>
-  );
+  )
 }

src/components/pages/event/literature-infinity/Button.tsx

@@ -0,0 +1,67 @@
+export default function Button({
+  children,
+  className,
+  ...rest
+}: {
+  children: React.ReactNode
+  className?: string
+  [key: string]: any
+}) {
+  return (
+    <button className={`text-sm text-white relative flex ${className}`} {...rest}>
+      <svg width='12' height='33' viewBox='0 0 12 33' fill='none' xmlns='http://www.w3.org/2000/svg' className='h-8'>
+        <mask
+          id='path-1-outside-1_9135_67176'
+          maskUnits='userSpaceOnUse'
+          x='-1.18357e-06'
+          y='-0.140626'
+          width='12'
+          height='33'
+          fill='black'>
+          <rect fill='white' x='-1.18357e-06' y='-0.140626' width='12' height='33' />
+          <path d='M7.00326 5.42114C1.00001 7.42484 0.999999 15.104 0.999999 16.5002C0.999999 24.1796 4.84501 27.5317 7.00326 27.5317C7.00326 31.5259 9.30215 32.0489 10.4516 31.8112L10.4516 1.14167C6.32385 1.14167 7.21116 6.02858 7.00326 5.42114Z' />
+        </mask>
+        <path
+          d='M7.00326 5.42114C1.00001 7.42484 0.999999 15.104 0.999999 16.5002C0.999999 24.1796 4.84501 27.5317 7.00326 27.5317C7.00326 31.5259 9.30215 32.0489 10.4516 31.8112L10.4516 1.14167C6.32385 1.14167 7.21116 6.02858 7.00326 5.42114Z'
+          fill='#753F44'
+        />
+        <path
+          d='M7.00326 5.42114L7.94938 5.09732L7.62802 4.15838L6.68666 4.47258L7.00326 5.42114ZM7.00326 27.5317L8.00326 27.5317V26.5317H7.00326L7.00326 27.5317ZM10.4516 31.8112L10.6541 32.7904L11.4516 32.6255L11.4516 31.8112L10.4516 31.8112ZM10.4516 1.14167L11.4516 1.14167L11.4516 0.141674L10.4516 0.141674L10.4516 1.14167ZM6.68666 4.47258C3.26702 5.61395 1.60127 8.37372 0.797998 10.8837C-0.00288843 13.3862 -5.68082e-07 15.7881 -5.68082e-07 16.5002L2 16.5002C2 15.8161 2.00289 13.6803 2.70283 11.4933C3.40038 9.31367 4.73625 7.23203 7.31986 6.3697L6.68666 4.47258ZM-5.68082e-07 16.5002C-5.68082e-07 20.5058 1.00356 23.4691 2.36717 25.4607C3.69758 27.4038 5.46533 28.5317 7.00326 28.5317L7.00326 26.5317C6.38294 26.5317 5.14907 25.9836 4.01741 24.3308C2.91895 22.7265 2 20.174 2 16.5002L-5.68082e-07 16.5002ZM6.00326 27.5317C6.00326 29.7142 6.63616 31.1742 7.65517 32.0258C8.6535 32.86 9.84426 32.9579 10.6541 32.7904L10.2491 30.8319C9.90949 30.9021 9.37609 30.8574 8.93761 30.491C8.51981 30.1419 8.00326 29.3434 8.00326 27.5317L6.00326 27.5317ZM11.4516 31.8112L11.4516 1.14167L9.4516 1.14167L9.4516 31.8112L11.4516 31.8112ZM10.4516 0.141674C9.20664 0.141674 8.24053 0.517072 7.53317 1.15112C6.84447 1.76845 6.48587 2.5547 6.29437 3.24011C6.10252 3.92677 6.06122 4.57358 6.04971 4.98045C6.0422 5.24576 6.04698 5.2818 6.04302 5.36275C6.04245 5.37426 6.04328 5.33967 6.05199 5.28837C6.05559 5.26713 6.06845 5.19252 6.10466 5.10076C6.11491 5.07479 6.24227 4.71531 6.65236 4.54759C7.21171 4.31884 7.62697 4.66123 7.72237 4.75382C7.83474 4.86288 7.89132 4.97142 7.90317 4.99376C7.92401 5.03306 7.93645 5.06359 7.94081 5.0745C7.94618 5.08793 7.94909 5.09648 7.94938 5.09732L6.05714 5.74495C6.06614 5.77124 6.09244 5.84818 6.13629 5.93085C6.15269 5.96176 6.21337 6.07634 6.32944 6.189C6.42855 6.28519 6.84712 6.62873 7.40944 6.39877C7.82249 6.22984 7.95247 5.86678 7.96503 5.83494C8.00356 5.73732 8.01844 5.65455 8.0238 5.62296C8.03602 5.55094 8.03934 5.4868 8.04062 5.46056C8.04405 5.39053 8.04587 5.14444 8.04891 5.03702C8.05849 4.69844 8.09233 4.23742 8.2206 3.77829C8.34923 3.3179 8.55575 2.92039 8.86811 2.6404C9.16181 2.37714 9.63268 2.14167 10.4516 2.14167L10.4516 0.141674Z'
+          fill='#A4765C'
+          mask='url(#path-1-outside-1_9135_67176)'
+        />
+      </svg>
+      <span className='h-8 bg-[#753F44] border-t border-b border-[#A4765C] grid place-items-center flex-1 px-4 text-sm font-medium -mx-[3px] relative z-10'>
+        {children}
+      </span>
+      <svg
+        width='12'
+        height='33'
+        viewBox='0 0 12 33'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        className='rotate-180 h-8'>
+        <mask
+          id='path-1-outside-1_9135_67176'
+          maskUnits='userSpaceOnUse'
+          x='-1.18357e-06'
+          y='-0.140626'
+          width='12'
+          height='33'
+          fill='black'>
+          <rect fill='white' x='-1.18357e-06' y='-0.140626' width='12' height='33' />
+          <path d='M7.00326 5.42114C1.00001 7.42484 0.999999 15.104 0.999999 16.5002C0.999999 24.1796 4.84501 27.5317 7.00326 27.5317C7.00326 31.5259 9.30215 32.0489 10.4516 31.8112L10.4516 1.14167C6.32385 1.14167 7.21116 6.02858 7.00326 5.42114Z' />
+        </mask>
+        <path
+          d='M7.00326 5.42114C1.00001 7.42484 0.999999 15.104 0.999999 16.5002C0.999999 24.1796 4.84501 27.5317 7.00326 27.5317C7.00326 31.5259 9.30215 32.0489 10.4516 31.8112L10.4516 1.14167C6.32385 1.14167 7.21116 6.02858 7.00326 5.42114Z'
+          fill='#753F44'
+        />
+        <path
+          d='M7.00326 5.42114L7.94938 5.09732L7.62802 4.15838L6.68666 4.47258L7.00326 5.42114ZM7.00326 27.5317L8.00326 27.5317V26.5317H7.00326L7.00326 27.5317ZM10.4516 31.8112L10.6541 32.7904L11.4516 32.6255L11.4516 31.8112L10.4516 31.8112ZM10.4516 1.14167L11.4516 1.14167L11.4516 0.141674L10.4516 0.141674L10.4516 1.14167ZM6.68666 4.47258C3.26702 5.61395 1.60127 8.37372 0.797998 10.8837C-0.00288843 13.3862 -5.68082e-07 15.7881 -5.68082e-07 16.5002L2 16.5002C2 15.8161 2.00289 13.6803 2.70283 11.4933C3.40038 9.31367 4.73625 7.23203 7.31986 6.3697L6.68666 4.47258ZM-5.68082e-07 16.5002C-5.68082e-07 20.5058 1.00356 23.4691 2.36717 25.4607C3.69758 27.4038 5.46533 28.5317 7.00326 28.5317L7.00326 26.5317C6.38294 26.5317 5.14907 25.9836 4.01741 24.3308C2.91895 22.7265 2 20.174 2 16.5002L-5.68082e-07 16.5002ZM6.00326 27.5317C6.00326 29.7142 6.63616 31.1742 7.65517 32.0258C8.6535 32.86 9.84426 32.9579 10.6541 32.7904L10.2491 30.8319C9.90949 30.9021 9.37609 30.8574 8.93761 30.491C8.51981 30.1419 8.00326 29.3434 8.00326 27.5317L6.00326 27.5317ZM11.4516 31.8112L11.4516 1.14167L9.4516 1.14167L9.4516 31.8112L11.4516 31.8112ZM10.4516 0.141674C9.20664 0.141674 8.24053 0.517072 7.53317 1.15112C6.84447 1.76845 6.48587 2.5547 6.29437 3.24011C6.10252 3.92677 6.06122 4.57358 6.04971 4.98045C6.0422 5.24576 6.04698 5.2818 6.04302 5.36275C6.04245 5.37426 6.04328 5.33967 6.05199 5.28837C6.05559 5.26713 6.06845 5.19252 6.10466 5.10076C6.11491 5.07479 6.24227 4.71531 6.65236 4.54759C7.21171 4.31884 7.62697 4.66123 7.72237 4.75382C7.83474 4.86288 7.89132 4.97142 7.90317 4.99376C7.92401 5.03306 7.93645 5.06359 7.94081 5.0745C7.94618 5.08793 7.94909 5.09648 7.94938 5.09732L6.05714 5.74495C6.06614 5.77124 6.09244 5.84818 6.13629 5.93085C6.15269 5.96176 6.21337 6.07634 6.32944 6.189C6.42855 6.28519 6.84712 6.62873 7.40944 6.39877C7.82249 6.22984 7.95247 5.86678 7.96503 5.83494C8.00356 5.73732 8.01844 5.65455 8.0238 5.62296C8.03602 5.55094 8.03934 5.4868 8.04062 5.46056C8.04405 5.39053 8.04587 5.14444 8.04891 5.03702C8.05849 4.69844 8.09233 4.23742 8.2206 3.77829C8.34923 3.3179 8.55575 2.92039 8.86811 2.6404C9.16181 2.37714 9.63268 2.14167 10.4516 2.14167L10.4516 0.141674Z'
+          fill='#A4765C'
+          mask='url(#path-1-outside-1_9135_67176)'
+        />
+      </svg>
+    </button>
+  )
+}