Skip to content

Commit 0c73aa9

Browse files
Tristan-T-DevTristan-T-Dev
committed
ui: added all utility pages
1 parent bdef0a3 commit 0c73aa9

24 files changed

+2719
-79
lines changed

‎app/docs/layout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function DocsLayout({ children }: { children: React.ReactNode }) {
2+
return <>{children}</>; // No navbar wrapper
3+
}

‎app/docs/page.tsx‎

Lines changed: 56 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,60 @@
1+
'use client';
2+
import React, { useState } from 'react';
3+
import { DocsHeader } from '@/components/pages/docs-header';
4+
import { DocsSidebar } from '@/components/pages/docs-sidebar';
5+
import { DocsTOC } from '@/components/pages/docs-toc';
6+
import { DocsContent } from '@/components/pages/docs-content';
7+
18
export default function DocsPage() {
9+
const [sidebarOpen, setSidebarOpen] = useState(false);
10+
const [activePage, setActivePage] = useState('installation');
11+
12+
const tocItems = [
13+
{ id: 'quick-start', label: 'Automatic Setup' },
14+
{ id: 'manual-install', label: 'Manual Installation' },
15+
{ id: 'configuration', label: 'Configuration' },
16+
{ id: 'next-steps', label: 'Next Steps' }
17+
];
18+
19+
const renderPage = () => {
20+
switch (activePage) {
21+
case 'installation':
22+
return <DocsContent />;
23+
case 'overview':
24+
return (
25+
<section className="w-full max-w-4xl mx-auto p-8 lg:p-12">
26+
<h1 className="text-4xl font-bold text-white mb-6">Overview</h1>
27+
<p className="text-slate-400 leading-relaxed">Welcome to HyperKit documentation. This page provides an overview of the platform.</p>
28+
</section>
29+
);
30+
case 'quickstart':
31+
return (
32+
<section className="w-full max-w-4xl mx-auto p-8 lg:p-12">
33+
<h1 className="text-4xl font-bold text-white mb-6">Quickstart: First App</h1>
34+
<p className="text-slate-400 leading-relaxed">Get started building your first application with HyperKit.</p>
35+
</section>
36+
);
37+
default:
38+
return (
39+
<section className="w-full max-w-4xl mx-auto p-8 lg:p-12">
40+
<h1 className="text-4xl font-bold text-white mb-6">Page: {activePage}</h1>
41+
<p className="text-slate-400 leading-relaxed">This page is under construction.</p>
42+
</section>
43+
);
44+
}
45+
};
46+
247
return (
3-
<div className="min-h-screen flex items-center justify-center p-8">
4-
<div className="text-center">
5-
<h1 className="text-4xl font-bold mb-4">Documentation</h1>
6-
<p className="text-gray-600">Documentation coming soon...</p>
48+
<div className="min-h-screen flex flex-col bg-[#05050A] text-slate-400 font-sans antialiased">
49+
<DocsHeader onMenuToggle={() => setSidebarOpen(!sidebarOpen)} />
50+
51+
<div className="flex flex-1 pt-14 w-full">
52+
<DocsSidebar onPageChange={setActivePage} activePage={activePage} />
53+
<main className="flex-1 flex items-start justify-center overflow-y-auto">
54+
{renderPage()}
55+
</main>
56+
<DocsTOC items={tocItems} />
757
</div>
858
</div>
9-
)
10-
}
59+
);
60+
}

‎app/layout-wrapper.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// app/layout-wrapper.tsx
2+
'use client';
3+
4+
import { usePathname } from "next/navigation";
5+
import Navbar from "@/components/layout/navbar";
6+
import Footer from "@/components/layout/footer";
7+
import { PerformanceProvider } from "@/contexts/PerformanceContext";
8+
import { NetworkProvider } from "@/contexts/NetworkContext";
9+
import { WalletProvider } from "@/contexts/WalletContext";
10+
import { SlippageProvider } from "@/contexts/SlippageContext";
11+
12+
export function LayoutWrapper({ children }: { children: React.ReactNode }) {
13+
const pathname = usePathname();
14+
const isDocsPage = pathname?.startsWith('/docs');
15+
16+
return (
17+
<PerformanceProvider>
18+
<NetworkProvider>
19+
<WalletProvider>
20+
<SlippageProvider>
21+
{!isDocsPage && <Navbar />}
22+
{children}
23+
{!isDocsPage && <Footer />}
24+
</SlippageProvider>
25+
</WalletProvider>
26+
</NetworkProvider>
27+
</PerformanceProvider>
28+
);
29+
}

