90 lines
3.6 KiB
TypeScript
90 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
|
|
import { Container } from "@workspace/ui/components/layout";
|
|
import { Navbar, Footer } from "@workspace/ui/components/layout";
|
|
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
|
|
|
|
export default function CaseStudiesPage() {
|
|
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",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
<Navbar />
|
|
|
|
{/* Hero Section */}
|
|
<AnimatedSection className="border-b border-muted">
|
|
<Container maxWidth="10xl">
|
|
<div className="py-20 md:py-28">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">Case Studies</h1>
|
|
<p className="mt-6 text-xl text-muted-foreground max-w-3xl">
|
|
Context → constraints → architecture → migration → outcomes. Real numbers, real stacks.
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
</AnimatedSection>
|
|
|
|
{/* Case Studies */}
|
|
<AnimatedSection className="py-20 border-b border-muted">
|
|
<Container maxWidth="10xl">
|
|
<div className="space-y-8 max-w-4xl">
|
|
{caseStudies.map((study, index) => (
|
|
<a
|
|
key={index}
|
|
href={study.ctaHref}
|
|
className="group block w-full border-b border-muted pb-8 transition-all duration-300 hover:border-foreground/70"
|
|
>
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
|
<div>
|
|
<div className="text-4xl font-light text-muted-foreground mb-2">
|
|
{index < 9 ? `0${index + 1}` : index + 1}
|
|
</div>
|
|
<h2 className="text-3xl font-bold">{study.title}</h2>
|
|
<p className="text-xl text-muted-foreground mt-3 max-w-3xl">{study.description}</p>
|
|
</div>
|
|
<div className="flex items-center gap-8 shrink-0">
|
|
<div className="text-lg"><span className="font-semibold">{study.kpi1.value}</span> <span className="text-muted-foreground">{study.kpi1.label}</span></div>
|
|
<div className="text-lg"><span className="font-semibold">{study.kpi2.value}</span> <span className="text-muted-foreground">{study.kpi2.label}</span></div>
|
|
<span className="text-primary text-lg">See build →</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</AnimatedSection>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|