Marc Mintel
103d71851c
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
100 lines
5.0 KiB
TypeScript
100 lines
5.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { Container } from '../../../src/components/Layout';
|
|
import { Label } from '../../../src/components/Typography';
|
|
import { Check, ArrowLeft, Zap, ExternalLink } from 'lucide-react';
|
|
import { technologies } from './data';
|
|
|
|
export default function TechnologyContent({ slug }: { slug: string }) {
|
|
const tech = technologies[slug];
|
|
|
|
if (!tech) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-center">
|
|
<h1 className="text-4xl font-bold mb-4">Technology Not Found</h1>
|
|
<Link href="/" className="text-blue-600 hover:underline">Return Home</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const Icon = tech.icon;
|
|
|
|
return (
|
|
<div className="bg-white min-h-screen text-slate-900 pb-24">
|
|
<div className="bg-slate-50 border-b border-slate-200">
|
|
<Container className="py-24">
|
|
<Link href="/case-studies/klz-cables" className="inline-flex items-center text-sm font-bold text-slate-500 hover:text-slate-900 mb-8 transition-colors">
|
|
<ArrowLeft className="w-4 h-4 mr-2" /> Back to Case Study
|
|
</Link>
|
|
|
|
<div className="flex flex-col md:flex-row items-start gap-8">
|
|
<div className={`p-6 rounded-2xl shadow-lg ${tech.color}`}>
|
|
<Icon className="w-12 h-12" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<Label className="text-slate-400 mb-2">TECHNOLOGY DEEP DIVE</Label>
|
|
<h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">{tech.title}</h1>
|
|
<p className="text-xl text-slate-500 font-medium">{tech.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
|
|
<Container className="py-16">
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
|
|
<div className="lg:col-span-8 space-y-12">
|
|
<section>
|
|
<h2 className="text-2xl font-bold mb-4">What is it?</h2>
|
|
<p className="text-xl leading-relaxed text-slate-700">{tech.description}</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
|
|
<Zap className="w-6 h-6 text-amber-500" /> Why I use it
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{tech.benefits.map((benefit, i) => (
|
|
<div key={i} className="flex gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100">
|
|
<Check className="w-5 h-5 text-green-600 shrink-0" />
|
|
<span className="font-medium text-slate-700">{benefit}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="bg-blue-50 border border-blue-100 rounded-2xl p-8">
|
|
<Label className="text-blue-600 mb-2">CUSTOMER IMPACT</Label>
|
|
<h3 className="text-2xl font-bold text-slate-900 mb-4">What does this mean for you?</h3>
|
|
<p className="text-lg text-slate-700 leading-relaxed">
|
|
{tech.customerValue}
|
|
</p>
|
|
</section>
|
|
</div>
|
|
|
|
<div className="lg:col-span-4 space-y-8">
|
|
<div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 sticky top-24">
|
|
<h3 className="font-bold text-slate-900 mb-4">Related Technologies</h3>
|
|
<div className="space-y-2">
|
|
{tech.related.map((item) => (
|
|
<Link
|
|
key={item.slug}
|
|
href={`/technologies/${item.slug}`}
|
|
className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-slate-400 hover:shadow-sm transition-all group"
|
|
>
|
|
<span className="font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
|
|
<ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|