From cfa18d6db6884b8611ad6242afee84f441e00737 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 21:43:16 +0000
Subject: [PATCH] Improve the visual design and clarity of the auction guide
 page

Refactor the AuctionGuide component to update styling, adjust font sizes and spacing, and refine the overall layout for a cleaner user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bLfICpO
---
 client/src/pages/AuctionGuide.tsx | 278 +++++++++++++++---------------
 1 file changed, 139 insertions(+), 139 deletions(-)

diff --git a/client/src/pages/AuctionGuide.tsx b/client/src/pages/AuctionGuide.tsx
index 721951c..c9e0ffd 100644
--- a/client/src/pages/AuctionGuide.tsx
+++ b/client/src/pages/AuctionGuide.tsx
@@ -24,10 +24,10 @@ import {
 export default function AuctionGuide() {
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-gray-50">
       {/* Header */}
-      <header className="bg-card border-b border-border sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 py-2">
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 py-3">
           <div className="flex items-center justify-between">
             <Link href="/">
               <img 
@@ -53,28 +53,28 @@ export default function AuctionGuide() {
         </div>
       </header>
 
-      <main className="max-w-6xl mx-auto px-4 py-4">
+      <main className="max-w-6xl mx-auto px-4 py-3">
         {/* Header Section */}
-        <div className="mb-4">
-          <h1 className="text-3xl font-bold mb-2" data-testid="text-guide-title">SAPIENS Media Outlet Auction System Complete Guide</h1>
-          <p className="text-lg text-muted-foreground">
+        <div className="mb-3">
+          <h1 className="text-2xl font-bold mb-1" data-testid="text-guide-title">Media Outlet Auction System Guide</h1>
+          <p className="text-sm text-gray-600">
             Innovative media management rights auction platform based on advertising bidding methods
           </p>
         </div>
 
         {/* Overview Card */}
-        <Card className="mb-4" data-testid="section-overview">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center space-x-2 text-lg">
+        <Card className="mb-3" data-testid="section-overview">
+          <CardHeader className="pb-1 pt-3 px-3">
+            <CardTitle className="flex items-center gap-2 text-base font-semibold">
               <Lightbulb className="h-4 w-4 text-primary" />
               <span>Auction System Overview</span>
             </CardTitle>
           </CardHeader>
-          <CardContent className="pt-0">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <CardContent className="pt-0 px-3 pb-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               <div>
-                <h3 className="font-semibold mb-2">🎯 Core Principles</h3>
-                <ul className="space-y-1 text-sm">
+                <h3 className="font-semibold mb-1 text-sm">🎯 Core Principles</h3>
+                <ul className="space-y-0.5 text-xs">
                   <li>• <strong>Vickrey Auction Method</strong>: Nobel Prize-winning theory applied</li>
                   <li>• <strong>Hybrid Scoring</strong>: Bid amount × quality score combination</li>
                   <li>• <strong>Fair Pricing</strong>: Second-price bid-based charging</li>
@@ -82,8 +82,8 @@ export default function AuctionGuide() {
                 </ul>
               </div>
               <div>
-                <h3 className="font-semibold mb-2">📊 Auction Targets</h3>
-                <ul className="space-y-1 text-sm">
+                <h3 className="font-semibold mb-1 text-sm">📊 Auction Targets</h3>
+                <ul className="space-y-0.5 text-xs">
                   <li>• <strong>People (24)</strong>: Management rights for key figures' media outlets</li>
                   <li>• <strong>Topics (20)</strong>: Core topic content management rights</li>
                   <li>• <strong>Companies (27)</strong>: Corporate media management rights</li>
@@ -95,41 +95,41 @@ export default function AuctionGuide() {
         </Card>
 
         {/* Core Mechanism */}
-        <Card className="mb-4" data-testid="section-mechanism">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center space-x-2 text-lg">
+        <Card className="mb-3" data-testid="section-mechanism">
+          <CardHeader className="pb-1 pt-3 px-3">
+            <CardTitle className="flex items-center gap-2 text-base font-semibold">
               <Settings className="h-4 w-4 text-chart-1" />
               <span>1. Basic Auction Mechanism</span>
             </CardTitle>
           </CardHeader>
-          <CardContent className="pt-0">
-            <div className="space-y-4">
-              <div className="bg-primary/5 rounded-lg p-4">
-                <h3 className="font-semibold mb-3 flex items-center">
+          <CardContent className="pt-0 px-3 pb-3">
+            <div className="space-y-2">
+              <div className="bg-blue-50 rounded p-3">
+                <h3 className="font-semibold mb-2 flex items-center text-sm">
                   <Award className="h-4 w-4 text-primary mr-2" />
                   Vickrey Auction Method
                 </h3>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                   <div className="text-center">
-                    <div className="w-10 h-10 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-bold mx-auto mb-2">1</div>
-                    <h4 className="font-medium mb-1 text-sm">Highest Bidder Wins</h4>
-                    <p className="text-xs text-muted-foreground">Bidder with highest total score wins</p>
+                    <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-bold mx-auto mb-1">1</div>
+                    <h4 className="font-medium mb-0.5 text-xs">Highest Bidder Wins</h4>
+                    <p className="text-xs text-gray-600">Bidder with highest total score wins</p>
                   </div>
                   <div className="text-center">
-                    <div className="w-10 h-10 bg-chart-2 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2">2</div>
-                    <h4 className="font-medium mb-1 text-sm">Pay Second Price</h4>
-                    <p className="text-xs text-muted-foreground">Actually only pay second-place bid</p>
+                    <div className="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center text-white text-sm font-bold mx-auto mb-1">2</div>
+                    <h4 className="font-medium mb-0.5 text-xs">Pay Second Price</h4>
+                    <p className="text-xs text-gray-600">Actually only pay second-place bid</p>
                   </div>
                   <div className="text-center">
-                    <div className="w-10 h-10 bg-chart-3 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2">3</div>
-                    <h4 className="font-medium mb-1 text-sm">Fair Price Formation</h4>
-                    <p className="text-xs text-muted-foreground">Prevents excessive bidding and increases efficiency</p>
+                    <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold mx-auto mb-1">3</div>
+                    <h4 className="font-medium mb-0.5 text-xs">Fair Price Formation</h4>
+                    <p className="text-xs text-gray-600">Prevents excessive bidding and increases efficiency</p>
                   </div>
                 </div>
               </div>
 
-              <div className="bg-chart-1/5 rounded-lg p-4">
-                <h4 className="font-semibold mb-2 text-sm">📝 Real Example</h4>
+              <div className="bg-gray-100 rounded p-3">
+                <h4 className="font-semibold mb-1 text-xs">📝 Real Example</h4>
                 <div className="space-y-1 text-xs">
                   <p><strong>Bidder A:</strong> $1,000 × 85pts = 85,000pts (1st place winner)</p>
                   <p><strong>Bidder B:</strong> $800 × 90pts = 72,000pts (2nd place)</p>
@@ -144,30 +144,30 @@ export default function AuctionGuide() {
         </Card>
 
         {/* Ranking System */}
-        <Card className="mb-4" data-testid="section-ranking">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center space-x-2 text-lg">
+        <Card className="mb-3" data-testid="section-ranking">
+          <CardHeader className="pb-1 pt-3 px-3">
+            <CardTitle className="flex items-center gap-2 text-base font-semibold">
               <TrendingUp className="h-4 w-4 text-chart-2" />
               <span>2. Ranking System</span>
             </CardTitle>
           </CardHeader>
-          <CardContent className="pt-0">
-            <div className="space-y-4">
-              <div className="text-center bg-gradient-to-r from-primary/10 to-chart-2/10 rounded-lg p-4">
-                <h3 className="text-xl font-bold mb-2">Final Ranking Formula</h3>
-                <div className="text-2xl font-bold text-primary mb-1">
+          <CardContent className="pt-0 px-3 pb-3">
+            <div className="space-y-2">
+              <div className="text-center bg-gradient-to-r from-blue-50 to-green-50 rounded p-3">
+                <h3 className="text-sm font-bold mb-1">Final Ranking Formula</h3>
+                <div className="text-lg font-bold text-blue-600 mb-0.5">
                   Ranking Score = Bid Amount × (Quality Score ÷ 100)
                 </div>
-                <p className="text-sm text-muted-foreground">Same weighting system as advertising auctions</p>
+                <p className="text-xs text-gray-600">Same weighting system as advertising auctions</p>
               </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                 <div>
-                  <h4 className="font-semibold mb-2 flex items-center">
-                    <DollarSign className="h-4 w-4 text-primary mr-2" />
+                  <h4 className="font-semibold mb-1 flex items-center text-sm">
+                    <DollarSign className="h-3 w-3 text-blue-600 mr-1" />
                     Bid Amount
                   </h4>
-                  <ul className="space-y-1 text-sm">
+                  <ul className="space-y-0.5 text-xs">
                     <li>• Minimum bid: $100</li>
                     <li>• Maximum bid: $100,000</li>
                     <li>• Must be higher than current top bid</li>
@@ -175,11 +175,11 @@ export default function AuctionGuide() {
                   </ul>
                 </div>
                 <div>
-                  <h4 className="font-semibold mb-2 flex items-center">
-                    <Star className="h-4 w-4 text-chart-2 mr-2" />
+                  <h4 className="font-semibold mb-1 flex items-center text-sm">
+                    <Star className="h-3 w-3 text-green-600 mr-1" />
                     Quality Score
                   </h4>
-                  <ul className="space-y-1 text-sm">
+                  <ul className="space-y-0.5 text-xs">
                     <li>• Score range: 1-100 points</li>
                     <li>• Content quality evaluation</li>
                     <li>• User engagement analysis</li>
@@ -192,18 +192,18 @@ export default function AuctionGuide() {
         </Card>
 
         {/* Quality Score System */}
-        <Card className="mb-4" data-testid="section-quality">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center space-x-2 text-lg">
+        <Card className="mb-3" data-testid="section-quality">
+          <CardHeader className="pb-1 pt-3 px-3">
+            <CardTitle className="flex items-center gap-2 text-base font-semibold">
               <Award className="h-4 w-4 text-chart-3" />
               <span>3. Quality Score System</span>
             </CardTitle>
           </CardHeader>
-          <CardContent className="pt-0">
-            <div className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-                <Card className="border-destructive/20">
-                  <CardContent className="p-3 text-center">
+          <CardContent className="pt-0 px-3 pb-3">
+            <div className="space-y-2">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
+                <Card className="border-red-200">
+                  <CardContent className="p-2 text-center">
                     <Badge variant="destructive" className="mb-1 text-xs">1-40 pts</Badge>
                     <h4 className="font-semibold mb-1 text-sm">Low Quality</h4>
                     <ul className="text-xs space-y-0.5">
@@ -213,8 +213,8 @@ export default function AuctionGuide() {
                     </ul>
                   </CardContent>
                 </Card>
-                <Card className="border-chart-4/20">
-                  <CardContent className="p-3 text-center">
+                <Card className="border-gray-200">
+                  <CardContent className="p-2 text-center">
                     <Badge variant="secondary" className="mb-1 text-xs">41-70 pts</Badge>
                     <h4 className="font-semibold mb-1 text-sm">Average Quality</h4>
                     <ul className="text-xs space-y-0.5">
@@ -224,8 +224,8 @@ export default function AuctionGuide() {
                     </ul>
                   </CardContent>
                 </Card>
-                <Card className="border-chart-2/20">
-                  <CardContent className="p-3 text-center">
+                <Card className="border-green-200">
+                  <CardContent className="p-2 text-center">
                     <Badge variant="default" className="mb-1 text-xs">71-100 pts</Badge>
                     <h4 className="font-semibold mb-1 text-sm">High Quality</h4>
                     <ul className="text-xs space-y-0.5">
@@ -237,23 +237,23 @@ export default function AuctionGuide() {
                 </Card>
               </div>
 
-              <div className="bg-chart-2/5 rounded-lg p-4">
-                <h4 className="font-semibold mb-2 flex items-center">
-                  <Calculator className="h-4 w-4 text-chart-2 mr-2" />
+              <div className="bg-green-50 rounded p-3">
+                <h4 className="font-semibold mb-1 flex items-center text-sm">
+                  <Calculator className="h-3 w-3 text-green-600 mr-1" />
                   Quality Score Benefits
                 </h4>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
                   <div>
-                    <h5 className="font-medium mb-1">📈 Ranking Improvement</h5>
-                    <p className="text-xs text-muted-foreground">Higher quality scores prioritized among same bids</p>
+                    <h5 className="font-medium mb-0.5 text-xs">📈 Ranking Improvement</h5>
+                    <p className="text-xs text-gray-600">Higher quality scores prioritized among same bids</p>
                   </div>
                   <div>
-                    <h5 className="font-medium mb-1">💰 Cost Savings</h5>
-                    <p className="text-xs text-muted-foreground">Achieve high rankings with lower bids</p>
+                    <h5 className="font-medium mb-0.5 text-xs">💰 Cost Savings</h5>
+                    <p className="text-xs text-gray-600">Achieve high rankings with lower bids</p>
                   </div>
                   <div>
-                    <h5 className="font-medium mb-1">🎯 Increased Effectiveness</h5>
-                    <p className="text-xs text-muted-foreground">More exposure and user engagement opportunities</p>
+                    <h5 className="font-medium mb-0.5 text-xs">🎯 Increased Effectiveness</h5>
+                    <p className="text-xs text-gray-600">More exposure and user engagement opportunities</p>
                   </div>
                 </div>
               </div>
@@ -262,22 +262,22 @@ export default function AuctionGuide() {
         </Card>
 
         {/* Auction Types */}
-        <Card className="mb-4" data-testid="section-types">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center space-x-2 text-lg">
+        <Card className="mb-3" data-testid="section-types">
+          <CardHeader className="pb-1 pt-3 px-3">
+            <CardTitle className="flex items-center gap-2 text-base font-semibold">
               <List className="h-4 w-4 text-chart-4" />
               <span>4. Auction Types</span>
             </CardTitle>
           </CardHeader>
-          <CardContent className="pt-0">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <Card className="border-primary/20">
-                <CardContent className="p-3">
-                  <h4 className="font-semibold mb-2 flex items-center">
-                    <Users className="h-4 w-4 text-primary mr-2" />
+          <CardContent className="pt-0 px-3 pb-3">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <Card className="border-blue-200">
+                <CardContent className="p-2">
+                  <h4 className="font-semibold mb-1 flex items-center text-sm">
+                    <Users className="h-3 w-3 text-blue-600 mr-1" />
                     People
                   </h4>
-                  <ul className="space-y-1 text-sm">
+                  <ul className="space-y-0.5 text-xs">
                     <li>• <strong>24 key figures</strong></li>
                     <li>• Personal branding management</li>
                     <li>• Statements and activity content</li>
@@ -286,13 +286,13 @@ export default function AuctionGuide() {
                   </ul>
                 </CardContent>
               </Card>
-              <Card className="border-chart-1/20">
-                <CardContent className="p-3">
-                  <h4 className="font-semibold mb-2 flex items-center">
-                    <Hash className="h-4 w-4 text-chart-1 mr-2" />
+              <Card className="border-green-200">
+                <CardContent className="p-2">
+                  <h4 className="font-semibold mb-1 flex items-center text-sm">
+                    <Hash className="h-3 w-3 text-green-600 mr-1" />
                     Topics
                   </h4>
-                  <ul className="space-y-1 text-sm">
+                  <ul className="space-y-0.5 text-xs">
                     <li>• <strong>20 core topics</strong></li>
                     <li>• Trend analysis management</li>
                     <li>• Topic-specific content curation</li>
@@ -301,13 +301,13 @@ export default function AuctionGuide() {
                   </ul>
                 </CardContent>
               </Card>
-              <Card className="border-chart-2/20">
-                <CardContent className="p-3">
-                  <h4 className="font-semibold mb-2 flex items-center">
-                    <Building className="h-4 w-4 text-chart-2 mr-2" />
+              <Card className="border-purple-200">
+                <CardContent className="p-2">
+                  <h4 className="font-semibold mb-1 flex items-center text-sm">
+                    <Building className="h-3 w-3 text-purple-600 mr-1" />
                     Companies
                   </h4>
-                  <ul className="space-y-1 text-sm">
+                  <ul className="space-y-0.5 text-xs">
                     <li>• <strong>27 major companies</strong></li>
                     <li>• Corporate news management</li>
                     <li>• Financial information updates</li>
@@ -321,19 +321,19 @@ export default function AuctionGuide() {
         </Card>
 
         {/* Strategic Bidding */}
-        <Card className="mb-4" data-testid="section-strategy">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center space-x-2 text-lg">
+        <Card className="mb-3" data-testid="section-strategy">
+          <CardHeader className="pb-1 pt-3 px-3">
+            <CardTitle className="flex items-center gap-2 text-base font-semibold">
               <Target className="h-4 w-4 text-chart-5" />
               <span>5. Strategic Bidding Guide</span>
             </CardTitle>
           </CardHeader>
-          <CardContent className="pt-0">
-            <div className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <CardContent className="pt-0 px-3 pb-3">
+            <div className="space-y-2">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                 <div>
-                  <h4 className="font-semibold mb-2 text-primary">💡 Effective Bidding Strategies</h4>
-                  <ul className="space-y-1 text-sm">
+                  <h4 className="font-semibold mb-1 text-blue-600 text-sm">💡 Effective Bidding Strategies</h4>
+                  <ul className="space-y-0.5 text-xs">
                     <li>• <strong>Improve Quality Score First</strong>: Higher ROI than bid amount</li>
                     <li>• <strong>Analyze Competition</strong>: Study similar category auctions</li>
                     <li>• <strong>Gradual Bidding</strong>: Step-by-step increases over large amounts</li>
@@ -341,8 +341,8 @@ export default function AuctionGuide() {
                   </ul>
                 </div>
                 <div>
-                  <h4 className="font-semibold mb-2 text-destructive">⚠️ Mistakes to Avoid</h4>
-                  <ul className="space-y-1 text-sm">
+                  <h4 className="font-semibold mb-1 text-red-600 text-sm">⚠️ Mistakes to Avoid</h4>
+                  <ul className="space-y-0.5 text-xs">
                     <li>• <strong>Ignoring Quality Score</strong>: Cannot win with bid amount alone</li>
                     <li>• <strong>Excessive Competition</strong>: Losses from emotional bidding</li>
                     <li>• <strong>Short-term Thinking</strong>: Not considering profitability vs management period</li>
@@ -351,31 +351,31 @@ export default function AuctionGuide() {
                 </div>
               </div>
 
-              <div className="bg-accent/10 rounded-lg p-4">
-                <h4 className="font-semibold mb-2 flex items-center">
-                  <Lightbulb className="h-4 w-4 text-accent mr-2" />
+              <div className="bg-blue-50 rounded p-3">
+                <h4 className="font-semibold mb-1 flex items-center text-sm">
+                  <Lightbulb className="h-3 w-3 text-blue-600 mr-1" />
                   Successful Auction Participation Tips
                 </h4>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
                   <div>
-                    <h5 className="font-medium mb-1">Phase 1: Preparation</h5>
-                    <ul className="space-y-0.5 text-xs text-muted-foreground">
+                    <h5 className="font-medium mb-0.5 text-xs">Phase 1: Preparation</h5>
+                    <ul className="space-y-0.5 text-xs text-gray-600">
                       <li>• Select target media outlets</li>
                       <li>• Establish budget plan</li>
                       <li>• Self-assess quality score</li>
                     </ul>
                   </div>
                   <div>
-                    <h5 className="font-medium mb-1">Phase 2: Analysis</h5>
-                    <ul className="space-y-0.5 text-xs text-muted-foreground">
+                    <h5 className="font-medium mb-0.5 text-xs">Phase 2: Analysis</h5>
+                    <ul className="space-y-0.5 text-xs text-gray-600">
                       <li>• Analyze past auction results</li>
                       <li>• Competitor bidding patterns</li>
                       <li>• Market value assessment</li>
                     </ul>
                   </div>
                   <div>
-                    <h5 className="font-medium mb-1">Phase 3: Execution</h5>
-                    <ul className="space-y-0.5 text-xs text-muted-foreground">
+                    <h5 className="font-medium mb-0.5 text-xs">Phase 3: Execution</h5>
+                    <ul className="space-y-0.5 text-xs text-gray-600">
                       <li>• Execute planned bids</li>
                       <li>• Real-time monitoring</li>
                       <li>• Timely adjustments and responses</li>
@@ -388,29 +388,29 @@ export default function AuctionGuide() {
         </Card>
 
         {/* Technical Implementation */}
-        <Card className="mb-4" data-testid="section-technical">
-          <CardHeader className="pb-2">
-            <CardTitle className="flex items-center space-x-2 text-lg">
+        <Card className="mb-3" data-testid="section-technical">
+          <CardHeader className="pb-1 pt-3 px-3">
+            <CardTitle className="flex items-center gap-2 text-base font-semibold">
               <Brain className="h-4 w-4 text-primary" />
               <span>6. Technical Implementation</span>
             </CardTitle>
           </CardHeader>
-          <CardContent className="pt-0">
-            <div className="space-y-4">
-              <div className="bg-primary/5 rounded-lg p-4">
-                <h4 className="font-semibold mb-2">🔧 System Architecture</h4>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+          <CardContent className="pt-0 px-3 pb-3">
+            <div className="space-y-2">
+              <div className="bg-blue-50 rounded p-3">
+                <h4 className="font-semibold mb-1 text-sm">🔧 System Architecture</h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
                   <div>
-                    <h5 className="font-medium mb-1">Real-time Bid Processing</h5>
-                    <ul className="space-y-0.5 text-xs text-muted-foreground">
+                    <h5 className="font-medium mb-0.5 text-xs">Real-time Bid Processing</h5>
+                    <ul className="space-y-0.5 text-xs text-gray-600">
                       <li>• PostgreSQL-based transaction management</li>
                       <li>• Concurrency control and integrity assurance</li>
                       <li>• Real-time ranking updates</li>
                     </ul>
                   </div>
                   <div>
-                    <h5 className="font-medium mb-1">Security and Verification</h5>
-                    <ul className="space-y-0.5 text-xs text-muted-foreground">
+                    <h5 className="font-medium mb-0.5 text-xs">Security and Verification</h5>
+                    <ul className="space-y-0.5 text-xs text-gray-600">
                       <li>• User authentication and authorization</li>
                       <li>• Bid data encryption</li>
                       <li>• Fraud prevention system</li>
@@ -419,20 +419,20 @@ export default function AuctionGuide() {
                 </div>
               </div>
 
-              <div className="bg-chart-2/5 rounded-lg p-4">
-                <h4 className="font-semibold mb-2">📊 Data Analysis</h4>
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
+              <div className="bg-green-50 rounded p-3">
+                <h4 className="font-semibold mb-1 text-sm">📊 Data Analysis</h4>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs">
                   <div>
-                    <h5 className="font-medium mb-1">Bidding Pattern Analysis</h5>
-                    <p className="text-xs text-muted-foreground">Track user-specific bid history and success rates</p>
+                    <h5 className="font-medium mb-0.5 text-xs">Bidding Pattern Analysis</h5>
+                    <p className="text-xs text-gray-600">Track user-specific bid history and success rates</p>
                   </div>
                   <div>
-                    <h5 className="font-medium mb-1">Market Price Prediction</h5>
-                    <p className="text-xs text-muted-foreground">ML-based optimal bid suggestions</p>
+                    <h5 className="font-medium mb-0.5 text-xs">Market Price Prediction</h5>
+                    <p className="text-xs text-gray-600">ML-based optimal bid suggestions</p>
                   </div>
                   <div>
-                    <h5 className="font-medium mb-1">Performance Measurement</h5>
-                    <p className="text-xs text-muted-foreground">ROI analysis after acquiring management rights</p>
+                    <h5 className="font-medium mb-0.5 text-xs">Performance Measurement</h5>
+                    <p className="text-xs text-gray-600">ROI analysis after acquiring management rights</p>
                   </div>
                 </div>
               </div>
@@ -441,13 +441,13 @@ export default function AuctionGuide() {
         </Card>
 
         {/* Call to Action */}
-        <Card className="bg-gradient-to-r from-primary/10 to-chart-2/10">
-          <CardContent className="p-6 text-center">
-            <h3 className="text-2xl font-bold mb-2">Join the Auction Now!</h3>
-            <p className="text-muted-foreground mb-4">
+        <Card className="bg-gradient-to-r from-blue-50 to-green-50">
+          <CardContent className="p-4 text-center">
+            <h3 className="text-lg font-bold mb-1">Join the Auction Now!</h3>
+            <p className="text-gray-600 mb-3 text-sm">
               Start your innovative media management experience and acquire the best media outlet rights
             </p>
-            <div className="flex justify-center space-x-3">
+            <div className="flex justify-center gap-2">
               <Link href="/auctions">
                 <Button data-testid="button-view-auctions">
                   <Gavel className="mr-2 h-4 w-4" />