diff --git a/public/countdown/countdown-desktop-bg.png b/public/countdown/countdown-desktop-bg.png new file mode 100644 index 0000000..7c58559 Binary files /dev/null and b/public/countdown/countdown-desktop-bg.png differ diff --git a/public/countdown/countdown-mobile-bg.png b/public/countdown/countdown-mobile-bg.png new file mode 100644 index 0000000..91e3297 Binary files /dev/null and b/public/countdown/countdown-mobile-bg.png differ diff --git a/public/videos/countdown.mp4 b/public/videos/countdown.mp4 new file mode 100644 index 0000000..be8aafa Binary files /dev/null and b/public/videos/countdown.mp4 differ diff --git a/src/components/Header/Navbar/Navbar.tsx b/src/components/Header/Navbar/Navbar.tsx index f96e330..53fbab3 100644 --- a/src/components/Header/Navbar/Navbar.tsx +++ b/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 = () => { 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 = () => { {items.map((item, index) => item?.isDisabled === true ? ( - - {item.label} - + + + {item.label} + + {item?.isSoon && Soon} + ) : ( {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 diff --git a/src/containers/Countdown/CountdownContainer.tsx b/src/containers/Countdown/CountdownContainer.tsx new file mode 100644 index 0000000..11ee72f --- /dev/null +++ b/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 ( + + + + ) +} + +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 diff --git a/src/containers/Countdown/index.ts b/src/containers/Countdown/index.ts new file mode 100644 index 0000000..ab7f75e --- /dev/null +++ b/src/containers/Countdown/index.ts @@ -0,0 +1 @@ +export { default as CountdownContainer } from './CountdownContainer' diff --git a/src/layouts/CountdownLayout/CountdownLayout.tsx b/src/layouts/CountdownLayout/CountdownLayout.tsx new file mode 100644 index 0000000..c8e94cf --- /dev/null +++ b/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 = ( + props: PropsWithChildren, +) => { + return ( + + +
+
{props.children}
+ + + + ) +} + +export default CountdownLayout diff --git a/src/layouts/CountdownLayout/index.ts b/src/layouts/CountdownLayout/index.ts new file mode 100644 index 0000000..f85312b --- /dev/null +++ b/src/layouts/CountdownLayout/index.ts @@ -0,0 +1 @@ +export { default as CountdownLayout } from './CountdownLayout' diff --git a/src/pages/countdown.tsx b/src/pages/countdown.tsx new file mode 100644 index 0000000..59df4be --- /dev/null +++ b/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 ( + <> + + + + ) +} + +CountdownPage.getLayout = function getLayout(page: React.ReactNode) { + return {page} +} diff --git a/src/pages/docs/index.tsx b/src/pages/docs/index.tsx index fd6a2fb..9ca57f5 100644 --- a/src/pages/docs/index.tsx +++ b/src/pages/docs/index.tsx @@ -6,7 +6,7 @@ type PageProps = {} export default function DocsPage(props: PageProps) { return ( <> - + )