feat: add appchains page

apps/web/app/(base-org)/developers/appchains/page.tsx

@@ -0,0 +1,108 @@
+import { ButtonVariants } from 'apps/web/src/components/base-org/Button/types';
+import Container from 'apps/web/src/components/base-org/Container';
+import Title from 'apps/web/src/components/base-org/typography/Title';
+import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
+import { ButtonWithLinkAndEventLogging } from 'apps/web/src/components/Button/ButtonWithLinkAndEventLogging';
+import basenet from 'apps/web/src/components/Developers/Appchains/basenet.svg';
+import { InfoCards } from 'apps/web/src/components/Developers/Appchains/InfoCards';
+import { OnchainApps } from 'apps/web/src/components/Developers/Appchains/OnchainApps';
+import { Pricing } from 'apps/web/src/components/Developers/Appchains/Pricing';
+import { Testimonials } from 'apps/web/src/components/Developers/Appchains/Testimonials';
+import { CtaBanner } from 'apps/web/src/components/Developers/Shared/CtaBanner';
+import { Icon } from 'apps/web/src/components/Icon/Icon';
+import Image, { StaticImageData } from 'next/image';
+
+const CDP_APPCHAIN_URL = 'https://portal.cdp.coinbase.com/products/base-l3';
+
+export default async function Appchains() {
+  return (
+    <Container>
+      <main className="mb-32 flex min-h-screen w-full flex-col gap-40 bg-black px-2 pt-20 sm:items-center md:px-0">
+        {/* Header  */}
+        <div className="flex flex-col gap-2 pt-20 sm:items-center">
+          <div className="flex items-center gap-2 pb-6 text-[#FFDF44]">
+            <Image
+              src={basenet as StaticImageData}
+              alt="basenet"
+              width={32}
+              height={32}
+              className="h-5 w-5"
+            />
+            <Title level={TitleLevel.Title3} className="font-bold">
+              Base Appchains
+            </Title>
+          </div>
+          <Title
+            level={TitleLevel.Display3}
+            className="max-w-lg font-bold max-sm:hidden sm:text-center"
+          >
+            Deploy your chain on Base with zero code
+          </Title>
+          <Title level={TitleLevel.Title1} className="font-bold sm:hidden">
+            Deploy your chain on Base with zero code.
+          </Title>
+          <Title level={TitleLevel.Title3} className="max-w-2xl text-gray-muted sm:text-center">
+            Fast, cheaper transactions at scale—built on Base, in minutes.
+          </Title>
+
+          <div className="flex gap-4 pt-5 max-sm:flex-col">
+            <ButtonWithLinkAndEventLogging
+              href={CDP_APPCHAIN_URL}
+              target="_blank"
+              variant={ButtonVariants.Secondary}
+              buttonClassNames="flex items-center justify-between px-4 py-3 group"
+              eventName="appchains-start-building"
+            >
+              <div className="flex items-center gap-4">
+                <span>Start Building</span>
+                <div className="transition-transform duration-200 group-hover:translate-x-1">
+                  <Icon name="arrowRight" width={16} height={16} color="black" />
+                </div>
+              </div>
+            </ButtonWithLinkAndEventLogging>
+
+            <ButtonWithLinkAndEventLogging
+              href=""
+              target="_blank"
+              variant={ButtonVariants.SecondaryOutline}
+              buttonClassNames="flex items-center justify-between px-4 py-3 group"
+              eventName="appchains-docs"
+            >
+              <div className="flex items-center gap-4">
+                <span>Documentation</span>
+                <div className="transition-transform duration-200 group-hover:translate-x-1">
+                  <Icon name="arrowRight" width={16} height={16} color="white" />
+                </div>
+              </div>
+            </ButtonWithLinkAndEventLogging>
+          </div>
+        </div>
+
+        <InfoCards />
+        <OnchainApps />
+        <Pricing />
+        <Testimonials />
+        <CtaBanner
+          title="Your own blockspace starting at $1/month"
+          description="Unlock fast and cheap transactions at scale, with dedicated blockspace and seamless integration with Base tools."
+          cta={
+            <ButtonWithLinkAndEventLogging
+              href={CDP_APPCHAIN_URL}
+              target="_blank"
+              variant={ButtonVariants.Secondary}
+              buttonClassNames="flex items-center justify-between px-4 py-3 group"
+              eventName="appchains-get-started"
+            >
+              <div className="flex items-center gap-4">
+                <span>Get started</span>
+                <div className="transition-transform duration-200 group-hover:translate-x-1">
+                  <Icon name="arrowRight" width={16} height={16} color="black" />
+                </div>
+              </div>
+            </ButtonWithLinkAndEventLogging>
+          }
+        />
+      </main>
+    </Container>
+  );
+}

