366 lines
14 KiB
TypeScript
366 lines
14 KiB
TypeScript
// app/(home)/page.tsx
|
||
'use client';
|
||
|
||
import * as React from 'react';
|
||
|
||
// Import layout components from our new shared `ui` library
|
||
import { Navbar } from '@workspace/ui/components/layout';
|
||
import { Footer } from '@workspace/ui/components/layout';
|
||
import { Container, Section, Grid } from '@workspace/ui/components/layout';
|
||
|
||
// Import the useTone hook to access the global tone setting
|
||
import { useTone } from '@workspace/ui/hooks/use-tone';
|
||
|
||
// Import Lucide icons for the value proposition section
|
||
import { DollarSignIcon, WrenchIcon, MapIcon, LockIcon, CloudOffIcon, ZapIcon } from 'lucide-react';
|
||
import { PlaceholderIcon } from '@workspace/ui/components/icons';
|
||
|
||
// Import UI components from our shared library
|
||
import { Button } from '@workspace/ui/components/ui';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui';
|
||
|
||
// Import new content components
|
||
import { MetricsKPI } from '@workspace/ui/components/content';
|
||
import { LogosMarquee } from '@workspace/ui/components/content';
|
||
import { Steps } from '@workspace/ui/components/content';
|
||
import { FeatureCard, CaseStudyCard } from '@workspace/ui/components/content/cards';
|
||
import { TrustSection } from '@workspace/ui/components/content';
|
||
import { FAQAccordion } from '@workspace/ui/components/interactive';
|
||
import { FinalCTASection } from '@workspace/ui/components/content';
|
||
|
||
export default function HomePage() {
|
||
const { tone } = useTone(); // Access the current tone
|
||
|
||
// Content definitions based on tone
|
||
const heroHeadline = tone === 'direct'
|
||
? "Own your infrastructure. Slash your bill."
|
||
: "Cut waste, keep performance.";
|
||
const heroSubcopyLine1 = tone === 'direct'
|
||
? "Your hosting provider is fucking you. Cloud rent bleeds $25k–$500k/mo."
|
||
: "Cloud rent is bleeding your budget dry.";
|
||
const heroSubcopyLine2 = tone === 'direct'
|
||
? "Own the hardware. Keep the performance. Kill the waste."
|
||
: "Own your stack. Colocate it. Keep the performance, ditch the waste.";
|
||
|
||
const valuePropositions = tone === 'direct' ? [
|
||
{
|
||
icon: <DollarSignIcon className="size-6" />,
|
||
title: "Stop getting scammed.",
|
||
description: "Cloud rent bleeds $25k–$500k/mo. Own the hardware. Keep the performance. Kill the waste."
|
||
},
|
||
{
|
||
icon: <WrenchIcon className="size-6" />,
|
||
title: "Build on what works.",
|
||
description: "Keep your stack. We wire it together and automate the boring."
|
||
},
|
||
{
|
||
icon: <MapIcon className="size-6" />,
|
||
title: "Pave desire paths.",
|
||
description: "We embed with your team, shape the system to how they actually work."
|
||
}
|
||
] : [
|
||
{
|
||
icon: <DollarSignIcon className="size-6" />,
|
||
title: "Cut waste, keep performance.",
|
||
description: "Move from renting to owning. Dramatically reduce monthly costs without sacrificing speed or reliability."
|
||
},
|
||
{
|
||
icon: <WrenchIcon className="size-6" />,
|
||
title: "Integrate, don't replace.",
|
||
description: "We work with your existing tools and workflows. No disruptive rip-and-replace projects."
|
||
},
|
||
{
|
||
icon: <MapIcon className="size-6" />,
|
||
title: "Build around real workflows.",
|
||
description: "We map your actual processes, then build automation that fits like a glove."
|
||
}
|
||
];
|
||
|
||
// Mock data for LogosMarquee
|
||
const logos = Array(6).fill(null).map((_, i) => ({
|
||
name: `Client ${i + 1}`,
|
||
icon: <PlaceholderIcon className="size-8 md:size-10" />
|
||
}));
|
||
|
||
// Mock data for Process Steps
|
||
const processSteps = [
|
||
{
|
||
title: "Discovery",
|
||
description: "We deep-dive into your current infrastructure, workloads, and pain points.",
|
||
youDo: "Share access to cloud billing, architecture docs, and team interviews.",
|
||
weDo: "Analyze costs, identify waste, and map technical dependencies."
|
||
},
|
||
{
|
||
title: "Shadow & Map",
|
||
description: "We observe how your teams actually work and map desire paths.",
|
||
youDo: "Participate in workflow observations and workshops.",
|
||
weDo: "Document real workflows, identify automation opportunities, and draft the future state."
|
||
},
|
||
{
|
||
title: "Architect",
|
||
description: "We design a tailored, owned infrastructure solution.",
|
||
youDo: "Review and approve the proposed architecture and migration plan.",
|
||
weDo: "Specify hardware, select software stack, and design for performance and cost."
|
||
},
|
||
{
|
||
title: "Pilot",
|
||
description: "We build and test a critical component in the new environment.",
|
||
youDo: "Provide feedback on performance, usability, and integration.",
|
||
weDo: "Deploy, test, and iterate on the pilot component with your team."
|
||
},
|
||
{
|
||
title: "Migrate",
|
||
description: "We execute the planned migration with zero downtime.",
|
||
youDo: "Validate functionality and performance post-migration.",
|
||
weDo: "Cutover workloads, decommission old systems, and optimize the new stack."
|
||
},
|
||
{
|
||
title: "Operate",
|
||
description: "We manage the infrastructure, you focus on your core business.",
|
||
youDo: "Use the system and provide ongoing feedback for improvements.",
|
||
weDo: "Monitor, maintain, upgrade, and support the infrastructure 24/7."
|
||
}
|
||
];
|
||
|
||
// Mock data for Case Studies
|
||
const caseStudies = [
|
||
{
|
||
title: "VFX Studio Migration",
|
||
description: "Migrated a major VFX studio from cloud rendering to a colocated HPC cluster, reducing costs by 65%.",
|
||
kpi1: { value: "65%", label: "Cost ↓" },
|
||
kpi2: { value: "2x", label: "Performance ↑" },
|
||
ctaText: "See build",
|
||
ctaHref: "/case-studies/vfx-studio"
|
||
},
|
||
{
|
||
title: "Legal Document Management",
|
||
description: "Consolidated scattered legal tech stack into a secure, private Nextcloud instance with AI search.",
|
||
kpi1: { value: "$120k/mo", label: "Saved" },
|
||
kpi2: { value: "0", label: "Egress Fees" },
|
||
ctaText: "See build",
|
||
ctaHref: "/case-studies/legal-firm"
|
||
},
|
||
{
|
||
title: "Research Data Pipeline",
|
||
description: "Built a local ML training environment for a research institute, eliminating data transfer bottlenecks.",
|
||
kpi1: { value: "90%", label: "Time-to-Train ↓" },
|
||
kpi2: { value: "Break-even: 8mo", label: "" },
|
||
ctaText: "See build",
|
||
ctaHref: "/case-studies/research-institute"
|
||
}
|
||
];
|
||
|
||
// Mock data for Trust Section
|
||
const trustItems = [
|
||
{
|
||
icon: <LockIcon className="size-5" />,
|
||
text: "Your data. Your hardware. Your rules."
|
||
},
|
||
{
|
||
icon: <CloudOffIcon className="size-5" />,
|
||
text: "Colocated. Monitored. Upgradable without downtime."
|
||
},
|
||
{
|
||
icon: <ZapIcon className="size-5" />,
|
||
text: "AI-native, privacy-first. No third-party model training."
|
||
}
|
||
];
|
||
|
||
// Mock data for FAQ
|
||
// (This is just for homepage preview; full FAQ is on /faq page)
|
||
const faqItems = [
|
||
{
|
||
question: "What uptime can I expect?",
|
||
answer: "We design for 99.9%+ uptime through redundant hardware, proactive monitoring, and colocation in Tier III+ facilities."
|
||
},
|
||
{
|
||
question: "How is support handled?",
|
||
answer: "You get direct access to our engineering team via Slack, email, or phone. We provide 24/7 monitoring and alerting."
|
||
}
|
||
];
|
||
|
||
return (
|
||
<div className="flex flex-col min-h-screen">
|
||
<Navbar />
|
||
|
||
{/* Hero Section */}
|
||
<Section className="flex flex-col items-center text-center py-20 md:py-32">
|
||
<Container maxWidth="3xl">
|
||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
|
||
{heroHeadline}
|
||
</h1>
|
||
<p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl">
|
||
{heroSubcopyLine1}
|
||
</p>
|
||
<p className="mt-2 text-lg md:text-xl text-muted-foreground max-w-2xl">
|
||
{heroSubcopyLine2}
|
||
</p>
|
||
<div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button size="lg" variant="default" asChild>
|
||
<a href="/contact">Book Architecture Call</a>
|
||
</Button>
|
||
<Button size="lg" variant="outline" asChild>
|
||
<a href="/pricing">Run My Numbers</a>
|
||
</Button>
|
||
</div>
|
||
{/* KPI Metrics */}
|
||
<div className="mt-16 grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-2xl mx-auto">
|
||
<MetricsKPI value="$350/mo" label="after year 1" />
|
||
<MetricsKPI value="65%" label="avg. cost ↓" />
|
||
<MetricsKPI value="12mo" label="typical break-even" />
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Value Proposition Section */}
|
||
<Section background="muted">
|
||
<Container>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{valuePropositions.map((item, index) => (
|
||
<Card key={index} className="flex flex-col">
|
||
<CardHeader>
|
||
<div className="mb-2 text-primary">
|
||
{item.icon}
|
||
</div>
|
||
<CardTitle>{item.title}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex-grow">
|
||
<CardDescription>{item.description}</CardDescription>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Proof Strip / Logos Marquee */}
|
||
<Section>
|
||
<Container>
|
||
<h2 className="text-2xl font-bold text-center mb-12">Trusted by forward-thinking teams</h2>
|
||
<LogosMarquee logos={logos} />
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Process Snapshot */}
|
||
<Section background="muted">
|
||
<Container>
|
||
<Steps
|
||
steps={processSteps.slice(0, 3)} // Show only first 3 steps on homepage
|
||
title="Our 6-Step Process"
|
||
ctaText="See Full Process"
|
||
ctaHref="/process"
|
||
/>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Case Study Rail */}
|
||
<Section>
|
||
<Container>
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-2xl font-bold">Proven Results</h2>
|
||
<p className="mt-2 text-muted-foreground">
|
||
Real outcomes from real migrations.
|
||
</p>
|
||
</div>
|
||
<Grid columns={{ initial: 1, md: 3 }} gap="6">
|
||
{caseStudies.map((study, index) => (
|
||
<CaseStudyCard
|
||
key={index}
|
||
title={study.title}
|
||
description={study.description}
|
||
kpi1={study.kpi1}
|
||
kpi2={study.kpi2}
|
||
ctaText={study.ctaText}
|
||
ctaHref={study.ctaHref}
|
||
/>
|
||
))}
|
||
</Grid>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Pricing Preview / Own vs Rent */}
|
||
<Section background="muted">
|
||
<Container>
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-2xl font-bold">Own vs Rent</h2>
|
||
<p className="mt-2 text-muted-foreground max-w-2xl mx-auto">
|
||
Cloud is a rental agreement with infinite term. Owned hardware + colocation breaks even in under 12 months.
|
||
</p>
|
||
</div>
|
||
<div className="max-w-4xl mx-auto bg-card border rounded-xl p-6 md:p-8">
|
||
<h3 className="text-xl font-semibold mb-4">Why Owned Infrastructure Wins</h3>
|
||
<ul className="space-y-2 text-muted-foreground">
|
||
<li className="flex items-start">
|
||
<span className="mr-2 text-primary">•</span>
|
||
<span><span className="font-medium">Capex:</span> You buy the hardware once. Depreciate over 3-5 years.</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="mr-2 text-primary">•</span>
|
||
<span><span className="font-medium">Low Opex:</span> Colocation is ~$200/server/mo. Managed ops is ~$500/server/mo.</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="mr-2 text-primary">•</span>
|
||
<span><span className="font-medium">No Egress Fees:</span> Move data freely within your network.</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="mr-2 text-primary">•</span>
|
||
<span><span className="font-medium">Performance:</span> Direct-attached storage and local networks are faster than VPCs.</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="mr-2 text-primary">•</span>
|
||
<span><span className="font-medium">No Vendor Lock-in:</span> Standard hardware and open-source software.</span>
|
||
</li>
|
||
</ul>
|
||
<div className="mt-6 p-4 bg-muted rounded-lg">
|
||
<p className="text-center font-medium">
|
||
Break-even is typically < 12 months. After that, it's pure savings.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Trust Section */}
|
||
<Section>
|
||
<Container>
|
||
<TrustSection items={trustItems} title="Your Data, Your Rules" />
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* FAQ Accordion Preview */}
|
||
<Section background="muted">
|
||
<Container>
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-2xl font-bold">Common Questions</h2>
|
||
<p className="mt-2 text-muted-foreground">
|
||
Answers to key concerns about migrating and self-hosting.
|
||
</p>
|
||
</div>
|
||
<FAQAccordion />
|
||
<div className="mt-8 text-center">
|
||
<Button variant="link" asChild>
|
||
<a href="/faq">See All FAQs</a>
|
||
</Button>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Final CTA */}
|
||
<Section>
|
||
<Container>
|
||
<FinalCTASection
|
||
title="Ready to cut your cloud bill?"
|
||
description="Book a free architecture call to see how much you can save."
|
||
primaryCtaText="Book Architecture Call"
|
||
primaryCtaHref="/contact"
|
||
secondaryCtaText="Download Blueprint"
|
||
secondaryCtaHref="/download-blueprint" // Placeholder
|
||
/>
|
||
</Container>
|
||
</Section>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|