75 lines
2.7 KiB
TypeScript
Executable file
75 lines
2.7 KiB
TypeScript
Executable file
import ScrollReveal from "./ScrollReveal";
|
|
|
|
const categories = [
|
|
{
|
|
name: "Routing & Switching",
|
|
items: ["Ross Ultrix", "Ross Carbonite", "Blackmagic ATEM", "Grass Valley Kahuna", "Evertz EQX"],
|
|
},
|
|
{
|
|
name: "Production",
|
|
items: ["Ross XPression", "vMix", "Vizrt", "NewTek TriCaster", "OBS / Custom RTMP"],
|
|
},
|
|
{
|
|
name: "Signal Transport",
|
|
items: ["SMPTE ST 2110", "NDI", "SRT", "SDI (12G/3G)", "Dante Audio"],
|
|
},
|
|
{
|
|
name: "Infrastructure",
|
|
items: ["IP Networking", "Fiber Infrastructure", "KVM Systems", "UPS & Power", "Cooling & Ventilation"],
|
|
},
|
|
{
|
|
name: "Cloud & Remote",
|
|
items: ["AWS Media", "Remote Production", "Bonded Cellular", "SaaS Playout", "CDN Distribution"],
|
|
},
|
|
{
|
|
name: "Display & XR",
|
|
items: ["LED Processing", "Unreal Engine", "Camera Tracking", "Projection", "Color Management"],
|
|
},
|
|
];
|
|
|
|
export default function TechStack() {
|
|
return (
|
|
<section className="py-24 md:py-32 bg-surface border-t border-border">
|
|
<div className="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">
|
|
Technology
|
|
</p>
|
|
<h2 className="text-3xl md:text-4xl font-semibold text-white leading-tight mb-5">
|
|
Tools of the <span className="text-gradient">trade.</span>
|
|
</h2>
|
|
<p className="text-white/55 leading-relaxed">
|
|
Deep experience across the full broadcast technology stack, from
|
|
traditional SDI infrastructure to modern IP and cloud-native
|
|
production platforms.
|
|
</p>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10">
|
|
{categories.map((cat, i) => (
|
|
<ScrollReveal key={cat.name} delay={i * 80}>
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-white/90 mb-4">
|
|
{cat.name}
|
|
</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{cat.items.map((item) => (
|
|
<span
|
|
key={item}
|
|
className="px-3 py-1.5 text-[12px] font-medium bg-surface-card border border-border text-white/55 rounded-md hover:bg-accent/10 hover:border-accent/20 hover:text-accent transition-all duration-200"
|
|
>
|
|
{item}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|