From 37ee4cff1ddfdba87661bd1e3d8f4f15679cb863 Mon Sep 17 00:00:00 2001
From: AutonetSellCar Deploy <autonet@grantech.kr>
Date: Thu, 15 Jan 2026 22:38:42 +0900
Subject: [PATCH] feat: Swap images between About and Contact pages

- 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>
---
 frontend/src/app/about/page.tsx   | 44 +++++++++++++------------------
 frontend/src/app/contact/page.tsx | 32 +++++++++++-----------
 2 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
index f7350ed..ec8df82 100644
--- a/frontend/src/app/about/page.tsx
+++ b/frontend/src/app/about/page.tsx
@@ -60,36 +60,32 @@ export default function AboutPage() {
 
   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>
+      {/* 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-6xl mx-auto">
+        <div className="max-w-4xl mx-auto">
           <div className="bg-white rounded-lg shadow-md p-8 md:p-12">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
-              {/* Image Section */}
-              <div className="relative h-64 lg:h-80 rounded-lg overflow-hidden shadow-lg">
-                <Image
-                  src="/images/handshake.png"
-                  alt="Global Partnership"
-                  fill
-                  className="object-cover"
-                  priority
-                />
-              </div>
-
-              {/* Text Section */}
-              <div>
-                <h2 className="text-2xl font-bold text-gray-800 mb-6">{t.companyIntro}</h2>
-                <div className="prose max-w-none text-gray-600">
+            <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">
@@ -165,8 +161,6 @@ export default function AboutPage() {
                   </p>
                 </>
               )}
-                </div>
-              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/contact/page.tsx b/frontend/src/app/contact/page.tsx
index cd64107..f1da8aa 100644
--- a/frontend/src/app/contact/page.tsx
+++ b/frontend/src/app/contact/page.tsx
@@ -162,10 +162,21 @@ export default function ContactPage() {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* Hero Section */}
-      <section className="bg-gradient-to-r from-primary-700 to-primary-900 text-white py-16">
-        <div className="container mx-auto px-4 text-center">
-          <h1 className="text-4xl md:text-5xl font-bold mb-4">{t.contactUs}</h1>
+      {/* Hero Section with Background Image */}
+      <section className="relative py-20 overflow-hidden">
+        {/* Background Image */}
+        <div className="absolute inset-0">
+          <Image
+            src="/images/handshake.png"
+            alt="Global Partnership"
+            fill
+            className="object-cover"
+            priority
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-primary-900/85 to-primary-700/85" />
+        </div>
+        <div className="container mx-auto px-4 text-center relative z-10">
+          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-white">{t.contactUs}</h1>
           <p className="text-xl text-primary-100 max-w-2xl mx-auto">
             {language === 'ko' ? '궁금한 점이 있으시면 언제든지 문의해 주세요' : 'Feel free to contact us anytime'}
           </p>
@@ -555,17 +566,8 @@ export default function ContactPage() {
       )}
 
       {/* Business Partnership Section */}
-      <section className="bg-gradient-to-r from-primary-800 to-primary-900 py-16 relative overflow-hidden">
-        {/* Background Image */}
-        <div className="absolute inset-0 opacity-20">
-          <Image
-            src="/images/cars-export.png"
-            alt="Car Export Terminal"
-            fill
-            className="object-cover"
-          />
-        </div>
-        <div className="container mx-auto px-4 relative z-10">
+      <section className="bg-gradient-to-r from-primary-800 to-primary-900 py-16">
+        <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto text-center">
             <div className="flex items-center justify-center gap-3 mb-4">
               <svg className="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">