Skip to content

Commit 3d0da19

Browse files
melankemelanke
authored
Merge pull request #44 from usetech-nick/feat/batch22-home-ui
Batch 22 home page: scoped styling, contrast fixes, and status panel update
2 parents df38963 + 2374797 commit 3d0da19

File tree

5 files changed

+197
-51
lines changed

5 files changed

+197
-51
lines changed

‎packages/nextjs/app/layout.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Inter, JetBrains_Mono } from "next/font/google";
12
import QueryClientProviderWrapper from "./QueryClientProvider";
23
import "@rainbow-me/rainbowkit/styles.css";
34
import "@scaffold-ui/components/styles.css";
@@ -6,6 +7,18 @@ import { ThemeProvider } from "~~/components/ThemeProvider";
67
import "~~/styles/globals.css";
78
import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
89

10+
const inter = Inter({
11+
subsets: ["latin"],
12+
variable: "--font-sans",
13+
display: "swap",
14+
});
15+
16+
const jetbrainsMono = JetBrains_Mono({
17+
subsets: ["latin"],
18+
variable: "--font-mono",
19+
display: "swap",
20+
});
21+
922
export const metadata = getMetadata({
1023
title: "Batch #22 | BuidlGuidl",
1124
description:
@@ -14,7 +27,7 @@ export const metadata = getMetadata({
1427

1528
const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
1629
return (
17-
<html suppressHydrationWarning>
30+
<html suppressHydrationWarning className={`${inter.variable} ${jetbrainsMono.variable}`}>
1831
<body>
1932
<QueryClientProviderWrapper>
2033
<ThemeProvider enableSystem>

‎packages/nextjs/app/page.tsx‎

Lines changed: 41 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,52 @@
11
"use client";
22

3-
import Link from "next/link";
43
import type { NextPage } from "next";
5-
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
6-
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
4+
import { ActionCards } from "~~/components/ActionCards";
5+
import { BatchStatus } from "~~/components/BatchStatus";
76

87
const Home: NextPage = () => {
9-
const { data: checkedInCounter, isSuccess: isCheckedInCounterSuccess } = useScaffoldReadContract({
10-
contractName: "BatchRegistry",
11-
functionName: "checkedInCounter",
12-
});
13-
148
return (
15-
<>
16-
<div className="flex items-center flex-col grow pt-10">
17-
<div className="px-5">
18-
<h1 className="text-center">
19-
<span className="block text-2xl mb-2">Welcome to</span>
20-
<span className="block text-4xl font-bold">Batch 22</span>
21-
</h1>
22-
<p className="text-center text-lg mt-2">Building the future of web3 together</p>
23-
<p className="text-lg flex gap-2 justify-center mt-6">
24-
<span className="font-bold">Checked in builders count:</span>
25-
{isCheckedInCounterSuccess ? (
26-
<span>{checkedInCounter ? checkedInCounter.toString() : 0}</span>
27-
) : (
28-
<span className="loading loading-spinner"></span>
29-
)}
30-
</p>
31-
</div>
9+
<div className="min-h-screen bg-base-200 overflow-x-hidden">
10+
{/* Hero */}
11+
<section
12+
className="
13+
relative flex flex-col items-center text-center
14+
px-4
15+
pt-8 pb-6
16+
sm:pt-12 sm:pb-10
17+
md:pt-20 md:pb-16
18+
"
19+
>
20+
{/* Gradient glow */}
21+
<div
22+
className="
23+
pointer-events-none absolute inset-x-0 top-0 -z-10 h-[420px]
24+
bg-[radial-gradient(900px_400px_at_50%_0%,rgba(147,187,251,0.15),transparent_70%)]
25+
dark:bg-[radial-gradient(900px_400px_at_50%_0%,rgba(109,124,255,0.18),transparent_70%)]
26+
"
27+
/>
28+
29+
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl md:text-4xl">
30+
Batch <span className="opacity-90">22</span>
31+
</h1>
3232

33-
<div className="grow bg-base-300 w-full mt-16 px-8 py-12">
34-
<div className="flex justify-center items-center gap-12 flex-col md:flex-row">
35-
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
36-
<BugAntIcon className="h-8 w-8 fill-secondary" />
37-
<p>
38-
Tinker with your smart contract using the{" "}
39-
<Link href="/debug" passHref className="link">
40-
Debug Contracts
41-
</Link>{" "}
42-
tab.
43-
</p>
44-
</div>
45-
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
46-
<MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
47-
<p>
48-
Explore your local transactions with the{" "}
49-
<Link href="/blockexplorer" passHref className="link">
50-
Block Explorer
51-
</Link>{" "}
52-
tab.
53-
</p>
54-
</div>
55-
</div>
33+
<p className="mt-3 max-w-md text-sm text-base-content/70 sm:text-base md:text-lg">
34+
A decentralized cohort learning and building Web3
35+
</p>
36+
37+
<div className="mt-6 h-px w-32 bg-gradient-to-r from-transparent via-base-content/20 to-transparent" />
38+
39+
{/* Batch status */}
40+
<div className="mt-10">
41+
<BatchStatus />
5642
</div>
57-
</div>
58-
</>
43+
</section>
44+
45+
{/* Actions */}
46+
<section className="relative -mt-8 flex justify-center pb-20">
47+
<ActionCards />
48+
</section>
49+
</div>
5950
);
6051
};
6152

‎packages/nextjs/components/ActionCard.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { ReactNode } from "react";
2+
import Link from "next/link";
3+
4+
type ActionCardProps = {
5+
href: string;
6+
icon: ReactNode;
7+
title: string;
8+
description: string;
9+
};
10+
11+
export function ActionCard({ href, icon, title, description }: ActionCardProps) {
12+
return (
13+
<Link href={href} className="group">
14+
<div
15+
className="
16+
flex flex-col items-center justify-center text-center gap-3
17+
w-64 h-40 rounded-2xl
18+
bg-base-200
19+
border border-base-300
20+
shadow-[0_10px_30px_rgba(0,0,0,0.35)]
21+
backdrop-blur-sm
22+
transition-all duration-300
23+
hover:-translate-y-1
24+
"
25+
>
26+
<div className="text-base-content">{icon}</div>
27+
<div>
28+
<h3 className="font-semibold">{title}</h3>
29+
<p className="text-sm opacity-70">{description}</p>
30+
</div>
31+
</div>
32+
</Link>
33+
);
34+
}

‎packages/nextjs/components/ActionCards.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ActionCard } from "./ActionCard";
2+
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
3+
4+
export function ActionCards() {
5+
return (
6+
<section
7+
className="
8+
relative mt-6
9+
flex flex-col items-center gap-4
10+
pb-12
11+
sm:flex-row sm:justify-center sm:gap-8 sm:pb-20
12+
"
13+
>
14+
<ActionCard
15+
href="/debug"
16+
icon={<BugAntIcon className="h-8 w-8" />}
17+
title="Debug Contracts"
18+
description="Interact with the batch smart contracts"
19+
/>
20+
<div className="connector" />
21+
<ActionCard
22+
href="/blockexplorer"
23+
icon={<MagnifyingGlassIcon className="h-8 w-8" />}
24+
title="Block Explorer"
25+
description="Explore local transactions and blocks"
26+
/>
27+
</section>
28+
);
29+
}

‎packages/nextjs/components/BatchStatus.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import Link from "next/link";
2+
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
3+
4+
export function BatchStatus() {
5+
const { data: checkedInCounter } = useScaffoldReadContract({
6+
contractName: "BatchRegistry",
7+
functionName: "checkedInCounter",
8+
});
9+
10+
const buildersCount = checkedInCounter ? Number(checkedInCounter) : null;
11+
12+
return (
13+
<Link href="/builders" className="block w-full px-4">
14+
<section
15+
className="
16+
relative
17+
w-full
18+
max-w-2xl
19+
rounded-3xl
20+
bg-base-200
21+
border border-base-300
22+
px-6 py-8
23+
sm:px-10 sm:py-10
24+
25+
transition-all duration-300 ease-out
26+
hover:-translate-y-1
27+
hover:shadow-[0_24px_60px_rgba(0,0,0,0.25)]
28+
active:scale-[0.99]
29+
"
30+
>
31+
{/* Header */}
32+
<header className="mb-8 text-center">
33+
<h2 className="text-xl font-semibold sm:text-2xl">Batch Status</h2>
34+
<p className="mt-1 text-sm opacity-60">Live overview of the current cohort</p>
35+
</header>
36+
37+
{/* Stats */}
38+
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 sm:gap-x-10 sm:gap-y-8">
39+
{/* Builders */}
40+
<div>
41+
<div className="text-sm opacity-60">Builders onboarded</div>
42+
<div className="mt-1 text-3xl font-mono font-semibold">{buildersCount ?? "…"}</div>
43+
</div>
44+
45+
{/* Registry */}
46+
<div>
47+
<div className="text-sm opacity-60">Registry status</div>
48+
<div className="mt-1 text-lg font-semibold text-success">Active</div>
49+
</div>
50+
51+
{/* Deployment */}
52+
<div>
53+
<div className="text-sm opacity-60">Deployment</div>
54+
<div className="mt-1 font-mono text-lg">Arbitrum</div>
55+
</div>
56+
57+
{/* Phase */}
58+
<div>
59+
<div className="text-sm opacity-60">Current phase</div>
60+
<div className="mt-1 text-lg font-medium">Wrapping up</div>
61+
</div>
62+
</div>
63+
64+
{/* CTA */}
65+
<footer className="mt-10 flex justify-center sm:justify-end">
66+
<span
67+
className="
68+
text-sm font-medium
69+
hover:opacity-80
70+
transition
71+
"
72+
>
73+
View builders →
74+
</span>
75+
</footer>
76+
</section>
77+
</Link>
78+
);
79+
}

0 commit comments

Comments
 (0)