apps/web/src/components/Developers/Appchains/InfoCards.tsx

@@ -0,0 +1,115 @@
+import { Card, CardProps } from 'apps/web/src/components/Developers/Shared/Card';
+import lightningBolt from 'apps/web/src/components/Developers/Appchains/lighteningBolt.svg';
+import taxesReceipt from 'apps/web/src/components/Developers/Appchains/taxesReceipt.svg';
+import perpetualSwap from 'apps/web/src/components/Developers/Appchains/perpetualSwap.svg';
+import faces from 'apps/web/src/components/Developers/Appchains/faces.svg';
+import complianceProduct from 'apps/web/src/components/Developers/Appchains/complianceProduct.svg';
+import globe from 'apps/web/src/components/Developers/Appchains/globe.svg';
+import Image, { StaticImageData } from 'next/image';
+
+const INFO_CARDS: CardProps[] = [
+  {
+    icon: (
+      <Image
+        src={lightningBolt as StaticImageData}
+        alt="lightningBolt"
+        width={32}
+        height={32}
+        className="h-8 w-8"
+      />
+    ),
+    title: 'High-speed, low-cost throughput ',
+    description:
+      'Faster transactions with one-second block times, roundtrips in less than 10 seconds, all for a fraction of a cent.',
+  },
+
+  {
+    icon: (
+      <Image
+        src={taxesReceipt as StaticImageData}
+        alt="taxesReceipt"
+        width={32}
+        height={32}
+        className="h-8 w-8"
+      />
+    ),
+    title: 'Worldwide reach',
+    description:
+      "Access to the Base ecosystem and Coinbase retail users through direct send and receive with Coinbase's custodial platform.",
+  },
+  {
+    icon: (
+      <Image
+        src={faces as StaticImageData}
+        alt="faces"
+        width={32}
+        height={32}
+        className="h-8 w-8"
+      />
+    ),
+    title: 'Builder-friendly fees',
+    description:
+      'Base charges a competitive, fixed monthly service fee. No complicated vendor commitments, no negotiating for best price (already is), and no sequencer fees.',
+  },
+  {
+    icon: (
+      <Image
+        src={complianceProduct as StaticImageData}
+        alt="complianceProduct"
+        width={32}
+        height={32}
+        className="h-8 w-8"
+      />
+    ),
+    title: 'Enterprise-grade infra',
+    description:
+      'Fully-managed sequencers and nodes, maintenance and upgrades, and block explorer. Plus real-time monitoring and alerts for any disruptions in chain performance.',
+  },
+
+  {
+    icon: (
+      <Image
+        src={globe as StaticImageData}
+        alt="globe"
+        width={32}
+        height={32}
+        className="h-8 w-8"
+      />
+    ),
+    title: 'Base developer tools',
+    description:
+      'Seamless integration with Smart Wallet, Paymaster, Bundler, OnchainKit, and AgentKit — right out of the box — to help you build and grow your app.',
+  },
+  {
+    icon: (
+      <Image
+        src={perpetualSwap as StaticImageData}
+        alt="perpetualSwap"
+        width={32}
+        height={32}
+        className="h-8 w-8"
+      />
+    ),
+    title: 'Open-source',
+    description:
+      'Built on the OP Enclave framework for fast withdrawals and a seamless integration between your appchain and Base.',
+  },
+];
+
+export function InfoCards() {
+  return (
+    <div className="grid w-full grid-cols-1 gap-20 md:grid-cols-3">
+      {INFO_CARDS.map((card) => {
+        return (
+          <Card
+            key={card.title}
+            icon={card.icon}
+            title={card.title}
+            description={card.description}
+            iconClassName="text-[#C9A4FA]"
+          />
+        );
+      })}
+    </div>
+  );
+}

apps/web/src/components/Developers/Appchains/OnchainApps.tsx

