From 8b23437a6e228d401bc48e9dac16aa0294ff111c Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Sun, 27 Jul 2025 10:01:49 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Redesign=20pricing=20page:=20rem?=
 =?UTF-8?q?ove=20sidebar,=20single-row=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove sidebar completely for cleaner full-width design
- Display 3 pricing cards (10, 50, 100 AED) in single horizontal row
- Remove 'What's Included' features section per user request
- Update CSS grid from 4 to 3 columns with responsive design
- Maintain hero section and call-to-action buttons
- Clean up unused sidebar and features CSS rules

🚀 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/css/pricing.css      | 127 ++++++++++++------
 templates/core/pricing.html | 253 ++++++++++++------------------------
 2 files changed, 174 insertions(+), 206 deletions(-)

diff --git a/static/css/pricing.css b/static/css/pricing.css
index 75c76fa..6db40ee 100644
--- a/static/css/pricing.css
+++ b/static/css/pricing.css
@@ -7,18 +7,12 @@
     padding: var(--spacing-lg);
 }
 
-.pricing-container-wrapper {
-    max-width: 1200px;
+.pricing-container {
+    max-width: 1400px;
     margin: 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 350px;
-    gap: var(--spacing-lg);
-}
-
-.pricing-main {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-lg);
+    gap: var(--spacing-xl);
 }
     
 /* Hero Section */
@@ -74,15 +68,27 @@
     margin: 0 0 var(--spacing-lg) 0;
 }
 
-/* Pricing Grid */
+/* Pricing Grid - Single Row Layout */
 .pricing-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
     gap: var(--spacing-lg);
     margin-bottom: var(--spacing-xl);
     padding-top: 12px;
 }
 
+@media (max-width: 1000px) {
+    .pricing-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .pricing-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
 /* Pricing Cards - Agent Style */
 .pricing-card {
     background: var(--surface-variant);
@@ -289,12 +295,6 @@
     color: var(--on-surface);
 }
 
-/* Sidebar Styles */
-.pricing-sidebar {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-lg);
-}
 
 .card {
     background: var(--surface);
@@ -399,16 +399,6 @@
         padding: var(--spacing-md);
     }
     
-    .pricing-container-wrapper {
-        grid-template-columns: 1fr 280px;
-        gap: var(--spacing-md);
-    }
-    
-    .pricing-grid {
-        grid-template-columns: 1fr;
-        gap: var(--spacing-md);
-    }
-    
     .cta-buttons {
         flex-direction: column;
         align-items: center;
@@ -428,16 +418,6 @@
     }
 }
 
-@media (max-width: 600px) {
-    .pricing-container-wrapper {
-        grid-template-columns: 1fr;
-        gap: var(--spacing-md);
-    }
-    
-    .pricing-sidebar {
-        order: -1;
-    }
-}
 
 @media (max-width: 480px) {
     .pricing-page {
@@ -464,4 +444,77 @@
     .cta-buttons {
         gap: var(--spacing-sm);
     }
+}
+
+/* Features Section */
+.features-section {
+    background: var(--surface);
+    border: 1px solid var(--outline);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-xl);
+    box-shadow: var(--shadow-sm);
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-lg);
+}
+
+.feature-item {
+    text-align: center;
+    padding: var(--spacing-lg);
+    background: var(--surface-variant);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--outline-variant);
+    transition: all var(--transition);
+}
+
+.feature-item:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+    border-color: var(--primary);
+}
+
+.feature-item .feature-icon {
+    font-size: 48px;
+    margin-bottom: var(--spacing-md);
+    display: block;
+}
+
+.feature-item h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--on-surface);
+    margin: 0 0 var(--spacing-sm) 0;
+}
+
+.feature-item p {
+    font-size: 14px;
+    color: var(--on-surface-variant);
+    line-height: 1.5;
+    margin: 0;
+}
+
+/* Update responsive design for new layout */
+@media (max-width: 768px) {
+    .features-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--spacing-md);
+    }
+}
+
+@media (max-width: 600px) {
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .feature-item {
+        padding: var(--spacing-md);
+    }
+    
+    .feature-item .feature-icon {
+        font-size: 36px;
+    }
 }
\ No newline at end of file
diff --git a/templates/core/pricing.html b/templates/core/pricing.html
index 3c6f6bd..cf2e4b9 100644
--- a/templates/core/pricing.html
+++ b/templates/core/pricing.html
@@ -10,181 +10,96 @@
 
 {% block content %}
 <div class="pricing-page theme-professional">
