feat: implement countdown page

src/components/Header/Navbar/Navbar.tsx

@@ -6,14 +6,19 @@ import React from 'react'
 interface NavbarProps {}
 
 const items = [
+  {
+    label: 'Countdown',
+    href: '/countdown',
+  },
   {
     label: 'Explore',
     href: '/',
   },
   {
-    label: 'Dashboard [soon]',
+    label: 'Dashboard',
     href: '/dashboard',
     isDisabled: true,
+    isSoon: true,
   },
   // {
   //   label: 'Leaderboard',
@@ -38,7 +43,7 @@ const Navbar: React.FC<NavbarProps> = () => {
   const currentPath = router.pathname
 
   const isActivePath = (path: string) => {
-    return path !== '/dashboard'
+    return currentPath === path
     // return currentPath.includes(path)
   }
 
@@ -46,9 +51,12 @@ const Navbar: React.FC<NavbarProps> = () => {
     <Navigation>
       {items.map((item, index) =>
         item?.isDisabled === true ? (
-          <NavItem isDisabled key={index} active={isActivePath(item.href)}>
-            {item.label}
-          </NavItem>
+          <NavItemContainer key={index}>
+            <NavItem isDisabled active={isActivePath(item.href)}>
+              {item.label}
+            </NavItem>
+            {item?.isSoon && <SoonText>Soon</SoonText>}
+          </NavItemContainer>
         ) : (
           <Link href={item.href} key={'navbar-item-' + index}>
             {isActivePath(item.href) && (
@@ -90,7 +98,6 @@ const Navigation = styled.ul`
 `
 
 const NavItem = styled.li<{ active?: boolean; isDisabled?: boolean }>`
-  font-weight: 400;
   font-size: 14px;
   line-height: 20px;
   color: rgb(var(--lsd-text-primary));
@@ -110,4 +117,24 @@ const NavItem = styled.li<{ active?: boolean; isDisabled?: boolean }>`
   `}
 `
 
+const NavItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`
+
+const SoonText = styled.span`
+  display: flex;
+  padding: 3px 6px;
+  justify-content: center;
+  align-items: center;
+
+  color: #f29ae9;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.12px;
+`
+
 export default Navbar

src/containers/Countdown/CountdownContainer.tsx

@@ -0,0 +1,31 @@
+import { breakpoints } from '@/configs/ui.configs'
+import styled from '@emotion/styled'
+import React from 'react'
+
+const CountdownContainer: React.FC = () => {
+  return (
+    <Container>
+      <Video autoPlay loop muted playsInline>
+        <source src="/videos/countdown.mp4" type="video/mp4" />
+      </Video>
+    </Container>
+  )
+}
+
+const Container = styled.section`
+  width: 100%;
+
+  @media (max-width: ${breakpoints.sm}px) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`
+
+const Video = styled.video`
+  position: relative;
+  width: 100%;
+  margin-top: 32px;
+`
+
+export default CountdownContainer

src/containers/Countdown/index.ts

@@ -0,0 +1 @@
+export { default as CountdownContainer } from './CountdownContainer'

src/layouts/CountdownLayout/CountdownLayout.tsx

@@ -0,0 +1,58 @@
+import { Header } from '@/components/Header/Header'
+import { Container, Layout } from '@/components/StyledComponents'
+import { breakpoints } from '@/configs/ui.configs'
+import styled from '@emotion/styled'
+import React, { PropsWithChildren } from 'react'
+
+interface CountdownLayoutProps {}
+
+const BackgroundImage = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  background-image: url('/countdown/countdown-desktop-bg.png');
+  filter: blur(150px);
+
+  @media (max-width: ${breakpoints.sm}px) {
+    background-image: url('/countdown/countdown-mobile-bg.png');
+    filter: blur(53px);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`
+
+const CountdownContainer = styled(Container)`
+  @media (max-width: ${breakpoints.sm}px) {
+    height: 100vh;
+  }
+`
+
+const Main = styled.main`
+  @media (max-width: ${breakpoints.sm}px) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+  }
+`
+
+const CountdownLayout: React.FC<CountdownLayoutProps> = (
+  props: PropsWithChildren,
+) => {
+  return (
+    <Layout>
+      <CountdownContainer>
+        <Header />
+        <Main>{props.children}</Main>
+      </CountdownContainer>
+      <BackgroundImage />
+    </Layout>
+  )
+}
+
+export default CountdownLayout

src/layouts/CountdownLayout/index.ts

@@ -0,0 +1 @@
+export { default as CountdownLayout } from './CountdownLayout'

src/pages/countdown.tsx

@@ -0,0 +1,18 @@
+import { SEO } from '@/components/SEO'
+import { CountdownContainer } from '@/containers/Countdown'
+import { CountdownLayout } from '@/layouts/CountdownLayout'
+
+type PageProps = {}
+
+export default function CountdownPage(props: PageProps) {
+  return (
+    <>
+      <SEO pagePath="/docs" />
+      <CountdownContainer />
+    </>
+  )
+}
+
+CountdownPage.getLayout = function getLayout(page: React.ReactNode) {
+  return <CountdownLayout>{page}</CountdownLayout>
+}

src/pages/docs/index.tsx

@@ -6,7 +6,7 @@ type PageProps = {}
 export default function DocsPage(props: PageProps) {
   return (
     <>
-      <SEO />
+      <SEO pagePath="/docs" />
       <DocsContainer />
     </>
   )