Feat/builders

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

@@ -28,7 +28,7 @@ export default async function Home() {
               <Container>
                 <Title level={TitleLevel.Title1}>Base is for everyone.</Title>
                 <div className="mt-4 flex gap-4">
-                  <Link href="/build?utm_source=dotorg&medium=hero">
+                  <Link href="/builders?utm_source=dotorg&medium=hero">
                     <Button variant={ButtonVariants.Secondary} iconName="baseOrgDiagonalUpArrow">
                       Start building
                     </Button>

apps/web/app/(base-org)/builders/onchainkit/page.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import Button from 'apps/web/src/components/base-org/Button';
+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 { InfoCards } from 'apps/web/src/components/Builders/Onchainkit/InfoCards';
+import { Templates } from 'apps/web/src/components/Builders/Onchainkit/Templates';
+import { Testmonials } from 'apps/web/src/components/Builders/Onchainkit/Testimonials';
+import Image, { StaticImageData } from 'next/image';
+import onchainkit from 'apps/web/src/components/Builders/Onchainkit/onchainkit.svg';
+import { ButtonWithLinkAndEventLogging } from 'apps/web/src/components/Button/ButtonWithLinkAndEventLogging';
+import { useCallback } from 'react';
+import { LiveDemo } from 'apps/web/src/components/Builders/Shared/LiveDemo';
+import { BottomCta } from 'apps/web/src/components/Builders/Shared/BottomCta';
+
+const ONCHAINKIT_DOCS_LINK = 'https://onchainkit.xyz/';
+const demoComponents = ['Transact', 'Pay', 'Earn', 'Buy', 'Mint', 'Fund', 'Wallet'];
+
+export default function OnchainKit() {
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText('npm create onchain');
+  }, []);
+
+  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-[#C9A4FA]">
+            <Image
+              src={onchainkit as StaticImageData}
+              alt="onchainkit"
+              width={32}
+              height={32}
+              className="h-5 w-5"
+            />
+            <Title level={TitleLevel.Title3} className="font-bold">
+              OnchainKit
+            </Title>
+          </div>
+          <Title level={TitleLevel.Display3} className="font-bold max-sm:hidden">
+            Full-stack onchain components
+          </Title>
+          <Title level={TitleLevel.Title1} className="font-bold sm:hidden">
+            Full-stack onchain components
+          </Title>
+          <Title level={TitleLevel.Title3} className="text-gray-muted">
+            All-you-need to build an onchain app in 10 minutes.
+          </Title>
+
+          <div className="flex gap-4 pt-5 max-sm:max-w-[240px] max-sm:flex-col">
+            <Button
+              variant={ButtonVariants.Secondary}
+              iconName="copy"
+              onClick={handleCopy}
+              className="rounded-xl"
+            >
+              npm create onchain
+            </Button>
+            <ButtonWithLinkAndEventLogging
+              href={ONCHAINKIT_DOCS_LINK}
+              iconName="arrowRight"
+              target="_blank"
+              variant={ButtonVariants.Outlined}
+              eventName="onchainkit-docs"
+              buttonClassNames="rounded-xl max-sm:w-full"
+            >
+              Documentation
+            </ButtonWithLinkAndEventLogging>
+          </div>
+        </div>
+
+        <LiveDemo components={demoComponents} />
+        <InfoCards />
+        <Templates />
+        <Testmonials />
+        <BottomCta />
+      </main>
+    </Container>
+  );
+}

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

@@ -0,0 +1,39 @@
+import type { Metadata } from 'next';
+import AnalyticsProvider from 'apps/web/contexts/Analytics';
+import Container from 'apps/web/src/components/base-org/Container';
+import { Hero } from 'apps/web/src/components/Builders/Landing/Hero';
+import { UseCases } from 'apps/web/src/components/Builders/Landing/UseCases';
+import { Apps } from 'apps/web/src/components/Builders/Landing/Apps';
+import { Testimonials } from 'apps/web/src/components/Builders/Landing/Testimonials';
+import { Tools } from 'apps/web/src/components/Builders/Landing/Tools';
+import { WhyBase } from 'apps/web/src/components/Builders/Landing/WhyBase';
+import { LiveDemo } from 'apps/web/src/components/Builders/Landing/LiveDemo';
+import { BottomCta } from 'apps/web/src/components/Builders/Shared/BottomCta';
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://base.org'),
+  title: `Base | Developers`,
+  openGraph: {
+    title: `Base | Developers`,
+    url: `/developers`,
+  },
+};
+
+export default function Developers() {
+  return (
+    <AnalyticsProvider context="developers">
+      <main className="mb-32 flex min-h-screen w-full flex-col items-center bg-black pt-20">
+        <Hero />
+        <Container className="!px-[1.5rem] lg:!px-[2rem]">
+          <UseCases />
+          <Tools />
+          <Apps />
+          <Testimonials />
+          <WhyBase />
+          <LiveDemo />
+          <BottomCta />
+        </Container>
+      </main>
+    </AnalyticsProvider>
+  );
+}

apps/web/app/(base-org)/builders/stories/aerodrome/page.tsx

