Feat/temp developers

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/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/Hero';
+import { UseCases } from 'apps/web/src/components/Builders/UseCases';
+import { Customers } from 'apps/web/src/components/Builders/Customers';
+import { Testimonials } from 'apps/web/src/components/Builders/Testimonials';
+import { Tools } from 'apps/web/src/components/Builders/Tools';
+import { WhyBase } from 'apps/web/src/components/Builders/WhyBase';
+import { LiveDemo } from 'apps/web/src/components/Builders/LiveDemo';
+import { BottomCta } from 'apps/web/src/components/Builders/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">
+      <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 />
+          <UseCases />
+          <Customers />
+          <Testimonials />
+          <Tools />
+          <WhyBase />
+          <LiveDemo />
+          <BottomCta />
+        </main>
+      </Container>
+    </AnalyticsProvider>
+  );
+}

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

@@ -0,0 +1,70 @@
+import Container from 'apps/web/src/components/base-org/Container';
+import mtsumi from 'apps/web/src/components/Builders/Stories/StoryCards/assets/mtsumi.webp';
+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';
+
+export default function Aly() {
+  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
+          date="January 11, 2025"
+          title="Aly Mtsumi of Element Pay"
+          description="Enabling users to buy stablecoins through m-pesa and spend them."
+          region="Nairobi, Kenya"
+          project="Element Pay"
+          onBaseSince="December 2023"
+          image={mtsumi}
+        />
+        <QABlock
+          question="Tell us a little about the app you are building on Base?"
+          answer="At ElementPay, our goal is simple, bring users on-chain for cheap, fast transactions and
+            real freedom with their money. No more waiting on banks or paying high transaction fees.
+            By leveraging stablecoins, we're unlocking participation in a truly global economy
+            where anyone can send, receive, and manage funds with ease. We're trying to make
+            crypto accessible and empowering everyone to experience the future of finance."
+        />
+        <Blockquote
+          quote="It feels like we're building the future together."
+          color="text-dark-green-60"
+        />
+        <QABlock
+          question="What's the best part of building on Base?"
+          answer="The best part of building on Base is how seamless and developer-friendly the ecosystem is.
+          Base's support for builders and its vision of making on-chain accessible to everyone aligns perfectly
+          with what we're trying to achieve with Element. It feels like we're building the future together."
+        />
+        <QABlock
+          question="What do you want to tell builders who are thinking about Base? Why would you convince them to join Base?"
+          answer="Go for it! Base offers an incredible combination of low fees, scalability, and a strong, supportive community.
+          It's the perfect foundation to focus on innovation without worrying about the limitations or costs of traditional
+          chains. Plus, being part of Base means contributing to a vision of bringing more people on-chain and making decentralized
+          finance truly accessible. If you're building for the future, Base is where you want to be."
+        />
+        <QABlock
+          question="What challenges have you experienced?"
+          answer="One of the biggest challenges we've faced is navigating the legal and regulatory landscape, especially when it
+          comes to scaling. Crypto is still new territory in Kenya, and figuring out how to stay compliant while offering services
+          like onramps and offramps hasn't been easy. It takes a lot of research, planning, and sometimes even creative problem-solving
+          to ensure we can expand while staying within the rules."
+        />
+        <QABlock
+          question="What advice do you have to other builders?"
+          answer=" Think big! Base is a blank canvas for so much more. Whether it's using blockchain for carbon trading like I've
+          considered with my iSafari app, letting users sell their photos as NFTs, or building something transformative like a platform
+          to securely store and access medical records globally, the potential is limitless."
+        />
+        <ReadMore
+          previousLabel="Back to Stories"
+          previousHref="/builders/stories"
+          nextLabel="Ngan Nguyen of Onchain Buster"
+          nextHref="/builders/stories/ngan"
+        />
+        <BottomCta />
+      </main>
+    </Container>
+  );
+}

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

