feat: Add hackathon landing page at /hackathon (#1576)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: NoamGaash

src/layout/sidebar/menu/Menu.tsx

@@ -1,3 +1,4 @@
+import { CalendarOutlined } from '@ant-design/icons'
 import type { MenuProps } from 'antd'
 import { Menu } from 'antd'
 import React, { useContext, useEffect, useState } from 'react'
@@ -7,6 +8,7 @@ import { LayoutContextInterface, LayoutCtx } from 'src/layout/LayoutContext'
 import { useTheme } from 'src/layout/ThemeContext'
 import { getPathWithoutLang } from 'src/locale/allTranslations'
 import DonateModal from 'src/pages/DonateModal/DonateModal'
+import { EVENT_DATE_ISO, REGISTRATION_CLOSE_ISO } from 'src/pages/hackathon/challenges'
 import { PAGES } from 'src/routes'
 import './menu.scss'
 
@@ -53,12 +55,37 @@ function getGroup(label: React.ReactNode, key: React.Key, children: MenuItem[]):
   }
 }
 
+const HACKATHON_REG_CLOSE_MS = new Date(REGISTRATION_CLOSE_ISO).getTime()
+const HACKATHON_EVENT_MS = new Date(EVENT_DATE_ISO).getTime()
+const HACKATHON_MENU_HIDE_MS = HACKATHON_EVENT_MS + 3 * 24 * 60 * 60 * 1000 // hide 3 days after event
+
 const MainMenu = ({ collapsed = false }: MainMenuProps) => {
   const { t } = useTranslation()
   const { currentLanguage } = useTheme()
   const { setDrawerOpen } = useContext<LayoutContextInterface>(LayoutCtx)
   const [isDonateModalVisible, setDonateModalVisible] = useState(false)
 
+  const now = Date.now()
+  const showHackathon = now < HACKATHON_MENU_HIDE_MS
+
+  const hackathonDaysLeft =
+    now < HACKATHON_REG_CLOSE_MS
+      ? Math.ceil((HACKATHON_REG_CLOSE_MS - now) / (1000 * 60 * 60 * 24))
+      : null
+
+  const hackathonItem = showHackathon
+    ? getItem(
+        <Link to={`/${currentLanguage}/hackathon`} onClick={() => setDrawerOpen(false)}>
+          {t('hackathon_title')}
+          {hackathonDaysLeft !== null && (
+            <span className="hackathon-badge">{hackathonDaysLeft}d</span>
+          )}
+        </Link>,
+        '/hackathon',
+        <CalendarOutlined />,
+      )
+    : null
+
   const handleDonateClick = (e: React.MouseEvent) => {
     e.preventDefault()
     setDonateModalVisible(true)
@@ -87,6 +114,7 @@ const MainMenu = ({ collapsed = false }: MainMenuProps) => {
 
   const groupedItems: MenuItem[] = [
     routeItems['/'],
+    hackathonItem,
     ...MENU_GROUPS.map(({ key, paths }) =>
       getGroup(
         <span className="sidebar-menu-group-title">{t(key)}</span>,
@@ -98,6 +126,7 @@ const MainMenu = ({ collapsed = false }: MainMenuProps) => {
 
   const flatItems: MenuItem[] = [
     routeItems['/'],
+    hackathonItem,
     ...MENU_GROUPS.flatMap(({ paths }) => paths.map((path) => routeItems[path]).filter(Boolean)),
   ].filter(Boolean)
 

src/layout/sidebar/menu/menu.scss

@@ -54,6 +54,19 @@
   }
 }
 
+.hackathon-badge {
+  display: inline-block;
+  font-size: 10px;
+  background: #e6f4ff;
+  color: #1677ff;
+  border-radius: 4px;
+  padding: 1px 5px;
+  margin-inline-start: 6px;
+  font-weight: 700;
+  line-height: 1.5;
+  vertical-align: middle;
+}
+
 .dark .sidebar-menu {
   .ant-menu-item-group-title {
     color: rgb(255 255 255 / 65%);