Skip to content

Commit dce1cdc

Browse files
b0aseclaude
b0ase
and
claude
committed
Redesign market page with professional formatting
- Remove emoji-based feature cards for cleaner design - Replace with numbered list layout with proper spacing - Add section header and descriptive subtitle - Use professional terminology (Platform Capabilities) - Improve content descriptions with enterprise language - Maintain responsive design for mobile devices - Remove childish visual elements for business presentation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent f24d78a commit dce1cdc

File tree

1 file changed

+114
-53
lines changed

1 file changed

+114
-53
lines changed

‎frontend/src/pages/MarketPage.tsx‎

Lines changed: 114 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -57,43 +57,77 @@ const MarketPage: React.FC = () => {
5757
}
5858
5959
.market-features {
60-
display: grid;
61-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
62-
gap: 32px;
63-
margin: 60px 0;
64-
}
65-
66-
.feature-card {
6760
background: #111111;
6861
border: 1px solid #333333;
6962
border-radius: 8px;
70-
padding: 32px 24px;
71-
text-align: left;
72-
transition: all 0.2s ease;
73-
border-left: 3px solid #4fc3f7;
63+
padding: 48px 32px;
64+
margin: 60px 0;
7465
}
7566
76-
.feature-card:hover {
77-
border-color: #4fc3f7;
78-
box-shadow: 0 4px 12px rgba(79, 195, 247, 0.2);
67+
.features-header {
68+
text-align: center;
69+
margin-bottom: 40px;
7970
}
8071
81-
.feature-icon {
82-
font-size: 1.5rem;
83-
margin-bottom: 12px;
84-
display: block;
72+
.features-header h2 {
73+
color: #4fc3f7;
74+
font-size: 1.875rem;
75+
margin-bottom: 16px;
76+
font-weight: 200;
8577
}
8678
87-
.feature-card h3 {
88-
color: #4fc3f7;
89-
margin-bottom: 12px;
90-
font-size: 1.25rem;
79+
.features-header p {
80+
color: #cccccc;
81+
font-size: 1.1rem;
82+
max-width: 600px;
83+
margin: 0 auto;
9184
font-weight: 300;
9285
}
9386
94-
.feature-card p {
87+
.features-list {
88+
display: grid;
89+
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
90+
gap: 32px;
91+
margin-top: 40px;
92+
}
93+
94+
.feature-item {
95+
display: flex;
96+
align-items: flex-start;
97+
gap: 16px;
98+
padding: 24px 0;
99+
border-bottom: 1px solid #333333;
100+
}
101+
102+
.feature-item:last-child {
103+
border-bottom: none;
104+
}
105+
106+
.feature-number {
107+
background: #4fc3f7;
108+
color: #000000;
109+
width: 32px;
110+
height: 32px;
111+
border-radius: 6px;
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
font-weight: 600;
116+
font-size: 0.9rem;
117+
flex-shrink: 0;
118+
}
119+
120+
.feature-content h3 {
121+
color: #ffffff;
122+
margin: 0 0 8px 0;
123+
font-size: 1.125rem;
124+
font-weight: 500;
125+
}
126+
127+
.feature-content p {
95128
color: #cccccc;
96-
font-size: 1rem;
129+
margin: 0;
130+
font-size: 0.95rem;
97131
line-height: 1.5;
98132
font-weight: 300;
99133
}
@@ -505,9 +539,17 @@ const MarketPage: React.FC = () => {
505539
}
506540
507541
.market-features {
542+
padding: 32px 20px;
543+
margin: 40px 0;
544+
}
545+
546+
.features-list {
508547
grid-template-columns: 1fr;
509548
gap: 20px;
510-
margin: 40px 0;
549+
}
550+
551+
.feature-item {
552+
padding: 20px 0;
511553
}
512554
513555
.pricing-models {
@@ -565,40 +607,59 @@ const MarketPage: React.FC = () => {
565607
</div>
566608

567609
<div className="market-features">
568-
<div className="feature-card">
569-
<span className="feature-icon">💰</span>
570-
<h3>Multiple Revenue Streams</h3>
571-
<p>Sell one-time access, monthly subscriptions, or usage-based pricing for your spreadsheet data.</p>
610+
<div className="features-header">
611+
<h2>Platform Capabilities</h2>
612+
<p>Comprehensive tools for monetizing your spreadsheet data with enterprise-grade security and blockchain technology</p>
572613
</div>
614+
615+
<div className="features-list">
616+
<div className="feature-item">
617+
<div className="feature-number">1</div>
618+
<div className="feature-content">
619+
<h3>Multiple Revenue Streams</h3>
620+
<p>Implement flexible pricing models: one-time purchases, subscription-based access, or usage-based micro-transactions for your spreadsheet data.</p>
621+
</div>
622+
</div>
573623

574-
<div className="feature-card">
575-
<span className="feature-icon">🎯</span>
576-
<h3>Dynamic Pricing</h3>
577-
<p>Adjust prices based on demand, data freshness, and market conditions. AI suggests optimal pricing.</p>
578-
</div>
624+
<div className="feature-item">
625+
<div className="feature-number">2</div>
626+
<div className="feature-content">
627+
<h3>Dynamic Pricing Engine</h3>
628+
<p>Intelligent pricing algorithms adjust rates based on market demand, data freshness, and historical performance to maximize revenue.</p>
629+
</div>
630+
</div>
579631

580-
<div className="feature-card">
581-
<span className="feature-icon">📊</span>
582-
<h3>Analytics Dashboard</h3>
583-
<p>Track earnings, subscriber growth, and data usage patterns with comprehensive analytics.</p>
584-
</div>
632+
<div className="feature-item">
633+
<div className="feature-number">3</div>
634+
<div className="feature-content">
635+
<h3>Analytics Dashboard</h3>
636+
<p>Comprehensive reporting on earnings, subscriber growth, usage patterns, and market performance with real-time insights.</p>
637+
</div>
638+
</div>
585639

586-
<div className="feature-card">
587-
<span className="feature-icon">🔒</span>
588-
<h3>Access Control</h3>
589-
<p>Granular permissions: sell full sheets, specific ranges, or read-only access with watermarks.</p>
590-
</div>
640+
<div className="feature-item">
641+
<div className="feature-number">4</div>
642+
<div className="feature-content">
643+
<h3>Access Control System</h3>
644+
<p>Granular permission management allowing selective data sharing, read-only access, watermarking, and time-limited licenses.</p>
645+
</div>
646+
</div>
591647

592-
<div className="feature-card">
593-
<span className="feature-icon">🌍</span>
594-
<h3>Global Marketplace</h3>
595-
<p>Reach buyers worldwide. All payments in Bitcoin with instant settlement and low fees.</p>
596-
</div>
648+
<div className="feature-item">
649+
<div className="feature-number">5</div>
650+
<div className="feature-content">
651+
<h3>Global Distribution</h3>
652+
<p>Reach international markets with Bitcoin-based payments, instant settlement, and minimal transaction fees.</p>
653+
</div>
654+
</div>
597655

598-
<div className="feature-card">
599-
<span className="feature-icon">⚖️</span>
600-
<h3>Smart Contracts</h3>
601-
<p>Automated revenue distribution, access management, and dispute resolution through blockchain.</p>
656+
<div className="feature-item">
657+
<div className="feature-number">6</div>
658+
<div className="feature-content">
659+
<h3>Smart Contract Automation</h3>
660+
<p>Automated revenue distribution, access provisioning, and dispute resolution through immutable blockchain contracts.</p>
661+
</div>
662+
</div>
602663
</div>
603664
</div>
604665

0 commit comments

Comments
 (0)