88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
|
import ScrollReveal from "./ScrollReveal";
|
||
|
|
import { Ruler, Wrench, MonitorCheck, Headset } from "lucide-react";
|
||
|
|
|
||
|
|
const services = [
|
||
|
|
{
|
||
|
|
icon: Ruler,
|
||
|
|
phase: "01",
|
||
|
|
title: "Design",
|
||
|
|
description:
|
||
|
|
"Signal flow engineering, system architecture, and equipment specification. Every facility starts with documentation that defines how signals move, how operators interact, and how systems scale.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: Wrench,
|
||
|
|
phase: "02",
|
||
|
|
title: "Integrate",
|
||
|
|
description:
|
||
|
|
"Full system builds from rack fabrication and cable infrastructure through to final termination and labeling. Clean builds that technicians can troubleshoot and maintain for years.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: MonitorCheck,
|
||
|
|
phase: "03",
|
||
|
|
title: "Commission",
|
||
|
|
description:
|
||
|
|
"End-to-end system testing, calibration, and performance verification. Every signal path tested, every failover validated, every workflow documented before handoff.",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: Headset,
|
||
|
|
phase: "04",
|
||
|
|
title: "Support",
|
||
|
|
description:
|
||
|
|
"Operator training, documentation packages, and ongoing technical support. Systems designed with the people who use them in mind — not just the engineers who build them.",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function Services() {
|
||
|
|
return (
|
||
|
|
<section id="services" className="py-28 md:py-36 bg-surface-elevated noise-overlay">
|
||
|
|
<div className="relative z-10 max-w-6xl mx-auto px-6">
|
||
|
|
<ScrollReveal>
|
||
|
|
<div className="max-w-3xl mb-16">
|
||
|
|
<div className="w-10 h-px bg-accent mb-6 glow-accent-sm" />
|
||
|
|
<p className="font-mono text-[10px] tracking-[0.3em] uppercase text-accent mb-4">
|
||
|
|
Process
|
||
|
|
</p>
|
||
|
|
<h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight mb-5">
|
||
|
|
From blueprint to <span className="text-gradient">broadcast.</span>
|
||
|
|
</h2>
|
||
|
|
<p className="text-white/55 leading-relaxed">
|
||
|
|
A complete lifecycle approach to broadcast facility design and
|
||
|
|
systems integration. Every project follows a disciplined process
|
||
|
|
that ensures systems work flawlessly when the red light goes on.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</ScrollReveal>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
|
||
|
|
{services.map((service, i) => (
|
||
|
|
<ScrollReveal key={service.title} delay={i * 100}>
|
||
|
|
<div className="group relative bg-surface-card rounded-xl p-7 border border-border hover:border-border-hover transition-all duration-400 h-full border-glow">
|
||
|
|
{/* Phase number */}
|
||
|
|
<span className="font-mono text-[10px] text-accent/20 absolute top-5 right-5 group-hover:text-accent/40 transition-colors duration-300">
|
||
|
|
{service.phase}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<div className="w-11 h-11 rounded-lg bg-accent/10 border border-accent/20 flex items-center justify-center mb-5 group-hover:bg-accent/15 transition-all duration-300">
|
||
|
|
<service.icon
|
||
|
|
size={20}
|
||
|
|
className="text-accent transition-colors duration-300"
|
||
|
|
strokeWidth={1.5}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="text-base font-semibold text-white mb-3">
|
||
|
|
{service.title}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<p className="text-[13px] text-white/55 leading-relaxed">
|
||
|
|
{service.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</ScrollReveal>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|