@@ -0,0 +1,57 @@
+import { StaticImageData } from 'next/image';
+import Container from 'apps/web/src/components/base-org/Container';
+import { Hero } from 'apps/web/src/components/Builders/Stories/StoryPages/Hero';
+import { QABlock } from 'apps/web/src/components/Builders/Stories/StoryPages/QABlock';
+import { Blockquote } from 'apps/web/src/components/Builders/Stories/StoryPages/Blockquote';
+import { ReadMore } from 'apps/web/src/components/Builders/Stories/StoryPages/ReadMore';
+import { BottomCta } from 'apps/web/src/components/Builders/Stories/BottomCta';
+import aerodrome from 'apps/web/src/components/Builders/Stories/StoryCards/assets/aerodrome.svg';
+
+export default function Aerodrome() {
+  return (
+    <Container className="!px-[1.5rem] lg:!px-[2rem]">
+      <main className="mb-32 flex min-h-screen w-full flex-col items-center bg-black pt-20">
+        <Hero
+          title="Alexander of Aerodrome Finance"
+          description="Serving as the essential trading and liquidity marketplace on Base, driving the future of decentralized exchanges."
+          href="https://www.aerodrome.finance/"
+          region="United States of America"
+          project="Aerodrome Finance"
+          onBaseSince="August 2023"
+          image={aerodrome as StaticImageData}
+        />
+        <QABlock
+          question="Tell us a little about the app you are building on Base?"
+          answer="Aerodrome is a decentralized exchange, designed to serve as the essential trading and liquidity marketplace on Base."
+        />
+        <Blockquote
+          quote="Base has proven itself as a dominant L2, truly capable of bringing the world onchain. Still day one."
+        />
+        <QABlock
+          question="What's the best part of building on Base?"
+          answer="The active community, supportive ecosystem, and collective ambition."
+        />
+        <QABlock
+          question="What do you want to tell builders who are thinking about Base? Why would you convince them to join Base?"
+          answer="Base has proven itself as a dominant L2, truly capable of bringing the world onchain. Still day one."
+        />
+        <QABlock
+          question="What challenges have you experienced?"
+          answer="Inspiring the broader crypto community to think bigger and longer term."
+        />
+        <QABlock
+          question="What advice do you have to other builders?"
+          answer="Lean in, keep building."
+        />
+        <QABlock question="What's one word you think of when you think of Base?" answer="LFB!" />
+        <ReadMore
+          previousLabel="Dhawal of HeyElsa AI"
+          previousHref="/builders/stories/hey-elsa"
+          nextLabel="Back to Stories"
+          nextHref="/builders/stories"
+        />
+        <BottomCta />
+      </main>
+    </Container>
+  );
+}

apps/web/app/(base-org)/builders/stories/blocklords/page.tsx

@@ -0,0 +1,68 @@
+import { StaticImageData } from 'next/image';
+import Container from 'apps/web/src/components/base-org/Container';
+import { Hero } from 'apps/web/src/components/Builders/Stories/StoryPages/Hero';
+import { QABlock } from 'apps/web/src/components/Builders/Stories/StoryPages/QABlock';
+import { Blockquote } from 'apps/web/src/components/Builders/Stories/StoryPages/Blockquote';
+import { ReadMore } from 'apps/web/src/components/Builders/Stories/StoryPages/ReadMore';
+import { BottomCta } from 'apps/web/src/components/Builders/Stories/BottomCta';
+import blocklords from 'apps/web/src/components/Builders/Stories/StoryCards/assets/blocklords.svg';
+
+export default function Blocklords() {
+  return (
+    <Container className="!px-[1.5rem] lg:!px-[2rem]">
+      <main className="mb-32 flex min-h-screen w-full flex-col items-center bg-black pt-20">
+        <Hero
+          title="David Johansson of BLOCKLORDS"
+          description="Building a medieval grand strategy game with a player-driven onchain economy."
+          href="https://www.blocklords.com/"
+          region="Stockholm, Sweden"
+          project="BLOCKLORDS"
+          onBaseSince="January 2024"
+          image={blocklords as StaticImageData}
+        />
+        <QABlock
+          question="Tell us a little about the app you are building on Base?"
+          answer="BLOCKLORDS is a medieval grand strategy game with a player-driven onchain economy, where you can start as a farmer, rise to a warrior, or even rule as a king. It's all about choice, strategy, and progression. The game is live on the Epic Games Store, making it accessible to a broad audience.
+
+            We also launched BLOCKLORDS Dynasty, a mobile-first companion game built specifically for Base with onchain logic. Last year, Dynasty brought 1.8 million unique wallets to Base, showing that players are ready for deeper blockchain integrations—when done right.
+          "
+        />
+        <Blockquote
+          quote="Take risks. Push the limits when designing smart contracts—don't just follow what's been done before. The best innovations come from experimenting."
+        />
+        <QABlock
+          question="What's the best part of building on Base?"
+          answer="Low fees, strong liquidity, and a growing user base that actually engages with what you're doing. It's a solid base to build on, no pun intended.
+
+            What really stands out, though, is the community and support. The Base team has been super helpful, and events like Base Camp were a great chance for builders to meet up, swap ideas, and just get things done. It's that kind of hands-on support that makes a big difference.
+          "
+        />
+        <QABlock
+          question="What do you want to tell builders who are thinking about Base? Why would you convince them to join Base?"
+          answer="We've been building onchain since 2018, deploying hundreds of smart contracts across almost every major chain. Base stands out—not just for the tech, but for how they support builders at scale. They've gone above and beyond to help us onboard users, build new solutions, and tap into real liquidity."
+        />
+        <QABlock
+          question="What challenges have you experienced?"
+          answer="Even with Base's low gas fees, we really pushed the limits last year with Dynasty hitting 1.8 million wallets and over 80 million onchain transactions. Since we wanted to sponsor most transactions for early users (shoutout to Paymaster), even those low fees became unsustainable at scale, which added friction for new players.
+
+            The solution? More on this coming soon.
+          "
+        />
+        <QABlock
+          question="What advice do you have to other builders?"
+          answer="Take risks. Push the limits when designing smart contracts—don't just follow what's been done before. The best innovations come from experimenting.
+
+            Don't raise funds too early. Too much money too soon can be just as bad as not enough. Make sure you have product-market fit before locking yourself into investor expectations.
+          "
+        />
+        <ReadMore
+          previousLabel="Back to Stories"
+          previousHref="/builders/stories"
+          nextLabel="Tara of Cat Town"
+          nextHref="/builders/stories/cat-town"
+        />
+        <BottomCta />
+      </main>
+    </Container>
+  );
+}

