Skip to content

Commit

Permalink
Feat/homepage revamp (#962)
Browse files Browse the repository at this point in the history
* Add dependencies

* Add assets

* Working with their mesh

* Not really working shimmer cards

* implement shimmer card without motion/framer

* Fix TagChip

* add button component

* Add Title and move Card

* add Title headline

* try new component

* Add large button and text component

* fix ecosystem page

* wasm free loading?

* Checkpoint, cleaning up lint errors

* New model attempt

* home and jobs page with new section/components

* New mesh export

* Add Base Grantee badge

* script to pull blog posts to display

* blog section

* new top navigation

* mobile blog

* navigation margin

* about page

* Adapt ecosystem page

* adapt builder-anniversary-nft

* adapt jobs page

* remove unused views

* remove unused views / frame / motion

* adapt get started

* i love wagmi

* mobile optimization

* tidy up get started page

* fix alignment

* add connect wallet button & transaction animation

* blog effect tidy up & new job page

* try catch

* fix display

* Load all the objects in a unit sphere

* Add wasm-unsafe-eval to CSP

* gradient circle animation

* Dynamic ThreeHero

* Add gltf and glb to file-loader

* Try combined GLB file

* button fix

* lineheight and text selection styles

* blog section optimizations

* intersection observer

* fix console errors

* blog post optimization, css over state

* one card provider = one event tracking

* we like mobile too

* ecosystem tweaks + mobile friendly

* margin & padding

* overflow fix

* Remove transparency

* use correct buttons & prefer canvas over svg animation

* mobile navigation

* latest optimize 3D pass

* tweak balloon effect

* fixed 3D hero header

* Progress on physics sim

* Link to retrofunding

* Remove brand kit link for now

* First pass at gravity scene

* Added physics pause when a user scrolls.

* fix fog and colors

* Update next to allow draco loading and added noggles to scene

* new light mouse trail

* new light

* mobile sizing

* fix mobile scaling alignment

* remove three card

* remove noggles

* Remove second OP logo

* new logo and lightning

* light intensity

* Lighting

* change switch network button text

* optimize effects

* less harsh light

* latest models and video sections

* sugar cube

* animated menus

* optimize instances in scene and make video hoverable

* Add stats

* add scroll test

* Fix weird flash at the loading + updated menus

* Add cursor

* Remove shimmer

* Mint button

* adjust the bloom a little

* new logo

* fix mint button

* remove orbit controls

* remove stats

* device vh

* mess with device height

* add analytics

* generic events

* eslint pass

* load draco file locally

* remove wasm exceptions

* scene mobile pass: performance fixes

* scene lint pass

* scene lint pass

* fix wasm

* fix card effect

* eslint pass

* cleanup

* linter

* local import

* local import

* Team feedback round 1

* Team feedback round 2

* toggle menu on click

* fixes

* Team feedback round 2

* Team feedback round 3

* og image

* 3D Header

* Team feedback round 4

* Team feedback round 4

* Replace cube video

* og image

* RIght click to mint

* use link component for tracking

* fix active/inactive state

* remove maath

* Team feedback round 5

* Team feedback round 6

* background tweaks

---------

Co-authored-by: Léo Galley <[email protected]>
Co-authored-by: Mike Bodge <[email protected]>
  • Loading branch information
3 people authored Oct 11, 2024
1 parent 3247345 commit d41b9e5
Show file tree
Hide file tree
Showing 142 changed files with 9,449 additions and 2,149 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 57 additions & 61 deletions apps/web/app/(base-org)/(root)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,71 +1,67 @@
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';
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 dynamic from 'next/dynamic';
import Link from 'apps/web/src/components/Link';
import MissionSection from 'apps/web/src/components/base-org/root/MissionSection';

/* Farcaster Metadatas */
const buttons: FrameButtonMetadata[] = [
{
action: 'link',
label: 'Read the docs',
target: 'https://docs.base.org/',
},
{
action: 'link',
label: 'Bridge assets',
target: 'https://bridge.base.org/deposit',
},
];

const otherMetadata: Metadata['other'] = {
'fc:frame:image': 'https://base.org/images/base-open-graph.png',
};

buttons
.map((button, index) => {
const metadataKey = `fc:frame:button:${index + 1}`;
otherMetadata[metadataKey] = [button.label];
if (button.action) otherMetadata[`${metadataKey}:action`] = [button.action];
if (button.target) otherMetadata[`${metadataKey}:target`] = [button.target];
return otherMetadata;
})
.flat();

/* Page Metadatas */
export const metadata: Metadata = {
other: otherMetadata,
};
const DynamicThreeHero = dynamic(async () => import('apps/web/src/components/ThreeHero'), {
ssr: false,
});

export default async function Home() {
return (
<AnalyticsProvider context="base_landing_page">
<ErrorsProvider context="base_landing_page">
<AnalyticsProvider context="hero">
<Hero />
<div className="relative z-10 h-screen w-full">
<DynamicThreeHero />

<div className="absolute bottom-0 left-0 z-20 w-full pb-20 text-white">
<Container>
<Title level={TitleLevel.Title1}>Base is for everyone.</Title>
<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 className="pointer-events-none absolute bottom-0 left-0 z-20 h-[50px] w-full bg-gradient-to-b from-transparent to-black" />
</div>
</div>
</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 className="relative z-20 flex w-full flex-col items-center bg-black">
<Container>
<div className="flex flex-col gap-20 pb-40 pt-20 md:gap-40">
<MissionSection />
<BuildExploreSection />
<VideoCardsSection />
<SlidingTextSection />
<TransactionsFeesSection />
<BuildAndRewardSection />
<AnalyticsProvider context="blog_carousel">
<BlogSection />
</AnalyticsProvider>
</div>
</Container>
</main>
</AnalyticsProvider>
</ErrorsProvider>
);
}
87 changes: 59 additions & 28 deletions apps/web/app/(base-org)/ecosystem/page.tsx
Original file line number Diff line number Diff line change
@@ -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'),
Expand All @@ -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>
);
}
Expand All @@ -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>
);
}
2 changes: 1 addition & 1 deletion apps/web/app/(base-org)/frames/names/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
19 changes: 11 additions & 8 deletions apps/web/app/(base-org)/getstarted/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand All @@ -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>
);
}
38 changes: 26 additions & 12 deletions apps/web/app/(base-org)/jobs/page.tsx
Original file line number Diff line number Diff line change
@@ -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'),
Expand All @@ -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>
);
}
19 changes: 14 additions & 5 deletions apps/web/app/(base-org)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import dynamic from 'next/dynamic';
import type { Metadata } from 'next';
import Nav from 'apps/web/src/components/Layout/Nav/Nav';
import TopNavigation from 'apps/web/src/components/base-org/shared/TopNavigation';
import CardsProvider from 'apps/web/src/components/base-org/Card/context';
import Container from 'apps/web/src/components/base-org/Container';

const HomepageModalDynamic = dynamic(
async () => import('apps/web/src/components/Basenames/HomepageModal'),
Expand Down Expand Up @@ -34,10 +36,17 @@ export default async function BaseOrgLayout({
children: React.ReactNode;
}) {
return (
<div className="max-w-screen flex min-h-screen flex-col">
<Nav />
<HomepageModalDynamic />
{children}
<div className="max-w-screen flex min-h-screen flex-col bg-black text-white selection:bg-[#C5DAFC] selection:text-blue">
<CardsProvider>
<TopNavigation />
<HomepageModalDynamic />
{children}
</CardsProvider>

{/* Line between content & footer */}
<Container>
<hr className="opacity-50" />
</Container>
</div>
);
}
Loading

0 comments on commit d41b9e5

Please sign in to comment.