242 lines
9.0 KiB
TypeScript
242 lines
9.0 KiB
TypeScript
// app/process/page.tsx
|
||
|
||
'use client';
|
||
|
||
import * as React from 'react';
|
||
|
||
import { Navbar } from '@workspace/ui/components/layout';
|
||
import { Footer } from '@workspace/ui/components/layout';
|
||
import { Container } from '@workspace/ui/components/layout';
|
||
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
|
||
import { Steps } from '@workspace/ui/components/content';
|
||
import { FinalCTASection } from '@workspace/ui/components/content';
|
||
import { Badge } from '@workspace/ui/components/content';
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from '@workspace/ui/components/ui';
|
||
import Image from 'next/image';
|
||
|
||
// Mock data for Process Steps (full 6 steps)
|
||
const PROCESS_STEPS = [
|
||
{
|
||
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.',
|
||
},
|
||
];
|
||
|
||
export default function ProcessPage() {
|
||
return (
|
||
<div className="flex flex-col min-h-screen">
|
||
<Navbar />
|
||
|
||
{/* Hero Section – distinct gradient band to differentiate from Solutions */}
|
||
<AnimatedSection className="bg-gradient-to-b from-muted/30 to-transparent border-b border-muted">
|
||
<Container maxWidth="10xl">
|
||
<div className="py-20 md:py-28">
|
||
<div className="flex flex-wrap gap-2">
|
||
<Badge variant="outline">Desire Paths</Badge>
|
||
<Badge variant="outline">Zero-Downtime Migration</Badge>
|
||
<Badge variant="outline">SRE-Managed</Badge>
|
||
</div>
|
||
<h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold">
|
||
Our Process
|
||
</h1>
|
||
<p className="mt-6 text-xl text-muted-foreground max-w-3xl">
|
||
A six-step path from audit to steady-state operations—minimizing
|
||
retraining, maximizing savings.
|
||
</p>
|
||
</div>
|
||
</Container>
|
||
</AnimatedSection>
|
||
|
||
{/* Process Diagram (optional image placeholder) */}
|
||
<AnimatedSection className="py-16 border-b border-muted">
|
||
<Container maxWidth="10xl">
|
||
<Card className="border-muted">
|
||
<CardHeader>
|
||
<CardTitle>Process diagram</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="relative w-full h-64 md:h-80 lg:h-96">
|
||
<Image
|
||
src="/process/process-diagram.webp"
|
||
alt="Six-step migration process diagram"
|
||
fill
|
||
sizes="100vw"
|
||
className="object-cover rounded-sm"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</Container>
|
||
</AnimatedSection>
|
||
|
||
{/* Process Steps with phase legend */}
|
||
<AnimatedSection className="py-20 border-b border-muted">
|
||
<Container maxWidth="10xl">
|
||
{/* Phase legend */}
|
||
<div className="mb-10 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="rounded-sm border border-muted p-4 bg-background/50">
|
||
<div className="text-xs tracking-wide text-muted-foreground">
|
||
Phase 1
|
||
</div>
|
||
<div className="mt-1 font-semibold">Discover & Map</div>
|
||
<div className="mt-2 text-sm text-muted-foreground">
|
||
Steps 1–2
|
||
</div>
|
||
</div>
|
||
<div className="rounded-sm border border-muted p-4 bg-background/50">
|
||
<div className="text-xs tracking-wide text-muted-foreground">
|
||
Phase 2
|
||
</div>
|
||
<div className="mt-1 font-semibold">Design & Pilot</div>
|
||
<div className="mt-2 text-sm text-muted-foreground">
|
||
Steps 3–4
|
||
</div>
|
||
</div>
|
||
<div className="rounded-sm border border-muted p-4 bg-background/50">
|
||
<div className="text-xs tracking-wide text-muted-foreground">
|
||
Phase 3
|
||
</div>
|
||
<div className="mt-1 font-semibold">Migrate & Operate</div>
|
||
<div className="mt-2 text-sm text-muted-foreground">
|
||
Steps 5–6
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Steps steps={PROCESS_STEPS} />
|
||
</Container>
|
||
</AnimatedSection>
|
||
|
||
{/* Deliverables */}
|
||
<AnimatedSection className="py-20 border-b border-muted">
|
||
<Container maxWidth="10xl">
|
||
<h2 className="text-3xl font-bold mb-8">Key Deliverables</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Architecture Blueprint</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-muted-foreground">
|
||
Hardware spec, network plan, security model, and service layout
|
||
mapped to your workloads.
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Migration Plan</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-muted-foreground">
|
||
Sequenced cutover with rollback points, data move playbooks, and
|
||
testing gates.
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Runbook & SLOs</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-muted-foreground">
|
||
Operability docs, monitoring dashboards, on-call rotations, and
|
||
measurable service objectives.
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</Container>
|
||
</AnimatedSection>
|
||
|
||
{/* Engagement Model */}
|
||
<AnimatedSection className="py-20 bg-muted/30 border-y border-muted">
|
||
<Container maxWidth="10xl">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<Card className="border-muted">
|
||
<CardHeader>
|
||
<CardTitle>Embedded With You</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-muted-foreground space-y-2">
|
||
<p>
|
||
Weekly working sessions, async updates, and direct
|
||
engineer-to-engineer channels.
|
||
</p>
|
||
<p>
|
||
We map desire paths, automate toil, and keep your stack
|
||
familiar.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
<Card className="border-muted">
|
||
<CardHeader>
|
||
<CardTitle>Support & Ops</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-muted-foreground space-y-2">
|
||
<p>
|
||
24/7 monitoring, upgrades, and incident response handled by
|
||
our SREs.
|
||
</p>
|
||
<p>
|
||
You own the hardware and data; we keep it healthy and fast.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</Container>
|
||
</AnimatedSection>
|
||
|
||
{/* Final CTA */}
|
||
<AnimatedSection className="py-20 border-b border-muted">
|
||
<Container maxWidth="10xl">
|
||
<FinalCTASection
|
||
title="Ready to kick off discovery?"
|
||
description="We’ll audit your spend, map your workflows, and design the fastest path to break-even."
|
||
primaryCtaText="Book Discovery Call"
|
||
primaryCtaHref="/contact"
|
||
secondaryCtaText="Download Blueprint"
|
||
secondaryCtaHref="/download-blueprint"
|
||
/>
|
||
</Container>
|
||
</AnimatedSection>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|