Feat/homepage revamp

apps/base-docs/base-learn/docs/error-triage/error-triage.md

@@ -47,7 +47,6 @@ Fix by correcting the type or value, as appropriate for your needs:
 
 <summary>Reveal code</summary>
 
-
 ```solidity
 function compilerTypeErrorFixed() public pure returns (string) {
     string myNumber = "One";
@@ -87,7 +86,6 @@ Fix by explicitly casting as necessary:
 
 <summary>Reveal code</summary>
 
-
 ```solidity
 function compilerConversionErrorFixed() public pure returns (uint) {
     int8 first = 1;
@@ -146,7 +144,6 @@ Resolve by explicitly converting to the final type:
 
 <summary>Reveal code</summary>
 
-
 ```
 function compilerOperatorErrorFixed() public pure returns (uint) {
     int8 first = 1;
@@ -226,7 +223,6 @@ Resolve this error by breaking up large functions and separating operations into
 
 <summary>Reveal code</summary>
 
-
 ```solidity
 function stackDepthLimitFixed() public pure returns (uint) {
     uint subtotalA;
@@ -425,7 +421,6 @@ Fix by changing your code to handle the expected range of values.
 
 <summary>Reveal code</summary>
 
-
 ```solidity
 function badSubstractionFixed() public pure returns (int) {
     int first = 1;

apps/base-docs/base-learn/docs/writing-to-contracts/useWriteContract.md

@@ -55,13 +55,12 @@ You'll need to know how many tokens the user has to be able to make decisions on
 You'll need the user's address to use in `args`, which you can conveniently get from the [`useAccount`] hook using the pattern below.
 
 ```tsx
-const { data: balanceData, queryKey: balanceQueryKey } =
-  useReadContract({
-    address: contractData.address as `0x${string}`,
-    abi: contractData.abi,
-    functionName: "balanceOf",
-    args: [useAccount().address],
-  });
+const { data: balanceData, queryKey: balanceQueryKey } = useReadContract({
+  address: contractData.address as `0x${string}`,
+  abi: contractData.abi,
+  functionName: 'balanceOf',
+  args: [useAccount().address],
+});
 
 useEffect(() => {
   if (balanceData) {

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

@@ -1,15 +1,27 @@
 import { Metadata } from 'next';
 import { FrameButtonMetadata } from '@coinbase/onchainkit/frame';
 import AnalyticsProvider from 'apps/web/contexts/Analytics';
-import { BestOfEthereum } from 'apps/web/src/components/BestOfEthereum/BestOfEthereum';
-import { Commitment } from 'apps/web/src/components/Commitment/Commitment';
-import { Divider } from 'apps/web/src/components/Divider/Divider';
-import { EmpoweredByCoinbase } from 'apps/web/src/components/EmpoweredByCoinbase/EmpoweredByCoinbase';
-import { Features } from 'apps/web/src/components/Features/Features';
-import { GetConnected } from 'apps/web/src/components/GetConnected/GetConnected';
-import { Hero } from 'apps/web/src/components/Home/Hero';
-import { JoinTheCommunity } from 'apps/web/src/components/JoinTheCommunity/JoinTheCommunity';
-import { Partnerships } from 'apps/web/src/components/Partnerships/Partnerships';
+
+// Clean up assets while removing below
+// import { JoinTheCommunity } from 'apps/web/src/components/JoinTheCommunity/JoinTheCommunity';
+import Button from 'apps/web/src/components/base-org/Button';
+import { ButtonVariants } from 'apps/web/src/components/base-org/Button/types';
+import Title from 'apps/web/src/components/base-org/typography/Title';
+import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
+import Container from 'apps/web/src/components/base-org/Container';
+import VideoCardsSection from 'apps/web/src/components/base-org/root/VideoCardsSection';
+import BuildExploreSection from 'apps/web/src/components/base-org/root/BuildExploreSection';
+import SlidingTextSection from 'apps/web/src/components/base-org/root/SlidingTextSection';
+import TransactionsFeesSection from 'apps/web/src/components/base-org/root/TransactionsFeesSection';
+import BuildAndRewardSection from 'apps/web/src/components/base-org/root/BuildAndRewardSection';
+import ErrorsProvider from 'apps/web/contexts/Errors';
+import BlogSection from 'apps/web/src/components/base-org/root/BlogSection';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+
+const DynamicThreeHero = dynamic(async () => import('apps/web/src/components/ThreeHero'), {
+  ssr: false,
+});
 
 /* Farcaster Metadatas */
 const buttons: FrameButtonMetadata[] = [
@@ -46,26 +58,57 @@ export const metadata: Metadata = {
 
 export default async function Home() {
   return (
-    <AnalyticsProvider context="base_landing_page">
-      <AnalyticsProvider context="hero">
-        <Hero />
+    <ErrorsProvider context="base_landing_page">
+      <AnalyticsProvider context="base_landing_page">
+        <AnalyticsProvider context="hero">
+          <div className="relative h-screen w-full">
+            <div className="fixed z-10 h-full w-full">
+              <DynamicThreeHero />
+            </div>
+
+            <div className="absolute bottom-0 left-0 z-20 w-full pb-20 text-white">
+              <Container>
+                <Title level={TitleLevel.Headline}>Base is for everyone.</Title>
+                <p className="max-w-[19rem]">
+                  Bringing the world onchain to create a global economy that increases innovation,
+                  creativity, and freedom.
+                </p>
+                <div className="mt-4 flex gap-4">
+                  <Link href="/getstarted?utm_source=dotorg&medium=hero">
+                    <Button variant={ButtonVariants.Secondary} iconName="baseOrgDiagonalUpArrow">
+                      Start building
+                    </Button>
+                  </Link>
+                  <Link href="/names?utm_source=dotorg&medium=hero">
+                    <Button variant={ButtonVariants.Outlined} iconName="baseOrgDiagonalUpArrow">
+                      Get a Basename
+                    </Button>
+                  </Link>
+                </div>
+              </Container>
+            </div>
+          </div>
+        </AnalyticsProvider>
+        <AnalyticsProvider context="content">
+          <main className="relative z-20 flex w-full flex-col items-center bg-black">
+            <Container>
+              <div className="flex flex-col gap-40 pb-40 pt-20">
+                <section>
+                  <Title level={TitleLevel.Display1}>
+                    The future of the internet is onchain. Base is here to help you build it.
+                  </Title>
+                </section>
+                <BuildExploreSection />
+                <VideoCardsSection />
+                <SlidingTextSection />
+                <TransactionsFeesSection />
+                <BuildAndRewardSection />
+                <BlogSection />
+              </div>
+            </Container>
+          </main>
+        </AnalyticsProvider>
       </AnalyticsProvider>
-      <main className="flex w-full flex-col items-center bg-black">
-        <Divider />
-        <Features />
-        <Divider />
-        <BestOfEthereum />
-        <Divider />
-        <EmpoweredByCoinbase />
-        <Divider />
-        <Partnerships />
-        <Divider />
-        <Commitment />
-        <Divider />
-        <JoinTheCommunity />
-        <Divider />
-        <GetConnected />
-      </main>
-    </AnalyticsProvider>
+    </ErrorsProvider>
   );
 }

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

@@ -1,9 +1,11 @@
-import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button';
-import EcosystemHeroLogos from 'apps/web/public/images/ecosystem-hero-logos-new.png';
-import { Divider } from 'apps/web/src/components/Divider/Divider';
 import type { Metadata } from 'next';
-import ImageAdaptive from 'apps/web/src/components/ImageAdaptive';
 import Content from 'apps/web/src/components/Ecosystem/Content';
+import Container from 'apps/web/src/components/base-org/Container';
+import Button from 'apps/web/src/components/base-org/Button';
+import { ButtonVariants } from 'apps/web/src/components/base-org/Button/types';
+import Title from 'apps/web/src/components/base-org/typography/Title';
+import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
+import RotatingCircle from 'apps/web/src/components/base-org/ecosystem/RotatingCircle';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://base.org'),
@@ -15,30 +17,57 @@ export const metadata: Metadata = {
 };
 
 async function EcosystemHero() {
+  const generateKeys = (prefix: string, count: number) =>
+    Array.from(
+      { length: count },
+      (_, i) => `${prefix}-${i}-${Math.random().toString(36).substr(2, 9)}`,
+    );
+
+  const topKeys = generateKeys('top', 4);
+  const middleKeys = generateKeys('middle', 5);
+  const bottomKeys = generateKeys('bottom', 4);
+
   return (
-    <div className="mt-[-96px] flex w-full flex-col items-center bg-black pb-[96px]">
-      <div className="flex w-full max-w-[1440px] flex-col items-center justify-center gap-12 px-8 py-8 pt-28 md:flex-row">
-        <div className="flex w-full flex-col gap-8 md:w-1/2">
-          <h1 className="font-display text-3xl text-white md:text-5xl lg:text-6xl">
-            Base ecosystem
-          </h1>
-          <h2 className="font-display text-xl text-white md:text-2xl lg:text-3xl">
-            An overview of apps and integrations in the Base ecosystem.
-          </h2>
-          <a
-            href="https://docs.google.com/forms/d/e/1FAIpQLScKCOjB4wFmb7u-1VpgMZOGLYq4GUBGt3AwQKqUAlTgjnucGQ/viewform"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            <Button variant={ButtonVariants.Primary} fullWidth className="md:w-64">
-              Apply
-            </Button>
-          </a>
+    <div className="flex w-full flex-col items-center overflow-hidden bg-black pb-20 pt-20">
+      <Container>
+        <div className="flex w-full  flex-col items-center justify-between gap-12 py-20 md:flex-row">
+          <div className="flex w-full w-full flex-col gap-8 md:max-w-lg">
+            <Title level={TitleLevel.Display3}>
+              Base ecosystem apps and integrations overview.
+            </Title>
+            <a
+              href="https://docs.google.com/forms/d/e/1FAIpQLScKCOjB4wFmb7u-1VpgMZOGLYq4GUBGt3AwQKqUAlTgjnucGQ/viewform"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <Button variant={ButtonVariants.Secondary}>Submit your app</Button>
+            </a>
+          </div>
+          <div className="flex flex-col ">
+            <div className="flex flex-shrink-0 justify-center gap-4">
+              {topKeys.map((key, i) => (
+                <div key={key} className="w-[80px] md:w-[100px]">
+                  <RotatingCircle theme={i % 5} />
+                </div>
+              ))}
+            </div>
+            <div className="flex justify-center gap-4">
+              {middleKeys.map((key, i) => (
+                <div key={key} className="w-[80px] md:w-[100px]">
+                  <RotatingCircle theme={i % 5} />
+                </div>
+              ))}
+            </div>
+            <div className="flex justify-center gap-4">
+              {bottomKeys.map((key, i) => (
+                <div key={key} className="w-[80px] md:w-[100px]">
+                  <RotatingCircle theme={i % 5} />
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
-        <div className="flex w-full md:w-1/2 md:justify-end">
-          <ImageAdaptive className="-mr-16" src={EcosystemHeroLogos} alt="ecosystem dapp logos" />
-        </div>
-      </div>
+      </Container>
     </div>
   );
 }
@@ -47,8 +76,10 @@ export default async function Ecosystem() {
   return (
     <main className="flex w-full flex-col items-center bg-black">
       <EcosystemHero />
-      <Divider />
-      <Content />
+
+      <Container>
+        <Content />
+      </Container>
     </main>
   );
 }

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

@@ -25,7 +25,7 @@ export const metadata: Metadata = {
 
 export default async function NameFrame() {
   return (
-    <div className="mt-[-96px] flex w-full flex-col items-center bg-black pb-[96px]">
+    <div className="flex w-full flex-col items-center bg-black pb-[96px]">
       <div className="flex h-screen w-full max-w-[1440px] flex-col items-center justify-center gap-12 px-8 py-8 pt-28">
         <div className="relative flex aspect-[993/516] h-auto w-full max-w-[1024px] flex-col items-center">
           <Link href="/names">

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

@@ -7,6 +7,7 @@ import GetNoticed from '../../../src/components/GetStarted/GetNoticed';
 import GetInvolved from 'apps/web/src/components/GetStarted/GetInvolved';
 import StartBuilding from '../../../src/components/GetStarted/StartBuilding';
 import BuildWithUsFooter from '../../../src/components/GetStarted/BuildWithUsFooter';
+import Container from 'apps/web/src/components/base-org/Container';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://base.org'),
@@ -22,14 +23,16 @@ export default async function GoToCommunity() {
   return (
     <AnalyticsProvider context="builder_resource_kit">
       <Hero />
-      <main className="flex w-full flex-col items-center bg-black font-display text-gray-5">
-        <Essentials />
-        <Funding />
-        <GetNoticed />
-        <GetInvolved />
-        <StartBuilding />
-        <BuildWithUsFooter />
-      </main>
+      <Container>
+        <main className="mt-20 flex w-full flex-col items-center gap-20 font-display text-gray-5">
+          <Essentials />
+          <Funding />
+          <GetNoticed />
+          <GetInvolved />
+          <StartBuilding />
+          <BuildWithUsFooter />
+        </main>
+      </Container>
     </AnalyticsProvider>
   );
 }

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

@@ -1,7 +1,10 @@
+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 { JobType } from 'apps/web/src/components/Jobs/Job';
+import JobsList from 'apps/web/src/components/Jobs/JobsList';
+import { greenhouseApiUrl } from 'apps/web/src/constants';
 import type { Metadata } from 'next';
-import dynamic from 'next/dynamic';
-
-const JobsList = dynamic(async () => import('apps/web/src/components/Jobs/JobsList'));
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://base.org'),
@@ -12,17 +15,28 @@ export const metadata: Metadata = {
   },
 };
 
+async function getJobs() {
+  const res = await fetch(`${greenhouseApiUrl}/boards/basejobs/jobs?content=true`);
+  try {
+    const { jobs } = (await res.json()) as { jobs: JobType[] };
+    return jobs;
+  } catch (error) {}
+  return [];
+}
+
 export default async function Jobs() {
+  const jobs = await getJobs();
+
   return (
-    <main className="mt-[-96px] flex w-full grow flex-col items-center bg-black">
-      <section className="mb-[140px] mt-[100px] flex w-full max-w-[1440px] flex-col px-8 pb-10 sm:mt-[150px]">
-        <h1 className="font-display text-3xl text-white md:text-4xl lg:basis-1/2 lg:text-5xl">
-          Join our team
-        </h1>
-        <div className="flex flex-col font-display text-sm text-white lg:text-xl">
-          <JobsList />
-        </div>
-      </section>
+    <main className="flex w-full grow flex-col items-center pt-20">
+      <Container>
+        <section className="mb-[140px] flex w-full flex-col pb-10 pt-20 ">
+          <Title level={TitleLevel.Display3}>Join our team</Title>
+          <div className="flex w-full flex-col font-display text-sm text-white lg:text-xl">
+            <JobsList jobs={jobs} />
+          </div>
+        </section>
+      </Container>
     </main>
   );
 }