diff --git a/components/Activity/Hackathon/ActionHub.module.less b/components/Activity/Hackathon/ActionHub.module.less
new file mode 100644
index 0000000..270acd4
--- /dev/null
+++ b/components/Activity/Hackathon/ActionHub.module.less
@@ -0,0 +1,177 @@
+@import './theme.less';
+
+.section {
+  padding-top: clamp(3rem, 5vw, 4rem);
+}
+
+.registerWrap {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  align-items: start;
+  gap: 1.5rem;
+
+  @media (max-width: 1199px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.registerCard {
+  ;
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
+}
+
+.registerCardInner,
+.entryHub {
+  padding: 1.55rem;
+}
+
+.regEyebrow,
+.entryEyebrow {
+  margin: 0;
+  color: @cyan;
+  font-weight: 700;
+  font-size: 0.75rem;
+  font-family: @heading;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.entryStep {
+  color: @cyan;
+  font-weight: 700;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.regTitle,
+.entryTitle {
+  margin: 0;
+  color: #fff;
+  font-weight: 800;
+  font-size: clamp(1.55rem, 3vw, 2.1rem);
+  line-height: 1.3;
+  font-family: @heading;
+}
+
+.regTitle {
+  margin-top: 0;
+}
+
+.regDesc,
+.entryCard p {
+  color: @muted;
+  line-height: 1.75;
+}
+
+.regDesc {
+  margin: 0;
+}
+
+.regActions,
+.entryLinks {
+  min-width: 0;
+}
+
+.actionButton {
+  ;
+}
+
+.actionButtonGhost {
+  ;
+  border-color: rgba(255, 255, 255, 0.18);
+  color: @muted;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.36);
+    color: @cyan;
+  }
+}
+
+.entryLink {
+  border: 1px solid rgba(44, 232, 255, 0.24);
+  border-radius: 8px;
+  background: rgba(44, 232, 255, 0.06);
+  padding: 0.42rem 0.85rem;
+  color: @cyan;
+  font-size: 0.8rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.48);
+    background: rgba(44, 232, 255, 0.12);
+    color: @cyan;
+    text-decoration: none;
+  }
+}
+
+.regFacts {
+  margin: 0;
+
+  li {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.44rem 0.9rem;
+    color: @copy;
+    font-size: 0.82rem;
+  }
+}
+
+.entryHubHead {
+  margin-bottom: 0;
+}
+
+.entryTitle {
+  margin-top: 0;
+  font-size: 1.55rem;
+}
+
+.entryCard {
+  ;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
+  padding: 1.3rem;
+  height: 100%;
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: rgba(44, 232, 255, 0.26);
+  }
+}
+
+.entryStep {
+  color: @cyan;
+}
+
+.entryCard h4 {
+  margin: 0;
+  color: #fff;
+  font-size: 1.02rem;
+  font-family: @heading;
+}
+
+.entryCard p {
+  margin: 0;
+}
+
+.entryMetaRow {
+  margin: 0;
+}
+
+.entryMeta {
+  border-radius: 999px;
+  background: rgba(255, 201, 77, 0.12);
+  padding: 0.28rem 0.7rem;
+  color: @gold;
+  font-weight: 700;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
diff --git a/components/Activity/Hackathon/ActionHub.tsx b/components/Activity/Hackathon/ActionHub.tsx
new file mode 100644
index 0000000..b471a8b
--- /dev/null
+++ b/components/Activity/Hackathon/ActionHub.tsx
@@ -0,0 +1,117 @@
+import type { FC, PropsWithChildren } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+
+import { HackathonHeroAction } from './Hero';
+import styles from './ActionHub.module.less';
+
+export interface HackathonActionHubEntry {
+  count: number;
+  description: string;
+  eyebrow: string;
+  links: HackathonHeroAction[];
+  title: string;
+}
+
+export interface HackathonActionHubProps {
+  entries: HackathonActionHubEntry[];
+  facts: string[];
+  primaryAction?: HackathonHeroAction;
+  primaryDescription: string;
+  primaryTitle: string;
+  subtitle: string;
+  title: string;
+}
+
+export const HackathonActionHubLink: FC<{
+  action: HackathonHeroAction;
+  variant: 'ghost' | 'primary';
+}> = ({ action, variant }) => (
+  <a
+    className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
+    href={action.href}
+    {...(action.external && { target: '_blank', rel: 'noreferrer' })}
+  >
+    {action.label}
+  </a>
+);
+
+const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({ entry, step }) => (
+  <article className={styles.entryCard}>
+    <span className={styles.entryStep}>
+      {step} · {entry.eyebrow}
+    </span>
+    <h4 className="mt-2 mb-2">{entry.title}</h4>
+    <p>{entry.description}</p>
+
+    <div className={`${styles.entryMetaRow} d-flex flex-wrap gap-2 my-3`}>
+      <span className={`${styles.entryMeta} d-inline-flex align-items-center`}>{entry.count}</span>
+      <span className={`${styles.entryMeta} d-inline-flex align-items-center`}>
+        {entry.eyebrow}
+      </span>
+    </div>
+
+    <nav className={`${styles.entryLinks} d-flex flex-wrap gap-3`} aria-label={entry.title}>
+      {entry.links.map(link => (
+        <a
+          key={`${link.label}-${link.href}`}
+          className={`${styles.entryLink} d-inline-flex align-items-center`}
+          href={link.href}
+          {...(link.external && { target: '_blank', rel: 'noreferrer' })}
+        >
+          {link.label}
+        </a>
+      ))}
+    </nav>
+  </article>
+);
+
+export const HackathonActionHub: FC<PropsWithChildren<HackathonActionHubProps>> = ({
+  children,
+  entries,
+  facts,
+  primaryAction,
+  primaryDescription,
+  primaryTitle,
+  subtitle,
+  title,
+}) => (
+  <section id="entry-hub" className={styles.section}>
+    <Container>
+      <div className={styles.registerWrap}>
+        <article className={styles.registerCard}>
+          <div className={styles.registerCardInner}>
+            <p className={`${styles.regEyebrow} mb-1`}>{title}</p>
+            <h2 className={`${styles.regTitle} mt-2`}>{primaryTitle}</h2>
+            <p className={`${styles.regDesc} mt-3 mb-4`}>{primaryDescription}</p>
+
+            <nav className={`${styles.regActions} d-flex flex-wrap gap-3`} aria-label={title}>
+              {primaryAction && <HackathonActionHubLink action={primaryAction} variant="primary" />}
+              {children}
+            </nav>
+
+            <ul className={`list-unstyled ${styles.regFacts} d-flex flex-wrap gap-2 mt-4`}>
+              {facts.map(fact => (
+                <li key={fact}>{fact}</li>
+              ))}
+            </ul>
+          </div>
+        </article>
+
+        <div className={styles.entryHub}>
+          <header className={`${styles.entryHubHead} mb-4`}>
+            <p className={`${styles.entryEyebrow} mb-1`}>{subtitle}</p>
+            <h3 className={`${styles.entryTitle} mt-2`}>{title}</h3>
+          </header>
+
+          <Row as="ol" className="list-unstyled g-3 mb-0">
+            {entries.map((entry, index) => (
+              <Col as="li" key={entry.title} md={6}>
+                <ActionEntryCard entry={entry} step={String(index + 1).padStart(2, '0')} />
+              </Col>
+            ))}
+          </Row>
+        </div>
+      </div>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/Awards.module.less b/components/Activity/Hackathon/Awards.module.less
new file mode 100644
index 0000000..1451dc4
--- /dev/null
+++ b/components/Activity/Hackathon/Awards.module.less
@@ -0,0 +1,231 @@
+@import './theme.less';
+
+;
+
+.supportEyebrow {
+  margin: 0 0 0.4rem;
+  color: @cyan;
+  font-weight: 700;
+  font-size: 0.75rem;
+  font-family: @heading;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.supportCopy {
+  min-width: 0;
+}
+
+.awardsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1rem;
+}
+
+.judgingCard {
+  margin-top: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at top right, rgba(255, 201, 77, 0.08), transparent 30%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
+    rgba(8, 18, 39, 0.82);
+  padding: 1.4rem;
+}
+
+.judgingTitle {
+  margin: 0;
+  color: #fff;
+  font-size: 1rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.criteriaGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.9rem;
+
+  @media (max-width: 991px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.criterion {
+  grid-template-columns: auto 1fr;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 0.9rem;
+}
+
+.criterionWeight {
+  color: @cyan;
+  font-size: 1.15rem;
+  font-family: @heading;
+}
+
+.criterionTitle {
+  display: block;
+  color: #fff;
+  font-size: 0.92rem;
+  line-height: 1.45;
+}
+
+.criterionDescription {
+  margin: 0;
+  color: @muted;
+  font-size: 0.87rem;
+  line-height: 1.6;
+}
+
+.badgeTile {
+  ;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-4px);
+    border-color: rgba(255, 201, 77, 0.32);
+  }
+}
+
+.badgeArtWrap {
+  padding: 1.1rem 1.1rem 0;
+}
+
+.badgeArt {
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.04);
+  aspect-ratio: 1;
+  width: 100%;
+  object-fit: cover;
+}
+
+.badgeTileBody {
+  padding: 1.15rem 1.2rem 1.3rem;
+}
+
+.badgeTierLabel {
+  color: @gold;
+  font-size: 0.74rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.badgeTileTitle,
+.supportTitle {
+  margin: 0;
+  color: #fff;
+  font-weight: 800;
+  font-family: @heading;
+}
+
+.badgeTileTitle {
+  font-size: 1.05rem;
+}
+
+.badgeTileCopy,
+.supportDescription {
+  color: @muted;
+  line-height: 1.75;
+}
+
+.badgeTileCopy {
+  margin: 0.7rem 0 1rem;
+}
+
+.prizeMeta {
+  display: grid;
+  gap: 0.7rem;
+  margin: 0;
+
+  div {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    gap: 0.8rem;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  dt {
+    color: @muted;
+    font-size: 0.72rem;
+    font-family: @heading;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  dd {
+    color: #fff;
+    line-height: 1.5;
+  }
+}
+
+.supportCard {
+  ;
+  display: grid;
+  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
+  gap: 1.25rem;
+  margin-top: 0;
+  padding: 1.55rem;
+
+  @media (max-width: 1199px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.supportTitle {
+  margin-top: 0;
+  font-size: 1.45rem;
+}
+
+.partnerGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.supportLink {
+  justify-self: start;
+  margin-top: 0;
+  border: 1px solid rgba(44, 232, 255, 0.3);
+  border-radius: 10px;
+  background: rgba(44, 232, 255, 0.08);
+  padding: 0.65rem 1rem;
+  color: #fff;
+  font-size: 0.82rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.52);
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.partnerLink {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 1rem;
+  min-height: 104px;
+}
+
+.partnerLogo {
+  max-width: 100%;
+  max-height: 58px;
+  object-fit: contain;
+}
diff --git a/components/Activity/Hackathon/Awards.tsx b/components/Activity/Hackathon/Awards.tsx
new file mode 100644
index 0000000..c8b2ef5
--- /dev/null
+++ b/components/Activity/Hackathon/Awards.tsx
@@ -0,0 +1,166 @@
+import { TableCellValue } from 'mobx-lark';
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { LarkImage } from '../../LarkImage';
+import type { HackathonHeroAction } from './Hero';
+import styles from './Awards.module.less';
+
+export interface HackathonAwardsMeta<Value = string> {
+  label: string;
+  value: Value;
+}
+
+export interface HackathonPrizeItem {
+  description: string;
+  id: string;
+  image?: TableCellValue;
+  meta: HackathonAwardsMeta[];
+  tier: string;
+  title: string;
+}
+
+export interface HackathonOrganizationItem {
+  href?: string;
+  id: string;
+  logo?: TableCellValue;
+  name: string;
+}
+
+export type HackathonJudgingCriterion = Record<'id' | 'title' | 'weight' | 'description', string>;
+
+export interface HackathonAwardsProps {
+  criteria?: HackathonJudgingCriterion[];
+  organizations: HackathonOrganizationItem[];
+  prizes: HackathonPrizeItem[];
+  subtitle: string;
+  supportAction?: HackathonHeroAction;
+  supportDescription: string;
+  supportEyebrow: string;
+  supportTitle: string;
+  title: string;
+}
+
+const PrizeCard: FC<HackathonPrizeItem> = ({ description, image, meta, tier, title }) => (
+  <article className={styles.badgeTile}>
+    {image && (
+      <div className={styles.badgeArtWrap}>
+        <LarkImage src={image} alt={title} className={styles.badgeArt} />
+      </div>
+    )}
+
+    <div className={styles.badgeTileBody}>
+      <span className={styles.badgeTierLabel}>{tier}</span>
+      <h3 className={styles.badgeTileTitle}>{title}</h3>
+      <p className={styles.badgeTileCopy}>{description}</p>
+
+      <dl className={styles.prizeMeta}>
+        {meta.map(({ label, value }) => (
+          <div key={`${label}-${value}`}>
+            <dt>{label}</dt>
+            <dd>{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  </article>
+);
+
+const OrganizationLogo: FC<HackathonOrganizationItem> = ({ href, logo, name }) => {
+  const imageNode = <LarkImage src={logo} alt={name} className={styles.partnerLogo} />;
+
+  return href ? (
+    <a
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      title={name}
+      className={`${styles.partnerLink} d-flex justify-content-center align-items-center`}
+    >
+      {imageNode}
+    </a>
+  ) : (
+    <div
+      className={`${styles.partnerLink} d-flex justify-content-center align-items-center`}
+      title={name}
+    >
+      {imageNode}
+    </div>
+  );
+};
+
+export const HackathonAwards: FC<HackathonAwardsProps> = ({
+  criteria,
+  organizations,
+  prizes,
+  subtitle,
+  supportAction,
+  supportDescription,
+  supportEyebrow,
+  supportTitle,
+  title,
+}) => (
+  <section id="awards" className={styles.section}>
+    <Container>
+      {prizes[0] && (
+        <>
+          <header className={styles.sectionHeader}>
+            <h2 className={styles.sectionTitle}>{title}</h2>
+            <p className={styles.sectionSubtitle}>{subtitle}</p>
+            <div className={styles.accentLine} />
+          </header>
+
+          <div className={`${styles.awardsGrid} gap-3`}>
+            {prizes.map(prize => (
+              <PrizeCard key={prize.id} {...prize} />
+            ))}
+          </div>
+
+          {criteria?.[0] && (
+            <article className={`${styles.judgingCard} mt-4`}>
+              <h3 className={`${styles.judgingTitle} mb-3`}>{subtitle}</h3>
+
+              <ul className={`list-unstyled ${styles.criteriaGrid}`}>
+                {criteria.map(({ description, id, title, weight }) => (
+                  <li key={id} className={`${styles.criterion} d-grid align-items-start gap-3`}>
+                    <span className={styles.criterionWeight}>{weight}</span>
+                    <div>
+                      <strong className={styles.criterionTitle}>{title}</strong>
+                      <p className={`${styles.criterionDescription} mt-2 mb-0`}>{description}</p>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </article>
+          )}
+        </>
+      )}
+
+      {organizations[0] && (
+        <div className={`${styles.supportCard} mt-4`}>
+          <div className={`${styles.supportCopy} d-flex flex-column justify-content-center`}>
+            <p className={`${styles.supportEyebrow} mb-1`}>{supportEyebrow}</p>
+            <h3 className={`${styles.supportTitle} mt-2`}>{supportTitle}</h3>
+            <p className={styles.supportDescription}>{supportDescription}</p>
+          </div>
+
+          <nav className={styles.partnerGrid} aria-label={supportEyebrow}>
+            {organizations.map(organization => (
+              <OrganizationLogo key={organization.id} {...organization} />
+            ))}
+          </nav>
+
+          {supportAction && (
+            <a
+              className={`${styles.supportLink} d-inline-flex align-items-center mt-2`}
+              href={supportAction.href}
+              {...(supportAction.external && { target: '_blank', rel: 'noreferrer' })}
+            >
+              {supportAction.label}
+            </a>
+          )}
+        </div>
+      )}
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/FAQ.module.less b/components/Activity/Hackathon/FAQ.module.less
new file mode 100644
index 0000000..3afdf74
--- /dev/null
+++ b/components/Activity/Hackathon/FAQ.module.less
@@ -0,0 +1,74 @@
+@import './theme.less';
+
+;
+
+.faqGrid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @media (max-width: 991px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.faqItem {
+  transition:
+    border-color 0.24s ease,
+    transform 0.24s ease,
+    box-shadow 0.24s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at top right, rgba(44, 232, 255, 0.08), transparent 36%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
+    rgba(8, 18, 39, 0.8);
+  padding: 1.35rem 1.5rem;
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
+    border-color: rgba(44, 232, 255, 0.24);
+  }
+
+  &[open] {
+    border-color: rgba(44, 232, 255, 0.28);
+  }
+}
+
+.faqQuestion {
+  position: relative;
+  cursor: pointer;
+  padding-right: 2rem;
+  color: #fff;
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.6;
+  list-style: none;
+
+  &::marker,
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transition: transform 0.24s ease;
+    content: '+';
+    color: @cyan;
+    font-weight: 300;
+    font-size: 1.5rem;
+    line-height: 1;
+  }
+}
+
+.faqItem[open] .faqQuestion::after {
+  transform: rotate(45deg);
+}
+
+.faqAnswer {
+  margin: 0;
+  color: @muted;
+  font-size: 0.95rem;
+  line-height: 1.8;
+}
diff --git a/components/Activity/Hackathon/FAQ.tsx b/components/Activity/Hackathon/FAQ.tsx
new file mode 100644
index 0000000..8f9676d
--- /dev/null
+++ b/components/Activity/Hackathon/FAQ.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import styles from './FAQ.module.less';
+
+export type HackathonFAQItem = Record<'id' | 'question' | 'answer', string>;
+
+export interface HackathonFAQProps {
+  items: HackathonFAQItem[];
+  subtitle: string;
+  title: string;
+}
+
+export const HackathonFAQ: FC<HackathonFAQProps> = ({ items, subtitle, title }) => (
+  <section id="faq" className={styles.section}>
+    <Container>
+      <header className={styles.sectionHeader}>
+        <h2 className={styles.sectionTitle}>{title}</h2>
+        <p className={styles.sectionSubtitle}>{subtitle}</p>
+        <div className={styles.accentLine} />
+      </header>
+
+      <div className={`${styles.faqGrid} d-grid gap-3`}>
+        {items.map(({ answer, id, question }) => (
+          <details key={id} className={styles.faqItem}>
+            <summary className={styles.faqQuestion}>{question}</summary>
+            <p className={`${styles.faqAnswer} mt-3 mb-0`}>{answer}</p>
+          </details>
+        ))}
+      </div>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/Hero.module.less b/components/Activity/Hackathon/Hero.module.less
new file mode 100644
index 0000000..c04735b
--- /dev/null
+++ b/components/Activity/Hackathon/Hero.module.less
@@ -0,0 +1,457 @@
+@import './theme.less';
+
+.hero {
+  position: relative;
+  padding: 7.75rem 0 clamp(3.5rem, 6vw, 5rem);
+  min-height: clamp(720px, 92vh, 900px);
+  overflow: hidden;
+
+  scroll-margin-top: 5rem;
+  color: @copy;
+
+  &::before,
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: '';
+  }
+
+  &::before {
+    opacity: 0.45;
+    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
+    background-image:
+      linear-gradient(rgba(44, 232, 255, 0.08) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(44, 232, 255, 0.08) 1px, transparent 1px);
+    background-size: 54px 54px;
+  }
+
+  &::after {
+    inset: auto 0 0;
+    background: linear-gradient(180deg, transparent, rgba(5, 8, 20, 0.95));
+    height: 140px;
+  }
+}
+
+.siteHeader {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 20;
+  backdrop-filter: blur(20px) saturate(1.4);
+  border-bottom: 1px solid rgba(44, 232, 255, 0.12);
+  background: rgba(4, 4, 15, 0.78);
+}
+
+.headerContainer {
+  min-width: 0;
+}
+
+.logoText {
+  color: #fff;
+  font-weight: 900;
+  font-size: clamp(1.25rem, 2vw, 1.75rem);
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.headerNav {
+  min-width: 0;
+}
+
+.headerNavLink {
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.95rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.heroInner {
+  display: grid;
+  position: relative;
+  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 440px);
+  align-items: start;
+  gap: clamp(2rem, 4vw, 4rem);
+  z-index: 1;
+}
+
+.heroContent {
+  gap: 1.5rem;
+  max-width: 680px;
+}
+
+.heroBadge {
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.42rem 0.9rem;
+  color: @copy;
+  font-weight: 700;
+  font-size: 0.78rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.heroBadgeCyan {
+  box-shadow: 0 0 18px rgba(44, 232, 255, 0.22);
+  border-color: rgba(44, 232, 255, 0.28);
+  color: @cyan;
+}
+
+.heroBadgeGold {
+  box-shadow: 0 0 18px rgba(255, 201, 77, 0.18);
+  border-color: rgba(255, 201, 77, 0.24);
+  color: @gold;
+}
+
+.heroBadgeGreen {
+  box-shadow: 0 0 18px rgba(72, 241, 168, 0.2);
+  border-color: rgba(72, 241, 168, 0.24);
+  color: @green;
+}
+
+.heroBadgeRose {
+  box-shadow: 0 0 18px rgba(255, 120, 186, 0.18);
+  border-color: rgba(255, 120, 186, 0.24);
+  color: @rose;
+}
+
+.title {
+  gap: 0.35rem;
+  line-height: 1.02;
+  font-family: @heading;
+  letter-spacing: 0.03em;
+}
+
+.heroTitlePrimary {
+  display: block;
+  color: #fff;
+  font-weight: 900;
+  font-size: clamp(3rem, 6vw, 5.25rem);
+}
+
+.heroTitleAccent {
+  display: block;
+  background: linear-gradient(135deg, @gold 0%, #ff9a1a 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: 900;
+  font-size: clamp(2.65rem, 5.5vw, 4.75rem);
+}
+
+.heroTitleSecondary {
+  display: block;
+  background: linear-gradient(90deg, @cyan, @gold 78%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: clamp(1rem, 1.7vw, 1.45rem);
+  letter-spacing: 0.32em;
+  text-transform: none;
+}
+
+.description {
+  margin: 0;
+  max-width: 62ch;
+  color: @muted;
+  font-size: 1.08rem;
+  line-height: 1.8;
+  font-family: @body;
+
+  strong {
+    color: #fff;
+  }
+}
+
+.countdownWrap {
+  display: grid;
+  gap: 0.75rem;
+  max-width: 520px;
+}
+
+.countdownLabel {
+  color: @muted;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.countdownGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.8rem;
+}
+
+.countdownCell {
+  gap: 0.7rem;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
+    0 0 26px rgba(44, 232, 255, 0.08);
+  border: 1px solid rgba(44, 232, 255, 0.26);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(44, 232, 255, 0.08), rgba(44, 232, 255, 0.03));
+  min-height: 120px;
+
+  strong {
+    color: #fff;
+    font-size: clamp(2.3rem, 4vw, 3.8rem);
+    line-height: 1;
+    font-family: @heading;
+    letter-spacing: 0.08em;
+  }
+
+  span {
+    color: rgba(255, 255, 255, 0.72);
+    font-size: 0.82rem;
+    font-family: @heading;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+  }
+}
+
+.actionButton {
+  box-shadow: 0 0 28px rgba(44, 232, 255, 0.14);
+  border-color: rgba(44, 232, 255, 0.48);
+  background: rgba(44, 232, 255, 0.08);
+  color: #fff;
+
+  &:hover {
+    box-shadow: 0 0 36px rgba(44, 232, 255, 0.22);
+    border-color: rgba(44, 232, 255, 0.72);
+    color: #fff;
+  }
+}
+
+.actionButtonGhost {
+  border-color: rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.03);
+  color: rgba(255, 255, 255, 0.82);
+
+  &:hover {
+    border-color: rgba(255, 255, 255, 0.28);
+    color: #fff;
+  }
+}
+
+.statChip {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 0.45rem 0.75rem;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 0.82rem;
+  letter-spacing: 0.3px;
+}
+
+.heroVisual {
+  position: relative;
+  min-height: 640px;
+}
+
+.heroVisualCard {
+  position: relative;
+  z-index: 1;
+  backdrop-filter: blur(18px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 28px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
+  overflow: hidden;
+}
+
+.heroVisualHead {
+  padding: 1.15rem 1.25rem 0;
+}
+
+.visualKicker,
+.visualChip,
+.floatingLabel {
+  font-weight: 700;
+  font-size: 0.75rem;
+  font-family: @heading;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.visualKicker,
+.floatingLabel {
+  color: @muted;
+}
+
+.visualChip {
+  color: @gold;
+}
+
+.heroImageFrame {
+  position: relative;
+  margin: 1rem 1.25rem 0;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 28px;
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
+  min-height: 420px;
+  overflow: hidden;
+
+  :global(img) {
+    position: relative;
+    z-index: 2;
+  }
+}
+
+.mascotGlow {
+  position: absolute;
+  z-index: 1;
+  filter: blur(28px);
+  inset: 12% 18%;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(44, 232, 255, 0.35), transparent 70%);
+}
+
+.heroImageFallback {
+  min-height: 420px;
+  color: @cyan;
+  font-weight: 900;
+  font-size: clamp(1.25rem, 3vw, 2rem);
+  font-family: @heading;
+  letter-spacing: 0.12em;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.heroVisualFoot {
+  padding: 1.15rem 1.25rem 1.35rem;
+}
+
+.heroVisualTitle {
+  margin: 0 0 0.35rem;
+  color: #fff;
+  font-size: 1.05rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.heroVisualCopy,
+.heroVisualDescription {
+  color: @muted;
+  line-height: 1.75;
+}
+
+.heroVisualCopy {
+  color: #fff;
+  font-size: 0.95rem;
+}
+
+.heroFloatingCard {
+  position: absolute;
+  transform: rotate(-2.5deg);
+  z-index: 3;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 24px;
+  background: rgba(8, 18, 39, 0.88);
+  padding: 1rem 1.1rem;
+  max-width: 260px;
+
+  strong {
+    display: block;
+    margin-top: 0.35rem;
+    color: #fff;
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  p {
+    margin: 0.45rem 0 0;
+    color: @muted;
+    font-size: 0.92rem;
+    line-height: 1.6;
+  }
+}
+
+.heroFloatingCardTop {
+  top: 0.75rem;
+  right: -1rem;
+}
+
+.heroFloatingCardBottom {
+  bottom: 1.2rem;
+  left: -1rem;
+  transform: rotate(2deg);
+}
+
+@media (max-width: 1199px) {
+  .heroInner {
+    grid-template-columns: 1fr;
+  }
+
+  .heroVisual {
+    min-height: 0;
+  }
+
+  .heroFloatingCardTop {
+    right: 1rem;
+  }
+
+  .heroFloatingCardBottom {
+    left: 1rem;
+  }
+}
+
+@media (max-width: 991px) {
+  .title {
+    font-size: clamp(2.2rem, 9vw, 3.45rem);
+  }
+}
+
+@media (max-width: 767px) {
+  .hero {
+    padding-top: 6rem;
+    min-height: 0;
+  }
+
+  .heroContent {
+    gap: 1.25rem;
+  }
+
+  .heroFloatingCard {
+    position: static;
+    transform: none;
+    max-width: none;
+  }
+
+  .heroImageFrame {
+    min-height: 260px;
+  }
+
+  .heroBadge {
+    font-size: 0.72rem;
+  }
+
+  .countdownGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .countdownCell {
+    min-height: 96px;
+
+    strong {
+      font-size: 2rem;
+    }
+  }
+}
diff --git a/components/Activity/Hackathon/Hero.tsx b/components/Activity/Hackathon/Hero.tsx
new file mode 100644
index 0000000..855aee7
--- /dev/null
+++ b/components/Activity/Hackathon/Hero.tsx
@@ -0,0 +1,268 @@
+import { TableCellValue } from 'mobx-lark';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { LarkImage } from '../../LarkImage';
+import styles from './Hero.module.less';
+
+export type HackathonHeroNavItem = Record<'label' | 'href', string>;
+
+export interface HackathonHeroAction extends HackathonHeroNavItem {
+  external?: boolean;
+}
+
+export type HackathonHeroCard = Record<'title' | 'description' | 'eyebrow', string>;
+
+export interface HackathonHeroProps extends Record<
+  | `visual${'Kicker' | 'Title' | 'Copy' | 'Chip'}`
+  | 'name'
+  | 'subtitle'
+  | 'description'
+  | 'locationText'
+  | 'imageFallback',
+  string
+> {
+  badges: string[];
+  bottomCard?: HackathonHeroCard;
+  chips?: string[];
+  countdownLabel?: string;
+  countdownUnitLabels: string[];
+  countdownTo?: string;
+  image?: TableCellValue;
+  navigation: HackathonHeroNavItem[];
+  primaryAction: HackathonHeroAction;
+  secondaryAction: HackathonHeroAction;
+  topCard?: HackathonHeroCard;
+}
+
+const BadgeToneClass = [
+  styles.heroBadgeCyan,
+  styles.heroBadgeGold,
+  styles.heroBadgeGreen,
+  styles.heroBadgeRose,
+];
+
+const HeroLink: FC<{
+  action: HackathonHeroAction;
+  variant: 'ghost' | 'primary';
+}> = ({ action, variant }) => (
+  <a
+    className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
+    href={action.href}
+    {...(action.external && { target: '_blank', rel: 'noreferrer' })}
+  >
+    {action.label}
+  </a>
+);
+
+const NavLink: FC<{ item: HackathonHeroNavItem }> = ({ item }) => (
+  <a className={`${styles.headerNavLink} d-none d-lg-inline`} href={item.href}>
+    {item.label}
+  </a>
+);
+
+const FloatingCard: FC<{
+  card: HackathonHeroCard;
+  position: 'bottom' | 'top';
+}> = ({ card, position }) => (
+  <div
+    className={`${styles.heroFloatingCard} mt-3 mt-md-0 ${position === 'top' ? styles.heroFloatingCardTop : styles.heroFloatingCardBottom}`}
+  >
+    <span className={styles.floatingLabel}>{card.eyebrow}</span>
+    <strong>{card.title}</strong>
+    <p>{card.description}</p>
+  </div>
+);
+
+const useCountdown = (countdownTo?: string) => {
+  const target = useMemo(() => {
+    const value = countdownTo ? new Date(countdownTo).getTime() : NaN;
+
+    return Number.isFinite(value) ? value : NaN;
+  }, [countdownTo]);
+  const [now, setNow] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!Number.isFinite(target)) return;
+
+    setNow(Date.now());
+
+    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+
+    return () => window.clearInterval(timer);
+  }, [target]);
+
+  return useMemo(() => {
+    if (!Number.isFinite(target) || now === null) return ['--', '--', '--', '--'];
+
+    const rest = Math.max(0, target - now);
+    const totalSeconds = Math.floor(rest / 1000);
+    const days = Math.floor(totalSeconds / 86400);
+    const hours = Math.floor((totalSeconds % 86400) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    return [days, hours, minutes, seconds].map(value => String(value).padStart(2, '0'));
+  }, [now, target]);
+};
+
+const splitHeroTitle = (name: string, subtitle: string) => {
+  const segments = name.split(/\s+/).filter(Boolean);
+
+  if (segments.length < 3)
+    return {
+      primary: name,
+      secondary: subtitle,
+    };
+
+  return {
+    primary: segments.slice(0, Math.max(1, segments.length - 2)).join(' '),
+    secondary: segments.slice(-2).join(' '),
+  };
+};
+
+export const HackathonHero: FC<HackathonHeroProps> = ({
+  badges,
+  bottomCard,
+  chips,
+  countdownLabel,
+  countdownUnitLabels,
+  countdownTo,
+  description,
+  image,
+  imageFallback,
+  locationText,
+  name,
+  navigation,
+  primaryAction,
+  secondaryAction,
+  subtitle,
+  topCard,
+  visualChip,
+  visualCopy,
+  visualKicker,
+  visualTitle,
+}) => {
+  const countdown = useCountdown(countdownTo);
+  const title = splitHeroTitle(name, subtitle);
+
+  return (
+    <section id="top" className={styles.hero}>
+      <header className={styles.siteHeader}>
+        <Container>
+          <div
+            className={`${styles.headerContainer} d-flex flex-wrap flex-md-nowrap justify-content-between align-items-center gap-3 py-3`}
+          >
+            <a className={`${styles.logoText} text-nowrap`} href="#top">
+              {name}
+            </a>
+
+            <nav
+              className={`${styles.headerNav} d-flex justify-content-between justify-content-md-start align-items-center gap-3`}
+              aria-label={subtitle}
+            >
+              {navigation.map(item => (
+                <NavLink key={`${item.label}-${item.href}`} item={item} />
+              ))}
+              <HeroLink action={primaryAction} variant="primary" />
+            </nav>
+          </div>
+        </Container>
+      </header>
+
+      <Container>
+        <div className={styles.heroInner}>
+          <div className={`${styles.heroContent} d-flex flex-column pt-3 pt-xl-4`}>
+            <ul className={`list-unstyled ${styles.heroEyebrow} d-flex flex-wrap gap-3 m-0`}>
+              {badges.map((badge, index) => (
+                <li
+                  key={`${badge}-${index}`}
+                  className={`${styles.heroBadge} d-inline-flex align-items-center ${BadgeToneClass[index % BadgeToneClass.length]}`}
+                >
+                  {badge}
+                </li>
+              ))}
+            </ul>
+
+            <h1 className={`${styles.title} d-flex flex-column mb-0`}>
+              <span className={styles.heroTitlePrimary}>{title.primary}</span>
+              <span className={styles.heroTitleAccent}>{title.secondary}</span>
+              <span className={styles.heroTitleSecondary}>{subtitle}</span>
+            </h1>
+
+            <p className={styles.description}>{description}</p>
+
+            {countdownTo && (
+              <div className={styles.countdownWrap}>
+                {countdownLabel && (
+                  <p className={`${styles.countdownLabel} m-0`}>{countdownLabel}</p>
+                )}
+
+                <ol className={`list-unstyled ${styles.countdownGrid} m-0`}>
+                  {countdown.map((value, index) => (
+                    <li
+                      key={`${index}-${countdownUnitLabels[index]}`}
+                      className={`${styles.countdownCell} d-flex flex-column justify-content-center align-items-center`}
+                    >
+                      <strong>{value}</strong>
+                      <span>{countdownUnitLabels[index]}</span>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+            )}
+
+            <nav className="d-flex flex-wrap gap-2 gap-md-3" aria-label={subtitle}>
+              <HeroLink action={primaryAction} variant="primary" />
+              <HeroLink action={secondaryAction} variant="ghost" />
+            </nav>
+
+            {chips?.[0] && (
+              <ul
+                className={`list-unstyled ${styles.heroStats} d-flex flex-wrap gap-2 gap-md-3 m-0`}
+              >
+                {chips.map(chip => (
+                  <li key={chip} className={`${styles.statChip} d-inline-flex align-items-center`}>
+                    {chip}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className={`${styles.heroVisual} pt-3 pt-xl-4 d-flex d-md-block flex-column`}>
+            <div className={styles.heroVisualCard}>
+              <div className={`${styles.heroVisualHead} d-flex justify-content-between gap-3`}>
+                <span className={styles.visualKicker}>{visualKicker}</span>
+                <span className={styles.visualChip}>{visualChip}</span>
+              </div>
+
+              <figure className={styles.heroImageFrame}>
+                <div className={styles.mascotGlow} />
+
+                {image ? (
+                  <LarkImage src={image} alt={name} className="w-100 h-100 object-fit-cover" />
+                ) : (
+                  <div
+                    className={`${styles.heroImageFallback} d-flex justify-content-center align-items-center`}
+                  >
+                    {imageFallback}
+                  </div>
+                )}
+              </figure>
+
+              <div className={styles.heroVisualFoot}>
+                <p className={styles.heroVisualTitle}>{locationText}</p>
+                <p className={`${styles.heroVisualCopy} m-0`}>{visualTitle}</p>
+                <p className={`${styles.heroVisualDescription} m-0`}>{visualCopy}</p>
+              </div>
+            </div>
+
+            {topCard && <FloatingCard card={topCard} position="top" />}
+            {bottomCard && <FloatingCard card={bottomCard} position="bottom" />}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+};
diff --git a/components/Activity/Hackathon/Overview.module.less b/components/Activity/Hackathon/Overview.module.less
new file mode 100644
index 0000000..4f9922a
--- /dev/null
+++ b/components/Activity/Hackathon/Overview.module.less
@@ -0,0 +1,86 @@
+@import './theme.less';
+
+;
+
+.themePanel {
+  position: relative;
+  border: 1px solid rgba(255, 201, 77, 0.16);
+  border-radius: 28px;
+  background: linear-gradient(135deg, rgba(255, 201, 77, 0.08), rgba(123, 97, 255, 0.12));
+  padding: 1.5rem 1.6rem;
+
+  &::before {
+    position: absolute;
+    top: -1.9rem;
+    left: 1rem;
+    content: '"';
+    color: rgba(255, 201, 77, 0.18);
+    font-size: 6rem;
+    line-height: 1;
+    font-family: serif;
+  }
+}
+
+.themeText {
+  color: #fff;
+  font-weight: 900;
+  font-size: clamp(1.35rem, 2.6vw, 2rem);
+  font-family: @heading;
+}
+
+.themeSub {
+  margin: 0;
+  color: @muted;
+  line-height: 1.75;
+}
+
+.trackCard {
+  position: relative;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
+  padding: 1.4rem;
+  height: 100%;
+  overflow: hidden;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    opacity: 0.75;
+    background: linear-gradient(90deg, @cyan, @purple);
+    height: 2px;
+    content: '';
+  }
+
+  &:hover {
+    transform: translateY(-4px);
+    border-color: rgba(44, 232, 255, 0.26);
+  }
+}
+
+.trackIcon {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.06);
+  width: 54px;
+  height: 54px;
+  font-size: 1.35rem;
+}
+
+.trackName {
+  margin: 0;
+  color: #fff;
+  font-weight: 800;
+  font-size: 1rem;
+  line-height: 1.3;
+  font-family: @heading;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.trackDesc {
+  color: @muted;
+  line-height: 1.75;
+}
diff --git a/components/Activity/Hackathon/Overview.tsx b/components/Activity/Hackathon/Overview.tsx
new file mode 100644
index 0000000..7a54ff2
--- /dev/null
+++ b/components/Activity/Hackathon/Overview.tsx
@@ -0,0 +1,56 @@
+import { FC } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+
+import styles from './Overview.module.less';
+
+export type HackathonOverviewCard = Record<'title' | 'description' | 'icon', string>;
+
+export type HackathonOverviewProps = Record<
+  'title' | 'subtitle' | 'themeText' | 'themeSub',
+  string
+> & {
+  cards: HackathonOverviewCard[];
+};
+
+const OverviewCard: FC<HackathonOverviewCard> = ({ description, icon, title }) => (
+  <article className={styles.trackCard}>
+    <span
+      className={`${styles.trackIcon} d-inline-flex justify-content-center align-items-center mb-3`}
+    >
+      {icon}
+    </span>
+    <div className={styles.trackName}>{title}</div>
+    <p className={`${styles.trackDesc} mt-3 mb-0`}>{description}</p>
+  </article>
+);
+
+export const HackathonOverview: FC<HackathonOverviewProps> = ({
+  cards,
+  subtitle,
+  themeSub,
+  themeText,
+  title,
+}) => (
+  <section id="tracks" className={styles.section}>
+    <Container>
+      <header className={styles.sectionHeader}>
+        <h2 className={styles.sectionTitle}>{title}</h2>
+        <p className={styles.sectionSubtitle}>{subtitle}</p>
+        <div className={styles.accentLine} />
+      </header>
+
+      <div className={`${styles.themePanel} mb-4`}>
+        <div className={`${styles.themeText} mb-2`}>{themeText}</div>
+        <p className={styles.themeSub}>{themeSub}</p>
+      </div>
+
+      <Row className="g-3 mt-1">
+        {cards.map(card => (
+          <Col key={card.title} md={6} xl={4}>
+            <OverviewCard {...card} />
+          </Col>
+        ))}
+      </Row>
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/Participants.module.less b/components/Activity/Hackathon/Participants.module.less
new file mode 100644
index 0000000..d08e0b4
--- /dev/null
+++ b/components/Activity/Hackathon/Participants.module.less
@@ -0,0 +1,55 @@
+@import './theme.less';
+
+;
+
+.participantCloud {
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+
+  @media (max-width: 767px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.participantCard {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 1.1rem 0.9rem;
+  color: #fff;
+  text-decoration: none;
+}
+
+.participantCard:hover {
+  color: @cyan;
+  text-decoration: none;
+}
+
+.avatar {
+  border: 2px solid rgba(44, 232, 255, 0.2);
+  border-radius: 50%;
+  width: 84px;
+  height: 84px;
+  object-fit: cover;
+}
+
+.participantName {
+  font-size: 0.92rem;
+  line-height: 1.4;
+}
+
+.toggleButton {
+  border: 1px solid rgba(44, 232, 255, 0.28);
+  border-radius: 10px;
+  background: rgba(44, 232, 255, 0.06);
+  padding: 0.62rem 0.95rem;
+  color: #fff;
+  font-size: 0.78rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.48);
+    background: rgba(44, 232, 255, 0.11);
+  }
+}
diff --git a/components/Activity/Hackathon/Participants.tsx b/components/Activity/Hackathon/Participants.tsx
new file mode 100644
index 0000000..33107da
--- /dev/null
+++ b/components/Activity/Hackathon/Participants.tsx
@@ -0,0 +1,92 @@
+import { TableCellValue } from 'mobx-lark';
+import { FC, useMemo, useState } from 'react';
+import { Container } from 'react-bootstrap';
+
+import { LarkImage } from '../../LarkImage';
+import styles from './Participants.module.less';
+
+export interface HackathonParticipantItem {
+  avatar?: TableCellValue;
+  githubLink?: string;
+  id: string;
+  name: string;
+}
+
+export interface HackathonParticipantsProps {
+  initialVisible?: number;
+  participants: HackathonParticipantItem[];
+  showLessLabel?: string;
+  showMoreLabel?: string;
+  subtitle: string;
+  title: string;
+}
+
+const ParticipantCard: FC<HackathonParticipantItem> = ({ avatar, githubLink, name }) => {
+  const content = (
+    <>
+      <LarkImage className={styles.avatar} src={avatar} alt={name} title={name} />
+      <span className={styles.participantName}>{name}</span>
+    </>
+  );
+
+  return githubLink ? (
+    <a
+      className={`${styles.participantCard} d-flex flex-column align-items-center gap-3 text-center`}
+      href={githubLink}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {content}
+    </a>
+  ) : (
+    <div
+      className={`${styles.participantCard} d-flex flex-column align-items-center gap-3 text-center`}
+    >
+      {content}
+    </div>
+  );
+};
+
+export const HackathonParticipants: FC<HackathonParticipantsProps> = ({
+  initialVisible = 12,
+  participants,
+  showLessLabel,
+  showMoreLabel,
+  subtitle,
+  title,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const visibleParticipants = useMemo(
+    () => (expanded ? participants : participants.slice(0, initialVisible)),
+    [expanded, initialVisible, participants],
+  );
+  const hasMore = participants.length > initialVisible;
+
+  return (
+    <section className={styles.section}>
+      <Container>
+        <header className={styles.sectionHeader}>
+          <h2 className={styles.sectionTitle}>{title}</h2>
+          <p className={styles.sectionSubtitle}>{subtitle}</p>
+          <div className={styles.accentLine} />
+        </header>
+
+        <div className={`${styles.participantCloud} d-grid gap-3`}>
+          {visibleParticipants.map(participant => (
+            <ParticipantCard key={participant.id} {...participant} />
+          ))}
+        </div>
+
+        {hasMore && (
+          <button
+            type="button"
+            className={`${styles.toggleButton} d-inline-flex align-items-center justify-content-center mt-3`}
+            onClick={() => setExpanded(value => !value)}
+          >
+            {expanded ? showLessLabel || 'Show less' : showMoreLabel || 'Show more'}
+          </button>
+        )}
+      </Container>
+    </section>
+  );
+};
diff --git a/components/Activity/Hackathon/Resources.module.less b/components/Activity/Hackathon/Resources.module.less
new file mode 100644
index 0000000..90c3ee0
--- /dev/null
+++ b/components/Activity/Hackathon/Resources.module.less
@@ -0,0 +1,168 @@
+@import './theme.less';
+
+;
+
+.resourceCard,
+.projectCard {
+  ;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease;
+  padding: 1.25rem;
+  height: 100%;
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: rgba(44, 232, 255, 0.26);
+  }
+}
+
+.resourceHead,
+.projectTop {
+  min-width: 0;
+}
+
+.projectHead {
+  margin: 0;
+}
+
+.resourceTitle,
+.projectTitle {
+  margin: 0;
+  color: #fff;
+  font-weight: 800;
+  font-size: 1.02rem;
+  font-family: @heading;
+}
+
+.projectTitle a {
+  color: #fff;
+  text-decoration: none;
+
+  &:hover {
+    color: @cyan;
+    text-decoration: none;
+  }
+}
+
+.resourceDescription,
+.projectSummary {
+  color: @muted;
+  line-height: 1.75;
+}
+
+.topicList {
+  margin: 0;
+}
+
+.topicChip,
+.topicChipMuted {
+  border-radius: 999px;
+  padding: 0.34rem 0.72rem;
+  font-size: 0.76rem;
+
+  @media (max-width: 767px) {
+    font-size: 0.72rem;
+  }
+}
+
+.topicChip {
+  background: rgba(44, 232, 255, 0.12);
+  color: @cyan;
+}
+
+.topicChipMuted {
+  background: rgba(255, 255, 255, 0.08);
+  color: @copy;
+}
+
+.resourceLinks {
+  min-width: 0;
+}
+
+.entryLink {
+  border: 1px solid rgba(44, 232, 255, 0.24);
+  border-radius: 8px;
+  background: rgba(44, 232, 255, 0.06);
+  padding: 0.42rem 0.85rem;
+  color: @cyan;
+  font-size: 0.8rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.48);
+    background: rgba(44, 232, 255, 0.12);
+    color: @cyan;
+    text-decoration: none;
+  }
+}
+
+.toggleButton {
+  border: 1px solid rgba(44, 232, 255, 0.28);
+  border-radius: 10px;
+  background: rgba(44, 232, 255, 0.06);
+  padding: 0.62rem 0.95rem;
+  color: #fff;
+  font-size: 0.78rem;
+  font-family: @heading;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+
+  &:hover {
+    border-color: rgba(44, 232, 255, 0.48);
+    background: rgba(44, 232, 255, 0.11);
+  }
+}
+
+.scoreCircle {
+  box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
+  border: 1px solid rgba(44, 232, 255, 0.2);
+  border-radius: 50%;
+  background: rgba(44, 232, 255, 0.1);
+  width: 62px;
+  height: 62px;
+  color: @cyan;
+  font-weight: 800;
+  font-size: 1.05rem;
+  font-family: @heading;
+
+  @media (max-width: 767px) {
+    width: 54px;
+    height: 54px;
+    font-size: 0.92rem;
+  }
+}
+
+.projectMeta {
+  display: grid;
+  gap: 0.7rem;
+  margin: 0;
+
+  div {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    gap: 0.8rem;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  dt {
+    color: @muted;
+    font-size: 0.72rem;
+    font-family: @heading;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  dd {
+    color: #fff;
+    line-height: 1.5;
+  }
+}
diff --git a/components/Activity/Hackathon/Resources.tsx b/components/Activity/Hackathon/Resources.tsx
new file mode 100644
index 0000000..962e942
--- /dev/null
+++ b/components/Activity/Hackathon/Resources.tsx
@@ -0,0 +1,213 @@
+import { FC, useMemo, useState } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+
+import type { HackathonAwardsMeta } from './Awards';
+import styles from './Resources.module.less';
+
+export interface HackathonTemplateItem {
+  description: string;
+  id: string;
+  languages: string[];
+  previewLabel: string;
+  previewUrl?: string;
+  sourceLabel: string;
+  sourceUrl?: string;
+  tags: string[];
+  title: string;
+}
+
+export interface HackathonProjectMeta extends HackathonAwardsMeta {
+  valueHref?: string;
+}
+
+export interface HackathonProjectItem {
+  description: string;
+  id: string;
+  link: string;
+  meta: HackathonProjectMeta[];
+  score: string;
+  title: string;
+}
+
+export interface HackathonResourcesProps extends Record<
+  `project${'Subtitle' | 'Title'}` | `template${'Subtitle' | 'Title'}`,
+  string
+> {
+  projectInitialVisible?: number;
+  projectItems: HackathonProjectItem[];
+  showLessLabel?: string;
+  showMoreLabel?: string;
+  templateInitialVisible?: number;
+  templateItems: HackathonTemplateItem[];
+}
+
+const TemplateCard: FC<HackathonTemplateItem> = ({
+  description,
+  languages,
+  previewLabel,
+  previewUrl,
+  sourceLabel,
+  sourceUrl,
+  tags,
+  title,
+}) => (
+  <article className={styles.resourceCard}>
+    <div
+      className={`${styles.resourceHead} d-flex justify-content-between align-items-start gap-3`}
+    >
+      <h3 className={styles.resourceTitle}>{title}</h3>
+    </div>
+    <p className={`${styles.resourceDescription} mt-3 mb-3`}>{description}</p>
+
+    <ul className={`list-unstyled ${styles.topicList} d-flex flex-wrap gap-2 mb-3`}>
+      {languages.map(language => (
+        <li key={language} className={`${styles.topicChip} d-inline-flex align-items-center`}>
+          {language}
+        </li>
+      ))}
+      {tags.map(tag => (
+        <li key={tag} className={`${styles.topicChipMuted} d-inline-flex align-items-center`}>
+          {tag}
+        </li>
+      ))}
+    </ul>
+
+    <nav className={`${styles.resourceLinks} d-flex flex-wrap gap-3`} aria-label={title}>
+      {sourceUrl && (
+        <a
+          className={`${styles.entryLink} d-inline-flex align-items-center`}
+          href={sourceUrl}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {sourceLabel}
+        </a>
+      )}
+      {previewUrl && (
+        <a
+          className={`${styles.entryLink} d-inline-flex align-items-center`}
+          href={previewUrl}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {previewLabel}
+        </a>
+      )}
+    </nav>
+  </article>
+);
+
+const ProjectCard: FC<HackathonProjectItem> = ({ description, link, meta, score, title }) => (
+  <article className={styles.projectCard}>
+    <div className={`${styles.projectTop} d-flex justify-content-between align-items-start gap-3`}>
+      <hgroup className={`${styles.projectHead} d-grid gap-3`}>
+        <h3 className={styles.projectTitle}>
+          <a href={link}>{title}</a>
+        </h3>
+        {description && <p className={`${styles.projectSummary} mt-0 mb-0`}>{description}</p>}
+      </hgroup>
+      <div
+        className={`${styles.scoreCircle} d-inline-flex justify-content-center align-items-center`}
+      >
+        {score}
+      </div>
+    </div>
+
+    <dl className={styles.projectMeta}>
+      {meta.map(({ label, value, valueHref }) => (
+        <div key={`${label}-${value}`}>
+          <dt>{label}</dt>
+          <dd>{valueHref ? <a href={valueHref}>{value}</a> : value}</dd>
+        </div>
+      ))}
+    </dl>
+  </article>
+);
+
+export const HackathonResources: FC<HackathonResourcesProps> = ({
+  projectInitialVisible = 3,
+  projectItems,
+  showLessLabel,
+  showMoreLabel,
+  templateInitialVisible = 6,
+  projectSubtitle,
+  projectTitle,
+  templateItems,
+  templateSubtitle,
+  templateTitle,
+}) => {
+  const [templatesExpanded, setTemplatesExpanded] = useState(false);
+  const [projectsExpanded, setProjectsExpanded] = useState(false);
+  const visibleTemplates = useMemo(
+    () => (templatesExpanded ? templateItems : templateItems.slice(0, templateInitialVisible)),
+    [templateInitialVisible, templateItems, templatesExpanded],
+  );
+  const visibleProjects = useMemo(
+    () => (projectsExpanded ? projectItems : projectItems.slice(0, projectInitialVisible)),
+    [projectInitialVisible, projectItems, projectsExpanded],
+  );
+  const hasMoreTemplates = templateItems.length > templateInitialVisible;
+  const hasMoreProjects = projectItems.length > projectInitialVisible;
+
+  return (
+    <section id="projects" className={styles.section}>
+      <Container>
+        {templateItems[0] && (
+          <>
+            <header className={styles.sectionHeader}>
+              <h2 className={styles.sectionTitle}>{templateTitle}</h2>
+              <p className={styles.sectionSubtitle}>{templateSubtitle}</p>
+              <div className={styles.accentLine} />
+            </header>
+
+            <Row className="g-3">
+              {visibleTemplates.map(template => (
+                <Col key={template.id} md={6} xl={4}>
+                  <TemplateCard {...template} />
+                </Col>
+              ))}
+            </Row>
+
+            {hasMoreTemplates && (
+              <button
+                type="button"
+                className={`${styles.toggleButton} d-inline-flex align-items-center justify-content-center mt-3`}
+                onClick={() => setTemplatesExpanded(value => !value)}
+              >
+                {templatesExpanded ? showLessLabel || 'Show less' : showMoreLabel || 'Show more'}
+              </button>
+            )}
+          </>
+        )}
+
+        {projectItems[0] && (
+          <>
+            <header className={`${styles.sectionHeader} mt-5`}>
+              <h2 className={styles.sectionTitle}>{projectTitle}</h2>
+              <p className={styles.sectionSubtitle}>{projectSubtitle}</p>
+              <div className={styles.accentLine} />
+            </header>
+
+            <Row className="g-3">
+              {visibleProjects.map(project => (
+                <Col key={project.id} md={6} xl={4}>
+                  <ProjectCard {...project} />
+                </Col>
+              ))}
+            </Row>
+
+            {hasMoreProjects && (
+              <button
+                type="button"
+                className={`${styles.toggleButton} d-inline-flex align-items-center justify-content-center mt-3`}
+                onClick={() => setProjectsExpanded(value => !value)}
+              >
+                {projectsExpanded ? showLessLabel || 'Show less' : showMoreLabel || 'Show more'}
+              </button>
+            )}
+          </>
+        )}
+      </Container>
+    </section>
+  );
+};
diff --git a/components/Activity/Hackathon/Schedule.module.less b/components/Activity/Hackathon/Schedule.module.less
new file mode 100644
index 0000000..4b84c0c
--- /dev/null
+++ b/components/Activity/Hackathon/Schedule.module.less
@@ -0,0 +1,310 @@
+@import './theme.less';
+
+;
+
+.scheduleIntro {
+  margin-bottom: 0;
+}
+
+.scheduleKicker {
+  margin: 0;
+  color: @cyan;
+  font-size: 0.8rem;
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.scheduleLead {
+  margin: 0;
+  color: #fff;
+  font-weight: 800;
+  font-size: clamp(1.45rem, 3vw, 2.05rem);
+  font-family: @heading;
+}
+
+.scheduleOverview {
+  margin-bottom: 0;
+}
+
+.schedulePill {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 999px;
+  padding: 0.55rem 1rem;
+  color: @muted;
+  font-size: 0.74rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+
+  @media (max-width: 767px) {
+    font-size: 0.72rem;
+  }
+}
+
+.scheduleDays {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+
+  @media (max-width: 991px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.dayCard {
+  ;
+  position: relative;
+  transition:
+    transform 0.22s ease,
+    border-color 0.22s ease,
+    box-shadow 0.22s ease;
+  padding: 1.35rem;
+  height: 100%;
+  overflow: hidden;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
+    border-color: rgba(44, 232, 255, 0.28);
+  }
+}
+
+.formation {
+  background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(28, 20, 67, 0.86));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @purple, @cyan);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(123, 97, 255, 0.18);
+    color: @purple;
+  }
+}
+
+.enrollment {
+  background: linear-gradient(135deg, rgba(44, 232, 255, 0.1), rgba(14, 43, 80, 0.86));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @cyan, @purple);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(44, 232, 255, 0.14);
+    color: @cyan;
+  }
+}
+
+.competition {
+  background: linear-gradient(135deg, rgba(255, 201, 77, 0.12), rgba(60, 35, 8, 0.88));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @gold, @rose);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(255, 201, 77, 0.16);
+    color: @gold;
+  }
+}
+
+.break {
+  background: linear-gradient(135deg, rgba(255, 120, 186, 0.1), rgba(72, 18, 48, 0.88));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @rose, @purple);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(255, 120, 186, 0.16);
+    color: @rose;
+  }
+}
+
+.evaluation {
+  background: linear-gradient(135deg, rgba(72, 241, 168, 0.12), rgba(14, 50, 39, 0.88));
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    background: linear-gradient(90deg, @green, @cyan);
+    height: 2px;
+    content: '';
+  }
+
+  .dayNo {
+    background: rgba(72, 241, 168, 0.16);
+    color: @green;
+  }
+}
+
+.dayCardHead {
+  min-width: 0;
+}
+
+.dayNo {
+  border-radius: 999px;
+  background: rgba(44, 232, 255, 0.12);
+  padding: 0.3rem 0.85rem;
+  color: @cyan;
+  font-weight: 700;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.dayDate {
+  color: @muted;
+  font-size: 0.82rem;
+  font-family: @heading;
+  letter-spacing: 0.04em;
+}
+
+.dayTitle {
+  margin: 0;
+  color: #fff;
+  font-weight: 800;
+  font-size: clamp(1.1rem, 2vw, 1.35rem);
+  font-family: @heading;
+  letter-spacing: 0.04em;
+}
+
+.daySub {
+  margin: 0;
+  color: @muted;
+  line-height: 1.7;
+}
+
+.dayAgenda {
+  display: grid;
+  gap: 0.7rem;
+  margin: 0;
+
+  div {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    gap: 0.8rem;
+  }
+
+  dt,
+  dd {
+    margin: 0;
+  }
+}
+
+.timePill {
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  padding: 0.4rem 0.75rem;
+  min-height: 30px;
+  color: @copy;
+  font-size: 0.72rem;
+  font-family: @heading;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.agendaCopy {
+  min-width: 0;
+
+  strong {
+    color: #fff;
+    line-height: 1.4;
+  }
+
+  span {
+    color: @muted;
+    font-size: 0.92rem;
+    line-height: 1.55;
+  }
+}
+
+.stageGoal {
+  margin: 0;
+  border-top: 1px dashed rgba(255, 255, 255, 0.16);
+  padding-top: 0;
+
+  strong {
+    color: @cyan;
+    font-size: 0.78rem;
+    font-family: @heading;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  span {
+    color: #fff;
+    font-size: 0.92rem;
+    line-height: 1.6;
+  }
+}
+
+.keyDates {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.85rem;
+  margin: 0;
+
+  @media (max-width: 991px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (max-width: 575px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.keyDateCard {
+  border: 1px solid rgba(44, 232, 255, 0.24);
+  border-radius: 14px;
+  background: rgba(44, 232, 255, 0.08);
+  padding: 0.95rem 1rem;
+}
+
+.keyDateCardWarn {
+  border-color: rgba(255, 201, 77, 0.26);
+  background: rgba(255, 201, 77, 0.08);
+}
+
+.keyDateValue {
+  color: #fff;
+  font-size: 1.2rem;
+  line-height: 1.2;
+  font-family: @heading;
+  letter-spacing: 0.04em;
+}
+
+.keyDateLabel {
+  color: @muted;
+  font-size: 0.84rem;
+  line-height: 1.6;
+}
diff --git a/components/Activity/Hackathon/Schedule.tsx b/components/Activity/Hackathon/Schedule.tsx
new file mode 100644
index 0000000..ec2e678
--- /dev/null
+++ b/components/Activity/Hackathon/Schedule.tsx
@@ -0,0 +1,144 @@
+import { FC } from 'react';
+import { Container } from 'react-bootstrap';
+
+import type { HackathonAwardsMeta } from './Awards';
+import styles from './Schedule.module.less';
+
+export type HackathonScheduleTone =
+  | 'break'
+  | 'competition'
+  | 'enrollment'
+  | 'evaluation'
+  | 'formation';
+
+export interface HackathonScheduleFact extends HackathonAwardsMeta {
+  meta: string;
+}
+
+export interface HackathonScheduleItem extends Record<
+  'id' | 'phase' | 'title' | 'dateText' | 'description',
+  string
+> {
+  facts: HackathonScheduleFact[];
+
+  stageGoal?: string;
+  tone: HackathonScheduleTone;
+}
+
+export interface HackathonScheduleProps extends Record<
+  'title' | 'subtitle' | 'lead' | 'kicker' | 'stageGoalLabel',
+  string
+> {
+  items: HackathonScheduleItem[];
+  keyDates?: Record<'date' | 'label', string>[];
+  overviewPills: string[];
+}
+
+const ScheduleCard: FC<HackathonScheduleItem & Record<'phaseLabel' | 'stageGoalLabel', string>> = ({
+  dateText,
+  description,
+  facts,
+  phase,
+  phaseLabel,
+  stageGoal,
+  stageGoalLabel,
+  title,
+  tone,
+}) => (
+  <article className={`${styles.dayCard} ${styles[tone]}`}>
+    <div
+      className={`${styles.dayCardHead} d-flex justify-content-between align-items-baseline gap-3`}
+    >
+      <span className={`${styles.dayNo} d-inline-flex align-items-center`}>
+        {phaseLabel} {phase}
+      </span>
+      <time className={styles.dayDate}>{dateText}</time>
+    </div>
+
+    <h3 className={`${styles.dayTitle} mt-3 mb-2`}>{title}</h3>
+    <p className={`${styles.daySub} mb-3`}>{description}</p>
+
+    <dl className={styles.dayAgenda}>
+      {facts.map(({ label, meta, value }) => (
+        <div key={`${label}-${value}`}>
+          <dt className={`${styles.timePill} d-inline-flex align-items-center`}>{label}</dt>
+          <dd className={`${styles.agendaCopy} d-flex flex-column gap-1`}>
+            <strong>{value}</strong>
+            <span>{meta}</span>
+          </dd>
+        </div>
+      ))}
+    </dl>
+
+    {stageGoal && (
+      <p className={`${styles.stageGoal} d-flex flex-wrap gap-2 mt-3 pt-3`}>
+        <strong>{stageGoalLabel}:</strong>
+        <span>{stageGoal}</span>
+      </p>
+    )}
+  </article>
+);
+
+export const HackathonSchedule: FC<HackathonScheduleProps & { phaseLabel: string }> = ({
+  items,
+  keyDates,
+  kicker,
+  lead,
+  overviewPills,
+  phaseLabel,
+  stageGoalLabel,
+  subtitle,
+  title,
+}) => (
+  <section id="schedule" className={styles.section}>
+    <Container>
+      <header className={styles.sectionHeader}>
+        <p className={`${styles.scheduleKicker} mb-1`}>{kicker}</p>
+        <h2 className={styles.sectionTitle}>{title}</h2>
+        <p className={styles.sectionSubtitle}>{subtitle}</p>
+        <div className={styles.accentLine} />
+      </header>
+
+      {lead && (
+        <hgroup className={`${styles.scheduleIntro} text-center mb-4`}>
+          <h3 className={styles.scheduleLead}>{lead}</h3>
+        </hgroup>
+      )}
+
+      <ul
+        className={`list-unstyled ${styles.scheduleOverview} d-flex flex-wrap justify-content-center gap-3 mb-4`}
+      >
+        {overviewPills.map(pill => (
+          <li key={pill} className={styles.schedulePill}>
+            {pill}
+          </li>
+        ))}
+      </ul>
+
+      <div className={styles.scheduleDays}>
+        {items.map(item => (
+          <ScheduleCard
+            key={item.id}
+            {...item}
+            phaseLabel={phaseLabel}
+            stageGoalLabel={stageGoalLabel}
+          />
+        ))}
+      </div>
+
+      {keyDates?.[0] && (
+        <ul className={`list-unstyled ${styles.keyDates} mt-4`}>
+          {keyDates.map(({ date, label }, index) => (
+            <li
+              key={`${date}-${label}`}
+              className={`${styles.keyDateCard} d-grid gap-1 ${index % 2 ? styles.keyDateCardWarn : ''}`}
+            >
+              <strong className={styles.keyDateValue}>{date}</strong>
+              <span className={styles.keyDateLabel}>{label}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Container>
+  </section>
+);
diff --git a/components/Activity/Hackathon/constant.ts b/components/Activity/Hackathon/constant.ts
new file mode 100644
index 0000000..c39c078
--- /dev/null
+++ b/components/Activity/Hackathon/constant.ts
@@ -0,0 +1,362 @@
+import { TableCellUser } from 'mobx-lark';
+
+import { Activity, ActivityModel } from '../../../models/Activity';
+import { Agenda, Organization, Person, Prize, Project, Template } from '../../../models/Hackathon';
+import { i18n } from '../../../models/Translation';
+import type { HackathonAwardsMeta } from './Awards';
+import type { HackathonFAQItem } from './FAQ';
+import { HackathonHeroCard, HackathonHeroNavItem } from './Hero';
+import {
+  agendaToneClassOf,
+  agendaTypeLabelOf,
+  compactSummaryOf,
+  formatPeriod,
+  normalizeAgendaType,
+  previewText,
+} from './utility';
+
+export const RequiredTableKeys = [
+  'Person',
+  'Organization',
+  'Agenda',
+  'Prize',
+  'Template',
+  'Project',
+] as const;
+
+export type RequiredTableKey = (typeof RequiredTableKeys)[number];
+
+export type FormGroupKey = 'Evaluation' | 'Person' | 'Product' | 'Project';
+
+export interface FormGroupView extends HackathonHeroCard {
+  key: FormGroupKey;
+  links: (HackathonHeroNavItem & { external: true })[];
+}
+
+export const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'] as const;
+
+export const buildFormSectionMeta = ({ t }: Pick<typeof i18n, 't'>) => ({
+  Person: {
+    eyebrow: t('participants'),
+    title: t('hackathon_participant_registration'),
+    description: t('hackathon_participant_registration_description'),
+  },
+  Project: {
+    eyebrow: t('hackathon_team_lead'),
+    title: t('hackathon_project_registration'),
+    description: t('hackathon_project_registration_description'),
+  },
+  Product: {
+    eyebrow: t('hackathon_submission'),
+    title: t('product_submission'),
+    description: t('hackathon_product_submission_description'),
+  },
+  Evaluation: {
+    eyebrow: t('hackathon_review'),
+    title: t('hackathon_evaluation_entry'),
+    description: t('hackathon_evaluation_entry_description'),
+  },
+});
+
+export const buildScheduleReasonMap = ({
+  t,
+}: Pick<typeof i18n, 't'>): Partial<Record<string, string>> => ({
+  enrollment: t('hackathon_schedule_reason_enrollment'),
+  formation: t('hackathon_schedule_reason_formation'),
+  competition: t('hackathon_schedule_reason_competition'),
+  evaluation: t('hackathon_schedule_reason_evaluation'),
+});
+
+export const buildScheduleFocusMap = ({
+  t,
+}: Pick<typeof i18n, 't'>): Partial<Record<string, string>> => ({
+  enrollment: t('hackathon_schedule_focus_enrollment'),
+  formation: t('hackathon_schedule_focus_formation'),
+  competition: t('hackathon_schedule_focus_competition'),
+  evaluation: t('hackathon_schedule_focus_evaluation'),
+});
+
+export const buildScheduleGoalMap = ({
+  t,
+}: Pick<typeof i18n, 't'>): Partial<Record<string, string>> => ({
+  enrollment: t('hackathon_schedule_goal_enrollment'),
+  formation: t('hackathon_schedule_goal_formation'),
+  competition: t('hackathon_schedule_goal_competition'),
+  evaluation: t('hackathon_schedule_goal_evaluation'),
+});
+
+export const heroNavigation = ({ t }: typeof i18n) => [
+  { href: '#tracks', label: t('hackathon_highlights') },
+  { href: '#schedule', label: t('agenda') },
+  { href: '#awards', label: t('prizes') },
+  { href: '#faq', label: t('common_questions') },
+];
+
+export const buildCountdownUnitLabels = ({ t }: typeof i18n) => [
+  t('countdown_days'),
+  t('countdown_hours'),
+  t('countdown_minutes'),
+  t('countdown_seconds'),
+];
+
+export const buildHighlightCards = (
+  { t }: typeof i18n,
+  {
+    agendaItems,
+    eventRange,
+    organizations,
+    prizes,
+    templates,
+  }: {
+    agendaItems: Agenda[];
+    eventRange: string;
+    organizations: Organization[];
+    prizes: Prize[];
+    templates: Template[];
+  },
+) => [
+  {
+    icon: '👥',
+    title: t('participants'),
+    description: buildFormSectionMeta({ t }).Person.description,
+  },
+  {
+    icon: '🚀',
+    title: t('projects'),
+    description: buildFormSectionMeta({ t }).Project.description,
+  },
+  {
+    icon: '🛠',
+    title: t('templates'),
+    description: previewText(
+      templates.map(({ name }) => name),
+      t('templates'),
+    ),
+  },
+  {
+    icon: '🏆',
+    title: t('prizes'),
+    description: previewText(
+      prizes.map(({ name }) => name),
+      t('hackathon_prizes'),
+    ),
+  },
+  {
+    icon: '🤝',
+    title: t('organizations'),
+    description: previewText(
+      organizations.map(({ name }) => name),
+      t('organizations'),
+    ),
+  },
+  {
+    icon: '📅',
+    title: t('agenda'),
+    description: previewText(
+      agendaItems.map(({ name }) => name),
+      eventRange || t('agenda'),
+    ),
+  },
+];
+
+export const buildJudgingCriteria = ({ t }: typeof i18n) => [
+  {
+    id: 'innovation',
+    weight: '30%',
+    title: t('hackathon_criteria_innovation_title'),
+    description: t('hackathon_criteria_innovation_desc'),
+  },
+  {
+    id: 'technical_depth',
+    weight: '25%',
+    title: t('hackathon_criteria_technical_title'),
+    description: t('hackathon_criteria_technical_desc'),
+  },
+  {
+    id: 'completion',
+    weight: '25%',
+    title: t('hackathon_criteria_completion_title'),
+    description: t('hackathon_criteria_completion_desc'),
+  },
+  {
+    id: 'presentation',
+    weight: '20%',
+    title: t('hackathon_criteria_presentation_title'),
+    description: t('hackathon_criteria_presentation_desc'),
+  },
+];
+export const buildScheduleItems = (
+  { t }: typeof i18n,
+  { agendaItems, locationText }: { agendaItems: Agenda[]; locationText: string },
+) => {
+  const scheduleReasonMap = buildScheduleReasonMap({ t });
+  const scheduleFocusMap = buildScheduleFocusMap({ t });
+  const scheduleGoalMap = buildScheduleGoalMap({ t });
+
+  return agendaItems.map(({ id, name, type, summary, startedAt, endedAt }, index) => {
+    const normalizedType = normalizeAgendaType(type);
+    const typeLabel = agendaTypeLabelOf(type, t);
+    const reasonText = scheduleReasonMap[normalizedType] ?? t('hackathon_schedule_reason_default');
+    const focusText = scheduleFocusMap[normalizedType] ?? t('hackathon_schedule_focus_default');
+    const stageGoalText = scheduleGoalMap[normalizedType] ?? t('hackathon_schedule_goal_default');
+    const description = compactSummaryOf((summary as string) || reasonText, reasonText, 120);
+    const windowValue = formatPeriod(startedAt, endedAt) || '-';
+    const focusValue = compactSummaryOf((summary as string) || focusText, focusText, 92);
+
+    return {
+      id: id as string,
+      phase: String(index + 1).padStart(2, '0'),
+      dateText: formatPeriod(startedAt, endedAt),
+      title: name as string,
+      description,
+      stageGoal: stageGoalText,
+      tone: agendaToneClassOf(type, index),
+      facts: [
+        {
+          label: t('hackathon_schedule_window_label'),
+          value: windowValue,
+          meta: `${typeLabel} · ${locationText}`,
+        },
+        {
+          label: t('hackathon_schedule_reason_label'),
+          value: reasonText,
+          meta: t('hackathon_schedule_reason_meta'),
+        },
+        {
+          label: t('hackathon_schedule_focus_label'),
+          value: focusValue,
+          meta: t('hackathon_schedule_focus_meta'),
+        },
+      ],
+    };
+  });
+};
+
+export const buildPrizeItems = ({ t }: typeof i18n, prizes: Prize[]) =>
+  prizes.map(({ id, name, image, summary, level, sponsor, price, amount }, index) => ({
+    id: id as string,
+    title: name as string,
+    tier: (level as string) || `#${index + 1}`,
+    description: (summary as string) || previewText([sponsor, price, amount], t('prizes')),
+    image,
+    meta: [
+      sponsor ? { label: t('sponsor'), value: sponsor as string } : null,
+      price ? { label: t('price'), value: price as string } : null,
+      amount ? { label: t('amount'), value: amount as string } : null,
+    ].filter(Boolean) as HackathonAwardsMeta[],
+  }));
+
+export const buildOrganizationItems = (organizations: Organization[]) =>
+  organizations.map(({ id, name, link, logo }) => ({
+    id: id as string,
+    name: name as string,
+    href: link as string | undefined,
+    logo,
+  }));
+
+export const buildTemplateItems = ({ t }: typeof i18n, templates: Template[]) =>
+  templates.map(({ id, name, languages, tags, sourceLink, summary, previewLink }) => ({
+    id: id as string,
+    title: name as string,
+    description: (summary as string) || '',
+    languages: ((languages as string[] | undefined) || []).filter(Boolean),
+    tags: ((tags as string[] | undefined) || []).filter(Boolean),
+    sourceUrl: sourceLink as string | undefined,
+    sourceLabel: t('source_code'),
+    previewUrl: previewLink as string | undefined,
+    previewLabel: t('preview'),
+  }));
+
+export const buildParticipantItems = (people: Person[]) =>
+  people.map(({ id, name, avatar, githubLink }) => ({
+    id: id as string,
+    name: name as string,
+    avatar,
+    githubLink: githubLink as string | undefined,
+  }));
+
+export const buildFAQItems = (
+  { t }: typeof i18n,
+  {
+    eventRange,
+    locationText,
+    organizationsCount,
+    primaryForm,
+    projectsCount,
+    resourceSummary,
+    scheduleOverviewPills,
+    secondaryForm,
+    templatesCount,
+  }: {
+    eventRange: string;
+    locationText: string;
+    organizationsCount: number;
+    primaryForm?: FormGroupView;
+    projectsCount: number;
+    resourceSummary: string;
+    scheduleOverviewPills: string[];
+    secondaryForm?: FormGroupView;
+    templatesCount: number;
+  },
+): HackathonFAQItem[] =>
+  [
+    primaryForm
+      ? {
+          id: 'registration',
+          question: t('hackathon_faq_registration_question'),
+          answer: `${t('hackathon_faq_registration_answer_prefix')}${primaryForm.title}。${primaryForm.description}`,
+        }
+      : null,
+    {
+      id: 'schedule',
+      question: t('hackathon_faq_schedule_question'),
+      answer: [eventRange, ...scheduleOverviewPills.slice(0, 3)].filter(Boolean).join(' · '),
+    },
+    {
+      id: 'location',
+      question: t('hackathon_faq_location_question'),
+      answer: `${t('event_location')}：${locationText}`,
+    },
+    {
+      id: 'resources',
+      question: t('hackathon_faq_resources_question'),
+      answer: `${t('templates')} ${templatesCount} · ${t('projects')} ${projectsCount} · ${t('organizations')} ${organizationsCount}。${resourceSummary}`,
+    },
+    secondaryForm
+      ? {
+          id: 'submission',
+          question: t('hackathon_faq_submission_question'),
+          answer: `${t('hackathon_faq_submission_answer_prefix')}${secondaryForm.title}。${secondaryForm.description}`,
+        }
+      : null,
+  ].filter(Boolean) as HackathonFAQItem[];
+
+export const buildProjectItems = (
+  { t }: typeof i18n,
+  { projects, activity }: { projects: Project[]; activity: Activity },
+) =>
+  projects.map(({ id, name, score, summary, createdBy, members }) => {
+    const creator = createdBy as TableCellUser | undefined;
+    const scoreText = score === null || score === undefined || score === '' ? '—' : `${score}`;
+
+    return {
+      id: id as string,
+      title: name as string,
+      link: `${ActivityModel.getLink(activity)}/team/${id}`,
+      score: scoreText,
+      description: (summary as string) || '',
+      meta: [
+        creator
+          ? {
+              label: t('created_by'),
+              value: creator.name || '—',
+              valueHref: creator.email ? `mailto:${creator.email}` : undefined,
+            }
+          : { label: t('created_by'), value: '—' },
+        {
+          label: t('members'),
+          value: (members as string[] | undefined)?.join(', ') || '—',
+        },
+      ],
+    };
+  });
diff --git a/components/Activity/Hackathon/theme.less b/components/Activity/Hackathon/theme.less
new file mode 100644
index 0000000..e2eece2
--- /dev/null
+++ b/components/Activity/Hackathon/theme.less
@@ -0,0 +1,169 @@
+@bg: #050814;
+@panel: rgba(8, 18, 39, 0.76);
+@panel-strong: rgba(6, 13, 30, 0.92);
+@border: rgba(120, 160, 255, 0.18);
+@copy: #eef5ff;
+@muted: rgba(220, 232, 255, 0.72);
+@cyan: #2ce8ff;
+@gold: #ffc94d;
+@green: #48f1a8;
+@rose: #ff78ba;
+@purple: #7b61ff;
+@shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
+@heading: 'Orbitron', 'Avenir Next', 'Segoe UI', sans-serif;
+@body: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
+
+.panel-card() {
+  box-shadow: @shadow;
+  border: 1px solid @border;
+  border-radius: 28px;
+  background: @panel;
+  backdrop-filter: blur(18px);
+}
+
+.section-shell() {
+  position: relative;
+  padding: clamp(4rem, 7vw, 6rem) 0;
+  background: linear-gradient(
+    180deg,
+    rgba(5, 8, 20, 0.98),
+    rgba(7, 12, 26, 0.98)
+  );
+  color: @copy;
+}
+
+.section-frame() {
+  .section {
+    .section-shell();
+  }
+
+  .sectionHeader {
+    .section-header();
+  }
+
+  .sectionTitle {
+    .section-title();
+  }
+
+  .sectionSubtitle {
+    .section-subtitle();
+  }
+
+  .accentLine {
+    .accent-line();
+  }
+}
+
+.section-header() {
+  text-align: center;
+  margin-bottom: clamp(2.3rem, 4vw, 3rem);
+}
+
+.section-title() {
+  display: inline-block;
+  margin: 0;
+  background: linear-gradient(135deg, #fff 20%, @cyan 80%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-family: @heading;
+  font-size: clamp(1.9rem, 4vw, 2.6rem);
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.section-subtitle() {
+  color: @muted;
+  font-family: @heading;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.accent-line() {
+  width: 72px;
+  height: 2px;
+  margin: 1rem auto 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, @cyan, @purple);
+  box-shadow: 0 0 14px rgba(44, 232, 255, 0.32);
+}
+
+.button-base() {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease,
+    border-color 0.22s ease,
+    background 0.22s ease,
+    color 0.22s ease;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 0.9rem 1.35rem;
+  font-family: @heading;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  &:hover {
+    transform: translateY(-2px);
+    text-decoration: none;
+  }
+}
+
+.button-primary() {
+  .button-base();
+  box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);
+  border-color: rgba(44, 232, 255, 0.3);
+  background: rgba(44, 232, 255, 0.12);
+  color: @cyan;
+
+  &:hover {
+    box-shadow: 0 0 34px rgba(44, 232, 255, 0.28);
+    background: rgba(44, 232, 255, 0.2);
+    color: #fff;
+  }
+}
+
+.button-ghost() {
+  .button-base();
+  border-color: rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.04);
+  color: @copy;
+
+  &:hover {
+    border-color: rgba(255, 201, 77, 0.24);
+    background: rgba(255, 201, 77, 0.1);
+    color: @gold;
+  }
+}
+
+.eyebrow() {
+  color: @muted;
+  font-family: @heading;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.chip() {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+@media (max-width: 767px) {
+  .section-title() {
+    font-size: 1.65rem;
+    letter-spacing: 0.08em;
+  }
+}
diff --git a/components/Activity/Hackathon/utility.ts b/components/Activity/Hackathon/utility.ts
new file mode 100644
index 0000000..0ba13b8
--- /dev/null
+++ b/components/Activity/Hackathon/utility.ts
@@ -0,0 +1,107 @@
+import { TableCellValue, TableFormView } from 'mobx-lark';
+import { formatDate } from 'web-utility';
+
+import type { HackathonScheduleTone } from './Schedule';
+import { i18n, I18nKey } from '../../../models/Translation';
+
+export const AgendaTypeClassMap: Partial<Record<string, HackathonScheduleTone>> = {
+  workshop: 'formation',
+  formation: 'formation',
+  presentation: 'enrollment',
+  enrollment: 'enrollment',
+  coding: 'competition',
+  competition: 'competition',
+  break: 'break',
+  ceremony: 'evaluation',
+  evaluation: 'evaluation',
+};
+
+export const buildAgendaTypeLabelMap = ({
+  t,
+}: Pick<typeof i18n, 't'>): Partial<Record<string, string>> => ({
+  workshop: t('workshop'),
+  presentation: t('presentation'),
+  coding: t('coding'),
+  break: t('break'),
+  ceremony: t('ceremony'),
+  enrollment: t('enrollment'),
+  formation: t('formation'),
+  competition: t('competition'),
+  evaluation: t('evaluation'),
+});
+
+export const isPublicForm = ({ shared_limit }: TableFormView) =>
+  ['anyone_editable'].includes(shared_limit as string);
+
+export const formatMoment = (value?: TableCellValue) => (value ? formatDate(value as string) : '');
+
+export const formatPeriod = (startedAt?: TableCellValue, endedAt?: TableCellValue) =>
+  [formatMoment(startedAt), formatMoment(endedAt)].filter(Boolean).join(' - ');
+
+export const previewText = (items: TableCellValue[], fallback: string) =>
+  items
+    .map(item => item?.toString())
+    .filter(Boolean)
+    .slice(0, 2)
+    .join(' · ') || fallback;
+
+export const agendaToneClassOf = (type: TableCellValue, index: number) => {
+  const normalized = type?.toString().toLowerCase() || '';
+  const fallbackOrder: HackathonScheduleTone[] = [
+    'formation',
+    'enrollment',
+    'competition',
+    'break',
+    'evaluation',
+  ];
+
+  return AgendaTypeClassMap[normalized] || fallbackOrder[index % fallbackOrder.length];
+};
+
+export const agendaTypeLabelOf = (
+  type: TableCellValue,
+  t: (key: I18nKey) => string,
+  fallback = '-',
+) => {
+  const normalized = type?.toString().toLowerCase() || '';
+
+  return buildAgendaTypeLabelMap({ t })[normalized] || type?.toString() || fallback;
+};
+
+export const compactSummaryOf = (
+  text: TableCellValue | string[] | string | undefined,
+  fallback: string,
+  limit = 96,
+) => {
+  const source = Array.isArray(text)
+    ? text
+        .map(item => item?.toString())
+        .filter(Boolean)
+        .join(' · ')
+    : text?.toString() || '';
+  const normalized = source.replace(/\s+/g, ' ').trim();
+
+  if (!normalized) return fallback;
+
+  return normalized.length > limit ? `${normalized.slice(0, limit).trim()}...` : normalized;
+};
+
+export const dateKeyOf = (value?: TableCellValue) => {
+  const dateText = formatMoment(value);
+
+  return dateText ? dateText.slice(5, 10).replace(/\//g, '-') : '';
+};
+
+export const compactDateKeyOf = (value?: TableCellValue) => dateKeyOf(value).replace('-', '.');
+
+export const daysBetween = (startedAt?: TableCellValue, endedAt?: TableCellValue) => {
+  const start = new Date((startedAt as string) || '').getTime();
+  const end = new Date((endedAt as string) || '').getTime();
+
+  if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) return 0;
+
+  return Math.max(1, Math.ceil((end - start) / (24 * 60 * 60 * 1000)));
+};
+
+export const normalizeAgendaType = (value?: TableCellValue) =>
+  value?.toString().toLowerCase() || '';
diff --git a/models/Hackathon.ts b/models/Hackathon.ts
index a7afb37..d01f94a 100644
--- a/models/Hackathon.ts
+++ b/models/Hackathon.ts
@@ -4,6 +4,7 @@ import {
   BiDataQueryOptions,
   BiDataTable,
   normalizeText,
+  normalizeTextArray,
   TableCellRelation,
   TableCellText,
   TableCellUser,
@@ -50,11 +51,15 @@ export class PersonModel extends BiDataTable<Person>() {
 
   queryOptions: BiDataQueryOptions = { text_field_as_array: false };
 
-  extractFields({ fields: { githubLink, ...fields }, ...meta }: TableRecord<Person>) {
+  extractFields({
+    fields: { githubLink, organizations, ...fields },
+    ...meta
+  }: TableRecord<Person>) {
     return {
       ...meta,
       ...fields,
       githubLink: normalizeText(githubLink as TableCellText),
+      organizations: normalizeTextArray(organizations as TableCellRelation[]),
     };
   }
 }
@@ -67,11 +72,16 @@ export class OrganizationModel extends BiDataTable<Organization>() {
 
   queryOptions: BiDataQueryOptions = { text_field_as_array: false };
 
-  extractFields({ fields: { link, ...fields }, ...meta }: TableRecord<Organization>) {
+  extractFields({
+    fields: { link, members, prizes, ...fields },
+    ...meta
+  }: TableRecord<Organization>) {
     return {
       ...meta,
       ...fields,
       link: normalizeText(link as TableCellText),
+      members: normalizeTextArray(members as TableCellRelation[]),
+      prizes: normalizeTextArray(prizes as TableCellRelation[]),
     };
   }
 }
@@ -93,6 +103,15 @@ export class PrizeModel extends BiDataTable<Prize>() {
   client = larkClient;
 
   queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { summary, sponsor, ...fields }, ...meta }: TableRecord<Prize>) {
+    return {
+      ...meta,
+      ...fields,
+      summary: (summary as TableCellText[])!.map(normalizeText),
+      sponsor: normalizeText(sponsor as TableCellText),
+    };
+  }
 }
 
 export type Template = LarkBase &
@@ -160,7 +179,7 @@ export class MemberModel extends BiDataTable<Member>() {
       person: (person as TableCellUser[])?.[0],
       summary: (summary as TableCellText[])!.map(normalizeText),
       skills: skills?.toString().split(/\s*,\s*/) || [],
-      githubAccount: normalizeText(githubAccount as TableCellText),
+      githubAccount: (githubAccount as TableCellText[])!.map(normalizeText),
     };
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index e2dbf2f..b16c6f0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -43,6 +43,8 @@ export default class CustomApp extends App<I18nProps> {
       { t } = this.i18nStore;
     const thisFullYear = new Date().getFullYear(),
       { asPath } = router;
+    const isArticlePage = asPath.startsWith('/article/') || asPath.startsWith('/policy/'),
+      isActivityPage = asPath.startsWith('/hackathon');
 
     return (
       <I18nContext.Provider value={this.i18nStore}>
@@ -52,18 +54,23 @@ export default class CustomApp extends App<I18nProps> {
           <title>{t('open_source_bazaar')}</title>
         </Head>
 
-        <MainNavigator />
-
-        <div className="mt-5 pt-2">
-          {asPath.startsWith('/article/') || asPath.startsWith('/policy/') ? (
-            <PageContent>
-              <Component {...pageProps} />
-            </PageContent>
-          ) : (
-            <Component {...pageProps} />
-          )}
-        </div>
+        {isActivityPage ? (
+          <Component {...pageProps} />
+        ) : (
+          <>
+            <MainNavigator />
 
+            <div className="mt-5 pt-2">
+              {isArticlePage ? (
+                <PageContent>
+                  <Component {...pageProps} />
+                </PageContent>
+              ) : (
+                <Component {...pageProps} />
+              )}
+            </div>
+          </>
+        )}
         <footer className="mw-100 bg-dark text-white">
           <p className="text-center my-0 py-3">
             <span className="pr-3">
diff --git a/pages/api/Lark/document/copy/[...slug].ts b/pages/api/Lark/document/copy/[...slug].ts
index dd9f453..8c2de97 100644
--- a/pages/api/Lark/document/copy/[...slug].ts
+++ b/pages/api/Lark/document/copy/[...slug].ts
@@ -18,7 +18,7 @@ router.post('/:type/:id', safeAPI, verifyJWT, async (context: Context) => {
       ? await lark.copyFile(`${type as 'wiki'}/${id}`, name, parentToken)
       : await lark.copyFile(`${type as LarkDocumentPathType}/${id}`, name, parentToken);
 
-  const newId = 'token' in copiedFile ? copiedFile.token : copiedFile.obj_token;
+  const newId = 'token' in copiedFile ? copiedFile.token : copiedFile.node_token;
 
   if (ownerType && ownerId)
     try {
diff --git a/pages/hackathon/[id].tsx b/pages/hackathon/[id].tsx
index 6f469b0..5ee064e 100644
--- a/pages/hackathon/[id].tsx
+++ b/pages/hackathon/[id].tsx
@@ -1,27 +1,21 @@
-import { BiTableSchema, TableCellLocation, TableCellUser } from 'mobx-lark';
+import { BiTableSchema, TableCellLocation, TableFormView } from 'mobx-lark';
 import { observer } from 'mobx-react';
-import Link from 'next/link';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
+
 import {
-  Badge,
-  Button,
-  ButtonGroup,
-  Card,
-  Col,
-  Container,
-  Dropdown,
-  DropdownButton,
-  Row,
-} from 'react-bootstrap';
-import { text2color, UserRankView } from 'idea-react';
-import { formatDate } from 'web-utility';
-
-import { GitCard } from '../../components/Git/Card';
-import { LarkImage } from '../../components/LarkImage';
+  HackathonActionHub,
+  HackathonActionHubLink,
+} from '../../components/Activity/Hackathon/ActionHub';
+import { HackathonAwards } from '../../components/Activity/Hackathon/Awards';
+import { HackathonFAQ } from '../../components/Activity/Hackathon/FAQ';
+import { HackathonHero } from '../../components/Activity/Hackathon/Hero';
+import { HackathonOverview } from '../../components/Activity/Hackathon/Overview';
+import { HackathonParticipants } from '../../components/Activity/Hackathon/Participants';
+import { HackathonResources } from '../../components/Activity/Hackathon/Resources';
+import { HackathonSchedule } from '../../components/Activity/Hackathon/Schedule';
 import { PageHead } from '../../components/Layout/PageHead';
 import { Activity, ActivityModel } from '../../models/Activity';
-import { fileURLOf } from '../../models/Base';
 import {
   Agenda,
   AgendaModel,
@@ -36,8 +30,49 @@ import {
   Template,
   TemplateModel,
 } from '../../models/Hackathon';
-import { I18nContext, I18nKey } from '../../models/Translation';
-import styles from '../../styles/Hackathon.module.less';
+import { I18nContext } from '../../models/Translation';
+import {
+  buildCountdownUnitLabels,
+  buildFAQItems,
+  buildHighlightCards,
+  buildJudgingCriteria,
+  buildOrganizationItems,
+  buildParticipantItems,
+  buildPrizeItems,
+  buildProjectItems,
+  buildScheduleItems,
+  buildTemplateItems,
+  FormButtonBar,
+  FormGroupKey,
+  FormGroupView,
+  buildFormSectionMeta,
+  heroNavigation,
+  RequiredTableKeys,
+} from '../../components/Activity/Hackathon/constant';
+import {
+  agendaTypeLabelOf,
+  compactDateKeyOf,
+  compactSummaryOf,
+  dateKeyOf,
+  daysBetween,
+  formatMoment,
+  formatPeriod,
+  isPublicForm,
+  normalizeAgendaType,
+  previewText,
+} from '../../components/Activity/Hackathon/utility';
+
+interface HackathonDetailProps {
+  activity: Activity;
+  hackathon: {
+    agenda: Agenda[];
+    organizations: Organization[];
+    people: Person[];
+    prizes: Prize[];
+    projects: Project[];
+    templates: Template[];
+  };
+}
 
 export const getServerSideProps = compose<{ id: string }>(
   cache(),
@@ -45,7 +80,11 @@ export const getServerSideProps = compose<{ id: string }>(
   async ({ params }) => {
     const activity = await new ActivityModel().getOne(params!.id);
 
-    const { appId, tableIdMap } = activity.databaseSchema as BiTableSchema;
+    const { appId, tableIdMap } = (activity.databaseSchema || {}) as BiTableSchema;
+
+    if (!appId || !tableIdMap) return { notFound: true, props: {} };
+
+    for (const key of RequiredTableKeys) if (!tableIdMap[key]) return { notFound: true, props: {} };
 
     const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
       new PersonModel(appId, tableIdMap.Person).getAll(),
@@ -65,224 +104,393 @@ export const getServerSideProps = compose<{ id: string }>(
   },
 );
 
-interface HackathonDetailProps {
-  activity: Activity;
-  hackathon: {
-    people: Person[];
-    organizations: Organization[];
-    agenda: Agenda[];
-    prizes: Prize[];
-    templates: Template[];
-    projects: Project[];
-  };
-}
+const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
+  const i18n = useContext(I18nContext);
+  const { t } = i18n;
+  const {
+      name,
+      summary,
+      location,
+      startTime,
+      endTime,
+      databaseSchema,
+      host,
+      image,
+      type: activityType,
+    } = activity,
+    { people, organizations, agenda, prizes, templates, projects } = hackathon;
+  const { forms } = (databaseSchema || {}) as BiTableSchema;
+  const formMap = (forms || {}) as Partial<Record<FormGroupKey, TableFormView[]>>;
+  const summaryText = (summary as string) || '';
+  const agendaItems = [...agenda].sort(
+    ({ startedAt: left }, { startedAt: right }) =>
+      new Date((left as string) || 0).getTime() - new Date((right as string) || 0).getTime(),
+  );
+  const hostTags = (host as string[] | undefined)?.slice(0, 2) || [];
+  const eventRange = formatPeriod(startTime, endTime);
+  const locationText = (location as TableCellLocation | undefined)?.full_address || '-';
+  const phaseBadges = agendaItems
+    .slice(0, 4)
+    .map(({ type, startedAt, endedAt }) => {
+      const phase = agendaTypeLabelOf(type, t, t('agenda'));
+      const start = compactDateKeyOf(startedAt);
+      const end = compactDateKeyOf(endedAt);
+      const period =
+        start && end && start !== end
+          ? `${start} - ${end}`
+          : start || end || formatMoment(startedAt);
 
-const FormButtonBar = ['Person', 'Project', 'Product', 'Evaluation'];
+      return [phase, period].filter(Boolean).join(' ');
+    })
+    .filter(Boolean);
+  const heroBadges =
+    phaseBadges[0] && phaseBadges[1]
+      ? phaseBadges
+      : [
+          (activityType as string) || t('hackathon'),
+          ...hostTags,
+          formatMoment(startTime),
+          formatMoment(endTime),
+        ].filter((value): value is string => Boolean(value));
+  const agendaPreview = agendaItems.slice(0, 3);
+  const scheduleOverviewPills = agendaItems.slice(0, 6).map(({ id, name, type, startedAt }) => {
+    const label = agendaTypeLabelOf(type, t, (name as string) || t('agenda'));
+    const dateText = dateKeyOf(startedAt) || formatMoment(startedAt);
 
-const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
-  const { t } = useContext(I18nContext);
+    return [label, dateText].filter(Boolean).join(' · ') || (id as string);
+  });
+  const heroStatChips = [
+    activityType ? `🎯 ${activityType as string}` : `🎯 ${t('hackathon')}`,
+    ...scheduleOverviewPills.slice(0, 4),
+  ].filter(Boolean) as string[];
+  const countdownUnitLabels = buildCountdownUnitLabels(i18n);
+  const heroPrimaryActionLabel = t('hackathon_register_now');
+  const scheduleKeyDates = agendaItems
+    .slice(0, 6)
+    .map(({ id, name, type, startedAt, endedAt }) => {
+      const beginText = dateKeyOf(startedAt);
+      const endText = dateKeyOf(endedAt);
+      const dateLabel =
+        beginText && endText && beginText !== endText
+          ? `${beginText} - ${endText}`
+          : beginText || endText || '-';
 
-  const { name, summary, location, startTime, endTime, databaseSchema } = activity,
-    { people, organizations, agenda, prizes, templates, projects } = hackathon;
-  const { forms } = databaseSchema as BiTableSchema;
+      return {
+        id: id as string,
+        date: dateLabel,
+        label: (name as string) || agendaTypeLabelOf(type, t, t('agenda')),
+      };
+    })
+    .filter(({ date, label }) => Boolean(date && label));
+  const now = Date.now();
+  const nextAgendaItem = agendaItems.find(({ startedAt, endedAt }) => {
+    const started = new Date((startedAt as string) || 0).getTime();
+    const ended = new Date((endedAt as string) || 0).getTime();
+
+    return Number.isFinite(started) && Number.isFinite(ended) && now <= ended;
+  });
+  const nextAgendaStarted = nextAgendaItem?.startedAt as string | undefined;
+  const nextAgendaEnded = nextAgendaItem?.endedAt as string | undefined;
+  const countdownTo =
+    (nextAgendaStarted && new Date(nextAgendaStarted).getTime() > now
+      ? nextAgendaStarted
+      : nextAgendaEnded) ||
+    ((startTime as string | undefined) && new Date(startTime as string).getTime() > now
+      ? (startTime as string)
+      : (endTime as string | undefined));
+  const countdownLabel = nextAgendaItem
+    ? agendaTypeLabelOf(nextAgendaItem.type, t, t('agenda'))
+    : t('event_duration');
+  const enrollmentPhase = agendaItems.find(
+    ({ type }) => normalizeAgendaType(type) === 'enrollment',
+  );
+  const formationPhase = agendaItems.find(({ type }) => normalizeAgendaType(type) === 'formation');
+  const competitionPhase = agendaItems.find(
+    ({ type }) => normalizeAgendaType(type) === 'competition',
+  );
+  const evaluationPhase = agendaItems.find(
+    ({ type }) => normalizeAgendaType(type) === 'evaluation',
+  );
+  const scheduleNarrativeLead = [
+    enrollmentPhase &&
+      `${t('enrollment')} ${daysBetween(enrollmentPhase.startedAt, enrollmentPhase.endedAt)}${t('countdown_days')}`,
+    formationPhase &&
+      `${t('formation')} ${daysBetween(formationPhase.startedAt, formationPhase.endedAt)}${t('countdown_days')}`,
+    competitionPhase &&
+      `${t('competition')} ${daysBetween(competitionPhase.startedAt, competitionPhase.endedAt)}${t('countdown_days')}`,
+    evaluationPhase &&
+      `${t('evaluation')} ${daysBetween(evaluationPhase.startedAt, evaluationPhase.endedAt)}${t('countdown_days')}`,
+  ]
+    .filter(Boolean)
+    .join('，');
+
+  const formGroups = FormButtonBar.flatMap<FormGroupView>(key => {
+    const list = (formMap[key] || []).filter(isPublicForm);
+
+    return list[0]
+      ? [
+          {
+            key,
+            eyebrow: buildFormSectionMeta(i18n)[key].eyebrow,
+            title: buildFormSectionMeta(i18n)[key].title,
+            description: buildFormSectionMeta(i18n)[key].description,
+            links: list.map(({ name, shared_url }) => ({
+              label: name as string,
+              href: shared_url,
+              external: true as const,
+            })),
+          },
+        ]
+      : [];
+  });
+  const primaryForm =
+    formGroups.find(({ key }) => key === 'Person') ||
+    formGroups.find(({ key }) => key === 'Project') ||
+    formGroups[0];
+  const secondaryForm =
+    formGroups.find(({ key }) => key === 'Project' && key !== primaryForm?.key) ||
+    formGroups.find(({ key }) => key !== primaryForm?.key);
+  const formPreview =
+    formGroups
+      .map(({ eyebrow }) => eyebrow)
+      .filter(Boolean)
+      .slice(0, 2)
+      .join(' · ') || t('hackathon_action_hub');
+  const actionHubFacts = [
+    eventRange || t('event_duration'),
+    locationText,
+    ...scheduleOverviewPills.slice(0, 2),
+    formPreview,
+  ]
+    .filter(Boolean)
+    .slice(0, 4);
+
+  const highlightCards = buildHighlightCards(i18n, {
+    agendaItems,
+    eventRange,
+    organizations,
+    prizes,
+    templates,
+  });
+
+  const scheduleItems = buildScheduleItems(i18n, { agendaItems, locationText });
+
+  const prizeItems = buildPrizeItems(i18n, prizes);
+
+  const organizationItems = buildOrganizationItems(organizations);
+  const judgingCriteria = buildJudgingCriteria(i18n);
+  const supportAction = organizations.find(({ link }) => Boolean(link))?.link
+    ? {
+        label: t('hackathon_support_action'),
+        href: organizations.find(({ link }) => Boolean(link))!.link as string,
+        external: true,
+      }
+    : undefined;
+
+  const templateItems = buildTemplateItems(i18n, templates);
+
+  const projectItems = buildProjectItems(i18n, { projects, activity });
+
+  const participantItems = buildParticipantItems(people);
+  const resourceSummary = previewText(
+    [templates[0]?.name, projects[0]?.name, organizations[0]?.name].filter(Boolean),
+    t('hackathon_resource_zone_subtitle'),
+  );
+  const faqItems = buildFAQItems(i18n, {
+    eventRange,
+    locationText,
+    organizationsCount: organizations.length,
+    primaryForm,
+    projectsCount: projects.length,
+    resourceSummary,
+    scheduleOverviewPills,
+    secondaryForm,
+    templatesCount: templates.length,
+  });
 
   return (
-    <>
+    <div
+      style={{
+        background:
+          'radial-gradient(circle at top left, rgba(44, 232, 255, 0.18), transparent 32%),' +
+          'radial-gradient(circle at 85% 12%, rgba(255, 120, 186, 0.15), transparent 24%),' +
+          'linear-gradient(180deg, #0b1328 0%, #091022 48%, #050814 100%)',
+      }}
+    >
       <PageHead title={name as string} />
 
-      {/* Hero Section */}
-      <section className={styles.hero}>
-        <Container>
-          <h1 className={`text-center ${styles.title}`}>{name as string}</h1>
-          <p className={`text-center ${styles.description}`}>{summary as string}</p>
-
-          <Row className="mt-4 justify-content-center">
-            <Col md={4}>
-              <Card className={styles.infoCard}>
-                <Card.Body>
-                  <h5 className="text-white mb-2">📍 {t('event_location')}</h5>
-                  <p className="text-white-50 mb-0">
-                    {(location as TableCellLocation)?.full_address}
-                  </p>
-                </Card.Body>
-              </Card>
-            </Col>
-            <Col md={4}>
-              <Card className={styles.infoCard}>
-                <Card.Body>
-                  <h5 className="text-white mb-2">⏰ {t('event_duration')}</h5>
-                  <p className="text-white-50 mb-0">
-                    {formatDate(startTime as string)} - {formatDate(endTime as string)}
-                  </p>
-                </Card.Body>
-              </Card>
-            </Col>
-          </Row>
-
-          <ButtonGroup className="d-flex mt-3">
-            {FormButtonBar.map((key, index) => {
-              const list = forms[key]?.filter(
-                // @ts-expect-error Upstream types bug
-                ({ shared_limit }) => shared_limit === 'anyone_editable',
-              );
-
-              return !list?.[0] ? null : list.length < 2 ? (
-                <Button href={list[0].shared_url} target="_blank" rel="noreferrer">
-                  {index + 1}. {list[0].name}
-                </Button>
-              ) : (
-                <DropdownButton
-                  as={ButtonGroup}
-                  title={`${index + 1}. ${t('product_submission')}`}
-                  id={`dropdown-${key}`}
-                >
-                  {list.map(({ name, shared_url }) => (
-                    <Dropdown.Item key={name} href={shared_url} target="_blank" rel="noreferrer">
-                      {name}
-                    </Dropdown.Item>
-                  ))}
-                </DropdownButton>
-              );
-            })}
-          </ButtonGroup>
-        </Container>
-      </section>
-
-      <Container className="my-5">
-        <section className={`${styles.section} ${styles.prizeSection}`}>
-          <h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
-          <div className="mt-4">
-            <UserRankView
-              title={t('prizes')}
-              rank={prizes.map(({ name, image, price }, index) => ({
-                id: `prize-${index}`,
-                name: name as string,
-                avatar: fileURLOf(image),
-                score: price as number,
-              }))}
-            />
-          </div>
-        </section>
-
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2>
-          <ol className="list-unstyled mt-4">
-            {agenda.map(({ name, type, summary, startedAt, endedAt }) => (
-              <li
-                key={name as string}
-                className={`${styles.agendaItem} ${styles[type?.toString().toLowerCase() || 'break']}`}
-              >
-                <h5 className="text-white mb-2">{name as string}</h5>
-                <p className="text-white-50 small mb-2">{summary as string}</p>
-                <div className="d-flex justify-content-between align-items-center">
-                  <Badge bg={text2color(type as string)} className="me-2">
-                    {t(type as I18nKey)}
-                  </Badge>
-                  <div className="text-white-50 small">
-                    {formatDate(startedAt as string)} - {formatDate(endedAt as string)}
-                  </div>
-                </div>
-              </li>
-            ))}
-          </ol>
-        </section>
-
-        {/* Mid-front: Organizations - Horizontal logo layout */}
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
-          <nav className={styles.orgContainer}>
-            {organizations.map(({ name, link, logo }) => (
-              <a
-                key={name as string}
-                href={link as string}
-                target="_blank"
-                rel="noreferrer"
-                title={name as string}
-              >
-                <LarkImage src={logo} alt={name as string} className={styles.orgLogo} />
-              </a>
-            ))}
-          </nav>
-        </section>
-
-        {/* Mid-back: Templates - Using GitCard, 3-4 per row */}
-        <section className={`${styles.section} ${styles.templateSection}`}>
-          <h2 className={styles.sectionTitle}>🛠️ {t('templates')}</h2>
-          <Row className="mt-4 g-3" md={2} lg={3} xl={4}>
-            {templates.map(({ name, languages, tags, sourceLink, summary, previewLink }) => (
-              <Col key={name as string}>
-                <GitCard
-                  full_name={name as string}
-                  html_url={sourceLink as string}
-                  languages={languages as string[]}
-                  topics={tags as string[]}
-                  description={summary as string}
-                  homepage={previewLink as string}
-                />
-              </Col>
-            ))}
-          </Row>
-        </section>
-
-        {/* Mid-back: Projects - Narrow cards, 3-4 per row */}
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
-
-          <Row as="ul" className="list-unstyled mt-4 g-3" md={2} lg={3} xl={4}>
-            {projects.map(({ id, name, score, summary, createdBy, members }) => (
-              <Col as="li" key={name as string}>
-                <Card className={styles.projectCard} body>
-                  <div className="d-flex justify-content-between align-items-start mb-3">
-                    <h6 className="text-white flex-grow-1">
-                      <Link
-                        className="stretched-link"
-                        href={`${ActivityModel.getLink(activity)}/team/${id}`}
-                      >
-                        {name as string}
-                      </Link>
-                    </h6>
-                    <div className={styles.scoreCircle}>{score as number}</div>
-                  </div>
-                  <p className="text-white-50 small mb-3">{summary as string}</p>
-                  <div className="text-white-50 small mb-2">
-                    <strong>{t('created_by')}:</strong>{' '}
-                    <a href={`mailto:${(createdBy as TableCellUser)?.email}`}>
-                      {(createdBy as TableCellUser)?.name}
-                    </a>
-                  </div>
-                  <div className="text-white-50 small">
-                    <strong>{t('members')}:</strong> {(members as string[]).join(', ')}
-                  </div>
-                </Card>
-              </Col>
-            ))}
-          </Row>
-        </section>
-
-        {/* Footer: Participants - Circular avatars only */}
-        <section className={styles.section}>
-          <h2 className={styles.sectionTitle}>👥 {t('participants')}</h2>
-          <nav className={styles.participantCloud}>
-            {people.map(({ name, avatar, githubLink }) => (
-              <a
-                key={name as string}
-                className="text-center"
-                target="_blank"
-                rel="noreferrer"
-                href={githubLink as string}
-              >
-                <LarkImage
-                  className={styles.avatar}
-                  src={avatar}
-                  alt={name as string}
-                  title={name as string}
-                />
-              </a>
-            ))}
-          </nav>
-        </section>
-      </Container>
-    </>
+      <HackathonHero
+        badges={heroBadges}
+        bottomCard={
+          agendaItems[0] || agendaItems[agendaItems.length - 1]
+            ? {
+                eyebrow: t('event_duration'),
+                title:
+                  eventRange ||
+                  [
+                    formatMoment(agendaItems[0]?.startedAt),
+                    formatMoment(agendaItems[agendaItems.length - 1]?.endedAt),
+                  ]
+                    .filter(Boolean)
+                    .join(' - '),
+                description:
+                  agendaPreview[0]?.name?.toString() ||
+                  agendaTypeLabelOf(agendaItems[0]?.type, t, t('agenda')),
+              }
+            : undefined
+        }
+        countdownLabel={countdownLabel}
+        countdownUnitLabels={countdownUnitLabels}
+        countdownTo={countdownTo}
+        description={summaryText}
+        image={image}
+        imageFallback={(activityType as string) || t('hackathon')}
+        locationText={locationText}
+        name={name as string}
+        navigation={heroNavigation(i18n)}
+        primaryAction={
+          primaryForm
+            ? {
+                label: heroPrimaryActionLabel,
+                href: primaryForm.links[0].href,
+                external: true,
+              }
+            : { label: heroPrimaryActionLabel, href: '#entry-hub' }
+        }
+        secondaryAction={{ label: t('agenda'), href: '#schedule' }}
+        chips={heroStatChips}
+        subtitle={(activityType as string) || t('hackathon_detail')}
+        topCard={
+          summaryText || activityType
+            ? {
+                eyebrow: t('event_description'),
+                title: compactSummaryOf(
+                  summaryText,
+                  (activityType as string) || t('hackathon_detail'),
+                  36,
+                ),
+                description: locationText,
+              }
+            : undefined
+        }
+        visualChip={(activityType as string) || t('hackathon_detail')}
+        visualCopy={eventRange || locationText}
+        visualKicker={t('main_visual')}
+        visualTitle={compactSummaryOf(summaryText, t('hackathon_detail'), 48)}
+      />
+
+      <HackathonOverview
+        cards={highlightCards}
+        subtitle={t('hackathon_highlights_subtitle')}
+        themeSub={summaryText}
+        themeText={(activityType as string) || t('hackathon')}
+        title={t('hackathon_highlights')}
+      />
+
+      {formGroups[0] && (
+        <HackathonActionHub
+          entries={formGroups.map(({ description, eyebrow, links, title }) => ({
+            title,
+            description,
+            eyebrow,
+            links,
+            count: links.length,
+          }))}
+          facts={actionHubFacts}
+          primaryAction={
+            primaryForm
+              ? {
+                  label: primaryForm.title,
+                  href: primaryForm.links[0].href,
+                  external: true,
+                }
+              : undefined
+          }
+          primaryDescription={primaryForm?.description || t('hackathon_entry_flow_description')}
+          primaryTitle={primaryForm?.title || t('hackathon_entry_flow')}
+          subtitle={t('hackathon_entry_flow')}
+          title={t('hackathon_action_hub')}
+        >
+          <HackathonActionHubLink
+            action={
+              secondaryForm
+                ? {
+                    label: secondaryForm.title,
+                    href: secondaryForm.links[0].href,
+                    external: true,
+                  }
+                : { label: t('agenda'), href: '#schedule' }
+            }
+            variant="ghost"
+          />
+        </HackathonActionHub>
+      )}
+
+      {scheduleItems[0] && (
+        <HackathonSchedule
+          items={scheduleItems}
+          keyDates={scheduleKeyDates.map(({ date, label }) => ({ date, label }))}
+          kicker={t('hackathon_event_schedule')}
+          lead={scheduleNarrativeLead || summaryText || (name as string)}
+          overviewPills={scheduleOverviewPills}
+          phaseLabel={t('hackathon_phase')}
+          stageGoalLabel={t('hackathon_schedule_goal_label')}
+          subtitle={eventRange || t('event_description')}
+          title={t('agenda')}
+        />
+      )}
+
+      {(prizeItems[0] || organizationItems[0]) && (
+        <HackathonAwards
+          criteria={judgingCriteria}
+          organizations={organizationItems}
+          prizes={prizeItems}
+          subtitle={t('hackathon_judging_title')}
+          supportAction={supportAction}
+          supportDescription={summaryText || eventRange || locationText}
+          supportEyebrow={t('organizations')}
+          supportTitle={previewText(
+            organizations.map(({ name }) => name),
+            t('organizations'),
+          )}
+          title={t('prizes')}
+        />
+      )}
+
+      {faqItems[0] && (
+        <HackathonFAQ
+          items={faqItems}
+          subtitle={t('hackathon_faq_subtitle')}
+          title={t('common_questions')}
+        />
+      )}
+
+      {participantItems[0] && (
+        <HackathonParticipants
+          initialVisible={8}
+          participants={participantItems}
+          showLessLabel={t('hackathon_show_less')}
+          showMoreLabel={t('hackathon_show_more')}
+          subtitle={t('hackathon_people_showcase_subtitle')}
+          title={t('hackathon_people_showcase')}
+        />
+      )}
+
+      {(templateItems[0] || projectItems[0]) && (
+        <HackathonResources
+          projectInitialVisible={2}
+          projectItems={projectItems}
+          projectSubtitle={t('products')}
+          projectTitle={t('projects')}
+          showLessLabel={t('hackathon_show_less')}
+          showMoreLabel={t('hackathon_show_more')}
+          templateInitialVisible={6}
+          templateItems={templateItems}
+          templateSubtitle={t('hackathon_resource_zone_subtitle')}
+          templateTitle={t('hackathon_resource_zone')}
+        />
+      )}
+    </div>
   );
 });
 
diff --git a/styles/Hackathon.module.less b/styles/Hackathon.module.less
index 795c2f6..a0d97da 100644
--- a/styles/Hackathon.module.less
+++ b/styles/Hackathon.module.less
@@ -1,275 +1,126 @@
-// Tech-themed hackathon styling with blue-purple gradient and pink cards
+@bg: #050814;
+@panel: rgba(8, 18, 39, 0.76);
+@border: rgba(120, 160, 255, 0.18);
+@copy: #eef5ff;
+@muted: rgba(220, 232, 255, 0.72);
+@cyan: #2ce8ff;
+@shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
+@heading: 'Orbitron', 'Avenir Next', 'Segoe UI', sans-serif;
+@body: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
 
 .hero {
   position: relative;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-  padding: 4rem 0;
+  background:
+    radial-gradient(circle at top left, rgba(44, 232, 255, 0.18), transparent 32%),
+    radial-gradient(circle at 85% 12%, rgba(255, 120, 186, 0.15), transparent 24%),
+    linear-gradient(180deg, @bg 0%, #091022 48%, #050814 100%);
+  padding: clamp(4.5rem, 8vw, 6.75rem) 0 clamp(3.5rem, 6vw, 5rem);
   overflow: hidden;
-  color: #fff;
+  color: @copy;
 
-  &::before {
+  &::before,
+  &::after {
     position: absolute;
-    top: -50%;
-    left: -50%;
-    animation: grid-animation 20s linear infinite;
-    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
-    background-size: 50px 50px;
-    width: 200%;
-    height: 200%;
+    inset: 0;
     pointer-events: none;
     content: '';
   }
-}
 
-@keyframes grid-animation {
-  0% {
-    transform: translate(0, 0);
+  &::before {
+    opacity: 0.45;
+    mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
+    background-image:
+      linear-gradient(rgba(44, 232, 255, 0.08) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(44, 232, 255, 0.08) 1px, transparent 1px);
+    background-size: 54px 54px;
   }
-  100% {
-    transform: translate(50px, 50px);
+
+  &::after {
+    inset: auto 0 0;
+    background: linear-gradient(180deg, transparent, rgba(5, 8, 20, 0.95));
+    height: 140px;
   }
 }
 
 .title {
-  margin-bottom: 1rem;
-  font-weight: 700;
-  font-size: 3rem;
-  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  margin: 0;
+  font-weight: 900;
+  font-size: clamp(2.6rem, 5vw, 4.45rem);
+  line-height: 1;
+  font-family: @heading;
+  letter-spacing: 0.02em;
 }
 
 .description {
-  opacity: 0.9;
-  margin: 0 auto;
-  max-width: 800px;
-  font-size: 1.2rem;
-}
-
-.infoCard {
-  backdrop-filter: blur(10px);
-  transition: all 0.3s ease;
-  margin-bottom: 1rem;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 16px;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
-  padding: 1.5rem;
-
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
-    border-color: rgba(255, 255, 255, 0.5);
-  }
+  margin: 0;
+  max-width: 62ch;
+  color: @muted;
+  font-size: 1.05rem;
+  line-height: 1.8;
+  font-family: @body;
 }
 
 .section {
   position: relative;
-  padding: 3rem 0;
+  background: linear-gradient(180deg, rgba(5, 8, 20, 0.98), rgba(7, 12, 26, 0.98));
+  padding: clamp(4rem, 7vw, 6rem) 0;
+  color: @copy;
 }
 
 .sectionTitle {
   display: inline-block;
-  margin-bottom: 2rem;
-  border-bottom: 4px solid;
-  border-image: linear-gradient(90deg, #f093fb, #f5576c, #ffd140) 1;
-  background: linear-gradient(90deg, #f093fb, #f5576c, #ffd140);
-  -webkit-background-clip: text;
-  padding-bottom: 0.5rem;
-  font-weight: 700;
-  font-size: 2rem;
-  -webkit-text-fill-color: transparent;
+  margin: 0;
+  background: linear-gradient(135deg, #fff 20%, @cyan 80%);
   background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: 900;
+  font-size: clamp(1.9rem, 4vw, 2.6rem);
+  font-family: @heading;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
 }
 
-// Vibrant cards - Multicolor gradient background
-.darkCard {
-  transition: all 0.3s ease;
-  margin-bottom: 1rem;
-  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-  border-radius: 16px;
-  background: linear-gradient(135deg, #667eea, #764ba2);
-  padding: 1.5rem;
-  color: #fff;
-
-  &:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
-    background: linear-gradient(135deg, #7d8ff5, #8a5cb8);
-  }
-}
-
-// Bright cards - Warm gradient background
+.darkCard,
 .lightCard {
-  transition: all 0.3s ease;
-  margin-bottom: 1rem;
-  box-shadow: 0 4px 15px rgba(250, 112, 154, 0.3);
-  border-radius: 16px;
-  background: linear-gradient(135deg, #fa709a, #fee140);
-  padding: 1.5rem;
-  color: #1f2937;
-
-  &:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: 0 10px 30px rgba(250, 112, 154, 0.5);
-    background: linear-gradient(135deg, #ff6b9d, #ffa400);
-  }
-}
-
-// Agenda items with vibrant gradient backgrounds
-.agendaItem {
-  transition: all 0.3s ease;
-  margin-bottom: 1rem;
-  border-left: 5px solid;
-  border-radius: 12px;
-  padding: 1.5rem;
-  color: #fff;
-
-  &:hover {
-    transform: translateX(8px) scale(1.02);
-  }
-
-  &.formation {
-    box-shadow: 0 4px 15px rgba(0, 201, 255, 0.3);
-    border-left-color: #00c9ff;
-    background: linear-gradient(135deg, #00c9ff, #92fe9d);
-  }
-
-  &.enrollment {
-    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
-    border-left-color: #f5576c;
-    background: linear-gradient(135deg, #f5576c, #f093fb);
-  }
-
-  &.competition {
-    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
-    border-left-color: #4facfe;
-    background: linear-gradient(135deg, #4facfe, #00f2fe);
-  }
-
-  &.break {
-    box-shadow: 0 4px 15px rgba(255, 209, 64, 0.3);
-    border-left-color: #ffd140;
-    background: linear-gradient(135deg, #ffd140, #ff6b6b);
-  }
-
-  &.evaluation {
-    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-    border-left-color: #667eea;
-    background: linear-gradient(135deg, #667eea, #764ba2);
-  }
-}
-
-// Prize section using UserRankView
-.prizeSection {
-  margin-bottom: 2rem;
+  backdrop-filter: blur(18px);
+  box-shadow: @shadow;
+  border: 1px solid @border;
+  border-radius: 28px;
+  background: @panel;
+  padding: 1.3rem;
 }
 
-// Organization horizontal layout
-.orgContainer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem;
-  padding: 2rem 0;
-}
-
-.orgLogo {
-  filter: grayscale(0.3);
-  transition: all 0.3s ease;
-  border-radius: 12px;
-  width: 100px;
-  height: 100px;
-  object-fit: contain;
-
-  &:hover {
-    transform: scale(1.1);
-    filter: grayscale(0);
-  }
-}
-
-// Template section using GitCard
-.templateSection {
-  margin-bottom: 2rem;
+.lightCard {
+  background: rgba(255, 255, 255, 0.08);
 }
 
-// Project cards with vibrant gradient
 .projectCard {
-  transition: all 0.3s ease;
-  margin-bottom: 1.5rem;
-  border: 2px solid transparent;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
-  padding: 1.5rem;
-  color: #1f2937;
-
-  &:hover {
-    transform: translateY(-8px) scale(1.02);
-    box-shadow: 0 12px 35px rgba(250, 112, 154, 0.4);
-    background: linear-gradient(135deg, #ff6b9d 0%, #ffa400 100%);
+  backdrop-filter: blur(18px);
+  box-shadow: @shadow;
+  border: 1px solid @border;
+  border-radius: 28px;
+  background: @panel;
+  padding: 1.25rem;
+  height: 100%;
+}
+
+@media (max-width: 991px) {
+  .title {
+    font-size: clamp(2.2rem, 9vw, 3.45rem);
   }
 }
 
-.scoreCircle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 0 25px rgba(0, 242, 254, 0.5);
-  border-radius: 50%;
-  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
-  width: 60px;
-  height: 60px;
-  color: #fff;
-  font-weight: 700;
-  font-size: 1.2rem;
-}
-
-// Circular avatars only for participants
-.avatar {
-  transition: all 0.3s ease;
-  cursor: pointer;
-  box-shadow: 0 0 20px rgba(250, 112, 154, 0.5);
-  border: 4px solid transparent;
-  border-radius: 50%;
-  background:
-    linear-gradient(white, white) padding-box,
-    linear-gradient(135deg, #f093fb, #f5576c) border-box;
-  width: 80px;
-  height: 80px;
-
-  &:hover {
-    transform: scale(1.15);
-    box-shadow: 0 0 30px rgba(250, 112, 154, 0.7);
+@media (max-width: 767px) {
+  .hero {
+    padding-top: 4rem;
   }
-}
 
-.skillBadge {
-  display: inline-block;
-  margin: 0.25rem;
-  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
-  border-radius: 20px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  padding: 0.35rem 0.85rem;
-  color: #fff;
-  font-weight: 600;
-  font-size: 0.85rem;
-}
-
-.techGradient {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-weight: 700;
-}
-
-.glowText {
-  text-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
-}
-
-.participantCloud {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 2rem 0;
+  .sectionTitle {
+    font-size: 1.65rem;
+    letter-spacing: 0.08em;
+  }
 }
diff --git a/translation/en-US.ts b/translation/en-US.ts
index c720c6d..724cc00 100644
--- a/translation/en-US.ts
+++ b/translation/en-US.ts
@@ -211,62 +211,130 @@ export default {
 
   // Hackathon
   hackathon_detail: 'Hackathon Details',
-  event_info: 'Event Information',
+  hackathon_highlights: 'Tracks',
+  hackathon_highlights_subtitle: 'Theme & Tracks',
   event_description: 'Event Description',
   event_location: 'Location',
   event_duration: 'Duration',
+  main_visual: 'Main Visual',
+  countdown_days: 'Days',
+  countdown_hours: 'Hours',
+  countdown_minutes: 'Minutes',
+  countdown_seconds: 'Seconds',
   product_submission: 'Product Submission Form',
   agenda: 'Agenda',
+  hackathon_participant_registration: 'Participant Registration',
+  hackathon_participant_registration_description:
+    'Collect participant profiles to support sign-up, team formation, and updates.',
+  hackathon_team_lead: 'Team Lead',
+  hackathon_project_registration: 'Project Registration',
+  hackathon_project_registration_description:
+    'Register the project name, teammates, track, and one-line pitch to lock the team.',
+  hackathon_submission: 'Submission',
+  hackathon_product_submission_description:
+    'Submit the final build, demo link, and supporting notes before the deadline.',
+  hackathon_review: 'Review',
+  hackathon_evaluation_entry: 'Evaluation Portal',
+  hackathon_evaluation_entry_description:
+    'Used by judges or mentors during scoring, review, and result consolidation.',
+  hackathon_event_schedule: 'EVENT SCHEDULE',
+  common_questions: 'FAQ',
+  hackathon_faq_subtitle: 'Common Questions',
+  hackathon_faq_registration_question: 'Where should I start?',
+  hackathon_faq_registration_answer_prefix: 'Start with the currently open entry: ',
+  hackathon_faq_schedule_question: 'What is the event timeline?',
+  hackathon_faq_location_question: 'Where does the event take place?',
+  hackathon_faq_resources_question: 'What resources are available?',
+  hackathon_faq_submission_question: 'Where do I submit or continue next?',
+  hackathon_faq_submission_answer_prefix: 'For the next stage, use: ',
+  hackathon_people_showcase: 'Community',
+  hackathon_people_showcase_subtitle: 'Contributors & GitHub Profiles',
+  hackathon_resource_zone: 'Resources & Projects',
+  hackathon_resource_zone_subtitle: 'Templates, repositories and submitted work',
+  hackathon_show_more: 'Show more',
+  hackathon_show_less: 'Show less',
+  hackathon_register_now: 'Register Now',
+  hackathon_judging_title: 'Judging Criteria',
+  hackathon_support_action: 'Contact via organizer',
+  hackathon_criteria_innovation_title: 'Innovation',
+  hackathon_criteria_innovation_desc:
+    'Novel ideas that clearly address meaningful real-world problems.',
+  hackathon_criteria_technical_title: 'Technical Depth',
+  hackathon_criteria_technical_desc:
+    'Effective and substantial use of AI capability in the implementation.',
+  hackathon_criteria_completion_title: 'Completion',
+  hackathon_criteria_completion_desc: 'A runnable, demonstrable product with a complete core flow.',
+  hackathon_criteria_presentation_title: 'Presentation & Design',
+  hackathon_criteria_presentation_desc:
+    'Clear storytelling, polished interaction, and persuasive product experience.',
+  hackathon_action_hub: 'Action Hub · Forms',
+  hackathon_entry_flow: 'Registration and Submission Flow',
+  hackathon_entry_flow_description:
+    'Entries are generated from the current activity schema so different events can reuse the same page structure.',
+  hackathon_phase: 'Phase',
+  hackathon_schedule_window_label: 'Window',
+  hackathon_schedule_reason_label: 'Reason',
+  hackathon_schedule_focus_label: 'Focus',
+  hackathon_schedule_goal_label: 'Stage Goal',
+  hackathon_schedule_reason_meta: 'Rhythm Design',
+  hackathon_schedule_focus_meta: 'Execution Focus',
+  hackathon_schedule_reason_enrollment:
+    'Start early warm-up and participant outreach so team formation has enough qualified candidates.',
+  hackathon_schedule_reason_formation:
+    'Keep the team-up window short to force faster decisions and reduce drift.',
+  hackathon_schedule_reason_competition:
+    'Constrain sprint duration to prioritize a demonstrable output instead of endless scope growth.',
+  hackathon_schedule_reason_evaluation:
+    'Reserve a dedicated judging window to improve scoring consistency and review quality.',
+  hackathon_schedule_reason_default:
+    'Arrange critical actions by phase so the overall timeline remains executable.',
+  hackathon_schedule_focus_enrollment:
+    'Complete participant registration and enter the community channels for matching.',
+  hackathon_schedule_focus_formation:
+    'Lock topic, members, and roles quickly to form a stable execution team.',
+  hackathon_schedule_focus_competition:
+    'Submit a runnable demo, repository, and core documentation before deadline.',
+  hackathon_schedule_focus_evaluation:
+    'Score against judging criteria, complete reviews, and prepare demo shortlist.',
+  hackathon_schedule_focus_default:
+    'Drive the phase-critical tasks first and complete key deliverables on time.',
+  hackathon_schedule_goal_enrollment:
+    'Build a strong participant pool as the quality foundation for the next phases.',
+  hackathon_schedule_goal_formation:
+    'Close team formation rapidly and move each team into execution mode.',
+  hackathon_schedule_goal_competition:
+    'Deliver a demo-ready and reproducible project with on-time submission.',
+  hackathon_schedule_goal_evaluation:
+    'Produce stable judging outcomes and finish Demo Day preparation.',
+  hackathon_schedule_goal_default:
+    'Keep each phase goal clear, closed-loop, and deliverable within schedule.',
   participants: 'Participants',
   organizations: 'Organizations',
   prizes: 'Prizes',
   hackathon_prizes: 'Hackathon Prizes',
   templates: 'Templates',
   projects: 'Projects',
-  type: 'Type',
-  start_time: 'Start Time',
-  end_time: 'End Time',
   workshop: 'Workshop',
+  enrollment: 'Enrollment',
+  formation: 'Teaming',
+  competition: 'Competition',
+  evaluation: 'Evaluation',
   presentation: 'Presentation',
   coding: 'Coding',
   break: 'Break',
   ceremony: 'Ceremony',
-  gender: 'Gender',
-  age: 'Age',
-  address: 'Address',
-  skills: 'Skills',
-  github_account: 'GitHub Account',
-  view_github: 'View GitHub',
   members: 'Members',
   sponsor: 'Sponsor',
   price: 'Prize Money',
   amount: 'Amount',
-  level: 'Level',
-  gold: 'Gold',
-  silver: 'Silver',
-  bronze: 'Bronze',
-  special: 'Special',
   source_code: 'Source Code',
   preview: 'Preview',
   created_by: 'Created By',
-  group: 'Team',
   products: 'Products',
   score: 'Score',
-  male: 'Male',
-  female: 'Female',
-  other: 'Other',
 
   // Team detail page
   team_members: 'Team Members',
   team_works: 'Team Works',
-  latest_news: 'Latest News',
   no_news_yet: 'No news yet',
-  join_team: 'Join Team',
-  leave_team: 'Leave Team',
-  manage_team: 'Manage Team',
-  cancel_application: 'Cancel Application',
-  please_make_sure: 'Please confirm',
-  success: 'Success',
-  team_description: 'Team Description',
-  team_details: 'Team Details',
 };
diff --git a/translation/zh-CN.ts b/translation/zh-CN.ts
index 64c4e2a..99d776f 100644
--- a/translation/zh-CN.ts
+++ b/translation/zh-CN.ts
@@ -207,62 +207,110 @@ export default {
 
   // Hackathon
   hackathon_detail: '黑客松详情',
-  event_info: '活动信息',
+  hackathon_highlights: '赛道方向',
+  hackathon_highlights_subtitle: 'Theme & Tracks',
   event_description: '活动描述',
   event_location: '活动地点',
   event_duration: '活动时间',
+  main_visual: '主视觉',
+  countdown_days: '天',
+  countdown_hours: '时',
+  countdown_minutes: '分',
+  countdown_seconds: '秒',
   product_submission: '产品提交',
   agenda: '日程安排',
+  hackathon_participant_registration: '参与者登记',
+  hackathon_participant_registration_description:
+    '收集报名成员、建立参赛者池，并为后续组队和通知打底。',
+  hackathon_team_lead: '队长',
+  hackathon_project_registration: '项目注册',
+  hackathon_project_registration_description:
+    '登记项目名称、成员、赛道和一句话介绍，完成队伍锁定。',
+  hackathon_submission: '提交',
+  hackathon_product_submission_description: '比赛截止前统一提交最终作品、演示链接和补充说明。',
+  hackathon_review: '评审',
+  hackathon_evaluation_entry: '评审入口',
+  hackathon_evaluation_entry_description: '评委或导师在评审阶段使用，用于评分、复核与结果整理。',
+  hackathon_event_schedule: 'EVENT SCHEDULE',
+  common_questions: '常见问题',
+  hackathon_faq_subtitle: 'FAQ',
+  hackathon_faq_registration_question: '应该从哪个入口开始？',
+  hackathon_faq_registration_answer_prefix: '优先使用当前开放的入口：',
+  hackathon_faq_schedule_question: '活动节奏怎么安排？',
+  hackathon_faq_location_question: '活动在哪里进行？',
+  hackathon_faq_resources_question: '现场能提供哪些资源？',
+  hackathon_faq_submission_question: '提交或后续流程从哪里进入？',
+  hackathon_faq_submission_answer_prefix: '后续阶段可继续使用：',
+  hackathon_people_showcase: '参与者社区',
+  hackathon_people_showcase_subtitle: 'Contributors & GitHub Profiles',
+  hackathon_resource_zone: '资源与项目',
+  hackathon_resource_zone_subtitle: 'Templates, repositories and submitted work',
+  hackathon_show_more: '展开更多',
+  hackathon_show_less: '收起内容',
+  hackathon_register_now: '立即报名',
+  hackathon_judging_title: '评审标准 · Judging Criteria',
+  hackathon_support_action: '通过组织方联系',
+  hackathon_criteria_innovation_title: '创新性 Innovation',
+  hackathon_criteria_innovation_desc: '想法有新意，能针对真实问题给出明确方案。',
+  hackathon_criteria_technical_title: '技术深度 Technical Depth',
+  hackathon_criteria_technical_desc: 'AI 能力是否被有效运用，并形成技术壁垒。',
+  hackathon_criteria_completion_title: '完成度 Completion',
+  hackathon_criteria_completion_desc: '作品是否可运行、可演示，主路径是否完整。',
+  hackathon_criteria_presentation_title: '表达与设计 Presentation',
+  hackathon_criteria_presentation_desc: '叙事清晰，交互流畅，整体体验具有说服力。',
+  hackathon_action_hub: '入口中心 · 表单',
+  hackathon_entry_flow: '报名与提交流程',
+  hackathon_entry_flow_description:
+    '入口根据活动当前配置自动生成。不同活动可以复用同一套页面结构，而不是为每次活动单开专页。',
+  hackathon_phase: '阶段',
+  hackathon_schedule_window_label: '窗口',
+  hackathon_schedule_reason_label: '原因',
+  hackathon_schedule_focus_label: '重点',
+  hackathon_schedule_goal_label: '阶段目标',
+  hackathon_schedule_reason_meta: '节奏设计',
+  hackathon_schedule_focus_meta: '执行重点',
+  hackathon_schedule_reason_enrollment: '提前预热并集中拉新，保证组队前有足够候选参与者。',
+  hackathon_schedule_reason_formation: '压缩组队窗口，促进快速决策，避免长期摇摆。',
+  hackathon_schedule_reason_competition: '限定冲刺周期，聚焦可演示成果而非无限扩展。',
+  hackathon_schedule_reason_evaluation: '留出独立评审时间，保证打分与复核质量。',
+  hackathon_schedule_reason_default: '根据当前活动阶段安排关键动作，确保节奏可执行。',
+  hackathon_schedule_focus_enrollment: '完成队员登记并进入社群，尽快匹配潜在队友。',
+  hackathon_schedule_focus_formation: '明确题目、锁定成员和分工，快速形成稳定队伍。',
+  hackathon_schedule_focus_competition: '提交可运行 Demo、仓库与核心说明，保证主路径完整。',
+  hackathon_schedule_focus_evaluation: '围绕评审标准完成评分、复核并准备展示名单。',
+  hackathon_schedule_focus_default: '围绕阶段核心任务推进，优先完成关键交付。',
+  hackathon_schedule_goal_enrollment: '把参与者池建立起来，为后续组队和比赛提供质量基础。',
+  hackathon_schedule_goal_formation: '在短周期内完成组队闭环，让队伍进入可执行状态。',
+  hackathon_schedule_goal_competition: '产出可演示、可复现的作品并按时提交。',
+  hackathon_schedule_goal_evaluation: '形成稳定评审结果并完成 Demo Day 前置准备。',
+  hackathon_schedule_goal_default: '确保当前阶段目标清晰、动作闭环并可按时交付。',
   participants: '参与者',
   organizations: '组织方',
   prizes: '奖项',
   hackathon_prizes: '黑客松奖项',
   templates: '项目模板',
   projects: '参赛项目',
-  type: '类型',
-  start_time: '开始时间',
-  end_time: '结束时间',
   workshop: '工作坊',
+  enrollment: '报名中',
+  formation: '组队',
+  competition: '比赛',
+  evaluation: '评审',
   presentation: '展示',
   coding: '编程',
   break: '休息',
   ceremony: '仪式',
-  gender: '性别',
-  age: '年龄',
-  address: '地址',
-  skills: '技能',
-  github_account: 'GitHub 账号',
-  view_github: '查看 GitHub',
   members: '成员',
   sponsor: '赞助商',
   price: '奖金',
   amount: '数量',
-  level: '等级',
-  gold: '金奖',
-  silver: '银奖',
-  bronze: '铜奖',
-  special: '特别奖',
   source_code: '源代码',
   preview: '预览',
   created_by: '创建者',
-  group: '团队',
   products: '产品',
   score: '评分',
-  male: '男',
-  female: '女',
-  other: '其他',
 
   // Team detail page
   team_members: '团队成员',
   team_works: '团队作品',
-  latest_news: '最新动态',
   no_news_yet: '暂无动态',
-  join_team: '加入团队',
-  leave_team: '退出团队',
-  manage_team: '管理团队',
-  cancel_application: '取消申请',
-  please_make_sure: '请确认',
-  success: '成功',
-  team_description: '团队描述',
-  team_details: '团队详情',
 };
diff --git a/translation/zh-TW.ts b/translation/zh-TW.ts
index 284879a..457192c 100644
--- a/translation/zh-TW.ts
+++ b/translation/zh-TW.ts
@@ -207,62 +207,110 @@ export default {
 
   // Hackathon
   hackathon_detail: '黑客松詳情',
-  event_info: '活動資訊',
+  hackathon_highlights: '賽道方向',
+  hackathon_highlights_subtitle: 'Theme & Tracks',
   event_description: '活動描述',
   event_location: '活動地點',
   event_duration: '活動時間',
+  main_visual: '主視覺',
+  countdown_days: '天',
+  countdown_hours: '時',
+  countdown_minutes: '分',
+  countdown_seconds: '秒',
   product_submission: '產品提交',
   agenda: '日程安排',
+  hackathon_participant_registration: '參與者登記',
+  hackathon_participant_registration_description:
+    '收集報名成員、建立參賽者池，並為後續組隊和通知打底。',
+  hackathon_team_lead: '隊長',
+  hackathon_project_registration: '項目註冊',
+  hackathon_project_registration_description:
+    '登記項目名稱、成員、賽道和一句話介紹，完成隊伍鎖定。',
+  hackathon_submission: '提交',
+  hackathon_product_submission_description: '比賽截止前統一提交最終作品、演示連結和補充說明。',
+  hackathon_review: '評審',
+  hackathon_evaluation_entry: '評審入口',
+  hackathon_evaluation_entry_description: '評委或導師在評審階段使用，用於評分、複核與結果整理。',
+  hackathon_event_schedule: 'EVENT SCHEDULE',
+  common_questions: '常見問題',
+  hackathon_faq_subtitle: 'FAQ',
+  hackathon_faq_registration_question: '應該從哪個入口開始？',
+  hackathon_faq_registration_answer_prefix: '優先使用當前開放的入口：',
+  hackathon_faq_schedule_question: '活動節奏怎麼安排？',
+  hackathon_faq_location_question: '活動在哪裡進行？',
+  hackathon_faq_resources_question: '現場能提供哪些資源？',
+  hackathon_faq_submission_question: '提交或後續流程從哪裡進入？',
+  hackathon_faq_submission_answer_prefix: '後續階段可繼續使用：',
+  hackathon_people_showcase: '參與者社群',
+  hackathon_people_showcase_subtitle: 'Contributors & GitHub Profiles',
+  hackathon_resource_zone: '資源與項目',
+  hackathon_resource_zone_subtitle: 'Templates, repositories and submitted work',
+  hackathon_show_more: '展開更多',
+  hackathon_show_less: '收起內容',
+  hackathon_register_now: '立即報名',
+  hackathon_judging_title: '評審標準 · Judging Criteria',
+  hackathon_support_action: '通過主辦方聯繫',
+  hackathon_criteria_innovation_title: '創新性 Innovation',
+  hackathon_criteria_innovation_desc: '想法有新意，能針對真實問題提出清晰方案。',
+  hackathon_criteria_technical_title: '技術深度 Technical Depth',
+  hackathon_criteria_technical_desc: 'AI 能力是否被有效運用，並形成技術價值。',
+  hackathon_criteria_completion_title: '完成度 Completion',
+  hackathon_criteria_completion_desc: '作品是否可運行、可演示，主路徑是否完整。',
+  hackathon_criteria_presentation_title: '表達與設計 Presentation',
+  hackathon_criteria_presentation_desc: '敘事清晰，互動流暢，整體體驗具有說服力。',
+  hackathon_action_hub: '入口中心 · 表單',
+  hackathon_entry_flow: '報名與提交流程',
+  hackathon_entry_flow_description:
+    '入口會根據活動當前配置自動生成。不同活動可以共用同一套頁面結構，而不是為每次活動單開專頁。',
+  hackathon_phase: '階段',
+  hackathon_schedule_window_label: '窗口',
+  hackathon_schedule_reason_label: '原因',
+  hackathon_schedule_focus_label: '重點',
+  hackathon_schedule_goal_label: '階段目標',
+  hackathon_schedule_reason_meta: '節奏設計',
+  hackathon_schedule_focus_meta: '執行重點',
+  hackathon_schedule_reason_enrollment: '提前預熱並集中拉新，確保組隊前有足夠候選參賽者。',
+  hackathon_schedule_reason_formation: '壓縮組隊窗口，促進快速決策，避免長期搖擺。',
+  hackathon_schedule_reason_competition: '限定衝刺周期，聚焦可演示成果而非無限擴展。',
+  hackathon_schedule_reason_evaluation: '保留獨立評審時間，保障打分與複核品質。',
+  hackathon_schedule_reason_default: '根據當前活動階段安排關鍵動作，確保節奏可執行。',
+  hackathon_schedule_focus_enrollment: '完成隊員登記並進入社群，盡快匹配潛在隊友。',
+  hackathon_schedule_focus_formation: '明確題目、鎖定成員與分工，快速形成穩定隊伍。',
+  hackathon_schedule_focus_competition: '提交可運行 Demo、代碼庫與核心說明，保證主路徑完整。',
+  hackathon_schedule_focus_evaluation: '圍繞評審標準完成評分、複核並準備展示名單。',
+  hackathon_schedule_focus_default: '圍繞階段核心任務推進，優先完成關鍵交付。',
+  hackathon_schedule_goal_enrollment: '建立參賽者池，為後續組隊與比賽提供品質基礎。',
+  hackathon_schedule_goal_formation: '在短周期內完成組隊閉環，讓隊伍進入可執行狀態。',
+  hackathon_schedule_goal_competition: '產出可演示、可復現的作品並按時提交。',
+  hackathon_schedule_goal_evaluation: '形成穩定評審結果並完成 Demo Day 前置準備。',
+  hackathon_schedule_goal_default: '確保當前階段目標清晰、動作閉環且可按時交付。',
   participants: '參與者',
   organizations: '組織方',
   prizes: '獎項',
   hackathon_prizes: '黑客松獎項',
   templates: '項目模板',
   projects: '參賽項目',
-  type: '類型',
-  start_time: '開始時間',
-  end_time: '結束時間',
   workshop: '工作坊',
+  enrollment: '報名中',
+  formation: '組隊',
+  competition: '比賽',
+  evaluation: '評審',
   presentation: '展示',
   coding: '編程',
   break: '休息',
   ceremony: '儀式',
-  gender: '性別',
-  age: '年齡',
-  address: '地址',
-  skills: '技能',
-  github_account: 'GitHub 帳號',
-  view_github: '查看 GitHub',
   members: '成員',
   sponsor: '贊助商',
   price: '獎金',
   amount: '數量',
-  level: '等級',
-  gold: '金獎',
-  silver: '銀獎',
-  bronze: '銅獎',
-  special: '特別獎',
   source_code: '源代碼',
   preview: '預覽',
   created_by: '創建者',
-  group: '團隊',
   products: '產品',
   score: '評分',
-  male: '男',
-  female: '女',
-  other: '其他',
 
   // Team detail page
   team_members: '團隊成員',
   team_works: '團隊作品',
-  latest_news: '最新動態',
   no_news_yet: '暫無動態',
-  join_team: '加入團隊',
-  leave_team: '退出團隊',
-  manage_team: '管理團隊',
-  cancel_application: '取消申請',
-  please_make_sure: '請確認',
-  success: '成功',
-  team_description: '團隊描述',
-  team_details: '團隊詳情',
 };