37ee4cff1d
- About page: CarsImage as large hero with company intro below - Contact page: HandShakeImage as semi-transparent hero background Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
297 lines
18 KiB
TypeScript
297 lines
18 KiB
TypeScript
'use client';
|
||
|
||
import { useTranslation } from '@/lib/i18n';
|
||
import Image from 'next/image';
|
||
import Link from 'next/link';
|
||
|
||
export default function AboutPage() {
|
||
const { t, language } = useTranslation();
|
||
|
||
const services = [
|
||
{
|
||
icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
|
||
title: t.dealerLicense,
|
||
description: language === 'ko'
|
||
? '공인 자동차 딜러 자격을 보유하고 있어 안전하고 신뢰할 수 있는 거래를 보장합니다.'
|
||
: language === 'mn'
|
||
? 'Бид албан ёсны автомашины дилерийн лицензтэй бөгөөд найдвартай, аюулгүй арилжаа хийх боломжтой.'
|
||
: language === 'ru'
|
||
? 'Мы имеем официальную лицензию автомобильного дилера, обеспечивая безопасные и надёжные сделки.'
|
||
: 'We hold an official car dealer license, ensuring safe and reliable transactions.',
|
||
},
|
||
{
|
||
icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01',
|
||
title: t.exportRegistration,
|
||
description: language === 'ko'
|
||
? '정식 수출업 등록을 완료하여 합법적인 차량 수출 서비스를 제공합니다.'
|
||
: language === 'mn'
|
||
? 'Бид албан ёсоор бүртгэлтэй экспортын компани бөгөөд хууль ёсны дагуу машин экспортлох үйлчилгээ үзүүлдэг.'
|
||
: language === 'ru'
|
||
? 'Мы официально зарегистрированы как экспортёр и предоставляем легальные услуги по экспорту автомобилей.'
|
||
: 'We are officially registered as an exporter and provide legal vehicle export services.',
|
||
},
|
||
{
|
||
icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
|
||
title: t.oneStopService,
|
||
description: language === 'ko'
|
||
? '차량 선택부터 구매, 운송, 통관까지 모든 과정을 원스톱으로 처리해 드립니다.'
|
||
: language === 'mn'
|
||
? 'Машин сонгохоос эхлээд худалдан авах, тээвэрлэх, гаалийн бүрдүүлэлт хүртэл бүх үйл явцыг нэг дор шийдвэрлэж өгнө.'
|
||
: language === 'ru'
|
||
? 'Мы обеспечиваем полный цикл услуг: от выбора автомобиля до покупки, доставки и таможенного оформления.'
|
||
: 'We provide comprehensive service from vehicle selection to purchase, shipping, and customs clearance.',
|
||
},
|
||
];
|
||
|
||
const stats = [
|
||
{
|
||
value: '10+',
|
||
label: language === 'ko' ? '년 경력' : language === 'mn' ? 'Жилийн туршлага' : language === 'ru' ? 'Лет опыта' : 'Years Experience',
|
||
},
|
||
{
|
||
value: '500+',
|
||
label: language === 'ko' ? '수출 실적' : language === 'mn' ? 'Экспортлосон машин' : language === 'ru' ? 'Экспортировано авто' : 'Vehicles Exported',
|
||
},
|
||
{
|
||
value: '98%',
|
||
label: language === 'ko' ? '고객 만족도' : language === 'mn' ? 'Үйлчлүүлэгчийн сэтгэл ханамж' : language === 'ru' ? 'Удовлетворённость' : 'Customer Satisfaction',
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50">
|
||
{/* Hero Section with Large Image */}
|
||
<div className="relative h-[400px] md:h-[500px]">
|
||
<Image
|
||
src="/images/cars-export.png"
|
||
alt="Car Export Terminal"
|
||
fill
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent" />
|
||
<div className="absolute inset-0 flex items-end">
|
||
<div className="container mx-auto px-4 pb-12">
|
||
<div className="max-w-4xl">
|
||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">{t.aboutTitle}</h1>
|
||
<p className="text-xl text-gray-200">{t.aboutSubtitle}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Company Introduction */}
|
||
<div className="container mx-auto px-4 py-16">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="bg-white rounded-lg shadow-md p-8 md:p-12">
|
||
<h2 className="text-2xl font-bold text-gray-800 mb-6">{t.companyIntro}</h2>
|
||
<div className="prose max-w-none text-gray-600">
|
||
{language === 'ko' ? (
|
||
<>
|
||
<p className="mb-4">
|
||
<strong>주식회사 그란테크</strong>는 IT 기술과 자동차 수출 사업을 결합한 혁신적인 기업입니다.
|
||
우리는 한국에서 몽골로의 중고차 수출에 특화되어 있으며, 고객에게 최상의 서비스를 제공하기 위해
|
||
노력하고 있습니다.
|
||
</p>
|
||
<p className="mb-4">
|
||
그란테크는 공인 자동차 딜러 자격과 수출업 등록을 보유하고 있어, 합법적이고 투명한 거래를
|
||
보장합니다. IT 기술을 활용하여 차량 검색부터 구매, 운송, 통관까지 모든 과정을 효율적으로
|
||
관리하며, 고객에게 실시간으로 진행 상황을 제공합니다.
|
||
</p>
|
||
<p>
|
||
우리의 목표는 한국 중고차 시장의 우수한 품질을 몽골 시장에 연결하여, 양국 간의 자동차 무역을
|
||
활성화하는 것입니다. 신뢰와 품질을 바탕으로 최고의 파트너가 되겠습니다.
|
||
</p>
|
||
</>
|
||
) : language === 'mn' ? (
|
||
<>
|
||
<p className="mb-4">
|
||
<strong>Грантек ХХК</strong> нь мэдээллийн технологи болон автомашины экспортын бизнесийг хослуулсан
|
||
шинэлэг компани юм. Бид Солонгосоос Монгол руу хуучин машин экспортлоход мэргэшсэн бөгөөд
|
||
үйлчлүүлэгчдэд хамгийн сайн үйлчилгээ үзүүлэхийг зорьдог.
|
||
</p>
|
||
<p className="mb-4">
|
||
Грантек нь албан ёсны автомашины дилерийн лицензтэй, экспортлогчоор бүртгэлтэй учир хууль ёсны,
|
||
ил тод арилжаа хийх баталгаа болдог. Мэдээллийн технологийг ашиглан машин хайхаас эхлээд худалдан
|
||
авах, тээвэрлэх, гаалийн бүрдүүлэлт хүртэлх бүх үйл явцыг үр ашигтай удирдаж, үйлчлүүлэгчдэд
|
||
бодит цагийн мэдээлэл өгдөг.
|
||
</p>
|
||
<p>
|
||
Бидний зорилго бол Солонгосын хуучин машины зах зээлийн өндөр чанарыг Монголын зах зээлтэй
|
||
холбож, хоёр орны хоорондын автомашины худалдааг идэвхжүүлэх явдал юм. Итгэл найдвар, чанарт
|
||
тулгуурлан шилдэг түнш болохыг зорьж байна.
|
||
</p>
|
||
</>
|
||
) : language === 'ru' ? (
|
||
<>
|
||
<p className="mb-4">
|
||
<strong>Grantech Co., LTD</strong> — инновационная компания, объединяющая IT-технологии и бизнес
|
||
по экспорту автомобилей. Мы специализируемся на экспорте подержанных автомобилей из Кореи
|
||
в Монголию и стремимся предоставлять клиентам услуги высочайшего качества.
|
||
</p>
|
||
<p className="mb-4">
|
||
Grantech имеет официальную лицензию автомобильного дилера и регистрацию экспортёра, что
|
||
гарантирует законные и прозрачные сделки. Используя IT-технологии, мы эффективно управляем
|
||
всеми процессами — от поиска автомобиля до покупки, доставки и таможенного оформления,
|
||
предоставляя клиентам информацию в режиме реального времени.
|
||
</p>
|
||
<p>
|
||
Наша цель — связать высокое качество корейского рынка подержанных автомобилей с монгольским
|
||
рынком, активизируя торговлю автомобилями между двумя странами. Мы стремимся стать лучшим
|
||
партнёром, основываясь на доверии и качестве.
|
||
</p>
|
||
</>
|
||
) : (
|
||
<>
|
||
<p className="mb-4">
|
||
<strong>Grantech Co., LTD</strong> is an innovative company combining IT technology with the
|
||
automobile export business. We specialize in exporting used cars from Korea to Mongolia and
|
||
strive to provide the best service to our customers.
|
||
</p>
|
||
<p className="mb-4">
|
||
Grantech holds an official car dealer license and export registration, ensuring legal and
|
||
transparent transactions. Utilizing IT technology, we efficiently manage all processes from
|
||
vehicle search to purchase, shipping, and customs clearance, providing customers with
|
||
real-time progress updates.
|
||
</p>
|
||
<p>
|
||
Our goal is to connect the excellent quality of the Korean used car market with the Mongolian
|
||
market, activating automobile trade between the two countries. We aim to be the best partner
|
||
based on trust and quality.
|
||
</p>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats Section */}
|
||
<div className="bg-primary-600 text-white py-12">
|
||
<div className="container mx-auto px-4">
|
||
<div className="max-w-4xl mx-auto grid grid-cols-3 gap-8">
|
||
{stats.map((stat, index) => (
|
||
<div key={index} className="text-center">
|
||
<div className="text-4xl md:text-5xl font-bold mb-2">{stat.value}</div>
|
||
<div className="text-primary-100">{stat.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Services Section */}
|
||
<div className="container mx-auto px-4 py-16">
|
||
<div className="max-w-4xl mx-auto">
|
||
<h2 className="text-2xl font-bold text-gray-800 text-center mb-12">{t.ourServices}</h2>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{services.map((service, index) => (
|
||
<div key={index} className="bg-white rounded-lg shadow-md p-6 text-center">
|
||
<div className="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<svg className="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={service.icon} />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-gray-800 mb-3">{service.title}</h3>
|
||
<p className="text-gray-600 text-sm">{service.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Process Section */}
|
||
<div className="bg-gray-100 py-16">
|
||
<div className="container mx-auto px-4">
|
||
<div className="max-w-4xl mx-auto">
|
||
<h2 className="text-2xl font-bold text-gray-800 text-center mb-12">{t.processFlow}</h2>
|
||
|
||
<div className="relative">
|
||
{/* Timeline Line */}
|
||
<div className="hidden md:block absolute left-1/2 top-0 bottom-0 w-1 bg-primary-200 -translate-x-1/2"></div>
|
||
|
||
{/* Process Steps */}
|
||
<div className="space-y-8">
|
||
{[
|
||
{
|
||
step: 1,
|
||
title: language === 'ko' ? '차량 검색 요청' : language === 'mn' ? 'Машин хайх хүсэлт' : language === 'ru' ? 'Запрос на поиск' : 'Request Search',
|
||
desc: language === 'ko' ? '원하시는 차량 조건을 알려주세요' : language === 'mn' ? 'Хүссэн машины шалгуураа хэлнэ үү' : language === 'ru' ? 'Укажите параметры желаемого автомобиля' : 'Tell us your desired vehicle criteria',
|
||
},
|
||
{
|
||
step: 2,
|
||
title: language === 'ko' ? '전문가 검토' : language === 'mn' ? 'Мэргэжилтний хяналт' : language === 'ru' ? 'Экспертная проверка' : 'Expert Review',
|
||
desc: language === 'ko' ? '24시간 내에 맞춤 차량을 찾아드립니다' : language === 'mn' ? '24 цагийн дотор тохирох машин олж өгнө' : language === 'ru' ? 'Найдём подходящие варианты в течение 24 часов' : 'We find matching vehicles within 24 hours',
|
||
},
|
||
{
|
||
step: 3,
|
||
title: language === 'ko' ? '구매 및 결제' : language === 'mn' ? 'Худалдан авалт' : language === 'ru' ? 'Покупка и оплата' : 'Purchase & Payment',
|
||
desc: language === 'ko' ? '선택하신 차량을 안전하게 구매합니다' : language === 'mn' ? 'Сонгосон машинаа аюулгүй худалдаж авна' : language === 'ru' ? 'Безопасная покупка выбранного автомобиля' : 'Safely purchase your selected vehicle',
|
||
},
|
||
{
|
||
step: 4,
|
||
title: language === 'ko' ? '운송 및 통관' : language === 'mn' ? 'Тээвэр ба гааль' : language === 'ru' ? 'Доставка и таможня' : 'Shipping & Customs',
|
||
desc: language === 'ko' ? '인천에서 울란바토르까지 안전하게 운송합니다' : language === 'mn' ? 'Инчоноос Улаанбаатар хүртэл аюулгүй тээвэрлэнэ' : language === 'ru' ? 'Безопасная доставка из Инчхона в Улан-Батор' : 'Safe shipping from Incheon to Ulaanbaatar',
|
||
},
|
||
{
|
||
step: 5,
|
||
title: language === 'ko' ? '인수 완료' : language === 'mn' ? 'Хүлээн авалт' : language === 'ru' ? 'Получение' : 'Delivery Complete',
|
||
desc: language === 'ko' ? '몽골에서 차량을 인수하세요' : language === 'mn' ? 'Монголд машинаа хүлээн аваарай' : language === 'ru' ? 'Получите автомобиль в Монголии' : 'Receive your vehicle in Mongolia',
|
||
},
|
||
].map((item, index) => (
|
||
<div key={item.step} className={`flex items-center gap-6 ${index % 2 === 1 ? 'md:flex-row-reverse' : ''}`}>
|
||
<div className="flex-1 text-right md:text-left">
|
||
{index % 2 === 0 && (
|
||
<div className="bg-white rounded-lg shadow-md p-6">
|
||
<div className="text-primary-600 font-bold mb-2">Step {item.step}</div>
|
||
<h3 className="text-lg font-semibold text-gray-800 mb-2">{item.title}</h3>
|
||
<p className="text-gray-600 text-sm">{item.desc}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center text-white font-bold z-10">
|
||
{item.step}
|
||
</div>
|
||
<div className="flex-1">
|
||
{index % 2 === 1 && (
|
||
<div className="bg-white rounded-lg shadow-md p-6">
|
||
<div className="text-primary-600 font-bold mb-2">Step {item.step}</div>
|
||
<h3 className="text-lg font-semibold text-gray-800 mb-2">{item.title}</h3>
|
||
<p className="text-gray-600 text-sm">{item.desc}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* CTA Section */}
|
||
<div className="container mx-auto px-4 py-16">
|
||
<div className="max-w-2xl mx-auto text-center">
|
||
<h2 className="text-2xl font-bold text-gray-800 mb-4">{t.readyToFindYourCar}</h2>
|
||
<p className="text-gray-600 mb-8">{t.browseOurCollection}</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link
|
||
href="/request"
|
||
className="bg-primary-600 text-white px-8 py-3 rounded-lg hover:bg-primary-700 transition font-medium"
|
||
>
|
||
{t.requestVehicle}
|
||
</Link>
|
||
<Link
|
||
href="/contact"
|
||
className="bg-gray-200 text-gray-800 px-8 py-3 rounded-lg hover:bg-gray-300 transition font-medium"
|
||
>
|
||
{t.contactUs}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|