-    <div class="pricing-container-wrapper">
-        <!-- Main Content -->
-        <main class="pricing-main" role="main">
-            <!-- Hero Section -->
-            <section class="pricing-hero" aria-labelledby="pricing-heading">
-                <h1 id="pricing-heading">💳 Transparent Pricing</h1>
-                <p>Add funds to your wallet and use AI agents with clear, upfront pricing</p>
-            </section>
-            
-            <!-- Pricing Section -->
-            <section class="pricing-section" aria-labelledby="plans-heading">
-                <h2 id="plans-heading" class="section-title">Choose Your Plan</h2>
-                <p class="section-subtitle">Start with any amount and top up as needed</p>
-                
-                <div class="pricing-grid" role="group" aria-label="Pricing plans">
-                    <div class="pricing-card" role="article" aria-label="Basic plan - 10 AED">
-                        <div class="card-price">
-                            <span>10</span>
-                            <span class="currency">AED</span>
-                        </div>
-                        <div class="card-description">Perfect for trying out agents</div>
-                        <ul class="card-features">
-                            <li><span class="feature-icon">✓</span> Try multiple AI agents</li>
-                            <li><span class="feature-icon">✓</span> Basic task processing</li>
-                            <li><span class="feature-icon">✓</span> Instant wallet credit</li>
-                        </ul>
-                        <a href="{% url 'authentication:register' %}" 
-                           class="card-button"
-                           aria-label="Get started with basic plan">
-                            Get Started
-                        </a>
-                    </div>
-                    
-                    <div class="pricing-card popular" role="article" aria-label="Popular plan - 50 AED">
-                        <div class="popular-badge">Most Popular</div>
-                        <div class="card-price">
-                            <span>50</span>
-                            <span class="currency">AED</span>
-                        </div>
-                        <div class="card-description">Great for regular usage</div>
-                        <ul class="card-features">
-                            <li><span class="feature-icon">✓</span> All AI agents available</li>
-                            <li><span class="feature-icon">✓</span> Priority processing</li>
-                            <li><span class="feature-icon">✓</span> Extended usage time</li>
-                            <li><span class="feature-icon">✓</span> Best value option</li>
-                        </ul>
-                        <a href="{% url 'authentication:register' %}" 
-                           class="card-button"
-                           aria-label="Get started with popular plan">
-                            Get Started
-                        </a>
-                    </div>
-                    
-                    <div class="pricing-card" role="article" aria-label="Professional plan - 100 AED">
-                        <div class="card-price">
-                            <span>100</span>
-                            <span class="currency">AED</span>
-                        </div>
-                        <div class="card-description">Ideal for power users</div>
-                        <ul class="card-features">
-                            <li><span class="feature-icon">✓</span> Unlimited agent access</li>
-                            <li><span class="feature-icon">✓</span> Fastest processing</li>
-                            <li><span class="feature-icon">✓</span> Bulk operations</li>
-                            <li><span class="feature-icon">✓</span> Maximum efficiency</li>
-                        </ul>
-                        <a href="{% url 'authentication:register' %}" 
-                           class="card-button"
-                           aria-label="Get started with professional plan">
-                            Get Started
-                        </a>
-                    </div>
-                </div>
-            </section>
-            
-            <!-- CTA Section -->
-            <section class="cta-section" aria-labelledby="cta-heading">
-                <h3 id="cta-heading">Ready to get started?</h3>
-                <p>Create your account and start using AI agents today with transparent, pay-as-you-go pricing.</p>
-                <div class="cta-buttons">
-                    <a href="{% url 'authentication:register' %}" 
-                       class="cta-btn"
-                       aria-label="Create account to get started">
-                        🚀 Create Account
-                    </a>
-                    <a href="{% url 'agent_base:marketplace' %}" 
-                       class="cta-btn secondary"
-                       aria-label="Browse available AI agents">
-                        🤖 View Marketplace
-                    </a>
-                </div>
-            </section>
-        </main>
+    <div class="pricing-container">
+        <!-- Hero Section -->
+        <section class="pricing-hero" aria-labelledby="pricing-heading">
+            <h1 id="pricing-heading">💳 Transparent Pricing</h1>
+            <p>Add funds to your wallet and use AI agents with clear, upfront pricing</p>
+        </section>
         
-        <!-- Sidebar -->
-        <aside class="pricing-sidebar">
-            <!-- Pricing Info -->
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title">💰 Pricing Details</h3>
-                </div>
-                <div class="card-content">
-                    <div class="info-list">
-                        <div class="info-item">
-                            <span class="info-icon">⚡</span>
-                            <span class="info-text">Pay only for successful results</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-icon">🔄</span>
-                            <span class="info-text">Top up anytime, any amount</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-icon">📊</span>
-                            <span class="info-text">Transparent transaction history</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-icon">🔒</span>
-                            <span class="info-text">Secure payment processing</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <!-- Pricing Section -->
+        <section class="pricing-section" aria-labelledby="plans-heading">
+            <h2 id="plans-heading" class="section-title">Choose Your Plan</h2>
+            <p class="section-subtitle">Start with any amount and top up as needed</p>
             
