damon/AutonetSellCar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile responsiveness across the site

Browse Source 
- Header: Hide notifications/auth on mobile, add to mobile menu, make hamburger more visible
- FilmStripSlider: Responsive image sizes (200-500px based on viewport)
- Home page: Smaller text, buttons, and spacing on mobile
- Car detail: Responsive image height, text sizes, and padding

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
AutonetSellCar Deploy
2026-01-03 10:35:04 +09:00
parent f37f66a9d4
commit f452bbc03b
4 changed files with 189 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/app/cars/[id]/page.tsx
View File

@@ -336,14 +336,14 @@ export default function CarDetailPage() {
const lockedImagesCount = (showAllImages || checkingAccess || isBannerCar === null) ? 0 : Math.max(0, STANDARD_PHOTO_COUNT - displayImages.length);
return (
<div className="bg-gray-50 min-h-screen py-8">
<div className="container mx-auto px-4">
<div className="bg-gray-50 min-h-screen py-4 sm:py-8">
<div className="container mx-auto px-3 sm:px-4">
{/* Back Button */}
<button
onClick={() => router.back()}
className="mb-6 text-primary-600 hover:text-primary-700 flex items-center"
className="mb-4 sm:mb-6 text-primary-600 hover:text-primary-700 flex items-center text-sm sm:text-base"
>
<svg className="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="w-4 h-4 sm:w-5 sm:h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
{t.back}
@@ -385,11 +385,11 @@ export default function CarDetailPage() {
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-8">
{/* Images */}
<div>
{/* Main Image */}
<div className="bg-gray-200 rounded-lg overflow-hidden h-96 mb-4 relative">
<div className="bg-gray-200 rounded-lg overflow-hidden h-56 sm:h-80 lg:h-96 mb-3 sm:mb-4 relative">
{displayImages.length > 0 ? (
<img
src={getImageUrl(displayImages[selectedImage]?.url)}
@@ -414,7 +414,7 @@ export default function CarDetailPage() {
{/* Soldout overlay */}
{car.soldout && (
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
<span className="bg-red-600 text-white px-6 py-3 rounded-lg font-bold text-2xl transform -rotate-12 shadow-lg">
<span className="bg-red-600 text-white px-4 py-2 sm:px-6 sm:py-3 rounded-lg font-bold text-lg sm:text-2xl transform -rotate-12 shadow-lg">
{language === 'ko' ? '판매완료' : 'SOLD OUT'}
</span>
</div>
@@ -536,12 +536,12 @@ export default function CarDetailPage() {
{/* Details */}
<div>
<div className="flex items-center gap-3 mb-2">
<h1 className="text-3xl font-bold text-gray-800">
<div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-2">
<h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800">
{translate(car.car_name) || `${translate(car.maker?.name) || ''} ${translate(car.model?.name) || ''}`.trim() || '-'}
</h1>
{car.soldout && (
<span className="px-3 py-1 bg-red-600 text-white text-sm font-bold rounded-full">
<span className="px-2 py-0.5 sm:px-3 sm:py-1 bg-red-600 text-white text-xs sm:text-sm font-bold rounded-full">
{language === 'ko' ? '판매완료' : 'SOLD OUT'}
</span>
)}
@@ -550,22 +550,22 @@ export default function CarDetailPage() {
{(() => {
const price = formatPrice(car.final_price_krw || car.price_krw);
return (
<div className="mb-6">
<p className="text-3xl font-bold text-primary-600">
<div className="mb-4 sm:mb-6">
<p className="text-2xl sm:text-3xl font-bold text-primary-600">
{price.usdt !== '-' ? price.usdt : t.contactForPrice}
</p>
{/* Show local currency for all languages */}
{price.local !== '-' && (
<p className="text-lg text-gray-500">({price.local})</p>
<p className="text-base sm:text-lg text-gray-500">({price.local})</p>
)}
</div>
);
})()}
{/* Specs Grid */}
<div className="bg-white rounded-lg shadow p-6 mb-6">
<h2 className="text-lg font-semibold mb-4">{t.specifications}</h2>
<div className="grid grid-cols-2 gap-4">
<div className="bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6">
<h2 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4">{t.specifications}</h2>
<div className="grid grid-cols-2 gap-3 sm:gap-4 text-sm sm:text-base">
<div>
<span className="text-gray-500">{t.year}</span>
<p className="font-medium">{car.year || '-'}{car.month ? ` / ${car.month}` : ''}</p>
@@ -602,8 +602,8 @@ export default function CarDetailPage() {
</div>
{/* Status - Only show full details if purchased */}
<div className="bg-white rounded-lg shadow p-6 mb-6">
<h2 className="text-lg font-semibold mb-4">{t.vehicleStatus}</h2>
<div className="bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6">
<h2 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4">{t.vehicleStatus}</h2>
{hasAccess ? (
<div className="grid grid-cols-2 gap-4">
<div>
@@ -637,9 +637,9 @@ export default function CarDetailPage() {
{/* Performance Check Section */}
{performanceCheck?.found && (
<div className="bg-white rounded-lg shadow p-6 mb-6">
<h2 className="text-lg font-semibold mb-4 flex items-center">
<svg className="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="bg-white rounded-lg shadow p-4 sm:p-6 mb-4 sm:mb-6">
<h2 className="text-base sm:text-lg font-semibold mb-3 sm:mb-4 flex items-center">
<svg className="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
{t.performanceCheck || 'Performance Check Report'}

58
frontend/src/app/page.tsx
View File

@@ -33,11 +33,11 @@ export default function Home() {
<div>
{/* Hero Section with Film Strip Slider */}
<section className="bg-gradient-to-r from-primary-700 to-primary-900 text-white">
<div className="container mx-auto px-4 pt-12 pb-4 text-center">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
<div className="container mx-auto px-4 pt-6 sm:pt-12 pb-2 sm:pb-4 text-center">
<h1 className="text-2xl sm:text-4xl md:text-5xl font-bold mb-2 sm:mb-4">
{t.premiumKoreanUsedCars}
</h1>
<p className="text-xl md:text-2xl text-primary-100 mb-6">
<p className="text-base sm:text-xl md:text-2xl text-primary-100 mb-4 sm:mb-6">
{t.qualityVehiclesExported}
</p>
</div>
@@ -45,10 +45,10 @@ export default function Home() {
{/* Film Strip Slider */}
<FilmStripSlider banners={banners} settings={bannerSettings} />
<div className="container mx-auto px-4 py-8 text-center">
<div className="container mx-auto px-4 py-4 sm:py-8 text-center">
<Link
href="/vehicle-request"
className="inline-block bg-yellow-500 text-white font-semibold px-8 py-3 rounded-lg hover:bg-yellow-600 transition shadow-lg"
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"
>
{t.requestVehicle}
</Link>
@@ -56,58 +56,58 @@ export default function Home() {
</section>
{/* Features */}
<section className="py-16 bg-gray-50">
<section className="py-10 sm:py-16 bg-gray-50">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center mb-12">{t.whyChooseUs}</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="text-center p-6">
<div className="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<h2 className="text-2xl sm:text-3xl font-bold text-center mb-8 sm:mb-12">{t.whyChooseUs}</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
<div className="text-center p-4 sm:p-6">
<div className="w-12 h-12 sm:w-16 sm:h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
<svg className="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 className="text-xl font-semibold mb-2">{t.qualityAssured}</h3>
<p className="text-gray-600">{t.qualityAssuredDesc}</p>
<h3 className="text-lg sm:text-xl font-semibold mb-2">{t.qualityAssured}</h3>
<p className="text-gray-600 text-sm sm:text-base">{t.qualityAssuredDesc}</p>
</div>
<div className="text-center p-6">
<div className="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="text-center p-4 sm:p-6">
<div className="w-12 h-12 sm:w-16 sm:h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
<svg className="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 className="text-xl font-semibold mb-2">{t.bestPrices}</h3>
<p className="text-gray-600">{t.bestPricesDesc}</p>
<h3 className="text-lg sm:text-xl font-semibold mb-2">{t.bestPrices}</h3>
<p className="text-gray-600 text-sm sm:text-base">{t.bestPricesDesc}</p>
</div>
<div className="text-center p-6">
<div className="w-16 h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="text-center p-4 sm:p-6">
<div className="w-12 h-12 sm:w-16 sm:h-16 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
<svg className="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</div>
<h3 className="text-xl font-semibold mb-2">{t.fullSupport}</h3>
<p className="text-gray-600">{t.fullSupportDesc}</p>
<h3 className="text-lg sm:text-xl font-semibold mb-2">{t.fullSupport}</h3>
<p className="text-gray-600 text-sm sm:text-base">{t.fullSupportDesc}</p>
</div>
</div>
</div>
</section>
{/* CTA */}
<section className="bg-primary-700 text-white py-16">
<section className="bg-primary-700 text-white py-10 sm:py-16">
<div className="container mx-auto px-4 text-center">
<h2 className="text-3xl font-bold mb-4">{t.readyToFindYourCar}</h2>
<p className="text-primary-100 mb-8 max-w-2xl mx-auto">
<h2 className="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">{t.readyToFindYourCar}</h2>
<p className="text-primary-100 mb-6 sm:mb-8 max-w-2xl mx-auto text-sm sm:text-base">
{t.browseOurCollection}
</p>
<div className="flex justify-center space-x-4">
<div className="flex flex-col sm:flex-row justify-center gap-3 sm:space-x-4">
<Link
href="/cars"
className="bg-white text-primary-700 font-semibold px-6 py-3 rounded-lg hover:bg-primary-100 transition"
className="bg-white text-primary-700 font-semibold px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg hover:bg-primary-100 transition text-sm sm:text-base"
>
{t.browseCars}
</Link>
<Link
href="/contact"
className="border-2 border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white hover:text-primary-700 transition"
className="border-2 border-white text-white font-semibold px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg hover:bg-white hover:text-primary-700 transition text-sm sm:text-base"
>
{t.contactUs}
</Link>