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

New site design #4

Merged
merged 8 commits into from
Oct 23, 2024
Merged

New site design #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a5e656d
Cleared content, header and footer
andrealbiac Oct 21, 2024
0362e7c
Created sections and dumped content
andrealbiac Oct 21, 2024
56ad681
Added font
andrealbiac Oct 22, 2024
d0d62c9
Animated 'live' tag in map section
andrealbiac Oct 22, 2024
25838e5
Added border to sections
andrealbiac Oct 22, 2024
40d8767
Edited header and footer
andrealbiac Oct 22, 2024
be0c57f
Added mix-blend effect on logo
andrealbiac Oct 23, 2024
adb9561
Added map tags
andrealbiac Oct 23, 2024
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
6 changes: 3 additions & 3 deletions packages/nextjs/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ const baseUrl = process.env.VERCEL_URL
: `http://localhost:${process.env.PORT || 3000}`;
const imageUrl = `${baseUrl}/thumbnail.jpg`;

const title = "Scaffold-ETH 2 App";
const titleTemplate = "%s | Scaffold-ETH 2";
const description = "Built with 🏗 Scaffold-ETH 2";
const title = "BG Client";
const titleTemplate = "%s | BG Client";
const description = "BG Client";

export const metadata: Metadata = {
metadataBase: new URL(baseUrl),
Expand Down
135 changes: 80 additions & 55 deletions packages/nextjs/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,93 @@
"use client";

import { useState } from "react";
import Image from "next/image";
import { NextPage } from "next";

const Home: NextPage = () => {
const [isModalOpen, setIsModalOpen] = useState(false);

return (
<>
<div className="flex items-center flex-col flex-grow pt-10">
<div className="px-5">
<h1 className="text-center">
<span className="block text-4xl font-bold">🌐 BuidlGuidl Client 📡</span>
<span className="block text-2xl mt-4">run an ethereum node in one command</span>
<span className="block text-2xl mb-2 mt-8">mac/linux:</span>
<pre className="bg-black text-white p-8 rounded">
<code>{`/bin/bash -c "$(curl -fsSL https://client.buidlguidl.com/runBuidlGuidlClient.sh)"`}</code>
</pre>
</h1>
</div>
<div className="pt-8">
<h1 className="text-center">
<span className="block text-2xl mt-4">or run the client from the repo: </span>
<span className="block text-2xl mb-2 mt-8"></span>
<pre className="bg-black text-white p-8 rounded text-left">
<code>{`
git clone https://github.com/BuidlGuidl/buidlguidl-client.git
cd buidlguidl-client
yarn install
node index.js
`}</code>
</pre>
</h1>
</div>
<div className="mt-8">
<h2 className="text-2xl text-center mb-4">screenshot:</h2>
<Image
src="/screen.png"
alt="Screenshot of the node running"
width={500}
height={300}
className="rounded-lg shadow-lg cursor-pointer"
onClick={() => setIsModalOpen(true)}
/>
</div>
{/* First row */}
<div className="flex flex-row flex-wrap lg:flex-nowrap">
{/* Introduction section */}
<section className="bg-[#df57c4] p-10 lg:w-[45vw]">
<div className="flex flex-col">
<p>
A one line command to deploy and monitor an Ethereum Node, funded and maintained by BuidlGuidl members.
</p>
<p>Mac/linux</p>
<code className="bg-black p-6 text-white text-base">{`
/bin/bash -c "$(curl -fsSL https://client.buidlguidl.com/runBuidlGuidlClient.sh)"
`}</code>
<p> or run the client from the repo:</p>
<code className="bg-black p-6 text-white text-base">{`
git clone https://github.com/BuidlGuidl/buidlguidl-client.git
cd buidlguidl-client
yarn install
node index.js
`}</code>
</div>
</section>

{isModalOpen && (
<div
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
onClick={() => setIsModalOpen(false)}
>
<div className="max-w-[90vw] max-h-[90vh]">
<Image
src="/screen.png"
alt="Screenshot of the node running"
width={1920}
height={1080}
className="rounded-lg"
onClick={e => e.stopPropagation()}
/>
{/* Screenshot section */}
<section className="bg-[#DDDDDD] flex-1 p-8 flex justify-center">
<img src="computer-screenshot.png" alt="screenshot" className="object-contain" />
</section>

{/* Satellite section */}
<section className="bg-[#12D855] p-6 w-[40vw] lg:flex-1 flex justify-center">
<img src="satellite-test.png" alt="satellite" className="object-contain" />
</section>
</div>

{/* Second row */}
<div className="flex flex-row flex-wrap lg:flex-nowrap mb-10">
{/* Map section */}
<section className="bg-[#F6F6F6] p-10">
<div className="flex flex-row items-center gap-4">
<h1 className="text-lg">📡 Clients running</h1>
<img src="live-tag.svg" alt="live tag" className="w-16 animate-pulse-fast mb-1.5" />
</div>
<div className="relative flex items-center justify-center pt-10">
<img src="map.png" alt="map" className="w-auto" />
{/* Continent tags */}
<div className="text-sm lg:text-base flex items-center justify-center">
<div className="bg-[#f359d4] px-3 leading-none absolute top-[90px] right-[300px] lg:top-[110px] lg:right-[300px]">
<p className="text-center whitespace-nowrap">europe (10)</p>
</div>
<div className="bg-[#f359d4] px-3 leading-none absolute top-[140px] right-[140px] lg:top-[160px] lg:right-[160px]">
<p className="text-center whitespace-nowrap">asia (10)</p>
</div>
<div className="bg-[#f359d4] px-3 leading-none absolute top-[120px] left-[80px] lg:top-[140px] lg:left-[70px]">
<p className="text-center whitespace-nowrap">north america (10)</p>
</div>
<div className="bg-[#f359d4] px-3 leading-none absolute bottom-[80px] left-[140px] lg:bottom-[80px] lg:left-[160px]">
<p className="text-center whitespace-nowrap">south america (10)</p>
</div>
<div className="bg-[#f359d4] px-3 leading-none absolute bottom-[120px] left-[350px] lg:bottom-[170px] lg:left-[400px]">
<p className="text-center whitespace-nowrap">africa (10)</p>
</div>
<div className="bg-[#f359d4] px-3 leading-none absolute bottom-[70px] right-[60px] lg:bottom-[60px] lg:right-[30px]">
<p className="text-center whitespace-nowrap">australia (10)</p>
</div>
</div>
</div>
)}
</section>

{/* Docs section */}
<section className="bg-black p-10 lg:w-[30vw] w-full text-white">
<h1 className="text-lg">Useful links | Docs</h1>
<ul className="list-disc list-outside flex flex-col m-auto lg:mx-0 pl-8 lg:pl-4 ">
<li>
<a href="https://docs.rocketpool.net/guides/node/local/hardware" className="link">
On how to select hardware
</a>
</li>
<li>
<a href="https://gist.github.com/yorickdowne/f3a3e79a573bf35767cd002cc977b038" className="link">
All about how to buy the correct drive
</a>
</li>
</ul>
</section>
</div>
</>
);
Expand Down
48 changes: 9 additions & 39 deletions packages/nextjs/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,18 @@
import React from "react";
import Link from "next/link";
import { hardhat } from "viem/chains";
import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { HeartIcon } from "@heroicons/react/24/outline";
import { SwitchTheme } from "~~/components/SwitchTheme";
import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
import { Faucet } from "~~/components/scaffold-eth";
import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
import { useGlobalState } from "~~/services/store/store";
import { HeartIcon } from "@heroicons/react/24/solid";

/**
* Site footer
*/
export const Footer = () => {
const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrencyPrice);
const { targetNetwork } = useTargetNetwork();
const isLocalNetwork = targetNetwork.id === hardhat.id;

return (
<div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
<div>
<div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
<div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
{nativeCurrencyPrice > 0 && (
<div>
<div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
<CurrencyDollarIcon className="h-4 w-4" />
<span>{nativeCurrencyPrice}</span>
</div>
</div>
)}
{isLocalNetwork && (
<>
<Faucet />
<Link href="/blockexplorer" passHref className="btn btn-primary btn-sm font-normal gap-1">
<MagnifyingGlassIcon className="h-4 w-4" />
<span>Block Explorer</span>
</Link>
</>
)}
</div>
<SwitchTheme className={`pointer-events-auto ${isLocalNetwork ? "self-end md:self-auto" : ""}`} />
<div className="min-h-0 px-1 mb-6 lg:mb-6">
<div className="w-full flex flex-row">
<div>
<img src="crosses-1.svg" alt="crosses" className="w-[300px]" />
</div>
</div>
<div className="w-full">
<ul className="menu menu-horizontal w-full">
{/* Footer links */}
<div className="flex justify-center items-center gap-2 text-sm w-full">
<div className="text-center">
<a href="https://github.com/BuidlGuidl/nodes" target="_blank" rel="noreferrer" className="link">
Expand All @@ -62,7 +30,6 @@ export const Footer = () => {
target="_blank"
rel="noreferrer"
>
<BuidlGuidlLogo className="w-3 h-5 pb-1" />
<span className="link">BuidlGuidl</span>
</a>
</div>
Expand All @@ -74,6 +41,9 @@ export const Footer = () => {
</div>
</div>
</ul>
<div>
<img src="crosses-2.svg" alt="crosses" className="w-[300px]" />
</div>
</div>
</div>
);
Expand Down
91 changes: 10 additions & 81 deletions packages/nextjs/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,97 +1,26 @@
"use client";

import React, { useCallback, useRef, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Bars3Icon } from "@heroicons/react/24/outline";
import React from "react";
import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
import { useOutsideClick } from "~~/hooks/scaffold-eth";

type HeaderMenuLink = {
label: string;
href: string;
icon?: React.ReactNode;
};

export const menuLinks: HeaderMenuLink[] = [];

export const HeaderMenuLinks = () => {
const pathname = usePathname();

return (
<>
{menuLinks.map(({ label, href, icon }) => {
const isActive = pathname === href;
return (
<li key={href}>
<Link
href={href}
passHref
className={`${
isActive ? "bg-secondary shadow-md" : ""
} hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
>
{icon}
<span>{label}</span>
</Link>
</li>
);
})}
</>
);
};

/**
* Site header
*/
export const Header = () => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const burgerMenuRef = useRef<HTMLDivElement>(null);
useOutsideClick(
burgerMenuRef,
useCallback(() => setIsDrawerOpen(false), []),
);

return (
<div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
<div className="navbar-start w-auto lg:w-1/2">
<div className="lg:hidden dropdown" ref={burgerMenuRef}>
<label
tabIndex={0}
className={`ml-1 btn btn-ghost ${isDrawerOpen ? "hover:bg-secondary" : "hover:bg-transparent"}`}
onClick={() => {
setIsDrawerOpen(prevIsOpenState => !prevIsOpenState);
}}
>
<Bars3Icon className="h-1/2" />
</label>
{isDrawerOpen && (
<ul
tabIndex={0}
className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
onClick={() => {
setIsDrawerOpen(false);
}}
>
<HeaderMenuLinks />
</ul>
)}
<>
{/* Logo div with mix-blend-exclusion */}
<div className="fixed top-6 left-10 z-30 mix-blend-difference">
<div>
<img src="client-logo.svg" alt="logo" />
</div>
<Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
<div className="flex relative w-10 h-10 text-3xl">🛰️</div>
<div className="flex flex-col">
<span className="font-bold leading-tight">BuidlGuidl</span>
<span className="text-xs">Client</span>
</div>
</Link>
<ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">
<HeaderMenuLinks />
</ul>
</div>
<div className="navbar-end flex-grow mr-4">

{/* Connect button */}
<div className="fixed top-10 right-10 z-30 flex items-center">
<RainbowKitCustomConnectButton />
<FaucetButton />
</div>
</div>
</>
);
};
7 changes: 6 additions & 1 deletion packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,12 @@ export const RainbowKitCustomConnectButton = () => {
{(() => {
if (!connected) {
return (
<button className="btn btn-primary btn-sm" onClick={openConnectModal} type="button">
<button
className="btn bg-white border-black border-[1px] rounded-none btn-lg
font-chivo font-normal hover:bg-[#7877FF] hover:text-black hover:border-black"
onClick={openConnectModal}
type="button"
>
Connect Wallet
</button>
);
Expand Down
Loading
Loading