feat: hackathon landing

packages/shared/src/contexts/AuthContext.tsx

@@ -33,6 +33,7 @@ export interface LoginState {
   onLoginSuccess?: () => void;
   onRegistrationSuccess?: (user?: LoggedUser | AnonymousUser) => void;
   isLogin?: boolean;
+  afterAuth?: string;
 }
 
 type LoginOptions = Omit<LoginState, 'trigger'>;
@@ -186,6 +187,8 @@ export const AuthContextProvider = ({
               setLoginState({ ...options, trigger });
               if (isExtension) {
                 params.delete(AFTER_AUTH_PARAM);
+              } else if (options.afterAuth) {
+                params.set(AFTER_AUTH_PARAM, options.afterAuth);
               } else if (!params.get(AFTER_AUTH_PARAM)) {
                 params.set(AFTER_AUTH_PARAM, window.location.pathname);
               }

packages/shared/src/features/hackathon/components/HackathonClosingCTA.tsx

@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol } from '../../../components/utilities';
+import { HackathonSignupButton } from './HackathonSignupButton';
+
+export const HackathonClosingCTA = (): ReactElement => {
+  return (
+    <FlexCol className="w-full items-center gap-3 rounded-16 bg-surface-float p-8 text-center">
+      <Typography type={TypographyType.Title3} bold center>
+        Ready to build?
+      </Typography>
+      <Typography
+        type={TypographyType.Callout}
+        color={TypographyColor.Secondary}
+        center
+        className="max-w-md"
+      >
+        Sign up now and we&apos;ll send you the kickoff details and how to get
+        your API access before the hackathon opens.
+      </Typography>
+      <div className="mt-2">
+        <HackathonSignupButton />
+      </div>
+    </FlexCol>
+  );
+};

packages/shared/src/features/hackathon/components/HackathonFAQ.tsx

@@ -0,0 +1,79 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol } from '../../../components/utilities';
+import { RadixAccordion } from '../../../components/accordion';
+import { useLogContext } from '../../../contexts/LogContext';
+import { LogEvent, TargetId } from '../../../lib/log';
+
+const faq = [
+  {
+    title: 'When does the hackathon start?',
+    description: 'It will happen in May. Concrete dates are TBD.',
+  },
+  {
+    title: 'Who can participate?',
+    description: 'Any developer with a daily.dev account. Beginners welcome.',
+  },
+  {
+    title: 'Do I need a Plus subscription?',
+    description:
+      'No. The Public API is open to all hackathon participants for the duration of the event.',
+  },
+  {
+    title: 'What stack should I use?',
+    description:
+      'Whatever you want. Next.js, TanStack Start, Vite, Python. Pick whatever lets you ship fastest. The OpenAPI spec works with any language.',
+  },
+  {
+    title: 'Can I use AI?',
+    description:
+      'Yes. Claude Code, Cursor, Codex, vibe-code the whole thing if you want.',
+  },
+  {
+    title: 'How do I submit my project?',
+    description:
+      'Post about your project on social media tagging @dailydotdev with a link to your live URL and a short summary. That post is your submission.',
+  },
+  {
+    title: "What happens if I don't finish?",
+    description:
+      'Submit what you have. Half-finished but interesting beats polished but boring. We value creativity and usefulness as much as execution.',
+  },
+];
+
+export const HackathonFAQ = (): ReactElement => {
+  const { logEvent } = useLogContext();
+
+  const handleFAQChange = (value: string) => {
+    if (!value) {
+      return;
+    }
+    logEvent({
+      event_name: LogEvent.Click,
+      target_id: TargetId.HackathonPage,
+      extra: JSON.stringify({ faq: value }),
+    });
+  };
+
+  return (
+    <FlexCol className="w-full gap-7">
+      <Typography
+        type={TypographyType.Title3}
+        bold
+        color={TypographyColor.Tertiary}
+      >
+        Frequently asked questions (FAQ)
+      </Typography>
+      <RadixAccordion
+        items={faq}
+        className="rounded-16 bg-surface-float [&_.AccordionTrigger]:items-start [&_.AccordionTrigger]:text-left"
+        onValueChange={handleFAQChange}
+      />
+    </FlexCol>
+  );
+};

packages/shared/src/features/hackathon/components/HackathonHero.tsx