@@ -0,0 +1,34 @@
+import Title from 'apps/web/src/components/base-org/typography/Title';
+import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
+import proof from 'apps/web/src/components/Developers/Appchains/proofworks.svg';
+import superchamps from 'apps/web/src/components/Developers/Appchains/superchamps.svg';
+import blocklords from 'apps/web/src/components/Developers/Appchains/blocklords.svg';
+import illuvium from 'apps/web/src/components/Developers/Appchains/illuvium.svg';
+import Image, { StaticImageData } from 'next/image';
+import { Marquee } from 'apps/web/src/components/Developers/Shared/Marquee';
+
+export function OnchainApps() {
+  return (
+    <div className="flex w-full flex-col gap-10">
+      <Title level={TitleLevel.Title1}>
+        Ideal for high-performance onchain apps, like games and AI applications.
+      </Title>
+      <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+        <Marquee className="[--duration:20s]" pauseOnHover>
+          <div className="flex p-4 px-8">
+            <Image src={proof as StaticImageData} alt="proof" />
+          </div>
+          <div className="flex p-4 px-8">
+            <Image src={superchamps as StaticImageData} alt="superchamps" />
+          </div>
+          <div className="flex p-4 px-8">
+            <Image src={blocklords as StaticImageData} alt="blocklords" />
+          </div>
+          <div className="flex p-4 px-8">
+            <Image src={illuvium as StaticImageData} alt="illuvium" />
+          </div>
+        </Marquee>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/Developers/Appchains/Pricing.tsx

@@ -0,0 +1,28 @@
+import { TextVariant } from 'apps/web/src/components/base-org/typography/Text/types';
+import Title from 'apps/web/src/components/base-org/typography/Title';
+import Text from 'apps/web/src/components/base-org/typography/Text';
+import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
+
+export function Pricing() {
+  return (
+    <div className="flex w-full justify-between gap-10 max-sm:flex-col sm:items-center">
+      <div className="flex max-w-2xl shrink flex-col gap-6">
+        <Title level={TitleLevel.Display3} className="font-bold sm:max-w-md">
+          Best-in-class pricing, built for developers.
+        </Title>
+      </div>
+
+      <div className="flex w-[355px] flex-col gap-4 rounded-lg border border-[#8A919E]/20 bg-dark-palette-backgroundAlternate p-6">
+        <Title level={TitleLevel.Title3}>Appchain plan</Title>
+        <div className="flex  w-full items-center justify-between gap-4 pt-2">
+          <Title level={TitleLevel.Headline}>Testnet</Title>
+          <Text variant={TextVariant.Body}>$1 per month</Text>
+        </div>
+        <div className="flex  w-full items-center justify-between gap-4">
+          <Title level={TitleLevel.Headline}>Mainnet</Title>
+          <Text variant={TextVariant.Body}>$3k per month</Text>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/Developers/Appchains/Testimonials.tsx

@@ -0,0 +1,36 @@
+import { Marquee } from 'apps/web/src/components/Developers/Shared/Marquee';
+import { TweetCard } from 'apps/web/src/components/Developers/Shared/TweetCard';
+import tweet from 'apps/web/src/components/Developers/Appchains/tweet.png';
+import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
+import Title from 'apps/web/src/components/base-org/typography/Title';
+
+export function Testimonials() {
+  return (
+    <div className="flex w-full flex-col gap-10">
+      <Title level={TitleLevel.Title1}>Some thoughts from our customers.</Title>
+      <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+        <Marquee className="[--duration:20s]" pauseOnHover>
+          <TweetCard
+            image={tweet}
+            name="sweetman.eth"
+            username="@sweetman.eth"
+            content="Just built a musician-friendly AI Agent using @base and @CoinbaseDev AgentKit! Watch how you can go from zero to shipping in less than 10 minutes—and maybe snag part of the $30k grants!"
+          />
+          <TweetCard
+            image={tweet}
+            name="sweetman.eth"
+            username="@sweetman.eth"
+            content="Just built a musician-friendly AI Agent using @base and @CoinbaseDev
+AgentKit! Watch how you can go from zero to shipping in less than 10 minutes—and maybe snag part of the $30k grants!"
+          />
+          <TweetCard
+            image={tweet}
+            name="sweetman.eth"
+            username="@sweetman.eth"
+            content="Just built a musician-friendly AI Agent using @base and @CoinbaseDev AgentKit! Watch how you can go from zero to shipping in less than 10 minutes—and maybe snag part of the $30k grants!"
+          />
+        </Marquee>
+      </div>
+    </div>
+  );
+}