mirror of
https://github.com/hanzoai/computer.git
synced 2026-09-30 20:55:46 +00:00
feat: Add comprehensive use cases, industries, and hardware purchase focus
Major content additions to prioritize hardware purchase while providing cloud options: 1. Why Buy Hardware Section (NEW): - 4 key benefits: Lower TCO, Complete control, Predictable performance, Unlimited usage - Cost comparison matrix: DGX Spark ($4K) vs Cloud 6-Month ($135K) vs Cloud Annual ($240K) - Shows 33x-60x cost savings with hardware ownership - Emphasizes ROI in 3-6 months with hardware purchase 2. Use Cases & Industries Section (NEW): - 3 use cases: Training, Fine-Tuning, Inference - Detailed benefits and workflows for each stage - 5 industry solutions: Generative AI, Autonomous/Robotics, Computer Vision, HPC, Audio/NLP - Real-world examples for each industry vertical 3. Cloud Pricing Updates: - Repositioned as secondary option with emphasis on hardware purchase - Updated header: "Need Cloud Instead?" with clear messaging - Prominent "Visit Hanzo Cloud" CTA button linking to hanzo.ai - All pricing CTAs now link to hanzo.ai for cloud access - Reference pricing note directing users to full cloud offering Content Strategy: - Hardware purchase (DGX Spark) positioned as best value and primary recommendation - Cloud presented as flexible alternative with direct links to Hanzo.AI - Comprehensive use case coverage for Training, Fine-Tuning, Inference workflows - Industry solutions showcase breadth of applications - Clear ROI messaging: Hardware pays for itself in 3-6 months Page Flow: 1. Hero → DGX Spark Highlight 2. Partners → Features → Hardware Specs 3. Image Gallery 4. Use Cases (Training/Fine-Tuning/Inference) + Industries 5. Testimonials (Social Proof) 6. Why Buy Hardware (Cost Comparison emphasizing ownership) 7. Trust & Security 8. Pricing (DGX Spark focus) 9. Cloud Pricing (Secondary option with hanzo.ai links) 10. FAQ → Call to Action Build verified: 379KB JS (+23KB), 48KB CSS (+4KB) All components responsive and optimized
This commit is contained in:
@@ -14,6 +14,8 @@ import ImageGallery from './components/ImageGallery';
|
||||
import Testimonials from './components/Testimonials';
|
||||
import FAQ from './components/FAQ';
|
||||
import TrustSecurity from './components/TrustSecurity';
|
||||
import WhyBuyHardware from './components/WhyBuyHardware';
|
||||
import UseCases from './components/UseCases';
|
||||
import CloudPricing from './components/CloudPricing';
|
||||
import SearchModal from './components/SearchModal';
|
||||
import Cart from './src/pages/Cart';
|
||||
@@ -30,7 +32,9 @@ const HomePage: React.FC<{ onSelectProduct: (productName: string) => void }> = (
|
||||
<Features />
|
||||
<HardwareSpec onSelectProduct={onSelectProduct} />
|
||||
<ImageGallery />
|
||||
<UseCases />
|
||||
<Testimonials />
|
||||
<WhyBuyHardware />
|
||||
<TrustSecurity />
|
||||
<Pricing />
|
||||
<CloudPricing />
|
||||
|
||||
+29
-12
@@ -123,16 +123,30 @@ const CloudPricing: React.FC = () => {
|
||||
{/* Header */}
|
||||
<div className="text-center mb-12">
|
||||
<div className="inline-flex items-center space-x-2 bg-secondary/10 border border-secondary/30 rounded-full px-4 py-2 mb-4">
|
||||
<svg className="w-5 h-5 text-secondary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
|
||||
<svg className="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||||
</svg>
|
||||
<span className="text-secondary font-semibold">NVIDIA GPU Cloud Instances</span>
|
||||
<span className="text-secondary font-semibold">Need Cloud Instead?</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
Enterprise-Grade GPU Infrastructure
|
||||
Explore Hanzo Cloud for On-Demand GPU Access
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 max-w-3xl mx-auto mb-8">
|
||||
One of the largest selections of NVIDIA GPUs available in the cloud. Powered by the latest Blackwell and Hopper architectures.
|
||||
<p className="text-xl text-gray-400 max-w-3xl mx-auto mb-4">
|
||||
While we recommend <strong className="text-white">buying your own hardware</strong> for the best value and control, Hanzo Cloud offers flexible, pay-as-you-go GPU instances when you need them.
|
||||
</p>
|
||||
<a
|
||||
href="https://hanzo.ai"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center px-8 py-4 bg-secondary text-white font-bold rounded-lg hover:bg-secondary/90 transition-all duration-300 transform hover:scale-105 mb-8"
|
||||
>
|
||||
Visit Hanzo Cloud
|
||||
<svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
<p className="text-sm text-gray-500 max-w-2xl mx-auto mb-8">
|
||||
Reference pricing shown below for cloud instances. For detailed cloud pricing and instant deployment, visit Hanzo.AI.
|
||||
</p>
|
||||
|
||||
{/* Period Selector */}
|
||||
@@ -242,15 +256,18 @@ const CloudPricing: React.FC = () => {
|
||||
{getSavings(instance)}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className={`mt-3 px-6 py-2 rounded-lg font-semibold transition-all duration-300 ${
|
||||
<a
|
||||
href="https://hanzo.ai"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`mt-3 inline-block px-6 py-2 rounded-lg font-semibold transition-all duration-300 text-center ${
|
||||
instance.monthlyPrice
|
||||
? 'bg-primary text-black hover:bg-primary-dark'
|
||||
: 'border border-primary text-primary hover:bg-primary/10'
|
||||
? 'bg-secondary text-white hover:bg-secondary/90'
|
||||
: 'border border-secondary text-secondary hover:bg-secondary/10'
|
||||
}`}
|
||||
>
|
||||
{instance.monthlyPrice ? 'Get Started' : 'Contact Sales'}
|
||||
</button>
|
||||
{instance.monthlyPrice ? 'Get Cloud Access' : 'Contact Sales'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const UseCases: React.FC = () => {
|
||||
const useCases = [
|
||||
{
|
||||
icon: '🧠',
|
||||
title: 'Training',
|
||||
subtitle: 'Build Models from Scratch or Fine-Tune Foundation Models',
|
||||
description: 'Training is not a one-size-fits-all approach. Whether training Large Language Models (LLMs), Natural Language Processing (NLP), Generative AI (GenAI), or Computer Vision (CV) models, you need the right solution with scalability.',
|
||||
benefits: [
|
||||
'Profile and understand scaling needs',
|
||||
'Close coordination with data scientists',
|
||||
'Build from scratch or use foundation models',
|
||||
'Optimal resource allocation'
|
||||
],
|
||||
badge: 'Most Intensive',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
icon: '🎯',
|
||||
title: 'Fine-Tuning',
|
||||
subtitle: 'Optimize Models for Your Specific Use Case',
|
||||
description: 'Tuning a foundation AI model is imperative to achieving optimal results. Whether adding data to enhance training or adjusting model weights, tuning addresses specific use cases and needs.',
|
||||
benefits: [
|
||||
'Weight adjustments for better output',
|
||||
'Data augmentation with relevant prompts',
|
||||
'RLHF (Reinforcement Learning from Human Feedback)',
|
||||
'Supervised fine-tuning capabilities'
|
||||
],
|
||||
badge: 'Precision Focus',
|
||||
color: 'secondary'
|
||||
},
|
||||
{
|
||||
icon: '⚡',
|
||||
title: 'Inference',
|
||||
subtitle: 'Deploy Models for Production Workloads',
|
||||
description: 'Run your trained models in production with optimal performance. Support for LLMs, NLP, and CV models with the right balance of speed and cost.',
|
||||
benefits: [
|
||||
'Real-time and batch inference',
|
||||
'Model footprint optimization',
|
||||
'Performance and cost guidance',
|
||||
'Enterprise-grade deployment'
|
||||
],
|
||||
badge: 'Production Ready',
|
||||
color: 'green'
|
||||
}
|
||||
];
|
||||
|
||||
const industries = [
|
||||
{
|
||||
icon: '✨',
|
||||
title: 'Generative AI',
|
||||
description: 'Create breathtaking content with models specifically designed for generative AI workloads',
|
||||
examples: ['Text generation', 'Image synthesis', 'Code generation', 'Video creation']
|
||||
},
|
||||
{
|
||||
icon: '🤖',
|
||||
title: 'Autonomous & Robotics',
|
||||
description: 'Data collection and analysis for autonomous systems with expertise in risk mitigation',
|
||||
examples: ['Self-driving vehicles', 'Warehouse automation', 'Drone navigation', 'Robot vision']
|
||||
},
|
||||
{
|
||||
icon: '👁️',
|
||||
title: 'Computer Vision',
|
||||
description: 'Groundbreaking improvements across image and object classification, detection, and tracking',
|
||||
examples: ['Object detection', 'Facial recognition', 'Medical imaging', 'Quality inspection']
|
||||
},
|
||||
{
|
||||
icon: '🔬',
|
||||
title: 'High Performance Computing',
|
||||
description: 'Achieve ambitious goals with cloud-based HPC powered by top-tier GPUs',
|
||||
examples: ['Scientific simulations', 'Financial modeling', 'Weather forecasting', 'Drug discovery']
|
||||
},
|
||||
{
|
||||
icon: '🎧',
|
||||
title: 'Audio & NLP',
|
||||
description: 'Latest accelerators for NLP and audio processing across language applications',
|
||||
examples: ['Speech recognition', 'Language translation', 'Sentiment analysis', 'Audio synthesis']
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="use-cases" className="py-24 bg-dark-bg">
|
||||
<div className="container mx-auto px-6">
|
||||
{/* Use Cases Section */}
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center space-x-2 bg-primary/10 border border-primary/30 rounded-full px-4 py-2 mb-4">
|
||||
<svg className="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
<span className="text-primary font-semibold">Use Cases</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
Built for Every Stage of AI Development
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 max-w-3xl mx-auto">
|
||||
From initial model training to production inference, DGX Spark and our enterprise solutions support your entire AI workflow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-24">
|
||||
{useCases.map((useCase, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-black/40 backdrop-blur-sm border border-dark-border rounded-xl p-8 hover:border-primary/50 transition-all duration-300 group relative overflow-hidden"
|
||||
>
|
||||
<div className={`absolute top-0 left-0 w-full h-1 bg-gradient-to-r ${
|
||||
useCase.color === 'primary' ? 'from-primary to-primary/50' :
|
||||
useCase.color === 'secondary' ? 'from-secondary to-secondary/50' :
|
||||
'from-green-400 to-green-600'
|
||||
}`}></div>
|
||||
|
||||
<div className="text-center mb-6">
|
||||
<div className="text-6xl mb-4">{useCase.icon}</div>
|
||||
<div className={`inline-block px-3 py-1 rounded-full text-xs font-semibold mb-3 ${
|
||||
useCase.color === 'primary' ? 'bg-primary/20 text-primary' :
|
||||
useCase.color === 'secondary' ? 'bg-secondary/20 text-secondary' :
|
||||
'bg-green-500/20 text-green-400'
|
||||
}`}>
|
||||
{useCase.badge}
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-white mb-2 group-hover:text-primary transition-colors">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className="text-gray-400 font-semibold text-sm mb-4">{useCase.subtitle}</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">{useCase.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{useCase.benefits.map((benefit, idx) => (
|
||||
<div key={idx} className="flex items-start">
|
||||
<svg className="w-5 h-5 text-primary mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-gray-300 text-sm">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Industries Section */}
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center space-x-2 bg-secondary/10 border border-secondary/30 rounded-full px-4 py-2 mb-4">
|
||||
<svg className="w-5 h-5 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
<span className="text-secondary font-semibold">Industry Solutions</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
Powering Innovation Across Industries
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 max-w-3xl mx-auto">
|
||||
Leading organizations across industries trust our NVIDIA-powered infrastructure for their most demanding AI workloads.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{industries.map((industry, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-black/40 backdrop-blur-sm border border-dark-border rounded-xl p-6 hover:border-secondary/50 transition-all duration-300"
|
||||
>
|
||||
<div className="text-5xl mb-4 text-center">{industry.icon}</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2 text-center">{industry.title}</h3>
|
||||
<p className="text-gray-300 mb-4 text-center text-sm">{industry.description}</p>
|
||||
<div className="flex flex-wrap gap-2 justify-center">
|
||||
{industry.examples.map((example, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-3 py-1 bg-secondary/10 border border-secondary/30 rounded-full text-secondary text-xs font-semibold"
|
||||
>
|
||||
{example}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="mt-16 text-center">
|
||||
<div className="bg-gradient-to-r from-primary/10 to-secondary/10 border border-primary/30 rounded-2xl p-8 md:p-12">
|
||||
<h3 className="text-3xl font-bold text-white mb-4">
|
||||
Ready to Accelerate Your AI Development?
|
||||
</h3>
|
||||
<p className="text-gray-300 mb-6 max-w-2xl mx-auto">
|
||||
Whether you're training massive language models, fine-tuning for specific use cases, or deploying inference at scale, we have the perfect solution.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="#pricing"
|
||||
className="inline-flex items-center px-8 py-4 bg-primary text-black font-bold rounded-lg hover:bg-primary-dark transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Get DGX Spark - $4,000
|
||||
<svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://hanzo.ai/contact"
|
||||
className="inline-flex items-center px-8 py-4 border border-secondary text-secondary font-bold rounded-lg hover:bg-secondary/10 transition-all duration-300"
|
||||
>
|
||||
Contact Sales for Enterprise
|
||||
<svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default UseCases;
|
||||
@@ -0,0 +1,264 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const WhyBuyHardware: React.FC = () => {
|
||||
const benefits = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
),
|
||||
title: "Lower Total Cost of Ownership",
|
||||
description: "Own your hardware outright. No recurring monthly fees eating into your budget. DGX Spark pays for itself in just a few months vs cloud rental.",
|
||||
stat: "ROI in 3-6 months"
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
),
|
||||
title: "Complete Control & Privacy",
|
||||
description: "Your data never leaves your infrastructure. No shared tenancy, no performance throttling, no surprise rate limits. Full root access to customize everything.",
|
||||
stat: "100% dedicated resources"
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
),
|
||||
title: "Predictable Performance",
|
||||
description: "No noisy neighbors. No performance degradation during peak hours. Consistent, guaranteed performance for your training and inference workloads 24/7.",
|
||||
stat: "Zero performance variance"
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
|
||||
</svg>
|
||||
),
|
||||
title: "Unlimited Usage",
|
||||
description: "Run experiments 24/7 with no usage caps, no hourly fees, no data transfer costs. Perfect for continuous training, batch processing, and research.",
|
||||
stat: "Unlimited compute hours"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-24 bg-gradient-to-b from-dark-bg to-dark-bg/50">
|
||||
<div className="container mx-auto px-6">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-16">
|
||||
<div className="inline-flex items-center space-x-2 bg-primary/10 border border-primary/30 rounded-full px-4 py-2 mb-4">
|
||||
<svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span className="text-primary font-semibold">Own Your Infrastructure</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-white mb-4">
|
||||
Why Buy Hardware Instead of Renting Cloud?
|
||||
</h2>
|
||||
<p className="text-xl text-gray-400 max-w-3xl mx-auto">
|
||||
For serious AI development, owning your hardware delivers unmatched value. Here's why DGX Spark is the smarter choice.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Benefits Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||
{benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-black/40 backdrop-blur-sm border border-dark-border rounded-xl p-8 hover:border-primary/50 transition-all duration-300 group"
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full text-primary group-hover:bg-primary/20 transition-colors">
|
||||
{benefit.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-white mb-2 group-hover:text-primary transition-colors">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 mb-3 leading-relaxed">
|
||||
{benefit.description}
|
||||
</p>
|
||||
<div className="inline-block px-3 py-1 bg-primary/10 border border-primary/30 rounded-full">
|
||||
<span className="text-primary font-semibold text-sm">{benefit.stat}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Cost Comparison */}
|
||||
<div className="bg-gradient-to-r from-primary/10 to-secondary/10 border border-primary/30 rounded-2xl p-8 md:p-12">
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-3xl font-bold text-white mb-3">
|
||||
Simple Math: Buy vs Rent
|
||||
</h3>
|
||||
<p className="text-gray-300 text-lg">
|
||||
Cloud seems cheaper upfront, but ownership wins over time
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{/* DGX Spark */}
|
||||
<div className="bg-black/60 backdrop-blur-sm rounded-xl p-6 border-2 border-primary">
|
||||
<div className="text-center mb-4">
|
||||
<div className="inline-block px-3 py-1 bg-primary/20 border border-primary/40 rounded-full mb-3">
|
||||
<span className="text-primary font-bold text-sm">BEST VALUE</span>
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-white mb-2">DGX Spark</h4>
|
||||
<p className="text-gray-400">Own Your Hardware</p>
|
||||
</div>
|
||||
<div className="text-center mb-6">
|
||||
<div className="text-5xl font-bold text-primary mb-2">$4,000</div>
|
||||
<div className="text-gray-400">One-time payment</div>
|
||||
<div className="text-gray-500 text-sm mt-1">+ 100 hours included</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Dedicated DGX instance</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Unlimited usage after 100hrs</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>No monthly fees</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Complete control</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 pt-6 border-t border-gray-700">
|
||||
<div className="text-center text-primary font-bold text-lg">
|
||||
Pays for itself in 3-6 months
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cloud 6-Month */}
|
||||
<div className="bg-black/40 backdrop-blur-sm rounded-xl p-6 border border-dark-border">
|
||||
<div className="text-center mb-4">
|
||||
<h4 className="text-2xl font-bold text-white mb-2">Cloud (6 months)</h4>
|
||||
<p className="text-gray-400">Rented Infrastructure</p>
|
||||
</div>
|
||||
<div className="text-center mb-6">
|
||||
<div className="text-5xl font-bold text-gray-300 mb-2">$135K+</div>
|
||||
<div className="text-gray-400">6-month commitment</div>
|
||||
<div className="text-gray-500 text-sm mt-1">H100 equivalent pricing</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-yellow-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Shared infrastructure</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-yellow-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Ongoing monthly costs</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-yellow-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Data transfer fees</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-yellow-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Limited customization</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 pt-6 border-t border-gray-700">
|
||||
<div className="text-center text-gray-400 font-semibold">
|
||||
33x more expensive
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cloud Annual */}
|
||||
<div className="bg-black/40 backdrop-blur-sm rounded-xl p-6 border border-dark-border">
|
||||
<div className="text-center mb-4">
|
||||
<h4 className="text-2xl font-bold text-white mb-2">Cloud (Annual)</h4>
|
||||
<p className="text-gray-400">12-Month Contract</p>
|
||||
</div>
|
||||
<div className="text-center mb-6">
|
||||
<div className="text-5xl font-bold text-gray-300 mb-2">$240K+</div>
|
||||
<div className="text-gray-400">Annual commitment</div>
|
||||
<div className="text-gray-500 text-sm mt-1">H100 equivalent pricing</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-red-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Long-term lock-in</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-red-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>You own nothing</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-red-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Performance varies</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-300">
|
||||
<svg className="w-5 h-5 text-red-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Renewal price increases</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 pt-6 border-t border-gray-700">
|
||||
<div className="text-center text-gray-400 font-semibold">
|
||||
60x more expensive
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-gray-300 mb-4">
|
||||
<strong className="text-white">Bottom line:</strong> For sustained AI development, owning your hardware is dramatically more cost-effective.
|
||||
</p>
|
||||
<a
|
||||
href="#pricing"
|
||||
className="inline-flex items-center px-8 py-4 bg-primary text-black font-bold rounded-lg hover:bg-primary-dark transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
Get DGX Spark for $4,000
|
||||
<svg className="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default WhyBuyHardware;
|
||||
Reference in New Issue
Block a user