@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { DailyIcon } from '../../../components/icons';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { useIsLightTheme } from '../../../hooks/utils';
+import { briefButtonBg } from '../../../styles/custom';
+import { HackathonSignupButton } from './HackathonSignupButton';
+
+export const HackathonHero = (): ReactElement => {
+  const isLightTheme = useIsLightTheme();
+
+  return (
+    <FlexCol className="items-center gap-4">
+      <FlexRow className="items-center gap-1">
+        <DailyIcon />
+        <Typography
+          center
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+        >
+          daily.dev Hackathon
+        </Typography>
+      </FlexRow>
+      <Typography
+        center
+        type={TypographyType.LargeTitle}
+        bold
+        style={isLightTheme ? undefined : { background: briefButtonBg }}
+        className={
+          isLightTheme
+            ? 'text-accent-onion-default'
+            : '!bg-clip-text text-transparent'
+        }
+      >
+        Build something for developers, from developers.
+      </Typography>
+      <Typography
+        center
+        type={TypographyType.Body}
+        color={TypographyColor.Secondary}
+        className="max-w-lg"
+      >
+        72 hours, three tracks, and full access to the daily.dev Public API.{' '}
+        <strong>Win 1 year of daily.dev Plus!</strong>
+      </Typography>
+      <FlexRow className="mt-2 flex-wrap items-center justify-center gap-3">
+        <HackathonSignupButton />
+      </FlexRow>
+    </FlexCol>
+  );
+};

packages/shared/src/features/hackathon/components/HackathonHowItWorks.tsx

@@ -0,0 +1,125 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol } from '../../../components/utilities';
+import Link from '../../../components/utilities/Link';
+import { anchorDefaultRel } from '../../../lib/strings';
+import { webappUrl } from '../../../lib/constants';
+
+type Section = {
+  title: string;
+  items: ReactNode[];
+};
+
+const sections: Section[] = [
+  {
+    title: 'Rules for all tracks',
+    items: [
+      'Public URL required. Must be deployed, not localhost.',
+      'Every project produces something a user can share (image, card, page, link) with working OG/preview tags.',
+      'No heavy onboarding. Connect an account or enter a query, get a result.',
+      "Don't rebuild things we already have. DevCard, Presidential Briefing, Smart Prompts, Bookmark Folders, Custom Feeds, Reading Streaks, Top Reader, Cores. Build on top, not copies.",
+    ],
+  },
+  {
+    title: 'What we provide',
+    items: [
+      <>
+        <Link
+          key="public-api-docs"
+          href="https://docs.daily.dev/docs/plus/public-api"
+        >
+          <a
+            className="text-text-link underline"
+            target="_blank"
+            rel={anchorDefaultRel}
+          >
+            API
+          </a>
+        </Link>{' '}
+        access for all registered participants (no Plus requirement).
+      </>,
+      <>
+        <Link
+          key="openapi-spec"
+          href="https://api.daily.dev/public/v1/docs/json"
+        >
+          <a
+            className="text-text-link underline"
+            target="_blank"
+            rel={anchorDefaultRel}
+          >
+            OpenAPI spec
+          </a>
+        </Link>{' '}
+        for client generation in any language.
+      </>,
+      'Use whatever stack you want. Next.js, TanStack Start, Vite, Go, even PHP.',
+      <>
+        Agent skills like{' '}
+        <Link key="daily-dev-ask" href={`${webappUrl}agents/ask`}>
+          <a target="_blank" className="text-text-link underline">
+            /daily-dev-ask
+          </a>
+        </Link>{' '}
+        to help you out
+      </>,
+    ],
+  },
+  {
+    title: 'Format & prizes',
+    items: [
+      '72 hours, async. Join from anywhere.',
+      'To submit, post about your project on social media tagging @dailydotdev with your live URL and a short summary.',
+      <>
+        Prizes: 1 year of{' '}
+        <Link key="daily-dev-ask" href={`${webappUrl}plus`}>
+          <a target="_blank" className="text-text-link underline">
+            daily.dev Plus
+          </a>
+        </Link>{' '}
+        with all the benefits for best submissions.
+      </>,
+      'Winning projects featured on daily.dev and social media.',
+    ],
+  },
+];
+
+export const HackathonHowItWorks = (): ReactElement => {
+  return (
+    <FlexCol className="w-full gap-7">
+      <Typography type={TypographyType.Title3} bold center>
+        How it works
+      </Typography>
+      <div className="flex flex-col gap-4 tablet:flex-row">
+        {sections.map(({ title, items }) => (
+          <FlexCol
+            key={title}
+            className="flex-1 gap-3 rounded-16 bg-surface-float p-5"
+          >
+            <Typography type={TypographyType.Callout} bold>
+              {title}
+            </Typography>
+            <ul className="flex flex-col gap-2">
+              {items.map((item, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <li key={index}>
+                  <Typography
+                    type={TypographyType.Footnote}
+                    color={TypographyColor.Secondary}
+                  >
+                    • {item}
+                  </Typography>
+                </li>
+              ))}
+            </ul>
+          </FlexCol>
+        ))}
+      </div>
+    </FlexCol>
+  );
+};