[refactor] redesign & rewrite Hackathon home page

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;
+}

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>
+);