Initial commit: AutonetSellCar platform with deployment system

- Frontend: Next.js 14 with TypeScript
- Backend: FastAPI with SQLAlchemy
- Agent: Carmodoo sync agent
- Deployment: Docker Compose based staging/production setup
- Scripts: Automated deployment with rollback support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/app/about/page.tsx

@@ -0,0 +1,287 @@
+'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 */}
+      <div className="bg-gradient-to-r from-primary-700 to-primary-900 text-white">
+        <div className="container mx-auto px-4 py-16">
+          <div className="max-w-4xl mx-auto text-center">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">{t.aboutTitle}</h1>
+            <p className="text-xl text-primary-100">{t.aboutSubtitle}</p>
+          </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>
+  );
+}