From d1b14f8b76485db89a02791db466078c03653e14 Mon Sep 17 00:00:00 2001
From: AutonetSellCar Deploy <autonet@grantech.kr>
Date: Tue, 13 Jan 2026 00:07:18 +0900
Subject: [PATCH] fix: Center Request Vehicle button and translate maker/model
 names

- Adjust layout to center Request Vehicle with PromoPreference on right
- Use translateCarName for maker/model names in combo boxes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/app/page.tsx                   | 15 ++++++++++-----
 frontend/src/components/PromoPreference.tsx |  7 ++++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index cef2fc1..d5693b8 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -47,8 +47,11 @@ export default function Home() {
         <FilmStripSlider banners={banners} settings={bannerSettings} />
 
         <div className="container mx-auto px-4 py-4 sm:py-8">
-          <div className="flex flex-col lg:flex-row items-center justify-center gap-4 lg:gap-8">
-            {/* Request Vehicle Button */}
+          <div className="flex flex-col lg:flex-row items-center gap-4 lg:gap-6">
+            {/* Spacer for centering Request Vehicle */}
+            <div className="hidden lg:block lg:flex-1"></div>
+
+            {/* Request Vehicle Button - Centered */}
             <Link
               href="/vehicle-request"
               className="inline-block bg-yellow-500 text-white font-semibold px-6 py-2.5 sm:px-8 sm:py-3 rounded-lg hover:bg-yellow-600 transition shadow-lg text-sm sm:text-base"
@@ -57,11 +60,13 @@ export default function Home() {
             </Link>
 
             {/* Divider */}
-            <div className="hidden lg:block w-px h-24 bg-white/30"></div>
+            <div className="hidden lg:block w-px h-16 bg-white/30"></div>
             <div className="lg:hidden w-32 h-px bg-white/30"></div>
 
-            {/* Promo Preference */}
-            <PromoPreference />
+            {/* Promo Preference - Right side */}
+            <div className="lg:flex-1 flex justify-center lg:justify-start">
+              <PromoPreference />
+            </div>
           </div>
         </div>
       </section>
diff --git a/frontend/src/components/PromoPreference.tsx b/frontend/src/components/PromoPreference.tsx
index d067920..15399cc 100644
--- a/frontend/src/components/PromoPreference.tsx
+++ b/frontend/src/components/PromoPreference.tsx
@@ -4,11 +4,12 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { carsApi, authApi } from '@/lib/api';
 import { useAuthStore } from '@/lib/store';
-import { useTranslation } from '@/lib/i18n';
+import { useTranslation, useLanguageStore, translateCarName } from '@/lib/i18n';
 import { CarMaker, CarModel } from '@/types';
 
 export default function PromoPreference() {
   const { t } = useTranslation();
+  const { language } = useLanguageStore();
   const { user, token } = useAuthStore();
   const isLoggedIn = !!token && !!user;
 
@@ -149,7 +150,7 @@ export default function PromoPreference() {
             <option value="">{t.selectMaker || 'Select Maker'}</option>
             {makers.map((maker) => (
               <option key={maker.id} value={maker.name}>
-                {maker.name}
+                {translateCarName(maker.name, language)}
               </option>
             ))}
           </select>
@@ -163,7 +164,7 @@ export default function PromoPreference() {
             <option value="">{t.selectModel || 'Select Model'}</option>
             {models.map((model) => (
               <option key={model.id} value={model.name}>
-                {model.name}
+                {translateCarName(model.name, language)}
               </option>
             ))}
           </select>