@@ -0,0 +1,26 @@
+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/Stories/Hero';
+import { StoryCards } from 'apps/web/src/components/Builders/Stories/StoryCards';
+// import Image from 'next/image';
+// import baseGlobe from 'apps/web/src/components/Builders/Stories/Hero/assets/base_globe.webp';
+
+export default function Stories() {
+  return (
+    <AnalyticsProvider context="stories">
+      {/* <div className="relative pt-20">
+        <Image
+          src={baseGlobe}
+          alt="Base Globe"
+          className="absolute right-0 top-0 hidden md:block"
+        /> */}
+      <Container className="!px-[1.5rem] lg:!px-[2rem]">
+        <main className="mb-32 flex min-h-screen w-full flex-col items-center bg-black">
+          <Hero />
+          <StoryCards />
+        </main>
+      </Container>
+      {/* </div> */}
+    </AnalyticsProvider>
+  );
+}

apps/web/app/CryptoProviders.dynamic.tsx

@@ -2,10 +2,20 @@
 
 import { useEffect, useState } from 'react';
 import { useErrors } from 'apps/web/contexts/Errors';
+import type { CryptoProvidersProps } from './CryptoProviders';
 
-export function DynamicCryptoProviders({ children }: { children: React.ReactNode }) {
-  const [CryptoProvidersDynamic, setCryptoProvidersDynamic] =
-    useState<React.ComponentType<{ children: React.ReactNode }>>();
+export function DynamicCryptoProviders({
+  children,
+  mode = 'light',
+  theme = 'default',
+}: CryptoProvidersProps) {
+  const [CryptoProvidersDynamic, setCryptoProvidersDynamic] = useState<
+    React.ComponentType<{
+      children: React.ReactNode;
+      mode?: 'light' | 'dark';
+      theme?: 'default' | 'base' | 'cyberpunk' | 'hacker';
+    }>
+  >();
   const { logError } = useErrors();
 
   useEffect(() => {
@@ -18,5 +28,9 @@ export function DynamicCryptoProviders({ children }: { children: React.ReactNode
 
   if (!CryptoProvidersDynamic) return null;
 
-  return <CryptoProvidersDynamic>{children}</CryptoProvidersDynamic>;
+  return (
+    <CryptoProvidersDynamic mode={mode} theme={theme}>
+      {children}
+    </CryptoProvidersDynamic>
+  );
 }

apps/web/app/CryptoProviders.tsx

@@ -2,10 +2,6 @@
 
 import { AppConfig, OnchainKitProvider } from '@coinbase/onchainkit';
 import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { isDevelopment } from 'apps/web/src/constants';
-import { createConfig, http, WagmiProvider } from 'wagmi';
-import { base, baseSepolia, mainnet } from 'wagmi/chains';
 import {
   coinbaseWallet,
   metaMaskWallet,
@@ -14,6 +10,11 @@ import {
   uniswapWallet,
   walletConnectWallet,
 } from '@rainbow-me/rainbowkit/wallets';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { createConfig, http, WagmiProvider } from 'wagmi';
+import { base, baseSepolia, mainnet } from 'wagmi/chains';
+import { isDevelopment } from 'apps/web/src/constants';
 
 const connectors = connectorsForWallets(
   [
@@ -51,17 +52,27 @@ const config = createConfig({
 });
 const queryClient = new QueryClient();
 
-type CryptoProvidersProps = {
+export type CryptoProvidersProps = {
   children: React.ReactNode;
+  mode?: 'light' | 'dark';
+  theme?: 'default' | 'base' | 'cyberpunk' | 'hacker';
 };
 
-const onchainKitConfig: AppConfig = {
-  appearance: {
-    mode: 'light',
-  },
-};
+export default function CryptoProviders({
+  children,
+  mode = 'light',
+  theme = 'default',
+}: CryptoProvidersProps) {
+  const onchainKitConfig: AppConfig = useMemo(
+    () => ({
+      appearance: {
+        mode,
+        theme,
+      },
+    }),
+    [mode, theme],
+  );
 
-export default function CryptoProviders({ children }: CryptoProvidersProps) {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>

apps/web/next.config.js

@@ -313,6 +313,11 @@ module.exports = extendBaseConfig(
           destination: '/names',
           permanent: true,
         },
+        {
+          source: '/build',
+          destination: '/resources',
+          permanent: true,
+        },
       ];
     },
   },

apps/web/package.json

@@ -24,6 +24,7 @@
     "@heroicons/react": "^2.1.3",
     "@lottiefiles/dotlottie-react": "^0.8.10",
     "@monogrid/gainmap-js": "^3.0.6",
+    "@number-flow/react": "^0.5.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-popover": "^1.1.1",
@@ -73,6 +74,8 @@
     "recharts": "^2.12.7",
     "satori": "^0.10.14",
     "sharp": "^0.33.4",
+    "shiki": "^2.1.0",
+    "tailwindcss-animate": "^1.0.7",
     "three": "^0.168.0",
     "three-stdlib": "^2.33.0",
     "twemoji": "^14.0.2",

apps/web/src/components/Builders/BottomCta/index.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { ButtonVariants } from 'apps/web/src/components/base-org/Button/types';
+import { ButtonWithLinkAndEventLogging } from 'apps/web/src/components/Button/ButtonWithLinkAndEventLogging';
+import { useCallback, useState } from 'react';
+import { Icon } from 'apps/web/src/components/Icon/Icon';
+import Title from 'apps/web/src/components/base-org/typography/Title';
+import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
+
+export function BottomCta() {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText('npm create onchain');
+    setHasCopied(true);
+    setTimeout(() => setHasCopied(false), 2000); // Reset after 2 seconds
+  }, []);
+
+  return (
+    <section className="my-24 w-full bg-black">
+      <div className="flex flex-col items-center rounded-2xl bg-dark-palette-backgroundAlternate py-16">
+        <div className="px-9 text-center md:hidden">
+          <Title level={TitleLevel.Title3} as="h2">
+            Together, we&apos;re updating the Internet with a new dev platform.
+          </Title>
+          <Title level={TitleLevel.Headline} as="p" className="mt-2 font-normal">
+            Start building with a starter template or see documentation.
+          </Title>
+        </div>
+        <div className="hidden md:block">
+          <Title level={TitleLevel.Title1} as="h2">
+            Together, we&apos;re updating the Internet with a new dev platform.
+          </Title>
+          <Title level={TitleLevel.Title4} as="p" className="mt-2">
+            Start building with a starter template or see documentation.
+          </Title>
+        </div>
+        <div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
+          <button
+            type="button"
+            className="inline-flex items-center gap-2.5 rounded-xl bg-white px-4 py-3 font-medium text-dark-palette-primaryForeground transition-colors hover:bg-white/90"
+            onClick={handleCopy}
+          >
+            npm create onchain
+            {hasCopied ? (
+              <div className="text-green-60">
+                <Icon name="checkmark" width="20" height="20" color="currentColor" />
+              </div>
+            ) : (
+              <Icon name="copy" width="20" height="20" color="currentColor" />
+            )}
+          </button>
+          <ButtonWithLinkAndEventLogging
+            variant={ButtonVariants.SecondaryOutline}
+            linkClassNames="text-base font-medium text-white block"
+            buttonClassNames="flex w-full items-center justify-between px-4 py-3 group !rounded-xl"
+            target="_blank"
+            href="/stories"
+            eventName="bottom-cta-documentation"
+          >
+            <div className="flex w-40 items-center justify-between">
+              <span>Documentation</span>
+              <div className="transition-transform duration-200 group-hover:translate-x-1">
+                <Icon name="arrowRight" width={20} height={20} color="white" />
+              </div>
+            </div>
+          </ButtonWithLinkAndEventLogging>
+        </div>
+      </div>
+    </section>
+  );
+}