‎app/layout.tsx‎

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1+
// app/layout.tsx (Server Component)
12
import type { Metadata } from "next";
23
import { Geist, Geist_Mono } from "next/font/google";
3-
import Navbar from "@/components/layout/navbar";
4-
import Footer from "@/components/layout/footer";
5-
import { PerformanceProvider } from "@/contexts/PerformanceContext";
6-
import { NetworkProvider } from "@/contexts/NetworkContext";
7-
import { WalletProvider } from "@/contexts/WalletContext";
8-
import { SlippageProvider } from "@/contexts/SlippageContext";
94
import { Providers } from "@/app/providers";
105
import { Analytics } from "@vercel/analytics/next";
6+
import { LayoutWrapper } from "./layout-wrapper";
117
import "./globals.css";
128

139
const geistSans = Geist({
@@ -26,41 +22,23 @@ export const metadata: Metadata = {
2622
icons: {
2723
icon: [
2824
{ url: '/logo/brand/hyperkit/Hyperkit Abstract.svg', type: 'image/svg+xml' },
29-
{ url: '/logo/brand/hyperkit/Hyperkit Abstract.svg', sizes: '64x64', type: 'image/svg+xml' },
30-
{ url: '/logo/brand/hyperkit/Hyperkit Abstract.svg', sizes: '32x32', type: 'image/svg+xml' },
31-
],
32-
shortcut: '/logo/brand/hyperkit/Hyperkit Abstract.svg',
33-
apple: [
34-
{ url: '/logo/brand/hyperkit/Hyperkit Abstract.svg', sizes: '180x180', type: 'image/svg+xml' },
3525
],
3626
},
3727
};
3828

3929
export default function RootLayout({
4030
children,
41-
}: Readonly<{
31+
}: {
4232
children: React.ReactNode;
43-
}>) {
33+
}) {
4434
return (
4535
<html lang="en">
46-
<body
47-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
48-
>
36+
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
4937
<Providers>
50-
<PerformanceProvider>
51-
<NetworkProvider>
52-
<WalletProvider>
53-
<SlippageProvider>
54-
<Navbar />
55-
{children}
56-
<Footer />
57-
</SlippageProvider>
58-
</WalletProvider>
59-
</NetworkProvider>
60-
</PerformanceProvider>
38+
<LayoutWrapper>{children}</LayoutWrapper>
6139
</Providers>
6240
<Analytics />
6341
</body>
6442
</html>
6543
);
66-
}
44+
}

‎app/not-found.tsx‎

Lines changed: 147 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,158 @@
11
"use client";
2-
import React, { useState } from 'react';
3-
import { Search, ArrowLeft, Home } from 'lucide-react';
2+
3+
import React from "react";
4+
import {
5+
Search,
6+
ArrowRight,
7+
Home,
8+
BookOpen,
9+
LifeBuoy,
10+
ExternalLink,
11+
Twitter,
12+
Github,
13+
Disc,
14+
} from "lucide-react";
415

