mirror of
https://github.com/luxfi/help.git
synced 2026-09-24 00:24:29 +00:00
zeekayandHanzo Dev
b95005a3da
A version written into a manifest is written into every manifest that wants it, which is how eslint came to exist in a hundred and four forms across this estate and how a package came to resolve twice at run time. The catalog moves the number out of the manifest: a manifest names the package, the workspace names the version. Four are held below their latest because the newer release cannot be used, and the reason is recorded rather than the version alone: @noble/hashes 2 renamed every subpath the web3 stack imports, @splinetool/runtime 2 depends on a package that was never published, @dynamic-labs 5.4.1 the same, and react-resizable-panels 3 points its types condition at the bundle. Co-authored-by: Hanzo Dev <[email protected]>
263 lines
10 KiB
TypeScript
263 lines
10 KiB
TypeScript
import Link from 'next/link';
|
|
import { Box, css } from '@hanzo/ui'
|
|
import { Book, FileText, Wallet, Code, Network, Shield, ArrowRight, ExternalLink, MessageCircle, HelpCircle, Search, Zap, Globe } from 'lucide-react'
|
|
import { Github, Twitter } from '@hanzo/ui/brands';
|
|
import { Logo } from '@/components/logo';
|
|
import { ThemeToggle } from '@/components/theme-toggle';
|
|
|
|
const helpCategories = [
|
|
{
|
|
title: 'Getting Started',
|
|
description: 'New to Lux? Start here with setup guides and tutorials.',
|
|
icon: Book,
|
|
href: 'https://docs.lux.network/getting-started',
|
|
color: 'blue',
|
|
},
|
|
{
|
|
title: 'Lux Proposals (LPs)',
|
|
description: 'Technical specifications and standards for Lux Network.',
|
|
icon: FileText,
|
|
href: 'https://lps.lux.network',
|
|
color: 'purple',
|
|
},
|
|
{
|
|
title: 'Wallet & Accounts',
|
|
description: 'Help with wallets, accounts, and transaction management.',
|
|
icon: Wallet,
|
|
href: 'https://docs.lux.network/wallet',
|
|
color: 'green',
|
|
},
|
|
{
|
|
title: 'Developer Docs',
|
|
description: 'APIs, SDKs, and integration guides for developers.',
|
|
icon: Code,
|
|
href: 'https://docs.lux.network/developers',
|
|
color: 'amber',
|
|
},
|
|
{
|
|
title: 'Network & Nodes',
|
|
description: 'Running nodes, validators, and network architecture.',
|
|
icon: Network,
|
|
href: 'https://docs.lux.network/nodes',
|
|
color: 'cyan',
|
|
},
|
|
{
|
|
title: 'Security',
|
|
description: 'Security best practices and audits information.',
|
|
icon: Shield,
|
|
href: 'https://docs.lux.network/security',
|
|
color: 'red',
|
|
},
|
|
];
|
|
|
|
const quickLinks = [
|
|
{
|
|
title: 'Main Documentation',
|
|
href: 'https://docs.lux.network',
|
|
icon: Book,
|
|
},
|
|
{
|
|
title: 'Lux Proposals',
|
|
href: 'https://lps.lux.network',
|
|
icon: FileText,
|
|
},
|
|
{
|
|
title: 'GitHub Discussions',
|
|
href: 'https://github.com/luxfi/lps/discussions',
|
|
icon: MessageCircle,
|
|
},
|
|
{
|
|
title: 'Community Forum',
|
|
href: 'https://lux.forum',
|
|
icon: Globe,
|
|
},
|
|
];
|
|
|
|
const colorClasses: Record<string, string> = {
|
|
blue: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
|
|
purple: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
|
|
green: 'bg-green-500/10 text-green-600 dark:text-green-400',
|
|
amber: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',
|
|
cyan: 'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400',
|
|
red: 'bg-red-500/10 text-red-600 dark:text-red-400',
|
|
};
|
|
|
|
export default function HelpPage() {
|
|
return (
|
|
<Box className="min-h-screen flex flex-col">
|
|
{/* Header */}
|
|
<Box tag="header" className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<Box className="container flex h-16 items-center justify-between px-4 md:px-6 mx-auto max-w-6xl">
|
|
<Link href="/" style={css('flex items-center gap-2')}>
|
|
<Logo size={28} />
|
|
<Box tag="span" className="font-semibold text-lg">Help Center</Box>
|
|
</Link>
|
|
|
|
<Box className="flex items-center gap-4">
|
|
<Box tag="a"
|
|
href="https://docs.lux.network"
|
|
className="hidden sm:flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
Docs
|
|
<ExternalLink style={css('h-3 w-3')} />
|
|
</Box>
|
|
<Box tag="a"
|
|
href="https://github.com/luxfi"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<Github style={css('h-5 w-5')} />
|
|
</Box>
|
|
<ThemeToggle />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Main Content */}
|
|
<Box tag="main" className="flex-1">
|
|
{/* Hero */}
|
|
<Box tag="section" className="py-16 md:py-24 px-4 md:px-6">
|
|
<Box className="container mx-auto max-w-4xl text-center">
|
|
<Box className="inline-flex items-center justify-center p-3 bg-primary/5 rounded-full mb-6">
|
|
<HelpCircle style={css('h-8 w-8 text-primary')} />
|
|
</Box>
|
|
<Box tag="h1" className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
|
|
How can we help?
|
|
</Box>
|
|
<Box tag="p" className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
|
|
Find documentation, guides, and resources to help you build on Lux Network.
|
|
</Box>
|
|
|
|
{/* Search placeholder */}
|
|
<Box className="max-w-xl mx-auto">
|
|
<Box className="relative">
|
|
<Search style={css('absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground')} />
|
|
<Box tag="input"
|
|
type="text"
|
|
placeholder="Search documentation..."
|
|
className="w-full h-12 pl-12 pr-4 rounded-xl border border-border bg-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
|
|
disabled
|
|
/>
|
|
</Box>
|
|
<Box tag="p" className="text-xs text-muted-foreground mt-2">
|
|
Search coming soon. Use the categories below to find what you need.
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Categories */}
|
|
<Box tag="section" className="py-12 px-4 md:px-6 bg-muted/30">
|
|
<Box className="container mx-auto max-w-6xl">
|
|
<Box className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
{helpCategories.map((category) => {
|
|
const Icon = category.icon;
|
|
return (
|
|
<Box tag="a"
|
|
key={category.title}
|
|
href={category.href}
|
|
className="group p-6 rounded-xl border border-border/50 bg-background hover:border-primary/30 hover:shadow-lg transition-all"
|
|
>
|
|
<Box className={`inline-flex p-3 rounded-lg ${colorClasses[category.color]} mb-4`}>
|
|
<Icon style={css('h-6 w-6')} />
|
|
</Box>
|
|
<Box tag="h3" className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors">
|
|
{category.title}
|
|
</Box>
|
|
<Box tag="p" className="text-sm text-muted-foreground mb-4">
|
|
{category.description}
|
|
</Box>
|
|
<Box tag="span" className="inline-flex items-center gap-1 text-sm font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity">
|
|
Learn more
|
|
<ArrowRight style={css('h-4 w-4')} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Quick Links */}
|
|
<Box tag="section" className="py-16 px-4 md:px-6">
|
|
<Box className="container mx-auto max-w-4xl">
|
|
<Box tag="h2" className="text-2xl font-bold mb-8 text-center">Quick Links</Box>
|
|
<Box className="grid gap-4 sm:grid-cols-2">
|
|
{quickLinks.map((link) => {
|
|
const Icon = link.icon;
|
|
return (
|
|
<Box tag="a"
|
|
key={link.title}
|
|
href={link.href}
|
|
className="flex items-center gap-4 p-4 rounded-lg border border-border/50 hover:border-primary/30 hover:bg-muted/50 transition-all"
|
|
>
|
|
<Box className="p-2 rounded-lg bg-muted">
|
|
<Icon style={css('h-5 w-5')} />
|
|
</Box>
|
|
<Box tag="span" className="font-medium">{link.title}</Box>
|
|
<ExternalLink style={css('h-4 w-4 ml-auto text-muted-foreground')} />
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* CTA */}
|
|
<Box tag="section" className="py-16 px-4 md:px-6 bg-muted/30 border-t border-border/50">
|
|
<Box className="container mx-auto max-w-4xl text-center">
|
|
<Zap style={css('h-10 w-10 mx-auto mb-4 text-primary')} />
|
|
<Box tag="h2" className="text-2xl font-bold mb-4">Can't find what you're looking for?</Box>
|
|
<Box tag="p" className="text-muted-foreground mb-6 max-w-xl mx-auto">
|
|
Join our community discussions to get help from the team and other developers.
|
|
</Box>
|
|
<Box className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Box tag="a"
|
|
href="https://github.com/luxfi/lps/discussions"
|
|
className="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg bg-primary text-primary-foreground font-medium hover:opacity-90 transition-opacity"
|
|
>
|
|
<MessageCircle style={css('h-4 w-4')} />
|
|
Join Discussion
|
|
</Box>
|
|
<Box tag="a"
|
|
href="https://github.com/luxfi"
|
|
className="inline-flex items-center justify-center gap-2 h-11 px-6 rounded-lg border border-border hover:bg-muted transition-colors font-medium"
|
|
>
|
|
<Github style={css('h-4 w-4')} />
|
|
View on GitHub
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Footer */}
|
|
<Box tag="footer" className="border-t border-border/50 py-8 px-4 md:px-6">
|
|
<Box className="container mx-auto max-w-6xl">
|
|
<Box className="flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<Box className="flex items-center gap-2">
|
|
<Logo size={20} />
|
|
<Box tag="span" className="text-sm text-muted-foreground">
|
|
BSD-3-Clause © 2020 - {new Date().getFullYear()} Lux Industries Inc.
|
|
</Box>
|
|
</Box>
|
|
<Box className="flex items-center gap-6">
|
|
<Box tag="a"
|
|
href="https://github.com/luxfi"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<Github style={css('h-5 w-5')} />
|
|
</Box>
|
|
<Box tag="a"
|
|
href="https://twitter.com/luxfi"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<Twitter style={css('h-5 w-5')} />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|