Skip to content

Commit f698050

Browse files
SewerynKrasSewerynKras
committed
add footer
1 parent 1680059 commit f698050

File tree

1 file changed

+93
-68
lines changed

1 file changed

+93
-68
lines changed

‎frontend/react-example/src/App.tsx‎

Lines changed: 93 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -11,79 +11,104 @@ import CurrentGasPriceHighlight from "./features/gas-price/components/CurrentGas
1111
import AverageTransactionsHighlight from "./features/transactions/components/AverageTransactionsHighlight";
1212

1313
function App() {
14-
return (
15-
<div className="relative min-h-screen overflow-hidden bg-background">
16-
<header className="relative overflow-hidden bg-linear-to-br from-slate-950 via-indigo-950 to-purple-800 pb-40 pt-12 text-white shadow-2xl shadow-indigo-950/40">
17-
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.25),transparent_60%)]" />
18-
<div className="pointer-events-none absolute inset-x-0 -bottom-40 h-72 bg-linear-to-b from-white/20 via-white/8 to-transparent blur-3xl" />
19-
<div className="relative z-10 mx-auto max-w-[1600px] px-3 sm:px-10">
20-
<div className="flex flex-col gap-10">
21-
<div className="grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.8fr)] md:items-center">
22-
<div className="space-y-6">
23-
<span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-1 text-[0.75rem] font-semibold uppercase tracking-[0.35em] text-white/75">
24-
Built with{" "}
25-
<a
26-
href="https://arkiv.network"
27-
target="_blank"
28-
rel="noreferrer"
29-
className="-m-4 p-4 z-1 relative inline-block"
30-
>
31-
<img
32-
src={`${import.meta.env.BASE_URL}arkiv-logo.svg`}
33-
alt="Arkiv Logo"
34-
className="w-14"
35-
/>
36-
</a>
37-
</span>
38-
<div className="space-y-6">
39-
<h1 className="text-3xl font-semibold tracking-tight sm:text-4xl lg:text-5xl text-balance">
40-
Ethereum Dashboard powered by Arkiv
41-
</h1>
42-
<p className="max-w-2xl text-base text-white/80 sm:text-lg">
43-
Monitor Ethereum&apos;s latest blocks, transaction flow, and
44-
gas price shifts through Arkiv&apos;s real-time data
45-
snapshots.
46-
</p>
47-
</div>
48-
</div>
14+
return (
15+
<div className="relative min-h-screen overflow-hidden bg-background">
16+
<header className="relative overflow-hidden bg-linear-to-br from-slate-950 via-indigo-950 to-purple-800 pb-40 pt-12 text-white shadow-2xl shadow-indigo-950/40">
17+
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.25),transparent_60%)]" />
18+
<div className="pointer-events-none absolute inset-x-0 -bottom-40 h-72 bg-linear-to-b from-white/20 via-white/8 to-transparent blur-3xl" />
19+
<div className="relative z-10 mx-auto max-w-[1600px] px-3 sm:px-10">
20+
<div className="flex flex-col gap-10">
21+
<div className="grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.8fr)] md:items-center">
22+
<div className="space-y-6">
23+
<span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-1 text-[0.75rem] font-semibold uppercase tracking-[0.35em] text-white/75">
24+
Built with{" "}
25+
<a
26+
href="https://arkiv.network"
27+
target="_blank"
28+
rel="noreferrer"
29+
className="-m-4 p-4 z-1 relative inline-block"
30+
>
31+
<img
32+
src={`${import.meta.env.BASE_URL}arkiv-logo.svg`}
33+
alt="Arkiv Logo"
34+
className="w-14"
35+
/>
36+
</a>
37+
</span>
38+
<div className="space-y-6">
39+
<h1 className="text-3xl font-semibold tracking-tight sm:text-4xl lg:text-5xl text-balance">
40+
Ethereum Dashboard powered by Arkiv
41+
</h1>
42+
<p className="max-w-2xl text-base text-white/80 sm:text-lg">
43+
Monitor Ethereum&apos;s latest blocks, transaction flow, and
44+
gas price shifts through Arkiv&apos;s real-time data
45+
snapshots.
46+
</p>
47+
</div>
48+
</div>
4949

