aimond/sapiens-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the visual design and clarity of the auction guide page

Browse Source 
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
This commit is contained in:
kimjaehyeon0101
2025-09-29 21:43:16 +00:00
parent cc63e6aba0
commit cfa18d6db6
1 changed files with 139 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
client/src/pages/AuctionGuide.tsx
View File

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