diff --git a/packages/shared/src/features/giveback/GivebackContext.tsx b/packages/shared/src/features/giveback/GivebackContext.tsx
new file mode 100644
index 00000000000..4e1d4d0ae82
--- /dev/null
+++ b/packages/shared/src/features/giveback/GivebackContext.tsx
@@ -0,0 +1,418 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import type {
+  GivebackAction,
+  GivebackActionCategoryFilter,
+  GivebackActionSubmissionInput,
+  GivebackCampaign,
+  GivebackCause,
+  GivebackCauseSuggestionInput,
+  GivebackCommunityEvent,
+  GivebackDonationAccounting,
+  GivebackLevel,
+  GivebackSponsor,
+  GivebackSponsorInput,
+  GivebackUserAction,
+  GivebackUserProfile,
+} from './types';
+import {
+  GivebackActionValidationType,
+  GivebackCauseStatus,
+  GivebackUserActionStatus,
+} from './types';
+import {
+  createMockCampaign,
+  createMockUserProfile,
+  givebackActions,
+  givebackCauses,
+  givebackCommunityEvents,
+  givebackLevels,
+  givebackSponsors,
+  givebackUserActions,
+} from './mock';
+
+export interface GivebackContextValue {
+  campaign: GivebackCampaign;
+  levels: GivebackLevel[];
+  userProfile: GivebackUserProfile;
+  actions: GivebackAction[];
+  filteredActions: GivebackAction[];
+  loveActions: GivebackAction[];
+  userActions: GivebackUserAction[];
+  causes: GivebackCause[];
+  suggestedCauses: GivebackCause[];
+  communityEvents: GivebackCommunityEvent[];
+  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;
+  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 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;
+
+    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 top the pot up on top of the baseline raised amount.
+    const approvedAmount =
+      baseApprovedAmount + (sponsoredAmount - SEED_SPONSORED_AMOUNT);
+    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,
+    };
+
+    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 : [],
+      donationAccounting,
+      submitAction,
+      toggleCause,
+      suggestCause,
+      sponsorCampaign,
+      setUserActionStatus,
+      showCommunityFeed,
+      setShowCommunityFeed,
+      geoAvailability,
+      setGeoAvailability,
+      celebrationState,
+      setCelebrationState,
+      selectedCategory,
+      setSelectedCategory,
+      goalPercentage,
+      setGoalPercentage,
+      userLevel,
+      setUserLevel,
+    };
+  }, [
+    goalPercentage,
+    celebrationState,
+    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..be9ee8cb2df
--- /dev/null
+++ b/packages/shared/src/features/giveback/GivebackNavContext.tsx
@@ -0,0 +1,51 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { createContext, useContext } from 'react';
+
+export type GivebackTabId =
+  | 'causes'
+  | 'impact'
+  | 'why'
+  | 'sponsors'
+  | 'actions'
+  | 'updates'
+  | 'comments'
+  | 'faq';
+
+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..c5edc62b887
--- /dev/null
+++ b/packages/shared/src/features/giveback/actionPlatform.ts
@@ -0,0 +1,40 @@
+import type { ComponentType } from 'react';
+import {
+  AppleIcon,
+  ChromeIcon,
+  DailyIcon,
+  GitHubIcon,
+  HashnodeIcon,
+  LinkedInIcon,
+  RedditIcon,
+  TwitterIcon,
+  YoutubeIcon,
+} from '../../components/icons';
+import type { IconProps } from '../../components/Icon';
+import { GivebackActionPlatform } from './types';
+
+interface ActionPlatformVisual {
+  Icon: ComponentType<IconProps>;
+  name: string;
+}
+
+// Real platform logos so each action reads as a growth move on a known surface
+// (post on X, video on YouTube, ship on GitHub...). Rendered with the colored
+// `secondary` variant on a light tile, app-store style.
+export const actionPlatformVisual: Record<
+  GivebackActionPlatform,
+  ActionPlatformVisual
+> = {
+  [GivebackActionPlatform.X]: { Icon: TwitterIcon, name: 'X' },
+  [GivebackActionPlatform.YouTube]: { Icon: YoutubeIcon, name: 'YouTube' },
+  [GivebackActionPlatform.Hashnode]: { Icon: HashnodeIcon, name: 'Hashnode' },
+  [GivebackActionPlatform.GitHub]: { Icon: GitHubIcon, name: 'GitHub' },
+  [GivebackActionPlatform.Reddit]: { Icon: RedditIcon, name: 'Reddit' },
+  [GivebackActionPlatform.LinkedIn]: { Icon: LinkedInIcon, name: 'LinkedIn' },
+  [GivebackActionPlatform.AppStore]: { Icon: AppleIcon, name: 'App Store' },
+  [GivebackActionPlatform.ChromeWebStore]: {
+    Icon: ChromeIcon,
+    name: 'Chrome Web Store',
+  },
+  [GivebackActionPlatform.DailyDev]: { Icon: DailyIcon, name: 'daily.dev' },
+};
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..664ffa3a1ec
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/ActionCard.tsx
@@ -0,0 +1,162 @@
+import type { ReactElement, ReactNode } 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 { IconSize } from '../../../components/Icon';
+import type { GivebackAction, GivebackUserAction } from '../types';
+import { GivebackUserActionStatus } from '../types';
+import { formatDonationAmount } from '../utils';
+import {
+  getUserActionStatusClassName,
+  getUserActionStatusLabel,
+} from '../statusLabels';
+import { actionPlatformVisual } from '../actionPlatform';
+
+interface ActionCardProps {
+  action: GivebackAction;
+  userAction?: GivebackUserAction;
+  onSubmit?: (action: GivebackAction) => void;
+}
+
+const getStatus = (userAction?: GivebackUserAction): GivebackUserActionStatus =>
+  userAction?.status ?? GivebackUserActionStatus.NotStarted;
+
+export const ActionCard = ({
+  action,
+  userAction,
+  onSubmit,
+}: ActionCardProps): ReactElement => {
+  const status = getStatus(userAction);
+  const isUnavailable =
+    status === GivebackUserActionStatus.Expired ||
+    status === GivebackUserActionStatus.Rejected;
+  const canSubmit =
+    !action.isLoveAction &&
+    action.donationEligible &&
+    [
+      GivebackUserActionStatus.NotStarted,
+      GivebackUserActionStatus.Started,
+      GivebackUserActionStatus.NeedsMoreInfo,
+    ].includes(status);
+  const isInteractive = canSubmit && !!onSubmit;
+  const showStatus = status !== GivebackUserActionStatus.NotStarted;
+  const { Icon, name: platformName } = actionPlatformVisual[action.platform];
+
+  const content: ReactNode = (
+    <>
+      <FlexRow className="items-start justify-between gap-3">
+        <FlexRow className="min-w-0 items-center gap-2.5">
+          <span className="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-14 bg-white transition-transform duration-200 group-hover:scale-105">
+            <Icon secondary size={IconSize.Large} />
+          </span>
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+            bold
+            className="truncate uppercase tracking-wider"
+          >
+            {platformName}
+          </Typography>
+        </FlexRow>
+        {action.isLoveAction ? (
+          <Typography
+            bold
+            type={TypographyType.Caption1}
+            className="shrink-0 text-accent-cabbage-default"
+          >
+            Just for love
+          </Typography>
+        ) : (
+          <Typography
+            bold
+            type={TypographyType.Title4}
+            className="shrink-0 tabular-nums text-status-success"
+          >
+            +{formatDonationAmount(action.donationAmount, action.currency)}
+          </Typography>
+        )}
+      </FlexRow>
+
+      <FlexCol className="flex-1 gap-1">
+        <Typography bold tag={TypographyTag.H3} type={TypographyType.Callout}>
+          {action.title}
+        </Typography>
+        {action.description && (
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            className="line-clamp-2"
+          >
+            {action.description}
+          </Typography>
+        )}
+      </FlexCol>
+
+      <FlexRow className="items-center justify-between gap-2">
+        {action.isLoveAction ? (
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            We can&apos;t pay for this — but we&apos;d genuinely appreciate it.
+          </Typography>
+        ) : (
+          showStatus && (
+            <Typography
+              bold
+              type={TypographyType.Caption1}
+              className={getUserActionStatusClassName(status)}
+            >
+              {getUserActionStatusLabel(status)}
+            </Typography>
+          )
+        )}
+        {isInteractive && (
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+            bold
+            className="ml-auto inline-flex items-center gap-0.5 transition-colors group-hover:text-text-primary"
+          >
+            Submit proof
+            <span className="inline-block transition-transform duration-200 group-hover:translate-x-0.5">
+              ›
+            </span>
+          </Typography>
+        )}
+      </FlexRow>
+    </>
+  );
+
+  if (isInteractive) {
+    return (
+      <button
+        type="button"
+        aria-label={`Submit proof for ${action.title}`}
+        onClick={() => onSubmit?.(action)}
+        className="group flex h-full w-full flex-col gap-3 rounded-16 bg-surface-float p-4 text-left transition-all duration-200 hover:-translate-y-0.5 hover:bg-surface-hover hover:shadow-2 active:translate-y-0 active:scale-[0.99] motion-reduce:transform-none"
+      >
+        {content}
+      </button>
+    );
+  }
+
+  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',
+        isUnavailable && 'opacity-70',
+      )}
+    >
+      {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..ea172dd3f9c
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/ActionCatalog.tsx
@@ -0,0 +1,255 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { useGivebackContext } from '../GivebackContext';
+import type { GivebackAction, GivebackActionCategoryFilter } from '../types';
+import { GivebackActionCategory } from '../types';
+import { actionCategoryLabels } from '../statusLabels';
+import { ActionCard } from './ActionCard';
+import { GivebackSubmissionModal } from './GivebackSubmissionModal';
+import { GivebackSection } from './GivebackSection';
+import { formatDonationAmount } from '../utils';
+
+interface FilterChipProps {
+  isSelected: boolean;
+  label: string;
+  onClick: () => void;
+}
+
+const FilterChip = ({
+  isSelected,
+  label,
+  onClick,
+}: FilterChipProps): 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-surface-float text-text-tertiary hover:bg-surface-hover hover:text-text-primary',
+    )}
+    onClick={onClick}
+  >
+    {label}
+  </button>
+);
+
+type SortKey = 'recommended' | 'value-desc' | 'value-asc' | 'newest';
+
+const sortOptions: [SortKey, string][] = [
+  ['recommended', 'Recommended'],
+  ['value-desc', 'Highest value'],
+  ['value-asc', 'Lowest value'],
+  ['newest', 'Newest'],
+];
+
+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();
+  }
+  return actions;
+};
+
+export const ActionCatalog = (): ReactElement => {
+  const {
+    actions,
+    donationAccounting,
+    filteredActions,
+    loveActions,
+    userActions,
+    selectedCategory,
+    setSelectedCategory,
+  } = useGivebackContext();
+  const [submissionAction, setSubmissionAction] =
+    useState<GivebackAction | null>(null);
+  const [sort, setSort] = useState<SortKey>('recommended');
+
+  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 rather than alongside the paid missions.
+  const isLoveCategory =
+    selectedCategory === GivebackActionCategory.CommunityLove;
+  const donationToRender = isLoveCategory ? [] : sortedActions;
+  const loveToRender =
+    selectedCategory === 'all' || isLoveCategory ? loveActions : [];
+  const hasResults = donationToRender.length > 0 || loveToRender.length > 0;
+
+  // 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;
+
+  return (
+    <GivebackSection id="giveback-actions">
+      <FlexCol className="gap-1">
+        <Typography
+          type={TypographyType.Caption1}
+          color={TypographyColor.Tertiary}
+          bold
+          className="uppercase tracking-wider"
+        >
+          Your contribution
+        </Typography>
+        <Typography
+          bold
+          type={TypographyType.Title1}
+          className="tabular-nums text-status-success"
+        >
+          {formatDonationAmount(earnedContribution, 'USD')}
+        </Typography>
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+          className="max-w-md"
+        >
+          Counts the moment you act — we trust you. If a submission is rejected,
+          we&apos;ll subtract it.
+        </Typography>
+      </FlexCol>
+
+      <FlexRow className="flex-wrap items-center justify-between gap-3">
+        <FlexRow className="flex-wrap gap-2">
+          <FilterChip
+            isSelected={selectedCategory === 'all'}
+            label="All"
+            onClick={() => setSelectedCategory('all')}
+          />
+          {categories.map((category) => (
+            <FilterChip
+              key={category}
+              isSelected={selectedCategory === category}
+              label={actionCategoryLabels[category]}
+              onClick={() =>
+                setSelectedCategory(category as GivebackActionCategoryFilter)
+              }
+            />
+          ))}
+        </FlexRow>
+
+        <FlexRow className="shrink-0 items-center gap-2">
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            Sort
+          </Typography>
+          <select
+            aria-label="Sort actions"
+            value={sort}
+            onChange={(event) => setSort(event.target.value as SortKey)}
+            className="h-8 rounded-10 bg-surface-float px-2 font-medium text-text-primary typo-footnote"
+          >
+            {sortOptions.map(([value, label]) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </FlexRow>
+      </FlexRow>
+
+      {hasResults ? (
+        <FlexCol className="gap-6">
+          {donationToRender.length > 0 && (
+            <div className="grid gap-3 tablet:grid-cols-2">
+              {donationToRender.map((action) => (
+                <ActionCard
+                  key={action.id}
+                  action={action}
+                  userAction={userActionById.get(action.id)}
+                  onSubmit={setSubmissionAction}
+                />
+              ))}
+            </div>
+          )}
+
+          {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">
+                {loveToRender.map((action) => (
+                  <ActionCard
+                    key={action.id}
+                    action={action}
+                    userAction={userActionById.get(action.id)}
+                  />
+                ))}
+              </div>
+            </FlexCol>
+          )}
+        </FlexCol>
+      ) : (
+        <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>
+      )}
+
+      {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..b5a41773f3e
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/BudgetRedirectStory.tsx
@@ -0,0 +1,32 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { useGivebackContext } from '../GivebackContext';
+import { formatDonationAmount } from '../utils';
+import { GivebackSection } from './GivebackSection';
+
+// "Why we do it" — kept short and emotional. The community contribution speaks
+// for itself; this is just the one-line reason behind it.
+export const BudgetRedirectStory = (): ReactElement => {
+  const { campaign } = useGivebackContext();
+
+  return (
+    <GivebackSection id="giveback-why">
+      <Typography
+        tag={TypographyTag.P}
+        type={TypographyType.Title3}
+        color={TypographyColor.Secondary}
+        className="max-w-2xl"
+      >
+        {formatDonationAmount(campaign.goalAmount, campaign.currency)} going to
+        the causes you pick — scholarships, open source, and access to tech. Not
+        a marketing campaign. A community deciding what its work is worth.
+      </Typography>
+    </GivebackSection>
+  );
+};
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..8c7679809af
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/CauseSelection.tsx
@@ -0,0 +1,193 @@
+import type { ReactElement } from 'react';
+import React, { 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,
+  PlusIcon,
+  SparkleIcon,
+  VIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { useGivebackContext } from '../GivebackContext';
+import { useGivebackNav } from '../GivebackNavContext';
+import { CauseSelectionModal } from './CauseSelectionModal';
+
+// Brand-tinted emblems so each cause card 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',
+];
+
+export const CauseSelection = (): ReactElement => {
+  const { causes, suggestedCauses, toggleCause, userProfile } =
+    useGivebackContext();
+  const { setActiveTab } = useGivebackNav();
+  const [isSuggestOpen, setIsSuggestOpen] = useState(false);
+
+  const selectedCount = causes.filter((cause) =>
+    userProfile.selectedCauseIds.includes(cause.id),
+  ).length;
+
+  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. Change them
+        anytime.
+      </Typography>
+
+      <FlexCol id="giveback-causes" className="scroll-mt-16 gap-6">
+        <div className="grid grid-cols-2 gap-3 tablet:grid-cols-3">
+          {causes.map((cause, index) => {
+            const isSelected = userProfile.selectedCauseIds.includes(cause.id);
+
+            return (
+              <button
+                key={cause.id}
+                type="button"
+                aria-pressed={isSelected}
+                onClick={() => toggleCause(cause.id)}
+                className={classNames(
+                  'group relative flex h-full flex-col gap-3 rounded-16 border 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',
+                  isSelected
+                    ? 'border-accent-cabbage-default bg-accent-cabbage-flat'
+                    : 'border-border-subtlest-tertiary hover:bg-surface-hover',
+                )}
+              >
+                <FlexRow className="items-start justify-between gap-2">
+                  <span
+                    className={classNames(
+                      'flex size-11 shrink-0 items-center justify-center rounded-16 transition-transform duration-200 group-hover:scale-105',
+                      emblemAccents[index % emblemAccents.length],
+                    )}
+                  >
+                    <SparkleIcon size={IconSize.Medium} />
+                  </span>
+                  <span
+                    className={classNames(
+                      'flex size-5 shrink-0 items-center justify-center rounded-full transition-colors',
+                      isSelected
+                        ? 'bg-accent-cabbage-default text-white'
+                        : 'border border-border-subtlest-secondary',
+                    )}
+                  >
+                    {isSelected && (
+                      <VIcon
+                        secondary
+                        size={IconSize.XXSmall}
+                        className="motion-safe:animate-reward-pop"
+                      />
+                    )}
+                  </span>
+                </FlexRow>
+
+                <FlexCol className="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>
+              </button>
+            );
+          })}
+        </div>
+
+        {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">
+          <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>
+
+        <Button
+          type="button"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Large}
+          icon={<ArrowIcon className="rotate-90" />}
+          iconPosition={ButtonIconPosition.Right}
+          disabled={selectedCount === 0}
+          onClick={() => setActiveTab('impact')}
+          className="w-full tablet:w-fit"
+        >
+          Continue
+        </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..e28934c2b97
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/CauseSelectionModal.tsx
@@ -0,0 +1,171 @@
+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 { 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 (
+    // 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>
+  );
+};
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..fa1f30c92bb
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/CommunityGoalProgress.tsx
@@ -0,0 +1,230 @@
+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';
+import { ProgressBar } from '../../../components/fields/ProgressBar';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import { useGivebackContext } from '../GivebackContext';
+import { useGivebackNav } from '../GivebackNavContext';
+import { useCountUp, useInView } from '../useGivebackMotion';
+import { formatDonationAmount, getGoalProgressPercentage } from '../utils';
+import { GivebackSection } from './GivebackSection';
+import { GivebackMeterShine } from './GivebackMeterShine';
+
+const milestones = [25, 50, 75, 100];
+
+export const CommunityGoalProgress = (): ReactElement => {
+  const { campaign } = useGivebackContext();
+  const { setActiveTab } = useGivebackNav();
+  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 stays exact.
+  const { ref: meterRef, inView } = useInView<HTMLDivElement>();
+  const animatedPercentage = useCountUp(Math.round(percentage), inView);
+  const remaining = Math.max(campaign.goalAmount - campaign.approvedAmount, 0);
+  const sponsorGoalShare = campaign.goalAmount
+    ? Math.round((campaign.sponsoredAmount / campaign.goalAmount) * 100)
+    : 0;
+
+  // The funding-stats triplet every backer scans: who's in, how much is still
+  // needed to hit the budget, and what's being validated right now.
+  const stats: [string, string][] = [
+    ['Backers', campaign.backersCount.toLocaleString('en-US')],
+    ['Still to raise', formatDonationAmount(remaining, campaign.currency)],
+    [
+      'In review',
+      formatDonationAmount(campaign.pendingAmount, campaign.currency),
+    ],
+  ];
+
+  return (
+    <GivebackSection
+      id="giveback-goal"
+      title="Funding progress"
+      headerActions={
+        <FlexCol className="text-right">
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            Goal
+          </Typography>
+          <Typography type={TypographyType.Title3} bold>
+            {formatDonationAmount(campaign.goalAmount, campaign.currency)}
+          </Typography>
+        </FlexCol>
+      }
+    >
+      <FlexCol className="gap-3">
+        <FlexRow className="items-end gap-2">
+          <Typography tag={TypographyTag.Span} type={TypographyType.Mega1} bold>
+            {formatDonationAmount(campaign.approvedAmount, 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>
+      </FlexCol>
+
+      <div className="grid grid-cols-3 divide-x divide-border-subtlest-tertiary">
+        {stats.map(([label, value], index) => (
+          <FlexCol
+            key={label}
+            className={classNames(
+              'gap-0.5',
+              index === 1 && 'px-4 tablet:px-6',
+              index === 2 && 'pl-4 tablet:pl-6',
+            )}
+          >
+            <Typography type={TypographyType.Title3} bold>
+              {value}
+            </Typography>
+            <Typography
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+            >
+              {label}
+            </Typography>
+          </FlexCol>
+        ))}
+      </div>
+
+      {campaign.sponsoredAmount > 0 && (
+        <FlexCol className="gap-2 border-t border-border-subtlest-tertiary pt-4">
+          <FlexRow className="items-center justify-between gap-3">
+            <FlexRow className="items-center gap-2">
+              <span className="size-2.5 shrink-0 rounded-full bg-accent-bacon-default" />
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Callout}
+                bold
+              >
+                Sponsors topping up the pot
+              </Typography>
+            </FlexRow>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Title3}
+              bold
+              className="tabular-nums text-accent-bacon-default"
+            >
+              {formatDonationAmount(
+                campaign.sponsoredAmount,
+                campaign.currency,
+              )}
+            </Typography>
+          </FlexRow>
+
+          <ProgressBar
+            percentage={sponsorGoalShare}
+            shouldShowBg
+            className={{
+              wrapper: 'h-2.5 rounded-8',
+              bar: 'h-full rounded-8 transition-[width] duration-700 ease-out',
+              barColor: 'bg-accent-bacon-default',
+            }}
+          />
+
+          <FlexRow className="flex-wrap items-center justify-between 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={() => setActiveTab('sponsors')}
+            >
+              Become a sponsor
+            </Button>
+          </FlexRow>
+        </FlexCol>
+      )}
+
+      <Typography
+        type={TypographyType.Caption1}
+        color={TypographyColor.Tertiary}
+      >
+        Funded by daily.dev, not you. Only approved actions count toward the
+        goal.
+      </Typography>
+    </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..9eefb67a606
--- /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 students',
+    label: 'introduced to computer science',
+    cause: 'Code.org',
+    accent: 'text-accent-cabbage-default',
+  },
+  {
+    value: '750 girls',
+    label: 'join their first coding club',
+    cause: 'Girls Who Code',
+    accent: 'text-accent-cheese-default',
+  },
+  {
+    value: '40,000 pages',
+    label: 'kept free and online for everyone',
+    cause: 'Internet Archive',
+    accent: 'text-accent-avocado-default',
+  },
+  {
+    value: '1,100 people',
+    label: 'with their digital rights defended',
+    cause: 'EFF',
+    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={`The outcomes the ${formatDonationAmount(
+        campaign.goalAmount,
+        campaign.currency,
+      )} goal can fund for the causes you pick — not abstract dollars, real people.`}
+    >
+      <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..85464524646
--- /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..0f2b2a8968b
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackBackground.tsx
@@ -0,0 +1,53 @@
+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"
+  >
+    <div className="absolute inset-0" 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..a4a28b74723
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackCampaignVideo.tsx
@@ -0,0 +1,58 @@
+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 { PlayIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+
+// Placeholder for the campaign video (CEO presenting the initiative), mirroring
+// the lead media slot on Kickstarter-style pages. Swap the inner block for the
+// real player/embed once the video is recorded — the 16:9 frame is ready.
+export const GivebackCampaignVideo = (): ReactElement => (
+  <FlexCol className="gap-2">
+    <div className="from-accent-cabbage-default/25 to-accent-onion-default/25 group relative aspect-video w-full overflow-hidden rounded-24 border border-border-subtlest-tertiary bg-gradient-to-br via-surface-float">
+      <div
+        aria-hidden
+        className="bg-accent-cheese-default/20 pointer-events-none absolute -bottom-16 -right-10 size-48 rounded-full blur-3xl"
+      />
+
+      <FlexRow className="bg-background-default/80 absolute left-3 top-3 items-center gap-1.5 rounded-8 px-2 py-1 backdrop-blur">
+        <span className="size-1.5 rounded-full bg-accent-cabbage-default motion-safe:animate-glow-pulse" />
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Caption2}
+          bold
+          className="uppercase tracking-wider"
+        >
+          Campaign video · coming soon
+        </Typography>
+      </FlexRow>
+
+      <FlexCol className="absolute inset-0 items-center justify-center gap-3 px-6 text-center">
+        <span className="bg-background-default/90 flex size-16 items-center justify-center rounded-full shadow-2 transition-transform motion-safe:group-hover:scale-110">
+          <PlayIcon
+            secondary
+            size={IconSize.XLarge}
+            className="ml-0.5 text-accent-cabbage-default"
+          />
+        </span>
+        <FlexCol className="gap-0.5">
+          <Typography bold type={TypographyType.Title3}>
+            Watch the campaign
+          </Typography>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            2 minutes with our CEO on why we&apos;re doing this
+          </Typography>
+        </FlexCol>
+      </FlexCol>
+    </div>
+  </FlexCol>
+);
diff --git a/packages/shared/src/features/giveback/components/GivebackClosingCta.tsx b/packages/shared/src/features/giveback/components/GivebackClosingCta.tsx
new file mode 100644
index 00000000000..9700b7a41f0
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackClosingCta.tsx
@@ -0,0 +1,119 @@
+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 { MoveToIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { useGivebackNav } from '../GivebackNavContext';
+import { GivebackTrustPerks } from './GivebackTrustPerks';
+import { GivebackReveal } from './GivebackReveal';
+
+export const GivebackClosingCta = (): ReactElement => {
+  const { setActiveTab } = useGivebackNav();
+
+  return (
+    <section className="relative w-full overflow-hidden border-t border-border-subtlest-tertiary pt-8">
+      {/* Layered, slowly breathing glows give the finale depth and life. */}
+      <div
+        aria-hidden
+        className="bg-accent-cabbage-default/20 pointer-events-none absolute left-1/2 top-0 size-[26rem] -translate-x-1/2 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+      />
+      <div
+        aria-hidden
+        className="bg-accent-avocado-default/10 pointer-events-none absolute -left-10 top-10 size-64 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+        style={{ animationDelay: '1.5s' }}
+      />
+      <div
+        aria-hidden
+        className="bg-accent-cheese-default/10 pointer-events-none absolute -right-10 top-10 size-64 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+        style={{ animationDelay: '0.75s' }}
+      />
+
+      <FlexCol className="relative items-center gap-5 py-8 text-center">
+        <GivebackReveal>
+          <FlexRow className="items-center gap-2">
+            <span className="relative flex size-2">
+              <span className="bg-accent-cabbage-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-cabbage-default" />
+            </span>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+              bold
+              className="uppercase tracking-wider"
+            >
+              Ready when you are
+            </Typography>
+          </FlexRow>
+        </GivebackReveal>
+
+        <GivebackReveal delay={80}>
+          <Typography
+            tag={TypographyTag.H2}
+            type={TypographyType.Mega2}
+            bold
+            className="max-w-3xl"
+          >
+            Turn small actions into{' '}
+            <span className="bg-gradient-to-r from-accent-avocado-default via-accent-cabbage-default to-accent-cheese-default bg-[length:200%_auto] bg-clip-text text-transparent motion-safe:animate-gradient-pan">
+              real donations.
+            </span>
+          </Typography>
+        </GivebackReveal>
+
+        <GivebackReveal delay={160}>
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Title3}
+            color={TypographyColor.Secondary}
+            className="max-w-2xl"
+          >
+            Pick the causes you care about, do the dev work you already do, and
+            the money lands where it matters. You never pay a cent.
+          </Typography>
+        </GivebackReveal>
+
+        <GivebackReveal delay={240}>
+          <FlexRow className="flex-wrap justify-center gap-3 pt-1">
+            <Button
+              type="button"
+              onClick={() => setActiveTab('actions')}
+              variant={ButtonVariant.Primary}
+              size={ButtonSize.Large}
+              icon={<MoveToIcon size={IconSize.Small} />}
+              iconPosition={ButtonIconPosition.Right}
+              className="shadow-2-cabbage transition-transform duration-200 hover:scale-[1.03] active:scale-100 motion-reduce:transform-none"
+            >
+              Take action
+            </Button>
+            <Button
+              type="button"
+              onClick={() => setActiveTab('why')}
+              variant={ButtonVariant.Float}
+              size={ButtonSize.Large}
+              className="transition-transform duration-200 hover:scale-[1.03] active:scale-100 motion-reduce:transform-none"
+            >
+              Why we do it
+            </Button>
+          </FlexRow>
+        </GivebackReveal>
+
+        <GivebackReveal delay={320}>
+          <GivebackTrustPerks className="justify-center pt-1" />
+        </GivebackReveal>
+      </FlexCol>
+    </section>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackComments.tsx b/packages/shared/src/features/giveback/components/GivebackComments.tsx
new file mode 100644
index 00000000000..4d32302ae38
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackComments.tsx
@@ -0,0 +1,626 @@
+import type { ReactElement } from 'react';
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import {
+  Button,
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+  BlockIcon,
+  DiscussIcon,
+  DownvoteIcon,
+  EyeCancelIcon,
+  FlagIcon,
+  MenuIcon,
+  ReputationIcon,
+  ShareIcon,
+  TrashIcon,
+  UpvoteIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { Separator } from '../../../components/cards/common/common';
+import { CardActionBar } from '../../../components/buttons/CardActionBar';
+import { CardAction } from '../../../components/buttons/CardAction';
+import { useOutsideClick } from '../../../hooks/utils/useOutsideClick';
+
+interface GivebackComment {
+  id: string;
+  author: string;
+  handle: string;
+  reputation: string;
+  time: string;
+  text: string;
+  avatarClass: string;
+  upvotes?: number;
+  replies?: GivebackComment[];
+}
+
+const seedComments: GivebackComment[] = [
+  {
+    id: 'comment-1',
+    author: 'Priya N.',
+    handle: '@priyan',
+    reputation: '2.5K',
+    time: '2h ago',
+    text: 'Love that this costs me nothing but still funds real causes. Backed open source and shared the launch post.',
+    avatarClass: 'bg-accent-cabbage-flat text-accent-cabbage-default',
+    upvotes: 14,
+    replies: [
+      {
+        id: 'comment-1-reply-1',
+        author: 'daily.dev team',
+        handle: '@dailydotdev',
+        reputation: '48K',
+        time: '1h ago',
+        text: 'Thank you for spreading the word, Priya — every share helps the pot grow.',
+        avatarClass: 'bg-accent-onion-flat text-accent-onion-default',
+        upvotes: 6,
+      },
+    ],
+  },
+  {
+    id: 'comment-2',
+    author: 'Marco D.',
+    handle: '@marcod',
+    reputation: '6.5K',
+    time: '5h ago',
+    text: 'Finally a rewards program where the company puts up the money. Picked Girls Who Code — keep it going!',
+    avatarClass: 'bg-accent-avocado-flat text-accent-avocado-default',
+    upvotes: 9,
+  },
+  {
+    id: 'comment-3',
+    author: 'Lena S.',
+    handle: '@lenas',
+    reputation: '1.7K',
+    time: 'Yesterday',
+    text: 'Question for the team: will you share the donation receipts publicly? Would love the transparency.',
+    avatarClass: 'bg-accent-onion-flat text-accent-onion-default',
+    upvotes: 4,
+  },
+];
+
+const currentUser = 'You';
+
+const getInitials = (name: string): string =>
+  name
+    .split(' ')
+    .map((part) => part[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+
+// Recursive tree helpers — comments and their replies share one shape, so a
+// single set of helpers keeps remove/block/reply consistent at any depth.
+const removeNode = (list: GivebackComment[], id: string): GivebackComment[] =>
+  list
+    .filter((comment) => comment.id !== id)
+    .map((comment) =>
+      comment.replies
+        ? { ...comment, replies: removeNode(comment.replies, id) }
+        : comment,
+    );
+
+const removeByAuthor = (
+  list: GivebackComment[],
+  author: string,
+): GivebackComment[] =>
+  list
+    .filter((comment) => comment.author !== author)
+    .map((comment) =>
+      comment.replies
+        ? { ...comment, replies: removeByAuthor(comment.replies, author) }
+        : comment,
+    );
+
+const addReply = (
+  list: GivebackComment[],
+  threadId: string,
+  reply: GivebackComment,
+): GivebackComment[] =>
+  list.map((comment) =>
+    comment.id === threadId
+      ? { ...comment, replies: [...(comment.replies ?? []), reply] }
+      : comment,
+  );
+
+interface CommentMenuProps {
+  isOwn: boolean;
+  author: string;
+  onRemove: () => void;
+  onBlock: () => void;
+  onReport: () => void;
+}
+
+const CommentMenu = ({
+  isOwn,
+  author,
+  onRemove,
+  onBlock,
+  onReport,
+}: CommentMenuProps): ReactElement => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useOutsideClick(ref, () => setOpen(false), open);
+
+  const run = (action: () => void) => () => {
+    action();
+    setOpen(false);
+  };
+
+  const ownerItems = [
+    {
+      id: 'remove',
+      label: 'Remove',
+      icon: <TrashIcon />,
+      onClick: run(onRemove),
+      destructive: true,
+    },
+  ];
+
+  const visitorItems = [
+    {
+      id: 'hide',
+      label: 'Hide',
+      icon: <EyeCancelIcon />,
+      onClick: run(onRemove),
+      destructive: false,
+    },
+    {
+      id: 'block',
+      label: `Block ${author}`,
+      icon: <BlockIcon />,
+      onClick: run(onBlock),
+      destructive: false,
+    },
+    {
+      id: 'report',
+      label: 'Report',
+      icon: <FlagIcon />,
+      onClick: run(onReport),
+      destructive: true,
+    },
+  ];
+
+  const items = isOwn ? ownerItems : visitorItems;
+
+  return (
+    <div ref={ref} className="relative">
+      <Button
+        type="button"
+        size={ButtonSize.Small}
+        variant={ButtonVariant.Tertiary}
+        icon={<MenuIcon />}
+        aria-label="More options"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      />
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full z-3 mt-1 min-w-44 origin-top-right overflow-hidden rounded-12 border border-border-subtlest-tertiary bg-background-default py-1 shadow-2 motion-safe:animate-reward-pop"
+        >
+          {items.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              role="menuitem"
+              onClick={item.onClick}
+              className={`flex w-full items-center gap-2.5 px-3 py-2 text-left typo-callout hover:bg-surface-hover [&_svg]:size-4 ${
+                item.destructive ? 'text-status-error' : 'text-text-primary'
+              }`}
+            >
+              {item.icon}
+              {item.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface ReplyComposerProps {
+  author: string;
+  onCancel: () => void;
+  onSubmit: (text: string) => void;
+}
+
+const ReplyComposer = ({
+  author,
+  onCancel,
+  onSubmit,
+}: ReplyComposerProps): ReactElement => {
+  const [draft, setDraft] = useState('');
+
+  const submit = () => {
+    const text = draft.trim();
+    if (!text) {
+      return;
+    }
+    onSubmit(text);
+    setDraft('');
+  };
+
+  return (
+    <FlexCol className="ml-[52px] mt-2 gap-2">
+      <textarea
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        aria-label={`Reply to ${author}`}
+        placeholder={`Reply to ${author}…`}
+        className="min-h-16 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-primary typo-callout"
+      />
+      <FlexRow className="justify-end gap-2">
+        <Button
+          type="button"
+          size={ButtonSize.XSmall}
+          variant={ButtonVariant.Tertiary}
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          size={ButtonSize.XSmall}
+          variant={ButtonVariant.Primary}
+          disabled={!draft.trim()}
+          onClick={submit}
+        >
+          Post reply
+        </Button>
+      </FlexRow>
+    </FlexCol>
+  );
+};
+
+interface CommentHandlers {
+  onStartReply: (id: string) => void;
+  onCancelReply: () => void;
+  onSubmitReply: (threadId: string, author: string, text: string) => void;
+  onRemove: (id: string) => void;
+  onBlock: (author: string) => void;
+  onReport: (id: string) => void;
+}
+
+interface CommentRowProps extends CommentHandlers {
+  comment: GivebackComment;
+  threadId: string;
+  isReported: boolean;
+  replyingToId: string | null;
+}
+
+// Mirrors the product's `CommentContainer` body used in the post page / modal
+// thread (isModalThread): avatar + author/handle/time + reputation, then the
+// body and compact action bar indented under the name (`ml-[52px]`), with no
+// per-comment border, padding or hover fill — spacing comes from the thread.
+const CommentRow = ({
+  comment,
+  threadId,
+  isReported,
+  replyingToId,
+  onStartReply,
+  onCancelReply,
+  onSubmitReply,
+  onRemove,
+  onBlock,
+  onReport,
+}: CommentRowProps): ReactElement => {
+  const isOwn = comment.author === currentUser;
+  const [vote, setVote] = useState<'up' | 'down' | null>(null);
+  const upvotes = (comment.upvotes ?? 0) + (vote === 'up' ? 1 : 0);
+
+  return (
+    <article className="relative flex flex-col">
+      <header className="z-1 flex w-full flex-row self-start">
+        <span
+          className={`flex size-10 shrink-0 items-center justify-center rounded-full font-bold typo-footnote ${comment.avatarClass}`}
+        >
+          {getInitials(comment.author)}
+        </span>
+        <div className="ml-3 flex min-w-0 flex-1 flex-col typo-callout">
+          <FlexRow className="h-5 items-center gap-1 text-text-quaternary">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Callout}
+              bold
+            >
+              {comment.author}
+            </Typography>
+            <span className="flex h-5 min-w-0 shrink items-center truncate !leading-5 text-text-tertiary typo-footnote">
+              {comment.handle}
+            </span>
+            <Separator className="!mx-0 !h-5 !leading-5" />
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+              className="!h-5 !leading-5"
+            >
+              {comment.time}
+            </Typography>
+            {isReported && (
+              <FlexRow className="items-center gap-1 text-status-error [&_svg]:size-3">
+                <FlagIcon />
+                <Typography type={TypographyType.Caption2} bold>
+                  Reported
+                </Typography>
+              </FlexRow>
+            )}
+          </FlexRow>
+          <div className="flex items-center font-bold text-text-primary typo-footnote">
+            <ReputationIcon
+              className="mr-0.5 text-accent-onion-default"
+              size={IconSize.XSmall}
+            />
+            {comment.reputation}
+          </div>
+        </div>
+      </header>
+
+      <div className="z-1 ml-[52px] mt-1 break-words text-[0.9375rem] leading-[1.55]">
+        {comment.text}
+        <div className="pointer-events-auto mt-1 flex w-full flex-row items-center gap-0.5">
+          <CardActionBar layout="compact">
+            <CardAction
+              density="compact"
+              pressed={vote === 'up'}
+              label="Upvote"
+              color={ButtonColor.Avocado}
+              icon={<UpvoteIcon />}
+              iconPressed={<UpvoteIcon secondary />}
+              onClick={() => setVote((value) => (value === 'up' ? null : 'up'))}
+            />
+            <CardAction
+              density="compact"
+              pressed={vote === 'down'}
+              label="Downvote"
+              color={ButtonColor.Ketchup}
+              className="mr-3"
+              icon={<DownvoteIcon />}
+              iconPressed={<DownvoteIcon secondary />}
+              onClick={() =>
+                setVote((value) => (value === 'down' ? null : 'down'))
+              }
+            />
+            <CardAction
+              density="compact"
+              label="Reply"
+              color={ButtonColor.BlueCheese}
+              className="mr-3"
+              icon={<DiscussIcon />}
+              onClick={() => onStartReply(comment.id)}
+            />
+            <CardAction
+              density="compact"
+              label="Share comment"
+              color={ButtonColor.Cabbage}
+              className="mr-3 hidden mobileXL:flex"
+              icon={<ShareIcon />}
+              onClick={() => undefined}
+            />
+          </CardActionBar>
+          <CommentMenu
+            isOwn={isOwn}
+            author={comment.author}
+            onRemove={() => onRemove(comment.id)}
+            onBlock={() => onBlock(comment.author)}
+            onReport={() => onReport(comment.id)}
+          />
+          {upvotes > 0 && (
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+              className="ml-auto"
+            >
+              {upvotes} upvote{upvotes === 1 ? '' : 's'}
+            </Typography>
+          )}
+        </div>
+      </div>
+
+      {replyingToId === comment.id && (
+        <ReplyComposer
+          author={comment.author}
+          onCancel={onCancelReply}
+          onSubmit={(text) => onSubmitReply(threadId, comment.author, text)}
+        />
+      )}
+    </article>
+  );
+};
+
+interface CommentThreadProps extends CommentHandlers {
+  comment: GivebackComment;
+  reportedIds: Set<string>;
+  replyingToId: string | null;
+}
+
+// One thread = a top-level comment plus its replies, joined by the thin
+// `accent-pepper-subtle` connector lines exactly like the post page thread.
+const CommentThread = ({
+  comment,
+  reportedIds,
+  replyingToId,
+  ...handlers
+}: CommentThreadProps): ReactElement => {
+  const replies = comment.replies ?? [];
+  const hasReplies = replies.length > 0;
+
+  return (
+    <section className="relative flex scroll-mt-16 flex-col items-stretch">
+      {hasReplies && (
+        <div
+          aria-hidden
+          className="pointer-events-none absolute bottom-8 left-5 top-10 w-px bg-accent-pepper-subtle"
+        />
+      )}
+      <CommentRow
+        comment={comment}
+        threadId={comment.id}
+        isReported={reportedIds.has(comment.id)}
+        replyingToId={replyingToId}
+        {...handlers}
+      />
+      {hasReplies && (
+        <div className="relative mt-1 flex flex-col">
+          {replies.map((reply, index) => {
+            const isFirst = index === 0;
+            const isLast = index === replies.length - 1;
+
+            return (
+              <div
+                key={reply.id}
+                className={classNames('relative py-2', !isLast && 'mb-1')}
+              >
+                {isFirst && (
+                  <div
+                    aria-hidden
+                    className="absolute -top-2 left-5 h-3 w-px bg-accent-pepper-subtle"
+                  />
+                )}
+                {!isLast && (
+                  <div
+                    aria-hidden
+                    className="absolute -bottom-3 left-5 top-10 w-px bg-accent-pepper-subtle"
+                  />
+                )}
+                <CommentRow
+                  comment={reply}
+                  threadId={comment.id}
+                  isReported={reportedIds.has(reply.id)}
+                  replyingToId={replyingToId}
+                  {...handlers}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+};
+
+export const GivebackComments = (): ReactElement => {
+  const [comments, setComments] = useState<GivebackComment[]>(seedComments);
+  const [draft, setDraft] = useState('');
+  const [replyingToId, setReplyingToId] = useState<string | null>(null);
+  const [reportedIds, setReportedIds] = useState<Set<string>>(new Set());
+
+  const postComment = () => {
+    const text = draft.trim();
+    if (!text) {
+      return;
+    }
+
+    setComments((current) => [
+      {
+        id: `comment-${Date.now()}`,
+        author: currentUser,
+        handle: '@you',
+        reputation: '0',
+        time: 'Just now',
+        text,
+        avatarClass: 'bg-accent-bacon-flat text-accent-bacon-default',
+      },
+      ...current,
+    ]);
+    setDraft('');
+  };
+
+  const submitReply = (threadId: string, author: string, text: string) => {
+    setComments((current) =>
+      addReply(current, threadId, {
+        id: `reply-${Date.now()}`,
+        author: currentUser,
+        handle: '@you',
+        reputation: '0',
+        time: 'Just now',
+        text,
+        avatarClass: 'bg-accent-bacon-flat text-accent-bacon-default',
+      }),
+    );
+    setReplyingToId(null);
+  };
+
+  const removeComment = (id: string) =>
+    setComments((current) => removeNode(current, id));
+
+  const blockAuthor = (author: string) =>
+    setComments((current) => removeByAuthor(current, author));
+
+  const reportComment = (id: string) =>
+    setReportedIds((current) => new Set(current).add(id));
+
+  return (
+    <FlexCol className="w-full gap-5">
+      <Typography
+        tag={TypographyTag.P}
+        type={TypographyType.Callout}
+        color={TypographyColor.Tertiary}
+      >
+        Share why you&apos;re backing Giveback, or ask the team anything.
+      </Typography>
+
+      <FlexCol className="gap-2">
+        <label htmlFor="giveback-comment" className="flex flex-col gap-2">
+          <Typography
+            tag={TypographyTag.Span}
+            bold
+            type={TypographyType.Footnote}
+          >
+            Add a comment
+          </Typography>
+          <textarea
+            id="giveback-comment"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            placeholder="What does giving back mean to you?"
+            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={postComment}
+          >
+            Post comment
+          </Button>
+        </FlexRow>
+      </FlexCol>
+
+      <FlexCol className="mt-2 gap-4">
+        {comments.map((comment) => (
+          <CommentThread
+            key={comment.id}
+            comment={comment}
+            reportedIds={reportedIds}
+            replyingToId={replyingToId}
+            onStartReply={setReplyingToId}
+            onCancelReply={() => setReplyingToId(null)}
+            onSubmitReply={submitReply}
+            onRemove={removeComment}
+            onBlock={blockAuthor}
+            onReport={reportComment}
+          />
+        ))}
+      </FlexCol>
+    </FlexCol>
+  );
+};
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..04d8fddc243
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackFaq.tsx
@@ -0,0 +1,126 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { ArrowIcon } 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 real 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. You give back, we give back.',
+  },
+  {
+    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.',
+  },
+];
+
+export const GivebackFaq = (): ReactElement => {
+  const [openId, setOpenId] = useState<string | null>(faqs[0].id);
+
+  return (
+    <GivebackSection id="giveback-faq">
+      <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>
+    </GivebackSection>
+  );
+};
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..5b99562ef7e
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackFundingBar.tsx
@@ -0,0 +1,111 @@
+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 { StarIcon } from '../../../components/icons';
+import { useGivebackContext } from '../GivebackContext';
+import { useGivebackNav } from '../GivebackNavContext';
+import { formatDonationAmount, getGoalProgressPercentage } from '../utils';
+
+// Persistent personal-progress bar. Keeps your level, contribution and the
+// primary "take action" CTA one tap away while you read the rest of the page
+// (thumb zone on mobile).
+export const GivebackFundingBar = (): ReactElement => {
+  const { campaign, levels, userProfile } = useGivebackContext();
+  const { setActiveTab } = useGivebackNav();
+
+  const approved = userProfile.approvedContributionAmount;
+  const currentLevel =
+    levels.find((level) => level.levelNumber === userProfile.currentLevel) ??
+    levels[0];
+  const topLevel = levels[levels.length - 1];
+  const nextLevel = levels.find(
+    (level) => level.requiredApprovedAmount > approved,
+  );
+  const amountToNext = nextLevel
+    ? Math.max(0, nextLevel.requiredApprovedAmount - approved)
+    : 0;
+  const percentage = getGoalProgressPercentage(
+    approved,
+    topLevel.requiredApprovedAmount,
+  );
+
+  const hasContributed = approved > 0;
+  const cta = hasContributed
+    ? 'Take your next action'
+    : 'Take your first action';
+  const subline = nextLevel
+    ? `${formatDonationAmount(amountToNext, campaign.currency)} to ${
+        nextLevel.name
+      } — one action gets you closer.`
+    : `Top level reached. You're a ${topLevel.name}.`;
+
+  return (
+    <div className="pointer-events-none fixed inset-x-0 bottom-0 z-3">
+      <div className="bg-background-default/95 pointer-events-auto relative mx-auto w-full max-w-6xl border-t border-border-subtlest-secondary px-4 py-3 backdrop-blur tablet:rounded-t-16 tablet:border-x">
+        <div
+          aria-hidden
+          className="absolute inset-x-0 top-0 h-0.5 overflow-hidden tablet:rounded-t-16"
+        >
+          <div
+            className="h-full bg-gradient-to-r from-accent-avocado-default via-accent-cabbage-default to-accent-cheese-default"
+            style={{ width: `${percentage}%` }}
+          />
+        </div>
+
+        <FlexRow className="items-center justify-between gap-4">
+          <FlexCol className="min-w-0 gap-0.5">
+            <FlexRow className="items-center gap-2">
+              <span className="shrink-0 rounded-8 bg-accent-cabbage-flat px-2 py-0.5 font-bold text-accent-cabbage-default typo-caption1">
+                Lv {currentLevel.levelNumber}
+              </span>
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Callout}
+                bold
+              >
+                {formatDonationAmount(approved, campaign.currency)}
+              </Typography>
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Caption1}
+                color={TypographyColor.Tertiary}
+              >
+                unlocked
+              </Typography>
+            </FlexRow>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+              className="truncate"
+            >
+              {subline}
+            </Typography>
+          </FlexCol>
+
+          <Button
+            type="button"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Medium}
+            icon={<StarIcon />}
+            onClick={() => setActiveTab('actions')}
+            className="shrink-0"
+          >
+            {cta}
+          </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/GivebackHero.tsx b/packages/shared/src/features/giveback/components/GivebackHero.tsx
new file mode 100644
index 00000000000..e5ecd354326
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackHero.tsx
@@ -0,0 +1,81 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import { DailyIcon } from '../../../components/icons';
+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 overflow-hidden">
+      <div
+        aria-hidden
+        className="bg-accent-cabbage-default/25 pointer-events-none absolute -left-24 -top-24 size-80 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+      />
+      <div
+        aria-hidden
+        className="bg-accent-onion-default/20 pointer-events-none absolute -right-10 top-10 size-72 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+        style={{ animationDelay: '1s' }}
+      />
+      <div
+        aria-hidden
+        className="bg-accent-cheese-default/15 pointer-events-none absolute -bottom-16 left-1/3 size-64 rounded-full blur-3xl motion-safe:animate-glow-pulse"
+        style={{ animationDelay: '2s' }}
+      />
+
+      <FlexCol className="relative gap-10 py-2">
+        <FlexCol className="gap-2">
+          <FlexRow className="w-fit 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
+            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-center gap-6 laptop:grid-cols-[1.7fr_1fr] laptop:gap-10">
+          <GivebackCampaignVideo />
+
+          <FlexCol className="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/GivebackLegalFooter.tsx b/packages/shared/src/features/giveback/components/GivebackLegalFooter.tsx
new file mode 100644
index 00000000000..5774be25a1f
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackLegalFooter.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 {
+  cookiePolicy,
+  privacyPolicy,
+  termsOfService,
+} from '../../../lib/constants';
+
+// Legal/footer home for the campaign. Kept flat and muted so it closes the page
+// quietly while still surfacing the terms, campaign rules and privacy links the
+// initiative needs.
+const legalLinks: { label: string; href: string }[] = [
+  { label: 'Campaign rules', href: termsOfService },
+  { label: 'Terms of Service', href: termsOfService },
+  { label: 'Privacy Policy', href: privacyPolicy },
+  { label: 'Cookie Policy', href: cookiePolicy },
+];
+
+export const GivebackLegalFooter = (): ReactElement => (
+  <FlexCol className="w-full items-center gap-2 border-t border-border-subtlest-tertiary pt-5 text-center">
+    <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>
+
+    <Typography
+      tag={TypographyTag.P}
+      type={TypographyType.Caption2}
+      color={TypographyColor.Quaternary}
+      className="max-w-xl"
+    >
+      Funded by daily.dev — participants never pay. Subject to the campaign
+      rules. © {new Date().getFullYear()} Daily Dev Ltd.
+    </Typography>
+  </FlexCol>
+);
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/GivebackPage.spec.tsx b/packages/shared/src/features/giveback/components/GivebackPage.spec.tsx
new file mode 100644
index 00000000000..3bc08cd9803
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackPage.spec.tsx
@@ -0,0 +1,422 @@
+import React from 'react';
+import { render, 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 { CauseSelection } from './CauseSelection';
+import { CommunityImpactSection } from './CommunityImpactSection';
+import { GivebackUpdates } from './GivebackUpdates';
+import { GeoGateFallback } from './GeoGateFallback';
+
+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' }),
+    );
+
+    // Lands on the cause picker first.
+    expect(
+      screen.getByText('You pick causes you care about.'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Continue' }),
+    ).toBeInTheDocument();
+
+    // Continue moves on to the community Impact view.
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    expect(screen.getByText('You take action.')).toBeInTheDocument();
+    expect(screen.getByText(/You give back, we give back/)).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: "You're a Helping hand" }),
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Why' }));
+    expect(
+      screen.getByText('Big tech burns billions just to get noticed.'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('What we unlock together')).toBeInTheDocument();
+    expect(screen.getByText('What your work turns into')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Take action' }));
+    expect(
+      screen.getByRole('heading', { name: /Take a small action/ }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/genuinely\s+appreciate them/)).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Updates' }));
+    expect(screen.getByText('We just crossed 50% funded')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Comments' }));
+    expect(
+      screen.getByRole('button', { name: 'Post comment' }),
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('tab', { name: 'FAQ' }));
+    expect(screen.getByText('Does this cost me anything?')).toBeInTheDocument();
+  });
+
+  it('lets a visitor post a comment', async () => {
+    render(<GivebackPage />);
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('tab', { name: 'Comments' }));
+
+    await userEvent.type(
+      screen.getByLabelText('Add a comment'),
+      'Backing this for open source!',
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Post comment' }));
+
+    expect(
+      screen.getByText('Backing this for open source!'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('You')).toBeInTheDocument();
+  });
+
+  it('lets a visitor reply to a comment', async () => {
+    render(<GivebackPage />);
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('tab', { name: 'Comments' }));
+
+    const [firstReply] = screen.getAllByRole('button', { name: 'Reply' });
+    await userEvent.click(firstReply);
+
+    await userEvent.type(
+      screen.getByLabelText('Reply to Priya N.'),
+      'Couldn’t agree more!',
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Post reply' }));
+
+    expect(screen.getByText('Couldn’t agree more!')).toBeInTheDocument();
+  });
+
+  it('removes a comment from the more-options menu', async () => {
+    render(<GivebackPage />);
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('tab', { name: 'Comments' }));
+
+    expect(screen.getByText(/Picked Girls Who Code/)).toBeInTheDocument();
+
+    const menus = screen.getAllByRole('button', { name: 'More options' });
+    // Priya (thread), her reply, then Marco — index 2 is Marco's comment.
+    await userEvent.click(menus[2]);
+    await userEvent.click(screen.getByRole('menuitem', { name: 'Hide' }));
+
+    expect(screen.queryByText(/Picked Girls Who Code/)).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('tab', { name: 'Impact' }));
+
+    expect(screen.getAllByText('$5,000')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('$10,000')[0]).toBeInTheDocument();
+    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('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('ActionCatalog', () => {
+  it('renders action statuses', () => {
+    render(
+      <GivebackProvider>
+        <ActionCatalog />
+      </GivebackProvider>,
+    );
+
+    expect(
+      screen.getByText('Share the Giveback launch post'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Counted toward goal')).toBeInTheDocument();
+  });
+
+  it('filters actions by category', async () => {
+    render(
+      <GivebackProvider>
+        <ActionCatalog />
+      </GivebackProvider>,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'Referrals' }));
+
+    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>
+        <ActionCatalog />
+      </GivebackProvider>,
+    );
+
+    await userEvent.selectOptions(
+      screen.getByLabelText('Sort actions'),
+      'value-desc',
+    );
+
+    expect(screen.getByText('Refer a dev team')).toBeInTheDocument();
+  });
+
+  it('submits eligible action proof as pending validation', async () => {
+    render(
+      <GivebackProvider>
+        <ActionCatalog />
+      </GivebackProvider>,
+    );
+
+    expect(screen.getByText('Your contribution')).toBeInTheDocument();
+    expect(screen.getByText('$110')).toBeInTheDocument();
+
+    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();
+  });
+});
+
+describe('CauseSelection', () => {
+  const renderCauseSelection = () =>
+    render(
+      <GivebackProvider>
+        <GivebackNavProvider
+          hasStarted
+          start={() => {}}
+          activeTab="causes"
+          setActiveTab={() => {}}
+        >
+          <CauseSelection />
+        </GivebackNavProvider>
+      </GivebackProvider>,
+    );
+
+  it('selects causes from the grid and suggests new ones', async () => {
+    renderCauseSelection();
+
+    // Code.org is selected by default in the card grid.
+    expect(screen.getByRole('button', { name: /Code.org/ })).toHaveAttribute(
+      'aria-pressed',
+      'true',
+    );
+
+    // Toggle another cause directly from the grid.
+    await userEvent.click(
+      screen.getByRole('button', { name: /Internet Archive/ }),
+    );
+    expect(
+      screen.getByRole('button', { name: /Internet Archive/ }),
+    ).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();
+  });
+});
+
+describe('Love actions in the catalog', () => {
+  it('shows love actions with appreciation messaging and no submission CTA', () => {
+    render(
+      <GivebackProvider>
+        <ActionCatalog />
+      </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();
+  });
+});
+
+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 students')).toBeInTheDocument();
+    expect(screen.getByText('Code.org')).toBeInTheDocument();
+  });
+
+  it('renders anonymized community activity in the updates feed', () => {
+    render(
+      <GivebackProvider>
+        <GivebackUpdates />
+      </GivebackProvider>,
+    );
+
+    expect(
+      screen.getByText(/shared the Giveback launch post/),
+    ).toBeInTheDocument();
+    expect(screen.getByText('anonymized by default')).toBeInTheDocument();
+  });
+
+  it('shows the sponsor wall and lets a visitor add a sponsorship', async () => {
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <GivebackPage />
+      </QueryClientProvider>,
+    );
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Join the campaign' }),
+    );
+    await userEvent.click(screen.getByRole('tab', { name: 'Sponsors' }));
+
+    expect(screen.getByText('Sponsors top up the budget.')).toBeInTheDocument();
+    expect(screen.getByText('Vercel')).toBeInTheDocument();
+
+    await userEvent.click(
+      screen.getAllByRole('button', { name: 'Become a sponsor' })[0],
+    );
+
+    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' }));
+
+    expect(screen.getByText('Globex Corp')).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 />
+        <GivebackUpdates />
+        <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..cd7eb31fb74
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackPage.tsx
@@ -0,0 +1,309 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { FlexCol } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+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 { CauseSelection } from './CauseSelection';
+import { CommunityImpactSection } from './CommunityImpactSection';
+import { GeoGateFallback } from './GeoGateFallback';
+import { BudgetRedirectStory } from './BudgetRedirectStory';
+import { GivebackParticipateStrip } from './GivebackParticipateStrip';
+import { GivebackStretchGoals } from './GivebackStretchGoals';
+import { GivebackFundingBar } from './GivebackFundingBar';
+import { GivebackFaq } from './GivebackFaq';
+import { GivebackUpdates } from './GivebackUpdates';
+import { GivebackComments } from './GivebackComments';
+import { GivebackReveal } from './GivebackReveal';
+import { GivebackSocialProof } from './GivebackSocialProof';
+import { GivebackSponsors } from './GivebackSponsors';
+import { GivebackClosingCta } from './GivebackClosingCta';
+import { GivebackLegalFooter } from './GivebackLegalFooter';
+import { GivebackBackground } from './GivebackBackground';
+
+// The first run is guided: opt in from the hero, pick causes, then continue to
+// the Impact view (community money + your contribution). The rest are tabs the
+// visitor can jump between freely.
+const tabs: { id: GivebackTabId; label: string }[] = [
+  { id: 'causes', label: 'Causes' },
+  { id: 'impact', label: 'Impact' },
+  { id: 'actions', label: 'Take action' },
+  { id: 'why', label: 'Why' },
+  { id: 'sponsors', label: 'Sponsors' },
+  { id: 'updates', label: 'Updates' },
+  { id: 'comments', label: 'Comments' },
+  { id: 'faq', label: 'FAQ' },
+];
+
+// 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 }> =
+  {
+    causes: {
+      title: 'We fund developers, not ads.',
+      highlight: 'You pick causes you care about.',
+    },
+    impact: {
+      title: 'You take action.',
+      highlight: 'We fund the causes.',
+    },
+    why: {
+      title: 'Big tech burns billions just to get noticed.',
+      highlight: 'We send ours where it actually changes lives.',
+    },
+    sponsors: {
+      title: 'Sponsors top up the budget.',
+      highlight: 'Together we fund more good.',
+    },
+    actions: {
+      title: 'Take a small action.',
+      highlight: 'We turn it into a donation.',
+    },
+    updates: {
+      title: 'Follow the journey.',
+      highlight: "See what's moving.",
+    },
+    comments: {
+      title: 'Join the conversation.',
+      highlight: 'Tell us what you think.',
+    },
+    faq: {
+      title: 'Got questions?',
+      highlight: "We've got answers.",
+    },
+  };
+
+const GivebackTabHeader = ({ tab }: { tab: GivebackTabId }): ReactElement => {
+  const { title, highlight } = tabHeaders[tab];
+
+  return (
+    <Typography
+      tag={TypographyTag.H2}
+      type={TypographyType.LargeTitle}
+      bold
+      className="max-w-3xl"
+    >
+      {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>
+  );
+};
+
+const renderActivePanel = (tab: GivebackTabId): ReactElement => {
+  switch (tab) {
+    case 'actions':
+      return <ActionCatalog />;
+    case 'causes':
+      return <CauseSelection />;
+    case 'why':
+      return (
+        <FlexCol className="gap-12">
+          <BudgetRedirectStory />
+          <GivebackStretchGoals />
+          <CommunityImpactSection />
+        </FlexCol>
+      );
+    case 'sponsors':
+      return <GivebackSponsors />;
+    case 'updates':
+      return <GivebackUpdates />;
+    case 'comments':
+      return <GivebackComments />;
+    case 'faq':
+      return <GivebackFaq />;
+    case 'impact':
+    default:
+      return (
+        <FlexCol className="gap-12">
+          <CommunityGoalProgress />
+          <GivebackParticipateStrip />
+          <PersonalRoadmap />
+        </FlexCol>
+      );
+  }
+};
+
+const GivebackPageContent = (): ReactElement => {
+  const { geoAvailability } = useGivebackContext();
+  const [hasStarted, setHasStarted] = useState(false);
+  const [activeTab, setActiveTabState] = useState<GivebackTabId>('causes');
+  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 — pick what you care
+  // about, then continue to the community Impact view.
+  const start = useCallback(() => {
+    setHasStarted(true);
+    setActiveTabState('causes');
+  }, []);
+
+  // Scroll to the freshly revealed tabs once they mount.
+  useEffect(() => {
+    if (hasStarted) {
+      scrollToTabs();
+    }
+  }, [hasStarted, 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={classNames(
+            'relative mx-auto w-full max-w-6xl gap-14 px-4 py-8 tablet:py-14',
+            hasStarted && 'pb-40',
+          )}
+        >
+          <GivebackReveal>
+            <GivebackHero />
+          </GivebackReveal>
+
+          <GivebackReveal>
+            <GivebackSocialProof />
+          </GivebackReveal>
+
+          {hasStarted && (
+            <>
+              <FlexCol className="gap-10">
+                <div
+                  ref={tabsRef}
+                  className="bg-background-default/95 sticky top-0 z-3 -mx-4 scroll-mt-4 border-b border-border-subtlest-tertiary px-4 backdrop-blur-sm"
+                >
+                  <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"
+                  />
+                  <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-bold 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 px-3 py-1.5 transition-colors duration-200',
+                              selected
+                                ? 'bg-theme-active'
+                                : 'hover:bg-surface-float',
+                            )}
+                          >
+                            {tab.label}
+                          </span>
+                          <span
+                            aria-hidden
+                            className={classNames(
+                              'absolute bottom-0 left-1/2 h-0.5 w-12 -translate-x-1/2 rounded-4 bg-text-primary transition-transform duration-300 ease-out motion-reduce:transition-none',
+                              selected ? 'scale-x-100' : 'scale-x-0',
+                            )}
+                          />
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div
+                  key={activeTab}
+                  role="tabpanel"
+                  id={`giveback-panel-${activeTab}`}
+                  aria-labelledby={`giveback-tab-${activeTab}`}
+                  className="relative"
+                >
+                  <GivebackReveal>
+                    <FlexCol className="gap-8">
+                      <GivebackTabHeader tab={activeTab} />
+                      {renderActivePanel(activeTab)}
+                    </FlexCol>
+                  </GivebackReveal>
+                </div>
+              </FlexCol>
+
+              <GivebackReveal>
+                <GivebackClosingCta />
+              </GivebackReveal>
+            </>
+          )}
+
+          <GivebackReveal>
+            <GivebackLegalFooter />
+          </GivebackReveal>
+        </FlexCol>
+
+        {hasStarted && <GivebackFundingBar />}
+      </div>
+    </GivebackNavProvider>
+  );
+};
+
+export const GivebackPage = (): ReactElement => {
+  return (
+    <GivebackProvider>
+      <GivebackPageContent />
+      {isDevelopment && <GivebackReviewToggle />}
+    </GivebackProvider>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackParticipateStrip.tsx b/packages/shared/src/features/giveback/components/GivebackParticipateStrip.tsx
new file mode 100644
index 00000000000..78dc5db0059
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackParticipateStrip.tsx
@@ -0,0 +1,95 @@
+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 { StarIcon } from '../../../components/icons';
+import { useGivebackContext } from '../GivebackContext';
+import { useGivebackNav } from '../GivebackNavContext';
+import { formatDonationAmount } from '../utils';
+
+// Compact personal-status strip that sits right under the community campaign.
+// The contribution starts at zero — it's the nudge to take a first action.
+export const GivebackParticipateStrip = (): ReactElement => {
+  const { campaign } = useGivebackContext();
+  const { setActiveTab } = useGivebackNav();
+
+  const contribution = 0;
+  const hasContributed = contribution > 0;
+
+  return (
+    <section className="w-full rounded-16 border border-border-subtlest-tertiary p-4 tablet:p-5">
+      <div className="flex flex-col gap-4 tablet:flex-row tablet:items-center tablet:justify-between">
+        <FlexCol className="gap-1">
+          <FlexRow className="items-baseline gap-2">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+              bold
+              className="uppercase tracking-wider"
+            >
+              Your contribution
+            </Typography>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Title2}
+              color={
+                hasContributed
+                  ? TypographyColor.StatusSuccess
+                  : TypographyColor.Primary
+              }
+              bold
+              className="inline-block motion-safe:animate-reward-pop"
+            >
+              {formatDonationAmount(contribution, campaign.currency)}
+            </Typography>
+          </FlexRow>
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Footnote}
+            color={TypographyColor.Secondary}
+            className="max-w-xl"
+          >
+            {hasContributed
+              ? `You've unlocked ${formatDonationAmount(
+                  contribution,
+                  campaign.currency,
+                )} in donations — keep the momentum going.`
+              : 'Start your first contribution — it costs you nothing. You give back, we give back.'}
+          </Typography>
+        </FlexCol>
+
+        <FlexRow className="shrink-0 items-center gap-2">
+          <Button
+            type="button"
+            variant={ButtonVariant.Primary}
+            size={ButtonSize.Medium}
+            icon={<StarIcon />}
+            onClick={() => setActiveTab('actions')}
+            className="shadow-2-cabbage transition-transform duration-200 hover:scale-[1.03] active:scale-100 motion-reduce:transform-none"
+          >
+            Start contributing
+          </Button>
+          <Button
+            type="button"
+            variant={ButtonVariant.Subtle}
+            size={ButtonSize.Medium}
+            onClick={() => setActiveTab('why')}
+          >
+            Why we do it
+          </Button>
+        </FlexRow>
+      </div>
+    </section>
+  );
+};
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..b810a316667
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackReviewToggle.tsx
@@ -0,0 +1,247 @@
+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,
+    celebrationState,
+    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)}
+                >
+                  {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/GivebackSocialProof.tsx b/packages/shared/src/features/giveback/components/GivebackSocialProof.tsx
new file mode 100644
index 00000000000..fd2383ede2b
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSocialProof.tsx
@@ -0,0 +1,136 @@
+import type { ReactElement, SyntheticEvent } from 'react';
+import React from 'react';
+import { FlexCol, FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { fallbackImages } from '../../../lib/config';
+
+interface GivebackReview {
+  quote: string;
+  author: string;
+  handle: string;
+  image: string;
+}
+
+// Real daily.dev profiles and avatars from our community. The short quotes are
+// illustrative for the campaign demo; swap for consented testimonials at launch.
+const reviews: GivebackReview[] = [
+  {
+    quote:
+      'Proud of where this is going — our budget funding real causes instead of ad auctions.',
+    author: 'Ido Shamun',
+    handle: '@idoshamun',
+    image:
+      'https://media.daily.dev/image/upload/s---xy_OAwk--/f_auto,q_auto/v1703781380/avatars/avatar_28849d86070e4c099c877ab6837c61f0',
+  },
+  {
+    quote:
+      'Backed open source in two clicks. This is how giving back should feel.',
+    author: 'Nimrod Kramer',
+    handle: '@kramer',
+    image:
+      'https://media.daily.dev/image/upload/v1682322243/avatars/avatar_1d339aa5b85c4e0ba85fdedb523c48d4.jpg',
+  },
+  {
+    quote: 'Shared the launch with my audience. Zero cost to me, real impact.',
+    author: 'Chris Bongers',
+    handle: '@dailydevtips',
+    image:
+      'https://media.daily.dev/image/upload/s--9gxFz1e7--/f_auto/v1705902590/avatars/avatar_JUNiIGCV-?_a=BAMAMiZW0',
+  },
+  {
+    quote:
+      'Picked the causes I care about and the donation was already covered. Wild.',
+    author: 'Ante Barić',
+    handle: '@capjavert',
+    image:
+      'https://media.daily.dev/image/upload/v1679300599/avatars/avatar_LJSkpBexOSCWc8INyu3Eu.jpg',
+  },
+  {
+    quote: 'Small actions, real money for good causes. Easy yes from me.',
+    author: 'Amar',
+    handle: '@amar',
+    image:
+      'https://media.daily.dev/image/upload/s--W1oZyHsz--/f_auto/v1719829173/avatars/avatar_0pjeBcFKQqsnU97ZOj9EW',
+  },
+  {
+    quote: 'Love that the community gets to decide where the money goes.',
+    author: 'Dave',
+    handle: '@dave28',
+    image:
+      'https://media.daily.dev/image/upload/s--C7nUVtfM--/f_auto,q_auto/v1/avatars/avatar_14yFjmSDxLUrr05G27mp6',
+  },
+];
+
+const onAvatarError = (event: SyntheticEvent<HTMLImageElement>): void => {
+  const target = event.currentTarget;
+  if (target.src !== fallbackImages.avatar) {
+    target.src = fallbackImages.avatar;
+  }
+};
+
+export const GivebackSocialProof = (): ReactElement => (
+  <FlexCol className="w-full gap-4">
+    <FlexRow className="items-center gap-2">
+      <span className="size-2 rounded-full bg-status-success motion-safe:animate-glow-pulse" />
+      <Typography
+        tag={TypographyTag.Span}
+        type={TypographyType.Caption1}
+        color={TypographyColor.Tertiary}
+        bold
+        className="uppercase tracking-wider"
+      >
+        Live from the community
+      </Typography>
+    </FlexRow>
+
+    <div className="grid gap-4 tablet:grid-cols-2 laptop:grid-cols-3">
+      {reviews.map((review) => (
+        <FlexCol
+          key={review.handle}
+          className="group gap-3 rounded-16 border border-border-subtlest-tertiary p-4 transition-all duration-200 hover:-translate-y-0.5 hover:border-border-subtlest-secondary hover:shadow-2 motion-reduce:transform-none"
+        >
+          <FlexRow className="items-center gap-3">
+            <img
+              src={review.image}
+              alt={review.author}
+              loading="lazy"
+              onError={onAvatarError}
+              className="size-10 shrink-0 rounded-full object-cover transition-transform duration-200 group-hover:scale-105"
+            />
+            <FlexCol className="min-w-0">
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Footnote}
+                bold
+                truncate
+              >
+                {review.author}
+              </Typography>
+              <Typography
+                tag={TypographyTag.Span}
+                type={TypographyType.Caption1}
+                color={TypographyColor.Tertiary}
+                truncate
+              >
+                {review.handle}
+              </Typography>
+            </FlexCol>
+          </FlexRow>
+
+          <Typography
+            tag={TypographyTag.P}
+            type={TypographyType.Footnote}
+            color={TypographyColor.Secondary}
+          >
+            &ldquo;{review.quote}&rdquo;
+          </Typography>
+        </FlexCol>
+      ))}
+    </div>
+  </FlexCol>
+);
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..9e903e791c7
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSponsorModal.tsx
@@ -0,0 +1,248 @@
+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 { 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 (
+    // 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>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackSponsors.tsx b/packages/shared/src/features/giveback/components/GivebackSponsors.tsx
new file mode 100644
index 00000000000..fc6db7cedb7
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSponsors.tsx
@@ -0,0 +1,233 @@
+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 { PlusIcon } from '../../../components/icons';
+import { useGivebackContext } from '../GivebackContext';
+import type { GivebackSponsor } from '../types';
+import { GivebackSponsorTier, GivebackSponsorType } from '../types';
+import {
+  formatDonationAmount,
+  getSponsorTier,
+  sponsorTierLabel,
+} from '../utils';
+import { GivebackSection } from './GivebackSection';
+import { GivebackSponsorModal } from './GivebackSponsorModal';
+
+const tierStyles: Record<GivebackSponsorTier, { tile: string; text: string }> =
+  {
+    [GivebackSponsorTier.Platinum]: {
+      tile: 'bg-accent-cabbage-flat',
+      text: 'text-accent-cabbage-default',
+    },
+    [GivebackSponsorTier.Gold]: {
+      tile: 'bg-accent-cheese-flat',
+      text: 'text-accent-cheese-default',
+    },
+    [GivebackSponsorTier.Silver]: {
+      tile: 'bg-accent-onion-flat',
+      text: 'text-accent-onion-default',
+    },
+    [GivebackSponsorTier.Backer]: {
+      tile: 'bg-accent-avocado-flat',
+      text: 'text-accent-avocado-default',
+    },
+  };
+
+const getInitials = (name: string): string =>
+  name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0]?.toUpperCase() ?? '')
+    .join('');
+
+const sortSponsors = (sponsors: GivebackSponsor[]): GivebackSponsor[] =>
+  [...sponsors].sort((a, b) => {
+    if (Boolean(a.isFounding) !== Boolean(b.isFounding)) {
+      return a.isFounding ? -1 : 1;
+    }
+    return b.amount - a.amount;
+  });
+
+const SponsorCard = ({
+  sponsor,
+}: {
+  sponsor: GivebackSponsor;
+}): ReactElement => {
+  const tier = getSponsorTier(sponsor.amount);
+  const accent = tierStyles[tier];
+  const typeLabel =
+    sponsor.type === GivebackSponsorType.Company ? 'Company' : 'Individual';
+
+  return (
+    <FlexCol className="group gap-3 rounded-16 border border-border-subtlest-tertiary p-4 transition-all duration-200 hover:-translate-y-0.5 hover:border-border-subtlest-secondary hover:shadow-2 motion-reduce:transform-none">
+      <FlexRow className="items-center gap-3">
+        <span
+          className={classNames(
+            'flex size-12 shrink-0 items-center justify-center rounded-16 font-bold transition-transform duration-200 typo-callout group-hover:scale-105',
+            accent.tile,
+            accent.text,
+          )}
+        >
+          {getInitials(sponsor.name)}
+        </span>
+        <FlexCol className="min-w-0 flex-1">
+          <FlexRow className="items-center gap-2">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Footnote}
+              bold
+              truncate
+            >
+              {sponsor.name}
+            </Typography>
+            {sponsor.isFounding && (
+              <span className="shrink-0 rounded-6 bg-accent-bacon-flat px-1.5 py-0.5 font-bold uppercase tracking-wider text-accent-bacon-default typo-caption2">
+                Founding
+              </span>
+            )}
+          </FlexRow>
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            {typeLabel} · {sponsorTierLabel[tier]} sponsor
+          </Typography>
+        </FlexCol>
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Callout}
+          bold
+          className={classNames('shrink-0 tabular-nums', accent.text)}
+        >
+          {formatDonationAmount(sponsor.amount, sponsor.currency)}
+        </Typography>
+      </FlexRow>
+
+      {sponsor.message && (
+        <Typography
+          tag={TypographyTag.P}
+          type={TypographyType.Footnote}
+          color={TypographyColor.Secondary}
+        >
+          &ldquo;{sponsor.message}&rdquo;
+        </Typography>
+      )}
+    </FlexCol>
+  );
+};
+
+export const GivebackSponsors = (): ReactElement => {
+  const { campaign } = useGivebackContext();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const sponsors = sortSponsors(campaign.sponsors);
+  const goalShare = campaign.goalAmount
+    ? Math.round((campaign.sponsoredAmount / campaign.goalAmount) * 100)
+    : 0;
+
+  return (
+    <GivebackSection
+      id="giveback-sponsors"
+      description="Companies and people top up the budget directly. Every sponsored dollar lands in the same pot the community is unlocking — and goes straight to the causes."
+      headerActions={
+        <Button
+          type="button"
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Primary}
+          icon={<PlusIcon />}
+          onClick={() => setIsModalOpen(true)}
+        >
+          Become a sponsor
+        </Button>
+      }
+    >
+      <FlexRow className="flex-wrap items-center justify-between gap-4 rounded-16 border border-border-subtlest-tertiary p-5">
+        <FlexCol className="gap-1">
+          <FlexRow className="items-center gap-2">
+            <span className="size-2.5 shrink-0 rounded-full bg-accent-bacon-default" />
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Caption1}
+              color={TypographyColor.Tertiary}
+              bold
+              className="uppercase tracking-wider"
+            >
+              Sponsored into the pot
+            </Typography>
+          </FlexRow>
+          <FlexRow className="items-end gap-2">
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Mega1}
+              bold
+              className="text-accent-bacon-default"
+            >
+              {formatDonationAmount(
+                campaign.sponsoredAmount,
+                campaign.currency,
+              )}
+            </Typography>
+            <Typography
+              tag={TypographyTag.Span}
+              type={TypographyType.Callout}
+              color={TypographyColor.Tertiary}
+              className="pb-1"
+            >
+              from {sponsors.length} sponsors
+            </Typography>
+          </FlexRow>
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            100% goes to the causes · {goalShare}% of the{' '}
+            {formatDonationAmount(campaign.goalAmount, campaign.currency)} goal
+          </Typography>
+        </FlexCol>
+      </FlexRow>
+
+      <div className="grid gap-4 tablet:grid-cols-2">
+        {sponsors.map((sponsor) => (
+          <SponsorCard key={sponsor.id} sponsor={sponsor} />
+        ))}
+
+        <button
+          type="button"
+          onClick={() => setIsModalOpen(true)}
+          className="group flex flex-col items-center justify-center gap-2 rounded-16 border border-dashed border-border-subtlest-tertiary p-4 text-center transition-all duration-200 hover:-translate-y-0.5 hover:border-accent-cabbage-default hover:bg-accent-cabbage-flat active:translate-y-0 motion-reduce:transform-none"
+        >
+          <span className="flex size-12 items-center justify-center rounded-16 bg-accent-cabbage-flat text-accent-cabbage-default transition-transform duration-200 group-hover:rotate-90 group-hover:scale-110 [&_svg]:size-6">
+            <PlusIcon />
+          </span>
+          <Typography type={TypographyType.Footnote} bold>
+            Become a sponsor
+          </Typography>
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            Add your company or name to the wall
+          </Typography>
+        </button>
+      </div>
+
+      {isModalOpen && (
+        <GivebackSponsorModal onClose={() => setIsModalOpen(false)} />
+      )}
+    </GivebackSection>
+  );
+};
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..02654b3bce6
--- /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 — you never pay.
+      </Typography>
+
+      <Button
+        type="button"
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Large}
+        icon={<MoveToIcon size={IconSize.Small} />}
+        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/GivebackStretchGoals.tsx b/packages/shared/src/features/giveback/components/GivebackStretchGoals.tsx
new file mode 100644
index 00000000000..5fb3ad4094c
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackStretchGoals.tsx
@@ -0,0 +1,161 @@
+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';
+import { ProgressBar } from '../../../components/fields/ProgressBar';
+import { LockIcon, VIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { useGivebackContext } from '../GivebackContext';
+import {
+  formatCompactNumber,
+  formatDonationAmount,
+  getGoalProgressPercentage,
+} from '../utils';
+import { GivebackSection } from './GivebackSection';
+
+type TierState = 'unlocked' | 'next' | 'locked';
+
+const stateTag: Record<TierState, string> = {
+  unlocked: 'Unlocked',
+  next: 'Next up',
+  locked: 'Locked',
+};
+
+export const GivebackStretchGoals = (): ReactElement => {
+  const { campaign } = useGivebackContext();
+  const approved = campaign.approvedAmount;
+
+  const goals = [...campaign.stretchGoals].sort((a, b) => a.amount - b.amount);
+  const nextIndex = goals.findIndex((goal) => goal.amount > approved);
+  const next = nextIndex === -1 ? undefined : goals[nextIndex];
+  const previousAmount = nextIndex > 0 ? goals[nextIndex - 1].amount : 0;
+  const toNext = next ? next.amount - approved : 0;
+  const nextProgress = next
+    ? getGoalProgressPercentage(
+        approved - previousAmount,
+        next.amount - previousAmount,
+      )
+    : 100;
+
+  return (
+    <GivebackSection id="giveback-stretch" title="What we unlock together">
+      <FlexCol className="divide-y divide-border-subtlest-tertiary">
+        {goals.map((goal, index) => {
+          let state: TierState = 'locked';
+          if (nextIndex === -1 || index < nextIndex) {
+            state = 'unlocked';
+          } else if (index === nextIndex) {
+            state = 'next';
+          }
+
+          const isUnlocked = state === 'unlocked';
+          const isNext = state === 'next';
+
+          return (
+            <FlexRow key={goal.id} className="items-start gap-4 py-4">
+              <span
+                className={classNames(
+                  'flex size-10 shrink-0 items-center justify-center rounded-full font-bold typo-caption1',
+                  isUnlocked && 'bg-accent-avocado-default text-white',
+                  isNext &&
+                    'bg-accent-cabbage-flat text-accent-cabbage-default ring-2 ring-accent-cabbage-default motion-safe:animate-glow-pulse',
+                  state === 'locked' && 'bg-surface-float text-text-tertiary',
+                )}
+              >
+                {isUnlocked ? (
+                  <VIcon secondary size={IconSize.Small} />
+                ) : (
+                  `$${formatCompactNumber(goal.amount)}`
+                )}
+              </span>
+
+              <FlexCol className="min-w-0 flex-1 gap-1">
+                <FlexRow className="flex-wrap items-center justify-between gap-2">
+                  <Typography
+                    bold
+                    type={TypographyType.Callout}
+                    color={
+                      state === 'locked'
+                        ? TypographyColor.Tertiary
+                        : TypographyColor.Primary
+                    }
+                  >
+                    {goal.title}
+                  </Typography>
+                  <FlexRow className="items-center gap-1">
+                    {state === 'locked' && (
+                      <LockIcon
+                        size={IconSize.XSmall}
+                        className="text-text-tertiary"
+                      />
+                    )}
+                    <Typography
+                      tag={TypographyTag.Span}
+                      type={TypographyType.Caption1}
+                      bold
+                      color={
+                        isUnlocked
+                          ? TypographyColor.StatusSuccess
+                          : TypographyColor.Tertiary
+                      }
+                      className={classNames(
+                        'uppercase tracking-wider',
+                        isNext && 'text-accent-cabbage-default',
+                      )}
+                    >
+                      {stateTag[state]}
+                    </Typography>
+                  </FlexRow>
+                </FlexRow>
+
+                <Typography
+                  type={TypographyType.Footnote}
+                  color={TypographyColor.Tertiary}
+                >
+                  {goal.description}
+                </Typography>
+
+                {isNext && (
+                  <FlexCol className="gap-1 pt-1">
+                    <div className="relative overflow-hidden rounded-8">
+                      <ProgressBar
+                        percentage={nextProgress}
+                        shouldShowBg
+                        className={{
+                          wrapper: 'h-1.5 rounded-8',
+                          bar: 'h-full rounded-8',
+                          barColor: 'bg-accent-cabbage-default',
+                        }}
+                      />
+                      {[0, 1, 2].map((coin) => (
+                        <span
+                          key={coin}
+                          aria-hidden
+                          style={{ animationDelay: `${coin * 0.87}s` }}
+                          className="pointer-events-none absolute top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent-cheese-default motion-safe:animate-coin-stream"
+                        />
+                      ))}
+                    </div>
+                    <Typography
+                      type={TypographyType.Caption1}
+                      color={TypographyColor.Tertiary}
+                    >
+                      {formatDonationAmount(toNext, campaign.currency)} to
+                      unlock
+                    </Typography>
+                  </FlexCol>
+                )}
+              </FlexCol>
+            </FlexRow>
+          );
+        })}
+      </FlexCol>
+    </GivebackSection>
+  );
+};
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..3ee8f02b28f
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackSubmissionModal.tsx
@@ -0,0 +1,258 @@
+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 type { GivebackAction } from '../types';
+import { useGivebackContext } from '../GivebackContext';
+import { formatDonationAmount } from '../utils';
+import { actionCategoryLabels, actionValidationLabels } from '../statusLabels';
+
+interface GivebackSubmissionModalProps {
+  action: GivebackAction;
+  onClose: () => void;
+}
+
+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,
+  ]);
+
+  const onSubmit = () => {
+    if (!canSubmit) {
+      return;
+    }
+
+    submitAction({
+      actionId: action.id,
+      evidenceLink: evidenceLink.trim() || undefined,
+      evidenceImage,
+      note: note.trim() || undefined,
+    });
+    setIsSubmitted(true);
+  };
+
+  return (
+    <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}
+            >
+              {isSubmitted ? 'Proof submitted' : 'Submit proof'}
+            </Typography>
+            <Typography
+              type={TypographyType.Callout}
+              className="text-text-tertiary"
+            >
+              {isSubmitted
+                ? "Added to your contribution. We'll only subtract it if validation fails."
+                : action.title}
+            </Typography>
+          </FlexCol>
+
+          {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>
+          ) : (
+            <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">
+            <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>
+  );
+};
diff --git a/packages/shared/src/features/giveback/components/GivebackTrustPerks.tsx b/packages/shared/src/features/giveback/components/GivebackTrustPerks.tsx
new file mode 100644
index 00000000000..117f93ff79e
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackTrustPerks.tsx
@@ -0,0 +1,41 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import { FlexRow } from '../../../components/utilities';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../../../components/typography/Typography';
+import { VIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+
+// Reassurance row mirroring daily.dev's marketing trust microcopy (refund /
+// cancel-anytime style). Reused in the hero and the closing CTA.
+const perks = ['You never pay', '100% funded by daily.dev'];
+
+export const GivebackTrustPerks = ({
+  className,
+}: {
+  className?: string;
+}): ReactElement => (
+  <FlexRow
+    className={classNames('flex-wrap items-center gap-x-5 gap-y-2', className)}
+  >
+    {perks.map((perk) => (
+      <FlexRow key={perk} className="items-center gap-1.5">
+        <span className="bg-accent-avocado-default/20 flex size-4 shrink-0 items-center justify-center rounded-full text-accent-avocado-default">
+          <VIcon secondary size={IconSize.XXSmall} />
+        </span>
+        <Typography
+          tag={TypographyTag.Span}
+          type={TypographyType.Footnote}
+          color={TypographyColor.Secondary}
+        >
+          {perk}
+        </Typography>
+      </FlexRow>
+    ))}
+  </FlexRow>
+);
diff --git a/packages/shared/src/features/giveback/components/GivebackUpdates.tsx b/packages/shared/src/features/giveback/components/GivebackUpdates.tsx
new file mode 100644
index 00000000000..70055a14fe0
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackUpdates.tsx
@@ -0,0 +1,172 @@
+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';
+
+interface GivebackUpdate {
+  id: string;
+  tag: string;
+  date: string;
+  title: string;
+  body: string;
+}
+
+// Campaign updates, Kickstarter-style — the running log of milestones, grants
+// sent, and community moments. Swap for real posts/articles when they exist.
+const updates: GivebackUpdate[] = [
+  {
+    id: 'update-halfway',
+    tag: 'Milestone',
+    date: 'May 28, 2026',
+    title: 'We just crossed 50% funded',
+    body: 'Halfway there. Every approved action this week pushed the meter past $5,000 — the first stretch goal is now within reach. Thank you for showing up.',
+  },
+  {
+    id: 'update-grant',
+    tag: 'Donation sent',
+    date: 'May 20, 2026',
+    title: 'First grant is on its way to Code.org',
+    body: 'The community unlocked the first $2,500, and it’s already heading to Code.org to expand computer science education. Receipts will be shared in the Impact tab.',
+  },
+  {
+    id: 'update-week-one',
+    tag: 'Community',
+    date: 'May 12, 2026',
+    title: '1,000 developers joined in the first week',
+    body: 'Giveback went from idea to a thousand backers in seven days. The most picked cause so far is open-source maintenance — your priorities are shaping where the money goes.',
+  },
+  {
+    id: 'update-live',
+    tag: 'Launch',
+    date: 'May 5, 2026',
+    title: 'Giveback is live',
+    body: 'We’re redirecting our growth budget to the causes developers care about. No cost to you — just small actions that unlock real donations. Here’s to giving back together.',
+  },
+];
+
+export const GivebackUpdates = (): ReactElement => {
+  const { communityEvents, showCommunityFeed } = useGivebackContext();
+
+  return (
+    <FlexCol className="w-full gap-10">
+      <FlexCol className="gap-2">
+        <Typography
+          tag={TypographyTag.P}
+          type={TypographyType.Callout}
+          color={TypographyColor.Tertiary}
+        >
+          Milestones, donations sent, and what&apos;s next.
+        </Typography>
+
+        <FlexCol className="divide-y divide-border-subtlest-tertiary">
+          {updates.map((update) => (
+            <FlexCol
+              key={update.id}
+              className="gap-2 py-5 transition-transform duration-200 first:pt-3 hover:translate-x-1 motion-reduce:transform-none"
+            >
+              <FlexRow className="items-center gap-2">
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Caption2}
+                  bold
+                  className="rounded-8 bg-accent-cabbage-flat px-2 py-0.5 uppercase tracking-wider text-accent-cabbage-default"
+                >
+                  {update.tag}
+                </Typography>
+                <Typography
+                  tag={TypographyTag.Span}
+                  type={TypographyType.Caption1}
+                  color={TypographyColor.Tertiary}
+                >
+                  {update.date}
+                </Typography>
+              </FlexRow>
+              <Typography
+                tag={TypographyTag.H3}
+                type={TypographyType.Title3}
+                bold
+              >
+                {update.title}
+              </Typography>
+              <Typography
+                tag={TypographyTag.P}
+                type={TypographyType.Callout}
+                color={TypographyColor.Secondary}
+                className="max-w-2xl"
+              >
+                {update.body}
+              </Typography>
+            </FlexCol>
+          ))}
+        </FlexCol>
+      </FlexCol>
+
+      <FlexCol className="gap-3">
+        <FlexRow className="items-center justify-between gap-3">
+          <Typography bold tag={TypographyTag.H3} type={TypographyType.Title3}>
+            Live community activity
+          </Typography>
+          <Typography
+            type={TypographyType.Caption1}
+            color={TypographyColor.Tertiary}
+          >
+            anonymized by default
+          </Typography>
+        </FlexRow>
+
+        {showCommunityFeed && communityEvents.length ? (
+          <FlexCol className="divide-y divide-border-subtlest-tertiary">
+            {communityEvents.map((event) => (
+              <FlexRow
+                key={event.id}
+                className="items-start justify-between gap-3 py-3"
+              >
+                <FlexCol className="gap-0.5">
+                  <Typography bold type={TypographyType.Footnote}>
+                    {event.actorLabel} {event.actionLabel}
+                  </Typography>
+                  {event.causeName && (
+                    <Typography
+                      type={TypographyType.Caption1}
+                      color={TypographyColor.Tertiary}
+                    >
+                      Supporting {event.causeName}
+                    </Typography>
+                  )}
+                </FlexCol>
+                <Typography
+                  bold
+                  type={TypographyType.Footnote}
+                  className="text-status-success"
+                >
+                  {event.amount
+                    ? formatDonationAmount(event.amount, event.currency)
+                    : 'Love'}
+                </Typography>
+              </FlexRow>
+            ))}
+          </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>
+    </FlexCol>
+  );
+};
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..55774ec2c94
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/PersonalRoadmap.tsx
@@ -0,0 +1,636 @@
+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 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(false);
+  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}.`
+                  : `Summit reached — 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/mock.ts b/packages/shared/src/features/giveback/mock.ts
new file mode 100644
index 00000000000..2714e2db1ad
--- /dev/null
+++ b/packages/shared/src/features/giveback/mock.ts
@@ -0,0 +1,905 @@
+import type {
+  GivebackAction,
+  GivebackCampaign,
+  GivebackCause,
+  GivebackCommunityEvent,
+  GivebackLevel,
+  GivebackSponsor,
+  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-code-org',
+    name: 'Code.org',
+    description:
+      'Expands access to computer science education for students and teachers.',
+    url: 'https://code.org',
+    category: 'Education',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 1,
+  },
+  {
+    id: 'cause-ef',
+    name: 'Electronic Frontier Foundation',
+    description:
+      'Defends digital privacy, free expression, and user rights online.',
+    url: 'https://eff.org',
+    category: 'Digital rights',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 2,
+  },
+  {
+    id: 'cause-girls-who-code',
+    name: 'Girls Who Code',
+    description:
+      'Works to close the gender gap in tech through education and community.',
+    url: 'https://girlswhocode.com',
+    category: 'Education',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 3,
+  },
+  {
+    id: 'cause-internet-archive',
+    name: 'Internet Archive',
+    description:
+      'Keeps knowledge, web history, and digital culture accessible to everyone.',
+    url: 'https://archive.org',
+    category: 'Open web',
+    status: GivebackCauseStatus.Active,
+    sortOrder: 4,
+  },
+];
+
+export const givebackCommunityEvents: GivebackCommunityEvent[] = [
+  {
+    id: 'event-1',
+    actorLabel: 'A community member',
+    actionLabel: 'shared the Giveback launch post',
+    amount: 10,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'Code.org',
+    createdAt: '2026-06-01T10:30:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-2',
+    actorLabel: 'A creator',
+    actionLabel: 'submitted a daily.dev workflow video',
+    amount: 50,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'Girls Who Code',
+    createdAt: '2026-06-01T11:15:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-3',
+    actorLabel: 'A power user',
+    actionLabel: 'invited a developer friend',
+    amount: 15,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'Electronic Frontier Foundation',
+    createdAt: '2026-06-01T12:20:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-4',
+    actorLabel: 'A Squad member',
+    actionLabel: 'posted a developer tip',
+    amount: 15,
+    currency: GIVEBACK_CURRENCY,
+    causeName: 'Internet Archive',
+    createdAt: '2026-06-01T13:45:00.000Z',
+    isAnonymous: true,
+  },
+  {
+    id: 'event-5',
+    actorLabel: 'Someone from the community',
+    actionLabel: 'left optional app feedback for love',
+    currency: GIVEBACK_CURRENCY,
+    createdAt: '2026-06-01T15:00:00.000Z',
+    isAnonymous: true,
+  },
+];
+
+export const givebackActions: 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,
+  },
+];
+
+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',
+    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',
+    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',
+    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',
+    createdAt: '2026-05-24T08:45:00.000Z',
+  },
+  {
+    id: 'sponsor-raycast',
+    name: 'Raycast',
+    type: GivebackSponsorType.Company,
+    amount: 1000,
+    currency: GIVEBACK_CURRENCY,
+    url: 'https://raycast.com',
+    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 Code.org 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-code-org'],
+  ...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..7015e7cd2c8
--- /dev/null
+++ b/packages/shared/src/features/giveback/types.ts
@@ -0,0 +1,283 @@
+// 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',
+}
+
+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;
+  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;
+}
+
+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;
+  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;
+}
diff --git a/packages/shared/src/features/giveback/useGivebackMotion.ts b/packages/shared/src/features/giveback/useGivebackMotion.ts
new file mode 100644
index 00000000000..98ddd778fe2
--- /dev/null
+++ b/packages/shared/src/features/giveback/useGivebackMotion.ts
@@ -0,0 +1,131 @@
+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 up to `target` once `active` is true. Reduced motion or a falsy target
+// resolves immediately to the final value.
+export const useCountUp = (
+  target: number,
+  active: boolean,
+  durationMs = 1100,
+): number => {
+  const reducedMotion = usePrefersReducedMotion();
+  const [value, setValue] = useState(0);
+  const frameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!active) {
+      return undefined;
+    }
+    if (
+      reducedMotion ||
+      target <= 0 ||
+      typeof window === 'undefined' ||
+      typeof window.requestAnimationFrame !== 'function'
+    ) {
+      setValue(target);
+      return undefined;
+    }
+
+    const start = performance.now();
+    const step = (now: number) => {
+      const progress = Math.min(1, (now - start) / durationMs);
+      const eased = 1 - (1 - progress) ** 3;
+      setValue(Math.round(target * eased));
+      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..db83969eddc
--- /dev/null
+++ b/packages/shared/src/features/giveback/utils.ts
@@ -0,0 +1,47 @@
+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);
+
+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/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..5a6f56ea4eb 100644
--- a/packages/shared/tailwind.config.ts
+++ b/packages/shared/tailwind.config.ts
@@ -297,6 +297,29 @@ 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%' },
+        },
       },
       animation: {
         'scale-down-pulse':
@@ -313,6 +336,11 @@ 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',
       },
     },
     lineClamp: {
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;