hanzoai/hanzo.sh-native
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Refactor Hero component content

Browse Source 
Update Hero component with Hanzo Platform content, syntax highlighting, and updated links.
This commit is contained in:
Hanzo Dev
2025-02-20 21:09:45 +00:00
parent 599e4462c6
commit e41bc7bf55
3 changed files with 48 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -54,6 +54,7 @@
"react-hook-form": "^7.53.0",
"react-resizable-panels": "^2.1.3",
"react-router-dom": "^6.26.2",
"react-syntax-highlighter": "^15.6.1",
"recharts": "^2.12.7",
"sonner": "^1.5.0",
"tailwind-merge": "^2.5.2",
src/components/Hero.tsx
+35 -28
View File
@@ -1,8 +1,10 @@
import { Button } from "@/components/ui/button";
import { Download, Terminal, Copy } from "lucide-react";
import { Terminal, Copy } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
const Hero = () => {
const [showScript, setShowScript] = useState(false);
@@ -170,10 +172,10 @@ fi`;
<div className="max-w-7xl mx-auto grid grid-cols-1 gap-12">
<div className="space-y-8">
<h1 className="text-5xl md:text-6xl font-bold text-white leading-tight">
Develop & Deploy with Hanzo
Build Better Apps with Hanzo
</h1>
<p className="text-lg text-white/80 max-w-xl">
Install Hanzo Platform locally using this simple command:
Install Hanzo Platform locally to start building and deploying your applications:
</p>
<div className="flex items-center gap-4 bg-white/5 p-4 rounded-lg max-w-xl">
@@ -198,37 +200,42 @@ fi`;
</Button>
{showScript && (
<div className="bg-white/5 p-6 rounded-lg overflow-x-auto">
<pre className="text-sm text-white/80 font-mono">
<code>{installationScript}</code>
</pre>
<div className="bg-white/5 rounded-lg overflow-hidden">
<SyntaxHighlighter
language="bash"
style={vscDarkPlus}
customStyle={{
margin: 0,
padding: '1.5rem',
background: 'transparent'
}}
>
{installationScript}
</SyntaxHighlighter>
</div>
)}
<div className="space-y-4">
<h2 className="text-2xl font-bold text-white">What's Included:</h2>
<ul className="list-disc list-inside text-white/80 space-y-2">
<li>Hanzo Container Runtime</li>
<li>Hanzo Platform</li>
<li>Hanzo Base</li>
<li>Easy deployment to Hanzo Cloud</li>
<h2 className="text-2xl font-bold text-white">Hanzo Products:</h2>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-6 list-none">
<li className="bg-white/5 p-6 rounded-lg">
<h3 className="text-xl font-semibold text-white mb-2">Hanzo Platform</h3>
<p className="text-white/80">Modern application platform for building and deploying cloud-native applications</p>
</li>
<li className="bg-white/5 p-6 rounded-lg">
<h3 className="text-xl font-semibold text-white mb-2">Hanzo Base</h3>
<p className="text-white/80">Secure and scalable infrastructure for your applications</p>
</li>
<li className="bg-white/5 p-6 rounded-lg">
<h3 className="text-xl font-semibold text-white mb-2">Hanzo Cloud</h3>
<p className="text-white/80">Enterprise-grade cloud platform for production workloads</p>
</li>
<li className="bg-white/5 p-6 rounded-lg">
<h3 className="text-xl font-semibold text-white mb-2">Hanzo Container Runtime</h3>
<p className="text-white/80">Optimized container runtime for modern applications</p>
</li>
</ul>
</div>
<div className="grid grid-cols-3 gap-8 pt-8">
<div>
<div className="text-3xl font-bold text-white">5000+</div>
<div className="text-white/60">Active users</div>
</div>
<div>
<div className="text-3xl font-bold text-white">30.3k</div>
<div className="text-white/60">Installations</div>
</div>
<div>
<div className="text-3xl font-bold text-white">1200+</div>
<div className="text-white/60">Reviews</div>
</div>
</div>
</div>
</div>
</div>
src/components/Navbar.tsx
+12 -7
View File
@@ -8,14 +8,19 @@ const Navbar = () => {
<div className="max-w-7xl mx-auto flex items-center justify-between">
<div className="text-2xl font-bold text-white">Hanzo</div>
<div className="hidden md:flex items-center space-x-8">
<a href="#" className="text-white/80 hover:text-white transition-colors">Deposit</a>
<a href="#" className="text-white/80 hover:text-white transition-colors">Dashboard</a>
<a href="#" className="text-white/80 hover:text-white transition-colors">Company</a>
<a href="#" className="text-white/80 hover:text-white transition-colors">Pricing</a>
<Button variant="outline" className="text-white border-white/20 hover:bg-white/10">
Open your account
<a href="https://docs.hanzo.ai" className="text-white/80 hover:text-white transition-colors">Docs</a>
<a href="https://hanzo.ai/pricing" className="text-white/80 hover:text-white transition-colors">Pricing</a>
<Button
variant="outline"
className="text-white border-white/20 hover:bg-white/10"
onClick={() => window.location.href = 'https://console.hanzo.ai'}
>
Console
</Button>
<Button className="bg-white text-black hover:bg-white/90">
<Button
className="bg-white text-black hover:bg-white/90"
onClick={() => window.location.href = 'https://auth.hanzo.ai'}
>
Sign in
<LogIn className="w-4 h-4 ml-2" />
</Button>