mirror of
https://github.com/thecyberlearn/quantum-ai-v2.git
synced 2026-08-18 22:12:59 +00:00
🎨 Redesign pricing page: remove sidebar, single-row layout
- 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>
This commit is contained in:
Claude
parent
443bba21f1
commit
8b23437a6e
@ -7,18 +7,12 @@
|
|||||||
padding: var(--spacing-lg);
|
padding: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-container-wrapper {
|
.pricing-container {
|
||||||
max-width: 1200px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 350px;
|
|
||||||
gap: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pricing-main {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-lg);
|
gap: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero Section */
|
/* Hero Section */
|
||||||
@ -74,15 +68,27 @@
|
|||||||
margin: 0 0 var(--spacing-lg) 0;
|
margin: 0 0 var(--spacing-lg) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pricing Grid */
|
/* Pricing Grid - Single Row Layout */
|
||||||
.pricing-grid {
|
.pricing-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: var(--spacing-lg);
|
gap: var(--spacing-lg);
|
||||||
margin-bottom: var(--spacing-xl);
|
margin-bottom: var(--spacing-xl);
|
||||||
padding-top: 12px;
|
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 Cards - Agent Style */
|
||||||
.pricing-card {
|
.pricing-card {
|
||||||
background: var(--surface-variant);
|
background: var(--surface-variant);
|
||||||
@ -289,12 +295,6 @@
|
|||||||
color: var(--on-surface);
|
color: var(--on-surface);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar Styles */
|
|
||||||
.pricing-sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
@ -399,16 +399,6 @@
|
|||||||
padding: var(--spacing-md);
|
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 {
|
.cta-buttons {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
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) {
|
@media (max-width: 480px) {
|
||||||
.pricing-page {
|
.pricing-page {
|
||||||
@ -465,3 +445,76 @@
|
|||||||
gap: var(--spacing-sm);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -10,9 +10,7 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="pricing-page theme-professional">
|
<div class="pricing-page theme-professional">
|
||||||
<div class="pricing-container-wrapper">
|
<div class="pricing-container">
|
||||||
<!-- Main Content -->
|
|
||||||
<main class="pricing-main" role="main">
|
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
<section class="pricing-hero" aria-labelledby="pricing-heading">
|
<section class="pricing-hero" aria-labelledby="pricing-heading">
|
||||||
<h1 id="pricing-heading">💳 Transparent Pricing</h1>
|
<h1 id="pricing-heading">💳 Transparent Pricing</h1>
|
||||||
@ -35,6 +33,7 @@
|
|||||||
<li><span class="feature-icon">✓</span> Try multiple AI agents</li>
|
<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> Basic task processing</li>
|
||||||
<li><span class="feature-icon">✓</span> Instant wallet credit</li>
|
<li><span class="feature-icon">✓</span> Instant wallet credit</li>
|
||||||
|
<li><span class="feature-icon">✓</span> Pay only for results</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a href="{% url 'authentication:register' %}"
|
<a href="{% url 'authentication:register' %}"
|
||||||
class="card-button"
|
class="card-button"
|
||||||
@ -101,90 +100,6 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user