diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx
index 40b0bad2a55..088c8ab9c61 100644
--- a/packages/shared/src/components/MainLayout.tsx
+++ b/packages/shared/src/components/MainLayout.tsx
@@ -321,7 +321,11 @@ function MainLayoutComponent({
             <div
               className={classNames(
                 'relative flex min-h-0 flex-1 flex-col',
-                'laptop:overflow-hidden laptop:rounded-24 laptop:border laptop:border-border-subtlest-quaternary laptop:bg-background-default laptop:p-0.5 laptop:shadow-2',
+                // `overflow-clip` clips to the rounded card exactly like
+                // `overflow-hidden` but, unlike hidden, does not establish a
+                // scroll container, so descendant `position: sticky` elements
+                // (e.g. sticky tab bars) keep sticking to the viewport.
+                'laptop:overflow-clip laptop:rounded-24 laptop:border laptop:border-border-subtlest-quaternary laptop:bg-background-default laptop:p-0.5 laptop:shadow-2',
                 !hasTopBanners &&
                   !topBanner &&
                   'laptop:min-h-[calc(100vh-1.5rem)]',
diff --git a/packages/shared/src/features/giveback/GivebackContext.tsx b/packages/shared/src/features/giveback/GivebackContext.tsx
new file mode 100644
index 00000000000..3fd39c68d1c
--- /dev/null
+++ b/packages/shared/src/features/giveback/GivebackContext.tsx
@@ -0,0 +1,535 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type {
+  GivebackAction,
+  GivebackActionCategoryFilter,
+  GivebackActionSubmissionInput,
+  GivebackCampaign,
+  GivebackCause,
+  GivebackCauseSuggestionInput,
+  GivebackCommunityEvent,
+  GivebackCommunityRally,
+  GivebackDonationAccounting,
+  GivebackLeaderboardEntry,
+  GivebackLevel,
+  GivebackSponsor,
+  GivebackSponsorInput,
+  GivebackTopContributor,
+  GivebackUserAction,
+  GivebackUserProfile,
+} from './types';
+import {
+  GivebackActionValidationType,
+  GivebackCauseStatus,
+  GivebackUserActionStatus,
+} from './types';
+import {
+  createMockCampaign,
+  createMockUserProfile,
+  givebackActions,
+  givebackCauses,
+  givebackCommunityEvents,
+  givebackCommunityRally,
+  givebackLeaderboard,
+  givebackLevels,
+  givebackSponsors,
+  givebackTopContributors,
+  givebackUserActions,
+} from './mock';
+
+// Payload that drives the win-moment overlay. `id` changes on every trigger so
+// the same amount can celebrate twice in a row.
+export interface GivebackCelebration {
+  id: number;
+  amount: number;
+  currency: string;
+  milestone: number | null;
+  complete: boolean;
+}
+
+export interface GivebackCelebrationInput {
+  amount: number;
+  currency?: string;
+  milestone?: number | null;
+  complete?: boolean;
+}
+
+const GOAL_MILESTONES = [25, 50, 75, 100];
+
+// Highest milestone the pot crosses moving from `before` to `after` percent.
+const crossedMilestone = (before: number, after: number): number | null => {
+  const hit = GOAL_MILESTONES.filter((m) => before < m && after >= m);
+  return hit.length ? hit[hit.length - 1] : null;
+};
+
+export interface GivebackContextValue {
+  campaign: GivebackCampaign;
+  levels: GivebackLevel[];
+  userProfile: GivebackUserProfile;
+  actions: GivebackAction[];
+  filteredActions: GivebackAction[];
+  loveActions: GivebackAction[];
+  userActions: GivebackUserAction[];
+  causes: GivebackCause[];
+  suggestedCauses: GivebackCause[];
+  communityEvents: GivebackCommunityEvent[];
+  topContributors: GivebackTopContributor[];
+  leaderboard: GivebackLeaderboardEntry[];
+  communityRally: GivebackCommunityRally;
+  donationAccounting: GivebackDonationAccounting;
+  submitAction: (input: GivebackActionSubmissionInput) => void;
+  toggleCause: (causeId: string) => void;
+  suggestCause: (input: GivebackCauseSuggestionInput) => void;
+  sponsorCampaign: (input: GivebackSponsorInput) => void;
+  setUserActionStatus: (
+    actionId: string,
+    status: GivebackUserActionStatus,
+  ) => void;
+  showCommunityFeed: boolean;
+  setShowCommunityFeed: (value: boolean) => void;
+  geoAvailability: 'available' | 'waitlist';
+  setGeoAvailability: (value: 'available' | 'waitlist') => void;
+  celebrationState: 'none' | 'milestone' | 'complete';
+  setCelebrationState: (value: 'none' | 'milestone' | 'complete') => void;
+  // Session contribution unlocked by actions taken during this visit, used to
+  // tick the community pot up live as the user takes action.
+  sessionContribution: number;
+  celebration: GivebackCelebration | null;
+  celebrate: (input: GivebackCelebrationInput) => void;
+  dismissCelebration: () => void;
+  selectedCategory: GivebackActionCategoryFilter;
+  setSelectedCategory: (category: GivebackActionCategoryFilter) => void;
+  // Dev review controls (Phase 1). The full QA panel lands in a later phase.
+  goalPercentage: number;
+  setGoalPercentage: (percentage: number) => void;
+  userLevel: number;
+  setUserLevel: (level: number) => void;
+}
+
+const GivebackContext = createContext<GivebackContextValue | undefined>(
+  undefined,
+);
+
+const baseCampaign = createMockCampaign();
+const baseProfile = createMockUserProfile();
+const ACTIVE_CAUSES = givebackCauses.filter(
+  ({ status }) => status === GivebackCauseStatus.Active,
+);
+
+const DEFAULT_GOAL_PERCENTAGE = Math.round(
+  (baseCampaign.approvedAmount / baseCampaign.goalAmount) * 100,
+);
+
+// Sponsorships seeded into the mock are already reflected in the baseline raised
+// amount, so only sponsorships added during the session top the pot up further.
+const SEED_SPONSORED_AMOUNT = givebackSponsors.reduce(
+  (sum, sponsor) => sum + sponsor.amount,
+  0,
+);
+
+interface GivebackProviderProps {
+  children: ReactNode;
+}
+
+export const GivebackProvider = ({
+  children,
+}: GivebackProviderProps): ReactElement => {
+  const [goalPercentage, setGoalPercentage] = useState(DEFAULT_GOAL_PERCENTAGE);
+  const [userLevel, setUserLevel] = useState(baseProfile.currentLevel);
+  const [selectedCategory, setSelectedCategory] =
+    useState<GivebackActionCategoryFilter>('all');
+  const [userActions, setUserActions] =
+    useState<GivebackUserAction[]>(givebackUserActions);
+  const [selectedCauseIds, setSelectedCauseIds] = useState<string[]>(
+    baseProfile.selectedCauseIds,
+  );
+  const [suggestedCauses, setSuggestedCauses] = useState<GivebackCause[]>([]);
+  const [sponsors, setSponsors] = useState<GivebackSponsor[]>(givebackSponsors);
+  const [showCommunityFeed, setShowCommunityFeed] = useState(true);
+  const [geoAvailability, setGeoAvailability] = useState<
+    'available' | 'waitlist'
+  >('available');
+  const [celebrationState, setCelebrationState] = useState<
+    'none' | 'milestone' | 'complete'
+  >('none');
+  const [sessionContribution, setSessionContribution] = useState(0);
+  const [celebration, setCelebration] = useState<GivebackCelebration | null>(
+    null,
+  );
+  const celebrationIdRef = useRef(0);
+
+  const celebrate = ({
+    amount,
+    currency = baseCampaign.currency,
+    milestone = null,
+    complete = false,
+  }: GivebackCelebrationInput): void => {
+    celebrationIdRef.current += 1;
+    setCelebration({
+      id: celebrationIdRef.current,
+      amount,
+      currency,
+      milestone,
+      complete,
+    });
+  };
+
+  const dismissCelebration = (): void => setCelebration(null);
+
+  const submitAction = ({
+    actionId,
+    evidenceLink,
+    evidenceImage,
+    note,
+  }: GivebackActionSubmissionInput): void => {
+    const action = givebackActions.find(({ id }) => id === actionId);
+
+    if (!action) {
+      throw new Error(`Giveback action ${actionId} does not exist`);
+    }
+
+    if (action.isLoveAction || !action.donationEligible) {
+      throw new Error('Love actions cannot unlock donation value');
+    }
+
+    const status =
+      action.validationType === GivebackActionValidationType.Automatic
+        ? GivebackUserActionStatus.AutoValidating
+        : GivebackUserActionStatus.PendingReview;
+
+    // Tick the community pot up by the unlocked amount and fire the win moment,
+    // flagging any goal milestone the contribution pushes the pot across.
+    const amount = action.donationAmount;
+    const sponsoredTotal = sponsors.reduce((sum, s) => sum + s.amount, 0);
+    const baseApproved = Math.round(
+      (baseCampaign.goalAmount * goalPercentage) / 100,
+    );
+    const approvedBefore =
+      baseApproved +
+      (sponsoredTotal - SEED_SPONSORED_AMOUNT) +
+      sessionContribution;
+    const beforePct = (approvedBefore / baseCampaign.goalAmount) * 100;
+    const afterPct =
+      ((approvedBefore + amount) / baseCampaign.goalAmount) * 100;
+    const milestone = crossedMilestone(beforePct, afterPct);
+
+    setSessionContribution((current) => current + amount);
+    celebrate({
+      amount,
+      currency: action.currency,
+      milestone,
+      complete: afterPct >= 100 && beforePct < 100,
+    });
+
+    setUserActions((currentActions) => {
+      const nextAction: GivebackUserAction = {
+        actionId,
+        status,
+        unlockedDonationAmount: action.donationAmount,
+        pendingDonationAmount: action.donationAmount,
+        approvedDonationAmount: 0,
+        rejectedDonationAmount: 0,
+        evidenceLink,
+        evidenceImage,
+        note,
+        submittedAt: new Date().toISOString(),
+      };
+      const existingIndex = currentActions.findIndex(
+        (userAction) => userAction.actionId === actionId,
+      );
+
+      if (existingIndex === -1) {
+        return [...currentActions, nextAction];
+      }
+
+      return currentActions.map((userAction, index) =>
+        index === existingIndex ? nextAction : userAction,
+      );
+    });
+  };
+
+  const toggleCause = (causeId: string): void => {
+    setSelectedCauseIds((current) => {
+      if (current.includes(causeId)) {
+        return current.filter((id) => id !== causeId);
+      }
+
+      return [...current, causeId];
+    });
+  };
+
+  const suggestCause = ({
+    name,
+    url,
+    note,
+    category,
+  }: GivebackCauseSuggestionInput): void => {
+    const trimmedName = name.trim();
+    const trimmedUrl = url.trim();
+
+    if (!trimmedName || !trimmedUrl) {
+      return;
+    }
+
+    setSuggestedCauses((current) => [
+      {
+        id: `suggested-${Date.now().toString()}`,
+        name: trimmedName,
+        description:
+          note?.trim() || 'Suggested by the community for future review.',
+        url: trimmedUrl,
+        category: category?.trim() || 'Community suggestion',
+        status: GivebackCauseStatus.PendingReview,
+        sortOrder: ACTIVE_CAUSES.length + current.length + 1,
+      },
+      ...current,
+    ]);
+  };
+
+  const sponsorCampaign = ({
+    name,
+    type,
+    amount,
+    message,
+  }: GivebackSponsorInput): void => {
+    const trimmedName = name.trim();
+
+    if (!trimmedName || amount <= 0) {
+      return;
+    }
+
+    setSponsors((current) => [
+      {
+        id: `sponsor-${Date.now().toString()}`,
+        name: trimmedName,
+        type,
+        amount,
+        currency: baseCampaign.currency,
+        message: message?.trim() || undefined,
+        createdAt: new Date().toISOString(),
+      },
+      ...current,
+    ]);
+  };
+
+  const setUserActionStatus = (
+    actionId: string,
+    status: GivebackUserActionStatus,
+  ): void => {
+    const action = givebackActions.find(({ id }) => id === actionId);
+
+    if (!action) {
+      throw new Error(`Giveback action ${actionId} does not exist`);
+    }
+
+    setUserActions((currentActions) => {
+      const existingAction = currentActions.find(
+        (userAction) => userAction.actionId === actionId,
+      );
+      const nextAction: GivebackUserAction = {
+        actionId,
+        status,
+        unlockedDonationAmount:
+          status === GivebackUserActionStatus.NotStarted
+            ? 0
+            : action.donationAmount,
+        pendingDonationAmount: [
+          GivebackUserActionStatus.Submitted,
+          GivebackUserActionStatus.PendingReview,
+          GivebackUserActionStatus.AutoValidating,
+        ].includes(status)
+          ? action.donationAmount
+          : 0,
+        approvedDonationAmount: [
+          GivebackUserActionStatus.Approved,
+          GivebackUserActionStatus.CountedTowardGoal,
+        ].includes(status)
+          ? action.donationAmount
+          : 0,
+        rejectedDonationAmount:
+          status === GivebackUserActionStatus.Rejected
+            ? action.donationAmount
+            : 0,
+        submittedAt:
+          existingAction?.submittedAt ??
+          (status === GivebackUserActionStatus.NotStarted
+            ? undefined
+            : new Date().toISOString()),
+        reviewedAt: [
+          GivebackUserActionStatus.Approved,
+          GivebackUserActionStatus.CountedTowardGoal,
+          GivebackUserActionStatus.Rejected,
+        ].includes(status)
+          ? new Date().toISOString()
+          : undefined,
+        rejectionReason:
+          status === GivebackUserActionStatus.Rejected
+            ? 'Simulated rejection from the QA panel.'
+            : undefined,
+        needsMoreInfoReason:
+          status === GivebackUserActionStatus.NeedsMoreInfo
+            ? 'Simulated request for more proof from the QA panel.'
+            : undefined,
+      };
+      const existingIndex = currentActions.findIndex(
+        (userAction) => userAction.actionId === actionId,
+      );
+
+      if (existingIndex === -1) {
+        return [...currentActions, nextAction];
+      }
+
+      return currentActions.map((userAction, index) =>
+        index === existingIndex ? nextAction : userAction,
+      );
+    });
+  };
+
+  const value = useMemo<GivebackContextValue>(() => {
+    const donationAccounting = userActions.reduce<GivebackDonationAccounting>(
+      (sum, userAction) => ({
+        unlockedDonationAmount:
+          sum.unlockedDonationAmount + userAction.unlockedDonationAmount,
+        pendingDonationAmount:
+          sum.pendingDonationAmount + userAction.pendingDonationAmount,
+        approvedDonationAmount:
+          sum.approvedDonationAmount + userAction.approvedDonationAmount,
+        rejectedDonationAmount:
+          sum.rejectedDonationAmount + userAction.rejectedDonationAmount,
+      }),
+      {
+        unlockedDonationAmount: 0,
+        pendingDonationAmount: 0,
+        approvedDonationAmount: 0,
+        rejectedDonationAmount: 0,
+      },
+    );
+    const sponsoredAmount = sponsors.reduce(
+      (sum, sponsor) => sum + sponsor.amount,
+      0,
+    );
+    const baseApprovedAmount = Math.round(
+      (baseCampaign.goalAmount * goalPercentage) / 100,
+    );
+    // New sponsorships and live session actions top the pot up on top of the
+    // baseline raised amount.
+    const approvedAmount =
+      baseApprovedAmount +
+      (sponsoredAmount - SEED_SPONSORED_AMOUNT) +
+      sessionContribution;
+    const campaign: GivebackCampaign = {
+      ...baseCampaign,
+      approvedAmount,
+      sponsoredAmount,
+      sponsors,
+    };
+
+    const activeLevel =
+      givebackLevels.find((level) => level.levelNumber === userLevel) ??
+      givebackLevels[0];
+
+    const userProfile: GivebackUserProfile = {
+      ...baseProfile,
+      currentLevel: activeLevel.levelNumber,
+      approvedContributionAmount: activeLevel.requiredApprovedAmount,
+      selectedCauseIds,
+    };
+
+    // The board's "You" row mirrors the same earned total the "Your
+    // contribution" card shows (unlocked minus anything rejected), so the two
+    // surfaces can never drift apart.
+    const earnedContribution =
+      donationAccounting.unlockedDonationAmount -
+      donationAccounting.rejectedDonationAmount;
+    const leaderboard = givebackLeaderboard.map((entry) =>
+      entry.isCurrentUser
+        ? { ...entry, contributionAmount: earnedContribution }
+        : entry,
+    );
+
+    const donationActions = givebackActions.filter(
+      (action) => !action.isLoveAction,
+    );
+    const loveActions = givebackActions.filter((action) => action.isLoveAction);
+
+    const filteredActions = donationActions.filter(
+      (action) =>
+        selectedCategory === 'all' || action.category === selectedCategory,
+    );
+
+    return {
+      campaign,
+      levels: givebackLevels,
+      userProfile,
+      actions: donationActions,
+      filteredActions,
+      loveActions,
+      userActions,
+      causes: ACTIVE_CAUSES,
+      suggestedCauses,
+      communityEvents: showCommunityFeed ? givebackCommunityEvents : [],
+      topContributors: givebackTopContributors,
+      leaderboard,
+      communityRally: givebackCommunityRally,
+      donationAccounting,
+      submitAction,
+      toggleCause,
+      suggestCause,
+      sponsorCampaign,
+      setUserActionStatus,
+      showCommunityFeed,
+      setShowCommunityFeed,
+      geoAvailability,
+      setGeoAvailability,
+      celebrationState,
+      setCelebrationState,
+      sessionContribution,
+      celebration,
+      celebrate,
+      dismissCelebration,
+      selectedCategory,
+      setSelectedCategory,
+      goalPercentage,
+      setGoalPercentage,
+      userLevel,
+      setUserLevel,
+    };
+  }, [
+    goalPercentage,
+    celebrationState,
+    sessionContribution,
+    celebration,
+    geoAvailability,
+    selectedCategory,
+    selectedCauseIds,
+    showCommunityFeed,
+    sponsors,
+    suggestedCauses,
+    userActions,
+    userLevel,
+  ]);
+
+  return (
+    <GivebackContext.Provider value={value}>
+      {children}
+    </GivebackContext.Provider>
+  );
+};
+
+export const useGivebackContext = (): GivebackContextValue => {
+  const context = useContext(GivebackContext);
+
+  if (!context) {
+    throw new Error(
+      'useGivebackContext must be used within a GivebackProvider',
+    );
+  }
+
+  return context;
+};
diff --git a/packages/shared/src/features/giveback/GivebackNavContext.tsx b/packages/shared/src/features/giveback/GivebackNavContext.tsx
new file mode 100644
index 00000000000..f782691e8e2
--- /dev/null
+++ b/packages/shared/src/features/giveback/GivebackNavContext.tsx
@@ -0,0 +1,43 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { createContext, useContext } from 'react';
+
+export type GivebackTabId = 'impact' | 'why' | 'actions';
+
+interface GivebackNavContextValue {
+  // Whether the visitor has opted in from the hero gateway. Until then the
+  // tabs and the rest of the experience stay hidden.
+  hasStarted: boolean;
+  start: () => void;
+  activeTab: GivebackTabId;
+  setActiveTab: (tab: GivebackTabId) => void;
+}
+
+const GivebackNavContext = createContext<GivebackNavContextValue | undefined>(
+  undefined,
+);
+
+interface GivebackNavProviderProps extends GivebackNavContextValue {
+  children: ReactNode;
+}
+
+export const GivebackNavProvider = ({
+  hasStarted,
+  start,
+  activeTab,
+  setActiveTab,
+  children,
+}: GivebackNavProviderProps): ReactElement => (
+  <GivebackNavContext.Provider
+    value={{ hasStarted, start, activeTab, setActiveTab }}
+  >
+    {children}
+  </GivebackNavContext.Provider>
+);
+
+export const useGivebackNav = (): GivebackNavContextValue => {
+  const context = useContext(GivebackNavContext);
+  if (!context) {
+    throw new Error('useGivebackNav must be used within a GivebackNavProvider');
+  }
+  return context;
+};
diff --git a/packages/shared/src/features/giveback/actionPlatform.ts b/packages/shared/src/features/giveback/actionPlatform.ts
new file mode 100644
index 00000000000..6553cef1e83
--- /dev/null
+++ b/packages/shared/src/features/giveback/actionPlatform.ts
@@ -0,0 +1,220 @@
+import type { ComponentType } from 'react';
+// AndroidIcon is not re-exported by the icons barrel, so import it directly.
+import { AndroidIcon } from '../../components/icons/Android';
+import {
+  AppleIcon,
+  BrowserGroupIcon,
+  CalendarIcon,
+  ChromeIcon,
+  DailyIcon,
+  DiscordIcon,
+  DiscussIcon,
+  DocsIcon,
+  EarthIcon,
+  EdgeIcon,
+  FeatherIcon,
+  GitHubIcon,
+  HashnodeIcon,
+  HotIcon,
+  LinkedInIcon,
+  MailIcon,
+  MegaphoneIcon,
+  MicrophoneIcon,
+  PlayIcon,
+  RedditIcon,
+  SitesIcon,
+  SlackIcon,
+  StackOverflowIcon,
+  StarIcon,
+  TelegramIcon,
+  TerminalIcon,
+  TrendingIcon,
+  TwitterIcon,
+  YoutubeIcon,
+} from '../../components/icons';
+import type { IconProps } from '../../components/Icon';
+import { GivebackActionPlatform } from './types';
+
+interface ActionPlatformVisual {
+  name: string;
+  /**
+   * Real brand logo rendered as an `<img>` on the card (preferred for branded
+   * surfaces). When absent, the card renders the internal `Icon` instead. If
+   * the remote logo ever fails to load, the card also falls back to `Icon`, so
+   * a tile can never render broken or blank.
+   */
+  logoUrl?: string;
+  /**
+   * Internal glyph used either as the primary visual for generic surfaces
+   * (blogs, newsletters, forums, events...) that have no single brand, or as
+   * the offline fallback for branded surfaces.
+   */
+  Icon: ComponentType<IconProps>;
+  /**
+   * Some internal brand glyphs ship only a hardcoded-white SVG (no color or
+   * `currentColor` variant), invisible on the light tile. Flag those so the
+   * card can force the fallback glyph to a dark silhouette.
+   */
+  forceDark?: boolean;
+}
+
+// Most brand logos come from Simple Icons' on-demand CDN (single, predictable
+// slug -> official brand-colored glyph). A few brands Simple Icons drops for
+// trademark reasons (LinkedIn, Slack, Edge) come from SVGL, the same open logo
+// library the sponsor wall uses.
+const simpleIcon = (slug: string): string =>
+  `https://cdn.simpleicons.org/${slug}`;
+const svglIcon = (slug: string): string =>
+  `https://svgl.app/library/${slug}.svg`;
+
+// Real platform logos so each action reads as a growth move on a known surface
+// (post on X, video on YouTube, ship on GitHub...). Branded surfaces get their
+// actual logo; surfaces without a dedicated brand reuse the closest semantic
+// glyph (reviews -> star, blogs -> globe, events -> calendar...).
+export const actionPlatformVisual: Record<
+  GivebackActionPlatform,
+  ActionPlatformVisual
+> = {
+  [GivebackActionPlatform.X]: {
+    name: 'X',
+    logoUrl: simpleIcon('x'),
+    Icon: TwitterIcon,
+  },
+  [GivebackActionPlatform.YouTube]: {
+    name: 'YouTube',
+    logoUrl: simpleIcon('youtube'),
+    Icon: YoutubeIcon,
+  },
+  [GivebackActionPlatform.Hashnode]: {
+    name: 'Hashnode',
+    logoUrl: simpleIcon('hashnode'),
+    Icon: HashnodeIcon,
+    forceDark: true,
+  },
+  [GivebackActionPlatform.GitHub]: {
+    name: 'GitHub',
+    logoUrl: simpleIcon('github'),
+    Icon: GitHubIcon,
+  },
+  [GivebackActionPlatform.Reddit]: {
+    name: 'Reddit',
+    logoUrl: simpleIcon('reddit'),
+    Icon: RedditIcon,
+  },
+  [GivebackActionPlatform.LinkedIn]: {
+    name: 'LinkedIn',
+    logoUrl: svglIcon('linkedin'),
+    Icon: LinkedInIcon,
+  },
+  [GivebackActionPlatform.AppStore]: {
+    name: 'App Store',
+    logoUrl: simpleIcon('appstore'),
+    Icon: AppleIcon,
+    forceDark: true,
+  },
+  [GivebackActionPlatform.ChromeWebStore]: {
+    name: 'Chrome Web Store',
+    logoUrl: simpleIcon('googlechrome'),
+    Icon: ChromeIcon,
+  },
+  [GivebackActionPlatform.DailyDev]: {
+    name: 'daily.dev',
+    logoUrl: simpleIcon('dailydotdev'),
+    Icon: DailyIcon,
+    forceDark: true,
+  },
+  [GivebackActionPlatform.EdgeAddons]: {
+    name: 'Edge Add-ons',
+    logoUrl: svglIcon('edge'),
+    Icon: EdgeIcon,
+  },
+  [GivebackActionPlatform.FirefoxAddons]: {
+    name: 'Firefox Add-ons',
+    logoUrl: simpleIcon('firefoxbrowser'),
+    Icon: BrowserGroupIcon,
+  },
+  [GivebackActionPlatform.GooglePlay]: {
+    name: 'Google Play',
+    logoUrl: simpleIcon('googleplay'),
+    Icon: AndroidIcon,
+  },
+  [GivebackActionPlatform.Trustpilot]: {
+    name: 'Trustpilot',
+    logoUrl: simpleIcon('trustpilot'),
+    Icon: StarIcon,
+  },
+  [GivebackActionPlatform.G2]: {
+    name: 'G2',
+    logoUrl: simpleIcon('g2'),
+    Icon: StarIcon,
+  },
+  // Capterra has no logo on either CDN, so it keeps the semantic review glyph.
+  [GivebackActionPlatform.Capterra]: { name: 'Capterra', Icon: StarIcon },
+  [GivebackActionPlatform.ProductHunt]: {
+    name: 'Product Hunt',
+    logoUrl: simpleIcon('producthunt'),
+    Icon: TrendingIcon,
+  },
+  [GivebackActionPlatform.Directory]: { name: 'Directories', Icon: SitesIcon },
+  [GivebackActionPlatform.Medium]: {
+    name: 'Medium',
+    logoUrl: simpleIcon('medium'),
+    Icon: FeatherIcon,
+  },
+  [GivebackActionPlatform.Dev]: {
+    name: 'DEV',
+    logoUrl: simpleIcon('devdotto'),
+    Icon: TerminalIcon,
+  },
+  [GivebackActionPlatform.Blog]: { name: 'Blog', Icon: EarthIcon },
+  [GivebackActionPlatform.Newsletter]: { name: 'Newsletter', Icon: MailIcon },
+  [GivebackActionPlatform.Notion]: {
+    name: 'Notion',
+    logoUrl: simpleIcon('notion'),
+    Icon: DocsIcon,
+  },
+  [GivebackActionPlatform.Website]: { name: 'Website', Icon: EarthIcon },
+  [GivebackActionPlatform.HackerNews]: {
+    name: 'Hacker News',
+    logoUrl: simpleIcon('ycombinator'),
+    Icon: HotIcon,
+  },
+  [GivebackActionPlatform.StackOverflow]: {
+    name: 'Stack Overflow',
+    logoUrl: simpleIcon('stackoverflow'),
+    Icon: StackOverflowIcon,
+  },
+  [GivebackActionPlatform.Discord]: {
+    name: 'Discord',
+    logoUrl: simpleIcon('discord'),
+    Icon: DiscordIcon,
+  },
+  [GivebackActionPlatform.Slack]: {
+    name: 'Slack',
+    logoUrl: svglIcon('slack'),
+    Icon: SlackIcon,
+  },
+  [GivebackActionPlatform.Telegram]: {
+    name: 'Telegram',
+    logoUrl: simpleIcon('telegram'),
+    Icon: TelegramIcon,
+  },
+  [GivebackActionPlatform.IndieHackers]: {
+    name: 'Indie Hackers',
+    logoUrl: simpleIcon('indiehackers'),
+    Icon: MegaphoneIcon,
+  },
+  [GivebackActionPlatform.Forum]: { name: 'Forums', Icon: DiscussIcon },
+  [GivebackActionPlatform.Twitch]: {
+    name: 'Twitch',
+    logoUrl: simpleIcon('twitch'),
+    Icon: PlayIcon,
+  },
+  [GivebackActionPlatform.Podcast]: { name: 'Podcast', Icon: MicrophoneIcon },
+  [GivebackActionPlatform.Event]: { name: 'Events', Icon: CalendarIcon },
+  [GivebackActionPlatform.Wiki]: {
+    name: 'Wikipedia',
+    logoUrl: simpleIcon('wikipedia'),
+    Icon: EarthIcon,
+  },
+};
diff --git a/packages/shared/src/features/giveback/components/ActionCard.tsx b/packages/shared/src/features/giveback/components/ActionCard.tsx
new file mode 100644
index 00000000000..46a899ad589
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/ActionCard.tsx
@@ -0,0 +1,292 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { IconSize } from '../../../components/Icon';
+import type { IconProps } from '../../../components/Icon';
+import type { GivebackAction, GivebackUserAction } from '../types';
+import { GivebackUserActionStatus } from '../types';
+import { formatCompactNumber, formatDonationAmount } from '../utils';
+import { actionPlatformVisual } from '../actionPlatform';
+import {
+  LinkIcon,
+  StarIcon,
+  TimerIcon,
+  VIcon,
+} from '../../../components/icons';
+import { GivebackContributorFaces } from './GivebackContributorFaces';
+
+interface ActionCardProps {
+  action: GivebackAction;
+  userAction?: GivebackUserAction;
+  onSubmit?: (action: GivebackAction) => void;
+}
+
+const getStatus = (userAction?: GivebackUserAction): GivebackUserActionStatus =>
+  userAction?.status ?? GivebackUserActionStatus.NotStarted;
+
+interface PlatformLogoProps {
+  logoUrl?: string;
+  Icon: ComponentType<IconProps>;
+  forceDark?: boolean;
+  isDone: boolean;
+}
+
+// Prefers the real brand logo (an SVG from the logo CDN) and falls back to the
+// internal glyph if there is no logo for the surface or the remote one fails to
+// load — so a tile is never broken or blank. The parent tile already pins the
+// background and applies the dimmed/grayscale "done" treatment.
+const PlatformLogo = ({
+  logoUrl,
+  Icon,
+  forceDark,
+  isDone,
+}: PlatformLogoProps): ReactElement => {
+  const [failed, setFailed] = useState(false);
+
+  if (logoUrl && !failed) {
+    return (
+      <img
+        src={logoUrl}
+        alt=""
+        aria-hidden
+        loading="lazy"
+        onError={() => setFailed(true)}
+        className="size-6 object-contain"
+      />
+    );
+  }
+
+  return (
+    <Icon
+      secondary
+      size={IconSize.Small}
+      className={classNames(!isDone && forceDark && 'brightness-0')}
+    />
+  );
+};
+
+// One sharp, explicit title carries the ask — no competing subtitle. The
+// supporting details (payout, social proof, "Popular") sit in a calm top/bottom
+// frame around it so the card stays easy to scan at a glance.
+export const ActionCard = ({
+  action,
+  userAction,
+  onSubmit,
+}: ActionCardProps): ReactElement => {
+  const status = getStatus(userAction);
+  const isCompleted =
+    status === GivebackUserActionStatus.Approved ||
+    status === GivebackUserActionStatus.CountedTowardGoal;
+  const isInReview =
+    status === GivebackUserActionStatus.Submitted ||
+    status === GivebackUserActionStatus.PendingReview ||
+    status === GivebackUserActionStatus.AutoValidating;
+  // "Done" = you've already acted on it, so it locks into a flat, dimmed claimed
+  // state. Everything else (including expired/rejected) stays clickable to retry.
+  const isDone = isCompleted || isInReview;
+  // Every actionable (not-yet-done) card is clickable — including "just for
+  // love" ones, which open a compliant appreciation view instead of the proof
+  // flow (they carry no reward/donation).
+  const isInteractive = !isDone && !!onSubmit;
+  // Every platform is mapped, but fall back to a neutral link glyph so a card
+  // can never render a blank tile if a new platform slips through unmapped.
+  const {
+    Icon,
+    name: platformName,
+    forceDark,
+    logoUrl,
+  } = actionPlatformVisual[action.platform] ?? {
+    Icon: LinkIcon,
+    name: 'Link',
+  };
+
+  const doneMeta = isCompleted
+    ? { label: 'Done', Icon: VIcon }
+    : { label: 'In review', Icon: TimerIcon };
+
+  const contributorsCount = action.contributorsCount ?? 0;
+  const contributorsLast24h = action.contributorsLast24h ?? 0;
+
+  // The top-right slot shows one of three mutually exclusive states: a status
+  // pill once acted on, a soft "love" tag for no-reward actions, or the payout.
+  const renderTopRightMeta = (): ReactNode => {
+    if (isDone) {
+      return (
+        <FlexRow className="shrink-0 items-center gap-1 text-text-quaternary">
+          <doneMeta.Icon size={IconSize.XSmall} />
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Caption1}
+            className="uppercase tracking-wide"
+          >
+            {doneMeta.label}
+          </Typography>
+        </FlexRow>
+      );
+    }
+
+    if (action.isLoveAction) {
+      return (
+        <Typography
+          bold
+          type={TypographyType.Caption1}
+          className="shrink-0 text-accent-cabbage-default"
+        >
+          Just for love
+        </Typography>
+      );
+    }
+
+    return (
+      <Typography
+        bold
+        type={TypographyType.Title4}
+        className="shrink-0 origin-right tabular-nums text-status-success transition-transform duration-200 group-hover:scale-110 motion-reduce:transform-none"
+      >
+        +{formatDonationAmount(action.donationAmount, action.currency)}
+      </Typography>
+    );
+  };
+
+  const content: ReactNode = (
+    <>
+      <FlexRow className="items-start justify-between gap-3">
+        <FlexRow className="min-w-0 items-center gap-2.5">
+          <span
+            className={classNames(
+              'flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-12 transition-transform duration-200',
+              // The tile is always light, so pin the icon ink dark: colored brand
+              // logos keep their baked-in colors, while monochrome/semantic
+              // glyphs (which follow currentColor) stay visible instead of
+              // disappearing as white-on-white in dark mode.
+              isDone
+                ? 'bg-surface-float text-text-quaternary opacity-40 grayscale'
+                : 'shadow-1 bg-white text-black group-hover:scale-105',
+            )}
+          >
+            <PlatformLogo
+              logoUrl={logoUrl}
+              Icon={Icon}
+              forceDark={forceDark}
+              isDone={isDone}
+            />
+          </span>
+          <FlexCol className="min-w-0 gap-1">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+              bold
+              className="truncate uppercase tracking-wider"
+            >
+              {platformName}
+            </Typography>
+            {action.isTrending && (
+              <FlexRow className="w-fit items-center gap-1 text-accent-cabbage-default">
+                <StarIcon secondary size={IconSize.XXSmall} />
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Caption2}
+                  bold
+                  className="uppercase tracking-wide"
+                >
+                  Popular
+                </Typography>
+              </FlexRow>
+            )}
+          </FlexCol>
+        </FlexRow>
+        {renderTopRightMeta()}
+      </FlexRow>
+
+      <Typography
+        bold
+        tag={TypographyTag.H3}
+        type={TypographyType.Callout}
+        color={isDone ? TypographyColor.Quaternary : undefined}
+        className={classNames('line-clamp-2', isDone && 'line-through')}
+      >
+        {action.title}
+      </Typography>
+
+      {contributorsCount > 0 && (
+        <FlexRow className="mt-auto min-w-0 items-center gap-2">
+          <GivebackContributorFaces
+            avatars={action.contributorAvatars ?? []}
+            totalCount={contributorsCount}
+            sizeClassName="size-5"
+          />
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+            className="min-w-0 truncate"
+          >
+            {formatCompactNumber(contributorsCount)} contributed
+            {contributorsLast24h > 0 &&
+              ` · ${formatCompactNumber(contributorsLast24h)} today`}
+          </Typography>
+        </FlexRow>
+      )}
+    </>
+  );
+
+  if (isInteractive) {
+    return (
+      <button
+        type="button"
+        aria-label={
+          action.isLoveAction
+            ? `Show some love: ${action.title}`
+            : `Submit proof for ${action.title}`
+        }
+        onClick={() => onSubmit?.(action)}
+        className={classNames(
+          'group relative flex h-full w-full flex-col gap-3 overflow-hidden rounded-16 p-4 text-left transition-all duration-200 hover:-translate-y-0.5 hover:shadow-2 active:translate-y-0 active:scale-[0.99] motion-reduce:transform-none',
+          action.isLoveAction
+            ? 'bg-accent-cabbage-flat'
+            : 'bg-surface-float hover:bg-surface-hover',
+        )}
+      >
+        {/* Glossy sheen that sweeps across on hover — a small reward flourish. */}
+        <span
+          aria-hidden
+          className="via-white/10 pointer-events-none absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent to-transparent transition-transform duration-700 ease-out group-hover:translate-x-full motion-reduce:hidden"
+        />
+        {content}
+      </button>
+    );
+  }
+
+  // Already acted on: a flat "claimed" state. No solid fill — just a dashed
+  // outline, a grayscale icon, a struck-through title and a vivid status pill —
+  // so it's unmistakably distinct from the actionable, tappable cards.
+  if (isDone) {
+    return (
+      <div
+        aria-label={`${action.title} — ${doneMeta.label}`}
+        className="flex h-full w-full flex-col gap-3 rounded-16 border border-dashed border-border-subtlest-tertiary bg-transparent p-4"
+      >
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={classNames(
+        'flex h-full w-full flex-col gap-3 rounded-16 p-4',
+        action.isLoveAction ? 'bg-accent-cabbage-flat' : 'bg-surface-float',
+      )}
+    >
+      {content}
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/ActionCatalog.tsx b/packages/shared/src/features/giveback/components/ActionCatalog.tsx
new file mode 100644
index 00000000000..0ad6da01d56
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/ActionCatalog.tsx
@@ -0,0 +1,493 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { useGivebackContext } from '../GivebackContext';
+import { useGivebackNav } from '../GivebackNavContext';
+import type { GivebackAction, GivebackActionCategoryFilter } from '../types';
+import { GivebackActionCategory } from '../types';
+import { actionCategoryLabels } from '../statusLabels';
+import {
+  ArrowIcon,
+  GiftIcon,
+  InfoIcon,
+  MedalBadgeIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { ButtonIconPosition } from '../../../components/buttons/common';
+import { ActionCard } from './ActionCard';
+import { GivebackFilterChip } from './GivebackFilterChip';
+import {
+  GivebackAvatar,
+  GivebackContributorFaces,
+} from './GivebackContributorFaces';
+import { GivebackSubmissionModal } from './GivebackSubmissionModal';
+import { GivebackSection } from './GivebackSection';
+import { GivebackLiveTicker } from './GivebackLiveTicker';
+import { formatDonationAmount } from '../utils';
+import {
+  useCountUp,
+  useInView,
+  usePrefersReducedMotion,
+} from '../useGivebackMotion';
+
+type SortKey = 'recommended' | 'value-desc' | 'value-asc' | 'newest';
+
+const sortOptions: [SortKey, string][] = [
+  ['recommended', 'Recommended'],
+  ['value-desc', 'Highest value'],
+  ['value-asc', 'Lowest value'],
+  ['newest', 'Newest'],
+];
+
+// Keep the initial grid short so the tab opens scannable; the rest expand on
+// demand. 12 fills four clean rows on the 3-column breakpoint (six on the
+// 2-column one).
+const INITIAL_VISIBLE_ACTIONS = 12;
+
+const sortActions = (
+  actions: GivebackAction[],
+  sort: SortKey,
+): GivebackAction[] => {
+  if (sort === 'value-desc') {
+    return [...actions].sort((a, b) => b.donationAmount - a.donationAmount);
+  }
+  if (sort === 'value-asc') {
+    return [...actions].sort((a, b) => a.donationAmount - b.donationAmount);
+  }
+  if (sort === 'newest') {
+    // No timestamps in the mock layer; treat later catalog entries as newer.
+    return [...actions].reverse();
+  }
+  // "Recommended" leads with popular actions, then by real-time momentum so the
+  // catalog surfaces what the community is doing right now.
+  return [...actions].sort((a, b) => {
+    if (!!a.isTrending !== !!b.isTrending) {
+      return a.isTrending ? -1 : 1;
+    }
+    return (b.contributorsLast24h ?? 0) - (a.contributorsLast24h ?? 0);
+  });
+};
+
+export const ActionCatalog = (): ReactElement => {
+  const {
+    actions,
+    campaign,
+    donationAccounting,
+    filteredActions,
+    leaderboard,
+    levels,
+    loveActions,
+    topContributors,
+    userActions,
+    userProfile,
+    selectedCategory,
+    setSelectedCategory,
+  } = useGivebackContext();
+  const { setActiveTab } = useGivebackNav();
+  const [submissionAction, setSubmissionAction] =
+    useState<GivebackAction | null>(null);
+  const [sort, setSort] = useState<SortKey>('recommended');
+  const [showAllActions, setShowAllActions] = useState(false);
+  const filtersRef = useRef<HTMLDivElement>(null);
+  const didMountRef = useRef(false);
+
+  // Re-collapse the grid whenever the filter or sort changes so a new view
+  // always opens to the short, scannable list. Also re-anchor the viewport to
+  // the filter row: when a filter shrinks the list the page height collapses,
+  // and without this the browser strands the scroll position in empty space
+  // below the results (the "jump to the bottom" layout shift).
+  useEffect(() => {
+    setShowAllActions(false);
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+    const node = filtersRef.current;
+    if (node && typeof node.scrollIntoView === 'function') {
+      node.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [selectedCategory, sort]);
+
+  const categories = useMemo(
+    () =>
+      Array.from(
+        new Set([...actions, ...loveActions].map((action) => action.category)),
+      ),
+    [actions, loveActions],
+  );
+  const userActionById = useMemo(
+    () =>
+      new Map(
+        userActions.map((userAction) => [userAction.actionId, userAction]),
+      ),
+    [userActions],
+  );
+  const sortedActions = useMemo(
+    () => sortActions(filteredActions, sort),
+    [filteredActions, sort],
+  );
+
+  // Love actions live in the same catalog but are non-paid, so they render as a
+  // highlighted "just for love" group. This group sits outside the filters and
+  // is always visible below the paid actions, whatever category is selected.
+  const isLoveCategory =
+    selectedCategory === GivebackActionCategory.CommunityLove;
+  const donationToRender = isLoveCategory ? [] : sortedActions;
+  const visibleDonationActions = showAllActions
+    ? donationToRender
+    : donationToRender.slice(0, INITIAL_VISIBLE_ACTIONS);
+  const hiddenActionsCount =
+    donationToRender.length - visibleDonationActions.length;
+  const loveToRender = loveActions;
+
+  // One simple, trust-by-default number: everything you've earned counts the
+  // moment you act. Rejected submissions are the only thing we subtract.
+  const earnedContribution =
+    donationAccounting.unlockedDonationAmount -
+    donationAccounting.rejectedDonationAmount;
+
+  const leaderAvatars = topContributors.map((person) => person.avatar);
+
+  // Personal standing for the "Your contribution" card: pull the viewer's row
+  // from the same board shown on Impact, plus the next reward they're working
+  // toward, so the card answers "where am I, what have I earned, what's next".
+  const currentUser = leaderboard.find((entry) => entry.isCurrentUser);
+  const nextLevel = levels.find(
+    (level) =>
+      level.requiredApprovedAmount > userProfile.approvedContributionAmount,
+  );
+  const amountToNextReward = nextLevel
+    ? Math.max(
+        0,
+        nextLevel.requiredApprovedAmount -
+          userProfile.approvedContributionAmount,
+      )
+    : 0;
+
+  // Live "developers contributed this week" counter. It starts at the real
+  // total and trickles upward on a steady cadence so the hub feels like it's
+  // moving in real time — each tick stands in for a fresh community action. The
+  // number rolls up with a count-up animation; reduced-motion users just see the
+  // static full total.
+  const reducedMotion = usePrefersReducedMotion();
+  const { ref: backersRef, inView: backersInView } =
+    useInView<HTMLSpanElement>();
+  const [liveBackers, setLiveBackers] = useState(campaign.backersCount);
+
+  useEffect(() => {
+    setLiveBackers(campaign.backersCount);
+  }, [campaign.backersCount]);
+
+  useEffect(() => {
+    if (reducedMotion || typeof window === 'undefined') {
+      return undefined;
+    }
+    const timer = window.setInterval(
+      () => setLiveBackers((current) => current + 1),
+      3600,
+    );
+    return () => window.clearInterval(timer);
+  }, [reducedMotion]);
+
+  const animatedBackers = useCountUp(liveBackers, backersInView);
+
+  return (
+    <GivebackSection id="giveback-actions">
+      <FlexCol className="mb-4 gap-3 border-b border-border-subtlest-tertiary pb-8 pt-4">
+        <button
+          type="button"
+          onClick={() => setActiveTab('impact')}
+          className="group flex w-full items-center justify-between gap-4 text-left"
+        >
+          <FlexRow className="min-w-0 items-center gap-3">
+            {leaderAvatars.length > 0 && (
+              <GivebackContributorFaces
+                avatars={leaderAvatars}
+                totalCount={campaign.backersCount}
+                sizeClassName="size-8"
+              />
+            )}
+            <FlexCol className="min-w-0 gap-0.5">
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+                className="truncate"
+              >
+                <span
+                  ref={backersRef}
+                  className="font-bold tabular-nums text-text-primary"
+                >
+                  {animatedBackers.toLocaleString('en-US')}
+                </span>{' '}
+                developers contributed this week
+              </Typography>
+            </FlexCol>
+          </FlexRow>
+
+          <FlexRow className="shrink-0 items-center gap-1 font-bold text-white typo-footnote">
+            See leaderboard
+            <span
+              aria-hidden
+              className="transition-transform duration-200 group-hover:translate-x-0.5"
+            >
+              ›
+            </span>
+          </FlexRow>
+        </button>
+
+        <GivebackLiveTicker />
+      </FlexCol>
+
+      <FlexRow className="flex-wrap items-center gap-x-5 gap-y-4">
+        {currentUser && (
+          <div className="relative shrink-0">
+            <GivebackAvatar
+              src={currentUser.avatar}
+              sizeClassName="size-14"
+              className="ring-2 ring-accent-cabbage-default"
+            />
+            <span className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-accent-cabbage-default px-2 py-0.5 font-bold uppercase tracking-wide text-white ring-2 ring-background-default typo-caption2">
+              Lvl {userProfile.currentLevel}
+            </span>
+          </div>
+        )}
+
+        <FlexCol className="min-w-0 flex-1 gap-1">
+          <FlexRow className="items-center gap-1">
+            <Typography
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+              bold
+              className="uppercase tracking-wider"
+            >
+              Your contribution
+            </Typography>
+            <span className="group/info relative flex">
+              <button
+                type="button"
+                aria-label="How your contribution is counted"
+                className="flex text-text-tertiary transition-colors hover:text-text-primary group-focus-within/info:text-text-primary"
+              >
+                <InfoIcon size={IconSize.Size16} />
+              </button>
+              <span
+                role="tooltip"
+                className="pointer-events-none absolute left-0 top-full z-3 mt-2 w-56 rounded-10 border border-border-subtlest-tertiary bg-background-default p-2.5 text-left opacity-0 shadow-2 transition-opacity duration-150 group-focus-within/info:opacity-100 group-hover/info:opacity-100"
+              >
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Tertiary}
+                >
+                  Counts the moment you act, because we trust you. If a
+                  submission is rejected, we&apos;ll subtract it.
+                </Typography>
+              </span>
+            </span>
+          </FlexRow>
+          <FlexRow className="items-baseline gap-1.5">
+            <Typography
+              bold
+              type={TypographyType.Title2}
+              className="tabular-nums text-status-success"
+            >
+              {formatDonationAmount(earnedContribution, 'USD')}
+            </Typography>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+            >
+              unlocked for your causes
+            </Typography>
+          </FlexRow>
+          {currentUser && (
+            <FlexRow className="flex-wrap items-center gap-x-3 gap-y-1">
+              <FlexRow className="items-center gap-1 font-bold text-accent-cabbage-default typo-caption1 [&_svg]:size-4">
+                <MedalBadgeIcon />
+                Rank #{currentUser.rank}
+              </FlexRow>
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Caption1}
+                color={TypographyColor.Tertiary}
+              >
+                · {userProfile.actionsCompletedCount} actions taken
+              </Typography>
+            </FlexRow>
+          )}
+        </FlexCol>
+
+        {nextLevel?.reward && (
+          <FlexCol className="shrink-0 items-end gap-0.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption2}
+              color={TypographyColor.Tertiary}
+              bold
+              className="uppercase tracking-wider"
+            >
+              Next reward
+            </Typography>
+            <FlexRow className="items-center gap-1.5 text-accent-cheese-default [&_svg]:size-4">
+              <GiftIcon />
+              <Typography bold type={TypographyType.Footnote}>
+                {nextLevel.reward.title}
+              </Typography>
+            </FlexRow>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              bold
+              className="tabular-nums text-accent-cabbage-default"
+            >
+              {formatDonationAmount(amountToNextReward, 'USD')} to go
+            </Typography>
+          </FlexCol>
+        )}
+      </FlexRow>
+
+      <FlexRow
+        ref={filtersRef}
+        className="scroll-mt-20 flex-wrap items-center justify-between gap-3"
+      >
+        <FlexRow className="flex-wrap gap-2">
+          <GivebackFilterChip
+            isSelected={selectedCategory === 'all'}
+            label="All"
+            onClick={() => setSelectedCategory('all')}
+          />
+          {categories.map((category) => (
+            <GivebackFilterChip
+              key={category}
+              isSelected={selectedCategory === category}
+              label={actionCategoryLabels[category]}
+              onClick={() =>
+                setSelectedCategory(category as GivebackActionCategoryFilter)
+              }
+            />
+          ))}
+        </FlexRow>
+
+        <div className="relative shrink-0">
+          <select
+            aria-label="Sort actions"
+            value={sort}
+            onChange={(event) => setSort(event.target.value as SortKey)}
+            className="h-8 cursor-pointer appearance-none rounded-10 bg-surface-float pl-3 pr-9 font-medium text-text-primary typo-footnote hover:bg-surface-hover"
+          >
+            {sortOptions.map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+          <ArrowIcon
+            size={IconSize.XSmall}
+            className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 rotate-180 text-text-tertiary"
+          />
+        </div>
+      </FlexRow>
+
+      <FlexCol className="gap-6">
+        {donationToRender.length > 0 && (
+          <FlexCol className="gap-4">
+            <div className="grid gap-3 tablet:grid-cols-2 laptop:grid-cols-3">
+              {visibleDonationActions.map((action) => (
+                <ActionCard
+                  key={action.id}
+                  action={action}
+                  userAction={userActionById.get(action.id)}
+                  onSubmit={setSubmissionAction}
+                />
+              ))}
+            </div>
+            {donationToRender.length > INITIAL_VISIBLE_ACTIONS && (
+              <FlexRow className="mt-3 justify-center">
+                <Button
+                  type="button"
+                  size={ButtonSize.Medium}
+                  variant={ButtonVariant.Secondary}
+                  icon={
+                    <ArrowIcon
+                      className={showAllActions ? undefined : 'rotate-180'}
+                    />
+                  }
+                  iconPosition={ButtonIconPosition.Right}
+                  onClick={() => setShowAllActions((value) => !value)}
+                >
+                  {showAllActions
+                    ? 'Show fewer'
+                    : `Show more actions (${hiddenActionsCount})`}
+                </Button>
+              </FlexRow>
+            )}
+          </FlexCol>
+        )}
+
+        {donationToRender.length === 0 && !isLoveCategory && (
+          <FlexCol className="items-center gap-1 py-10 text-center">
+            <Typography bold type={TypographyType.Callout}>
+              No actions match this filter
+            </Typography>
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+            >
+              Try another filter.
+            </Typography>
+          </FlexCol>
+        )}
+
+        {loveToRender.length > 0 && (
+          <FlexCol className="gap-3">
+            <FlexCol className="gap-0.5">
+              <Typography
+                bold
+                type={TypographyType.Footnote}
+                className="text-accent-cabbage-default"
+              >
+                Just for love
+              </Typography>
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Tertiary}
+              >
+                We can&apos;t pay for these, but we&apos;d genuinely appreciate
+                them.
+              </Typography>
+            </FlexCol>
+            <div className="grid gap-3 tablet:grid-cols-2 laptop:grid-cols-3">
+              {loveToRender.map((action) => (
+                <ActionCard
+                  key={action.id}
+                  action={action}
+                  userAction={userActionById.get(action.id)}
+                  onSubmit={setSubmissionAction}
+                />
+              ))}
+            </div>
+          </FlexCol>
+        )}
+      </FlexCol>
+
+      {submissionAction && (
+        <GivebackSubmissionModal
+          action={submissionAction}
+          onClose={() => setSubmissionAction(null)}
+        />
+      )}
+    </GivebackSection>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/BudgetRedirectStory.tsx b/packages/shared/src/features/giveback/components/BudgetRedirectStory.tsx
new file mode 100644
index 00000000000..e98d5c5595e
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/BudgetRedirectStory.tsx
@@ -0,0 +1,52 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { useGivebackContext } from '../GivebackContext';
+import { formatDonationAmount } from '../utils';
+import { GivebackSection } from './GivebackSection';
+import { GivebackHeadline } from './GivebackHeadline';
+import { GivebackMascot, GivebackMascotMood } from './GivebackMascot';
+
+interface BudgetRedirectStoryProps {
+  headline: { title: string; highlight: string };
+}
+
+// "Why we do it" — kept short and emotional. The headline + reason stack in a
+// left column with the charm beside both as the "genie" who grants the
+// community's wishes, so the row stays tight with no empty space top/bottom.
+export const BudgetRedirectStory = ({
+  headline,
+}: BudgetRedirectStoryProps): ReactElement => {
+  const { campaign } = useGivebackContext();
+
+  return (
+    <GivebackSection id="giveback-why">
+      <FlexRow className="flex-col-reverse items-center gap-6 tablet:flex-row tablet:items-start tablet:gap-10">
+        <FlexCol className="gap-4 tablet:flex-1">
+          <GivebackHeadline {...headline} />
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Title3}
+            color={TypographyColor.Secondary}
+            className="max-w-md"
+          >
+            {formatDonationAmount(campaign.goalAmount, campaign.currency)} goes
+            straight to the causes you pick: scholarships, open source, and
+            access to tech. We could have spent it on ads. We would rather let
+            the community decide what its work is worth.
+          </Typography>
+        </FlexCol>
+        <GivebackMascot
+          mood={GivebackMascotMood.Thoughtful}
+          className="shrink-0 tablet:ml-auto tablet:items-end"
+        />
+      </FlexRow>
+    </GivebackSection>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/CauseEmblem.tsx b/packages/shared/src/features/giveback/components/CauseEmblem.tsx
new file mode 100644
index 00000000000..2fe53741370
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/CauseEmblem.tsx
@@ -0,0 +1,63 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { SparkleIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import type { GivebackCause } from '../types';
+
+// Brand-tinted emblems so each cause reads as its own tile, Lemonade-style.
+const emblemAccents = [
+  'bg-accent-cabbage-flat text-accent-cabbage-default',
+  'bg-accent-avocado-flat text-accent-avocado-default',
+  'bg-accent-onion-flat text-accent-onion-default',
+  'bg-accent-bacon-flat text-accent-bacon-default',
+];
+
+interface CauseEmblemProps {
+  cause: GivebackCause;
+  /** Position in the list, used to pick a stable brand tint for the fallback. */
+  index: number;
+  className?: string;
+}
+
+// Shows the cause's real logo on a light tile so each card reads as the actual
+// nonprofit. Falls back to a brand-tinted sparkle emblem if the logo is missing
+// or fails to load (kept in state so we don't mutate the DOM node directly).
+export const CauseEmblem = ({
+  cause,
+  index,
+  className,
+}: CauseEmblemProps): ReactElement => {
+  const [failed, setFailed] = useState(false);
+
+  if (cause.logoUrl && !failed) {
+    return (
+      <span
+        className={classNames(
+          'flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-16 bg-white',
+          className,
+        )}
+      >
+        <img
+          src={cause.logoUrl}
+          alt=""
+          loading="lazy"
+          onError={() => setFailed(true)}
+          className="size-7 object-contain"
+        />
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className={classNames(
+        'flex size-11 shrink-0 items-center justify-center rounded-16',
+        emblemAccents[index % emblemAccents.length],
+        className,
+      )}
+    >
+      <SparkleIcon size={IconSize.Medium} />
+    </span>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/CauseSelection.tsx b/packages/shared/src/features/giveback/components/CauseSelection.tsx
new file mode 100644
index 00000000000..055696c2a77
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/CauseSelection.tsx
@@ -0,0 +1,283 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import {
+  ArrowIcon,
+  OpenLinkIcon,
+  PlusIcon,
+  VIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { useGivebackContext } from '../GivebackContext';
+import type { GivebackCause } from '../types';
+import { CauseSelectionModal } from './CauseSelectionModal';
+import { CauseEmblem } from './CauseEmblem';
+import { GivebackFilterChip } from './GivebackFilterChip';
+
+// Synthetic first filter that shows our hand-picked developer causes.
+const RECOMMENDED_FILTER = 'recommended';
+
+interface CauseSelectionProps {
+  /** Called when the visitor confirms their causes (onboarding or settings). */
+  onContinue: () => void;
+  /** Label for the confirm button. Defaults to "Continue" for onboarding. */
+  continueLabel?: string;
+  /**
+   * Pin the confirm CTA to a sticky bottom bar (like the level bar) so it stays
+   * one tap away while scrolling the cause list. Used for the onboarding step.
+   */
+  stickyContinue?: boolean;
+}
+
+export const CauseSelection = ({
+  onContinue,
+  continueLabel = 'Continue',
+  stickyContinue = false,
+}: CauseSelectionProps): ReactElement => {
+  const { causes, suggestedCauses, toggleCause, userProfile } =
+    useGivebackContext();
+  const [isSuggestOpen, setIsSuggestOpen] = useState(false);
+
+  const isSelected = (cause: GivebackCause): boolean =>
+    userProfile.selectedCauseIds.includes(cause.id);
+
+  const selectedCount = causes.filter(isSelected).length;
+
+  // Lead with a "Recommended" filter (our hand-picked developer causes), then
+  // one chip per cause category so people can browse by what they care about.
+  const categoryOptions = Array.from(
+    new Set(
+      causes
+        .map((cause) => cause.category)
+        .filter((category): category is string => Boolean(category)),
+    ),
+  );
+  const [activeFilter, setActiveFilter] = useState<string>(RECOMMENDED_FILTER);
+  const filtersRef = useRef<HTMLDivElement>(null);
+  const didMountRef = useRef(false);
+
+  // Re-anchor the viewport to the filter row when the category changes: a
+  // filter that shrinks the grid collapses the page height, and without this
+  // the browser strands the scroll position in empty space below the results
+  // (the "jump to the bottom" layout shift).
+  useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+    const node = filtersRef.current;
+    if (node && typeof node.scrollIntoView === 'function') {
+      node.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [activeFilter]);
+
+  const indexedCauses = causes.map((cause, index) => ({ cause, index }));
+  const visibleCauses = indexedCauses.filter(({ cause }) =>
+    activeFilter === RECOMMENDED_FILTER
+      ? cause.recommended
+      : cause.category === activeFilter,
+  );
+
+  return (
+    <FlexCol className="gap-6">
+      <Typography
+        tag={TypographyTag.P}
+        type={TypographyType.Callout}
+        color={TypographyColor.Secondary}
+        className="max-w-2xl"
+      >
+        Pick as many as you like. daily.dev funds every donation, and you can
+        change them anytime.
+      </Typography>
+
+      <FlexCol id="giveback-causes" className="scroll-mt-16 gap-6">
+        <FlexCol className="gap-4">
+          <FlexRow ref={filtersRef} className="scroll-mt-20 flex-wrap gap-2">
+            <GivebackFilterChip
+              isSelected={activeFilter === RECOMMENDED_FILTER}
+              label="Recommended"
+              onClick={() => setActiveFilter(RECOMMENDED_FILTER)}
+            />
+            {categoryOptions.map((category) => (
+              <GivebackFilterChip
+                key={category}
+                isSelected={activeFilter === category}
+                label={category}
+                onClick={() => setActiveFilter(category)}
+              />
+            ))}
+          </FlexRow>
+
+          <div className="grid grid-cols-2 gap-3 tablet:grid-cols-3">
+            {visibleCauses.map(({ cause, index }) => {
+              const selected = isSelected(cause);
+
+              return (
+                <div
+                  key={cause.id}
+                  className={classNames(
+                    'group relative flex flex-col gap-3 rounded-16 border p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-2 active:translate-y-0 active:scale-[0.99] motion-reduce:transform-none',
+                    selected
+                      ? 'border-accent-cabbage-default bg-accent-cabbage-flat'
+                      : 'border-border-subtlest-tertiary hover:bg-surface-hover',
+                  )}
+                >
+                  {/* Full-card overlay handles the toggle so the "Learn more"
+                      link can live inside the box without nesting interactives. */}
+                  <button
+                    type="button"
+                    aria-pressed={selected}
+                    aria-label={`${selected ? 'Deselect' : 'Select'} ${
+                      cause.name
+                    }`}
+                    onClick={() => toggleCause(cause.id)}
+                    className="absolute inset-0 z-0 rounded-16"
+                  />
+
+                  <FlexRow className="pointer-events-none relative z-1 items-start justify-between gap-2">
+                    <CauseEmblem
+                      cause={cause}
+                      index={index}
+                      className="transition-transform duration-200 group-hover:scale-105"
+                    />
+                    <span
+                      className={classNames(
+                        'flex size-5 shrink-0 items-center justify-center rounded-full transition-colors',
+                        selected
+                          ? 'bg-accent-cabbage-default text-white'
+                          : 'border border-border-subtlest-secondary',
+                      )}
+                    >
+                      {selected && (
+                        <VIcon
+                          secondary
+                          size={IconSize.XXSmall}
+                          className="motion-safe:animate-reward-pop"
+                        />
+                      )}
+                    </span>
+                  </FlexRow>
+
+                  <FlexCol className="pointer-events-none relative z-1 min-w-0 flex-1 gap-1">
+                    <Typography bold type={TypographyType.Callout}>
+                      {cause.name}
+                    </Typography>
+                    {cause.category && (
+                      <Typography
+                        tag={TypographyTag.Span}
+                        type={TypographyType.Caption1}
+                        color={TypographyColor.Tertiary}
+                      >
+                        {cause.category}
+                      </Typography>
+                    )}
+                    <Typography
+                      type={TypographyType.Caption1}
+                      color={TypographyColor.Tertiary}
+                      className="line-clamp-2 pt-1"
+                    >
+                      {cause.description}
+                    </Typography>
+                  </FlexCol>
+
+                  <a
+                    href={cause.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(event) => event.stopPropagation()}
+                    className="group/learn relative z-1 inline-flex w-fit items-center gap-1 font-bold text-text-link underline-offset-2 typo-footnote hover:underline focus-visible:underline"
+                  >
+                    Learn more
+                    <OpenLinkIcon
+                      size={IconSize.XSmall}
+                      className="transition-transform duration-200 group-hover/learn:-translate-y-0.5 group-hover/learn:translate-x-0.5"
+                    />
+                  </a>
+                </div>
+              );
+            })}
+          </div>
+        </FlexCol>
+
+        {suggestedCauses.length > 0 && (
+          <FlexRow className="flex-wrap items-center gap-2">
+            <Typography
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+            >
+              Your suggestions:
+            </Typography>
+            {suggestedCauses.map((cause) => (
+              <FlexRow
+                key={cause.id}
+                className="items-center gap-1.5 rounded-8 bg-surface-float px-2.5 py-1"
+              >
+                <Typography type={TypographyType.Caption1} bold>
+                  {cause.name}
+                </Typography>
+                <Typography
+                  type={TypographyType.Caption2}
+                  color={TypographyColor.Tertiary}
+                >
+                  pending review
+                </Typography>
+              </FlexRow>
+            ))}
+          </FlexRow>
+        )}
+
+        <FlexRow className="flex-wrap items-center justify-between gap-3">
+          {!stickyContinue && (
+            <Typography
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+            >
+              {selectedCount} selected
+            </Typography>
+          )}
+          <Button
+            type="button"
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Float}
+            icon={<PlusIcon />}
+            onClick={() => setIsSuggestOpen(true)}
+          >
+            Suggest a cause
+          </Button>
+        </FlexRow>
+
+        {!stickyContinue && (
+          <Button
+            type="button"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Large}
+            icon={<ArrowIcon className="rotate-90" />}
+            iconPosition={ButtonIconPosition.Right}
+            disabled={selectedCount === 0}
+            onClick={onContinue}
+            className="w-full tablet:w-fit"
+          >
+            {continueLabel}
+          </Button>
+        )}
+
+        {isSuggestOpen && (
+          <CauseSelectionModal onClose={() => setIsSuggestOpen(false)} />
+        )}
+      </FlexCol>
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/CauseSelectionModal.tsx b/packages/shared/src/features/giveback/components/CauseSelectionModal.tsx
new file mode 100644
index 00000000000..2c2780a049b
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/CauseSelectionModal.tsx
@@ -0,0 +1,180 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { RootPortal } from '../../../components/tooltips/Portal';
+import { useGivebackContext } from '../GivebackContext';
+
+interface CauseSelectionModalProps {
+  onClose: () => void;
+}
+
+// Focused "suggest a cause" modal. The full cause catalog is now the card grid
+// on the Causes tab, so this is only the lightweight suggestion form.
+export const CauseSelectionModal = ({
+  onClose,
+}: CauseSelectionModalProps): ReactElement => {
+  const { suggestedCauses, suggestCause } = useGivebackContext();
+  const [name, setName] = useState('');
+  const [url, setUrl] = useState('');
+  const [note, setNote] = useState('');
+
+  const onSuggest = () => {
+    suggestCause({ name, url, note });
+    setName('');
+    setUrl('');
+    setNote('');
+    onClose();
+  };
+
+  return (
+    <RootPortal>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
+      <div
+        onClick={(event) => {
+          if (event.target === event.currentTarget) {
+            onClose();
+          }
+        }}
+        className="fixed inset-0 z-modal flex items-center justify-center bg-overlay-primary-pepper px-4 backdrop-blur-sm"
+      >
+        <section
+          aria-modal="true"
+          role="dialog"
+          aria-labelledby="giveback-suggest-title"
+          className="relative flex w-full max-w-[32rem] flex-col overflow-hidden rounded-24 border border-border-subtlest-secondary bg-background-default shadow-2"
+        >
+          <div
+            aria-hidden
+            className="bg-accent-cabbage-default/20 pointer-events-none absolute -right-20 -top-20 size-56 rounded-full blur-3xl"
+          />
+
+          <FlexCol className="relative gap-2 p-5 pb-3 tablet:px-6 tablet:pt-6">
+            <Typography
+              bold
+              id="giveback-suggest-title"
+              tag={TypographyTag.H2}
+              type={TypographyType.Title3}
+            >
+              Suggest a cause
+            </Typography>
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Tertiary}
+            >
+              Missing a cause you care about? Tell us. We review every
+              suggestion before it goes live.
+            </Typography>
+          </FlexCol>
+
+          <FlexCol className="relative gap-3 px-5 py-3 tablet:px-6">
+            <div className="grid gap-3 tablet:grid-cols-2">
+              <label
+                htmlFor="giveback-cause-name"
+                className="flex flex-col gap-2"
+              >
+                <Typography bold type={TypographyType.Footnote}>
+                  Cause name
+                </Typography>
+                <input
+                  id="giveback-cause-name"
+                  className="rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+                  value={name}
+                  onChange={(event) => setName(event.target.value)}
+                />
+              </label>
+
+              <label
+                htmlFor="giveback-cause-url"
+                className="flex flex-col gap-2"
+              >
+                <Typography bold type={TypographyType.Footnote}>
+                  Website
+                </Typography>
+                <input
+                  id="giveback-cause-url"
+                  className="rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+                  placeholder="https://..."
+                  value={url}
+                  onChange={(event) => setUrl(event.target.value)}
+                />
+              </label>
+            </div>
+
+            <label
+              htmlFor="giveback-cause-note"
+              className="flex flex-col gap-2"
+            >
+              <Typography bold type={TypographyType.Footnote}>
+                Why this cause?
+              </Typography>
+              <textarea
+                id="giveback-cause-note"
+                className="min-h-20 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+                value={note}
+                onChange={(event) => setNote(event.target.value)}
+              />
+            </label>
+
+            {suggestedCauses.length > 0 && (
+              <FlexCol className="gap-1 border-t border-border-subtlest-tertiary pt-3">
+                <Typography
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Tertiary}
+                >
+                  Already suggested
+                </Typography>
+                {suggestedCauses.map((cause) => (
+                  <FlexRow
+                    key={cause.id}
+                    className="items-center justify-between gap-3"
+                  >
+                    <Typography type={TypographyType.Footnote}>
+                      {cause.name}
+                    </Typography>
+                    <Typography
+                      type={TypographyType.Caption1}
+                      color={TypographyColor.Tertiary}
+                    >
+                      pending review
+                    </Typography>
+                  </FlexRow>
+                ))}
+              </FlexCol>
+            )}
+          </FlexCol>
+
+          <FlexRow className="items-center justify-end gap-2 border-t border-border-subtlest-tertiary p-4 tablet:px-6">
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Tertiary}
+              onClick={onClose}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Primary}
+              disabled={!name.trim() || !url.trim()}
+              onClick={onSuggest}
+            >
+              Suggest cause
+            </Button>
+          </FlexRow>
+        </section>
+      </div>
+    </RootPortal>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/CommunityGoalProgress.tsx b/packages/shared/src/features/giveback/components/CommunityGoalProgress.tsx
new file mode 100644
index 00000000000..a6b47274085
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/CommunityGoalProgress.tsx
@@ -0,0 +1,209 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { ProgressBar } from '../../../components/fields/ProgressBar';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { useGivebackContext } from '../GivebackContext';
+import { useCountUp, useInView } from '../useGivebackMotion';
+import { formatDonationAmount, getGoalProgressPercentage } from '../utils';
+import { GivebackSection } from './GivebackSection';
+import { GivebackMeterShine } from './GivebackMeterShine';
+import { SponsorBudgetBar } from './SponsorBudgetBar';
+import { GivebackSponsorModal } from './GivebackSponsorModal';
+
+const milestones = [25, 50, 75, 100];
+
+export const CommunityGoalProgress = (): ReactElement => {
+  const { campaign } = useGivebackContext();
+  const [isSponsorModalOpen, setIsSponsorModalOpen] = useState(false);
+  const percentage = getGoalProgressPercentage(
+    campaign.approvedAmount,
+    campaign.goalAmount,
+  );
+  // Bar (and milestone dots) grow from 0 the first time the meter scrolls in,
+  // so the money raised visibly "fills up". The numeric label counts up to the
+  // exact amount, including when the pot grows after an action lands.
+  const { ref: meterRef, inView } = useInView<HTMLDivElement>();
+  const animatedPercentage = useCountUp(Math.round(percentage), inView);
+  const animatedAmount = useCountUp(campaign.approvedAmount, inView, 900);
+
+  const sponsorGoalShare = campaign.goalAmount
+    ? Math.round((campaign.sponsoredAmount / campaign.goalAmount) * 100)
+    : 0;
+  const hasSponsors = campaign.sponsoredAmount > 0;
+
+  return (
+    <GivebackSection id="giveback-goal" title="Funding progress">
+      <FlexCol className="gap-2">
+        <div
+          className={classNames(
+            'grid items-start gap-8',
+            hasSponsors && 'laptop:grid-cols-2 laptop:gap-12',
+          )}
+        >
+          <FlexCol className="gap-6">
+            <FlexCol className="gap-3">
+              <FlexRow className="items-end gap-2">
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Mega1}
+                  bold
+                  className="tabular-nums"
+                >
+                  {formatDonationAmount(animatedAmount, campaign.currency)}
+                </Typography>
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Title4}
+                  color={TypographyColor.Tertiary}
+                  className="pb-1"
+                >
+                  pledged of{' '}
+                  {formatDonationAmount(campaign.goalAmount, campaign.currency)}
+                </Typography>
+              </FlexRow>
+
+              <div className="relative" ref={meterRef}>
+                <ProgressBar
+                  percentage={animatedPercentage}
+                  shouldShowBg
+                  className={{
+                    wrapper: 'h-5 rounded-16',
+                    bar: 'h-full rounded-16 transition-[width] duration-700 ease-out',
+                    barColor:
+                      'bg-gradient-to-r from-accent-avocado-default via-accent-cabbage-default to-accent-cheese-default',
+                  }}
+                />
+                <GivebackMeterShine percentage={animatedPercentage} />
+                <FlexRow className="absolute left-0 right-0 top-0 h-5 items-center justify-between px-1">
+                  {milestones.map((milestone) => (
+                    <span
+                      key={milestone}
+                      className={classNames(
+                        'size-2 rounded-full ring-2 ring-background-default transition-colors duration-300',
+                        animatedPercentage >= milestone
+                          ? 'bg-accent-cheese-default'
+                          : 'bg-accent-pepper-subtler',
+                      )}
+                    />
+                  ))}
+                </FlexRow>
+              </div>
+
+              <FlexRow className="flex-wrap items-center justify-between gap-2">
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Callout}
+                  color={TypographyColor.StatusSuccess}
+                  bold
+                >
+                  {Math.round(percentage)}% funded
+                </Typography>
+                {campaign.backersLast24h > 0 && (
+                  <FlexRow className="items-center gap-1.5">
+                    <span className="relative flex size-2">
+                      <span className="bg-accent-avocado-default/60 absolute inline-flex size-full rounded-full motion-safe:animate-glow-pulse" />
+                      <span className="relative inline-flex size-2 rounded-full bg-accent-avocado-default" />
+                    </span>
+                    <Typography
+                      tag={TypographyTag.Span}
+                      type={TypographyType.Caption1}
+                      color={TypographyColor.Tertiary}
+                    >
+                      {campaign.backersLast24h} developers backed in the last
+                      24h
+                    </Typography>
+                  </FlexRow>
+                )}
+              </FlexRow>
+
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                <span className="font-bold text-text-primary">
+                  {campaign.backersCount.toLocaleString('en-US')}
+                </span>{' '}
+                total backers
+              </Typography>
+            </FlexCol>
+          </FlexCol>
+
+          {hasSponsors && (
+            <FlexCol className="gap-2 border-t border-border-subtlest-tertiary pt-4 laptop:border-t-0 laptop:pt-0">
+              <FlexRow className="items-center justify-between gap-3">
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Callout}
+                  bold
+                >
+                  Sponsors topping up the pot
+                </Typography>
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Title3}
+                  bold
+                  className="tabular-nums text-status-success"
+                >
+                  {formatDonationAmount(
+                    campaign.sponsoredAmount,
+                    campaign.currency,
+                  )}
+                </Typography>
+              </FlexRow>
+
+              <SponsorBudgetBar
+                sponsors={campaign.sponsors}
+                onSelect={() => setIsSponsorModalOpen(true)}
+              />
+
+              <FlexCol className="items-start gap-2">
+                <Typography
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Tertiary}
+                >
+                  {sponsorGoalShare}% of the{' '}
+                  {formatDonationAmount(campaign.goalAmount, campaign.currency)}{' '}
+                  goal · {campaign.sponsors.length} sponsors
+                </Typography>
+                <Button
+                  type="button"
+                  size={ButtonSize.Small}
+                  variant={ButtonVariant.Float}
+                  onClick={() => setIsSponsorModalOpen(true)}
+                  className="mt-2"
+                >
+                  Become a sponsor
+                </Button>
+              </FlexCol>
+            </FlexCol>
+          )}
+        </div>
+
+        <Typography
+          type={TypographyType.Caption1}
+          color={TypographyColor.Tertiary}
+        >
+          Funded by daily.dev, not you. Only approved actions count toward the
+          goal.
+        </Typography>
+      </FlexCol>
+
+      {isSponsorModalOpen && (
+        <GivebackSponsorModal onClose={() => setIsSponsorModalOpen(false)} />
+      )}
+    </GivebackSection>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/CommunityImpactSection.tsx b/packages/shared/src/features/giveback/components/CommunityImpactSection.tsx
new file mode 100644
index 00000000000..4d33da0c04d
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/CommunityImpactSection.tsx
@@ -0,0 +1,92 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol } from '../../../components/utilities';
+import { useGivebackContext } from '../GivebackContext';
+import { formatDonationAmount } from '../utils';
+import { GivebackSection } from './GivebackSection';
+
+// Lemonade's strongest move: translate donations into tangible human outcomes,
+// not just dollars. These are illustrative projections for the goal, mapped to
+// the real causes the community can pick. This is the emotional payoff of the
+// "Why" tab — kept to a single clean grid, nothing else.
+const impactOutcomes: {
+  value: string;
+  label: string;
+  cause: string;
+  accent: string;
+}[] = [
+  {
+    value: '3,200 learners',
+    label: 'start coding for free',
+    cause: 'freeCodeCamp',
+    accent: 'text-accent-cabbage-default',
+  },
+  {
+    value: '40 maintainers',
+    label: 'funded to keep critical tools alive',
+    cause: 'Python Software Foundation',
+    accent: 'text-accent-cheese-default',
+  },
+  {
+    value: '15M lbs',
+    label: 'of e-waste kept out of landfills',
+    cause: 'Human-I-T',
+    accent: 'text-accent-avocado-default',
+  },
+  {
+    value: '250 people',
+    label: 'keep browsing the web with a screen reader',
+    cause: 'NV Access',
+    accent: 'text-accent-onion-default',
+  },
+];
+
+export const CommunityImpactSection = (): ReactElement => {
+  const { campaign } = useGivebackContext();
+
+  return (
+    <GivebackSection
+      id="giveback-impact"
+      eyebrow="In real terms"
+      title="What your work turns into"
+      description={`What the ${formatDonationAmount(
+        campaign.goalAmount,
+        campaign.currency,
+      )} goal pays for once it reaches the causes you pick.`}
+    >
+      <div className="grid grid-cols-1 gap-4 tablet:grid-cols-2">
+        {impactOutcomes.map(({ value, label, cause, accent }) => (
+          <FlexCol
+            key={cause}
+            className="group gap-2 rounded-16 border border-border-subtlest-tertiary p-5 transition-all duration-200 hover:-translate-y-0.5 hover:border-border-subtlest-secondary hover:shadow-2 motion-reduce:transform-none"
+          >
+            <Typography bold type={TypographyType.Title1} className={accent}>
+              {value}
+            </Typography>
+            <Typography
+              type={TypographyType.Body}
+              color={TypographyColor.Secondary}
+            >
+              {label}
+            </Typography>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+              bold
+              className="mt-1 uppercase tracking-wider"
+            >
+              {cause}
+            </Typography>
+          </FlexCol>
+        ))}
+      </div>
+    </GivebackSection>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GeoGateFallback.tsx b/packages/shared/src/features/giveback/components/GeoGateFallback.tsx
new file mode 100644
index 00000000000..036c91bf38f
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GeoGateFallback.tsx
@@ -0,0 +1,69 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { DailyIcon } from '../../../components/icons';
+import { useGivebackContext } from '../GivebackContext';
+
+// Full-page gate. When Giveback is not available in the user's country we block
+// the whole experience and only explain, at a high level, what the campaign is.
+export const GeoGateFallback = (): ReactElement | null => {
+  const { geoAvailability } = useGivebackContext();
+
+  if (geoAvailability === 'available') {
+    return null;
+  }
+
+  return (
+    <div className="relative flex min-h-page w-full items-center justify-center overflow-hidden px-4 py-16">
+      <div
+        aria-hidden
+        className="bg-accent-cabbage-default/15 pointer-events-none absolute left-1/2 top-1/4 size-[32rem] -translate-x-1/2 rounded-full blur-3xl"
+      />
+
+      <FlexCol className="relative max-w-xl items-center gap-5 text-center">
+        <FlexRow className="items-center gap-2 rounded-10 bg-surface-float px-3 py-1.5">
+          <DailyIcon />
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Caption1}
+            color={TypographyColor.Secondary}
+            bold
+          >
+            Giveback by daily.dev
+          </Typography>
+        </FlexRow>
+
+        <Typography
+          bold
+          tag={TypographyTag.H1}
+          type={TypographyType.LargeTitle}
+        >
+          Giveback is not available in your country yet
+        </Typography>
+
+        <Typography
+          tag={TypographyTag.P}
+          type={TypographyType.Title3}
+          color={TypographyColor.Secondary}
+        >
+          Giveback turns part of our growth budget into donations for causes the
+          community picks, funded by daily.dev, at no cost to you.
+        </Typography>
+
+        <Typography
+          tag={TypographyTag.P}
+          type={TypographyType.Callout}
+          color={TypographyColor.Tertiary}
+        >
+          It&apos;s in beta and rolling out to more countries soon.
+        </Typography>
+      </FlexCol>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackBackground.tsx b/packages/shared/src/features/giveback/components/GivebackBackground.tsx
new file mode 100644
index 00000000000..2061b5d719e
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackBackground.tsx
@@ -0,0 +1,57 @@
+import type { CSSProperties, ReactElement } from 'react';
+import React from 'react';
+
+// daily.dev brand canvas: the signature pink → purple → blue gradient (cabbage →
+// onion → blueCheese) glowing softly from the top of a dark surface, the way the
+// marketing site and Plus pages feel — smooth and pastel, no hard shapes or
+// grids. Every tint is a theme token via color-mix so it tracks the design
+// system, and a whisper of grain keeps the gradient from banding.
+
+// The signature multi-stop brand sweep, faded down with a wide radial mask so it
+// reads as one cohesive hero glow rather than separate blobs.
+const brandSweep: CSSProperties = {
+  backgroundImage:
+    'linear-gradient(125deg, ' +
+    'color-mix(in srgb, var(--theme-accent-cabbage-default) 34%, transparent), ' +
+    'color-mix(in srgb, var(--theme-accent-onion-default) 34%, transparent) 38%, ' +
+    'color-mix(in srgb, var(--theme-accent-blueCheese-default) 30%, transparent) 62%, ' +
+    'color-mix(in srgb, var(--theme-accent-onion-default) 34%, transparent) 82%, ' +
+    'color-mix(in srgb, var(--theme-accent-cabbage-default) 34%, transparent))',
+  maskImage: 'radial-gradient(125% 75% at 50% -10%, black, transparent 70%)',
+  WebkitMaskImage:
+    'radial-gradient(125% 75% at 50% -10%, black, transparent 70%)',
+};
+
+// A soft horizon glow anchored to the bottom edge for depth — a wide, flat
+// ellipse, so it's ambient light rather than a circle.
+const horizonGlow: CSSProperties = {
+  background:
+    'radial-gradient(120% 38% at 50% 102%, color-mix(in srgb, var(--theme-accent-onion-default) 16%, transparent), transparent 72%)',
+};
+
+// Faint film grain, only to prevent banding across the smooth gradient.
+const grain: CSSProperties = {
+  backgroundImage:
+    "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
+};
+
+const vignette: CSSProperties = {
+  background:
+    'radial-gradient(125% 80% at 50% 24%, transparent 52%, color-mix(in srgb, var(--theme-background-default) 80%, transparent) 100%)',
+};
+
+export const GivebackBackground = (): ReactElement => (
+  <div
+    aria-hidden
+    className="pointer-events-none absolute inset-0 overflow-hidden"
+  >
+    {/* The brand glow is a fixed-height hero band anchored to the top. Sizing it
+        in px (not inset-0) keeps it a consistent design — otherwise its mask
+        scales with the page height and the glow spreads down to mid-screen on
+        long tabs like "Take action". */}
+    <div className="absolute inset-x-0 top-0 h-[42rem]" style={brandSweep} />
+    <div className="absolute inset-0" style={horizonGlow} />
+    <div className="absolute inset-0 opacity-[0.04]" style={grain} />
+    <div className="absolute inset-0" style={vignette} />
+  </div>
+);
diff --git a/packages/shared/src/features/giveback/components/GivebackCampaignVideo.tsx b/packages/shared/src/features/giveback/components/GivebackCampaignVideo.tsx
new file mode 100644
index 00000000000..f2327ceba5c
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackCampaignVideo.tsx
@@ -0,0 +1,83 @@
+import type { CSSProperties, ReactElement } from 'react';
+import React, { useState } from 'react';
+import { FlexCol } from '../../../components/utilities';
+import { PlayIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { GIVEBACK_CHARM_IMAGE } from './GivebackMascot';
+
+// Mockup: the real campaign video behind a lightweight click-to-play facade —
+// we only swap in the player iframe on click, so the hero doesn't autoplay or
+// load the heavy embed up front. The clip itself is a placeholder borrowed from
+// another campaign, so instead of its (unrelated) thumbnail the poster shows the
+// Giveback charm on the brand backdrop. Swap VIDEO_ID for the final film later.
+const VIDEO_ID = 'GAIOnX3S2jg';
+const START_SECONDS = 1;
+
+// A dark, on-brand backdrop (page background + a soft cabbage glow from the top)
+// so the charm — rendered with `mix-blend-screen` — reads as floating, exactly
+// like it does elsewhere on the dark page.
+const posterBackdrop: CSSProperties = {
+  background:
+    'radial-gradient(120% 95% at 50% 0%, color-mix(in srgb, var(--theme-accent-cabbage-default) 22%, transparent), transparent 68%), var(--theme-background-default)',
+};
+
+export const GivebackCampaignVideo = (): ReactElement => {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  return (
+    <FlexCol className="w-full gap-2">
+      <div className="group relative aspect-video w-full overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-surface-float">
+        {isPlaying ? (
+          <iframe
+            title="Giveback campaign video"
+            src={`https://www.youtube.com/embed/${VIDEO_ID}?autoplay=1&start=${START_SECONDS}&rel=0`}
+            className="absolute inset-0 size-full"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={() => setIsPlaying(true)}
+            aria-label="Play the Giveback campaign video"
+            className="absolute inset-0 size-full"
+          >
+            <span
+              aria-hidden
+              className="absolute inset-0"
+              style={posterBackdrop}
+            />
+
+            {/* The charm as the poster: a soft glow behind it, then the artwork
+                with the black baked-in background dropped via mix-blend-screen. */}
+            <span className="absolute inset-0 flex items-center justify-center">
+              <span
+                aria-hidden
+                className="bg-accent-cabbage-default/20 absolute size-1/2 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+              />
+              <img
+                src={GIVEBACK_CHARM_IMAGE.src}
+                alt=""
+                aria-hidden
+                loading="lazy"
+                className="relative max-h-[80%] w-auto select-none object-contain mix-blend-screen transition-transform duration-500 motion-safe:group-hover:scale-105"
+              />
+            </span>
+
+            <span className="absolute inset-0 flex items-center justify-center">
+              {/* Dark halo so the button keeps strong contrast even over the
+                  bright parts of the charm. */}
+              <span
+                aria-hidden
+                className="bg-overlay-primary-pepper absolute size-24 rounded-full blur-2xl"
+              />
+              <span className="relative flex size-14 items-center justify-center rounded-full bg-white shadow-2 ring-4 ring-white/40 transition-transform duration-200 group-hover:ring-white/60 motion-safe:group-hover:scale-110">
+                <PlayIcon secondary size={IconSize.Size48} className="ml-0.5" />
+              </span>
+            </span>
+          </button>
+        )}
+      </div>
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackCausesModal.tsx b/packages/shared/src/features/giveback/components/GivebackCausesModal.tsx
new file mode 100644
index 00000000000..bc0ba7afb88
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackCausesModal.tsx
@@ -0,0 +1,72 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { RootPortal } from '../../../components/tooltips/Portal';
+import CloseButton from '../../../components/CloseButton';
+import { ButtonSize } from '../../../components/buttons/Button';
+import { CauseSelection } from './CauseSelection';
+
+interface GivebackCausesModalProps {
+  onClose: () => void;
+}
+
+// Settings-style popup for editing the causes the visitor supports. Reuses the
+// same cause picker from onboarding; confirming closes the modal.
+export const GivebackCausesModal = ({
+  onClose,
+}: GivebackCausesModalProps): ReactElement => {
+  return (
+    <RootPortal>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
+      <div
+        onClick={(event) => {
+          if (event.target === event.currentTarget) {
+            onClose();
+          }
+        }}
+        className="fixed inset-0 z-modal flex items-center justify-center bg-overlay-primary-pepper px-4 py-8 backdrop-blur-sm"
+      >
+        <section
+          aria-modal="true"
+          role="dialog"
+          aria-labelledby="giveback-causes-title"
+          className="relative flex max-h-full w-full max-w-3xl flex-col overflow-hidden rounded-24 border border-border-subtlest-secondary bg-background-default shadow-2"
+        >
+          <FlexRow className="items-start justify-between gap-3 border-b border-border-subtlest-tertiary p-5 tablet:px-6">
+            <FlexCol className="gap-1">
+              <Typography
+                bold
+                id="giveback-causes-title"
+                tag={TypographyTag.H2}
+                type={TypographyType.Title3}
+              >
+                Customize your causes
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Choose where the community budget goes. Update these anytime.
+              </Typography>
+            </FlexCol>
+            <CloseButton
+              type="button"
+              size={ButtonSize.Small}
+              onClick={onClose}
+            />
+          </FlexRow>
+
+          <div className="overflow-y-auto p-5 tablet:px-6">
+            <CauseSelection onContinue={onClose} continueLabel="Done" />
+          </div>
+        </section>
+      </div>
+    </RootPortal>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackCelebration.tsx b/packages/shared/src/features/giveback/components/GivebackCelebration.tsx
new file mode 100644
index 00000000000..2034591cc50
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackCelebration.tsx
@@ -0,0 +1,159 @@
+import type { CSSProperties, ReactElement } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { GiftIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { useGivebackContext } from '../GivebackContext';
+import { usePrefersReducedMotion } from '../useGivebackMotion';
+import { formatDonationAmount } from '../utils';
+
+const COIN_COLORS = [
+  'bg-accent-cheese-default',
+  'bg-accent-avocado-default',
+  'bg-accent-cabbage-default',
+  'bg-accent-bacon-default',
+  'bg-accent-blueCheese-default',
+];
+
+const PARTICLE_COUNT = 16;
+
+interface Particle {
+  key: string;
+  tx: number;
+  ty: number;
+  size: number;
+  delay: number;
+  color: string;
+}
+
+// Deterministic-ish spray around a circle so the burst reads as a fountain of
+// coins rather than random noise.
+const buildParticles = (seed: number): Particle[] =>
+  Array.from({ length: PARTICLE_COUNT }, (_, index) => {
+    const angle = (index / PARTICLE_COUNT) * Math.PI * 2 + (seed % 7) * 0.3;
+    const distance = 120 + ((index * 37 + seed * 13) % 150);
+    return {
+      key: `${seed}-${index}-${distance}`,
+      tx: Math.cos(angle) * distance,
+      ty: Math.sin(angle) * distance - 40,
+      size: 8 + ((index * 5 + seed) % 9),
+      delay: (index % 6) * 28,
+      color: COIN_COLORS[index % COIN_COLORS.length],
+    };
+  });
+
+export const GivebackCelebration = (): ReactElement | null => {
+  const { celebration, dismissCelebration } = useGivebackContext();
+  const reducedMotion = usePrefersReducedMotion();
+
+  const id = celebration?.id ?? 0;
+  const isMilestone = Boolean(
+    celebration && (celebration.milestone || celebration.complete),
+  );
+
+  const particles = useMemo(() => buildParticles(id), [id]);
+
+  useEffect(() => {
+    if (!celebration) {
+      return undefined;
+    }
+
+    const visibleFor = isMilestone ? 2600 : 1900;
+    const timer = window.setTimeout(dismissCelebration, visibleFor);
+    return () => window.clearTimeout(timer);
+    // Re-run only when a new celebration is triggered.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  if (!celebration) {
+    return null;
+  }
+
+  const bannerLabel = celebration.complete
+    ? 'Goal reached. Thank you.'
+    : `${celebration.milestone}% funded`;
+
+  return (
+    <div
+      aria-hidden
+      className="pointer-events-none fixed inset-0 z-max flex items-center justify-center overflow-hidden px-4"
+    >
+      <div
+        key={id}
+        className="bg-accent-cabbage-default/20 absolute size-72 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+      />
+
+      {!reducedMotion && (
+        <div key={`coins-${id}`} className="absolute inset-0">
+          {particles.map((particle) => (
+            <span
+              key={particle.key}
+              className={classNames(
+                'absolute left-1/2 top-1/2 rounded-full motion-safe:animate-reaction-burst',
+                particle.color,
+              )}
+              style={
+                {
+                  width: particle.size,
+                  height: particle.size,
+                  animationDelay: `${particle.delay}ms`,
+                  '--burst-tx': `${particle.tx}px`,
+                  '--burst-ty': `${particle.ty}px`,
+                } as CSSProperties
+              }
+            />
+          ))}
+        </div>
+      )}
+
+      <div
+        key={`card-${id}`}
+        className="relative flex flex-col items-center gap-2 rounded-24 border border-accent-cabbage-default bg-background-default px-8 py-6 text-center shadow-2-cabbage motion-safe:animate-reward-pop"
+      >
+        <span className="flex size-12 items-center justify-center rounded-full bg-accent-cabbage-flat text-accent-cabbage-default">
+          <GiftIcon size={IconSize.Large} />
+        </span>
+        <Typography
+          bold
+          tag={TypographyTag.Span}
+          type={TypographyType.LargeTitle}
+          color={TypographyColor.StatusSuccess}
+          className="tabular-nums"
+        >
+          +{formatDonationAmount(celebration.amount, celebration.currency)}
+        </Typography>
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Tertiary}
+        >
+          added to the pot
+        </Typography>
+        {isMilestone && (
+          <span className="mt-1 rounded-10 bg-accent-cabbage-flat px-3 py-1">
+            <Typography
+              bold
+              tag={TypographyTag.Span}
+              type={TypographyType.Footnote}
+              color={TypographyColor.Brand}
+            >
+              {bannerLabel}
+            </Typography>
+          </span>
+        )}
+      </div>
+
+      <div role="status" aria-live="polite" className="sr-only">
+        {`You unlocked ${formatDonationAmount(
+          celebration.amount,
+          celebration.currency,
+        )} for your causes.${isMilestone ? ` ${bannerLabel}.` : ''}`}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackCommunityActivity.tsx b/packages/shared/src/features/giveback/components/GivebackCommunityActivity.tsx
new file mode 100644
index 00000000000..048b4f21a1a
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackCommunityActivity.tsx
@@ -0,0 +1,251 @@
+import type { ComponentType, ReactElement } from 'react';
+import React, { useEffect, useState } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  AddUserIcon,
+  DiscussIcon,
+  FeedbackIcon,
+  PlayIcon,
+  ShareIcon,
+} from '../../../components/icons';
+import type { IconProps } from '../../../components/Icon';
+import { IconSize } from '../../../components/Icon';
+import { useGivebackContext } from '../GivebackContext';
+import { usePrefersReducedMotion } from '../useGivebackMotion';
+import { formatCompactNumber, formatDonationAmount } from '../utils';
+import type { GivebackCommunityEvent } from '../types';
+import { GivebackAvatar } from './GivebackContributorFaces';
+
+// How often a new win streams to the top of the feed.
+const STREAM_MS = 3600;
+
+// Position-based "age" labels: the freshest row reads as "just now" and ages
+// grow down the list. The mock has no real timestamps, so this keeps the wire
+// believable as rows stream in without faking precise per-event times.
+const AGE_LABELS = [
+  'just now',
+  '14s ago',
+  '38s ago',
+  '1m ago',
+  '3m ago',
+  '6m ago',
+  '11m ago',
+  '18m ago',
+];
+
+interface FeedVisual {
+  Icon: ComponentType<IconProps>;
+  tileClassName: string;
+}
+
+// Match each action to a real-action icon + accent so the feed reads like
+// genuine platform activity rather than generic log lines.
+const getVisual = (actionLabel: string): FeedVisual => {
+  const text = actionLabel.toLowerCase();
+  if (text.includes('video')) {
+    return {
+      Icon: PlayIcon,
+      tileClassName: 'bg-accent-onion-flat text-accent-onion-default',
+    };
+  }
+  if (
+    text.includes('invite') ||
+    text.includes('friend') ||
+    text.includes('refer')
+  ) {
+    return {
+      Icon: AddUserIcon,
+      tileClassName: 'bg-accent-avocado-flat text-accent-avocado-default',
+    };
+  }
+  if (text.includes('feedback') || text.includes('review')) {
+    return {
+      Icon: FeedbackIcon,
+      tileClassName: 'bg-accent-bacon-flat text-accent-bacon-default',
+    };
+  }
+  if (
+    text.includes('tip') ||
+    text.includes('post') ||
+    text.includes('comment')
+  ) {
+    return {
+      Icon: DiscussIcon,
+      tileClassName: 'bg-accent-cheese-flat text-accent-cheese-default',
+    };
+  }
+  return {
+    Icon: ShareIcon,
+    tileClassName: 'bg-accent-cabbage-flat text-accent-cabbage-default',
+  };
+};
+
+const ActivityRow = ({
+  event,
+  ageLabel,
+}: {
+  event: GivebackCommunityEvent;
+  ageLabel: string;
+}): ReactElement => {
+  const { Icon, tileClassName } = getVisual(event.actionLabel);
+
+  return (
+    <FlexRow className="items-center gap-3 py-3">
+      {/* The person doing the action is the hero of the row — their face, with a
+          small action-type badge so the wire still reads what kind of win it is. */}
+      <span className="relative shrink-0">
+        <GivebackAvatar src={event.actorAvatar} sizeClassName="size-10" />
+        <span
+          className={`absolute -bottom-1 -right-1 flex size-5 items-center justify-center rounded-full ring-2 ring-background-default ${tileClassName}`}
+        >
+          <Icon size={IconSize.XXSmall} />
+        </span>
+      </span>
+
+      <FlexCol className="min-w-0 flex-1 gap-0.5">
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Footnote}
+          className="min-w-0 truncate"
+        >
+          <span className="font-bold">{event.actorName}</span>{' '}
+          <span className="text-text-secondary">{event.actionLabel}</span>
+        </Typography>
+        <FlexRow className="items-center gap-2">
+          {event.causeName && (
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption2}
+              color={TypographyColor.Tertiary}
+              className="min-w-0 truncate"
+            >
+              → {event.causeName}
+            </Typography>
+          )}
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Caption2}
+            color={TypographyColor.Quaternary}
+            className="shrink-0"
+          >
+            {ageLabel}
+          </Typography>
+        </FlexRow>
+      </FlexCol>
+
+      <Typography
+        bold
+        tag={TypographyTag.Span}
+        type={TypographyType.Footnote}
+        className="shrink-0 tabular-nums text-status-success"
+      >
+        {event.amount
+          ? `+${formatDonationAmount(event.amount, event.currency)}`
+          : 'Love'}
+      </Typography>
+    </FlexRow>
+  );
+};
+
+// The anonymized, live pulse of what the community is doing right now. Wins
+// stream in from the top on a timer so the feed feels genuinely alive, while
+// actor identities stay anonymized by default.
+export const GivebackCommunityActivity = (): ReactElement => {
+  const { communityEvents, communityRally, showCommunityFeed } =
+    useGivebackContext();
+  const reducedMotion = usePrefersReducedMotion();
+  const [order, setOrder] = useState<GivebackCommunityEvent[]>(communityEvents);
+  // Bumps on every stream tick so the new top row re-runs its entrance.
+  const [streamKey, setStreamKey] = useState(0);
+
+  useEffect(() => {
+    setOrder(communityEvents);
+  }, [communityEvents]);
+
+  useEffect(() => {
+    if (reducedMotion || !showCommunityFeed || communityEvents.length <= 1) {
+      return undefined;
+    }
+    const timer = window.setInterval(() => {
+      setOrder((prev) => {
+        if (prev.length <= 1) {
+          return prev;
+        }
+        const next = [...prev];
+        const last = next.pop();
+        return last ? [last, ...next] : next;
+      });
+      setStreamKey((key) => key + 1);
+    }, STREAM_MS);
+    return () => window.clearInterval(timer);
+  }, [reducedMotion, showCommunityFeed, communityEvents.length]);
+
+  return (
+    <FlexCol className="w-full gap-3">
+      <Typography bold tag={TypographyTag.H3} type={TypographyType.Title3}>
+        Live community activity
+      </Typography>
+
+      {showCommunityFeed && order.length ? (
+        <>
+          <FlexRow className="items-center gap-1.5">
+            <span className="relative flex size-2">
+              <span className="bg-status-success/60 absolute inline-flex size-full rounded-full motion-safe:animate-glow-pulse" />
+              <span className="relative inline-flex size-2 rounded-full bg-status-success" />
+            </span>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              bold
+              className="text-status-success"
+            >
+              {formatCompactNumber(communityRally.contributorsToday)}
+            </Typography>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+            >
+              developers contributing right now
+            </Typography>
+          </FlexRow>
+
+          <FlexCol className="divide-y divide-border-subtlest-tertiary">
+            <div
+              key={streamKey}
+              className="motion-safe:animate-fade-slide-up"
+              style={{ animationDelay: '0ms' }}
+            >
+              <ActivityRow event={order[0]} ageLabel={AGE_LABELS[0]} />
+            </div>
+            {order.slice(1).map((event, index) => (
+              <ActivityRow
+                key={event.id}
+                event={event}
+                ageLabel={AGE_LABELS[(index + 1) % AGE_LABELS.length]}
+              />
+            ))}
+          </FlexCol>
+        </>
+      ) : (
+        <FlexCol className="items-center gap-1 py-10 text-center">
+          <Typography bold type={TypographyType.Callout}>
+            Community feed hidden
+          </Typography>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            Use the QA panel to show or hide anonymized community activity.
+          </Typography>
+        </FlexCol>
+      )}
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackContributorFaces.tsx b/packages/shared/src/features/giveback/components/GivebackContributorFaces.tsx
new file mode 100644
index 00000000000..7ba1e6da608
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackContributorFaces.tsx
@@ -0,0 +1,86 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { fallbackImages } from '../../../lib/config';
+
+interface GivebackAvatarProps {
+  src: string;
+  sizeClassName?: string;
+  className?: string;
+}
+
+// Single avatar that swaps to the shared placeholder if the image fails. Uses
+// state rather than mutating the element so it plays nicely with lint rules.
+export const GivebackAvatar = ({
+  src,
+  sizeClassName = 'size-6',
+  className,
+}: GivebackAvatarProps): ReactElement => {
+  const [failed, setFailed] = useState(false);
+
+  return (
+    <img
+      src={failed ? fallbackImages.avatar : src}
+      alt=""
+      loading="lazy"
+      onError={() => setFailed(true)}
+      className={classNames(
+        'rounded-full object-cover',
+        sizeClassName,
+        className,
+      )}
+    />
+  );
+};
+
+interface GivebackContributorFacesProps {
+  avatars: string[];
+  /** Total contributors; anything beyond the shown faces becomes a "+N" chip. */
+  totalCount: number;
+  /** Tailwind size utility for each face. Defaults to a compact card size. */
+  sizeClassName?: string;
+  className?: string;
+}
+
+// Overlapping avatar stack used to put real faces on the community engagement
+// row.
+export const GivebackContributorFaces = ({
+  avatars,
+  totalCount,
+  sizeClassName = 'size-6',
+  className,
+}: GivebackContributorFacesProps): ReactElement | null => {
+  const faces = avatars.slice(0, 3);
+  if (!faces.length) {
+    return null;
+  }
+
+  const overflow = totalCount - faces.length;
+
+  return (
+    <div className={classNames('flex items-center', className)}>
+      <div className="flex -space-x-2">
+        {faces.map((avatar, index) => (
+          <GivebackAvatar
+            // Avatars come from a small shared pool, so index keeps keys stable.
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${avatar}-${index}`}
+            src={avatar}
+            sizeClassName={sizeClassName}
+            className="border-2 border-background-default bg-surface-float"
+          />
+        ))}
+        {overflow > 0 && (
+          <span
+            className={classNames(
+              'flex items-center justify-center rounded-full border-2 border-background-default bg-surface-secondary font-bold text-text-primary typo-caption2',
+              sizeClassName,
+            )}
+          >
+            +{overflow > 99 ? '99' : overflow}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackFaq.tsx b/packages/shared/src/features/giveback/components/GivebackFaq.tsx
new file mode 100644
index 00000000000..42a99bfcc2b
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackFaq.tsx
@@ -0,0 +1,211 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { ArrowIcon, VIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { GivebackSection } from './GivebackSection';
+
+interface FaqItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+const faqs: FaqItem[] = [
+  {
+    id: 'cost',
+    question: 'Does this cost me anything?',
+    answer:
+      'No. daily.dev funds every donation. You never pay a cent. You just take small actions and we turn them into money for good causes.',
+  },
+  {
+    id: 'how',
+    question: 'How do my actions turn into donations?',
+    answer:
+      'Each approved action unlocks a fixed amount that daily.dev donates to the causes you picked. The community meter is the sum of everyone’s actions.',
+  },
+  {
+    id: 'causes',
+    question: 'Who chooses the causes?',
+    answer:
+      'You do. Pick from vetted nonprofits, or suggest your own. We review every suggestion before it goes live.',
+  },
+  {
+    id: 'rejected',
+    question: 'What if one of my actions gets rejected?',
+    answer:
+      'We add it to your contribution the moment you submit, because we trust you. If validation fails, we simply subtract it. No penalties, ever.',
+  },
+  {
+    id: 'where',
+    question: 'Where does the money actually go?',
+    answer:
+      'Straight to vetted nonprofits. We report receipts so every dollar the community unlocks is accounted for.',
+  },
+  {
+    id: 'why',
+    question: 'Why is daily.dev doing this?',
+    answer:
+      'We’d rather put our growth budget into causes the community cares about than burn it in ad auctions.',
+  },
+  {
+    id: 'geo',
+    question: 'Is Giveback available in my country?',
+    answer:
+      'We’re rolling it out gradually. If it isn’t live where you are yet, you’ll see a notice, and we’re working to reach everyone.',
+  },
+];
+
+// If the FAQ didn't answer it, let the visitor write to us. This is a single
+// question composer (no public thread) that sits at the bottom of the section.
+const FaqQuestionComposer = (): ReactElement => {
+  const [draft, setDraft] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  const submit = () => {
+    if (!draft.trim()) {
+      return;
+    }
+    setSubmitted(true);
+    setDraft('');
+  };
+
+  return (
+    <FlexCol className="gap-4 border-t border-border-subtlest-tertiary pt-8">
+      <FlexCol className="gap-1.5">
+        <Typography tag={TypographyTag.H3} type={TypographyType.Title3} bold>
+          Still have a question?
+        </Typography>
+        <Typography
+          tag={TypographyTag.P}
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+        >
+          If you didn&apos;t find your answer above, ask the team anything and
+          we&apos;ll get back to you.
+        </Typography>
+      </FlexCol>
+
+      {submitted ? (
+        <FlexRow className="items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-4 py-3 text-status-success">
+          <VIcon size={IconSize.Small} secondary />
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Callout}
+            color={TypographyColor.StatusSuccess}
+            bold
+          >
+            Thanks for reaching out — we&apos;ll get back to you soon.
+          </Typography>
+        </FlexRow>
+      ) : (
+        <FlexCol className="gap-2">
+          <label htmlFor="giveback-question" className="flex flex-col gap-2">
+            <Typography
+              tag={TypographyTag.Span}
+              bold
+              type={TypographyType.Footnote}
+            >
+              Your question
+            </Typography>
+            <textarea
+              id="giveback-question"
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              placeholder="What would you like to ask the team?"
+              className="min-h-20 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+            />
+          </label>
+          <FlexRow className="justify-end">
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Primary}
+              disabled={!draft.trim()}
+              onClick={submit}
+            >
+              Send question
+            </Button>
+          </FlexRow>
+        </FlexCol>
+      )}
+    </FlexCol>
+  );
+};
+
+export const GivebackFaq = (): ReactElement => {
+  const [openId, setOpenId] = useState<string | null>(faqs[0].id);
+
+  return (
+    <GivebackSection id="giveback-faq" title="Frequently asked questions">
+      <div className="divide-y divide-border-subtlest-tertiary">
+        {faqs.map((faq) => {
+          const isOpen = openId === faq.id;
+
+          return (
+            <div key={faq.id}>
+              <button
+                type="button"
+                aria-expanded={isOpen}
+                onClick={() => setOpenId(isOpen ? null : faq.id)}
+                className="group flex w-full items-center justify-between gap-4 py-4 text-left"
+              >
+                <Typography
+                  tag={TypographyTag.Span}
+                  bold
+                  type={TypographyType.Callout}
+                  className={classNames(
+                    'transition-colors',
+                    !isOpen && 'group-hover:text-text-secondary',
+                  )}
+                >
+                  {faq.question}
+                </Typography>
+                <ArrowIcon
+                  size={IconSize.Small}
+                  className={classNames(
+                    'shrink-0 transition-transform duration-300 ease-out',
+                    isOpen
+                      ? 'rotate-0 text-accent-cabbage-default'
+                      : 'rotate-180 text-text-tertiary group-hover:text-text-primary',
+                  )}
+                />
+              </button>
+              <div
+                className={classNames(
+                  'grid transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none',
+                  isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+                )}
+              >
+                <div className="overflow-hidden">
+                  <Typography
+                    tag={TypographyTag.P}
+                    type={TypographyType.Callout}
+                    color={TypographyColor.Secondary}
+                    className="max-w-2xl pb-4"
+                  >
+                    {faq.answer}
+                  </Typography>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <FaqQuestionComposer />
+    </GivebackSection>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackFilterChip.tsx b/packages/shared/src/features/giveback/components/GivebackFilterChip.tsx
new file mode 100644
index 00000000000..f5a11524654
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackFilterChip.tsx
@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+
+interface GivebackFilterChipProps {
+  isSelected: boolean;
+  label: string;
+  onClick: () => void;
+}
+
+// Shared pill used for the catalog category filters and the cause-picker
+// category filters so both surfaces read and behave identically.
+export const GivebackFilterChip = ({
+  isSelected,
+  label,
+  onClick,
+}: GivebackFilterChipProps): ReactElement => (
+  <button
+    type="button"
+    aria-pressed={isSelected}
+    className={classNames(
+      'h-8 shrink-0 rounded-10 px-3 font-medium transition-colors typo-footnote',
+      isSelected
+        ? 'bg-accent-cabbage-default text-white'
+        : 'bg-transparent text-text-tertiary hover:bg-surface-float hover:text-text-primary',
+    )}
+    onClick={onClick}
+  >
+    {label}
+  </button>
+);
diff --git a/packages/shared/src/features/giveback/components/GivebackFundingBar.tsx b/packages/shared/src/features/giveback/components/GivebackFundingBar.tsx
new file mode 100644
index 00000000000..0fb759d8ae4
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackFundingBar.tsx
@@ -0,0 +1,215 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { useGivebackContext } from '../GivebackContext';
+import { useGivebackNav } from '../GivebackNavContext';
+import { formatDonationAmount, getGoalProgressPercentage } from '../utils';
+
+// Circular level meter that wraps the level number, filling toward the next
+// level. Uses the same stroke technique as the shared ProgressCircle.
+const LevelProgressRing = ({
+  level,
+  percentage,
+}: {
+  level: number;
+  percentage: number;
+}): ReactElement => {
+  const size = 46;
+  const stroke = 4;
+  const radius = size / 2 - stroke / 2 - 1;
+  const circumference = 2 * Math.PI * radius;
+  const clamped = Math.min(100, Math.max(0, percentage));
+  const strokeDashoffset = circumference * (1 - clamped / 100);
+
+  return (
+    <div
+      className="relative inline-flex shrink-0 items-center justify-center"
+      style={{ width: size, height: size }}
+      role="img"
+      aria-label={`Level ${level}, ${Math.round(percentage)}% to next level`}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          className="stroke-border-subtlest-tertiary"
+          strokeWidth={stroke}
+          fill="transparent"
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          className="stroke-brand-default transition-[stroke-dashoffset] duration-700 ease-out"
+          strokeWidth={stroke}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          fill="transparent"
+        />
+      </svg>
+      <span
+        aria-hidden
+        className="absolute font-bold leading-none text-accent-cabbage-default typo-caption1"
+      >
+        Lv {level}
+      </span>
+    </div>
+  );
+};
+
+// Persistent personal-progress bar. Deliberately spare: your level, the exact
+// amount you've unlocked (the same earned total the board and "Your
+// contribution" card show), one explicit next step, and the CTA — nothing else
+// competing for attention in the thumb zone.
+export const GivebackFundingBar = (): ReactElement => {
+  const { campaign, levels, userProfile, leaderboard, donationAccounting } =
+    useGivebackContext();
+  const { setActiveTab } = useGivebackNav();
+
+  // Money unlocked = the same earned total (unlocked minus rejected) shown
+  // everywhere else, so the bar never disagrees with the page.
+  const earned =
+    donationAccounting.unlockedDonationAmount -
+    donationAccounting.rejectedDonationAmount;
+
+  // Level fills are gated by the validated (approved) amount, matching the
+  // journey logic elsewhere.
+  const approved = userProfile.approvedContributionAmount;
+  const currentLevel =
+    levels.find((level) => level.levelNumber === userProfile.currentLevel) ??
+    levels[0];
+  const nextLevel = levels.find(
+    (level) => level.requiredApprovedAmount > approved,
+  );
+  const levelFloor = currentLevel.requiredApprovedAmount;
+  const levelPercentage = nextLevel
+    ? getGoalProgressPercentage(
+        approved - levelFloor,
+        nextLevel.requiredApprovedAmount - levelFloor,
+      )
+    : 100;
+  const amountToNextLevel = nextLevel
+    ? Math.max(0, nextLevel.requiredApprovedAmount - approved)
+    : 0;
+
+  // The single explicit next step: the exact amount that overtakes the next
+  // person on the board (the closest, most motivating goal).
+  const currentUser = leaderboard.find((entry) => entry.isCurrentUser);
+  const aboveUser = currentUser
+    ? leaderboard.find((entry) => entry.rank === currentUser.rank - 1)
+    : undefined;
+  const gapToNext =
+    aboveUser && currentUser
+      ? aboveUser.contributionAmount - currentUser.contributionAmount
+      : 0;
+
+  const renderNextStep = (): ReactElement => {
+    if (aboveUser && currentUser) {
+      return (
+        <>
+          <span className="font-bold text-accent-avocado-default">
+            {formatDonationAmount(gapToNext, currentUser.currency)}
+          </span>{' '}
+          to pass{' '}
+          <span className="font-bold text-text-primary">{aboveUser.name}</span>{' '}
+          and reach #{aboveUser.rank}
+        </>
+      );
+    }
+
+    if (nextLevel) {
+      return (
+        <>
+          <span className="font-bold text-accent-avocado-default">
+            {formatDonationAmount(amountToNextLevel, campaign.currency)}
+          </span>{' '}
+          to reach {nextLevel.name}
+        </>
+      );
+    }
+
+    return <>You&apos;re #1. Hold the crown.</>;
+  };
+
+  return (
+    <div className="pointer-events-none sticky bottom-0 z-3">
+      <div className="bg-background-default/80 pointer-events-auto relative mx-auto w-full max-w-6xl border-t border-border-subtlest-secondary px-4 py-3 backdrop-blur-xl tablet:rounded-t-16 tablet:border-x">
+        {/* Brand hairline along the top edge, matching the sticky tabs bar. */}
+        <div
+          aria-hidden
+          className="via-accent-cabbage-default/40 pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent to-transparent"
+        />
+
+        <FlexRow className="items-center justify-between gap-4">
+          <FlexRow className="min-w-0 flex-1 items-center gap-3">
+            <LevelProgressRing
+              level={currentLevel.levelNumber}
+              percentage={levelPercentage}
+            />
+
+            <FlexCol className="min-w-0 gap-0.5">
+              <FlexRow className="min-w-0 items-baseline gap-1.5">
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Callout}
+                  bold
+                  className="shrink-0 tabular-nums text-status-success"
+                >
+                  {formatDonationAmount(earned, campaign.currency)}
+                </Typography>
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Tertiary}
+                  className="truncate"
+                >
+                  unlocked
+                  <span className="hidden tablet:inline"> for your causes</span>
+                </Typography>
+              </FlexRow>
+
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Caption1}
+                color={TypographyColor.Tertiary}
+                className="truncate"
+              >
+                {renderNextStep()}
+              </Typography>
+            </FlexCol>
+          </FlexRow>
+
+          <Button
+            type="button"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Medium}
+            onClick={() => setActiveTab('actions')}
+            className="shrink-0"
+          >
+            Take action
+          </Button>
+        </FlexRow>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackFundingSummary.tsx b/packages/shared/src/features/giveback/components/GivebackFundingSummary.tsx
new file mode 100644
index 00000000000..091dac01225
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackFundingSummary.tsx
@@ -0,0 +1,79 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { ProgressBar } from '../../../components/fields/ProgressBar';
+import { useGivebackContext } from '../GivebackContext';
+import { useCountUp, useInView } from '../useGivebackMotion';
+import { formatDonationAmount, getGoalProgressPercentage } from '../utils';
+import { GivebackMeterShine } from './GivebackMeterShine';
+
+// Compact funding block for the hero sidebar — the Kickstarter "pledge panel"
+// summary: raised, goal, progress, backers and time left, at a glance.
+export const GivebackFundingSummary = (): ReactElement => {
+  const { campaign } = useGivebackContext();
+  const percentage = getGoalProgressPercentage(
+    campaign.approvedAmount,
+    campaign.goalAmount,
+  );
+  const { ref: meterRef, inView } = useInView<HTMLDivElement>();
+  const animatedPercentage = useCountUp(Math.round(percentage), inView);
+  return (
+    <FlexCol className="gap-3">
+      <FlexRow className="items-end gap-2">
+        <Typography tag={TypographyTag.Span} type={TypographyType.Title1} bold>
+          {formatDonationAmount(campaign.approvedAmount, campaign.currency)}
+        </Typography>
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Caption1}
+          color={TypographyColor.Tertiary}
+          className="pb-1"
+        >
+          pledged of{' '}
+          {formatDonationAmount(campaign.goalAmount, campaign.currency)} goal
+        </Typography>
+      </FlexRow>
+
+      <div className="relative" ref={meterRef}>
+        <ProgressBar
+          percentage={animatedPercentage}
+          shouldShowBg
+          className={{
+            wrapper: 'h-3 rounded-12',
+            bar: 'h-full rounded-12 transition-[width] duration-700 ease-out',
+            barColor:
+              'bg-gradient-to-r from-accent-avocado-default via-accent-cabbage-default to-accent-cheese-default',
+          }}
+        />
+        <GivebackMeterShine
+          percentage={animatedPercentage}
+          radiusClassName="rounded-12"
+        />
+      </div>
+
+      <FlexRow className="flex-wrap items-baseline gap-1">
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Footnote}
+          color={TypographyColor.StatusSuccess}
+          bold
+        >
+          {Math.round(percentage)}%
+        </Typography>
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+        >
+          funded · {campaign.backersCount.toLocaleString('en-US')} backers
+        </Typography>
+      </FlexRow>
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackHeadline.tsx b/packages/shared/src/features/giveback/components/GivebackHeadline.tsx
new file mode 100644
index 00000000000..831039218dd
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackHeadline.tsx
@@ -0,0 +1,34 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+
+interface GivebackHeadlineProps {
+  title: string;
+  highlight: string;
+  className?: string;
+}
+
+// One big two-part headline per tab: a white line plus a gradient payoff,
+// matching the hero. Sections beneath only carry small plain sub-titles.
+export const GivebackHeadline = ({
+  title,
+  highlight,
+  className,
+}: GivebackHeadlineProps): ReactElement => (
+  <Typography
+    tag={TypographyTag.H2}
+    type={TypographyType.LargeTitle}
+    bold
+    className={classNames('max-w-3xl', className)}
+  >
+    {title}
+    <span className="block bg-gradient-to-r from-accent-avocado-default via-accent-cabbage-default to-accent-cheese-default bg-clip-text text-transparent">
+      {highlight}
+    </span>
+  </Typography>
+);
diff --git a/packages/shared/src/features/giveback/components/GivebackHero.tsx b/packages/shared/src/features/giveback/components/GivebackHero.tsx
new file mode 100644
index 00000000000..f8dbeacf0ee
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackHero.tsx
@@ -0,0 +1,90 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import Logo, { LogoPosition } from '../../../components/Logo';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { GivebackStartPanel } from './GivebackStartPanel';
+import { GivebackCampaignVideo } from './GivebackCampaignVideo';
+import { GivebackFundingSummary } from './GivebackFundingSummary';
+
+export const GivebackHero = (): ReactElement => {
+  return (
+    <section className="relative w-full">
+      {/* Clip only the decorative glows, not the content, so hover effects on
+          buttons (scale + shadow) aren't cut off by the section bounds. */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 overflow-hidden"
+      >
+        <div className="bg-accent-cabbage-default/25 absolute -left-24 -top-24 size-80 rounded-full blur-3xl motion-safe:animate-glow-pulse" />
+        <div
+          className="bg-accent-onion-default/20 absolute -right-10 top-10 size-72 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+          style={{ animationDelay: '1s' }}
+        />
+        <div
+          className="bg-accent-cheese-default/15 absolute -bottom-16 left-1/3 size-64 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+          style={{ animationDelay: '2s' }}
+        />
+      </div>
+
+      <FlexCol className="relative gap-10 py-2">
+        <FlexCol className="gap-2">
+          <FlexRow className="mb-6 w-fit items-center gap-3">
+            <Logo
+              position={LogoPosition.Initial}
+              logoClassName={{ container: 'h-6' }}
+            />
+            <span
+              aria-hidden
+              className="h-6 w-px bg-border-subtlest-tertiary"
+            />
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Title3}
+              color={TypographyColor.Primary}
+              bold
+            >
+              Giveback
+            </Typography>
+          </FlexRow>
+
+          <Typography
+            tag={TypographyTag.H1}
+            type={TypographyType.Title1}
+            bold
+            className="max-w-3xl"
+          >
+            Grow the community. Redirect the budget.
+            <span className="block bg-gradient-to-r from-accent-avocado-default via-accent-cabbage-default to-accent-cheese-default bg-clip-text text-transparent">
+              Fund good causes.
+            </span>
+          </Typography>
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Callout}
+            color={TypographyColor.Secondary}
+            className="max-w-2xl"
+          >
+            Ad giants don&apos;t need our money. The causes you care about do.
+            We redirect our growth budget to them, and you never pay a cent.
+          </Typography>
+        </FlexCol>
+
+        <div className="grid items-stretch gap-6 laptop:grid-cols-[1.45fr_1fr] laptop:gap-8">
+          <GivebackCampaignVideo />
+
+          <FlexCol className="h-full justify-center gap-5">
+            <GivebackFundingSummary />
+            <div className="via-accent-cabbage-default/30 h-px w-full bg-gradient-to-r from-transparent to-transparent" />
+            <GivebackStartPanel />
+          </FlexCol>
+        </div>
+      </FlexCol>
+    </section>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackLeaderboard.tsx b/packages/shared/src/features/giveback/components/GivebackLeaderboard.tsx
new file mode 100644
index 00000000000..81ff4fa0864
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackLeaderboard.tsx
@@ -0,0 +1,189 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { ArrowIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { useGivebackContext } from '../GivebackContext';
+import { useGivebackNav } from '../GivebackNavContext';
+import type { GivebackLeaderboardEntry } from '../types';
+import { formatDonationAmount } from '../utils';
+import { GivebackAvatar } from './GivebackContributorFaces';
+
+// Medal styling per podium place: gold / silver / bronze in food-palette tokens.
+const medalClassName: Record<number, string> = {
+  1: 'bg-accent-cheese-default text-black',
+  2: 'bg-surface-secondary text-text-primary',
+  3: 'bg-accent-bacon-default text-white',
+};
+
+// Flat, compact ranked row: a small medal-tinted rank chip for the podium
+// places, the avatar, the name, and the amount earned. No card chrome — rows
+// are separated by spacing and the viewer's row gets a brand tint.
+const LeaderboardRow = ({
+  entry,
+}: {
+  entry: GivebackLeaderboardEntry;
+}): ReactElement => (
+  <FlexRow
+    className={classNames(
+      'items-center gap-3 rounded-12 px-2.5 py-2 transition-colors',
+      entry.isCurrentUser && 'bg-accent-cabbage-flat',
+    )}
+  >
+    <span
+      className={classNames(
+        'flex size-6 shrink-0 items-center justify-center rounded-full font-bold tabular-nums typo-caption1',
+        medalClassName[entry.rank] ?? 'text-text-tertiary',
+        entry.rank === 1 && 'shadow-[0_0_10px_rgba(255,199,0,0.45)]',
+      )}
+    >
+      {entry.rank}
+    </span>
+    <GivebackAvatar src={entry.avatar} sizeClassName="size-7" />
+    <Typography
+      tag={TypographyTag.Span}
+      type={TypographyType.Footnote}
+      bold
+      className={classNames(
+        'min-w-0 flex-1 truncate',
+        entry.isCurrentUser && 'text-accent-cabbage-default',
+      )}
+    >
+      {entry.name}
+    </Typography>
+    <Typography
+      bold
+      type={TypographyType.Footnote}
+      className="shrink-0 tabular-nums text-status-success"
+    >
+      {formatDonationAmount(entry.contributionAmount, entry.currency)}
+    </Typography>
+  </FlexRow>
+);
+
+export const GivebackLeaderboard = (): ReactElement => {
+  const { leaderboard } = useGivebackContext();
+  const { setActiveTab } = useGivebackNav();
+
+  const currentUser = leaderboard.find((entry) => entry.isCurrentUser);
+  const aboveUser = currentUser
+    ? leaderboard.find((entry) => entry.rank === currentUser.rank - 1)
+    : undefined;
+  const gapToNext =
+    aboveUser && currentUser
+      ? aboveUser.contributionAmount - currentUser.contributionAmount
+      : 0;
+
+  return (
+    <FlexCol className="w-full gap-5">
+      <Typography tag={TypographyTag.H3} type={TypographyType.Title3} bold>
+        Weekly leaderboard
+      </Typography>
+
+      <FlexCol className="gap-0.5">
+        {leaderboard.map((entry) => (
+          <LeaderboardRow key={entry.id} entry={entry} />
+        ))}
+      </FlexCol>
+
+      {currentUser && (
+        <FlexCol className="gap-3 border-t border-border-subtlest-tertiary pt-4">
+          {/* Where you stand right now, with the climb CTA on the right. */}
+          <FlexRow className="items-center gap-3">
+            <GivebackAvatar src={currentUser.avatar} sizeClassName="size-9" />
+            <FlexCol className="min-w-0 flex-1">
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Caption1}
+                color={TypographyColor.Tertiary}
+                bold
+                className="uppercase tracking-wider"
+              >
+                Your rank
+              </Typography>
+              <FlexRow className="items-baseline gap-1.5">
+                <Typography
+                  tag={TypographyTag.Span}
+                  bold
+                  type={TypographyType.Title3}
+                  className="text-accent-cabbage-default"
+                >
+                  #{currentUser.rank}
+                </Typography>
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Tertiary}
+                >
+                  ·{' '}
+                  {formatDonationAmount(
+                    currentUser.contributionAmount,
+                    currentUser.currency,
+                  )}{' '}
+                  unlocked
+                </Typography>
+              </FlexRow>
+            </FlexCol>
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Primary}
+              onClick={() => setActiveTab('actions')}
+              className="shrink-0"
+            >
+              Take action
+            </Button>
+          </FlexRow>
+
+          {/* The climb: one explicit goal — how much closes the gap to the next
+              rank. Flat, no card: show who you're chasing, the exact amount
+              that overtakes them, and a labeled bar so it reads at a glance. */}
+          {aboveUser ? (
+            // One clean, scannable line: the exact gap to the next rank, with a
+            // climb cue. No bar — it read as a decorative glow and confused the
+            // meaning.
+            <FlexRow className="items-center gap-2">
+              <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-accent-avocado-flat text-accent-avocado-default">
+                <ArrowIcon size={IconSize.XSmall} />
+              </span>
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Footnote}
+                color={TypographyColor.Secondary}
+                className="min-w-0"
+              >
+                <span className="font-bold text-accent-avocado-default">
+                  {formatDonationAmount(gapToNext, currentUser.currency)}
+                </span>{' '}
+                more to pass{' '}
+                <span className="font-bold text-text-primary">
+                  {aboveUser.name}
+                </span>{' '}
+                and reach{' '}
+                <span className="font-bold text-text-primary">
+                  #{aboveUser.rank}
+                </span>
+              </Typography>
+            </FlexRow>
+          ) : (
+            <Typography bold type={TypographyType.Footnote}>
+              You&apos;re #1 — hold the crown.
+            </Typography>
+          )}
+        </FlexCol>
+      )}
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackLegalFooter.tsx b/packages/shared/src/features/giveback/components/GivebackLegalFooter.tsx
new file mode 100644
index 00000000000..a5de48e8aaa
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackLegalFooter.tsx
@@ -0,0 +1,46 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { privacyPolicy, termsOfService } from '../../../lib/constants';
+
+// Legal/footer home for the campaign. One quiet line: funding disclaimer on the
+// left, the terms/rules/privacy links on the right. Cookie policy is omitted on
+// purpose since the global cookie banner already covers it.
+const legalLinks: { label: string; href: string }[] = [
+  { label: 'Campaign rules', href: termsOfService },
+  { label: 'Terms of Service', href: termsOfService },
+  { label: 'Privacy Policy', href: privacyPolicy },
+];
+
+export const GivebackLegalFooter = (): ReactElement => (
+  <div className="flex w-full flex-col items-center justify-between gap-2 border-t border-border-subtlest-tertiary pt-5 text-center tablet:flex-row tablet:text-left">
+    <Typography
+      tag={TypographyTag.P}
+      type={TypographyType.Caption2}
+      color={TypographyColor.Quaternary}
+    >
+      Funded by daily.dev. Participants never pay. © {new Date().getFullYear()}{' '}
+      Daily Dev Ltd.
+    </Typography>
+
+    <FlexRow className="flex-wrap items-center justify-center gap-x-4 gap-y-1">
+      {legalLinks.map((link) => (
+        <a
+          key={link.label}
+          href={link.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-bold text-text-tertiary transition-colors typo-caption1 hover:text-text-primary"
+        >
+          {link.label}
+        </a>
+      ))}
+    </FlexRow>
+  </div>
+);
diff --git a/packages/shared/src/features/giveback/components/GivebackLiveTicker.tsx b/packages/shared/src/features/giveback/components/GivebackLiveTicker.tsx
new file mode 100644
index 00000000000..f6c9ab5172c
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackLiveTicker.tsx
@@ -0,0 +1,118 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useState } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexRow } from '../../../components/utilities';
+import { useGivebackContext } from '../GivebackContext';
+import { usePrefersReducedMotion } from '../useGivebackMotion';
+import { formatDonationAmount } from '../utils';
+
+// Playful, fabricated "seconds ago" labels so the strip reads as a live wire of
+// wins (the mock has no real timestamps). The cadence climbs then resets, which
+// keeps the casino-style "it's happening right now" energy.
+const TIME_LABELS = ['just now', '6s ago', '14s ago', '27s ago', '48s ago'];
+
+const ROTATE_MS = 3200;
+
+// A constantly-moving "win wire" of anonymized community wins. Borrowed from the
+// casino/arcade playbook: visible momentum + social proof + a little FOMO, right
+// at the top of the action hub so the community is the first thing you feel.
+export const GivebackLiveTicker = (): ReactElement | null => {
+  const { communityEvents } = useGivebackContext();
+  const reducedMotion = usePrefersReducedMotion();
+  const [index, setIndex] = useState(0);
+
+  const total = communityEvents.length;
+
+  useEffect(() => {
+    if (reducedMotion || total <= 1) {
+      return undefined;
+    }
+    const timer = window.setInterval(
+      () => setIndex((current) => (current + 1) % total),
+      ROTATE_MS,
+    );
+    return () => window.clearInterval(timer);
+  }, [reducedMotion, total]);
+
+  if (!total) {
+    return null;
+  }
+
+  const event = communityEvents[index % total];
+  const timeLabel = TIME_LABELS[index % TIME_LABELS.length];
+
+  return (
+    <FlexRow className="relative items-center gap-3 overflow-hidden">
+      <FlexRow className="shrink-0 items-center gap-1.5">
+        <span className="relative flex size-2">
+          <span className="bg-status-success/60 absolute inline-flex size-full rounded-full motion-safe:animate-glow-pulse" />
+          <span className="relative inline-flex size-2 rounded-full bg-status-success" />
+        </span>
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Caption2}
+          bold
+          className="uppercase tracking-wider text-status-success"
+        >
+          Live
+        </Typography>
+      </FlexRow>
+
+      <span
+        aria-hidden
+        className="h-4 w-px shrink-0 bg-border-subtlest-tertiary"
+      />
+
+      <FlexRow
+        key={`${event.id}-${index}`}
+        className="min-w-0 flex-1 items-center gap-2 motion-safe:animate-fade-slide-up"
+        style={{ animationDelay: '0ms' }}
+      >
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Footnote}
+          color={TypographyColor.Secondary}
+          className="min-w-0 truncate"
+        >
+          <span className="font-bold text-text-primary">
+            {event.actorLabel}
+          </span>{' '}
+          {event.actionLabel}
+          {event.causeName && (
+            <>
+              {' '}
+              for{' '}
+              <span className="font-bold text-text-primary">
+                {event.causeName}
+              </span>
+            </>
+          )}
+        </Typography>
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Caption2}
+          color={TypographyColor.Quaternary}
+          className="shrink-0"
+        >
+          {timeLabel}
+        </Typography>
+      </FlexRow>
+
+      <Typography
+        tag={TypographyTag.Span}
+        type={TypographyType.Footnote}
+        bold
+        className="shrink-0 tabular-nums text-status-success"
+      >
+        {event.amount
+          ? `+${formatDonationAmount(event.amount, event.currency)}`
+          : 'Love'}
+      </Typography>
+    </FlexRow>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackMascot.tsx b/packages/shared/src/features/giveback/components/GivebackMascot.tsx
new file mode 100644
index 00000000000..e40510f25a7
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackMascot.tsx
@@ -0,0 +1,63 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+
+// The daily.dev charm, themed as a "wish-granting genie" for Giveback: you make
+// a wish (pick a cause / take an action) and daily.dev grants it. Each section
+// can show a different mood/pose, so this stays a single reusable surface.
+export enum GivebackMascotMood {
+  Thoughtful = 'thoughtful',
+}
+
+// Single source of truth for the charm artwork so other surfaces (e.g. the
+// campaign video poster) can reuse the exact same image without duplicating it.
+export const GIVEBACK_CHARM_IMAGE = {
+  src: 'https://media.daily.dev/image/upload/s--d1dldAty--/f_auto,q_auto/v1780848838/public/daily.dev%20Charm%20-%20Giveback%20(1)',
+  alt: 'daily.dev charm celebrating community impact for the Giveback campaign',
+};
+
+const moodToAsset: Record<GivebackMascotMood, { src: string; alt: string }> = {
+  [GivebackMascotMood.Thoughtful]: GIVEBACK_CHARM_IMAGE,
+};
+
+interface GivebackMascotProps {
+  mood?: GivebackMascotMood;
+  className?: string;
+  imageClassName?: string;
+}
+
+export const GivebackMascot = ({
+  mood = GivebackMascotMood.Thoughtful,
+  className,
+  imageClassName,
+}: GivebackMascotProps): ReactElement => {
+  const asset = moodToAsset[mood];
+
+  return (
+    <div
+      className={classNames(
+        'pointer-events-none relative flex flex-col items-center gap-3',
+        className,
+      )}
+    >
+      <div className="relative flex items-center justify-center">
+        {/* Magic "lamp smoke" glow behind the charm. */}
+        <span
+          aria-hidden
+          className="bg-accent-cabbage-default/20 absolute inset-0 m-auto size-3/4 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+        />
+        {/* The render sits on solid black; `mix-blend-screen` drops the black so
+            the charm reads as floating on the dark page. */}
+        <img
+          src={asset.src}
+          alt={asset.alt}
+          loading="lazy"
+          className={classNames(
+            'relative h-44 w-auto select-none object-contain mix-blend-screen motion-safe:animate-mascot-bob tablet:h-56',
+            imageClassName,
+          )}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackMeterShine.tsx b/packages/shared/src/features/giveback/components/GivebackMeterShine.tsx
new file mode 100644
index 00000000000..2475819b52a
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackMeterShine.tsx
@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+
+interface GivebackMeterShineProps {
+  percentage: number;
+  /** Match the meter's corner radius so the sweep stays inside the bar. */
+  radiusClassName?: string;
+}
+
+// Casino-style light sweep that rides across the filled portion of a funding
+// meter, making the money raised feel alive. Clipped to `percentage` so the
+// shine only travels over what's already been pledged.
+export const GivebackMeterShine = ({
+  percentage,
+  radiusClassName = 'rounded-16',
+}: GivebackMeterShineProps): ReactElement => (
+  <div
+    aria-hidden
+    className={classNames(
+      'pointer-events-none absolute inset-y-0 left-0 overflow-hidden',
+      radiusClassName,
+    )}
+    style={{ width: `${Math.min(Math.max(percentage, 0), 100)}%` }}
+  >
+    <div className="via-white/55 absolute inset-y-0 -left-1/4 w-1/4 -skew-x-12 bg-gradient-to-r from-transparent to-transparent motion-safe:animate-meter-shine" />
+  </div>
+);
diff --git a/packages/shared/src/features/giveback/components/GivebackOnboardingBar.tsx b/packages/shared/src/features/giveback/components/GivebackOnboardingBar.tsx
new file mode 100644
index 00000000000..fdf22b0d57c
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackOnboardingBar.tsx
@@ -0,0 +1,74 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { ArrowIcon } from '../../../components/icons';
+import { useGivebackContext } from '../GivebackContext';
+
+interface GivebackOnboardingBarProps {
+  /** Confirms the picked causes and advances out of onboarding. */
+  onContinue: () => void;
+  continueLabel?: string;
+}
+
+// Sticky bottom bar for the cause-picker onboarding step, mirroring the level
+// bar (GivebackFundingBar). Rendered at the page root so it pins to the viewport
+// bottom and keeps the confirm CTA one tap away while scrolling the cause list.
+export const GivebackOnboardingBar = ({
+  onContinue,
+  continueLabel = 'Continue',
+}: GivebackOnboardingBarProps): ReactElement => {
+  const { userProfile } = useGivebackContext();
+  const selectedCount = userProfile.selectedCauseIds.length;
+
+  return (
+    <div className="pointer-events-none sticky bottom-0 z-3">
+      <div className="bg-background-default/80 pointer-events-auto relative mx-auto w-full max-w-6xl border-t border-border-subtlest-secondary px-4 py-3 backdrop-blur-xl tablet:rounded-t-16 tablet:border-x">
+        <FlexRow className="items-center justify-between gap-4">
+          <FlexCol className="min-w-0 gap-0.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Callout}
+              bold
+            >
+              {selectedCount} {selectedCount === 1 ? 'cause' : 'causes'}{' '}
+              selected
+            </Typography>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+              className="truncate"
+            >
+              daily.dev funds every donation. Pick at least one to continue.
+            </Typography>
+          </FlexCol>
+
+          <Button
+            type="button"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Medium}
+            icon={<ArrowIcon className="rotate-90" />}
+            iconPosition={ButtonIconPosition.Right}
+            disabled={selectedCount === 0}
+            onClick={onContinue}
+            className="shrink-0"
+          >
+            {continueLabel}
+          </Button>
+        </FlexRow>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackPage.spec.tsx b/packages/shared/src/features/giveback/components/GivebackPage.spec.tsx
new file mode 100644
index 00000000000..6a67dfeee61
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackPage.spec.tsx
@@ -0,0 +1,656 @@
+import React from 'react';
+import { render as renderWithProviders, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { GivebackPage } from './GivebackPage';
+import { GivebackProvider } from '../GivebackContext';
+import { GivebackNavProvider } from '../GivebackNavContext';
+import { CommunityGoalProgress } from './CommunityGoalProgress';
+import { GivebackReviewToggle } from './GivebackReviewToggle';
+import { ActionCatalog } from './ActionCatalog';
+import { GivebackLeaderboard } from './GivebackLeaderboard';
+import { GivebackCelebration } from './GivebackCelebration';
+import { CauseSelection } from './CauseSelection';
+import { CommunityImpactSection } from './CommunityImpactSection';
+import { GivebackCommunityActivity } from './GivebackCommunityActivity';
+import { GeoGateFallback } from './GeoGateFallback';
+
+// The giveback page always renders under a QueryClientProvider in the app, and
+// the modals portal through RootPortal (which reads the request protocol from
+// the query client). Wrap every render so that dependency is always satisfied.
+const render = (
+  ui: React.ReactElement,
+): ReturnType<typeof renderWithProviders> =>
+  renderWithProviders(
+    <QueryClientProvider client={new QueryClient()}>{ui}</QueryClientProvider>,
+  );
+
+describe('GivebackPage', () => {
+  it('reveals the tabbed experience after opting in from the hero gateway', async () => {
+    render(<GivebackPage />);
+
+    expect(
+      screen.getByText(/Grow the community\. Redirect the budget\./),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Fund good causes.')).toBeInTheDocument();
+    expect(screen.getByText('Join the campaign')).toBeInTheDocument();
+
+    // Tabs stay hidden until the visitor opts in.
+    expect(
+      screen.queryByRole('tab', { name: 'Impact' }),
+    ).not.toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+
+    // Onboarding: pick causes first, with no tabs revealed yet.
+    expect(
+      screen.getByText('You pick causes you care about.'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Continue' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('tab', { name: 'Take action' }),
+    ).not.toBeInTheDocument();
+
+    // Confirming causes reveals the tabs, starting on "Take action".
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    expect(
+      screen.getByRole('heading', { name: /Take a small action/ }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/genuinely\s+appreciate them/)).toBeInTheDocument();
+
+    // Causes is no longer a tab or a gear button — the picked causes are
+    // recapped on the Why tab, where they can be suggested or edited.
+    expect(
+      screen.queryByRole('tab', { name: 'Causes' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Causes' }),
+    ).not.toBeInTheDocument();
+
+    // Leaderboard is no longer its own tab — it lives inside Impact alongside
+    // community progress, live activity, and the personal journey.
+    expect(
+      screen.queryByRole('tab', { name: 'Leaderboard' }),
+    ).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Impact' }));
+    expect(
+      screen.getByText('See the impact we build together.'),
+    ).toBeInTheDocument();
+    // The leaderboard (weekly board + your rank) now renders inside Impact.
+    expect(screen.getByText('Weekly leaderboard')).toBeInTheDocument();
+    expect(screen.getByText('Your rank')).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: "You're a Helping hand" }),
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Campaign' }));
+    expect(screen.getByText('Big tech buys ads.')).toBeInTheDocument();
+    // The picked causes are recapped here, with suggest/edit actions.
+    expect(
+      screen.getByText('Where your actions send the money'),
+    ).toBeInTheDocument();
+    // The FAQ now lives at the bottom of the Campaign tab (no separate tab).
+    expect(screen.getByText('Frequently asked questions')).toBeInTheDocument();
+    expect(screen.getByText('Does this cost me anything?')).toBeInTheDocument();
+    expect(screen.getByText('Still have a question?')).toBeInTheDocument();
+
+    // Updates, Comments and FAQ tabs were removed — live activity moved to
+    // Impact and the FAQ is folded into the Campaign tab.
+    expect(
+      screen.queryByRole('tab', { name: 'Updates' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('tab', { name: 'Comments' }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('tab', { name: 'FAQ' })).not.toBeInTheDocument();
+  });
+
+  it('recaps selected causes on the Campaign tab and edits them in a portal', async () => {
+    render(<GivebackPage />);
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Campaign' }));
+
+    expect(
+      screen.getByText('Where your actions send the money'),
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Edit' }));
+
+    expect(screen.getByText('Customize your causes')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /Python Software Foundation/ }),
+    ).toBeInTheDocument();
+  });
+
+  it('lets a visitor send a question from the FAQ on the Campaign tab', async () => {
+    render(<GivebackPage />);
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Campaign' }));
+
+    await userEvent.type(
+      screen.getByLabelText('Your question'),
+      'When do donations get sent?',
+    );
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Send question' }),
+    );
+
+    expect(screen.getByText(/we'll get back to you soon/)).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Send question' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows the mocked goal progress at 50% after opting in', async () => {
+    render(<GivebackPage />);
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Impact' }));
+
+    expect(screen.getAllByText('$5,000')[0]).toBeInTheDocument();
+    expect(screen.getAllByText(/pledged of\s+\$10,000/).length).toBeGreaterThan(
+      0,
+    );
+    expect(screen.getByText('50% funded')).toBeInTheDocument();
+  });
+
+  it('windows the level journey and reveals more on demand', async () => {
+    render(<GivebackPage />);
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Impact' }));
+
+    // Welcome gift is surfaced, and the ladder runs to 20 levels.
+    expect(screen.getByText('$10 to your causes, on us')).toBeInTheDocument();
+    expect(screen.getByText(/Level 3 of 20/)).toBeInTheDocument();
+
+    // Far-off levels are hidden until the visitor expands the journey.
+    expect(screen.queryByText(/Legend\s+·/)).not.toBeInTheDocument();
+    await userEvent.click(
+      screen.getByRole('button', { name: /Show \d+ more levels/ }),
+    );
+    expect(screen.getByText(/Legend\s+·/)).toBeInTheDocument();
+  });
+});
+
+describe('GivebackLeaderboard', () => {
+  const renderLeaderboard = (setActiveTab = jest.fn()) => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="impact"
+          setActiveTab={setActiveTab}
+        >
+          <GivebackLeaderboard />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+  };
+
+  it('ranks contributors and shows the viewer row', () => {
+    renderLeaderboard();
+
+    expect(screen.getByText('Weekly leaderboard')).toBeInTheDocument();
+    expect(screen.getByText('Ana Pereira')).toBeInTheDocument();
+    expect(screen.getByText('Your rank')).toBeInTheDocument();
+    expect(screen.getByText(/more to pass/)).toBeInTheDocument();
+    expect(screen.getAllByText('Yuki Tanaka').length).toBeGreaterThan(0);
+  });
+
+  it('sends the viewer to the actions tab from the climb CTA', async () => {
+    const setActiveTab = jest.fn();
+    renderLeaderboard(setActiveTab);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Take action' }));
+
+    expect(setActiveTab).toHaveBeenCalledWith('actions');
+  });
+});
+
+describe('ActionCatalog', () => {
+  it('renders actions without per-user status text', () => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="actions"
+          setActiveTab={jest.fn()}
+        >
+          <ActionCatalog />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+    expect(
+      screen.getByText('Share the Giveback launch post'),
+    ).toBeInTheDocument();
+    // Per-user status copy was removed in favor of community engagement.
+    expect(screen.queryByText(/Counted toward goal/)).not.toBeInTheDocument();
+  });
+
+  it('promotes the leaderboard and surfaces per-card details', async () => {
+    const setActiveTab = jest.fn();
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="actions"
+          setActiveTab={setActiveTab}
+        >
+          <ActionCatalog />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+    // The top-contributor spotlight is replaced by a promo that drives people
+    // to the leaderboard (which now lives on the Impact tab).
+    expect(
+      screen.getByText(/developers contributed this week/),
+    ).toBeInTheDocument();
+    await userEvent.click(
+      screen.getByRole('button', { name: /See leaderboard/ }),
+    );
+    expect(setActiveTab).toHaveBeenCalledWith('impact');
+
+    // The card keeps a single explicit title plus the supporting details:
+    // social proof and the "Popular" badge.
+    expect(
+      screen.getByText('Share the Giveback launch post'),
+    ).toBeInTheDocument();
+    expect(screen.getAllByText(/contributed/).length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Popular').length).toBeGreaterThan(0);
+  });
+
+  it('filters actions by category', async () => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="actions"
+          setActiveTab={jest.fn()}
+        >
+          <ActionCatalog />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'Referrals' }));
+
+    // Expand so the assertion covers every referral action, not just page one.
+    const showMore = screen.queryByRole('button', {
+      name: /Show more actions/,
+    });
+    if (showMore) {
+      await userEvent.click(showMore);
+    }
+
+    expect(screen.getByText('Invite a developer friend')).toBeInTheDocument();
+    expect(screen.getByText('Refer a dev team')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Share the Giveback launch post'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('sorts actions with the sort control', async () => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="actions"
+          setActiveTab={jest.fn()}
+        >
+          <ActionCatalog />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+    await userEvent.selectOptions(
+      screen.getByLabelText('Sort actions'),
+      'value-desc',
+    );
+
+    // Expand the grid so the assertion isn't limited to the first page.
+    await userEvent.click(
+      screen.getByRole('button', { name: /Show more actions/ }),
+    );
+
+    expect(screen.getByText('Refer a dev team')).toBeInTheDocument();
+  });
+
+  it('submits eligible action proof as pending validation', async () => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="actions"
+          setActiveTab={jest.fn()}
+        >
+          <ActionCatalog />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+    expect(screen.getByText('Your contribution')).toBeInTheDocument();
+    expect(screen.getByText('$110')).toBeInTheDocument();
+
+    // The catalog opens to a short list; expand it to reach this action.
+    await userEvent.click(
+      screen.getByRole('button', { name: /Show more actions/ }),
+    );
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Submit proof for Refer a dev team' }),
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getAllByText('Refer a dev team')).toHaveLength(2);
+
+    await userEvent.type(
+      screen.getByPlaceholderText(
+        'Add any context that helps us validate this.',
+      ),
+      'Introduced daily.dev to the platform team.',
+    );
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Submit for review' }),
+    );
+
+    expect(screen.getByText('Proof submitted')).toBeInTheDocument();
+    expect(screen.getByText('You helped unlock $40')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        "Added to your contribution. We'll only subtract it if validation fails.",
+      ),
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Done' }));
+
+    expect(screen.getByText('$150')).toBeInTheDocument();
+  });
+
+  it('fires the win-moment celebration when an action is submitted', async () => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="actions"
+          setActiveTab={jest.fn()}
+        >
+          <ActionCatalog />
+          <GivebackCelebration />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+    expect(screen.queryByText('added to the pot')).not.toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: /Show more actions/ }),
+    );
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Submit proof for Refer a dev team' }),
+    );
+    await userEvent.type(
+      screen.getByPlaceholderText(
+        'Add any context that helps us validate this.',
+      ),
+      'Introduced daily.dev to the platform team.',
+    );
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Submit for review' }),
+    );
+
+    expect(screen.getByText('added to the pot')).toBeInTheDocument();
+    expect(
+      screen.getByText('You unlocked $40 for your causes.'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('CauseSelection', () => {
+  const renderCauseSelection = () =>
+    render(
+      <GivebackProvider>
+        <CauseSelection onContinue={() => {}} />
+      </GivebackProvider>,
+    );
+
+  it('selects causes from the grid and suggests new ones', async () => {
+    renderCauseSelection();
+
+    // Python Software Foundation is selected by default in the card grid.
+    expect(
+      screen.getByRole('button', { name: /Python Software Foundation/ }),
+    ).toHaveAttribute('aria-pressed', 'true');
+
+    // Toggle another recommended cause directly from the grid.
+    await userEvent.click(screen.getByRole('button', { name: /freeCodeCamp/ }));
+    expect(
+      screen.getByRole('button', { name: /freeCodeCamp/ }),
+    ).toHaveAttribute('aria-pressed', 'true');
+
+    // Suggesting a cause happens in a focused modal.
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Suggest a cause' }),
+    );
+    await userEvent.type(
+      screen.getByLabelText('Cause name'),
+      'OpenJS Foundation',
+    );
+    await userEvent.type(
+      screen.getByLabelText('Website'),
+      'https://openjsf.org',
+    );
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Suggest cause' }),
+    );
+
+    expect(screen.getByText('OpenJS Foundation')).toBeInTheDocument();
+    expect(screen.getByText('pending review')).toBeInTheDocument();
+  });
+
+  it('filters causes by category', async () => {
+    renderCauseSelection();
+
+    // The "Recommended" filter is active by default, so non-recommended causes
+    // (e.g. GiveWell Top Charities Fund) stay hidden.
+    expect(screen.getByRole('button', { name: 'Recommended' })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    );
+    expect(
+      screen.queryByRole('button', { name: /GiveWell Top Charities Fund/ }),
+    ).not.toBeInTheDocument();
+
+    // Switching to its category reveals it.
+    await userEvent.click(screen.getByRole('button', { name: 'Global good' }));
+
+    expect(
+      screen.getByRole('button', { name: /GiveWell Top Charities Fund/ }),
+    ).toBeInTheDocument();
+  });
+});
+
+describe('Love actions in the catalog', () => {
+  it('shows love actions with appreciation messaging and no submission CTA', () => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="actions"
+          setActiveTab={jest.fn()}
+        >
+          <ActionCatalog />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+    expect(
+      screen.getByText('Leave an honest mobile app review'),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/genuinely\s+appreciate them/)).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', {
+        name: 'Submit proof for Leave an honest mobile app review',
+      }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('opens a compliant appreciation view when a love action is clicked', async () => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={jest.fn()}
+          activeTab="actions"
+          setActiveTab={jest.fn()}
+        >
+          <ActionCatalog />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+    // Love cards are clickable, but route to an appreciation view with no
+    // reward/proof flow (they can't be incentivized).
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: 'Show some love: Leave an honest mobile app review',
+      }),
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Show some love')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Submit for review' }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Got it' })).toBeInTheDocument();
+  });
+});
+
+describe('CommunityImpactSection', () => {
+  it('renders the human-outcome impact grid', () => {
+    render(
+      <GivebackProvider>
+        <CommunityImpactSection />
+      </GivebackProvider>,
+    );
+
+    expect(screen.getByText('What your work turns into')).toBeInTheDocument();
+    expect(screen.getByText('3,200 learners')).toBeInTheDocument();
+    expect(screen.getByText('freeCodeCamp')).toBeInTheDocument();
+  });
+
+  it('renders anonymized live community activity', () => {
+    render(
+      <GivebackProvider>
+        <GivebackCommunityActivity />
+      </GivebackProvider>,
+    );
+
+    expect(
+      screen.getByText(/shared the Giveback launch post/),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Live community activity')).toBeInTheDocument();
+  });
+
+  it('lets a visitor add a sponsorship from the funding progress', async () => {
+    render(<GivebackPage />);
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    await userEvent.click(screen.getByRole('tab', { name: 'Impact' }));
+
+    // Sponsors live on the funding meter now — there is no separate tab.
+    expect(
+      screen.queryByRole('tab', { name: 'Sponsors' }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('Sponsors topping up the pot')).toBeInTheDocument();
+    expect(screen.getByText(/10 sponsors/)).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Become a sponsor' }),
+    );
+
+    await userEvent.type(screen.getByLabelText('Company name'), 'Globex Corp');
+    await userEvent.click(screen.getByRole('button', { name: '$5,000' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Add $5,000' }));
+
+    // The modal closes and the new sponsorship lands in the count.
+    expect(screen.queryByLabelText('Company name')).not.toBeInTheDocument();
+    expect(screen.getByText(/11 sponsors/)).toBeInTheDocument();
+  });
+});
+
+describe('GivebackReviewToggle', () => {
+  it('updates the community goal progress when a preset is selected', async () => {
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={() => undefined}
+          activeTab="impact"
+          setActiveTab={() => undefined}
+        >
+          <CommunityGoalProgress />
+        </GivebackNavProvider>
+        <GeoGateFallback />
+        <CommunityImpactSection />
+        <GivebackReviewToggle />
+      </GivebackProvider>,
+    );
+
+    expect(screen.getByText('50% funded')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: '100%' }));
+
+    expect(screen.getByText('100% funded')).toBeInTheDocument();
+  });
+
+  it('simulates geo and feed states from the QA panel', async () => {
+    render(
+      <GivebackProvider>
+        <GeoGateFallback />
+        <GivebackCommunityActivity />
+        <GivebackReviewToggle />
+      </GivebackProvider>,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'Hide feed' }));
+    expect(screen.getByText('Community feed hidden')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'waitlist' }));
+    expect(
+      screen.getByText('Giveback is not available in your country yet'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/shared/src/features/giveback/components/GivebackPage.tsx b/packages/shared/src/features/giveback/components/GivebackPage.tsx
new file mode 100644
index 00000000000..8ad2fd2efeb
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackPage.tsx
@@ -0,0 +1,289 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { isDevelopment } from '../../../lib/constants';
+import { GivebackProvider, useGivebackContext } from '../GivebackContext';
+import { GivebackNavProvider } from '../GivebackNavContext';
+import type { GivebackTabId } from '../GivebackNavContext';
+import { GivebackHero } from './GivebackHero';
+import { CommunityGoalProgress } from './CommunityGoalProgress';
+import { PersonalRoadmap } from './PersonalRoadmap';
+import { GivebackReviewToggle } from './GivebackReviewToggle';
+import { ActionCatalog } from './ActionCatalog';
+import { GivebackLeaderboard } from './GivebackLeaderboard';
+import { CauseSelection } from './CauseSelection';
+import { GeoGateFallback } from './GeoGateFallback';
+import { BudgetRedirectStory } from './BudgetRedirectStory';
+import { GivebackHeadline } from './GivebackHeadline';
+import { GivebackFundingBar } from './GivebackFundingBar';
+import { GivebackOnboardingBar } from './GivebackOnboardingBar';
+import { GivebackFaq } from './GivebackFaq';
+import { GivebackCommunityActivity } from './GivebackCommunityActivity';
+import { GivebackReveal } from './GivebackReveal';
+import { GivebackSponsorTiers } from './GivebackSponsorTiers';
+import { GivebackSelectedCauses } from './GivebackSelectedCauses';
+import { GivebackLegalFooter } from './GivebackLegalFooter';
+import { GivebackBackground } from './GivebackBackground';
+import { GivebackCelebration } from './GivebackCelebration';
+
+// The first run is guided: opt in from the hero, pick causes (onboarding, no
+// tabs yet), then the tabs appear. After onboarding, the picked causes are
+// recapped on the Why tab, where they can be suggested or edited (portal).
+const tabs: { id: GivebackTabId; label: string }[] = [
+  { id: 'actions', label: 'Take action' },
+  { id: 'impact', label: 'Impact' },
+  { id: 'why', label: 'Campaign' },
+];
+
+const ONBOARDING_HEADER = {
+  title: 'We fund developers, not ads.',
+  highlight: 'You pick causes you care about.',
+};
+
+// One big two-part headline per tab: a white line plus a gradient payoff,
+// matching the hero. Sections beneath only carry small plain sub-titles.
+const tabHeaders: Record<GivebackTabId, { title: string; highlight: string }> =
+  {
+    impact: {
+      title: 'See the impact we build together.',
+      highlight: 'And where you rank.',
+    },
+    why: {
+      title: 'Big tech buys ads.',
+      highlight: 'We fund developers.',
+    },
+    actions: {
+      title: 'Take a small action.',
+      highlight: 'We turn it into a donation.',
+    },
+  };
+
+const GivebackTabHeader = ({ tab }: { tab: GivebackTabId }): ReactElement => (
+  <GivebackHeadline {...tabHeaders[tab]} />
+);
+
+const renderActivePanel = (tab: GivebackTabId): ReactElement => {
+  switch (tab) {
+    case 'actions':
+      return <ActionCatalog />;
+    case 'why':
+      // The headline rides inside the story so the charm sits beside both the
+      // title and the subtitle (the generic tab header is skipped for this tab).
+      return (
+        <FlexCol className="gap-8">
+          <BudgetRedirectStory headline={tabHeaders.why} />
+          <GivebackSelectedCauses />
+          <GivebackFaq />
+        </FlexCol>
+      );
+    case 'impact':
+    default:
+      return (
+        <FlexCol className="gap-12">
+          <CommunityGoalProgress />
+          <div className="grid items-start gap-10 border-t border-border-subtlest-tertiary pt-12 laptop:grid-cols-2 laptop:gap-14">
+            <GivebackLeaderboard />
+            <GivebackCommunityActivity />
+          </div>
+          <PersonalRoadmap />
+        </FlexCol>
+      );
+  }
+};
+
+const GivebackPageContent = (): ReactElement => {
+  const { geoAvailability } = useGivebackContext();
+  const [hasStarted, setHasStarted] = useState(false);
+  // Picking causes is onboarding: until it's confirmed the tabs stay hidden.
+  const [hasOnboarded, setHasOnboarded] = useState(false);
+  const [activeTab, setActiveTabState] = useState<GivebackTabId>('actions');
+  const tabsRef = useRef<HTMLDivElement>(null);
+
+  const scrollToTabs = useCallback(() => {
+    if (
+      typeof window === 'undefined' ||
+      typeof window.requestAnimationFrame !== 'function'
+    ) {
+      return;
+    }
+    window.requestAnimationFrame(() => {
+      const node = tabsRef.current;
+      if (node && typeof node.scrollIntoView === 'function') {
+        node.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    });
+  }, []);
+
+  const setActiveTab = useCallback(
+    (tab: GivebackTabId) => {
+      setActiveTabState(tab);
+      scrollToTabs();
+    },
+    [scrollToTabs],
+  );
+
+  // Opting in drops the visitor on the cause picker first (onboarding, no tabs).
+  const start = useCallback(() => {
+    setHasStarted(true);
+  }, []);
+
+  // Confirming causes finishes onboarding and reveals the tabs on "Take action".
+  const completeOnboarding = useCallback(() => {
+    setHasOnboarded(true);
+    setActiveTabState('actions');
+    scrollToTabs();
+  }, [scrollToTabs]);
+
+  // Scroll to the freshly revealed content (onboarding, then tabs) as it mounts.
+  useEffect(() => {
+    if (hasStarted) {
+      scrollToTabs();
+    }
+  }, [hasStarted, hasOnboarded, scrollToTabs]);
+
+  // Geo-blocked: replace the whole experience with a single explicit gate.
+  if (geoAvailability !== 'available') {
+    return <GeoGateFallback />;
+  }
+
+  return (
+    <GivebackNavProvider
+      hasStarted={hasStarted}
+      start={start}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+    >
+      <div className="relative min-h-page w-full">
+        <GivebackBackground />
+
+        <FlexCol className="relative mx-auto w-full max-w-6xl gap-14 px-4 py-8 tablet:py-14">
+          <GivebackReveal>
+            <GivebackHero />
+          </GivebackReveal>
+
+          <GivebackReveal>
+            <GivebackSponsorTiers />
+          </GivebackReveal>
+
+          {hasStarted && !hasOnboarded && (
+            <div ref={tabsRef} className="scroll-mt-16">
+              <GivebackReveal>
+                <FlexCol className="gap-8">
+                  <GivebackHeadline {...ONBOARDING_HEADER} />
+                  <CauseSelection
+                    onContinue={completeOnboarding}
+                    stickyContinue
+                  />
+                </FlexCol>
+              </GivebackReveal>
+            </div>
+          )}
+
+          {hasOnboarded && (
+            // The ref sits on this (non-sticky) wrapper rather than the sticky
+            // strip below: scrolling a pinned sticky element into view is a
+            // no-op, so anchoring here reliably brings the tab strip to the top
+            // of the viewport (where it then pins) on every tab switch.
+            <FlexCol ref={tabsRef} className="gap-10">
+              <div className="bg-background-default/80 sticky top-0 z-3 mx-[calc(50%-50vw)] w-screen border-b border-border-subtlest-tertiary backdrop-blur-xl">
+                <div
+                  aria-hidden
+                  className="via-accent-cabbage-default/40 pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent to-transparent"
+                />
+                {/* Inner wrapper re-centers the tabs to the page content width so
+                    they line up with the panels below, while the strip's blur and
+                    bottom border above bleed the full viewport width. */}
+                <div className="mx-auto w-full max-w-6xl px-4">
+                  <FlexRow className="items-center justify-between gap-2">
+                    <div
+                      role="tablist"
+                      aria-label="Giveback sections"
+                      className="flex overflow-x-auto"
+                    >
+                      {tabs.map((tab) => {
+                        const selected = activeTab === tab.id;
+                        return (
+                          <button
+                            key={tab.id}
+                            type="button"
+                            role="tab"
+                            id={`giveback-tab-${tab.id}`}
+                            aria-selected={selected}
+                            aria-controls={`giveback-panel-${tab.id}`}
+                            onClick={() => setActiveTab(tab.id)}
+                            className={classNames(
+                              'relative shrink-0 whitespace-nowrap p-2 py-4 text-center font-normal transition-colors duration-200 typo-callout active:scale-95',
+                              selected
+                                ? 'text-text-primary'
+                                : 'text-text-tertiary hover:text-text-primary',
+                            )}
+                          >
+                            <span
+                              className={classNames(
+                                'flex flex-row items-center gap-1 rounded-10 border px-3 py-1.5 transition-colors duration-200',
+                                selected
+                                  ? 'border-border-subtlest-secondary'
+                                  : 'border-transparent hover:border-border-subtlest-tertiary',
+                              )}
+                            >
+                              {tab.label}
+                            </span>
+                            {selected && (
+                              <span
+                                aria-hidden
+                                className="absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-4 bg-text-primary"
+                              />
+                            )}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </FlexRow>
+                </div>
+              </div>
+
+              <div
+                key={activeTab}
+                role="tabpanel"
+                id={`giveback-panel-${activeTab}`}
+                aria-labelledby={`giveback-tab-${activeTab}`}
+                className="relative"
+              >
+                <GivebackReveal>
+                  <FlexCol className="gap-8">
+                    {activeTab !== 'why' && (
+                      <GivebackTabHeader tab={activeTab} />
+                    )}
+                    {renderActivePanel(activeTab)}
+                  </FlexCol>
+                </GivebackReveal>
+              </div>
+            </FlexCol>
+          )}
+
+          <GivebackReveal>
+            <GivebackLegalFooter />
+          </GivebackReveal>
+        </FlexCol>
+
+        {hasStarted && !hasOnboarded && (
+          <GivebackOnboardingBar onContinue={completeOnboarding} />
+        )}
+
+        {hasOnboarded && <GivebackFundingBar />}
+      </div>
+
+      <GivebackCelebration />
+    </GivebackNavProvider>
+  );
+};
+
+export const GivebackPage = (): ReactElement => {
+  return (
+    <GivebackProvider>
+      <GivebackPageContent />
+      {isDevelopment && <GivebackReviewToggle />}
+    </GivebackProvider>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackReveal.tsx b/packages/shared/src/features/giveback/components/GivebackReveal.tsx
new file mode 100644
index 00000000000..112eb0f4416
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackReveal.tsx
@@ -0,0 +1,36 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { useInView } from '../useGivebackMotion';
+
+interface GivebackRevealProps {
+  children: ReactNode;
+  className?: string;
+  /** Stagger the reveal, in ms. */
+  delay?: number;
+}
+
+// Fades and slides content up the first time it scrolls into view. Honors
+// reduced-motion via the motion-reduce utilities so the final state always
+// renders without movement.
+export const GivebackReveal = ({
+  children,
+  className,
+  delay = 0,
+}: GivebackRevealProps): ReactElement => {
+  const { ref, inView } = useInView<HTMLDivElement>();
+
+  return (
+    <div
+      ref={ref}
+      style={delay ? { transitionDelay: `${delay}ms` } : undefined}
+      className={classNames(
+        'transition-all duration-700 ease-out motion-reduce:!translate-y-0 motion-reduce:!opacity-100 motion-reduce:transition-none',
+        inView ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackReviewToggle.tsx b/packages/shared/src/features/giveback/components/GivebackReviewToggle.tsx
new file mode 100644
index 00000000000..3e34fe6411e
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackReviewToggle.tsx
@@ -0,0 +1,260 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { useGivebackContext } from '../GivebackContext';
+import { GivebackUserActionStatus } from '../types';
+import { getUserActionStatusLabel } from '../statusLabels';
+
+const GOAL_PRESETS = [0, 25, 50, 99, 100];
+const LEVEL_PRESETS = [1, 2, 3, 4, 5];
+
+const ACTION_STATUS_PRESETS = [
+  GivebackUserActionStatus.PendingReview,
+  GivebackUserActionStatus.Approved,
+  GivebackUserActionStatus.Rejected,
+  GivebackUserActionStatus.NeedsMoreInfo,
+  GivebackUserActionStatus.CountedTowardGoal,
+];
+
+export const GivebackReviewToggle = (): ReactElement => {
+  const [isOpen, setIsOpen] = useState(true);
+  const {
+    actions,
+    celebrate,
+    celebrationState,
+    dismissCelebration,
+    geoAvailability,
+    goalPercentage,
+    setCelebrationState,
+    setGeoAvailability,
+    setGoalPercentage,
+    setShowCommunityFeed,
+    setUserActionStatus,
+    setUserLevel,
+    showCommunityFeed,
+    userLevel,
+  } = useGivebackContext();
+  const [selectedActionId, setSelectedActionId] = useState(
+    actions[0]?.id ?? '',
+  );
+
+  return (
+    <FlexCol className="fixed bottom-4 right-4 z-modal max-h-[calc(100vh-2rem)] w-[19rem] gap-3 overflow-y-auto rounded-16 border border-border-subtlest-secondary bg-background-popover p-4 shadow-2">
+      <FlexRow className="items-center justify-between gap-2">
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Caption1}
+          color={TypographyColor.Tertiary}
+          bold
+        >
+          Giveback QA panel
+        </Typography>
+        <Button
+          type="button"
+          size={ButtonSize.XSmall}
+          variant={ButtonVariant.Subtle}
+          onClick={() => setIsOpen((prev) => !prev)}
+        >
+          {isOpen ? 'Hide' : 'Show'}
+        </Button>
+      </FlexRow>
+
+      {isOpen && (
+        <>
+          <FlexCol className="gap-1.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption2}
+              color={TypographyColor.Tertiary}
+            >
+              Community goal
+            </Typography>
+            <FlexRow className="flex-wrap gap-1">
+              {GOAL_PRESETS.map((preset) => (
+                <Button
+                  key={preset}
+                  type="button"
+                  size={ButtonSize.XSmall}
+                  variant={
+                    goalPercentage === preset
+                      ? ButtonVariant.Primary
+                      : ButtonVariant.Float
+                  }
+                  onClick={() => setGoalPercentage(preset)}
+                  className={classNames('min-w-12')}
+                >
+                  {preset}%
+                </Button>
+              ))}
+            </FlexRow>
+          </FlexCol>
+
+          <FlexCol className="gap-1.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption2}
+              color={TypographyColor.Tertiary}
+            >
+              Your level
+            </Typography>
+            <FlexRow className="flex-wrap gap-1">
+              {LEVEL_PRESETS.map((preset) => (
+                <Button
+                  key={preset}
+                  type="button"
+                  size={ButtonSize.XSmall}
+                  variant={
+                    userLevel === preset
+                      ? ButtonVariant.Primary
+                      : ButtonVariant.Float
+                  }
+                  onClick={() => setUserLevel(preset)}
+                >
+                  {preset}
+                </Button>
+              ))}
+            </FlexRow>
+          </FlexCol>
+
+          <FlexCol className="gap-1.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption2}
+              color={TypographyColor.Tertiary}
+            >
+              Action state
+            </Typography>
+            <select
+              className="rounded-8 border border-border-subtlest-tertiary bg-surface-float px-2 py-1 text-text-primary typo-caption1"
+              value={selectedActionId}
+              onChange={(event) => setSelectedActionId(event.target.value)}
+            >
+              {actions.map((action) => (
+                <option key={action.id} value={action.id}>
+                  {action.title}
+                </option>
+              ))}
+            </select>
+            <FlexRow className="flex-wrap gap-1">
+              {ACTION_STATUS_PRESETS.map((status) => (
+                <Button
+                  key={status}
+                  type="button"
+                  size={ButtonSize.XSmall}
+                  variant={ButtonVariant.Float}
+                  onClick={() => setUserActionStatus(selectedActionId, status)}
+                >
+                  {getUserActionStatusLabel(status)}
+                </Button>
+              ))}
+            </FlexRow>
+          </FlexCol>
+
+          <FlexCol className="gap-1.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption2}
+              color={TypographyColor.Tertiary}
+            >
+              Community feed
+            </Typography>
+            <FlexRow className="flex-wrap gap-1">
+              {[true, false].map((value) => (
+                <Button
+                  key={value ? 'show-feed' : 'hide-feed'}
+                  type="button"
+                  size={ButtonSize.XSmall}
+                  variant={
+                    showCommunityFeed === value
+                      ? ButtonVariant.Primary
+                      : ButtonVariant.Float
+                  }
+                  onClick={() => setShowCommunityFeed(value)}
+                >
+                  {value ? 'Show feed' : 'Hide feed'}
+                </Button>
+              ))}
+            </FlexRow>
+          </FlexCol>
+
+          <FlexCol className="gap-1.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption2}
+              color={TypographyColor.Tertiary}
+            >
+              Celebration
+            </Typography>
+            <FlexRow className="flex-wrap gap-1">
+              {(['none', 'milestone', 'complete'] as const).map((value) => (
+                <Button
+                  key={value}
+                  type="button"
+                  size={ButtonSize.XSmall}
+                  variant={
+                    celebrationState === value
+                      ? ButtonVariant.Primary
+                      : ButtonVariant.Float
+                  }
+                  onClick={() => {
+                    setCelebrationState(value);
+                    if (value === 'none') {
+                      dismissCelebration();
+                      return;
+                    }
+                    celebrate({
+                      amount: 40,
+                      milestone: value === 'milestone' ? 50 : 100,
+                      complete: value === 'complete',
+                    });
+                  }}
+                >
+                  {value}
+                </Button>
+              ))}
+            </FlexRow>
+          </FlexCol>
+
+          <FlexCol className="gap-1.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption2}
+              color={TypographyColor.Tertiary}
+            >
+              Geo availability
+            </Typography>
+            <FlexRow className="flex-wrap gap-1">
+              {(['available', 'waitlist'] as const).map((value) => (
+                <Button
+                  key={value}
+                  type="button"
+                  size={ButtonSize.XSmall}
+                  variant={
+                    geoAvailability === value
+                      ? ButtonVariant.Primary
+                      : ButtonVariant.Float
+                  }
+                  onClick={() => setGeoAvailability(value)}
+                >
+                  {value}
+                </Button>
+              ))}
+            </FlexRow>
+          </FlexCol>
+        </>
+      )}
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackSection.tsx b/packages/shared/src/features/giveback/components/GivebackSection.tsx
new file mode 100644
index 00000000000..c82e037e692
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSection.tsx
@@ -0,0 +1,83 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+
+interface GivebackSectionProps {
+  id?: string;
+  eyebrow?: string;
+  /** Optional plain sub-heading. The big gradient title now lives once per tab. */
+  title?: string;
+  description?: ReactNode;
+  headerActions?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}
+
+// Open, editorial section shell. No border box, background, or top divider —
+// sections within a tab are separated by spacing alone, and the single big
+// gradient title is rendered once per tab above the panel.
+export const GivebackSection = ({
+  id,
+  eyebrow,
+  title,
+  description,
+  headerActions,
+  className,
+  children,
+}: GivebackSectionProps): ReactElement => {
+  const hasHeader = Boolean(eyebrow || title || description || headerActions);
+
+  return (
+    <section
+      id={id}
+      className={classNames('relative w-full scroll-mt-16', className)}
+    >
+      <FlexCol className="gap-6">
+        {hasHeader && (
+          <FlexRow className="flex-wrap items-start justify-between gap-4">
+            <FlexCol className="max-w-2xl gap-1.5">
+              {eyebrow && (
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Tertiary}
+                  bold
+                  className="uppercase tracking-wider"
+                >
+                  {eyebrow}
+                </Typography>
+              )}
+              {title && (
+                <Typography
+                  tag={TypographyTag.H3}
+                  type={TypographyType.Title3}
+                  bold
+                >
+                  {title}
+                </Typography>
+              )}
+              {description && (
+                <Typography
+                  tag={TypographyTag.P}
+                  type={TypographyType.Callout}
+                  color={TypographyColor.Secondary}
+                >
+                  {description}
+                </Typography>
+              )}
+            </FlexCol>
+            {headerActions}
+          </FlexRow>
+        )}
+        {children}
+      </FlexCol>
+    </section>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackSelectedCauses.tsx b/packages/shared/src/features/giveback/components/GivebackSelectedCauses.tsx
new file mode 100644
index 00000000000..c2e134c5ff0
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSelectedCauses.tsx
@@ -0,0 +1,160 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { EditIcon, OpenLinkIcon, PlusIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { useGivebackContext } from '../GivebackContext';
+import { GivebackSection } from './GivebackSection';
+import { CauseEmblem } from './CauseEmblem';
+import { GivebackCausesModal } from './GivebackCausesModal';
+import { CauseSelectionModal } from './CauseSelectionModal';
+
+// "Your causes" recap on the Why tab. Shows only the causes the visitor picked,
+// with quick actions to suggest a new one or open the full picker (portal) to
+// edit. Editing lives here now instead of a gear button in the tab bar.
+export const GivebackSelectedCauses = (): ReactElement => {
+  const { causes, suggestedCauses, userProfile } = useGivebackContext();
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isSuggestOpen, setIsSuggestOpen] = useState(false);
+
+  // Keep each cause's position in the full list so the fallback emblem tint
+  // stays stable between the picker and this recap.
+  const selectedCauses = causes
+    .map((cause, index) => ({ cause, index }))
+    .filter(({ cause }) => userProfile.selectedCauseIds.includes(cause.id));
+
+  return (
+    <GivebackSection
+      id="giveback-your-causes"
+      title="Your causes"
+      description="Where your actions send the money"
+    >
+      {selectedCauses.length > 0 ? (
+        <FlexCol className="gap-4">
+          <div className="grid gap-3 tablet:grid-cols-2 laptop:grid-cols-3">
+            {selectedCauses.map(({ cause, index }) => (
+              <FlexRow
+                key={cause.id}
+                className="items-center gap-3 rounded-16 bg-surface-float p-3"
+              >
+                <CauseEmblem cause={cause} index={index} />
+                <FlexCol className="min-w-0 flex-1 gap-0.5">
+                  <Typography
+                    bold
+                    type={TypographyType.Callout}
+                    className="truncate"
+                  >
+                    {cause.name}
+                  </Typography>
+                  {cause.category && (
+                    <Typography
+                      tag={TypographyTag.Span}
+                      type={TypographyType.Caption1}
+                      color={TypographyColor.Tertiary}
+                      className="truncate"
+                    >
+                      {cause.category}
+                    </Typography>
+                  )}
+                </FlexCol>
+                <a
+                  href={cause.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`Learn more about ${cause.name}`}
+                  className="flex size-8 shrink-0 items-center justify-center rounded-10 text-text-tertiary transition-colors hover:bg-surface-hover hover:text-text-primary"
+                >
+                  <OpenLinkIcon size={IconSize.Small} />
+                </a>
+              </FlexRow>
+            ))}
+          </div>
+          <FlexRow className="flex-wrap items-center gap-2">
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Float}
+              icon={<EditIcon />}
+              onClick={() => setIsEditOpen(true)}
+            >
+              Edit
+            </Button>
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Float}
+              icon={<PlusIcon />}
+              onClick={() => setIsSuggestOpen(true)}
+            >
+              Suggest a cause
+            </Button>
+          </FlexRow>
+        </FlexCol>
+      ) : (
+        <FlexCol className="items-start gap-3 rounded-16 bg-surface-float p-5">
+          <Typography
+            type={TypographyType.Callout}
+            color={TypographyColor.Secondary}
+          >
+            You haven&apos;t picked any causes yet. Choose where your actions
+            send the money.
+          </Typography>
+          <Button
+            type="button"
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Primary}
+            icon={<EditIcon />}
+            onClick={() => setIsEditOpen(true)}
+          >
+            Pick your causes
+          </Button>
+        </FlexCol>
+      )}
+
+      {suggestedCauses.length > 0 && (
+        <FlexRow className="flex-wrap items-center gap-2">
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            Your suggestions:
+          </Typography>
+          {suggestedCauses.map((cause) => (
+            <FlexRow
+              key={cause.id}
+              className="items-center gap-1.5 rounded-8 bg-surface-float px-2.5 py-1"
+            >
+              <Typography type={TypographyType.Caption1} bold>
+                {cause.name}
+              </Typography>
+              <Typography
+                type={TypographyType.Caption2}
+                color={TypographyColor.Tertiary}
+              >
+                pending review
+              </Typography>
+            </FlexRow>
+          ))}
+        </FlexRow>
+      )}
+
+      {isEditOpen && (
+        <GivebackCausesModal onClose={() => setIsEditOpen(false)} />
+      )}
+      {isSuggestOpen && (
+        <CauseSelectionModal onClose={() => setIsSuggestOpen(false)} />
+      )}
+    </GivebackSection>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackSponsorModal.tsx b/packages/shared/src/features/giveback/components/GivebackSponsorModal.tsx
new file mode 100644
index 00000000000..44105d16911
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSponsorModal.tsx
@@ -0,0 +1,253 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { RootPortal } from '../../../components/tooltips/Portal';
+import { useToastNotification } from '../../../hooks/useToastNotification';
+import { useGivebackContext } from '../GivebackContext';
+import { GivebackSponsorType } from '../types';
+import {
+  formatDonationAmount,
+  getSponsorTier,
+  sponsorTierLabel,
+} from '../utils';
+
+interface GivebackSponsorModalProps {
+  onClose: () => void;
+}
+
+const sponsorTypes: { id: GivebackSponsorType; label: string }[] = [
+  { id: GivebackSponsorType.Company, label: 'A company' },
+  { id: GivebackSponsorType.Individual, label: 'An individual' },
+];
+
+const amountPresets = [100, 250, 500, 1000, 5000];
+
+export const GivebackSponsorModal = ({
+  onClose,
+}: GivebackSponsorModalProps): ReactElement => {
+  const { campaign, sponsorCampaign } = useGivebackContext();
+  const { displayToast } = useToastNotification();
+  const [type, setType] = useState<GivebackSponsorType>(
+    GivebackSponsorType.Company,
+  );
+  const [name, setName] = useState('');
+  const [amount, setAmount] = useState(1000);
+  const [message, setMessage] = useState('');
+
+  const isCompany = type === GivebackSponsorType.Company;
+  const canSubmit = name.trim().length > 0 && amount > 0;
+
+  const onSubmit = () => {
+    if (!canSubmit) {
+      return;
+    }
+    sponsorCampaign({ name, type, amount, message });
+    displayToast(
+      `Thank you! ${formatDonationAmount(
+        amount,
+        campaign.currency,
+      )} added to the pot.`,
+    );
+    onClose();
+  };
+
+  return (
+    <RootPortal>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
+      <div
+        onClick={(event) => {
+          if (event.target === event.currentTarget) {
+            onClose();
+          }
+        }}
+        className="fixed inset-0 z-modal flex items-center justify-center bg-overlay-primary-pepper px-4 backdrop-blur-sm"
+      >
+        <section
+          aria-modal="true"
+          role="dialog"
+          aria-labelledby="giveback-sponsor-title"
+          className="relative flex w-full max-w-[34rem] flex-col overflow-hidden rounded-24 border border-border-subtlest-secondary bg-background-default shadow-2"
+        >
+          <div
+            aria-hidden
+            className="bg-accent-cabbage-default/20 pointer-events-none absolute -right-20 -top-20 size-56 rounded-full blur-3xl"
+          />
+
+          <FlexCol className="relative gap-2 p-5 pb-3 tablet:px-6 tablet:pt-6">
+            <Typography
+              bold
+              id="giveback-sponsor-title"
+              tag={TypographyTag.H2}
+              type={TypographyType.Title3}
+            >
+              Sponsor the campaign
+            </Typography>
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Tertiary}
+            >
+              Top up the budget directly. Every dollar you add goes straight to
+              the causes. daily.dev covers the platform.
+            </Typography>
+          </FlexCol>
+
+          <FlexCol className="relative gap-4 px-5 py-3 tablet:px-6">
+            <FlexCol className="gap-2">
+              <Typography bold type={TypographyType.Footnote}>
+                I&apos;m sponsoring as
+              </Typography>
+              <FlexRow className="gap-2">
+                {sponsorTypes.map((option) => (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => setType(option.id)}
+                    aria-pressed={type === option.id}
+                    className={classNames(
+                      'flex-1 rounded-12 border px-3 py-2 text-center font-bold transition-colors typo-callout',
+                      type === option.id
+                        ? 'border-accent-cabbage-default bg-accent-cabbage-flat text-accent-cabbage-default'
+                        : 'border-border-subtlest-tertiary text-text-tertiary hover:text-text-primary',
+                    )}
+                  >
+                    {option.label}
+                  </button>
+                ))}
+              </FlexRow>
+            </FlexCol>
+
+            <label
+              htmlFor="giveback-sponsor-name"
+              className="flex flex-col gap-2"
+            >
+              <Typography bold type={TypographyType.Footnote}>
+                {isCompany ? 'Company name' : 'Your name'}
+              </Typography>
+              <input
+                id="giveback-sponsor-name"
+                className="rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+                placeholder={isCompany ? 'Acme Inc.' : 'Jane Developer'}
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+              />
+            </label>
+
+            <FlexCol className="gap-2">
+              <Typography bold type={TypographyType.Footnote}>
+                Amount
+              </Typography>
+              <FlexRow className="flex-wrap gap-2">
+                {amountPresets.map((preset) => (
+                  <button
+                    key={preset}
+                    type="button"
+                    onClick={() => setAmount(preset)}
+                    aria-pressed={amount === preset}
+                    className={classNames(
+                      'rounded-10 border px-3 py-1.5 font-bold tabular-nums transition-colors typo-footnote',
+                      amount === preset
+                        ? 'border-accent-cabbage-default bg-accent-cabbage-flat text-accent-cabbage-default'
+                        : 'border-border-subtlest-tertiary text-text-tertiary hover:text-text-primary',
+                    )}
+                  >
+                    {formatDonationAmount(preset, campaign.currency)}
+                  </button>
+                ))}
+              </FlexRow>
+              <FlexRow className="items-center gap-2">
+                <span className="text-text-tertiary typo-callout">
+                  {campaign.currency === 'USD' ? '$' : campaign.currency}
+                </span>
+                <input
+                  id="giveback-sponsor-amount"
+                  type="number"
+                  min={1}
+                  aria-label="Custom amount"
+                  className="w-32 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+                  value={amount}
+                  onChange={(event) =>
+                    setAmount(
+                      Math.max(0, Math.floor(Number(event.target.value))),
+                    )
+                  }
+                />
+                {amount > 0 && (
+                  <Typography
+                    type={TypographyType.Caption1}
+                    color={TypographyColor.Tertiary}
+                  >
+                    {sponsorTierLabel[getSponsorTier(amount)]} sponsor
+                  </Typography>
+                )}
+              </FlexRow>
+            </FlexCol>
+
+            <label
+              htmlFor="giveback-sponsor-message"
+              className="flex flex-col gap-2"
+            >
+              <FlexRow className="items-center gap-2">
+                <Typography bold type={TypographyType.Footnote}>
+                  Message
+                </Typography>
+                <Typography
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Tertiary}
+                >
+                  optional
+                </Typography>
+              </FlexRow>
+              <textarea
+                id="giveback-sponsor-message"
+                className="min-h-20 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+                placeholder="Why are you backing this?"
+                value={message}
+                onChange={(event) => setMessage(event.target.value)}
+              />
+            </label>
+          </FlexCol>
+
+          <FlexRow className="items-center justify-between gap-2 border-t border-border-subtlest-tertiary p-4 tablet:px-6">
+            <Typography
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+            >
+              Demo only. No payment is taken.
+            </Typography>
+            <FlexRow className="items-center gap-2">
+              <Button
+                type="button"
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Tertiary}
+                onClick={onClose}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Primary}
+                disabled={!canSubmit}
+                onClick={onSubmit}
+              >
+                Add {formatDonationAmount(amount, campaign.currency)}
+              </Button>
+            </FlexRow>
+          </FlexRow>
+        </section>
+      </div>
+    </RootPortal>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackSponsorTiers.tsx b/packages/shared/src/features/giveback/components/GivebackSponsorTiers.tsx
new file mode 100644
index 00000000000..647458cff2d
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSponsorTiers.tsx
@@ -0,0 +1,249 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+
+type SponsorCoverTier = 'gold' | 'silver';
+
+interface SponsorWallLogo {
+  name: string;
+  /** Brand logo SVG (open logo library). */
+  logoUrl: string;
+  url: string;
+  /** Higher tiers get a larger size; untiered sponsors fall back to bronze. */
+  tier?: SponsorCoverTier;
+}
+
+// Example sponsor logos for the campaign cover. Each logo keeps its real brand
+// colors and sits on a white "medal card" so it stays legible on the dark
+// cover regardless of its source colors. Tiers are framed in their medal color
+// (gold / silver / bronze) and stepped in size, so the hierarchy is obvious and
+// the wall is colorful. URLs use each brand's light-background wordmark/logo so
+// the colors render correctly. These mirror the dev brands daily.dev partners
+// with (see business.daily.dev). Swap for the confirmed sponsor list at launch.
+const sponsors: SponsorWallLogo[] = [
+  {
+    name: 'Vercel',
+    logoUrl: 'https://svgl.app/library/vercel_wordmark.svg',
+    url: 'https://vercel.com',
+    tier: 'gold',
+  },
+  {
+    name: 'Stripe',
+    logoUrl: 'https://svgl.app/library/stripe_wordmark.svg',
+    url: 'https://stripe.com',
+    tier: 'gold',
+  },
+  {
+    name: 'GitHub',
+    logoUrl: 'https://svgl.app/library/github_wordmark_light.svg',
+    url: 'https://github.com',
+    tier: 'silver',
+  },
+  {
+    name: 'Supabase',
+    logoUrl: 'https://svgl.app/library/supabase_wordmark_light.svg',
+    url: 'https://supabase.com',
+    tier: 'silver',
+  },
+  {
+    name: 'Sentry',
+    logoUrl: 'https://svgl.app/library/sentry.svg',
+    url: 'https://sentry.io',
+    tier: 'silver',
+  },
+  {
+    name: 'Datadog',
+    logoUrl: 'https://svgl.app/library/datadog.svg',
+    url: 'https://datadoghq.com',
+  },
+  {
+    name: 'Algolia',
+    logoUrl: 'https://svgl.app/library/algolia.svg',
+    url: 'https://algolia.com',
+  },
+  {
+    name: 'Prisma',
+    logoUrl: 'https://svgl.app/library/prisma.svg',
+    url: 'https://prisma.io',
+  },
+];
+
+// An airy, editorial "sponsor wall" that matches the page's soft, pastel tone:
+// brand-colored logos rest on gently floating white chips, tiers are introduced
+// with eyebrow-style labels and parted by soft gradient hairlines (no boxes,
+// rings, or accent bars). Gold sits first, largest, and inside a warm glow, so
+// the gold > silver > bronze ranking is obvious without any harsh chrome.
+const goldSponsors = sponsors.filter((sponsor) => sponsor.tier === 'gold');
+const silverSponsors = sponsors.filter((sponsor) => sponsor.tier === 'silver');
+const bronzeSponsors = sponsors.filter((sponsor) => !sponsor.tier);
+
+interface SponsorTier {
+  key: string;
+  name: string;
+  /** Tier marker dot + label color (soft, on-brand accent tints). */
+  dotClass: string;
+  labelClass: string;
+  /** Chip padding + logo height, stepping down gold → silver → bronze. */
+  chipClass: string;
+  imgClass: string;
+  sponsors: SponsorWallLogo[];
+}
+
+const sponsorTiers: SponsorTier[] = [
+  {
+    key: 'gold',
+    name: 'Gold',
+    dotClass: 'bg-accent-cheese-default',
+    labelClass: 'text-accent-cheese-default',
+    chipClass: 'px-4 py-2.5',
+    imgClass: 'h-8 tablet:h-9',
+    sponsors: goldSponsors,
+  },
+  {
+    key: 'silver',
+    name: 'Silver',
+    dotClass: 'bg-text-quaternary',
+    labelClass: 'text-text-secondary',
+    chipClass: 'px-3.5 py-2',
+    imgClass: 'h-6 tablet:h-7',
+    sponsors: silverSponsors,
+  },
+  {
+    key: 'bronze',
+    name: 'Bronze',
+    dotClass: 'bg-accent-bacon-default',
+    labelClass: 'text-accent-bacon-default',
+    chipClass: 'px-3 py-1.5',
+    imgClass: 'h-5 tablet:h-6',
+    sponsors: bronzeSponsors,
+  },
+];
+
+const SponsorChip = ({
+  sponsor,
+  chipClass,
+  imgClass,
+}: {
+  sponsor: SponsorWallLogo;
+  chipClass: string;
+  imgClass: string;
+}): ReactElement => (
+  <a
+    href={sponsor.url}
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label={sponsor.name}
+    className={classNames(
+      'flex shrink-0 items-center rounded-12 bg-white shadow-[0_10px_28px_-12px_rgba(0,0,0,0.6)] transition-transform duration-200 hover:-translate-y-1 motion-reduce:transform-none',
+      chipClass,
+    )}
+  >
+    <img
+      src={sponsor.logoUrl}
+      alt={`${sponsor.name} logo`}
+      loading="lazy"
+      className={classNames('w-auto max-w-[130px] object-contain', imgClass)}
+    />
+  </a>
+);
+
+// A tier is shown inline: its dot + name label, then its logo chips. Gold gets
+// its own row; silver and bronze share the row beneath it, left-aligned.
+const SponsorTierGroup = ({ tier }: { tier: SponsorTier }): ReactElement => (
+  <FlexRow className="flex-wrap items-center gap-x-4 gap-y-3">
+    <FlexRow className="shrink-0 items-center gap-2">
+      <span className={classNames('size-2 rounded-full', tier.dotClass)} />
+      <Typography
+        tag={TypographyTag.Span}
+        type={TypographyType.Caption1}
+        bold
+        className={classNames('uppercase tracking-wider', tier.labelClass)}
+      >
+        {tier.name}
+      </Typography>
+    </FlexRow>
+    {tier.sponsors.map((sponsor) => (
+      <SponsorChip
+        key={sponsor.name}
+        sponsor={sponsor}
+        chipClass={tier.chipClass}
+        imgClass={tier.imgClass}
+      />
+    ))}
+  </FlexRow>
+);
+
+export const GivebackSponsorTiers = (): ReactElement => {
+  const goldTier = sponsorTiers.find(
+    (tier) => tier.key === 'gold' && tier.sponsors.length > 0,
+  );
+  const lowerTiers = sponsorTiers.filter(
+    (tier) => tier.key !== 'gold' && tier.sponsors.length > 0,
+  );
+
+  return (
+    <section className="relative w-full">
+      {/* Soft brand glows, echoing the hero, so the wall feels native to the
+          page rather than a hard panel dropped on top of it. */}
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 overflow-hidden"
+      >
+        <div className="bg-accent-cheese-default/15 absolute -left-16 -top-10 size-56 rounded-full blur-3xl motion-safe:animate-glow-pulse" />
+        <div
+          className="bg-accent-cabbage-default/12 absolute -right-12 bottom-0 size-52 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+          style={{ animationDelay: '1.4s' }}
+        />
+      </div>
+
+      <FlexCol className="relative gap-6">
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Caption1}
+          color={TypographyColor.Tertiary}
+          bold
+          className="uppercase tracking-wider"
+        >
+          Sponsored by
+        </Typography>
+
+        <FlexCol className="gap-6">
+          {goldTier && (
+            <div className="relative">
+              {/* Warm halo so the headline tier glows softly above the rest. */}
+              <div aria-hidden className="pointer-events-none absolute inset-0">
+                <div className="bg-accent-cheese-default/12 absolute -left-6 -top-4 h-28 w-72 rounded-full blur-3xl" />
+              </div>
+              <div className="relative">
+                <SponsorTierGroup tier={goldTier} />
+              </div>
+            </div>
+          )}
+
+          {lowerTiers.length > 0 && (
+            <>
+              {goldTier && (
+                <div
+                  aria-hidden
+                  className="h-px w-full bg-gradient-to-r from-transparent via-border-subtlest-tertiary to-transparent"
+                />
+              )}
+              <FlexRow className="flex-wrap items-center gap-x-10 gap-y-4">
+                {lowerTiers.map((tier) => (
+                  <SponsorTierGroup key={tier.key} tier={tier} />
+                ))}
+              </FlexRow>
+            </>
+          )}
+        </FlexCol>
+      </FlexCol>
+    </section>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackStartPanel.tsx b/packages/shared/src/features/giveback/components/GivebackStartPanel.tsx
new file mode 100644
index 00000000000..a19e2948432
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackStartPanel.tsx
@@ -0,0 +1,54 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import {
+  Button,
+  ButtonIconPosition,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { MoveToIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { useGivebackNav } from '../GivebackNavContext';
+
+// Hero gateway: one clear decision above the fold — "do you want to join?".
+// Picking causes and taking actions happens after opting in, so the hero stays
+// focused and easy to consume.
+export const GivebackStartPanel = (): ReactElement => {
+  const { start } = useGivebackNav();
+
+  return (
+    <FlexCol className="gap-4">
+      <Typography
+        tag={TypographyTag.P}
+        type={TypographyType.Title3}
+        color={TypographyColor.Primary}
+        bold
+      >
+        Take small actions and we turn them into{' '}
+        <span className="bg-gradient-to-r from-accent-avocado-default via-accent-cabbage-default to-accent-cheese-default bg-clip-text text-transparent">
+          real donations
+        </span>
+        . daily.dev funds every cent, so you never pay.
+      </Typography>
+
+      <Button
+        type="button"
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Large}
+        icon={<MoveToIcon size={IconSize.Size16} />}
+        iconPosition={ButtonIconPosition.Right}
+        onClick={start}
+        className="shadow-2-cabbage transition-transform duration-200 ease-out hover:scale-[1.02]"
+      >
+        Join the campaign
+      </Button>
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackSubmissionModal.tsx b/packages/shared/src/features/giveback/components/GivebackSubmissionModal.tsx
new file mode 100644
index 00000000000..bab3da2e343
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSubmissionModal.tsx
@@ -0,0 +1,329 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import ImageInput from '../../../components/fields/ImageInput';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { RootPortal } from '../../../components/tooltips/Portal';
+import type { GivebackAction } from '../types';
+import { useGivebackContext } from '../GivebackContext';
+import { formatDonationAmount } from '../utils';
+import { actionCategoryLabels, actionValidationLabels } from '../statusLabels';
+
+interface GivebackSubmissionModalProps {
+  action: GivebackAction;
+  onClose: () => void;
+}
+
+const getDialogTitle = (isLove: boolean, isSubmitted: boolean): string => {
+  if (isLove) {
+    return 'Show some love';
+  }
+  if (isSubmitted) {
+    return 'Proof submitted';
+  }
+  return 'Submit proof';
+};
+
+export const GivebackSubmissionModal = ({
+  action,
+  onClose,
+}: GivebackSubmissionModalProps): ReactElement => {
+  const { submitAction } = useGivebackContext();
+  const linkInputId = `giveback-proof-link-${action.id}`;
+  const noteInputId = `giveback-proof-note-${action.id}`;
+  const [evidenceLink, setEvidenceLink] = useState('');
+  const [evidenceImage, setEvidenceImage] = useState<string>();
+  const [note, setNote] = useState('');
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const canSubmit = useMemo(() => {
+    const hasLink = !action.requiresLink || evidenceLink.trim().length > 0;
+    const hasImage = !action.requiresImage || !!evidenceImage;
+    const hasNote = !action.requiresNote || note.trim().length > 0;
+
+    return hasLink && hasImage && hasNote;
+  }, [
+    action.requiresImage,
+    action.requiresLink,
+    action.requiresNote,
+    evidenceImage,
+    evidenceLink,
+    note,
+  ]);
+
+  // "Just for love" actions carry no reward or donation by design, so they skip
+  // the proof flow entirely and show a compliant appreciation view instead.
+  const isLove = action.isLoveAction;
+
+  const onSubmit = () => {
+    if (!canSubmit) {
+      return;
+    }
+
+    submitAction({
+      actionId: action.id,
+      evidenceLink: evidenceLink.trim() || undefined,
+      evidenceImage,
+      note: note.trim() || undefined,
+    });
+    setIsSubmitted(true);
+  };
+
+  return (
+    <RootPortal>
+      <div className="fixed inset-0 z-modal flex items-center justify-center bg-overlay-primary-pepper px-4 backdrop-blur-sm">
+        <section
+          aria-modal="true"
+          role="dialog"
+          aria-labelledby="giveback-submission-title"
+          className="relative flex max-h-[calc(100vh-2rem)] w-full max-w-[35rem] flex-col overflow-hidden rounded-24 border border-border-subtlest-secondary bg-background-default shadow-2"
+        >
+          <div
+            aria-hidden
+            className="bg-accent-cabbage-default/20 pointer-events-none absolute -right-20 -top-20 size-56 rounded-full blur-3xl"
+          />
+          <div
+            aria-hidden
+            className="bg-accent-onion-default/20 pointer-events-none absolute -bottom-24 -left-16 size-56 rounded-full blur-3xl"
+          />
+          <FlexCol className="gap-5 p-5 tablet:p-6">
+            <FlexCol className="gap-2">
+              <Typography
+                bold
+                id="giveback-submission-title"
+                tag={TypographyTag.H2}
+                type={TypographyType.Title3}
+              >
+                {getDialogTitle(isLove, isSubmitted)}
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                className="text-text-tertiary"
+              >
+                {!isLove && isSubmitted
+                  ? "Added to your contribution. We'll only subtract it if validation fails."
+                  : action.title}
+              </Typography>
+            </FlexCol>
+
+            {isLove && (
+              <FlexCol className="gap-4">
+                <FlexCol className="gap-3 rounded-18 border border-accent-cabbage-default bg-accent-cabbage-flat p-5">
+                  <Typography
+                    bold
+                    type={TypographyType.Title4}
+                    className="text-accent-cabbage-default"
+                  >
+                    Just for love
+                  </Typography>
+                  <Typography
+                    type={TypographyType.Callout}
+                    className="text-text-tertiary"
+                  >
+                    This one&apos;s a voluntary thank-you — no reward or
+                    donation is attached. We just genuinely appreciate it.
+                  </Typography>
+                </FlexCol>
+                {action.description && (
+                  <Typography
+                    type={TypographyType.Footnote}
+                    className="text-text-tertiary"
+                  >
+                    {action.description}
+                  </Typography>
+                )}
+                {action.instructions && (
+                  <Typography
+                    type={TypographyType.Footnote}
+                    className="text-text-tertiary"
+                  >
+                    {action.instructions}
+                  </Typography>
+                )}
+              </FlexCol>
+            )}
+
+            {!isLove && isSubmitted && (
+              <FlexCol className="relative gap-4 overflow-hidden rounded-18 border border-accent-cabbage-default bg-accent-cabbage-flat p-5 shadow-2-cabbage">
+                <div
+                  aria-hidden
+                  className="border-accent-cabbage-default/30 pointer-events-none absolute right-4 top-4 size-16 rounded-full border"
+                />
+                <Typography bold type={TypographyType.Title4}>
+                  You helped unlock{' '}
+                  {formatDonationAmount(action.donationAmount, action.currency)}
+                </Typography>
+                <Typography
+                  type={TypographyType.Callout}
+                  className="text-text-tertiary"
+                >
+                  It already counts toward your contribution. If it&apos;s
+                  rejected, we&apos;ll subtract it.
+                </Typography>
+              </FlexCol>
+            )}
+
+            {!isLove && !isSubmitted && (
+              <FlexCol className="gap-4">
+                <FlexCol className="gap-3 border-b border-border-subtlest-tertiary pb-4">
+                  <FlexRow className="items-center justify-between gap-3">
+                    <FlexRow className="flex-wrap items-center gap-x-2 gap-y-1">
+                      <Typography
+                        type={TypographyType.Caption1}
+                        className="text-text-tertiary"
+                      >
+                        {actionCategoryLabels[action.category]}
+                      </Typography>
+                      <span
+                        aria-hidden
+                        className="size-1 rounded-full bg-border-subtlest-secondary"
+                      />
+                      <Typography
+                        type={TypographyType.Caption1}
+                        className="text-text-tertiary"
+                      >
+                        {actionValidationLabels[action.validationType]}
+                      </Typography>
+                    </FlexRow>
+                    <Typography
+                      bold
+                      type={TypographyType.Callout}
+                      className="shrink-0 tabular-nums text-status-success"
+                    >
+                      +
+                      {formatDonationAmount(
+                        action.donationAmount,
+                        action.currency,
+                      )}
+                    </Typography>
+                  </FlexRow>
+                  {action.description && (
+                    <Typography
+                      type={TypographyType.Footnote}
+                      className="text-text-tertiary"
+                    >
+                      {action.description}
+                    </Typography>
+                  )}
+                  {action.instructions && (
+                    <Typography
+                      type={TypographyType.Footnote}
+                      className="text-text-tertiary"
+                    >
+                      {action.instructions}
+                    </Typography>
+                  )}
+                  <Typography
+                    type={TypographyType.Caption1}
+                    className="text-text-tertiary"
+                  >
+                    Counts toward your contribution the moment you submit.
+                    We&apos;ll only subtract it if it&apos;s rejected.
+                  </Typography>
+                </FlexCol>
+
+                {action.requiresLink && (
+                  <label htmlFor={linkInputId} className="flex flex-col gap-2">
+                    <Typography bold type={TypographyType.Footnote}>
+                      Public link
+                    </Typography>
+                    <input
+                      id={linkInputId}
+                      className="rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+                      placeholder="https://..."
+                      value={evidenceLink}
+                      onChange={(event) => setEvidenceLink(event.target.value)}
+                    />
+                  </label>
+                )}
+
+                {action.requiresImage && (
+                  <FlexCol className="gap-2">
+                    <Typography bold type={TypographyType.Footnote}>
+                      Screenshot
+                    </Typography>
+                    <ImageInput
+                      id={`giveback-proof-${action.id}`}
+                      size="cover"
+                      fallbackImage={null}
+                      uploadButton
+                      onChange={(base64) =>
+                        setEvidenceImage(base64 ?? undefined)
+                      }
+                    >
+                      <Typography
+                        type={TypographyType.Footnote}
+                        className="px-4 text-center text-text-tertiary"
+                      >
+                        Upload proof screenshot
+                      </Typography>
+                    </ImageInput>
+                  </FlexCol>
+                )}
+
+                {action.requiresNote && (
+                  <label htmlFor={noteInputId} className="flex flex-col gap-2">
+                    <Typography bold type={TypographyType.Footnote}>
+                      Note
+                    </Typography>
+                    <textarea
+                      id={noteInputId}
+                      className="min-h-24 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+                      placeholder="Add any context that helps us validate this."
+                      value={note}
+                      onChange={(event) => setNote(event.target.value)}
+                    />
+                  </label>
+                )}
+              </FlexCol>
+            )}
+
+            <FlexRow className="justify-end gap-2">
+              {isLove ? (
+                <Button
+                  type="button"
+                  size={ButtonSize.Small}
+                  variant={ButtonVariant.Primary}
+                  onClick={onClose}
+                >
+                  Got it
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    type="button"
+                    size={ButtonSize.Small}
+                    variant={ButtonVariant.Tertiary}
+                    onClick={onClose}
+                  >
+                    {isSubmitted ? 'Done' : 'Cancel'}
+                  </Button>
+                  {!isSubmitted && (
+                    <Button
+                      type="button"
+                      size={ButtonSize.Small}
+                      variant={ButtonVariant.Primary}
+                      disabled={!canSubmit}
+                      onClick={onSubmit}
+                    >
+                      Submit for review
+                    </Button>
+                  )}
+                </>
+              )}
+            </FlexRow>
+          </FlexCol>
+        </section>
+      </div>
+    </RootPortal>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/PersonalRoadmap.tsx b/packages/shared/src/features/giveback/components/PersonalRoadmap.tsx
new file mode 100644
index 00000000000..ce195a53040
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/PersonalRoadmap.tsx
@@ -0,0 +1,637 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+  ArrowIcon,
+  CoreIcon,
+  DevPlusIcon,
+  GiftIcon,
+  LockIcon,
+  MedalBadgeIcon,
+  StarIcon,
+  VIcon,
+} from '../../../components/icons';
+import ConfettiSvg from '../../../svg/ConfettiSvg';
+import { useGivebackContext } from '../GivebackContext';
+import { useGivebackNav } from '../GivebackNavContext';
+import { formatDonationAmount } from '../utils';
+import type { GivebackLevel } from '../types';
+import { GivebackRewardType } from '../types';
+import { GivebackMeterShine } from './GivebackMeterShine';
+
+// How many upcoming levels to reveal after the one you're on. The ladder can be
+// arbitrarily long (20+), so we only ever render a window of it.
+const DEFAULT_UPCOMING = 4;
+
+const rewardIconByType: Record<GivebackRewardType, ReactElement> = {
+  [GivebackRewardType.Cores]: <CoreIcon />,
+  [GivebackRewardType.DailyPlus]: <DevPlusIcon />,
+  [GivebackRewardType.SwagCoupon]: <GiftIcon />,
+  [GivebackRewardType.Badge]: <MedalBadgeIcon />,
+  [GivebackRewardType.Other]: <StarIcon />,
+};
+
+// One state drives every visual cue on a node, so "done", "you are here", and
+// "locked" never disagree (RPG / battle-pass clarity).
+type NodeState = 'claimed' | 'summit' | 'current' | 'unlocked' | 'locked';
+
+const nodeStyles: Record<NodeState, string> = {
+  claimed: 'bg-accent-avocado-default text-white',
+  summit:
+    'bg-gradient-to-br from-accent-cheese-default to-accent-bacon-default text-white shadow-2',
+  current:
+    'bg-gradient-to-br from-accent-cabbage-default to-accent-onion-default text-white shadow-2-cabbage',
+  unlocked: 'bg-accent-cabbage-default text-white',
+  locked:
+    'border border-border-subtlest-tertiary bg-surface-float text-text-quaternary',
+};
+
+type ConnectorFill =
+  | { type: 'full' }
+  | { type: 'partial'; progress: number }
+  | { type: 'muted' };
+
+interface RoadmapNode {
+  level: GivebackLevel;
+  index: number;
+  isLast: boolean;
+  isReached: boolean;
+  isCurrent: boolean;
+  isNext: boolean;
+  isClaimed: boolean;
+  connector?: ConnectorFill;
+}
+
+const Connector = ({ fill }: { fill: ConnectorFill }): ReactElement => (
+  <div className="relative w-1 flex-1">
+    <div className="absolute inset-0 rounded-full bg-border-subtlest-tertiary" />
+    {fill.type === 'full' && (
+      <div className="absolute inset-0 rounded-full bg-accent-cabbage-default" />
+    )}
+    {fill.type === 'partial' && (
+      <div
+        className="absolute inset-x-0 top-0 rounded-full bg-gradient-to-b from-accent-avocado-default to-accent-cabbage-default"
+        style={{ height: `${Math.round(fill.progress * 100)}%` }}
+      />
+    )}
+  </div>
+);
+
+interface RailToggleProps {
+  icon: ReactElement;
+  label: string;
+  onClick: () => void;
+  connectorBelow?: ConnectorFill;
+}
+
+const RailToggle = ({
+  icon,
+  label,
+  onClick,
+  connectorBelow,
+}: RailToggleProps): ReactElement => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="group flex w-full gap-4 text-left"
+  >
+    <div className="relative flex w-10 shrink-0 flex-col items-center">
+      <span className="z-1 flex size-10 items-center justify-center rounded-full border border-dashed border-border-subtlest-secondary bg-background-default text-text-tertiary transition-colors group-hover:border-accent-cabbage-default group-hover:text-accent-cabbage-default [&_svg]:size-4">
+        {icon}
+      </span>
+      {connectorBelow && <Connector fill={connectorBelow} />}
+    </div>
+    <div
+      className={classNames(
+        'flex min-w-0 flex-1 items-center',
+        connectorBelow ? 'pb-8' : 'pb-1',
+      )}
+    >
+      <Typography
+        type={TypographyType.Footnote}
+        bold
+        color={TypographyColor.Tertiary}
+        className="transition-colors group-hover:text-text-primary"
+      >
+        {label}
+      </Typography>
+    </div>
+  </button>
+);
+
+interface NodeRowProps {
+  node: RoadmapNode;
+  currency: string;
+  amountToNext: number;
+  segmentProgress: number;
+  onClaim: (rewardId: string) => void;
+  onTakeAction: () => void;
+}
+
+const NodeRow = ({
+  node,
+  currency,
+  amountToNext,
+  segmentProgress,
+  onClaim,
+  onTakeAction,
+}: NodeRowProps): ReactElement => {
+  const { level, isLast, isReached, isCurrent, isNext, isClaimed } = node;
+  const { reward } = level;
+  const isSummit = isLast;
+  const isRevealed = isReached || isNext || !reward?.isSecret;
+  const canClaim = isReached && !!reward && !isClaimed;
+  const [celebrate, setCelebrate] = useState(false);
+
+  const handleClaim = () => {
+    if (!reward) {
+      return;
+    }
+    setCelebrate(true);
+    onClaim(reward.id);
+  };
+
+  const getNodeState = (): NodeState => {
+    if (isReached && isSummit) {
+      return 'summit';
+    }
+    if (isCurrent) {
+      return 'current';
+    }
+    if (isClaimed) {
+      return 'claimed';
+    }
+    if (isReached) {
+      return 'unlocked';
+    }
+    return 'locked';
+  };
+
+  const getNodeIcon = (): ReactElement => {
+    if (isClaimed) {
+      return <VIcon />;
+    }
+    if (reward && isRevealed) {
+      return rewardIconByType[reward.type];
+    }
+    return <LockIcon />;
+  };
+
+  const title = (() => {
+    if (!reward) {
+      return level.name;
+    }
+    return isRevealed ? reward.title : reward.secretTitle;
+  })();
+
+  const requirementLabel =
+    level.requiredApprovedAmount > 0
+      ? formatDonationAmount(level.requiredApprovedAmount, currency)
+      : 'Free';
+
+  return (
+    <FlexRow className="relative gap-4">
+      <div className="relative flex w-10 shrink-0 flex-col items-center">
+        {celebrate && (
+          <ConfettiSvg
+            aria-hidden
+            className="z-10 pointer-events-none absolute -top-4 left-1/2 h-20 w-32 -translate-x-1/2"
+          />
+        )}
+        <span className="relative z-1 flex size-10 shrink-0 items-center justify-center">
+          {isCurrent && (
+            <span
+              aria-hidden
+              className="bg-accent-cabbage-default/25 absolute inset-0 rounded-full motion-safe:animate-ping"
+            />
+          )}
+          <span
+            className={classNames(
+              'relative flex size-10 items-center justify-center rounded-full [&_svg]:size-5',
+              nodeStyles[getNodeState()],
+              isNext && 'motion-safe:animate-glow-pulse',
+            )}
+          >
+            {getNodeIcon()}
+          </span>
+          <span
+            className={classNames(
+              'absolute -bottom-1 -right-1 flex size-4 items-center justify-center rounded-full bg-background-subtle font-bold tabular-nums ring-2 ring-background-default typo-caption2',
+              isReached ? 'text-text-secondary' : 'text-text-quaternary',
+            )}
+          >
+            {level.levelNumber}
+          </span>
+        </span>
+        {!isLast && <Connector fill={node.connector ?? { type: 'muted' }} />}
+      </div>
+
+      <div className={classNames('min-w-0 flex-1', isLast ? 'pb-1' : 'pb-8')}>
+        <FlexCol
+          className={classNames(
+            'gap-2',
+            isNext &&
+              'rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4',
+          )}
+        >
+          <FlexRow className="items-start justify-between gap-3">
+            <FlexCol className="min-w-0 gap-1">
+              <FlexRow className="flex-wrap items-center gap-2">
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Caption2}
+                  color={TypographyColor.Tertiary}
+                  bold
+                  className="uppercase tracking-wider"
+                >
+                  {level.name} · {requirementLabel}
+                </Typography>
+                {isCurrent && (
+                  <span className="rounded-6 bg-accent-cabbage-default px-2 py-0.5 font-bold text-white typo-caption2">
+                    You&apos;re here
+                  </span>
+                )}
+                {isClaimed && !isCurrent && (
+                  <FlexRow className="items-center gap-1 text-accent-avocado-default [&_svg]:size-4">
+                    <VIcon />
+                    <Typography bold type={TypographyType.Caption2}>
+                      Claimed
+                    </Typography>
+                  </FlexRow>
+                )}
+              </FlexRow>
+              <Typography
+                tag={TypographyTag.Span}
+                bold
+                type={TypographyType.Callout}
+                color={
+                  isReached || isNext
+                    ? TypographyColor.Primary
+                    : TypographyColor.Tertiary
+                }
+              >
+                {title}
+              </Typography>
+              {isNext && reward?.description && !reward.isSecret && (
+                <Typography
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Secondary}
+                >
+                  {reward.description}
+                </Typography>
+              )}
+            </FlexCol>
+
+            {canClaim ? (
+              <Button
+                type="button"
+                size={ButtonSize.XSmall}
+                variant={ButtonVariant.Primary}
+                onClick={handleClaim}
+                className={classNames(
+                  'shrink-0',
+                  celebrate && 'motion-safe:animate-reward-pop',
+                )}
+              >
+                Claim
+              </Button>
+            ) : (
+              !isReached &&
+              !isNext && (
+                <span className="shrink-0 text-text-quaternary [&_svg]:size-4">
+                  <LockIcon />
+                </span>
+              )
+            )}
+          </FlexRow>
+
+          {isNext && (
+            <FlexCol className="gap-2">
+              <div className="relative h-1.5 overflow-hidden rounded-full bg-surface-float">
+                <div
+                  className="relative h-full overflow-hidden rounded-full bg-gradient-to-r from-accent-avocado-default via-accent-cabbage-default to-accent-cheese-default transition-[width] duration-500"
+                  style={{ width: `${Math.round(segmentProgress * 100)}%` }}
+                >
+                  <GivebackMeterShine
+                    percentage={100}
+                    radiusClassName="rounded-full"
+                  />
+                </div>
+              </div>
+              <FlexRow className="items-center justify-between gap-3">
+                <Typography
+                  bold
+                  type={TypographyType.Caption1}
+                  className="tabular-nums text-accent-cabbage-default"
+                >
+                  {formatDonationAmount(amountToNext, currency)} to go
+                </Typography>
+                <Button
+                  type="button"
+                  size={ButtonSize.XSmall}
+                  variant={ButtonVariant.Primary}
+                  onClick={onTakeAction}
+                >
+                  Take action
+                </Button>
+              </FlexRow>
+            </FlexCol>
+          )}
+        </FlexCol>
+      </div>
+    </FlexRow>
+  );
+};
+
+export const PersonalRoadmap = (): ReactElement => {
+  const { levels, userProfile, campaign } = useGivebackContext();
+  const { setActiveTab } = useGivebackNav();
+  const approved = userProfile.approvedContributionAmount;
+  const { currency } = campaign;
+  const total = levels.length;
+  const [claimedRewardIds, setClaimedRewardIds] = useState<Set<string>>(
+    new Set(),
+  );
+  const [showCompleted, setShowCompleted] = useState(true);
+  const [showAllUpcoming, setShowAllUpcoming] = useState(false);
+
+  const currentLevel =
+    levels.find((level) => level.levelNumber === userProfile.currentLevel) ??
+    levels[0];
+  const focusIndex = Math.max(
+    0,
+    levels.findIndex((level) => level.levelNumber === currentLevel.levelNumber),
+  );
+  const topLevel = levels[total - 1];
+  const nextIndex = levels.findIndex(
+    (level) => level.requiredApprovedAmount > approved,
+  );
+  const nextLevel = nextIndex === -1 ? undefined : levels[nextIndex];
+  const amountToNext = nextLevel
+    ? Math.max(0, nextLevel.requiredApprovedAmount - approved)
+    : 0;
+  const reachedCount = levels.filter(
+    (level) => approved >= level.requiredApprovedAmount,
+  ).length;
+  const claimableCount = levels.filter(
+    (level) =>
+      approved >= level.requiredApprovedAmount &&
+      !!level.reward &&
+      !claimedRewardIds.has(level.reward.id),
+  ).length;
+
+  // Progress within the current segment (last reached → next level).
+  const previousAmount =
+    levels[Math.max(0, reachedCount - 1)].requiredApprovedAmount;
+  const segmentDenominator = nextLevel
+    ? nextLevel.requiredApprovedAmount - previousAmount
+    : 1;
+  const segmentProgress = nextLevel
+    ? Math.min(1, Math.max(0, (approved - previousAmount) / segmentDenominator))
+    : 1;
+
+  const getConnector = (index: number): ConnectorFill | undefined => {
+    const next = levels[index + 1];
+    if (!next) {
+      return undefined;
+    }
+    if (approved >= next.requiredApprovedAmount) {
+      return { type: 'full' };
+    }
+    if (approved >= levels[index].requiredApprovedAmount) {
+      const denom =
+        next.requiredApprovedAmount - levels[index].requiredApprovedAmount || 1;
+      const progress = Math.min(
+        1,
+        Math.max(0, (approved - levels[index].requiredApprovedAmount) / denom),
+      );
+      return { type: 'partial', progress };
+    }
+    return { type: 'muted' };
+  };
+
+  const onClaim = (rewardId: string) =>
+    setClaimedRewardIds((prev) => new Set(prev).add(rewardId));
+
+  // Window: current level + the next few. "Show more" extends it; "Show
+  // completed" reveals everything you've already cleared above.
+  const upcomingEnd = showAllUpcoming
+    ? total - 1
+    : Math.min(total - 1, focusIndex + DEFAULT_UPCOMING);
+  const visibleStart = showCompleted ? 0 : focusIndex;
+  const hiddenUpcoming = total - 1 - upcomingEnd;
+  const canCollapseUpcoming = total - 1 > focusIndex + DEFAULT_UPCOMING;
+
+  const visibleNodes: RoadmapNode[] = levels
+    .slice(visibleStart, upcomingEnd + 1)
+    .map((level) => {
+      const index = level.levelNumber - 1;
+      return {
+        level,
+        index,
+        isLast: index === total - 1,
+        isReached: approved >= level.requiredApprovedAmount,
+        isCurrent: level.levelNumber === currentLevel.levelNumber,
+        isNext: level.id === nextLevel?.id,
+        isClaimed: !!level.reward && claimedRewardIds.has(level.reward.id),
+        connector: getConnector(index),
+      };
+    });
+
+  const welcomeReward = levels[0]?.reward;
+  const isWelcomeClaimed =
+    !!welcomeReward && claimedRewardIds.has(welcomeReward.id);
+
+  return (
+    <section id="giveback-roadmap" className="relative w-full scroll-mt-16">
+      <FlexCol className="gap-6">
+        <FlexCol className="gap-3">
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+            bold
+            className="uppercase tracking-wider"
+          >
+            Your journey
+          </Typography>
+          <FlexRow className="flex-wrap items-center gap-4">
+            <FlexCol className="size-16 shrink-0 items-center justify-center rounded-20 bg-gradient-to-br from-accent-cabbage-default to-accent-onion-default text-white shadow-2-cabbage">
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Caption2}
+                bold
+                className="opacity-80 uppercase tracking-wider"
+              >
+                Level
+              </Typography>
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Title1}
+                bold
+                className="leading-none"
+              >
+                {currentLevel.levelNumber}
+              </Typography>
+            </FlexCol>
+
+            <FlexCol className="min-w-0 flex-1 gap-0.5">
+              <Typography
+                tag={TypographyTag.H3}
+                type={TypographyType.Title3}
+                bold
+              >
+                You&apos;re a {currentLevel.name}
+              </Typography>
+              <Typography
+                tag={TypographyTag.P}
+                type={TypographyType.Callout}
+                color={TypographyColor.Secondary}
+              >
+                {nextLevel
+                  ? `${formatDonationAmount(
+                      amountToNext,
+                      currency,
+                    )} to go and you're a ${nextLevel.name}.`
+                  : `You've reached the top. You're a ${topLevel.name}.`}
+              </Typography>
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Caption1}
+                color={TypographyColor.Tertiary}
+                className="tabular-nums"
+              >
+                Level {currentLevel.levelNumber} of {total} ·{' '}
+                {formatDonationAmount(approved, currency)} unlocked
+              </Typography>
+            </FlexCol>
+
+            {claimableCount > 0 && (
+              <FlexRow className="items-center gap-1.5 self-start rounded-10 bg-accent-cheese-flat px-3 py-1.5 text-accent-cheese-default">
+                <GiftIcon />
+                <Typography bold type={TypographyType.Caption1}>
+                  {claimableCount} ready to claim
+                </Typography>
+              </FlexRow>
+            )}
+          </FlexRow>
+        </FlexCol>
+
+        {welcomeReward && (
+          <FlexRow className="group items-center gap-4 rounded-16 border border-border-subtlest-tertiary p-4 transition-shadow duration-200 hover:shadow-2">
+            <span className="flex size-12 shrink-0 items-center justify-center rounded-16 bg-accent-avocado-flat text-accent-avocado-default transition-transform duration-200 group-hover:-rotate-6 group-hover:scale-110 [&_svg]:size-6">
+              <GiftIcon />
+            </span>
+            <FlexCol className="min-w-0 flex-1 gap-0.5">
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Caption2}
+                bold
+                className="uppercase tracking-wider text-accent-avocado-default"
+              >
+                Welcome gift · unlocked
+              </Typography>
+              <Typography bold type={TypographyType.Callout}>
+                $10 to your causes, on us
+              </Typography>
+              <Typography
+                type={TypographyType.Caption1}
+                color={TypographyColor.Secondary}
+              >
+                Just for joining and picking the causes you care about. No
+                action needed.
+              </Typography>
+            </FlexCol>
+            {isWelcomeClaimed ? (
+              <FlexRow className="shrink-0 items-center gap-1 text-accent-avocado-default [&_svg]:size-4">
+                <VIcon />
+                <Typography bold type={TypographyType.Caption1}>
+                  Claimed
+                </Typography>
+              </FlexRow>
+            ) : (
+              <Button
+                type="button"
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Primary}
+                onClick={() => onClaim(welcomeReward.id)}
+                className="shrink-0 shadow-2 transition-transform duration-200 hover:scale-[1.04] active:scale-100 motion-reduce:transform-none"
+              >
+                Claim $10
+              </Button>
+            )}
+          </FlexRow>
+        )}
+
+        <FlexCol>
+          {focusIndex > 0 && (
+            <RailToggle
+              icon={
+                <ArrowIcon
+                  className={showCompleted ? 'rotate-180' : undefined}
+                />
+              }
+              label={
+                showCompleted
+                  ? 'Hide completed levels'
+                  : `Show ${focusIndex} completed ${
+                      focusIndex === 1 ? 'level' : 'levels'
+                    }`
+              }
+              onClick={() => setShowCompleted((value) => !value)}
+              connectorBelow={{ type: 'full' }}
+            />
+          )}
+
+          {visibleNodes.map((node) => (
+            <NodeRow
+              key={node.level.id}
+              node={node}
+              currency={currency}
+              amountToNext={amountToNext}
+              segmentProgress={segmentProgress}
+              onClaim={onClaim}
+              onTakeAction={() => setActiveTab('actions')}
+            />
+          ))}
+
+          {hiddenUpcoming > 0 && (
+            <RailToggle
+              icon={<ArrowIcon className="rotate-180" />}
+              label={`Show ${hiddenUpcoming} more ${
+                hiddenUpcoming === 1 ? 'level' : 'levels'
+              }`}
+              onClick={() => setShowAllUpcoming(true)}
+            />
+          )}
+        </FlexCol>
+
+        {showAllUpcoming && canCollapseUpcoming && (
+          <FlexRow className="justify-center">
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Float}
+              icon={<ArrowIcon />}
+              onClick={() => setShowAllUpcoming(false)}
+            >
+              Show less
+            </Button>
+          </FlexRow>
+        )}
+      </FlexCol>
+    </section>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/SponsorBudgetBar.tsx b/packages/shared/src/features/giveback/components/SponsorBudgetBar.tsx
new file mode 100644
index 00000000000..9bd4f266faa
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/SponsorBudgetBar.tsx
@@ -0,0 +1,194 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import type { GivebackSponsor } from '../types';
+import { formatDonationAmount, getSponsorInitials } from '../utils';
+import { SponsorLogo } from './SponsorLogo';
+
+// iOS "storage bar" style: one bar split into proportional, color-coded
+// segments — one per top sponsor, with the long tail grouped into "Others".
+// The logo above defaults to the biggest sponsor and swaps to whichever segment
+// you hover or focus.
+const SEGMENT_PALETTE = [
+  {
+    seg: 'bg-accent-water-default',
+    tile: 'bg-accent-water-flat text-accent-water-default',
+  },
+  {
+    seg: 'bg-accent-blueCheese-default',
+    tile: 'bg-accent-blueCheese-flat text-accent-blueCheese-default',
+  },
+  {
+    seg: 'bg-accent-cheese-default',
+    tile: 'bg-accent-cheese-flat text-accent-cheese-default',
+  },
+  {
+    seg: 'bg-accent-avocado-default',
+    tile: 'bg-accent-avocado-flat text-accent-avocado-default',
+  },
+  {
+    seg: 'bg-accent-onion-default',
+    tile: 'bg-accent-onion-flat text-accent-onion-default',
+  },
+  {
+    seg: 'bg-accent-bacon-default',
+    tile: 'bg-accent-bacon-flat text-accent-bacon-default',
+  },
+];
+
+const OTHERS_STYLE = {
+  seg: 'bg-accent-salt-default',
+  tile: 'bg-surface-float text-text-secondary',
+};
+
+const MAX_SEGMENTS = 6;
+
+interface Segment {
+  id: string;
+  label: string;
+  amount: number;
+  currency: GivebackSponsor['currency'];
+  share: number;
+  seg: string;
+  tile: string;
+  initials: string;
+  logoUrl?: string;
+  count?: number;
+}
+
+interface SponsorBudgetBarProps {
+  sponsors: GivebackSponsor[];
+  /** Invoked when a sponsor segment is clicked (e.g. to open the sponsor flow). */
+  onSelect?: () => void;
+}
+
+export const SponsorBudgetBar = ({
+  sponsors,
+  onSelect,
+}: SponsorBudgetBarProps): ReactElement | null => {
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const segments = useMemo<Segment[]>(() => {
+    const sorted = [...sponsors].sort((a, b) => b.amount - a.amount);
+    const total = sorted.reduce((sum, sponsor) => sum + sponsor.amount, 0) || 1;
+    const leading = sorted.slice(0, MAX_SEGMENTS);
+    const rest = sorted.slice(MAX_SEGMENTS);
+
+    const result: Segment[] = leading.map((sponsor, index) => ({
+      id: sponsor.id,
+      label: sponsor.name,
+      amount: sponsor.amount,
+      currency: sponsor.currency,
+      share: (sponsor.amount / total) * 100,
+      seg: SEGMENT_PALETTE[index % SEGMENT_PALETTE.length].seg,
+      tile: SEGMENT_PALETTE[index % SEGMENT_PALETTE.length].tile,
+      initials: getSponsorInitials(sponsor.name),
+      logoUrl: sponsor.logoUrl,
+    }));
+
+    if (rest.length > 0) {
+      const restAmount = rest.reduce((sum, sponsor) => sum + sponsor.amount, 0);
+      result.push({
+        id: 'others',
+        label: 'Other sponsors',
+        amount: restAmount,
+        currency: rest[0].currency,
+        share: (restAmount / total) * 100,
+        seg: OTHERS_STYLE.seg,
+        tile: OTHERS_STYLE.tile,
+        initials: `+${rest.length}`,
+        count: rest.length,
+      });
+    }
+
+    return result;
+  }, [sponsors]);
+
+  if (segments.length === 0) {
+    return null;
+  }
+
+  const topId = segments[0].id;
+  const active =
+    segments.find((segment) => segment.id === (hoveredId ?? topId)) ??
+    segments[0];
+  const isHovering = hoveredId !== null;
+
+  return (
+    <FlexCol className="gap-2.5">
+      <FlexRow className="items-center gap-2.5">
+        <SponsorLogo
+          name={active.label}
+          logoUrl={active.logoUrl}
+          initials={active.initials}
+          className="size-9 rounded-12"
+          tileClassName={active.tile}
+          initialsClassName="typo-footnote"
+        />
+        <FlexCol className="min-w-0">
+          <FlexRow className="items-center gap-1.5">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Footnote}
+              bold
+              truncate
+            >
+              {active.label}
+            </Typography>
+            {!isHovering && active.id === topId && (
+              <span className="shrink-0 rounded-6 bg-surface-float px-1.5 py-0.5 font-bold uppercase tracking-wider text-text-tertiary typo-caption2">
+                Top sponsor
+              </span>
+            )}
+          </FlexRow>
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            {formatDonationAmount(active.amount, active.currency)}
+            {active.count ? ` · ${active.count} sponsors` : ''} ·{' '}
+            {Math.round(active.share)}%
+          </Typography>
+        </FlexCol>
+      </FlexRow>
+
+      <FlexRow
+        className="h-3 w-full overflow-hidden rounded-8"
+        role="group"
+        aria-label="Sponsor contributions"
+      >
+        {segments.map((segment) => (
+          <button
+            key={segment.id}
+            type="button"
+            aria-label={`${segment.label}: ${formatDonationAmount(
+              segment.amount,
+              segment.currency,
+            )}`}
+            onMouseEnter={() => setHoveredId(segment.id)}
+            onMouseLeave={() => setHoveredId(null)}
+            onFocus={() => setHoveredId(segment.id)}
+            onBlur={() => setHoveredId(null)}
+            onClick={onSelect}
+            style={{ width: `${segment.share}%` }}
+            className={classNames(
+              'box-border h-full border-r-2 border-background-default transition-opacity duration-200 last:border-r-0',
+              segment.seg,
+              isHovering && hoveredId !== segment.id
+                ? 'opacity-40'
+                : 'opacity-100',
+            )}
+          />
+        ))}
+      </FlexRow>
+    </FlexCol>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/SponsorLogo.tsx b/packages/shared/src/features/giveback/components/SponsorLogo.tsx
new file mode 100644
index 00000000000..39c4e4848fc
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/SponsorLogo.tsx
@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { getSponsorInitials } from '../utils';
+
+interface SponsorLogoProps {
+  name: string;
+  logoUrl?: string;
+  /** Overrides the computed initials (e.g. "+3" for a grouped tile). */
+  initials?: string;
+  /** Size and shape classes for the square. */
+  className?: string;
+  /** Background + text color used for the initials fallback. */
+  tileClassName?: string;
+  /** Typography (font size) for the initials fallback. */
+  initialsClassName?: string;
+}
+
+// Renders a sponsor's real brand logo on a white chip so it reads like a real
+// sponsorship, falling back to initials when there's no logo (individuals,
+// freshly added sponsors) or the image fails to load.
+export const SponsorLogo = ({
+  name,
+  logoUrl,
+  initials,
+  className,
+  tileClassName,
+  initialsClassName,
+}: SponsorLogoProps): ReactElement => {
+  const [failed, setFailed] = useState(false);
+  const showLogo = Boolean(logoUrl) && !failed;
+  const label = initials ?? getSponsorInitials(name);
+
+  return (
+    <span
+      className={classNames(
+        'flex shrink-0 items-center justify-center overflow-hidden font-bold',
+        className,
+        showLogo ? 'bg-white' : tileClassName,
+        !showLogo && initialsClassName,
+      )}
+    >
+      {showLogo ? (
+        <img
+          src={logoUrl}
+          alt={`${name} logo`}
+          loading="lazy"
+          className="size-full object-contain p-1.5"
+          onError={() => setFailed(true)}
+        />
+      ) : (
+        label
+      )}
+    </span>
+  );
+};
diff --git a/packages/shared/src/features/giveback/mock.ts b/packages/shared/src/features/giveback/mock.ts
new file mode 100644
index 00000000000..b0d64b6ae07
--- /dev/null
+++ b/packages/shared/src/features/giveback/mock.ts
@@ -0,0 +1,2627 @@
+import type {
+  GivebackAction,
+  GivebackCampaign,
+  GivebackCause,
+  GivebackCommunityEvent,
+  GivebackCommunityRally,
+  GivebackLeaderboardEntry,
+  GivebackLevel,
+  GivebackSponsor,
+  GivebackTopContributor,
+  GivebackUserAction,
+  GivebackUserProfile,
+} from './types';
+import {
+  GivebackActionCategory,
+  GivebackActionPersona,
+  GivebackActionPlatform,
+  GivebackActionValidationType,
+  GivebackCampaignStatus,
+  GivebackCauseStatus,
+  GivebackRewardStatus,
+  GivebackRewardType,
+  GivebackSponsorType,
+  GivebackUserActionStatus,
+} from './types';
+
+// Phase 1 mock data. This is the single source of truth the baseline page renders
+// from, and the dev review toggle drives it. Replaced by live queries in a later phase.
+
+export const GIVEBACK_CURRENCY = 'USD';
+
+export const givebackCauses: GivebackCause[] = [
+  {
+    id: 'cause-software-freedom-conservancy',
+    name: 'Software Freedom Conservancy',
+    description:
+      'The nonprofit backbone of free and open source software — legal support, fiscal sponsorship, and governance for the projects developers depend on.',
+    url: 'https://sfconservancy.org',
+    logoUrl:
+      'https://www.google.com/s2/favicons?domain=sfconservancy.org&sz=128',
+    category: 'Open source',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 1,
+    recommended: true,
+  },
+  {
+    id: 'cause-python-software-foundation',
+    name: 'Python Software Foundation',
+    description:
+      'The nonprofit behind Python — maintaining the language, PyPI, python.org, and a global grants program that keeps Python alive.',
+    url: 'https://www.python.org/psf/',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=python.org&sz=128',
+    category: 'Open source',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 2,
+    recommended: true,
+  },
+  {
+    id: 'cause-numfocus',
+    name: 'NumFOCUS',
+    description:
+      'Keeps the open source scientific computing stack — NumPy, pandas, Jupyter, Matplotlib, and more — funded, governed, and growing.',
+    url: 'https://numfocus.org',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=numfocus.org&sz=128',
+    category: 'Open source',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 3,
+    recommended: true,
+  },
+  {
+    id: 'cause-owasp',
+    name: 'OWASP Foundation',
+    description:
+      'Makes software security visible and actionable through open source projects, the OWASP Top 10, and free security education for every developer.',
+    url: 'https://owasp.org',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=owasp.org&sz=128',
+    category: 'Open source security',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 4,
+    recommended: true,
+  },
+  {
+    id: 'cause-freecodecamp',
+    name: 'freeCodeCamp',
+    description:
+      'Free, self-paced coding education at global scale — from HTML basics to data science and machine learning — for anyone with internet access.',
+    url: 'https://www.freecodecamp.org',
+    logoUrl:
+      'https://www.google.com/s2/favicons?domain=freecodecamp.org&sz=128',
+    category: 'Developer education',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 5,
+    recommended: true,
+  },
+  {
+    id: 'cause-codepath',
+    name: 'CodePath',
+    description:
+      'Embeds industry-grade software engineering education directly into universities — free for students from underrepresented backgrounds.',
+    url: 'https://www.codepath.org',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=codepath.org&sz=128',
+    category: 'Developer education',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 6,
+    recommended: true,
+  },
+  {
+    id: 'cause-raspberry-pi-foundation',
+    name: 'Raspberry Pi Foundation',
+    description:
+      'Global charity putting computing education in the hands of young people everywhere — through free curricula, Code Club, CoderDojo, and Raspberry Pi hardware.',
+    url: 'https://www.raspberrypi.org',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=raspberrypi.org&sz=128',
+    category: 'Developer education',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 7,
+    recommended: true,
+  },
+  {
+    id: 'cause-codeyourfuture',
+    name: 'CodeYourFuture',
+    description:
+      'Free coding school for refugees and people from disadvantaged backgrounds — with full support from learning through to employment in tech.',
+    url: 'https://codeyourfuture.io',
+    logoUrl:
+      'https://www.google.com/s2/favicons?domain=codeyourfuture.io&sz=128',
+    category: 'Inclusion & access',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 8,
+    recommended: true,
+  },
+  {
+    id: 'cause-osmi',
+    name: 'Open Sourcing Mental Health',
+    description:
+      'Raises awareness and provides practical resources to support mental wellness in the tech and open source communities.',
+    url: 'https://osmihelp.org',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=osmihelp.org&sz=128',
+    category: 'Mental health',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 9,
+    recommended: true,
+  },
+  {
+    id: 'cause-nv-access',
+    name: 'NV Access',
+    description:
+      'Builds and maintains NVDA, the free open source screen reader that gives blind and vision-impaired people full access to the digital world.',
+    url: 'https://www.nvaccess.org',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=nvaccess.org&sz=128',
+    category: 'Accessibility',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 10,
+    recommended: true,
+  },
+  {
+    id: 'cause-human-i-t',
+    name: 'Human-I-T',
+    description:
+      'Turns donated tech into refurbished devices, low-cost internet, digital training, and e-waste diversion — making computing accessible and less wasteful.',
+    url: 'https://www.human-i-t.org',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=human-i-t.org&sz=128',
+    category: 'Device access',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 11,
+    recommended: false,
+  },
+  {
+    id: 'cause-givewell',
+    name: 'GiveWell Top Charities Fund',
+    description:
+      'Rigorously researches and directs donations to the most cost-effective charities in the world — where each dollar saves the most lives.',
+    url: 'https://www.givewell.org',
+    logoUrl: 'https://www.google.com/s2/favicons?domain=givewell.org&sz=128',
+    category: 'Global good',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 12,
+    recommended: false,
+  },
+  {
+    id: 'cause-hackyourfuture',
+    name: 'HackYourFuture',
+    description:
+      'Free 9-month coding school in Amsterdam for refugees and people from disadvantaged backgrounds, with full career coaching and job placement support.',
+    url: 'https://www.hackyourfuture.net',
+    logoUrl:
+      'https://www.google.com/s2/favicons?domain=hackyourfuture.net&sz=128',
+    category: 'Developer education',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 13,
+    recommended: false,
+  },
+];
+
+const communityAvatars = [
+  'https://media.daily.dev/image/upload/s---xy_OAwk--/f_auto,q_auto/v1703781380/avatars/avatar_28849d86070e4c099c877ab6837c61f0',
+  'https://media.daily.dev/image/upload/v1682322243/avatars/avatar_1d339aa5b85c4e0ba85fdedb523c48d4.jpg',
+  'https://media.daily.dev/image/upload/s--9gxFz1e7--/f_auto/v1705902590/avatars/avatar_JUNiIGCV-',
+  'https://media.daily.dev/image/upload/v1679300599/avatars/avatar_LJSkpBexOSCWc8INyu3Eu.jpg',
+  'https://media.daily.dev/image/upload/s--W1oZyHsz--/f_auto/v1719829173/avatars/avatar_0pjeBcFKQqsnU97ZOj9EW',
+  'https://media.daily.dev/image/upload/s--C7nUVtfM--/f_auto,q_auto/v1/avatars/avatar_14yFjmSDxLUrr05G27mp6',
+];
+
+export const givebackCommunityEvents: GivebackCommunityEvent[] = [
+  {
+    id: 'event-1',
+    actorLabel: 'A community member',
+    actorName: 'Ana P.',
+    actorAvatar: communityAvatars[4],
+    actionLabel: 'shared the Giveback launch post',
+    amount: 10,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'freeCodeCamp',
+    createdAt: '2026-06-01T10:30:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-2',
+    actorLabel: 'A creator',
+    actorName: 'Marco R.',
+    actorAvatar: communityAvatars[2],
+    actionLabel: 'submitted a daily.dev workflow video',
+    amount: 50,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'CodePath',
+    createdAt: '2026-06-01T11:15:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-3',
+    actorLabel: 'A power user',
+    actorName: 'Lena S.',
+    actorAvatar: communityAvatars[1],
+    actionLabel: 'invited a developer friend',
+    amount: 15,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'NV Access',
+    createdAt: '2026-06-01T12:20:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-4',
+    actorLabel: 'A Squad member',
+    actorName: 'Diego S.',
+    actorAvatar: communityAvatars[0],
+    actionLabel: 'posted a developer tip',
+    amount: 15,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'Human-I-T',
+    createdAt: '2026-06-01T13:45:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-5',
+    actorLabel: 'Someone from the community',
+    actorName: 'Priya N.',
+    actorAvatar: communityAvatars[3],
+    actionLabel: 'left optional app feedback for love',
+    currency: GIVEBACK_CURRENCY,
+    createdAt: '2026-06-01T15:00:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-6',
+    actorLabel: 'A team lead',
+    actorName: 'Tomas N.',
+    actorAvatar: communityAvatars[5],
+    actionLabel: 'referred their dev team',
+    amount: 40,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'freeCodeCamp',
+    createdAt: '2026-06-01T15:30:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-7',
+    actorLabel: 'A blogger',
+    actorName: 'Yuki T.',
+    actorAvatar: communityAvatars[2],
+    actionLabel: 'wrote a blog post about their daily.dev setup',
+    amount: 30,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'CodePath',
+    createdAt: '2026-06-01T16:10:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-8',
+    actorLabel: 'A mobile user',
+    actorName: 'Sara K.',
+    actorAvatar: communityAvatars[1],
+    actionLabel: 'left an honest mobile app review',
+    amount: 20,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'HackYourFuture',
+    createdAt: '2026-06-01T16:45:00.000Z',
+    isAnonymous: true,
+  },
+];
+
+const baseGivebackActions: GivebackAction[] = [
+  {
+    id: 'share-launch-post',
+    title: 'Share the Giveback launch post',
+    description:
+      'Post the official Giveback announcement with your own note about why it matters.',
+    category: GivebackActionCategory.SocialMedia,
+    platform: GivebackActionPlatform.X,
+    personaTags: [
+      GivebackActionPersona.Creator,
+      GivebackActionPersona.PowerUser,
+      GivebackActionPersona.CommunityMember,
+    ],
+    donationAmount: 10,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: true,
+    requiresImage: false,
+    requiresNote: true,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+    instructions: 'Share the campaign and submit the public post URL.',
+  },
+  {
+    id: 'record-demo-video',
+    title: 'Record a short daily.dev workflow video',
+    description:
+      'Show how daily.dev helps you discover, save, or discuss developer content.',
+    category: GivebackActionCategory.CreatorContent,
+    platform: GivebackActionPlatform.YouTube,
+    personaTags: [
+      GivebackActionPersona.Creator,
+      GivebackActionPersona.PowerUser,
+      GivebackActionPersona.SeniorDeveloper,
+    ],
+    donationAmount: 50,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: true,
+    requiresImage: false,
+    requiresNote: true,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+    instructions: 'Submit a public link to the video after posting it.',
+  },
+  {
+    id: 'invite-dev-friend',
+    title: 'Invite a developer friend',
+    description:
+      'Bring another developer into the community through an official invite flow.',
+    category: GivebackActionCategory.Referrals,
+    platform: GivebackActionPlatform.DailyDev,
+    personaTags: [
+      GivebackActionPersona.CommunityMember,
+      GivebackActionPersona.PowerUser,
+      GivebackActionPersona.TeamLead,
+    ],
+    donationAmount: 15,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Automatic,
+    requiresLink: false,
+    requiresImage: false,
+    requiresNote: false,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+    instructions:
+      'Use your invite link. We validate accepted invites automatically.',
+  },
+  {
+    id: 'refer-team',
+    title: 'Refer a dev team',
+    description:
+      'Introduce daily.dev to a team that could benefit from shared discovery.',
+    category: GivebackActionCategory.Referrals,
+    platform: GivebackActionPlatform.LinkedIn,
+    personaTags: [
+      GivebackActionPersona.TeamLead,
+      GivebackActionPersona.SeniorDeveloper,
+      GivebackActionPersona.DailyPlusSubscriber,
+    ],
+    donationAmount: 40,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Hybrid,
+    requiresLink: false,
+    requiresImage: false,
+    requiresNote: true,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+    instructions:
+      'Tell us who you introduced and we will validate the referral.',
+  },
+  {
+    id: 'submit-product-feedback',
+    title: 'Send thoughtful product feedback',
+    description:
+      'Share one product insight that would help make daily.dev better for developers.',
+    category: GivebackActionCategory.ProductFeedback,
+    platform: GivebackActionPlatform.DailyDev,
+    personaTags: [
+      GivebackActionPersona.PowerUser,
+      GivebackActionPersona.SeniorDeveloper,
+      GivebackActionPersona.Student,
+    ],
+    donationAmount: 10,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: false,
+    requiresImage: false,
+    requiresNote: true,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+  },
+  {
+    id: 'join-user-interview',
+    title: 'Join a 20-minute user interview',
+    description:
+      'Talk to the team about your daily.dev habits, blockers, and wishlist.',
+    category: GivebackActionCategory.ProductFeedback,
+    platform: GivebackActionPlatform.DailyDev,
+    personaTags: [
+      GivebackActionPersona.PowerUser,
+      GivebackActionPersona.SeniorDeveloper,
+      GivebackActionPersona.TeamLead,
+    ],
+    donationAmount: 25,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: false,
+    requiresImage: false,
+    requiresNote: false,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+  },
+  {
+    id: 'post-community-tip',
+    title: 'Post a developer tip in your community',
+    description:
+      'Share a practical daily.dev tip in a developer group, forum, or community space.',
+    category: GivebackActionCategory.CommunityPosts,
+    platform: GivebackActionPlatform.Reddit,
+    personaTags: [
+      GivebackActionPersona.CommunityMember,
+      GivebackActionPersona.OpenSourceContributor,
+      GivebackActionPersona.Student,
+    ],
+    donationAmount: 15,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: true,
+    requiresImage: false,
+    requiresNote: true,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+  },
+  {
+    id: 'write-blog-post',
+    title: 'Write a blog post about your daily.dev setup',
+    description:
+      'Explain how you use daily.dev to stay current, organize reading, or follow topics.',
+    category: GivebackActionCategory.CreatorContent,
+    platform: GivebackActionPlatform.Hashnode,
+    personaTags: [
+      GivebackActionPersona.Creator,
+      GivebackActionPersona.SeniorDeveloper,
+      GivebackActionPersona.OpenSourceContributor,
+    ],
+    donationAmount: 50,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: true,
+    requiresImage: false,
+    requiresNote: false,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+  },
+  {
+    id: 'create-open-source-note',
+    title: 'Mention daily.dev in an open-source resource list',
+    description:
+      'Add a relevant daily.dev recommendation to a public learning or tooling resource.',
+    category: GivebackActionCategory.CommunityPosts,
+    platform: GivebackActionPlatform.GitHub,
+    personaTags: [
+      GivebackActionPersona.OpenSourceContributor,
+      GivebackActionPersona.Creator,
+      GivebackActionPersona.Student,
+    ],
+    donationAmount: 25,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: true,
+    requiresImage: false,
+    requiresNote: true,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+  },
+  {
+    id: 'share-squad-story',
+    title: 'Share a Squad success story',
+    description:
+      'Tell the community how a Squad helped you learn, collaborate, or discover content.',
+    category: GivebackActionCategory.SocialMedia,
+    platform: GivebackActionPlatform.X,
+    personaTags: [
+      GivebackActionPersona.CommunityMember,
+      GivebackActionPersona.TeamLead,
+      GivebackActionPersona.PowerUser,
+    ],
+    donationAmount: 20,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: true,
+    requiresImage: true,
+    requiresNote: true,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+  },
+  {
+    id: 'complete-onboarding-quiz',
+    title: 'Complete the Giveback onboarding quiz',
+    description:
+      'Help us understand which actions and causes feel most relevant to you.',
+    category: GivebackActionCategory.ProductFeedback,
+    platform: GivebackActionPlatform.DailyDev,
+    personaTags: [
+      GivebackActionPersona.Student,
+      GivebackActionPersona.CommunityMember,
+      GivebackActionPersona.DailyPlusSubscriber,
+    ],
+    donationAmount: 5,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Automatic,
+    requiresLink: false,
+    requiresImage: false,
+    requiresNote: false,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+  },
+  {
+    id: 'honest-app-store-review',
+    title: 'Leave an honest mobile app review',
+    description:
+      'If daily.dev has helped you, consider sharing an honest review. No rewards attached.',
+    category: GivebackActionCategory.CommunityLove,
+    platform: GivebackActionPlatform.AppStore,
+    personaTags: [
+      GivebackActionPersona.CommunityMember,
+      GivebackActionPersona.PowerUser,
+      GivebackActionPersona.DailyPlusSubscriber,
+    ],
+    donationAmount: 0,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.None,
+    requiresLink: false,
+    requiresImage: false,
+    requiresNote: false,
+    isRewarded: false,
+    donationEligible: false,
+    isComplianceSensitive: true,
+    isLoveAction: true,
+    instructions:
+      'Reviews are voluntary and never unlock donation value, rewards, or product access.',
+  },
+  {
+    id: 'chrome-store-love',
+    title: 'Share honest Chrome Web Store feedback',
+    description:
+      'Optional feedback for people who already use the extension. No incentives or donation value.',
+    category: GivebackActionCategory.CommunityLove,
+    platform: GivebackActionPlatform.ChromeWebStore,
+    personaTags: [
+      GivebackActionPersona.PowerUser,
+      GivebackActionPersona.CommunityMember,
+      GivebackActionPersona.SeniorDeveloper,
+    ],
+    donationAmount: 0,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.None,
+    requiresLink: false,
+    requiresImage: false,
+    requiresNote: false,
+    isRewarded: false,
+    donationEligible: false,
+    isComplianceSensitive: true,
+    isLoveAction: true,
+  },
+  {
+    id: 'mentor-student',
+    title: 'Help a student set up daily.dev',
+    description:
+      'Walk a student or junior developer through topic follows, bookmarks, and Squads.',
+    category: GivebackActionCategory.CommunityPosts,
+    platform: GivebackActionPlatform.DailyDev,
+    personaTags: [
+      GivebackActionPersona.Student,
+      GivebackActionPersona.SeniorDeveloper,
+      GivebackActionPersona.CommunityMember,
+    ],
+    donationAmount: 20,
+    currency: GIVEBACK_CURRENCY,
+    validationType: GivebackActionValidationType.Manual,
+    requiresLink: false,
+    requiresImage: false,
+    requiresNote: true,
+    isRewarded: true,
+    donationEligible: true,
+    isComplianceSensitive: false,
+    isLoveAction: false,
+  },
+];
+
+// --- Community-led growth action library -----------------------------------
+// The full action library from the community-led growth doc, mapped onto the
+// action model. Program modes translate directly to compliance flags:
+//   review → rewardable with manual review (durable, human-written public content)
+//   proof  → rewardable with URL/API proof (low-risk public social actions)
+//   love   → voluntary, zero reward (sensitive trust surfaces + earned outcomes)
+type DocActionMode = 'review' | 'proof' | 'love';
+
+interface DocActionSpec {
+  id: string;
+  title: string;
+  platform: GivebackActionPlatform;
+  category: GivebackActionCategory;
+  personas: GivebackActionPersona[];
+  mode: DocActionMode;
+  /** Override the default payout for the mode (e.g. high-effort content). */
+  amount?: number;
+}
+
+const docActionDefaultAmount: Record<DocActionMode, number> = {
+  review: 30,
+  proof: 10,
+  love: 0,
+};
+
+const docActionValidationType: Record<
+  DocActionMode,
+  GivebackActionValidationType
+> = {
+  review: GivebackActionValidationType.Manual,
+  proof: GivebackActionValidationType.Automatic,
+  love: GivebackActionValidationType.None,
+};
+
+const createDocAction = ({
+  id,
+  title,
+  platform,
+  category,
+  personas,
+  mode,
+  amount,
+}: DocActionSpec): GivebackAction => {
+  const isLove = mode === 'love';
+
+  return {
+    id,
+    title,
+    category,
+    platform,
+    personaTags: personas,
+    donationAmount: isLove ? 0 : amount ?? docActionDefaultAmount[mode],
+    currency: GIVEBACK_CURRENCY,
+    validationType: docActionValidationType[mode],
+    requiresLink: !isLove,
+    requiresImage: false,
+    requiresNote: false,
+    isRewarded: !isLove,
+    donationEligible: !isLove,
+    isComplianceSensitive: isLove,
+    isLoveAction: isLove,
+  };
+};
+
+const P = GivebackActionPersona;
+const C = GivebackActionCategory;
+const PL = GivebackActionPlatform;
+
+const docActionSpecs: DocActionSpec[] = [
+  // Reviews, ratings, and discovery listings
+  {
+    id: 'refresh-chrome-review',
+    title: 'Refresh an old Chrome Web Store review after a major update',
+    platform: PL.ChromeWebStore,
+    category: C.CommunityLove,
+    personas: [P.PowerUser, P.CommunityMember],
+    mode: 'love',
+  },
+  {
+    id: 'edge-addons-review',
+    title: 'Leave an honest Microsoft Edge Add-ons review',
+    platform: PL.EdgeAddons,
+    category: C.CommunityLove,
+    personas: [P.PowerUser, P.CommunityMember],
+    mode: 'love',
+  },
+  {
+    id: 'firefox-addons-review',
+    title: 'Leave an honest Firefox Add-ons review',
+    platform: PL.FirefoxAddons,
+    category: C.CommunityLove,
+    personas: [P.PowerUser, P.CommunityMember],
+    mode: 'love',
+  },
+  {
+    id: 'google-play-review',
+    title: 'Leave an honest Google Play review',
+    platform: PL.GooglePlay,
+    category: C.CommunityLove,
+    personas: [P.CommunityMember, P.PowerUser],
+    mode: 'love',
+  },
+  {
+    id: 'trustpilot-review',
+    title: 'Leave an honest Trustpilot review',
+    platform: PL.Trustpilot,
+    category: C.CommunityLove,
+    personas: [P.DailyPlusSubscriber, P.PowerUser],
+    mode: 'love',
+  },
+  {
+    id: 'g2-review',
+    title: 'Write a professional G2 review about team or workplace use',
+    platform: PL.G2,
+    category: C.CommunityLove,
+    personas: [P.TeamLead, P.SeniorDeveloper],
+    mode: 'love',
+  },
+  {
+    id: 'capterra-review',
+    title: 'Write a Capterra review with concrete workflow examples',
+    platform: PL.Capterra,
+    category: C.CommunityLove,
+    personas: [P.TeamLead, P.SeniorDeveloper],
+    mode: 'love',
+  },
+  {
+    id: 'product-hunt-review',
+    title: 'Write a Product Hunt product-page review after meaningful use',
+    platform: PL.ProductHunt,
+    category: C.CommunityLove,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'love',
+  },
+  {
+    id: 'product-hunt-follow',
+    title: 'Follow daily.dev on Product Hunt after a launch or update',
+    platform: PL.ProductHunt,
+    category: C.CommunityLove,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'love',
+  },
+  {
+    id: 'product-hunt-upvote',
+    title: 'Upvote daily.dev on Product Hunt when genuinely relevant',
+    platform: PL.ProductHunt,
+    category: C.CommunityLove,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'love',
+  },
+  {
+    id: 'alternativeto-rating',
+    title: 'Add a rating or feedback note on AlternativeTo',
+    platform: PL.Directory,
+    category: C.ProductFeedback,
+    personas: [P.PowerUser, P.CommunityMember],
+    mode: 'review',
+    amount: 20,
+  },
+  {
+    id: 'alternativeto-suggest',
+    title:
+      'Suggest daily.dev as an alternative to relevant products on AlternativeTo',
+    platform: PL.Directory,
+    category: C.ProductFeedback,
+    personas: [P.PowerUser],
+    mode: 'review',
+    amount: 20,
+  },
+  {
+    id: 'stackshare-add',
+    title: 'Add daily.dev to a StackShare stack or “tools we use” profile',
+    platform: PL.Directory,
+    category: C.ProductFeedback,
+    personas: [P.SeniorDeveloper, P.PowerUser],
+    mode: 'review',
+    amount: 20,
+  },
+  {
+    id: 'software-directory-add',
+    title:
+      'Add daily.dev to a reputable software discovery listing or tool directory',
+    platform: PL.Directory,
+    category: C.ProductFeedback,
+    personas: [P.PowerUser],
+    mode: 'review',
+    amount: 20,
+  },
+  {
+    id: 'extension-collection-add',
+    title:
+      'Add daily.dev to a curated browser-extension collection or recommendation board',
+    platform: PL.Directory,
+    category: C.ProductFeedback,
+    personas: [P.PowerUser, P.Creator],
+    mode: 'review',
+    amount: 20,
+  },
+  {
+    id: 'site-testimonial',
+    title: 'Submit a short testimonial for the daily.dev case-study wall',
+    platform: PL.DailyDev,
+    category: C.ProductFeedback,
+    personas: [P.CommunityMember, P.PowerUser],
+    mode: 'review',
+    amount: 20,
+  },
+  {
+    id: 'persona-testimonial',
+    title:
+      'Submit a persona-specific testimonial (student, maintainer, or staff engineer)',
+    platform: PL.DailyDev,
+    category: C.ProductFeedback,
+    personas: [P.Student, P.OpenSourceContributor, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 20,
+  },
+  {
+    id: 'nominate-best-tools',
+    title: 'Nominate daily.dev in a “best developer tools” voting list',
+    platform: PL.Directory,
+    category: C.CommunityLove,
+    personas: [P.PowerUser],
+    mode: 'love',
+  },
+
+  // Searchable editorial content and reference surfaces
+  {
+    id: 'medium-workflow-post',
+    title: 'Publish a Medium post on how you use daily.dev in your workflow',
+    platform: PL.Medium,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'dev-setup-post',
+    title: 'Publish a DEV post with screenshots and a real setup walkthrough',
+    platform: PL.Dev,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'hashnode-workflow-article',
+    title: 'Publish a Hashnode article about a daily.dev workflow',
+    platform: PL.Hashnode,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'personal-blog-review',
+    title: 'Write a personal-blog review of daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'newsletter-mention',
+    title:
+      'Mention daily.dev in a Substack or email newsletter you already run',
+    platform: PL.Newsletter,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.CommunityMember],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'guest-post',
+    title: 'Publish a guest post on a bootcamp, university, or community blog',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Student, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'best-extensions-article',
+    title:
+      'Write “Best Chrome extensions for developers” and include daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'stay-current-article',
+    title:
+      'Write “Best ways to stay current in software engineering” and include daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.SeniorDeveloper, P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'best-ai-news-article',
+    title: 'Write “Best AI engineering news sources” and include daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'best-devops-news-article',
+    title:
+      'Write “Best DevOps/security/cloud news sources” and include daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'browser-setup-article',
+    title: 'Write “My coding browser setup” and show daily.dev in the stack',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'new-tab-article',
+    title: 'Write “My new-tab page for developers” with a before/after setup',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.PowerUser],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'frontend-setup-guide',
+    title: 'Publish a frontend-specific setup guide using daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'ai-ml-setup-guide',
+    title: 'Publish an AI/ML-specific setup guide using daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'devops-setup-guide',
+    title: 'Publish a DevOps/security-specific setup guide using daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'interview-prep-article',
+    title: 'Publish “How daily.dev helps me prepare for interviews”',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Student, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'cs-student-article',
+    title: 'Publish “How daily.dev helps me as a CS student”',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Student],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'team-uses-article',
+    title: 'Publish “How our engineering team uses daily.dev”',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.TeamLead],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'comparison-article',
+    title: 'Publish an objective comparison between daily.dev and alternatives',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'reading-roundup',
+    title:
+      'Publish a weekly “what I read this week” roundup sourced through daily.dev',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'github-profile-readme',
+    title: 'Add daily.dev to your GitHub profile README “tools I use” section',
+    platform: PL.GitHub,
+    category: C.CommunityPosts,
+    personas: [P.OpenSourceContributor, P.PowerUser],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'repo-readme-resources',
+    title:
+      'Add daily.dev to a repository README “resources” or “tooling” section',
+    platform: PL.GitHub,
+    category: C.CommunityPosts,
+    personas: [P.OpenSourceContributor],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'github-awesome-list',
+    title: 'Add daily.dev to a relevant GitHub awesome list',
+    platform: PL.GitHub,
+    category: C.CommunityPosts,
+    personas: [P.OpenSourceContributor],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'notion-resource-hub',
+    title:
+      'Add daily.dev to a public Notion hub, wiki, or developer resource page',
+    platform: PL.Notion,
+    category: C.CommunityPosts,
+    personas: [P.Creator, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'uses-page-add',
+    title:
+      'Add daily.dev to your “uses” page, portfolio, or creator toolkit page',
+    platform: PL.Website,
+    category: C.CommunityPosts,
+    personas: [P.Creator, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'starter-pack-template',
+    title: 'Publish a public starter-pack template that includes daily.dev',
+    platform: PL.Notion,
+    category: C.CommunityPosts,
+    personas: [P.PowerUser, P.Creator],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'suggest-to-curator',
+    title:
+      'Suggest daily.dev to a blogger or newsletter curator covering dev tools',
+    platform: PL.Newsletter,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'earn-independent-coverage',
+    title: 'Earn independent coverage that could support reference notability',
+    platform: PL.Blog,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.SeniorDeveloper],
+    mode: 'love',
+  },
+  {
+    id: 'wikipedia-talk-request',
+    title:
+      'Make a neutral, disclosed Wikipedia Talk-page request for factual corrections',
+    platform: PL.Wiki,
+    category: C.CommunityLove,
+    personas: [P.SeniorDeveloper],
+    mode: 'love',
+  },
+  {
+    id: 'wikidata-hygiene',
+    title: 'Help with community-maintained Wikidata hygiene where notable',
+    platform: PL.Wiki,
+    category: C.CommunityLove,
+    personas: [P.OpenSourceContributor],
+    mode: 'love',
+  },
+
+  // Community discussions and recommendation threads
+  {
+    id: 'reddit-stay-updated',
+    title: 'Answer a Reddit thread asking how developers stay up to date',
+    platform: PL.Reddit,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember, P.PowerUser],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'reddit-setup-showcase',
+    title: 'Post a Reddit setup showcase showing how you configured daily.dev',
+    platform: PL.Reddit,
+    category: C.CommunityPosts,
+    personas: [P.PowerUser],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'reddit-extensions',
+    title: 'Reply in Reddit threads about favorite developer extensions',
+    platform: PL.Reddit,
+    category: C.CommunityPosts,
+    personas: [P.PowerUser],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'reddit-newtab',
+    title:
+      'Reply in Reddit threads about better new-tab pages or homepage tools',
+    platform: PL.Reddit,
+    category: C.CommunityPosts,
+    personas: [P.PowerUser],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'reddit-doomscroll',
+    title:
+      'Reply in Reddit threads about avoiding doomscrolling while staying informed',
+    platform: PL.Reddit,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember, P.Student],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'reddit-student',
+    title:
+      'Reply in Reddit learning threads with a student-specific daily.dev use case',
+    platform: PL.Reddit,
+    category: C.CommunityPosts,
+    personas: [P.Student],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'reddit-niche-news',
+    title: 'Reply in Reddit threads about AI-news or web-dev-news tooling',
+    platform: PL.Reddit,
+    category: C.CommunityPosts,
+    personas: [P.PowerUser],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'hn-overload-comment',
+    title:
+      'Comment on Hacker News threads about information overload or feed curation',
+    platform: PL.HackerNews,
+    category: C.CommunityPosts,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'hn-workflow-comment',
+    title:
+      'Comment on Hacker News threads comparing reader workflows or dev homepages',
+    platform: PL.HackerNews,
+    category: C.CommunityPosts,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'show-hn',
+    title: 'Submit a Show HN around a genuinely new workflow or integration',
+    platform: PL.HackerNews,
+    category: C.CommunityPosts,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'ask-hn',
+    title:
+      'Start an Ask HN conversation about staying current, using your own workflow',
+    platform: PL.HackerNews,
+    category: C.CommunityPosts,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'stackoverflow-answer',
+    title:
+      'Write a Stack Overflow answer where daily.dev is directly relevant (disclose affiliation)',
+    platform: PL.StackOverflow,
+    category: C.CommunityPosts,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'stackoverflow-resource',
+    title:
+      'Contribute to Stack Overflow resource discussions with original, human-written content',
+    platform: PL.StackOverflow,
+    category: C.CommunityPosts,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'dev-comment',
+    title:
+      'Leave useful comments on DEV posts where daily.dev solves the problem',
+    platform: PL.Dev,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'hashnode-comment',
+    title:
+      'Leave useful comments on Hashnode posts where daily.dev fits the workflow',
+    platform: PL.Hashnode,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'github-discussions-mention',
+    title:
+      'Mention daily.dev in GitHub Discussions threads about tooling or resources',
+    platform: PL.GitHub,
+    category: C.CommunityPosts,
+    personas: [P.OpenSourceContributor],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'oss-thread-mention',
+    title:
+      'Mention daily.dev in OSS community threads about keeping contributors informed',
+    platform: PL.GitHub,
+    category: C.CommunityPosts,
+    personas: [P.OpenSourceContributor],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'discord-recommend',
+    title:
+      'Recommend daily.dev in Discord servers’ tools or resources channels',
+    platform: PL.Discord,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'slack-recommend',
+    title:
+      'Recommend daily.dev in Slack communities’ tools or resources channels',
+    platform: PL.Slack,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'internal-wiki-add',
+    title:
+      'Add daily.dev to a public internal engineering wiki or onboarding page',
+    platform: PL.Notion,
+    category: C.CommunityPosts,
+    personas: [P.TeamLead, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'campus-share',
+    title:
+      'Share daily.dev in a university CS club forum, Discord, or Telegram group',
+    platform: PL.Telegram,
+    category: C.CommunityPosts,
+    personas: [P.Student],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'indie-hackers-post',
+    title: 'Post a workflow story on Indie Hackers or a maker forum',
+    platform: PL.IndieHackers,
+    category: C.CommunityPosts,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'product-hunt-comment',
+    title:
+      'Leave a genuine Product Hunt launch-day comment about how you use daily.dev',
+    platform: PL.ProductHunt,
+    category: C.CommunityLove,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'love',
+  },
+  {
+    id: 'x-reply-tools',
+    title:
+      'Reply to X posts asking for favorite developer tools or news workflows',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.PowerUser, P.Creator],
+    mode: 'proof',
+  },
+  {
+    id: 'linkedin-reply-tools',
+    title:
+      'Reply to LinkedIn posts asking for favorite developer tools or learning systems',
+    platform: PL.LinkedIn,
+    category: C.SocialMedia,
+    personas: [P.SeniorDeveloper, P.TeamLead],
+    mode: 'proof',
+  },
+  {
+    id: 'newsletter-reply',
+    title:
+      'Add daily.dev to newsletter community replies or reader recommendation sections',
+    platform: PL.Newsletter,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'podcast-suggest',
+    title:
+      'Suggest daily.dev to podcast hosts or community call-for-tools threads',
+    platform: PL.Podcast,
+    category: C.CommunityPosts,
+    personas: [P.Creator, P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'discourse-answer',
+    title:
+      'Answer relevant questions in Discourse communities or other forum platforms',
+    platform: PL.Forum,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'regional-forum-post',
+    title:
+      'Post in regional-language forums or communities with a localized use case',
+    platform: PL.Forum,
+    category: C.CommunityPosts,
+    personas: [P.Creator, P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+
+  // Creator media and educational content
+  {
+    id: 'youtube-review',
+    title: 'Publish a full YouTube review of daily.dev',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-setup-tutorial',
+    title:
+      'Publish a YouTube setup tutorial showing exactly how to configure a feed',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.PowerUser],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-extensions-roundup',
+    title: 'Include daily.dev in a “top developer extensions” roundup video',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-browser-setup',
+    title: 'Include daily.dev in a “my coding browser setup” video',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-frontend-tutorial',
+    title: 'Create a niche tutorial “daily.dev for frontend developers”',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-ai-tutorial',
+    title: 'Create a niche tutorial “daily.dev for AI engineers”',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-devops-tutorial',
+    title: 'Create a niche tutorial “daily.dev for DevOps or security teams”',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-comparison',
+    title: 'Publish a comparison video versus alternatives',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-interview-prep',
+    title: 'Publish an interview-prep workflow video using daily.dev',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.SeniorDeveloper, P.Student],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-student-productivity',
+    title: 'Publish a student productivity video featuring daily.dev',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Student, P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'youtube-oss-workflow',
+    title:
+      'Publish an open-source maintainer workflow video featuring daily.dev',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.OpenSourceContributor],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'shortform-before-after',
+    title: 'Publish a short-form before/after feed-customization clip',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'shortform-feeds-i-follow',
+    title: 'Publish a short-form “3 feeds I follow on daily.dev” clip',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'day-in-the-life-video',
+    title: 'Include daily.dev in a day-in-the-life developer video',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'one-week-challenge-video',
+    title: 'Publish a “one week with daily.dev” challenge video',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'live-coding-stream',
+    title: 'Mention and demonstrate daily.dev during a live coding stream',
+    platform: PL.Twitch,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'twitch-panel-add',
+    title:
+      'Add daily.dev to a Twitch panel, bot command, or stream resource page',
+    platform: PL.Twitch,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'podcast-segment',
+    title:
+      'Record a podcast segment or mini-review discussing how you use daily.dev',
+    platform: PL.Podcast,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'webinar-workshop',
+    title:
+      'Host a webinar or live workshop that includes daily.dev in a workflow',
+    platform: PL.Event,
+    category: C.CreatorContent,
+    personas: [P.SeniorDeveloper, P.CommunityMember],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'meetup-lightning-talk',
+    title: 'Give a meetup lightning talk mentioning daily.dev in your workflow',
+    platform: PL.Event,
+    category: C.CreatorContent,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'conference-slide',
+    title: 'Include daily.dev on a conference slide or resource list',
+    platform: PL.Event,
+    category: C.CreatorContent,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'loom-walkthrough',
+    title: 'Publish a Loom walkthrough on LinkedIn or X showing your workflow',
+    platform: PL.LinkedIn,
+    category: C.CreatorContent,
+    personas: [P.SeniorDeveloper, P.Creator],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'monthly-tools-roundup-video',
+    title: 'Mention daily.dev in a monthly tools roundup video',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'doomscroll-video',
+    title:
+      'Publish a “stay current without doomscrolling” video with daily.dev as one tactic',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 50,
+  },
+  {
+    id: 'creator-toolkit-page',
+    title: 'Add daily.dev to a public creator toolkit or resource page',
+    platform: PL.Website,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'localized-tutorial',
+    title: 'Publish a localized, non-English daily.dev tutorial',
+    platform: PL.YouTube,
+    category: C.CreatorContent,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 50,
+  },
+
+  // Social amplification and ambassador loops
+  {
+    id: 'follow-x',
+    title: 'Follow daily.dev’s X account',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.CommunityMember, P.PowerUser],
+    mode: 'proof',
+  },
+  {
+    id: 'follow-linkedin',
+    title: 'Follow daily.dev’s LinkedIn page',
+    platform: PL.LinkedIn,
+    category: C.SocialMedia,
+    personas: [P.SeniorDeveloper, P.TeamLead],
+    mode: 'proof',
+  },
+  {
+    id: 'subscribe-youtube',
+    title: 'Subscribe to the official daily.dev YouTube channel',
+    platform: PL.YouTube,
+    category: C.SocialMedia,
+    personas: [P.CommunityMember],
+    mode: 'proof',
+  },
+  {
+    id: 'engage-announcement',
+    title: 'Like, save, or comment on a major daily.dev feature announcement',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.CommunityMember, P.PowerUser],
+    mode: 'proof',
+  },
+  {
+    id: 'repost-launch',
+    title: 'Repost a daily.dev launch or update post with your own experience',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.PowerUser, P.Creator],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'quote-post-feed',
+    title:
+      'Quote-post a daily.dev feature announcement with a screenshot of your feed',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.PowerUser],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'screenshot-setup-x',
+    title: 'Share a screenshot of your daily.dev setup on X',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.PowerUser],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'screenshot-setup-linkedin',
+    title: 'Share a screenshot of your daily.dev setup on LinkedIn',
+    platform: PL.LinkedIn,
+    category: C.SocialMedia,
+    personas: [P.SeniorDeveloper],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'linkedin-carousel',
+    title: 'Publish a LinkedIn carousel titled “How I use daily.dev”',
+    platform: PL.LinkedIn,
+    category: C.SocialMedia,
+    personas: [P.SeniorDeveloper, P.Creator],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'share-weekly-trend',
+    title: 'Share a weekly top article or trend you found through daily.dev',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.CommunityMember, P.PowerUser],
+    mode: 'proof',
+  },
+  {
+    id: 'share-collection',
+    title:
+      'Share a favorite bookmark, collection, or list discovered through daily.dev',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.PowerUser],
+    mode: 'proof',
+  },
+  {
+    id: 'share-giveback-card',
+    title: 'Share your Giveback milestone card with why you support daily.dev',
+    platform: PL.DailyDev,
+    category: C.SocialMedia,
+    personas: [P.CommunityMember, P.PowerUser],
+    mode: 'proof',
+  },
+  {
+    id: 'tag-desk-setup',
+    title: 'Tag daily.dev in a “my desk setup” or “my browser toolbar” post',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.Creator],
+    mode: 'proof',
+  },
+  {
+    id: 'team-onboarding-doc',
+    title:
+      'Add daily.dev to a team onboarding document or internal starter guide',
+    platform: PL.Notion,
+    category: C.Referrals,
+    personas: [P.TeamLead],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'mentor-resource-pack',
+    title: 'Add daily.dev to a mentor resource pack or intern starter kit',
+    platform: PL.Website,
+    category: C.Referrals,
+    personas: [P.SeniorDeveloper],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'bootcamp-syllabus',
+    title:
+      'Add daily.dev to a bootcamp syllabus or community learning resource list',
+    platform: PL.Website,
+    category: C.Referrals,
+    personas: [P.SeniorDeveloper, P.Student],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'campus-ambassador-demo',
+    title: 'Run a campus ambassador demo or short onboarding session',
+    platform: PL.Event,
+    category: C.Referrals,
+    personas: [P.Student, P.CommunityMember],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'feed-office-hours',
+    title:
+      'Run office hours or a “configure your daily.dev feed” session for a community',
+    platform: PL.Event,
+    category: C.Referrals,
+    personas: [P.CommunityMember, P.SeniorDeveloper],
+    mode: 'review',
+    amount: 30,
+  },
+  {
+    id: 'meme-post',
+    title:
+      'Create a meme or relatable post about developer-news overload and daily.dev',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.Creator],
+    mode: 'proof',
+  },
+  {
+    id: 'localized-cheat-sheet',
+    title:
+      'Create a localized cheat sheet, starter guide, or template around daily.dev',
+    platform: PL.Blog,
+    category: C.CommunityPosts,
+    personas: [P.Creator],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'pitch-newsletter-curator',
+    title:
+      'Pitch daily.dev to newsletter curators or roundup authors who feature dev tools',
+    platform: PL.Newsletter,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'suggest-to-creators',
+    title:
+      'Suggest daily.dev to creators compiling “tools I use” videos or posts',
+    platform: PL.YouTube,
+    category: C.CommunityPosts,
+    personas: [P.CommunityMember],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'public-bookmarks-collection',
+    title:
+      'Publish a public bookmarks or Raindrop-style collection that includes daily.dev',
+    platform: PL.Directory,
+    category: C.CommunityPosts,
+    personas: [P.PowerUser],
+    mode: 'review',
+    amount: 25,
+  },
+  {
+    id: 'thirty-day-challenge',
+    title: 'Run a “30-day daily.dev challenge” and publish a recap thread',
+    platform: PL.X,
+    category: C.SocialMedia,
+    personas: [P.PowerUser, P.Creator],
+    mode: 'proof',
+    amount: 15,
+  },
+  {
+    id: 'invite-coworkers-feeds',
+    title:
+      'Invite coworkers or friends to configure feeds together and share the results',
+    platform: PL.DailyDev,
+    category: C.Referrals,
+    personas: [P.CommunityMember, P.TeamLead],
+    mode: 'review',
+    amount: 25,
+  },
+];
+
+const docGivebackActions: GivebackAction[] =
+  docActionSpecs.map(createDocAction);
+
+// All catalog actions: the hand-written core set plus the full growth library.
+const allGivebackActions: GivebackAction[] = [
+  ...baseGivebackActions,
+  ...docGivebackActions,
+];
+
+// A small pool of real community avatars reused across action cards so the
+// catalog reads as a living, crowded campaign. Swapped for per-action
+// contributor avatars when the backend lands.
+// Per-action community engagement, keyed by action id. Counts and momentum are
+// what we put in front of the user; faces are rotated from the shared pool.
+interface ActionEngagement {
+  contributorsCount: number;
+  contributorsLast24h: number;
+  isTrending?: boolean;
+}
+
+const actionEngagement: Record<string, ActionEngagement> = {
+  'share-launch-post': {
+    contributorsCount: 1284,
+    contributorsLast24h: 96,
+    isTrending: true,
+  },
+  'record-demo-video': {
+    contributorsCount: 142,
+    contributorsLast24h: 7,
+  },
+  'invite-dev-friend': {
+    contributorsCount: 2310,
+    contributorsLast24h: 184,
+    isTrending: true,
+  },
+  'refer-team': {
+    contributorsCount: 318,
+    contributorsLast24h: 21,
+  },
+  'submit-product-feedback': {
+    contributorsCount: 876,
+    contributorsLast24h: 54,
+  },
+  'join-user-interview': {
+    contributorsCount: 64,
+    contributorsLast24h: 5,
+  },
+  'post-community-tip': {
+    contributorsCount: 941,
+    contributorsLast24h: 73,
+    isTrending: true,
+  },
+  'write-blog-post': {
+    contributorsCount: 203,
+    contributorsLast24h: 12,
+  },
+  'create-open-source-note': {
+    contributorsCount: 156,
+    contributorsLast24h: 9,
+  },
+  'share-squad-story': {
+    contributorsCount: 512,
+    contributorsLast24h: 38,
+  },
+  'complete-onboarding-quiz': {
+    contributorsCount: 3640,
+    contributorsLast24h: 271,
+    isTrending: true,
+  },
+  'honest-app-store-review': {
+    contributorsCount: 1102,
+    contributorsLast24h: 61,
+  },
+  'chrome-store-love': {
+    contributorsCount: 988,
+    contributorsLast24h: 47,
+  },
+  'mentor-student': {
+    contributorsCount: 89,
+    contributorsLast24h: 4,
+  },
+};
+
+// Deterministic, varied social proof for actions without hand-tuned numbers, so
+// the (much larger) catalog still reads as a crowded, living campaign. Love
+// actions stay calmer and never get the "Popular" badge.
+const deriveEngagement = (
+  action: GivebackAction,
+  index: number,
+): ActionEngagement => {
+  const contributorsCount = ((index * 137 + 53) % 1180) + 28;
+  const contributorsLast24h = ((index * 17 + 3) % 70) + 1;
+  return {
+    contributorsCount,
+    contributorsLast24h,
+    isTrending: !action.isLoveAction && index % 11 === 0,
+  };
+};
+
+export const givebackActions: GivebackAction[] = allGivebackActions.map(
+  (action, index) => {
+    const engagement =
+      actionEngagement[action.id] ?? deriveEngagement(action, index);
+
+    const start = (index * 2) % communityAvatars.length;
+    const contributorAvatars = Array.from(
+      { length: 3 },
+      (_, offset) =>
+        communityAvatars[(start + offset) % communityAvatars.length],
+    );
+
+    return {
+      ...action,
+      contributorsCount: engagement.contributorsCount,
+      contributorsLast24h: engagement.contributorsLast24h,
+      isTrending: engagement.isTrending,
+      contributorAvatars,
+    };
+  },
+);
+
+// The weekly contribution leaderboard. This is the gamified heart of the
+// campaign: ranks, streaks, rank movement and titles turn contributing into a
+// game and the viewer's own row ("You") gives a clear next rung to climb.
+export const givebackLeaderboard: GivebackLeaderboardEntry[] = [
+  {
+    id: 'lb-ana',
+    rank: 1,
+    name: 'Ana Pereira',
+    handle: '@anabuilds',
+    avatar: communityAvatars[4],
+    contributionAmount: 320,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 14,
+    streakDays: 12,
+    rankChange: 1,
+    title: 'Team captain',
+  },
+  {
+    id: 'lb-marco',
+    rank: 2,
+    name: 'Marco Reyes',
+    handle: '@marcocodes',
+    avatar: communityAvatars[2],
+    contributionAmount: 245,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 11,
+    streakDays: 9,
+    rankChange: 2,
+    title: 'Streak master',
+  },
+  {
+    id: 'lb-lena',
+    rank: 3,
+    name: 'Lena Schmidt',
+    handle: '@lenadev',
+    avatar: communityAvatars[1],
+    contributionAmount: 180,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 9,
+    streakDays: 7,
+    rankChange: -1,
+    title: 'Rising star',
+  },
+  {
+    id: 'lb-diego',
+    rank: 4,
+    name: 'Diego Santos',
+    handle: '@diegobuilds',
+    avatar: communityAvatars[0],
+    contributionAmount: 150,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 8,
+    streakDays: 5,
+    rankChange: 3,
+  },
+  {
+    id: 'lb-priya',
+    rank: 5,
+    name: 'Priya Nair',
+    handle: '@priyacodes',
+    avatar: communityAvatars[3],
+    contributionAmount: 130,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 7,
+    streakDays: 6,
+    rankChange: 0,
+  },
+  {
+    id: 'lb-tomas',
+    rank: 6,
+    name: 'Tomas Novak',
+    handle: '@tomasdev',
+    avatar: communityAvatars[5],
+    contributionAmount: 125,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 6,
+    streakDays: 4,
+    rankChange: 1,
+  },
+  {
+    id: 'lb-yuki',
+    rank: 7,
+    name: 'Yuki Tanaka',
+    handle: '@yukibuilds',
+    avatar: communityAvatars[2],
+    contributionAmount: 115,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 5,
+    streakDays: 8,
+    rankChange: -2,
+  },
+  {
+    id: 'lb-you',
+    rank: 8,
+    // Synced at runtime to the live earned total from your action records (see
+    // GivebackContext), so the board and the "Your contribution" card never
+    // disagree. This static value is just the matching default.
+    name: 'You',
+    handle: '@you',
+    avatar: communityAvatars[0],
+    contributionAmount: 110,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 5,
+    streakDays: 3,
+    rankChange: 4,
+    isCurrentUser: true,
+  },
+  {
+    id: 'lb-sara',
+    rank: 9,
+    name: 'Sara Cohen',
+    handle: '@saradev',
+    avatar: communityAvatars[1],
+    contributionAmount: 80,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 4,
+    streakDays: 2,
+    rankChange: 0,
+  },
+  {
+    id: 'lb-omar',
+    rank: 10,
+    name: 'Omar Farouk',
+    handle: '@omarcodes',
+    avatar: communityAvatars[3],
+    contributionAmount: 70,
+    currency: GIVEBACK_CURRENCY,
+    actionsCount: 4,
+    streakDays: 5,
+    rankChange: -1,
+  },
+];
+
+// Today's shared push: every action chips into one collective bar so the board
+// reads as a team effort, not just rivalry.
+export const givebackCommunityRally: GivebackCommunityRally = {
+  unlockedToday: 3420,
+  targetToday: 5000,
+  currency: GIVEBACK_CURRENCY,
+  contributorsToday: 271,
+};
+
+// The "Take action" spotlight reuses the same source of truth as the board, so
+// the #1 contributor never disagrees with the top of the leaderboard.
+export const givebackTopContributors: GivebackTopContributor[] =
+  givebackLeaderboard
+    .filter((entry) => !entry.isCurrentUser)
+    .slice(0, 3)
+    .map((entry) => ({
+      id: entry.id,
+      name: entry.name,
+      handle: entry.handle,
+      avatar: entry.avatar,
+      contributionAmount: entry.contributionAmount,
+      currency: entry.currency,
+      actionsCount: entry.actionsCount,
+    }));
+
+export const givebackUserActions: GivebackUserAction[] = [
+  {
+    actionId: 'share-launch-post',
+    status: GivebackUserActionStatus.CountedTowardGoal,
+    unlockedDonationAmount: 10,
+    pendingDonationAmount: 0,
+    approvedDonationAmount: 10,
+    rejectedDonationAmount: 0,
+    submittedAt: '2026-05-28T10:00:00.000Z',
+    reviewedAt: '2026-05-28T13:00:00.000Z',
+  },
+  {
+    actionId: 'record-demo-video',
+    status: GivebackUserActionStatus.PendingReview,
+    unlockedDonationAmount: 50,
+    pendingDonationAmount: 50,
+    approvedDonationAmount: 0,
+    rejectedDonationAmount: 0,
+    submittedAt: '2026-05-30T14:00:00.000Z',
+  },
+  {
+    actionId: 'invite-dev-friend',
+    status: GivebackUserActionStatus.Approved,
+    unlockedDonationAmount: 15,
+    pendingDonationAmount: 0,
+    approvedDonationAmount: 15,
+    rejectedDonationAmount: 0,
+    submittedAt: '2026-05-29T09:00:00.000Z',
+    reviewedAt: '2026-05-29T09:05:00.000Z',
+  },
+  {
+    actionId: 'refer-team',
+    status: GivebackUserActionStatus.Started,
+    unlockedDonationAmount: 0,
+    pendingDonationAmount: 0,
+    approvedDonationAmount: 0,
+    rejectedDonationAmount: 0,
+  },
+  {
+    actionId: 'submit-product-feedback',
+    status: GivebackUserActionStatus.NeedsMoreInfo,
+    unlockedDonationAmount: 10,
+    pendingDonationAmount: 0,
+    approvedDonationAmount: 0,
+    rejectedDonationAmount: 0,
+    submittedAt: '2026-05-27T12:00:00.000Z',
+    needsMoreInfoReason: 'Add one concrete example so we can validate it.',
+  },
+  {
+    actionId: 'join-user-interview',
+    status: GivebackUserActionStatus.Expired,
+    unlockedDonationAmount: 0,
+    pendingDonationAmount: 0,
+    approvedDonationAmount: 0,
+    rejectedDonationAmount: 0,
+  },
+  {
+    actionId: 'post-community-tip',
+    status: GivebackUserActionStatus.Rejected,
+    unlockedDonationAmount: 15,
+    pendingDonationAmount: 0,
+    approvedDonationAmount: 0,
+    rejectedDonationAmount: 15,
+    submittedAt: '2026-05-26T16:00:00.000Z',
+    reviewedAt: '2026-05-27T09:00:00.000Z',
+    rejectionReason: 'The post was not publicly accessible.',
+  },
+  {
+    actionId: 'share-squad-story',
+    status: GivebackUserActionStatus.Submitted,
+    unlockedDonationAmount: 20,
+    pendingDonationAmount: 20,
+    approvedDonationAmount: 0,
+    rejectedDonationAmount: 0,
+    submittedAt: '2026-06-01T08:30:00.000Z',
+  },
+  {
+    actionId: 'complete-onboarding-quiz',
+    status: GivebackUserActionStatus.AutoValidating,
+    unlockedDonationAmount: 5,
+    pendingDonationAmount: 5,
+    approvedDonationAmount: 0,
+    rejectedDonationAmount: 0,
+    submittedAt: '2026-06-01T11:00:00.000Z',
+  },
+];
+
+// A long, dynamic ladder (the journey UI only ever shows a window of it). Each
+// blueprint becomes a level + reward; the welcome gift at level 1 is free just
+// for showing up.
+interface LevelBlueprint {
+  name: string;
+  required: number;
+  reward: {
+    type: GivebackRewardType;
+    title: string;
+    description?: string;
+    isSecret?: boolean;
+  };
+}
+
+const levelBlueprints: LevelBlueprint[] = [
+  {
+    name: 'First spark',
+    required: 0,
+    reward: {
+      type: GivebackRewardType.Other,
+      title: '$10 to your causes',
+      description:
+        'On us, just for joining and picking the causes you care about.',
+    },
+  },
+  {
+    name: 'Newcomer',
+    required: 25,
+    reward: {
+      type: GivebackRewardType.Cores,
+      title: '25 Cores',
+      description: 'A small boost for your first action.',
+    },
+  },
+  {
+    name: 'Helping hand',
+    required: 50,
+    reward: {
+      type: GivebackRewardType.Cores,
+      title: '50 Cores',
+      description: 'A head start for showing up early.',
+    },
+  },
+  {
+    name: 'Regular',
+    required: 100,
+    reward: {
+      type: GivebackRewardType.DailyPlus,
+      title: '1 month of daily.dev Plus',
+      description: 'A thank-you for moving the community forward.',
+    },
+  },
+  {
+    name: 'Contributor',
+    required: 150,
+    reward: {
+      type: GivebackRewardType.Badge,
+      title: 'Contributor badge',
+      description: 'A mark of someone who keeps showing up.',
+    },
+  },
+  {
+    name: 'Supporter',
+    required: 225,
+    reward: { type: GivebackRewardType.Cores, title: '150 Cores' },
+  },
+  {
+    name: 'Changemaker',
+    required: 300,
+    reward: {
+      type: GivebackRewardType.Badge,
+      title: 'Changemaker flair',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Advocate',
+    required: 400,
+    reward: { type: GivebackRewardType.Cores, title: '300 Cores' },
+  },
+  {
+    name: 'Trailblazer',
+    required: 525,
+    reward: {
+      type: GivebackRewardType.DailyPlus,
+      title: '3 months of Plus',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Community pillar',
+    required: 675,
+    reward: {
+      type: GivebackRewardType.Badge,
+      title: 'Community pillar frame',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Catalyst',
+    required: 850,
+    reward: { type: GivebackRewardType.Cores, title: '600 Cores' },
+  },
+  {
+    name: 'Champion',
+    required: 1050,
+    reward: { type: GivebackRewardType.SwagCoupon, title: 'Sticker pack' },
+  },
+  {
+    name: 'Luminary',
+    required: 1300,
+    reward: {
+      type: GivebackRewardType.Badge,
+      title: 'Luminary badge',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Patron',
+    required: 1600,
+    reward: {
+      type: GivebackRewardType.DailyPlus,
+      title: '6 months of Plus',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Vanguard',
+    required: 1950,
+    reward: {
+      type: GivebackRewardType.Cores,
+      title: '1,200 Cores',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Headliner',
+    required: 2350,
+    reward: { type: GivebackRewardType.SwagCoupon, title: 'T-shirt coupon' },
+  },
+  {
+    name: 'Mentor',
+    required: 2800,
+    reward: {
+      type: GivebackRewardType.Badge,
+      title: 'Mentor badge',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Icon',
+    required: 3350,
+    reward: {
+      type: GivebackRewardType.Badge,
+      title: 'Icon profile frame',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Mythic',
+    required: 4000,
+    reward: {
+      type: GivebackRewardType.Other,
+      title: 'Mystery drop',
+      isSecret: true,
+    },
+  },
+  {
+    name: 'Legend',
+    required: 5000,
+    reward: {
+      type: GivebackRewardType.SwagCoupon,
+      title: 'Legend swag bundle',
+      description: 'For the ones who go all in.',
+      isSecret: true,
+    },
+  },
+];
+
+export const givebackLevels: GivebackLevel[] = levelBlueprints.map(
+  (blueprint, index) => ({
+    id: `level-${index + 1}`,
+    levelNumber: index + 1,
+    name: blueprint.name,
+    requiredApprovedAmount: blueprint.required,
+    reward: {
+      id: `reward-${index + 1}`,
+      type: blueprint.reward.type,
+      title: blueprint.reward.title,
+      secretTitle: 'Mystery reward',
+      description: blueprint.reward.description,
+      status:
+        blueprint.required === 0
+          ? GivebackRewardStatus.Unlocked
+          : GivebackRewardStatus.Locked,
+      isSecret: blueprint.reward.isSecret ?? false,
+    },
+  }),
+);
+
+export const givebackSponsors: GivebackSponsor[] = [
+  {
+    id: 'sponsor-vercel',
+    name: 'Vercel',
+    type: GivebackSponsorType.Company,
+    amount: 5000,
+    currency: GIVEBACK_CURRENCY,
+    url: 'https://vercel.com',
+    logoUrl: 'https://svgl.app/library/vercel.svg',
+    message: 'Backing the tools and people developers rely on.',
+    isFounding: true,
+    createdAt: '2026-05-20T09:00:00.000Z',
+  },
+  {
+    id: 'sponsor-sentry',
+    name: 'Sentry',
+    type: GivebackSponsorType.Company,
+    amount: 3000,
+    currency: GIVEBACK_CURRENCY,
+    url: 'https://sentry.io',
+    logoUrl: 'https://svgl.app/library/sentry.svg',
+    message: 'Open source moves the world. Happy to chip in.',
+    isFounding: true,
+    createdAt: '2026-05-21T11:30:00.000Z',
+  },
+  {
+    id: 'sponsor-supabase',
+    name: 'Supabase',
+    type: GivebackSponsorType.Company,
+    amount: 2000,
+    currency: GIVEBACK_CURRENCY,
+    url: 'https://supabase.com',
+    logoUrl: 'https://svgl.app/library/supabase.svg',
+    message: 'For the community that builds in public.',
+    createdAt: '2026-05-23T14:10:00.000Z',
+  },
+  {
+    id: 'sponsor-postman',
+    name: 'Postman',
+    type: GivebackSponsorType.Company,
+    amount: 1500,
+    currency: GIVEBACK_CURRENCY,
+    url: 'https://postman.com',
+    logoUrl: 'https://svgl.app/library/postman.svg',
+    createdAt: '2026-05-24T08:45:00.000Z',
+  },
+  {
+    id: 'sponsor-raycast',
+    name: 'Raycast',
+    type: GivebackSponsorType.Company,
+    amount: 1000,
+    currency: GIVEBACK_CURRENCY,
+    url: 'https://raycast.com',
+    logoUrl: 'https://svgl.app/library/raycast.svg',
+    createdAt: '2026-05-25T16:20:00.000Z',
+  },
+  {
+    id: 'sponsor-ido',
+    name: 'Ido Shamun',
+    type: GivebackSponsorType.Individual,
+    amount: 500,
+    currency: GIVEBACK_CURRENCY,
+    message: 'Proud to kick this off with the community.',
+    isFounding: true,
+    createdAt: '2026-05-19T07:00:00.000Z',
+  },
+  {
+    id: 'sponsor-acme-studio',
+    name: 'Northwind Labs',
+    type: GivebackSponsorType.Company,
+    amount: 750,
+    currency: GIVEBACK_CURRENCY,
+    createdAt: '2026-05-27T10:05:00.000Z',
+  },
+  {
+    id: 'sponsor-maya',
+    name: 'Maya Rodriguez',
+    type: GivebackSponsorType.Individual,
+    amount: 250,
+    currency: GIVEBACK_CURRENCY,
+    message: 'Giving back to the tools that taught me to code.',
+    createdAt: '2026-05-28T19:40:00.000Z',
+  },
+  {
+    id: 'sponsor-jonas',
+    name: 'Jonas Keller',
+    type: GivebackSponsorType.Individual,
+    amount: 100,
+    currency: GIVEBACK_CURRENCY,
+    createdAt: '2026-05-29T12:15:00.000Z',
+  },
+  {
+    id: 'sponsor-priya',
+    name: 'Priya Nair',
+    type: GivebackSponsorType.Individual,
+    amount: 50,
+    currency: GIVEBACK_CURRENCY,
+    message: 'Every bit counts.',
+    createdAt: '2026-05-30T15:55:00.000Z',
+  },
+];
+
+const givebackSponsoredTotal = givebackSponsors.reduce(
+  (sum, sponsor) => sum + sponsor.amount,
+  0,
+);
+
+export const createMockCampaign = (
+  overrides: Partial<GivebackCampaign> = {},
+): GivebackCampaign => ({
+  id: 'campaign-2026',
+  name: 'Giveback',
+  slug: 'giveback',
+  status: GivebackCampaignStatus.Active,
+  goalAmount: 10000,
+  currency: GIVEBACK_CURRENCY,
+  approvedAmount: 5000,
+  pendingAmount: 450,
+  sponsoredAmount: givebackSponsoredTotal,
+  backersCount: 12480,
+  backersLast24h: 214,
+  stretchGoals: [
+    {
+      id: 'stretch-2500',
+      amount: 2500,
+      title: 'First grants sent',
+      description: 'Initial donations reach freeCodeCamp and the EFF.',
+    },
+    {
+      id: 'stretch-5000',
+      amount: 5000,
+      title: 'Open-source fund',
+      description: 'A maintainer fund for the tools developers rely on.',
+    },
+    {
+      id: 'stretch-7500',
+      amount: 7500,
+      title: 'Scholarships unlocked',
+      description: 'Coding scholarships for underrepresented developers.',
+    },
+    {
+      id: 'stretch-10000',
+      amount: 10000,
+      title: 'Full goal funded',
+      description: 'All four community causes fully funded.',
+    },
+    {
+      id: 'stretch-15000',
+      amount: 15000,
+      title: 'Stretch: we double it',
+      description: 'daily.dev matches the next $5k, dollar for dollar.',
+    },
+  ],
+  sponsors: givebackSponsors,
+  heroCopy: 'Daily Dev funds the donation. You help unlock it.',
+  ...overrides,
+});
+
+export const createMockUserProfile = (
+  overrides: Partial<GivebackUserProfile> = {},
+): GivebackUserProfile => ({
+  currentLevel: 3,
+  approvedContributionAmount: 85,
+  pendingContributionAmount: 25,
+  actionsCompletedCount: 4,
+  selectedCauseIds: ['cause-python-software-foundation'],
+  ...overrides,
+});
diff --git a/packages/shared/src/features/giveback/statusLabels.ts b/packages/shared/src/features/giveback/statusLabels.ts
new file mode 100644
index 00000000000..7af18d7d784
--- /dev/null
+++ b/packages/shared/src/features/giveback/statusLabels.ts
@@ -0,0 +1,86 @@
+import {
+  GivebackActionCategory,
+  GivebackActionPersona,
+  GivebackActionValidationType,
+  GivebackUserActionStatus,
+} from './types';
+
+export const actionCategoryLabels: Record<GivebackActionCategory, string> = {
+  [GivebackActionCategory.SocialMedia]: 'Social media',
+  [GivebackActionCategory.CreatorContent]: 'Creator content',
+  [GivebackActionCategory.Referrals]: 'Referrals',
+  [GivebackActionCategory.ProductFeedback]: 'Product feedback',
+  [GivebackActionCategory.CommunityPosts]: 'Community posts',
+  [GivebackActionCategory.CommunityLove]: 'Community love',
+};
+
+export const actionPersonaLabels: Record<GivebackActionPersona, string> = {
+  [GivebackActionPersona.Creator]: 'Creator',
+  [GivebackActionPersona.Student]: 'Student',
+  [GivebackActionPersona.SeniorDeveloper]: 'Senior developer',
+  [GivebackActionPersona.PowerUser]: 'Power user',
+  [GivebackActionPersona.CommunityMember]: 'Community member',
+  [GivebackActionPersona.OpenSourceContributor]: 'Open-source contributor',
+  [GivebackActionPersona.TeamLead]: 'Team lead',
+  [GivebackActionPersona.DailyPlusSubscriber]: 'Daily Plus subscriber',
+};
+
+export const actionValidationLabels: Record<
+  GivebackActionValidationType,
+  string
+> = {
+  [GivebackActionValidationType.Automatic]: 'Automatic validation',
+  [GivebackActionValidationType.Manual]: 'Manual review',
+  [GivebackActionValidationType.Hybrid]: 'Hybrid validation',
+  [GivebackActionValidationType.None]: 'No validation',
+};
+
+export const getUserActionStatusLabel = (
+  status: GivebackUserActionStatus,
+): string => {
+  switch (status) {
+    case GivebackUserActionStatus.NotStarted:
+      return 'Available';
+    case GivebackUserActionStatus.Started:
+      return 'Started';
+    case GivebackUserActionStatus.Submitted:
+      return 'Submitted';
+    case GivebackUserActionStatus.PendingReview:
+      return 'Pending review';
+    case GivebackUserActionStatus.AutoValidating:
+      return 'Auto-validating';
+    case GivebackUserActionStatus.Approved:
+      return 'Approved';
+    case GivebackUserActionStatus.Rejected:
+      return 'Rejected';
+    case GivebackUserActionStatus.Expired:
+      return 'Expired';
+    case GivebackUserActionStatus.NeedsMoreInfo:
+      return 'Needs more info';
+    case GivebackUserActionStatus.CountedTowardGoal:
+      return 'Counted toward goal';
+    default:
+      return 'Available';
+  }
+};
+
+export const getUserActionStatusClassName = (
+  status: GivebackUserActionStatus,
+): string => {
+  switch (status) {
+    case GivebackUserActionStatus.Approved:
+    case GivebackUserActionStatus.CountedTowardGoal:
+      return 'text-status-success';
+    case GivebackUserActionStatus.PendingReview:
+    case GivebackUserActionStatus.Submitted:
+    case GivebackUserActionStatus.AutoValidating:
+      return 'text-status-help';
+    case GivebackUserActionStatus.Rejected:
+      return 'text-status-error';
+    case GivebackUserActionStatus.Expired:
+    case GivebackUserActionStatus.NeedsMoreInfo:
+      return 'text-text-tertiary';
+    default:
+      return 'text-text-secondary';
+  }
+};
diff --git a/packages/shared/src/features/giveback/types.ts b/packages/shared/src/features/giveback/types.ts
new file mode 100644
index 00000000000..214c47e3ae1
--- /dev/null
+++ b/packages/shared/src/features/giveback/types.ts
@@ -0,0 +1,368 @@
+// Type model for the Giveback initiative. Shapes are intentionally aligned with
+// the intended backend GraphQL contract so the Phase 1 mock layer can be swapped
+// for live queries with minimal churn. See the master plan for details.
+
+export enum GivebackCampaignStatus {
+  Draft = 'draft',
+  Scheduled = 'scheduled',
+  Active = 'active',
+  Paused = 'paused',
+  Ended = 'ended',
+}
+
+export enum GivebackActionValidationType {
+  Automatic = 'automatic',
+  Manual = 'manual',
+  Hybrid = 'hybrid',
+  None = 'none',
+}
+
+export enum GivebackUserActionStatus {
+  NotStarted = 'not_started',
+  Started = 'started',
+  Submitted = 'submitted',
+  PendingReview = 'pending_review',
+  AutoValidating = 'auto_validating',
+  Approved = 'approved',
+  Rejected = 'rejected',
+  Expired = 'expired',
+  NeedsMoreInfo = 'needs_more_info',
+  CountedTowardGoal = 'counted_toward_goal',
+}
+
+export enum GivebackRewardStatus {
+  Locked = 'locked',
+  Unlocked = 'unlocked',
+  Revealed = 'revealed',
+  Claimed = 'claimed',
+  Expired = 'expired',
+}
+
+export enum GivebackRewardType {
+  DailyPlus = 'daily_plus',
+  Cores = 'cores',
+  SwagCoupon = 'swag_coupon',
+  Badge = 'badge',
+  Other = 'other',
+}
+
+export enum GivebackCauseStatus {
+  Active = 'active',
+  Inactive = 'inactive',
+  PendingReview = 'pending_review',
+  Approved = 'approved',
+  Rejected = 'rejected',
+  Archived = 'archived',
+}
+
+export enum GivebackActionCategory {
+  SocialMedia = 'social_media',
+  CreatorContent = 'creator_content',
+  Referrals = 'referrals',
+  ProductFeedback = 'product_feedback',
+  CommunityPosts = 'community_posts',
+  CommunityLove = 'community_love',
+}
+
+export enum GivebackActionPersona {
+  Creator = 'creator',
+  Student = 'student',
+  SeniorDeveloper = 'senior_developer',
+  PowerUser = 'power_user',
+  CommunityMember = 'community_member',
+  OpenSourceContributor = 'open_source_contributor',
+  TeamLead = 'team_lead',
+  DailyPlusSubscriber = 'daily_plus_subscriber',
+}
+
+// Real-world platform an action lives on, used to surface the platform's brand
+// logo so the catalog reads as a growth/social initiative (post on X, video on
+// YouTube, etc.).
+export enum GivebackActionPlatform {
+  X = 'x',
+  YouTube = 'youtube',
+  Hashnode = 'hashnode',
+  GitHub = 'github',
+  Reddit = 'reddit',
+  LinkedIn = 'linkedin',
+  AppStore = 'app_store',
+  ChromeWebStore = 'chrome_web_store',
+  DailyDev = 'daily_dev',
+  // Extended surfaces from the community-led growth action library.
+  EdgeAddons = 'edge_addons',
+  FirefoxAddons = 'firefox_addons',
+  GooglePlay = 'google_play',
+  Trustpilot = 'trustpilot',
+  G2 = 'g2',
+  Capterra = 'capterra',
+  ProductHunt = 'product_hunt',
+  Directory = 'directory',
+  Medium = 'medium',
+  Dev = 'dev',
+  Blog = 'blog',
+  Newsletter = 'newsletter',
+  Notion = 'notion',
+  Website = 'website',
+  HackerNews = 'hacker_news',
+  StackOverflow = 'stack_overflow',
+  Discord = 'discord',
+  Slack = 'slack',
+  Telegram = 'telegram',
+  IndieHackers = 'indie_hackers',
+  Forum = 'forum',
+  Twitch = 'twitch',
+  Podcast = 'podcast',
+  Event = 'event',
+  Wiki = 'wiki',
+}
+
+export type GivebackActionCategoryFilter = GivebackActionCategory | 'all';
+export type GivebackActionPersonaFilter = GivebackActionPersona | 'all';
+
+// Crowdfunding-style milestone: a community amount that, once reached, unlocks a
+// concrete outcome. Modeled as ascending thresholds so the UI can show a
+// LOCKED/UNLOCKED tracker and the distance to the next unlock.
+export interface GivebackStretchGoal {
+  id: string;
+  amount: number;
+  title: string;
+  description: string;
+}
+
+// Companies and people can top up the campaign budget directly. Sponsorships go
+// straight into the pot, so a sponsor's amount counts toward the same goal the
+// community is unlocking through actions.
+export enum GivebackSponsorType {
+  Company = 'company',
+  Individual = 'individual',
+}
+
+// Tier is derived from the sponsored amount (see getSponsorTier) so the data
+// stays lean and a pledge never disagrees with its badge.
+export enum GivebackSponsorTier {
+  Platinum = 'platinum',
+  Gold = 'gold',
+  Silver = 'silver',
+  Backer = 'backer',
+}
+
+export interface GivebackSponsor {
+  id: string;
+  name: string;
+  type: GivebackSponsorType;
+  amount: number;
+  currency: string;
+  url?: string;
+  /** Square brand logo shown on the sponsor wall; falls back to initials. */
+  logoUrl?: string;
+  message?: string;
+  /** Sponsors who funded the pot before launch lead the wall. */
+  isFounding?: boolean;
+  createdAt: string;
+}
+
+export interface GivebackSponsorInput {
+  name: string;
+  type: GivebackSponsorType;
+  amount: number;
+  message?: string;
+}
+
+export interface GivebackCampaign {
+  id: string;
+  name: string;
+  slug: string;
+  status: GivebackCampaignStatus;
+  goalAmount: number;
+  currency: string;
+  /** Donation amount that has been validated and is included in donation reporting. */
+  approvedAmount: number;
+  /** Donation amount awaiting validation. Shown honestly as pending, never as counted. */
+  pendingAmount: number;
+  /** Portion of the raised pot contributed by sponsors (companies + people). */
+  sponsoredAmount: number;
+  /** Number of developers who have contributed at least one action (social proof). */
+  backersCount: number;
+  /** Developers who contributed in the last 24h (momentum signal). */
+  backersLast24h: number;
+  /** Ordered community unlocks for the stretch-goal tracker. */
+  stretchGoals: GivebackStretchGoal[];
+  /** Companies and people topping up the budget. */
+  sponsors: GivebackSponsor[];
+  heroCopy?: string;
+  startAt?: string;
+}
+
+export interface GivebackReward {
+  id: string;
+  type: GivebackRewardType;
+  title: string;
+  /** Teaser shown while the reward is still a mystery. */
+  secretTitle: string;
+  description?: string;
+  status: GivebackRewardStatus;
+  isSecret: boolean;
+  expiresAt?: string;
+}
+
+export interface GivebackLevel {
+  id: string;
+  levelNumber: number;
+  name: string;
+  /** Approved contribution required to reach this level. */
+  requiredApprovedAmount: number;
+  requiredActionCount?: number;
+  reward?: GivebackReward;
+}
+
+export interface GivebackUserProfile {
+  currentLevel: number;
+  approvedContributionAmount: number;
+  pendingContributionAmount: number;
+  actionsCompletedCount: number;
+  selectedCauseIds: string[];
+}
+
+// Shells for later phases (catalog, causes). Defined now so the type model and
+// compliance guarantees exist from the start, even though the UI ships later.
+
+export interface GivebackAction {
+  id: string;
+  title: string;
+  description?: string;
+  category: GivebackActionCategory;
+  platform: GivebackActionPlatform;
+  personaTags: GivebackActionPersona[];
+  donationAmount: number;
+  currency: string;
+  validationType: GivebackActionValidationType;
+  requiresLink: boolean;
+  requiresImage: boolean;
+  requiresNote: boolean;
+  /** Whether this action can grant a reward. Always false for Love actions. */
+  isRewarded: boolean;
+  /** Whether this action can unlock donation value. Always false for Love actions. */
+  donationEligible: boolean;
+  /** Review/rating style actions that a third-party platform forbids incentivizing. */
+  isComplianceSensitive: boolean;
+  /** Voluntary "for love" action with zero donation/reward by design. */
+  isLoveAction: boolean;
+  externalUrl?: string;
+  instructions?: string;
+  /** Total developers who have completed this action (community proof). */
+  contributorsCount?: number;
+  /** Developers who completed it in the last 24h (real-time momentum). */
+  contributorsLast24h?: number;
+  /** A few contributor avatar URLs, shown as overlapping faces on the card. */
+  contributorAvatars?: string[];
+  /** Popular action; surfaced first under the "Recommended" sort with a badge. */
+  isTrending?: boolean;
+}
+
+// Developer leading the community contribution board, spotlighted on the
+// "Take action" tab to put community engagement front and center.
+export interface GivebackTopContributor {
+  id: string;
+  name: string;
+  handle: string;
+  avatar: string;
+  /** Total donation value this person has unlocked through actions. */
+  contributionAmount: number;
+  currency: string;
+  actionsCount: number;
+}
+
+// A single row on the gamified contribution leaderboard. Carries the playful
+// signals (streak, rank movement, title, medal) that turn contributing into a
+// game and nudge people to keep climbing together.
+export interface GivebackLeaderboardEntry {
+  id: string;
+  rank: number;
+  name: string;
+  handle: string;
+  avatar: string;
+  contributionAmount: number;
+  currency: string;
+  actionsCount: number;
+  /** Consecutive days the person has taken at least one action. */
+  streakDays: number;
+  /** Net rank change since yesterday; positive means they climbed. */
+  rankChange: number;
+  /** Playful earned title shown as a badge (e.g. "Streak master"). */
+  title?: string;
+  /** Marks the viewer's own row so it can be highlighted and nudged. */
+  isCurrentUser?: boolean;
+}
+
+// The collective "we're a team" signal: how much the community has unlocked
+// today against a shared daily target, so every individual action visibly
+// fills one shared bar.
+export interface GivebackCommunityRally {
+  unlockedToday: number;
+  targetToday: number;
+  currency: string;
+  contributorsToday: number;
+}
+
+export interface GivebackUserAction {
+  actionId: string;
+  status: GivebackUserActionStatus;
+  unlockedDonationAmount: number;
+  pendingDonationAmount: number;
+  approvedDonationAmount: number;
+  rejectedDonationAmount: number;
+  evidenceLink?: string;
+  evidenceImage?: string;
+  note?: string;
+  submittedAt?: string;
+  reviewedAt?: string;
+  rejectionReason?: string;
+  needsMoreInfoReason?: string;
+}
+
+export interface GivebackActionSubmissionInput {
+  actionId: string;
+  evidenceLink?: string;
+  evidenceImage?: string;
+  note?: string;
+}
+
+export interface GivebackDonationAccounting {
+  unlockedDonationAmount: number;
+  pendingDonationAmount: number;
+  approvedDonationAmount: number;
+  rejectedDonationAmount: number;
+}
+
+export interface GivebackCauseSuggestionInput {
+  name: string;
+  url: string;
+  note?: string;
+  category?: string;
+}
+
+export interface GivebackCommunityEvent {
+  id: string;
+  actorLabel: string;
+  actorName: string;
+  actorAvatar: string;
+  actionLabel: string;
+  amount?: number;
+  currency: string;
+  causeName?: string;
+  createdAt: string;
+  isAnonymous: boolean;
+}
+
+export interface GivebackCause {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  logoUrl?: string;
+  category?: string;
+  status: GivebackCauseStatus;
+  sortOrder: number;
+  /** Top picks surfaced first in the catalog; the rest live behind "Show more". */
+  recommended?: boolean;
+}
diff --git a/packages/shared/src/features/giveback/useGivebackMotion.ts b/packages/shared/src/features/giveback/useGivebackMotion.ts
new file mode 100644
index 00000000000..b1194c32122
--- /dev/null
+++ b/packages/shared/src/features/giveback/useGivebackMotion.ts
@@ -0,0 +1,142 @@
+import type { RefObject } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+export const usePrefersReducedMotion = (): boolean => {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) {
+      return undefined;
+    }
+    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setReduced(query.matches);
+    const onChange = (event: MediaQueryListEvent) => setReduced(event.matches);
+
+    if (typeof query.addEventListener === 'function') {
+      query.addEventListener('change', onChange);
+      return () => query.removeEventListener('change', onChange);
+    }
+    // Fallback for older MediaQueryList implementations (and some test envs).
+    if (typeof query.addListener === 'function') {
+      query.addListener(onChange);
+      return () => query.removeListener(onChange);
+    }
+    return undefined;
+  }, []);
+
+  return reduced;
+};
+
+interface UseInViewResult<T extends Element> {
+  ref: RefObject<T>;
+  inView: boolean;
+}
+
+// Reveals once and stays revealed. Falls back to visible when
+// IntersectionObserver is unavailable, and a safety timeout guarantees content
+// is never left hidden in environments where observer callbacks are throttled.
+export const useInView = <T extends Element>(
+  fallbackMs = 1400,
+): UseInViewResult<T> => {
+  const ref = useRef<T>(null);
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return undefined;
+    }
+
+    if (
+      typeof IntersectionObserver === 'undefined' ||
+      typeof window === 'undefined'
+    ) {
+      setInView(true);
+      return undefined;
+    }
+
+    const reveal = () => setInView(true);
+
+    const rect = element.getBoundingClientRect();
+    if (rect.top < window.innerHeight && rect.bottom > 0) {
+      reveal();
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          reveal();
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '0px 0px -10% 0px', threshold: 0.15 },
+    );
+    observer.observe(element);
+
+    const fallback = window.setTimeout(reveal, fallbackMs);
+
+    return () => {
+      observer.disconnect();
+      window.clearTimeout(fallback);
+    };
+  }, [fallbackMs]);
+
+  return { ref, inView };
+};
+
+// Counts to `target` once `active` is true, animating from the value it's
+// currently showing. The first reveal fills from 0; later target changes roll
+// from the previous number to the new one (so the meter visibly ticks up when an
+// action lands). Reduced motion or no rAF resolves immediately to the target.
+export const useCountUp = (
+  target: number,
+  active: boolean,
+  durationMs = 1100,
+): number => {
+  const reducedMotion = usePrefersReducedMotion();
+  const [value, setValue] = useState(0);
+  const valueRef = useRef(0);
+  const frameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!active) {
+      return undefined;
+    }
+    if (
+      reducedMotion ||
+      typeof window === 'undefined' ||
+      typeof window.requestAnimationFrame !== 'function'
+    ) {
+      valueRef.current = target;
+      setValue(target);
+      return undefined;
+    }
+
+    const from = valueRef.current;
+    const delta = target - from;
+    if (delta === 0) {
+      return undefined;
+    }
+
+    const start = performance.now();
+    const step = (now: number) => {
+      const progress = Math.min(1, (now - start) / durationMs);
+      const eased = 1 - (1 - progress) ** 3;
+      const next = Math.round(from + delta * eased);
+      valueRef.current = next;
+      setValue(next);
+      if (progress < 1) {
+        frameRef.current = window.requestAnimationFrame(step);
+      }
+    };
+    frameRef.current = window.requestAnimationFrame(step);
+
+    return () => {
+      if (frameRef.current) {
+        window.cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, [active, target, durationMs, reducedMotion]);
+
+  return value;
+};
diff --git a/packages/shared/src/features/giveback/utils.ts b/packages/shared/src/features/giveback/utils.ts
new file mode 100644
index 00000000000..7c1e1c34e93
--- /dev/null
+++ b/packages/shared/src/features/giveback/utils.ts
@@ -0,0 +1,56 @@
+import { GivebackSponsorTier } from './types';
+
+export const formatDonationAmount = (
+  amount: number,
+  currency = 'USD',
+): string =>
+  new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency,
+    maximumFractionDigits: 0,
+  }).format(amount);
+
+export const getGoalProgressPercentage = (
+  approvedAmount: number,
+  goalAmount: number,
+): number => {
+  if (!goalAmount) {
+    return 0;
+  }
+
+  return Math.max(0, Math.min(100, (approvedAmount / goalAmount) * 100));
+};
+
+export const formatCompactNumber = (value: number): string =>
+  new Intl.NumberFormat('en-US', { notation: 'compact' }).format(value);
+
+// Up to two uppercase initials for a sponsor avatar fallback.
+export const getSponsorInitials = (name: string): string =>
+  name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0]?.toUpperCase() ?? '')
+    .join('');
+
+export const sponsorTierLabel: Record<GivebackSponsorTier, string> = {
+  [GivebackSponsorTier.Platinum]: 'Platinum',
+  [GivebackSponsorTier.Gold]: 'Gold',
+  [GivebackSponsorTier.Silver]: 'Silver',
+  [GivebackSponsorTier.Backer]: 'Backer',
+};
+
+// Sponsor tier is purely a function of how much was contributed, so the badge
+// can never drift from the amount.
+export const getSponsorTier = (amount: number): GivebackSponsorTier => {
+  if (amount >= 2500) {
+    return GivebackSponsorTier.Platinum;
+  }
+  if (amount >= 1000) {
+    return GivebackSponsorTier.Gold;
+  }
+  if (amount >= 250) {
+    return GivebackSponsorTier.Silver;
+  }
+  return GivebackSponsorTier.Backer;
+};
diff --git a/packages/shared/src/hooks/log/useLogQueue.ts b/packages/shared/src/hooks/log/useLogQueue.ts
index f8761de1077..795e1117d37 100644
--- a/packages/shared/src/hooks/log/useLogQueue.ts
+++ b/packages/shared/src/hooks/log/useLogQueue.ts
@@ -54,7 +54,12 @@ export default function useLogQueue({
     if (enabledRef.current && queueRef.current.length) {
       const queue = queueRef.current;
       queueRef.current = [];
-      sendEvents(queue);
+      // Analytics is fire-and-forget: a failed or blocked log request (e.g. the
+      // endpoint is unreachable in local dev, or an ad blocker drops it) must
+      // never bubble up as an unhandled promise rejection — that surfaces the
+      // Next.js dev error overlay on every interaction. The mutation already
+      // retries; swallow the final failure.
+      sendEvents(queue).catch(() => undefined);
     }
   }, 500);
 
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index e34256aeedd..f495b3188ec 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -179,6 +179,8 @@ export const featureReaderModal = new Feature('reader_modal_v2', false);
 
 export const featureShortcutsHub = new Feature('shortcuts_hub', false);
 
+export const featureGiveback = new Feature('giveback', true);
+
 export const featureNewTabCustomizer = new Feature(
   'extension_newtab_customizer',
   false,
diff --git a/packages/shared/tailwind.config.ts b/packages/shared/tailwind.config.ts
index 73d83ce3ae6..60506f4d7b9 100644
--- a/packages/shared/tailwind.config.ts
+++ b/packages/shared/tailwind.config.ts
@@ -297,6 +297,33 @@ export default {
           '60%': { transform: 'translateX(3px) rotate(2deg)' },
           '75%': { transform: 'translateX(-2px) rotate(-1deg)' },
         },
+        'meter-shine': {
+          '0%': { transform: 'translateX(-120%)' },
+          '60%, 100%': { transform: 'translateX(320%)' },
+        },
+        'coin-stream': {
+          '0%': { left: '-4%', opacity: '0' },
+          '12%': { opacity: '1' },
+          '88%': { opacity: '1' },
+          '100%': { left: '104%', opacity: '0' },
+        },
+        'glow-pulse': {
+          '0%, 100%': { opacity: '0.35', transform: 'scale(1)' },
+          '50%': { opacity: '0.7', transform: 'scale(1.08)' },
+        },
+        'reward-pop': {
+          '0%': { transform: 'scale(0.6)', opacity: '0' },
+          '55%': { transform: 'scale(1.18)', opacity: '1' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
+        'gradient-pan': {
+          '0%, 100%': { backgroundPosition: '0% 50%' },
+          '50%': { backgroundPosition: '100% 50%' },
+        },
+        'mascot-bob': {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-6px)' },
+        },
       },
       animation: {
         'scale-down-pulse':
@@ -313,6 +340,12 @@ export default {
         'queue-attention-wave':
           'queue-attention-wave 1.6s ease-in-out infinite',
         'nudge-shake': 'nudge-shake 600ms ease-in-out',
+        'meter-shine': 'meter-shine 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite',
+        'coin-stream': 'coin-stream 2.6s linear infinite',
+        'glow-pulse': 'glow-pulse 3s ease-in-out infinite',
+        'reward-pop': 'reward-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both',
+        'gradient-pan': 'gradient-pan 6s ease-in-out infinite',
+        'mascot-bob': 'mascot-bob 4s ease-in-out infinite',
       },
     },
     lineClamp: {
diff --git a/packages/storybook/public/assets/giveback-genie.png b/packages/storybook/public/assets/giveback-genie.png
new file mode 100644
index 00000000000..bd54d1f10fd
Binary files /dev/null and b/packages/storybook/public/assets/giveback-genie.png differ
diff --git a/packages/storybook/stories/features/giveback/GivebackPage.stories.tsx b/packages/storybook/stories/features/giveback/GivebackPage.stories.tsx
new file mode 100644
index 00000000000..2b1524a0e92
--- /dev/null
+++ b/packages/storybook/stories/features/giveback/GivebackPage.stories.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { GivebackPage } from '@dailydotdev/shared/src/features/giveback/components/GivebackPage';
+
+const meta: Meta<typeof GivebackPage> = {
+  title: 'Features/Giveback/GivebackPage',
+  component: GivebackPage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  globals: {
+    theme: 'dark',
+  },
+  decorators: [
+    (Story) => (
+      <div className="dark min-h-screen bg-background-default text-text-primary">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof GivebackPage>;
+
+export const Default: Story = {};
diff --git a/packages/webapp/pages/giveback/index.tsx b/packages/webapp/pages/giveback/index.tsx
new file mode 100644
index 00000000000..0b46171a0af
--- /dev/null
+++ b/packages/webapp/pages/giveback/index.tsx
@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import type { NextSeoProps } from 'next-seo';
+import { useConditionalFeature } from '@dailydotdev/shared/src/hooks';
+import { featureGiveback } from '@dailydotdev/shared/src/lib/featureManagement';
+import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { GivebackPage } from '@dailydotdev/shared/src/features/giveback/components/GivebackPage';
+import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
+import { getLayout } from '../../components/layouts/MainLayout';
+import { defaultOpenGraph, defaultSeo } from '../../next-seo';
+import { getPageSeoTitles } from '../../components/layouts/utils';
+
+const seoTitles = getPageSeoTitles('Giveback');
+const seo: NextSeoProps = {
+  title: seoTitles.title,
+  openGraph: {
+    ...defaultOpenGraph,
+    ...seoTitles.openGraph,
+  },
+  ...defaultSeo,
+  description:
+    'Help daily.dev grow and we will fund good causes. Complete community actions to help unlock donations toward a shared goal.',
+  nofollow: true,
+  noindex: true,
+};
+
+const GivebackRoute = (): ReactElement | null => {
+  const router = useRouter();
+  const { isAuthReady } = useAuthContext();
+  const { value: isEnabled, isLoading } = useConditionalFeature({
+    feature: featureGiveback,
+    shouldEvaluate: isAuthReady,
+  });
+
+  useEffect(() => {
+    if (!isLoading && !isEnabled) {
+      router.replace(webappUrl);
+    }
+  }, [isLoading, isEnabled, router]);
+
+  if (!isEnabled) {
+    return null;
+  }
+
+  return <GivebackPage />;
+};
+
+const getGivebackLayout: typeof getLayout = (...props) =>
+  getFooterNavBarLayout(getLayout(...props));
+
+GivebackRoute.getLayout = getGivebackLayout;
+GivebackRoute.layoutProps = { screenCentered: false, seo };
+
+export default GivebackRoute;