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>
This commit is contained in:
@@ -47,8 +47,11 @@ export default function Home() {
|
|||||||
<FilmStripSlider banners={banners} settings={bannerSettings} />
|
<FilmStripSlider banners={banners} settings={bannerSettings} />
|
||||||
|
|
||||||
<div className="container mx-auto px-4 py-4 sm:py-8">
|
<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">
|
<div className="flex flex-col lg:flex-row items-center gap-4 lg:gap-6">
|
||||||
{/* Request Vehicle Button */}
|
{/* Spacer for centering Request Vehicle */}
|
||||||
|
<div className="hidden lg:block lg:flex-1"></div>
|
||||||
|
|
||||||
|
{/* Request Vehicle Button - Centered */}
|
||||||
<Link
|
<Link
|
||||||
href="/vehicle-request"
|
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"
|
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>
|
</Link>
|
||||||
|
|
||||||
{/* Divider */}
|
{/* 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>
|
<div className="lg:hidden w-32 h-px bg-white/30"></div>
|
||||||
|
|
||||||
{/* Promo Preference */}
|
{/* Promo Preference - Right side */}
|
||||||
<PromoPreference />
|
<div className="lg:flex-1 flex justify-center lg:justify-start">
|
||||||
|
<PromoPreference />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -4,11 +4,12 @@ import { useState, useEffect } from 'react';
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { carsApi, authApi } from '@/lib/api';
|
import { carsApi, authApi } from '@/lib/api';
|
||||||
import { useAuthStore } from '@/lib/store';
|
import { useAuthStore } from '@/lib/store';
|
||||||
import { useTranslation } from '@/lib/i18n';
|
import { useTranslation, useLanguageStore, translateCarName } from '@/lib/i18n';
|
||||||
import { CarMaker, CarModel } from '@/types';
|
import { CarMaker, CarModel } from '@/types';
|
||||||
|
|
||||||
export default function PromoPreference() {
|
export default function PromoPreference() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const { language } = useLanguageStore();
|
||||||
const { user, token } = useAuthStore();
|
const { user, token } = useAuthStore();
|
||||||
const isLoggedIn = !!token && !!user;
|
const isLoggedIn = !!token && !!user;
|
||||||
|
|
||||||
@@ -149,7 +150,7 @@ export default function PromoPreference() {
|
|||||||
<option value="">{t.selectMaker || 'Select Maker'}</option>
|
<option value="">{t.selectMaker || 'Select Maker'}</option>
|
||||||
{makers.map((maker) => (
|
{makers.map((maker) => (
|
||||||
<option key={maker.id} value={maker.name}>
|
<option key={maker.id} value={maker.name}>
|
||||||
{maker.name}
|
{translateCarName(maker.name, language)}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
@@ -163,7 +164,7 @@ export default function PromoPreference() {
|
|||||||
<option value="">{t.selectModel || 'Select Model'}</option>
|
<option value="">{t.selectModel || 'Select Model'}</option>
|
||||||
{models.map((model) => (
|
{models.map((model) => (
|
||||||
<option key={model.id} value={model.name}>
|
<option key={model.id} value={model.name}>
|
||||||
{model.name}
|
{translateCarName(model.name, language)}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
|||||||
Reference in New Issue
Block a user