58 lines
2.9 KiB
TypeScript
58 lines
2.9 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
const About: React.FC = () => {
|
|
return (
|
|
<section id="about" className="py-24 bg-slate-50">
|
|
<div className="container mx-auto px-6">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div className="order-2 lg:order-1 relative">
|
|
<div className="aspect-[4/3] md:aspect-square rounded-[2rem] overflow-hidden shadow-2xl">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=1000"
|
|
alt="Our Engineering Facility"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="absolute -bottom-6 -left-6 md:-bottom-10 md:-left-10 p-6 md:p-8 bg-blue-600 text-white rounded-3xl shadow-2xl max-w-[200px] md:max-w-[240px]">
|
|
<div className="text-4xl md:text-5xl font-bold mb-2">15+</div>
|
|
<div className="text-sm font-semibold opacity-90 uppercase tracking-widest leading-tight">Years of Industrial Excellence</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="order-1 lg:order-2">
|
|
<h2 className="text-blue-600 font-bold uppercase tracking-widest text-sm mb-3">Our Identity</h2>
|
|
<h3 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-8 leading-tight">
|
|
Designing the Future of Industrial Frameworks
|
|
</h3>
|
|
<p className="text-slate-600 mb-6 text-lg leading-relaxed">
|
|
Hanmo Control & Network Co., Ltd. was established on the foundation that industrial automation must be inherently reliable, perfectly integrated, and intelligently scalable.
|
|
</p>
|
|
<p className="text-slate-600 mb-10 leading-relaxed">
|
|
As strategic partners for global leaders transitioning into Industry 4.0, our experts specialize in everything from site-wide instrumentation to enterprise-grade data management.
|
|
</p>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-6">
|
|
{[
|
|
{ title: 'Reliability Focused', icon: 'fa-shield-halved' },
|
|
{ title: 'Global Standards', icon: 'fa-globe' },
|
|
{ title: '24/7 Support', icon: 'fa-clock' },
|
|
{ title: 'Custom R&D', icon: 'fa-flask' },
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-4 p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
|
<div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600">
|
|
<i className={`fas ${item.icon}`}></i>
|
|
</div>
|
|
<span className="font-bold text-slate-800 text-sm">{item.title}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default About;
|