apps/web/app/(base-org)/builders/stories/byte/page.tsx

@@ -0,0 +1,52 @@
+import { StaticImageData } from 'next/image';
+import Container from 'apps/web/src/components/base-org/Container';
+import { Hero } from 'apps/web/src/components/Builders/Stories/StoryPages/Hero';
+import { QABlock } from 'apps/web/src/components/Builders/Stories/StoryPages/QABlock';
+import { Blockquote } from 'apps/web/src/components/Builders/Stories/StoryPages/Blockquote';
+import { ReadMore } from 'apps/web/src/components/Builders/Stories/StoryPages/ReadMore';
+import { BottomCta } from 'apps/web/src/components/Builders/Stories/BottomCta';
+import byte from 'apps/web/src/components/Builders/Stories/StoryCards/assets/byteAi.svg';
+
+export default function Byte() {
+  return (
+    <Container className="!px-[1.5rem] lg:!px-[2rem]">
+      <main className="mb-32 flex min-h-screen w-full flex-col items-center bg-black pt-20">
+        <Hero
+          title="AchillesHodl of Byte"
+          description="Pioneering the future of food ordering with AI and crypto, transforming human language into the ultimate user interface."
+          href="https://www.tryabyte.xyz/"
+          region="United States of America"
+          project="Byte"
+          onBaseSince="November 2024"
+          image={byte as StaticImageData}
+        />
+        <QABlock
+          question="Tell us a little about the app you are building on Base?"
+          answer="Byte is the world's first autonomous AI agent that can deliver food right to your doorstep. Byte provides the world's best food ordering experience through the power of AI and crypto. We believe that human language is the new UX. Any online surface where there are users interacting in human language, they can connect to Byte to order the perfect meal with a 0-click, agentic checkout experience. The future of food ordering is based."
+        />
+        <Blockquote
+          quote="Be active, engage in the community, and build something. You never know where the opportunities will come from."
+        />
+        <QABlock
+          question="What's the best part of building on Base?"
+          answer="The best part about building on Base is the great developer ecosystem. There are so many great developer tools built by Coinbase Developer Platform that make it easy to get started building and get support in your builder journey. There are also plenty of other great products being built on Base which we can benefit from and easily connect with. I think the EVM compatibility, fast transactions, and low transaction costs attract the developer community who then build amazing products that we can use."
+        />
+        <QABlock
+          question="What do you want to tell builders who are thinking about Base? Why would you convince them to join Base?"
+          answer="I would join Base because of the innovation happening. Every day I learn about another great developer product that I want to dive deep on and learn more about how I can use it to help build my product. The community is also super inviting and helpful. I get approached a lot by builders who see what I'm working on and help point me to tools and solutions that can help me. This is especially helpful because when there are so many great products, it is much easier to speak with developers who have built them or worked with them so I can ramp up quickly and start building."
+        />
+        <QABlock
+          question="What challenges have you experienced?"
+          answer="Finding wallet solutions for the consumer AI space has been a challenge for me. There are many solutions I see out there but it is hard to find the right one that can be scaled to user applications. I've now found some great ones that I'm starting to build with, thanks to some helpful advice from other builders on base. I think that the AI agent wallet space is so early that it can be hard to find the right solutions that meet this use case. I see so much being built on base though that I don't think this will be a challenge for builders in a few months from now."
+        />
+        <ReadMore
+          previousLabel="Tara of Cat Town"
+          previousHref="/builders/stories/cat-town"
+          nextLabel="Merlin of Morpho"
+          nextHref="/builders/stories/morpho"
+        />
+        <BottomCta />
+      </main>
+    </Container>
+  );
+}