56 lines
3.0 KiB
TypeScript
56 lines
3.0 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
const Hero: React.FC = () => {
|
|
return (
|
|
<section id="home" className="relative min-h-screen flex items-center pt-20 overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=2000"
|
|
alt="Control Room"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-slate-900/80 md:bg-transparent md:bg-gradient-to-r md:from-slate-900/90 md:to-slate-900/20"></div>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-6 relative z-10">
|
|
<div className="max-w-5xl">
|
|
<div className="inline-block px-4 py-1.5 mb-6 rounded-full bg-blue-600/20 border border-blue-400/30 text-blue-400 text-[10px] font-bold uppercase industrial-tracking animate-pulse font-industrial">
|
|
Next-Gen Industrial Solutions
|
|
</div>
|
|
<h1 className="text-5xl md:text-8xl font-extralight text-white mb-8 leading-[1.05] premium-kerning font-premium">
|
|
Engineering <span className="text-blue-500 font-normal">Precision</span> <br className="hidden md:block"/> for Industrial Networks
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-slate-300 mb-10 leading-relaxed max-w-2xl font-premium font-light opacity-80">
|
|
Hanmo Control & Network Co., Ltd. delivers global-standard DCS and SCADA infrastructure for mission-critical industrial ecosystems and digital transformation.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<a href="#services" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold shadow-xl transition-all hover:-translate-y-1 text-center font-industrial text-xs tracking-widest uppercase">
|
|
Our Expertise
|
|
</a>
|
|
<a href="#contact" className="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-md px-8 py-4 rounded-xl font-bold transition-all text-center font-industrial text-xs tracking-widest uppercase">
|
|
Schedule Consultation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-20 grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8 max-w-5xl">
|
|
{[
|
|
{ label: 'Installed Nodes', value: '1,500+' },
|
|
{ label: 'Uptime', value: '99.99%' },
|
|
{ label: 'Certified Experts', value: '60+' },
|
|
{ label: 'Years Active', value: '15' },
|
|
].map((stat, i) => (
|
|
<div key={i} className="p-6 bg-white/5 backdrop-blur-xl rounded-2xl border border-white/10 group hover:bg-white/10 transition-colors">
|
|
<div className="text-3xl md:text-4xl font-extralight text-white mb-2 font-premium premium-kerning">{stat.value}</div>
|
|
<div className="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">{stat.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|