50-
<div className="grid gap-4 sm:grid-cols-2">
51-
<LatestBlockHighlight />
52-
<AverageGasPriceHighlight />
53-
<AverageTransactionsHighlight />
54-
<CurrentGasPriceHighlight />
55-
</div>
56-
</div>
57-
</div>
58-
</div>
59-
</header>
50+
<div className="grid gap-4 sm:grid-cols-2">
51+
<LatestBlockHighlight />
52+
<AverageGasPriceHighlight />
53+
<AverageTransactionsHighlight />
54+
<CurrentGasPriceHighlight />
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</header>
6060

61-
<div className="relative z-20 -mt-24 pb-20">
62-
<div className="mx-auto w-full max-w-[1600px] space-y-16 px-3 text-foreground sm:px-10 lg:px-16 xl:space-y-20">
63-
<main className="grid gap-12 xl:gap-14" id="overview">
64-
<section className="grid gap-6 xl:grid-cols-12" id="blocks">
65-
<LatestBlocksCard className="xl:col-span-8" />
66-
<BlockSearchCard className="xl:col-span-4" />
67-
</section>
61+
<div className="relative z-20 -mt-24 pb-20">
62+
<div className="mx-auto w-full max-w-[1600px] space-y-16 px-3 text-foreground sm:px-10 lg:px-16 xl:space-y-20">
63+
<main className="grid gap-12 xl:gap-14" id="overview">
64+
<section className="grid gap-6 xl:grid-cols-12" id="blocks">
65+
<LatestBlocksCard className="xl:col-span-8" />
66+
<BlockSearchCard className="xl:col-span-4" />
67+
</section>
6868

69-
<section className="grid gap-6 xl:grid-cols-12" id="glm-transfers">
70-
<GlmTransferCard className="xl:col-span-12" />
71-
</section>
69+
<section className="grid gap-6 xl:grid-cols-12" id="glm-transfers">
70+
<GlmTransferCard className="xl:col-span-12" />
71+
</section>
7272

73-
<section className="grid gap-6 xl:grid-cols-12" id="transactions">
74-
<TransactionHistoryCard className="xl:col-span-7" />
75-
<GasPriceTrendCard className="xl:col-span-5" />
76-
</section>
73+
<section className="grid gap-6 xl:grid-cols-12" id="transactions">
74+
<TransactionHistoryCard className="xl:col-span-7" />
75+
<GasPriceTrendCard className="xl:col-span-5" />
76+
</section>
7777

78-
<section className="grid gap-6 xl:grid-cols-12" id="gas">
79-
<TransactionHeatmapCard className="xl:col-span-6" />
80-
<GasPriceHeatmapCard className="xl:col-span-6" />
81-
</section>
82-
</main>
83-
</div>
84-
</div>
85-
</div>
86-
);
78+
<section className="grid gap-6 xl:grid-cols-12" id="gas">
79+
<TransactionHeatmapCard className="xl:col-span-6" />
80+
<GasPriceHeatmapCard className="xl:col-span-6" />
81+
</section>
82+
</main>
83+
</div>
84+
</div>
85+
86+
<footer className="border-t border-border bg-background py-8">
87+
<div className="mx-auto max-w-[1600px] px-3 sm:px-10 lg:px-16">
88+
<p className="text-center text-sm text-muted-foreground">
89+
Built with{" "}
90+
<a
91+
href="https://arkiv.network"
92+
target="_blank"
93+
rel="noopener noreferrer"
94+
className="font-medium text-foreground underline-offset-4 hover:underline"
95+
>
96+
Arkiv
97+
</a>{" "}
98+
·{" "}
99+
<a
100+
href="https://github.com/arkiv-network/dashboard-demo"
101+
target="_blank"
102+
rel="noopener noreferrer"
103+
className="font-medium text-foreground underline-offset-4 hover:underline"
104+
>
105+
View on GitHub
106+
</a>
107+
</p>
108+
</div>
109+
</footer>
110+
</div>
111+
);
87112
}
88113

89114
export default App;

0 commit comments

Comments
 (0)