mirror of
https://github.com/thecyberlearn/quantum-ai-v3.git
synced 2026-08-18 16:32:57 +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,181 +10,96 @@
|
|||||||
|
|
||||||
{% 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 -->
|
<!-- Hero Section -->
|
||||||
<main class="pricing-main" role="main">
|
<section class="pricing-hero" aria-labelledby="pricing-heading">
|
||||||
<!-- Hero Section -->
|
<h1 id="pricing-heading">💳 Transparent Pricing</h1>
|
||||||
<section class="pricing-hero" aria-labelledby="pricing-heading">
|
<p>Add funds to your wallet and use AI agents with clear, upfront pricing</p>
|
||||||
<h1 id="pricing-heading">💳 Transparent Pricing</h1>
|
</section>
|
||||||
<p>Add funds to your wallet and use AI agents with clear, upfront pricing</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Pricing Section -->
|
<!-- Pricing Section -->
|
||||||
<section class="pricing-section" aria-labelledby="plans-heading">
|
<section class="pricing-section" aria-labelledby="plans-heading">
|
||||||
<h2 id="plans-heading" class="section-title">Choose Your Plan</h2>
|
<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>
|
<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-grid" role="group" aria-label="Pricing plans">
|
||||||
<div class="pricing-card" role="article" aria-label="Basic plan - 10 AED">
|
<div class="pricing-card" role="article" aria-label="Basic plan - 10 AED">
|
||||||
<div class="card-price">
|
<div class="card-price">
|
||||||
<span>10</span>
|
<span>10</span>
|
||||||
<span class="currency">AED</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>
|
||||||
|
<div class="card-description">Perfect for trying out agents</div>
|
||||||
<div class="pricing-card popular" role="article" aria-label="Popular plan - 50 AED">
|
<ul class="card-features">
|
||||||
<div class="popular-badge">Most Popular</div>
|
<li><span class="feature-icon">✓</span> Try multiple AI agents</li>
|
||||||
<div class="card-price">
|
<li><span class="feature-icon">✓</span> Basic task processing</li>
|
||||||
<span>50</span>
|
<li><span class="feature-icon">✓</span> Instant wallet credit</li>
|
||||||
<span class="currency">AED</span>
|
<li><span class="feature-icon">✓</span> Pay only for results</li>
|
||||||
</div>
|
</ul>
|
||||||
<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' %}"
|
<a href="{% url 'authentication:register' %}"
|
||||||
class="cta-btn"
|
class="card-button"
|
||||||
aria-label="Create account to get started">
|
aria-label="Get started with basic plan">
|
||||||
🚀 Create Account
|
Get Started
|
||||||
</a>
|
|
||||||
<a href="{% url 'agent_base:marketplace' %}"
|
|
||||||
class="cta-btn secondary"
|
|
||||||
aria-label="Browse available AI agents">
|
|
||||||
🤖 View Marketplace
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<div class="pricing-card popular" role="article" aria-label="Popular plan - 50 AED">
|
||||||
<aside class="pricing-sidebar">
|
<div class="popular-badge">Most Popular</div>
|
||||||
<!-- Pricing Info -->
|
<div class="card-price">
|
||||||
<div class="card">
|
<span>50</span>
|
||||||
<div class="card-header">
|
<span class="currency">AED</span>
|
||||||
<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 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>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- Quick Actions -->
|
<!-- CTA Section -->
|
||||||
<div class="card">
|
<section class="cta-section" aria-labelledby="cta-heading">
|
||||||
<div class="card-header">
|
<h3 id="cta-heading">Ready to get started?</h3>
|
||||||
<h3 class="card-title">⚡ Quick Actions</h3>
|
<p>Create your account and start using AI agents today with transparent, pay-as-you-go pricing.</p>
|
||||||
</div>
|
<div class="cta-buttons">
|
||||||
<div class="card-content">
|
<a href="{% url 'authentication:register' %}"
|
||||||
<div class="quick-actions">
|
class="cta-btn"
|
||||||
<a href="{% url 'agent_base:marketplace' %}" class="action-btn">
|
aria-label="Create account to get started">
|
||||||
🤖 Browse AI Agents
|
🚀 Create Account
|
||||||
</a>
|
</a>
|
||||||
{% if user.is_authenticated %}
|
<a href="{% url 'agent_base:marketplace' %}"
|
||||||
<a href="{% url 'wallet:wallet' %}" class="action-btn">
|
class="cta-btn secondary"
|
||||||
💳 View Wallet
|
aria-label="Browse available AI agents">
|
||||||
</a>
|
🤖 View Marketplace
|
||||||
{% endif %}
|
</a>
|
||||||
<a href="{% url 'core:homepage' %}" class="action-btn">
|
|
||||||
🏠 Back to Home
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
<!-- 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