-            <!-- Quick Actions -->
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title">⚡ Quick Actions</h3>
-                </div>
-                <div class="card-content">
-                    <div class="quick-actions">
-                        <a href="{% url 'agent_base:marketplace' %}" class="action-btn">
-                            🤖 Browse AI Agents
-                        </a>
-                        {% if user.is_authenticated %}
-                            <a href="{% url 'wallet:wallet' %}" class="action-btn">
-                                💳 View Wallet
-                            </a>
-                        {% endif %}
-                        <a href="{% url 'core:homepage' %}" class="action-btn">
-                            🏠 Back to Home
-                        </a>
+            <div class="pricing-grid" role="group" aria-label="Pricing plans">
+                <div class="pricing-card" role="article" aria-label="Basic plan - 10 AED">
+                    <div class="card-price">
+                        <span>10</span>
+                        <span class="currency">AED</span>
                     </div>
+                    <div class="card-description">Perfect for trying out agents</div>
+                    <ul class="card-features">
+                        <li><span class="feature-icon">✓</span> Try multiple AI agents</li>
+                        <li><span class="feature-icon">✓</span> Basic task processing</li>
+                        <li><span class="feature-icon">✓</span> Instant wallet credit</li>
+                        <li><span class="feature-icon">✓</span> Pay only for results</li>
+                    </ul>
+                    <a href="{% url 'authentication:register' %}" 
+                       class="card-button"
+                       aria-label="Get started with basic plan">
+                        Get Started
+                    </a>
+                </div>
+                
+                <div class="pricing-card popular" role="article" aria-label="Popular plan - 50 AED">
+                    <div class="popular-badge">Most Popular</div>
+                    <div class="card-price">
+                        <span>50</span>
+                        <span class="currency">AED</span>
+                    </div>
+                    <div class="card-description">Great for regular usage</div>
+                    <ul class="card-features">
+                        <li><span class="feature-icon">✓</span> All AI agents available</li>
+                        <li><span class="feature-icon">✓</span> Priority processing</li>
+                        <li><span class="feature-icon">✓</span> Extended usage time</li>
+                        <li><span class="feature-icon">✓</span> Best value option</li>
+                    </ul>
+                    <a href="{% url 'authentication:register' %}" 
+                       class="card-button"
+                       aria-label="Get started with popular plan">
+                        Get Started
+                    </a>
+                </div>
+                
+                <div class="pricing-card" role="article" aria-label="Professional plan - 100 AED">
+                    <div class="card-price">
+                        <span>100</span>
+                        <span class="currency">AED</span>
+                    </div>
+                    <div class="card-description">Ideal for power users</div>
+                    <ul class="card-features">
+                        <li><span class="feature-icon">✓</span> Unlimited agent access</li>
+                        <li><span class="feature-icon">✓</span> Fastest processing</li>
+                        <li><span class="feature-icon">✓</span> Bulk operations</li>
+                        <li><span class="feature-icon">✓</span> Maximum efficiency</li>
+                    </ul>
+                    <a href="{% url 'authentication:register' %}" 
+                       class="card-button"
+                       aria-label="Get started with professional plan">
+                        Get Started
+                    </a>
                 </div>
             </div>
-            
-            <!-- Features Comparison -->
-            <div class="card">
-                <div class="card-header">
-                    <h3 class="card-title">⭐ What's Included</h3>
-                </div>
-                <div class="card-content">
-                    <div class="info-list">
-                        <div class="info-item">
-                            <span class="info-icon">🤖</span>
-                            <span class="info-text">5 specialized AI agents</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-icon">📄</span>
-                            <span class="info-text">Document processing</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-icon">📊</span>
-                            <span class="info-text">Data analysis tools</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-icon">🌐</span>
-                            <span class="info-text">Web-based platform</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-icon">🔧</span>
-                            <span class="info-text">24/7 system availability</span>
-                        </div>
-                    </div>
-                </div>
+        </section>
+        
+        <!-- CTA Section -->
+        <section class="cta-section" aria-labelledby="cta-heading">
+            <h3 id="cta-heading">Ready to get started?</h3>
+            <p>Create your account and start using AI agents today with transparent, pay-as-you-go pricing.</p>
+            <div class="cta-buttons">
+                <a href="{% url 'authentication:register' %}" 
+                   class="cta-btn"
+                   aria-label="Create account to get started">
+                    🚀 Create Account
+                </a>
+                <a href="{% url 'agent_base:marketplace' %}" 
+                   class="cta-btn secondary"
+                   aria-label="Browse available AI agents">
+                    🤖 View Marketplace
+                </a>
             </div>
-        </aside>
+        </section>
     </div>
 </div>
 {% endblock %}