[refactor] redesign & rewrite Hackathon home page

components/Activity/Hackathon/HackathonActionHub.module.less

@@ -0,0 +1,142 @@
+@import './theme.less';
+
+.section {
+  .section-shell();
+  padding-top: clamp(3rem, 5vw, 4rem);
+}
+
+.registerWrap {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  gap: 1.5rem;
+  align-items: start;
+
+  @media (max-width: 1199px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.registerCard {
+  .panel-card();
+  background: linear-gradient(
+    135deg,
+    rgba(44, 232, 255, 0.08),
+    rgba(123, 97, 255, 0.14)
+  );
+}
+
+.registerCardInner,
+.entryHub {
+  padding: 1.55rem;
+}
+
+.regEyebrow,
+.entryEyebrow,
+.entryStep {
+  .eyebrow();
+}
+
+.regTitle,
+.entryTitle {
+  margin: 0;
+  color: #fff;
+  font-family: @heading;
+  font-size: clamp(1.55rem, 3vw, 2.1rem);
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.regTitle {
+  margin-top: 0.4rem;
+}
+
+.regDesc,
+.entryCard p {
+  color: @muted;
+  line-height: 1.75;
+}
+
+.regDesc {
+  margin: 0.9rem 0 1.2rem;
+}
+
+.regActions,
+.entryLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.9rem;
+}
+
+.actionButton {
+  .button-primary();
+}
+
+.actionButtonGhost,
+.entryLink {
+  .button-ghost();
+}
+
+.regFacts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 1.3rem 0 0;
+
+  li {
+    .chip();
+    padding: 0.48rem 0.85rem;
+    color: @copy;
+    font-size: 0.9rem;
+  }
+}
+
+.entryHub {
+  .panel-card();
+}
+
+.entryHubHead {
+  margin-bottom: 1.25rem;
+}
+
+.entryTitle {
+  margin-top: 0.35rem;
+  font-size: 1.55rem;
+}
+
+.entryCard {
+  .panel-card();
+  height: 100%;
+  padding: 1.3rem;
+}
+
+.entryStep {
+  color: @cyan;
+}
+
+.entryCard h4 {
+  margin: 0.55rem 0 0.45rem;
+  color: #fff;
+  font-family: @heading;
+  font-size: 1.02rem;
+}
+
+.entryCard p {
+  margin: 0;
+}
+
+.entryMetaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin: 1rem 0;
+}
+
+.entryMeta {
+  .chip();
+  padding: 0.35rem 0.7rem;
+  color: @gold;
+  font-family: @heading;
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}

components/Activity/Hackathon/HackathonActionHub.tsx

@@ -0,0 +1,130 @@
+import { FC, type PropsWithChildren } from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+
+import { HackathonHeroAction } from './HackathonHero';
+import styles from './HackathonActionHub.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>{entry.title}</h4>
+    <p>{entry.description}</p>
+
+    <div className={styles.entryMetaRow}>
+      <span className={styles.entryMeta}>{entry.count}</span>
+      <span className={styles.entryMeta}>{entry.eyebrow}</span>
+    </div>
+
+    <nav className={styles.entryLinks} aria-label={entry.title}>
+      {entry.links.map((link) => (
+        <a
+          key={`${link.label}-${link.href}`}
+          className={styles.entryLink}
+          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}>{title}</p>
+            <h2 className={styles.regTitle}>{primaryTitle}</h2>
+            <p className={styles.regDesc}>{primaryDescription}</p>
+
+            <nav className={styles.regActions} aria-label={title}>
+              {primaryAction && (
+                <HackathonActionHubLink
+                  action={primaryAction}
+                  variant="primary"
+                />
+              )}
+              {children}
+            </nav>
+
+            <ul className={`list-unstyled ${styles.regFacts}`}>
+              {facts.map((fact) => (
+                <li key={fact}>{fact}</li>
+              ))}
+            </ul>
+          </div>
+        </article>
+
+        <div className={styles.entryHub}>
+          <header className={styles.entryHubHead}>
+            <p className={styles.entryEyebrow}>{subtitle}</p>
+            <h3 className={styles.entryTitle}>{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>
+);