hanzoai/computer
2
0
Fork 0
mirror of https://github.com/hanzoai/computer.git synced 2026-09-30 20:55:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Update metadata, remove Contact Sales button, fix overflow

Browse Source 
- Update page title to "Hanzo - On-Demand AI Supercomputing"
- Add comprehensive OpenGraph and Twitter meta tags
- Create OpenGraph image (1200x630) with branded design
- Remove Contact Sales button from header
- Fix horizontal overflow issues:
  - Add max-width: 100vw to html/body
  - Add overflow-hidden to background container
  - Prevent blur elements from causing horizontal scroll
- Add SEO keywords and canonical URL
- Improve social media sharing appearance
This commit is contained in:
zeekay
2025-10-30 14:56:58 -07:00
parent f942d357b1
commit d1bd7aa3ec
7 changed files with 191 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.playwright-mcp/og-image.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

App.tsx
+2 -2
View File
@@ -60,8 +60,8 @@ const App: React.FC = () => {
return (
<Router>
<CartProvider>
<div className="bg-dark-bg text-gray-200 font-sans antialiased relative overflow-x-hidden">
<div className="absolute top-0 left-0 w-full h-full z-0">
<div className="bg-dark-bg text-gray-200 font-sans antialiased relative overflow-x-hidden max-w-full">
<div className="absolute top-0 left-0 w-full h-full z-0 overflow-hidden">
<div className="absolute top-[-20%] left-[-20%] w-[60%] h-[60%] bg-secondary/10 rounded-full blur-[150px]"></div>
<div className="absolute bottom-[-20%] right-[-20%] w-[60%] h-[60%] bg-primary/10 rounded-full blur-[150px]"></div>
</div>
components/Header.tsx
-3
View File
@@ -147,9 +147,6 @@ const Header: React.FC<HeaderProps> = ({ onOpenSearch }) => {
</span>
)}
</Link>
<a href="https://hanzo.ai/contact" target="_blank" rel="noopener noreferrer" className="hidden sm:inline-block bg-primary text-black font-bold py-2 px-6 rounded-md hover:bg-primary-dark transition-all duration-300 transform hover:scale-105">
Contact Sales
</a>
<button
className="md:hidden text-white z-50"
onClick={() => setIsMenuOpen(!isMenuOpen)}
index.html
+27 -1
View File
@@ -4,7 +4,33 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hanzo.Computer - On-Demand AI Supercomputing</title>
<!-- Primary Meta Tags -->
<title>Hanzo - On-Demand AI Supercomputing | DGX, H100, H200 GPU Access</title>
<meta name="title" content="Hanzo - On-Demand AI Supercomputing | DGX, H100, H200 GPU Access" />
<meta name="description" content="Access NVIDIA DGX systems, H100 and H200 GPUs on-demand. Start with DGX Spark at $4,000 for 100 hours of compute. Enterprise AI infrastructure by Hanzo.AI." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://hanzo.computer/" />
<meta property="og:title" content="Hanzo - On-Demand AI Supercomputing | DGX, H100, H200 GPU Access" />
<meta property="og:description" content="Access NVIDIA DGX systems, H100 and H200 GPUs on-demand. Start with DGX Spark at $4,000 for 100 hours of compute. Enterprise AI infrastructure by Hanzo.AI." />
<meta property="og:image" content="https://hanzo.computer/og-image.jpg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://hanzo.computer/" />
<meta property="twitter:title" content="Hanzo - On-Demand AI Supercomputing | DGX, H100, H200 GPU Access" />
<meta property="twitter:description" content="Access NVIDIA DGX systems, H100 and H200 GPUs on-demand. Start with DGX Spark at $4,000 for 100 hours of compute. Enterprise AI infrastructure by Hanzo.AI." />
<meta property="twitter:image" content="https://hanzo.computer/og-image.jpg" />
<meta name="twitter:site" content="@hanzoai" />
<!-- Additional Meta Tags -->
<meta name="keywords" content="AI supercomputing, NVIDIA DGX, H100 GPU, H200 GPU, GPU rental, AI infrastructure, machine learning, deep learning, cloud GPU, DGX Spark" />
<meta name="author" content="Hanzo Industries Inc" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://hanzo.computer/" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
public/og-image.html
+155
View File
@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1200px;
height: 630px;
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.bg-blur {
position: absolute;
border-radius: 50%;
filter: blur(150px);
}
.bg-blur-1 {
top: -20%;
left: -10%;
width: 50%;
height: 50%;
background: rgba(45, 106, 227, 0.15);
}
.bg-blur-2 {
bottom: -20%;
right: -10%;
width: 50%;
height: 50%;
background: rgba(0, 255, 155, 0.15);
}
.content {
position: relative;
z-index: 10;
text-align: center;
padding: 60px;
max-width: 1000px;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 40px;
}
.logo svg {
width: 64px;
height: 64px;
fill: white;
}
.logo-text {
font-size: 48px;
font-weight: 800;
color: white;
letter-spacing: 1px;
}
.title {
font-size: 72px;
font-weight: 800;
color: white;
margin-bottom: 30px;
line-height: 1.1;
}
.highlight {
color: #00ff9b;
}
.subtitle {
font-size: 32px;
color: #a0a0a0;
margin-bottom: 40px;
line-height: 1.4;
}
.badges {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.badge {
background: rgba(0, 255, 155, 0.1);
border: 2px solid rgba(0, 255, 155, 0.3);
padding: 12px 30px;
border-radius: 50px;
font-size: 20px;
font-weight: 600;
color: #00ff9b;
display: flex;
align-items: center;
gap: 12px;
}
.badge svg {
width: 24px;
height: 24px;
fill: #00ff9b;
}
</style>
</head>
<body>
<div class="bg-blur bg-blur-1"></div>
<div class="bg-blur bg-blur-2"></div>
<div class="content">
<div class="logo">
<svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
<path d="M22.21 67V44.6369H0V67H22.21Z"></path>
<path d="M0 44.6369L22.21 46.8285V44.6369H0Z" opacity="0.7"></path>
<path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z"></path>
<path d="M22.21 0H0V22.3184H22.21V0Z"></path>
<path d="M66.7198 0H44.5098V22.3184H66.7198V0Z"></path>
<path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" opacity="0.7"></path>
<path d="M66.7198 67V44.6369H44.5098V67H66.7198Z"></path>
</svg>
<div class="logo-text">Hanzo</div>
</div>
<h1 class="title">
AI Supercomputing<br>
<span class="highlight">On Your Terms</span>
</h1>
<p class="subtitle">
Access NVIDIA DGX, H100 & H200 GPUs<br>
Starting at $4,000
</p>
<div class="badges">
<div class="badge">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
DGX Spark
</div>
<div class="badge">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
</svg>
H100 & H200
</div>
<div class="badge">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
On-Demand
</div>
</div>
</div>
</body>
</html>
public/og-image.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

src/index.css
+7 -1
View File
@@ -1,7 +1,13 @@
@import "tailwindcss";
html {
html,
body {
overflow-x: hidden;
max-width: 100vw;
}
body {
position: relative;
}
@theme {