feat: Google Cloud advertiser-takeover demo

packages/shared/src/components/Feed.tsx

@@ -70,6 +70,16 @@ import ReadingReminderFeedHero from './marketing/banners/ReadingReminderFeedHero
 import { useLayoutVariant } from '../hooks/layout/useLayoutVariant';
 import { useReaderModalEligibility } from './post/reader/hooks/useReaderModalEligibility';
 import { useQuestDashboard } from '../hooks/useQuestDashboard';
+import { GoogleCloudBlogCard } from '../features/googleCloudTakeover/GoogleCloudBlogCard';
+import { GoogleCloudEngagementCard } from '../features/googleCloudTakeover/GoogleCloudEngagementCard';
+import { GoogleCloudHeadAd } from '../features/googleCloudTakeover/GoogleCloudHeadAd';
+import { GoogleCloudStrip } from '../features/googleCloudTakeover/GoogleCloudStrip';
+import {
+  googleCloudPrependedCards,
+  googleCloudStripRow,
+  googleCloudTakeoverEnabled,
+} from '../features/googleCloudTakeover/config';
+import { isTesting } from '../lib/constants';
 
 const FeedErrorScreen = dynamic(
   () => import(/* webpackChunkName: "feedErrorScreen" */ './FeedErrorScreen'),
@@ -203,6 +213,21 @@ export default function Feed<T>({
   const isSquadFeed = feedName === OtherFeedPage.Squad;
   const trackedFeedFinish = useRef(false);
   const isMyFeed = feedName === SharedFeedPage.MyFeed;
+  // DEMO: render the Google Cloud takeover on the main home feeds only.
+  // Excluded from the test env so it doesn't distort existing feed specs;
+  // still live in dev and on the production preview deploy.
+  const showGoogleCloudTakeover =
+    googleCloudTakeoverEnabled &&
+    !isTesting &&
+    (feedName === SharedFeedPage.MyFeed ||
+      feedName === SharedFeedPage.Popular ||
+      // The advertiser takeover follows the user onto a tag feed: both the
+      // standard tag page (/tags/ai → OtherFeedPage.Tag) and the explore-tag
+      // feed reached via the feed tab bar (/explore/ai → ExploreTag) carry the
+      // Google Cloud engagement placements.
+      feedName === OtherFeedPage.Tag ||
+      feedName === OtherFeedPage.ExploreTag) &&
+    !isHorizontal;
   const showAcquisitionForm =
     isMyFeed &&
     (routerQuery?.[acquisitionKey] as string)?.toLocaleLowerCase() === 'true' &&
@@ -292,7 +317,10 @@ export default function Feed<T>({
       firstSlotOffset: Number(showFirstSlotCard),
       disableTopHero: isV2,
       settings: {
-        disableAds,
+        // DEMO: suppress the feed's organic ads during the takeover so the
+        // only ad is the injected Google Cloud slot (avoids extra ads that
+        // non-Plus users would otherwise see).
+        disableAds: disableAds || showGoogleCloudTakeover,
         staticAd,
         adPostLength: isSquadFeed ? 2 : undefined,
         showAcquisitionForm,
@@ -309,6 +337,29 @@ export default function Feed<T>({
   const { onMenuClick, postMenuIndex, postMenuLocation } = useFeedContextMenu();
   const useList = isListMode && numCards > 1;
   const virtualizedNumCards = useList ? 1 : numCards;
+  // Find the item index before which the strip should render so it starts on a
+  // whole grid row (no empty cells above it). The takeover forces every feed
+  // item to a single cell, so the cells rendered before item `i` are just the
+  // fixed injected cards (the prepended blog + engagement cards, plus the head
+  // ad inserted before item 0) plus `i`. Stop at the first column-0 boundary
+  // at/after the target row.
+  const googleCloudStripBeforeIndex = useMemo(() => {
+    if (!showGoogleCloudTakeover || virtualizedNumCards < 1) {
+      return -1;
+    }
+    const targetCells = googleCloudStripRow * virtualizedNumCards;
+    const injectedBeforeItems = googleCloudPrependedCards + 1; // + head ad
+    for (let i = 0; i < items.length; i += 1) {
+      const cellsBefore = injectedBeforeItems + i;
+      if (
+        cellsBefore >= targetCells &&
+        cellsBefore % virtualizedNumCards === 0
+      ) {
+        return i;
+      }
+    }
+    return -1;
+  }, [showGoogleCloudTakeover, virtualizedNumCards, items]);
 
   // Experiment: let the browser skip layout/paint for off-screen cards on long
   // vertical feeds. Horizontal carousels are short and scroll on the other axis,
@@ -689,9 +740,20 @@ export default function Feed<T>({
                 }}
               />
             )}
+            {showGoogleCloudTakeover && (
+              <>
+                <GoogleCloudBlogCard isList={shouldUseListFeedLayout} />
+                <GoogleCloudEngagementCard isList={shouldUseListFeedLayout} />
+              </>
+            )}
             {items.map((item, index) => {
               const placement = itemPlacements[index];
-              const { colSpan } = placement;
+              // DEMO: the takeover injects extra cells (blog card, ad), which
+              // shifts the grid and desyncs the feed's wide-card placements,
+              // leaving empty cells. Force single-column cards so every cell
+              // packs cleanly; the only full-row item is the GCP strip, which
+              // is positioned on a row boundary.
+              const colSpan = showGoogleCloudTakeover ? 1 : placement.colSpan;
               const isWidened = colSpan > 1;
               const wideColSpan =
                 isWidened && (colSpan === 2 || colSpan === 3 || colSpan === 4)
@@ -764,15 +826,30 @@ export default function Feed<T>({
                       : undefined,
                   }}
                 >
-                  {showPromoBanner && index === indexWhenShowingPromoBanner && (
-                    <BriefBannerFeed
-                      style={{
-                        gridColumn: !shouldUseListFeedLayout
-                          ? `span ${virtualizedNumCards}`
-                          : undefined,
-                      }}
-                    />
+                  {showPromoBanner &&
+                    !showGoogleCloudTakeover &&
+                    index === indexWhenShowingPromoBanner && (
+                      <BriefBannerFeed
+                        style={{
+                          gridColumn: !shouldUseListFeedLayout
+                            ? `span ${virtualizedNumCards}`
+                            : undefined,
+                        }}
+                      />
+                    )}
+                  {showGoogleCloudTakeover && index === 0 && (
+                    <GoogleCloudHeadAd isList={shouldUseListFeedLayout} />
                   )}
+                  {showGoogleCloudTakeover &&
+                    index === googleCloudStripBeforeIndex && (
+                      <GoogleCloudStrip
+                        style={{
+                          gridColumn: !shouldUseListFeedLayout
+                            ? `span ${virtualizedNumCards}`
+                            : undefined,
+                        }}
+                      />
+                    )}
                   {renderedItem}
                 </FeedCardContext.Provider>
               );

packages/shared/src/components/MainLayout.tsx

@@ -18,7 +18,7 @@ import { PromptElement } from './modals/Prompt';
 import { useNotificationParams } from '../hooks/useNotificationParams';
 import { useAuthContext } from '../contexts/AuthContext';
 import { SharedFeedPage } from './utilities';
-import { isTesting, onboardingUrl } from '../lib/constants';
+import { isTesting, onboardingUrl, webappUrl } from '../lib/constants';
 import { useBanner } from '../hooks/useBanner';
 import { useGrowthBookContext } from './GrowthBookProvider';
 import {
@@ -32,6 +32,8 @@ import { useFeedName } from '../hooks/feed/useFeedName';
 import { AuthTriggers } from '../lib/auth';
 import PlusMobileEntryBanner from './marketing/banners/PlusMobileEntryBanner';
 import usePlusEntry from '../hooks/usePlusEntry';
+import { GoogleCloudAnnouncementBar } from '../features/googleCloudTakeover/GoogleCloudAnnouncementBar';
+import { googleCloudTakeoverEnabled } from '../features/googleCloudTakeover/config';
 import { SearchProvider } from '../contexts/search/SearchContext';
 import { SpotlightProvider } from './spotlight/SpotlightContext';
 import { SpotlightHost } from './spotlight/SpotlightHost';
@@ -123,6 +125,13 @@ function MainLayoutComponent({
     feedName: currentFeedName,
   });
   const { plusEntryAnnouncementBar } = usePlusEntry();
+  // DEMO: Google Cloud takeover bar, rendered at the app layout level so it
+  // sits above/outside the feed's floating-card box on the home feed. Gate on
+  // `router.pathname` (the underlying page route) rather than `asPath`. When a
+  // post modal opens it only changes `asPath`/query to `/posts/...` while the
+  // home route stays `/`, so the bar stays put and doesn't cause a layout shift.
+  const showGoogleCloudBar =
+    googleCloudTakeoverEnabled && !isTesting && router?.pathname === webappUrl;
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isLaptopXL = useViewSize(ViewSize.LaptopXL);
   const { screenCenteredOnMobileLayout } = useFeedLayout();
@@ -349,6 +358,9 @@ function MainLayoutComponent({
         )}
         {sidebarOwnsHeader ? (
           <div className="flex min-h-0 flex-1 flex-col laptop:my-3 laptop:ml-1 laptop:mr-3">
+            {showGoogleCloudBar && (
+              <GoogleCloudAnnouncementBar className="mx-4 mb-3 laptop:mx-0" />
+            )}
             {showHomepageTopBanners && (
               <HomepageTopBanners className="mx-4 mb-3 laptop:mx-0" />
             )}
@@ -373,7 +385,12 @@ function MainLayoutComponent({
             </div>
           </div>
         ) : (
-          children
+          <>
+            {showGoogleCloudBar && (
+              <GoogleCloudAnnouncementBar className="mx-4 mb-3 laptop:mx-0" />
+            )}
+            {children}
+          </>
         )}
       </main>
       {!hideFeedbackWidget && !sidebarOwnsHeader && <FeedbackWidget />}

packages/shared/src/components/cards/common/FeedCardGlassActions.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import type { ActionButtonsProps } from './ActionButtons';
 import { UpvoteButtonIcon } from './UpvoteButtonIcon';
@@ -17,6 +17,7 @@ import { IconSize } from '../../Icon';
 import { Tooltip } from '../../tooltip/Tooltip';
 import { useFeedPreviewMode } from '../../../hooks/useFeedPreviewMode';
 import { useCardActions } from '../../../hooks/cards/useCardActions';
+import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
 
 // Full-bleed cover: drop side padding/bottom margin and round only the bottom
 // corners so the image meets the card edges. Height/crop are untouched.
@@ -29,16 +30,19 @@ const outerClasses = 'pointer-events-none absolute inset-x-2 bottom-2 z-1';
 // hover/pressed colors are left to each `btn-tertiary-*` class so icons keep
 // their brand tint on hover, matching the standard ActionButtons.
 const pillClasses = classNames(
-  'pointer-events-auto flex h-10 w-full items-center overflow-hidden px-1',
+  'pointer-events-auto flex h-10 w-full items-center justify-between gap-0.5 overflow-hidden px-1',
   'rounded-12 border border-border-subtlest-tertiary',
   'bg-blur-bg text-text-primary backdrop-blur-xl backdrop-saturate-150',
   '[&_.btn-quaternary]:[--button-default-color:var(--theme-text-primary)]',
   '[&_.btn]:[--button-default-color:var(--theme-text-primary)]',
 );
 
-// Every action gets an equal-width centered slot so the icons stay evenly spaced
-// across the pill regardless of upvote/comment counts widening a button.
-const slotClasses = 'flex min-w-0 flex-1 items-center justify-center';
+// Each action sizes to its content (so the count inside the upvote/comment
+// button isn't clipped) and the row spreads them with `justify-between`. An
+// equal-width `flex-1` layout forced every slot to 1/N of the pill, which is
+// narrower than a count-bearing button on tight (e.g. 5-column) cards — so the
+// buttons overflowed their slots and overlapped.
+const slotClasses = 'flex min-w-0 shrink items-center justify-center';
 
 // Dark glow behind the pill so it stays readable over busy cover images. Fixed
 // pepper tint in both themes; inline gradient since it's a one-off scrim.
@@ -59,13 +63,13 @@ export function FeedCardGlassActions({
   coverScrim = false,
 }: ActionButtonsProps & { coverScrim?: boolean }): ReactElement | null {
   const isFeedPreview = useFeedPreviewMode();
+  const { getUpvoteAnimation } = useBrandSponsorship();
   const {
     isUpvoteActive,
     isDownvoteActive,
     onToggleUpvote,
     onToggleDownvote,
     onToggleBookmark,
-    onCopyLink,
   } = useCardActions({
     post,
     onUpvoteClick,
@@ -74,6 +78,24 @@ export function FeedCardGlassActions({
     onCopyLinkClick,
   });
 
+  // Branded upvote animation (icon swaps to the advertiser logo) when the post
+  // has a sponsored tag (engagement ad).
+  const brandAnimation = useMemo(() => {
+    const animationResult = getUpvoteAnimation(post.tags || []);
+    if (
+      !animationResult.shouldAnimate ||
+      !animationResult.colors ||
+      !animationResult.config
+    ) {
+      return null;
+    }
+    return {
+      colors: animationResult.colors,
+      config: animationResult.config,
+      brandLogo: animationResult.brandLogo,
+    };
+  }, [getUpvoteAnimation, post.tags]);
+
   if (isFeedPreview) {
     return null;
   }
@@ -110,6 +132,7 @@ export function FeedCardGlassActions({
                   <UpvoteButtonIcon
                     secondary={isUpvoteActive}
                     size={IconSize.XSmall}
+                    brandAnimation={brandAnimation}
                   />
                 }
               >
@@ -193,11 +216,20 @@ export function FeedCardGlassActions({
           </div>
           <div className={slotClasses}>
             <Tooltip content="Copy link" side="bottom">
+              {/* DEMO: static copy button. Does a plain synchronous clipboard
+                  write with no interaction tracking or async state, so it can
+                  never render a loading spinner in the action pill. */}
               <QuaternaryButton
                 id="copy-post-btn"
                 size={ButtonSize.Small}
                 icon={<LinkIcon size={IconSize.XSmall} />}
-                onClick={onCopyLink}
+                onClick={() => {
+                  if (typeof navigator !== 'undefined') {
+                    navigator.clipboard?.writeText(
+                      post.commentsPermalink || post.permalink || '',
+                    );
+                  }
+                }}
                 variant={ButtonVariant.Tertiary}
                 color={ButtonColor.Cabbage}
                 className="pointer-events-auto"

packages/shared/src/components/post/focus/FocusCardActionBar.tsx

@@ -1,11 +1,12 @@
 import type { ReactElement } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import type { Post } from '../../../graphql/posts';
 import { UserVote } from '../../../graphql/posts';
 import { useViewSize, useVotePost, ViewSize } from '../../../hooks';
 import { useBookmarkPost } from '../../../hooks/useBookmarkPost';
 import { useBlockPostPanel } from '../../../hooks/post/useBlockPostPanel';
+import { useBrandSponsorship } from '../../../hooks/useBrandSponsorship';
 import { useCanAwardUser } from '../../../hooks/useCoresFeature';
 import { useLazyModal } from '../../../hooks/useLazyModal';
 import { LazyModal } from '../../modals/common/types';
@@ -66,6 +67,25 @@ export const FocusCardActionBar = ({
     sendingUser: user,
     receivingUser: post.author as LoggedUser | undefined,
   });
+  const { getUpvoteAnimation } = useBrandSponsorship();
+
+  // Branded upvote animation (icon swaps to the advertiser logo) when the post
+  // has a sponsored tag (engagement ad) — same as the feed card.
+  const brandAnimation = useMemo(() => {
+    const animationResult = getUpvoteAnimation(post.tags || []);
+    if (
+      !animationResult.shouldAnimate ||
+      !animationResult.colors ||
+      !animationResult.config
+    ) {
+      return null;
+    }
+    return {
+      colors: animationResult.colors,
+      config: animationResult.config,
+      brandLogo: animationResult.brandLogo,
+    };
+  }, [getUpvoteAnimation, post.tags]);
 
   // Track whether the bar is pinned, and at which edge. The sentinel sits just
   // above the bar: when it scrolls above the viewport top the bar is pinned at
@@ -233,8 +253,10 @@ export const FocusCardActionBar = ({
               id="upvote-post-btn"
               label="Upvote"
               color={ButtonColor.Avocado}
-              icon={<UpvoteButtonIcon />}
-              iconPressed={<UpvoteButtonIcon secondary />}
+              icon={<UpvoteButtonIcon brandAnimation={brandAnimation} />}
+              iconPressed={
+                <UpvoteButtonIcon secondary brandAnimation={brandAnimation} />
+              }
               count={isPinned ? upvotes : undefined}
               pressed={isUpvoteActive}
               onClick={onToggleUpvote}

packages/shared/src/components/tags/TagTopicPage.tsx

@@ -57,7 +57,9 @@ import EntityCardSkeleton from '../cards/entity/EntityCardSkeleton';
 import { TagPageNavbar } from './TagPageNavbar';
 import { PublicPageSignupBanner } from '../auth/PublicPageSignupBanner';
 import { largeNumberFormat } from '../../lib/numberFormat';
-import { webappUrl } from '../../lib/constants';
+import { isTesting, webappUrl } from '../../lib/constants';
+import { GoogleCloudStrip } from '../../features/googleCloudTakeover/GoogleCloudStrip';
+import { googleCloudTakeoverEnabled } from '../../features/googleCloudTakeover/config';
 import {
   Typography,
   TypographyColor,
@@ -461,6 +463,14 @@ export const TagTopicPage = ({
 
           <div className="mb-2 h-px w-full bg-border-subtlest-tertiary" />
 
+          {/* DEMO: the tag page's post feed ("All posts about …") is the last
+              section, so the in-feed takeover lands far below the fold. Surface
+              the Google Cloud placement prominently at the top of the tag page
+              too, so it's visible without scrolling. */}
+          {googleCloudTakeoverEnabled && !isTesting && (
+            <GoogleCloudStrip className="mb-10 w-full" />
+          )}
+
           {showRoadmap && initialData?.flags?.roadmap && (
             <section className="mb-10">
               <SectionHeading>Roadmaps</SectionHeading>