516
export default function NotFoundPage() {
17+
return (
18+
<div className="bg-[#03040B] text-slate-300 min-h-screen flex flex-col relative overflow-hidden selection:bg-indigo-500/30">
19+
{/* Ambient Background Effects */}
20+
<div className="fixed top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-indigo-600/20 rounded-full blur-[120px] -z-10 pointer-events-none"></div>
21+
<div className="fixed bottom-0 right-0 w-[800px] h-[600px] bg-purple-900/10 rounded-full blur-[100px] -z-10 pointer-events-none"></div>
22+
<div className="absolute inset-0 grid-bg -z-10 h-full w-full pointer-events-none"></div>
623

7-
const handleGoBack = () => {
8-
window.history.back();
9-
};
24+
{/* Main Content */}
25+
<main className="flex-grow flex flex-col items-center justify-center px-4 relative z-10 py-20">
26+
{/* 404 Visual */}
27+
<div className="relative flex items-center justify-center gap-4 md:gap-8 mb-8 select-none">
28+
<span className="text-8xl md:text-[10rem] font-medium tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-white to-white/40 leading-none">
29+
4
30+
</span>
1031

11-
const handleGoHome = () => {
12-
window.location.href = '/';
13-
};
32+
{/* rotating planet */}
33+
<div className="relative w-24 h-24 md:w-40 md:h-40 flex items-center justify-center">
34+
<div className="absolute inset-0 rounded-full border border-indigo-500/30 shadow-[0_0_50px_-12px_rgba(99,102,241,0.5)]"></div>
1435

15-
return (
16-
<div className="min-h-screen bg-black flex items-center justify-center px-4 relative overflow-hidden">
17-
{/* Large 404 Background Text */}
18-
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
19-
<div className="text-[clamp(200px,40vw,600px)] font-bold text-[#A37EF1]/10 leading-none select-none">
20-
404
36+
<div className="absolute inset-2 md:inset-4 rounded-full border border-indigo-400/20 bg-indigo-950/20 backdrop-blur-md overflow-hidden flex items-center justify-center globe-rotate">
37+
<svg
38+
className="w-full h-full text-indigo-400/40 opacity-50"
39+
viewBox="0 0 100 100"
40+
fill="none"
41+
stroke="currentColor"
42+
strokeWidth="0.5"
43+
>
44+
<circle cx="50" cy="50" r="48"></circle>
45+
<ellipse cx="50" cy="50" rx="48" ry="16"></ellipse>
46+
<ellipse cx="50" cy="50" rx="48" ry="32"></ellipse>
47+
<ellipse cx="50" cy="50" rx="16" ry="48"></ellipse>
48+
<ellipse cx="50" cy="50" rx="32" ry="48"></ellipse>
49+
<path d="M2 50 H98 M50 2 V98"></path>
50+
</svg>
51+
52+
<div className="absolute w-2 h-2 bg-white rounded-full shadow-[0_0_20px_5px_rgba(255,255,255,0.8)]"></div>
53+
</div>
54+
55+
<div className="absolute inset-0 animate-[spin_6s_linear_infinite]">
56+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-[0_0_10px_2px_rgba(34,211,238,0.8)]"></div>
57+
</div>
58+
</div>
59+
60+
<span className="text-8xl md:text-[10rem] font-medium tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-white to-white/40 leading-none">
61+
4
62+
</span>
2163
</div>
22-
</div>
2364

24-
{/* Content */}
25-
<div className="relative z-10 text-center max-w-2xl w-full">
26-
<h1 className="text-5xl md:text-6xl font-semibold text-white mb-6">
27-
We lost this page
28-
</h1>
29-
30-
<p className="text-lg md:text-xl text-zinc-300 mb-12">
31-
The page you are looking for doesn't exist or has been moved.
32-
</p>
33-
34-
{/* Action Buttons */}
35-
<div className="flex gap-4 justify-center flex-wrap">
36-
<button
37-
onClick={handleGoBack}
38-
className="px-6 py-3.5 bg-transparent border-2 border-white text-white font-medium rounded-lg hover:bg-white hover:text-black transition-all flex items-center gap-2"
39-
>
40-
<ArrowLeft className="w-4 h-4" />
41-
Go back
42-
</button>
43-
<button
44-
onClick={handleGoHome}
45-
className="px-6 py-3.5 bg-[#7C3AED] text-white font-medium rounded-lg hover:bg-[#6a31cd] transition-colors flex items-center gap-2"
46-
>
47-
<Home className="w-4 h-4" />
48-
Go Home
49-
</button>
65+
{/* Text Content */}
66+
<div className="text-center max-w-2xl mx-auto space-y-6">
67+
<h1 className="text-2xl md:text-3xl font-medium text-white tracking-tight">
68+
Signal Lost in Deep Space
69+
</h1>
70+
<p className="text-lg text-slate-400 leading-relaxed">
71+
The coordinates you are looking for do not exist or have been moved.
72+
Use the navigation system below to reorient.
73+
</p>
5074
</div>
51-
</div>
75+
76+
{/* Search Bar */}
77+
<div className="w-full max-w-md mt-10 relative group">
78+
<div className="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full opacity-30 group-hover:opacity-60 blur transition duration-500"></div>
79+
80+
<div className="relative flex items-center bg-[#0B0C15] rounded-full border border-white/10 p-1.5 shadow-xl">
81+
<Search className="w-5 h-5 ml-4 text-slate-500" strokeWidth={1.5} />
82+
<input
83+
type="text"
84+
placeholder="Search pages, docs, or status..."
85+
className="w-full bg-transparent border-none text-slate-200 placeholder-slate-600 focus:ring-0 px-4 py-2 text-base outline-none font-normal h-10"
86+
/>
87+
<button className="bg-white/10 hover:bg-white/20 text-white rounded-full p-2 transition-colors">
88+
<ArrowRight className="w-4 h-4" strokeWidth={1.5} />
89+
</button>
90+
</div>
91+
</div>
92+
93+
{/* Quick Links Grid */}
94+
<div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-4 w-full max-w-3xl px-4">
95+
<CardLink
96+
icon={<Home className="w-5 h-5 text-indigo-400" strokeWidth={1.5} />}
97+
title="Return Home"
98+
desc="Back to the dashboard."
99+
bg="bg-indigo-500/10"
100+
/>
101+
102+
<CardLink
103+
icon={
104+
<BookOpen className="w-5 h-5 text-purple-400" strokeWidth={1.5} />
105+
}
106+
title="Documentation"
107+
desc="Guides and API references."
108+
bg="bg-purple-500/10"
109+
/>
110+
111+
<CardLink
112+
icon={
113+
<LifeBuoy className="w-5 h-5 text-cyan-400" strokeWidth={1.5} />
114+
}
115+
title="Support"
116+
desc="Get help from our team."
117+
bg="bg-cyan-500/10"
118+
/>
119+
</div>
120+
121+
<div className="mt-16 flex items-center gap-6">
122+
<span className="text-sm text-slate-600">Error Code: 404_NOT_FOUND</span>
123+
<div className="h-1 w-1 rounded-full bg-slate-700"></div>
124+
<a className="text-sm text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1">
125+
System Status <ExternalLink className="w-3 h-3" />
126+
</a>
127+
</div>
128+
</main>
52129
</div>
53130
);
54-
}
131+
}
132+
133+
/* Small Card Component */
134+
function CardLink({
135+
icon,
136+
title,
137+
desc,
138+
bg,
139+
}: {
140+
icon: React.ReactNode;
141+
title: string;
142+
desc: string;
143+
bg: string;
144+
}) {
145+
return (
146+
<a className="group relative flex flex-col p-6 rounded-2xl bg-white/[0.03] hover:bg-white/[0.06] border border-white/5 hover:border-white/10 transition-all duration-300">
147+
<div
148+
className={`mb-4 w-10 h-10 rounded-full ${bg} flex items-center justify-center group-hover:scale-110 transition-transform duration-300`}
149+
>
150+
{icon}
151+
</div>
152+
<h3 className="text-lg font-medium text-white mb-1">{title}</h3>
153+
<p className="text-base text-slate-500 group-hover:text-slate-400 transition-colors">
154+
{desc}
155+
</p>
156+
</a>
157+
);
158+
}

‎components/layout/navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default function Navbar() {
5050
</div>
5151
<a href="/foundation" className="hover:text-white transition-colors">Foundation</a>
5252
<a href="/solutions" className="hover:text-white transition-colors">Solutions</a>
53-
<a href="#" className="hover:text-white transition-colors">Docs</a>
53+
<a href="/docs" className="hover:text-white transition-colors">Docs</a>
5454
<a href="/products" className="hover:text-white transition-colors">Products</a>
5555
<a href="/roadmap" className="hover:text-white transition-colors">Roadmap</a>
5656
</div>

0 commit comments

Comments
 (0)