Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/client section #62

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+26 −36
Open

Fix/client section #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bcdbb3d
Rename client logo
portdeveloper Dec 31, 2024
d3d37c9
Add bg-client-monitor.png
portdeveloper Dec 31, 2024
ae6226c
Remove unused client ss img
portdeveloper Dec 31, 2024
8dccad4
Implement new bg client section
portdeveloper Dec 31, 2024
9885b29
Add space-mono and change text
portdeveloper Jan 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 24 additions & 36 deletions packages/nextjs/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,46 +322,34 @@ const Home: NextPage<{
</div>
</div>

{/* Nodes section */}
<div className="bg-[#EBEBEB] relative px-[13px]">
<div className="w-full border-t border-black absolute lg:top-16 top-14 left-0"></div>
<div className="h-full border-l border-black absolute top-0 lg:left-[76px] left-[58px]"></div>
<div className="w-full border-t border-black absolute lg:bottom-16 bottom-14 left-0"></div>
<div className="h-full border-l border-black absolute top-0 lg:right-[76px] right-[58px]"></div>
<div className="flex flex-col flex-grow lg:flex-row px-10 py-14 lg:py-16 lg:px-14 text-black">
{/* First column */}
<div className="flex flex-col flex-wrap">
<div className="flex items-start p-7 w-full lg:border-t lg:border-l lg:border-r-0 lg:border-b-0 border border-black">
<Image
src="/assets/client-logo.svg"
alt="client logo"
className="lg:w-[250px]"
width={200}
height={200}
/>
{/* BG Client */}
<div className="bg-base-300">
<div className="mx-auto lg:max-w-7xl">
<div className="container max-w-[90%] lg:max-w-7xl m-auto py-12 lg:py-12 xl:pl-24 lg:pl-16 flex flex-col-reverse lg:flex-row items-center gap-5 lg:gap-0">
<div className="space-y-8 md:max-w-[70%] lg:max-w-[35%] flex flex-col items-center lg:items-start text-center lg:text-left">
<Image src="/assets/bg-client-logo.svg" alt="BG Client logo" width={200} height={200} />
<p className="m-0 lg:pr-8 mb-3 lg:text-xl font-space-mono">
Run a full Ethereum node with a single command! Opt in to our distributed RPC to power BG apps too!
</p>
<TrackedLink
id="BG-Nodes"
href="https://client.buidlguidl.com"
className="btn btn-primary btn-md px-8 mt-8 bg-[#FF66F9] border-[#FF66F9] hover:opacity-100"
>
Go to site
</TrackedLink>
</div>
<div className="md:flex flex-row flex-grow lg:border-y lg:border-l lg:border-r-0 border-x border-black">
<div className="flex flex-col justify-between items-start bg-[#FF66F9] p-7 pt-4">
<p className="lg:text-base text-sm font-mono pb-4">
Run a full Ethereum node with a single command! Opt in to our distributed RPC to power BG apps too!
</p>
<TrackedLink
id="BG-Nodes"
href="https://client.buidlguidl.com"
className="btn btn-md text-xs lg:text-base px-8 hover:opacity-100 font-mono bg-white text-black border-black rounded-none hover:bg-[#4AF361] hover:border-black"
>
Run a BG client
</TrackedLink>
</div>
<div className="hidden sm:flex flex-col items-center bg-[#4AF361] p-3 min-w-[200px] md:border-l border-t md:border-t-0 border-black">
<Image src="/assets/satellite.png" alt="satellite" width={200} height={200} />
<div className="flex flex-col items-center lg:pl-16 xl:pl-12 2xl:pl-24 lg:-mr-12 xl:-mr-16 2xl:-mr-24">
<div className="max-w-md lg:max-w-md xl:max-w-2xl 2xl:max-w-2xl">
<Image
src="/assets/bg-client-monitor.png"
alt="BG Client running on a computer"
width={800}
height={800}
/>
</div>
</div>
</div>
{/* Second column */}
<div className="flex flex-col items-center p-6 md:min-w-[400px] border border-black bg-[#4AF361] sm:bg-transparent">
<Image src="/assets/screenshot.png" alt="screenshot" width={700} height={700} />
</div>
</div>
</div>

Expand Down
0 ...ages/nextjs/public/assets/client-logo.svg → ...s/nextjs/public/assets/bg-client-logo.svg
View file
Open in desktop
File renamed without changes
Binary file added packages/nextjs/public/assets/bg-client-monitor.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed packages/nextjs/public/assets/screenshot.png
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions packages/nextjs/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it worth it to add a new font? We already have a few fonts on the site and some inconsistencies (like the batches section)

When in doubt I'd personally try to keep the site consistent. If not, we might end up with a monstrosity after a few iterations of tweaking sections. I think Space Grotesk is fine (I'd also fix the Batches section). But we can use font-mono if we really want monospaced.

Also this monospace is only being used in one paragraph (+ is different from the nodes website!)


@import "tailwindcss/base";
@import "tailwindcss/components";
Expand Down
1 change: 1 addition & 0 deletions packages/nextjs/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ module.exports = {
"space-grotesk": ["Space Grotesk", "sans-serif"],
"neue-machina": ["PPNeueMachina", "sans-serif"],
"editorial": ["PPEditorial", "serif"],
"space-mono": ["Space Mono", "monospace"],
},
backgroundColor: {
skin: "#EBECFD",
Expand Down
Loading