🎨 Add comprehensive digital branding services page

- Add new /digital-branding/ route and view with rate limiting
- Create professional template matching homepage design aesthetic
- Implement SOSTAC+RACE methodology presentation with interactive elements
- Add responsive CSS following established design patterns
- Include Jotform integration for lead capture and contact forms
- Add header navigation link positioned after Home
- Features 6-section layout: hero, why choose us, process, services, CTA
- Mobile-responsive design with hover effects and animations

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

Co-Authored-By: Claude <noreply@anthropic.com>

core/urls.py

@@ -6,6 +6,7 @@ app_name = 'core'
 urlpatterns = [
     path('', views.homepage_view, name='homepage'),
     path('pricing/', views.pricing_view, name='pricing'),
+    path('digital-branding/', views.digital_branding_view, name='digital_branding'),
     path('contact/', views.contact_form_view, name='contact_form'),
     path('health/', views.health_check_view, name='health_check'),
 ]

core/views.py

@@ -65,6 +65,27 @@ def pricing_view(request):
         return render(request, 'core/pricing.html', {'sample_agents': []})
 
 
+@ratelimit(key='ip', rate='60/m', method='GET', block=False)
+def digital_branding_view(request):
+    """Digital branding services page with rate limiting"""
+    # Check if rate limited
+    if getattr(request, 'limited', False):
+        logger.warning(f"Digital branding page rate limit exceeded for IP {request.META.get('REMOTE_ADDR')}")
+        messages.warning(request, 'Too many requests. Please wait a moment before refreshing.')
+    
+    try:
+        context = {
+            'user_balance': request.user.wallet_balance if request.user.is_authenticated else 0,
+        }
+        
+        return render(request, 'core/digital_branding.html', context)
+        
+    except Exception as e:
+        logger.error(f"Digital branding view error: {e}")
+        messages.error(request, 'Unable to load digital branding page. Please try again.')
+        return render(request, 'core/digital_branding.html', {'user_balance': 0})
+
+
 def validate_contact_input(name, email, message, company=""):
     """Validate and sanitize contact form input"""
     errors = []

static/css/digital-branding.css

@@ -0,0 +1,652 @@
+/* Digital Branding Services Page Styles */
+/* Following homepage.css patterns and using unified color system from base.css */
+
+/* Hero Section - matches homepage hero */
+.digital-branding-hero {
+    position: relative;
+    background: var(--gradient-hero);
+    overflow: hidden;
+    min-height: 85vh;
+    display: flex;
+    align-items: center;
+    padding: clamp(40px, 10vw, 80px) clamp(16px, 4vw, 24px) clamp(60px, 15vw, 100px);
+}
+
+.hero-container {
+    max-width: 1280px;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    z-index: 10;
+    width: 100%;
+}
+
+.trust-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(59, 130, 246, 0.08);
+    padding: 0.5rem 1.25rem;
+    border-radius: 50px;
+    margin-bottom: 2.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--primary-blue);
+    border: 1px solid rgba(59, 130, 246, 0.15);
+    backdrop-filter: blur(10px);
+}
+
+.trust-badge-emoji {
+    font-size: 0.75rem;
+}
+
+.hero-title {
+    font-weight: 800;
+    margin-bottom: 2.5rem;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    font-size: clamp(36px, 8vw, 110px);
+    margin-bottom: clamp(24px, 6vw, 40px);
+}
+
+.hero-title-gradient {
+    background: var(--gradient-primary);
+    background-size: 300% 300%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-title-normal {
+    color: var(--text-primary);
+}
+
+.hero-description {
+    color: var(--text-secondary);
+    margin-bottom: 3.5rem;
+    max-width: 720px;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.7;
+    font-weight: 400;
+    font-size: clamp(1.1rem, 3vw, 1.4rem);
+    margin-bottom: clamp(32px, 8vw, 56px);
+    padding: 0 clamp(8px, 2vw, 16px);
+}
+
+.hero-buttons {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 5rem;
+    gap: clamp(12px, 3vw, 20px);
+    margin-bottom: clamp(40px, 10vw, 80px);
+    padding: 0 clamp(8px, 2vw, 16px);
+}
+
+.btn-primary {
+    background: var(--gradient-primary);
+    color: white;
+    border-radius: 1rem;
+    font-weight: bold;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05);
+    letter-spacing: 0.01em;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
+    font-size: clamp(14px, 3.5vw, 18px);
+    min-height: 48px;
+    min-width: clamp(140px, 40vw, 180px);
+    transition: all 0.2s ease;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
+    filter: brightness(1.1);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+}
+
+.btn-secondary {
+    background: var(--background-card);
+    color: var(--primary-blue);
+    border-radius: 1rem;
+    font-weight: 600;
+    border: 2px solid var(--border-light);
+    text-decoration: none;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(59, 130, 246, 0.08);
+    letter-spacing: 0.01em;
+    display: inline-block;
+    text-align: center;
+    padding: clamp(14px, 4vw, 18px) clamp(24px, 6vw, 36px);
+    font-size: clamp(14px, 3.5vw, 18px);
+    min-height: 48px;
+    min-width: clamp(140px, 40vw, 180px);
+    transition: all 0.2s ease;
+}
+
+.btn-secondary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
+    border-color: var(--primary-blue);
+    background: rgba(59, 130, 246, 0.05);
+}
+
+.btn-secondary:active {
+    transform: translateY(0);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
+}
+
+.trust-indicators {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+    gap: clamp(16px, 4vw, 48px);
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 clamp(8px, 2vw, 16px);
+}
+
+.trust-card {
+    text-align: center;
+    background: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
+    border-radius: 1rem;
+    padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px);
+}
+
+.trust-number {
+    background: var(--text-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 800;
+    margin-bottom: 0.5rem;
+    font-size: clamp(1rem, 3vw, 1.2rem);
+}
+
+.trust-text {
+    color: var(--text-secondary);
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    font-size: clamp(12px, 3vw, 15px);
+}
+
+/* Why Choose Us Section - matches company profile */
+.why-choose-us {
+    position: relative;
+    background: var(--company-gradient);
+    overflow: hidden;
+    padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
+}
+
+.section-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+    z-index: 10;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: clamp(40px, 10vw, 80px);
+}
+
+.section-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(30, 64, 175, 0.1);
+    padding: 0.5rem 1.25rem;
+    border-radius: 50px;
+    margin-bottom: 1.5rem;
+    border: 1px solid rgba(30, 64, 175, 0.2);
+}
+
+.section-badge-icon {
+    font-size: 1rem;
+}
+
+.section-badge-text {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--primary-blue);
+}
+
+.section-title {
+    font-weight: 800;
+    color: var(--primary-blue);
+    margin-bottom: 1rem;
+    text-align: center;
+    font-size: clamp(2rem, 5vw, 3.5rem);
+}
+
+.section-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-light);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.6;
+}
+
+.why-choose-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+    gap: clamp(24px, 6vw, 40px);
+}
+
+.choice-card {
+    background: white;
+    border-radius: clamp(16px, 4vw, 24px);
+    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
+    text-align: center;
+    padding: clamp(24px, 6vw, 40px);
+    transition: all 0.2s ease;
+}
+
+.choice-icon {
+    margin-bottom: 1.25rem;
+    font-size: clamp(2.5rem, 6vw, 3.5rem);
+    margin-bottom: clamp(16px, 4vw, 20px);
+}
+
+.choice-title {
+    font-weight: bold;
+    color: var(--primary-blue);
+    margin-bottom: 1rem;
+    font-size: clamp(1.2rem, 4vw, 1.5rem);
+    margin-bottom: clamp(12px, 3vw, 16px);
+}
+
+.choice-description {
+    color: var(--text-light);
+    line-height: 1.6;
+    font-size: clamp(14px, 3.5vw, 18px);
+}
+
+/* Our Process Section - matches services */
+.our-process {
+    background: var(--services-gradient);
+    padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
+}
+
+.process-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+    gap: clamp(20px, 5vw, 32px);
+    margin-bottom: clamp(40px, 10vw, 60px);
+}
+
+.process-step-card {
+    background: white;
+    border-radius: clamp(16px, 4vw, 20px);
+    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
+    padding: clamp(24px, 6vw, 32px);
+    display: flex;
+    align-items: flex-start;
+    gap: clamp(16px, 4vw, 20px);
+    transition: all 0.2s ease;
+}
+
+.step-number {
+    background: var(--gradient-primary);
+    color: white;
+    width: clamp(40px, 10vw, 50px);
+    height: clamp(40px, 10vw, 50px);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: clamp(16px, 4vw, 20px);
+    flex-shrink: 0;
+}
+
+.step-content {
+    flex: 1;
+}
+
+.step-title {
+    font-weight: bold;
+    color: var(--primary-blue);
+    margin-bottom: 0.75rem;
+    font-size: clamp(1.1rem, 3.5vw, 1.3rem);
+}
+
+.step-description {
+    color: var(--text-light);
+    line-height: 1.6;
+    font-size: clamp(14px, 3.5vw, 16px);
+}
+
+/* RACE Framework */
+.race-framework {
+    background: white;
+    border-radius: clamp(16px, 4vw, 24px);
+    box-shadow: 0 12px 40px rgba(30, 64, 175, 0.08);
+    padding: clamp(24px, 6vw, 40px);
+}
+
+.race-title {
+    text-align: center;
+    font-weight: bold;
+    color: var(--primary-blue);
+    margin-bottom: clamp(20px, 5vw, 32px);
+    font-size: clamp(1.3rem, 4vw, 1.8rem);
+}
+
+.race-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    gap: clamp(16px, 4vw, 24px);
+}
+
+.race-card {
+    text-align: center;
+    background: var(--background-light);
+    border-radius: clamp(12px, 3vw, 16px);
+    padding: clamp(16px, 4vw, 24px);
+    transition: all 0.2s ease;
+}
+
+.race-phase {
+    margin-bottom: 0.75rem;
+}
+
+.race-icon {
+    font-size: clamp(1.5rem, 4vw, 2rem);
+    margin-bottom: 0.5rem;
+    display: block;
+}
+
+.race-phase h4 {
+    font-weight: bold;
+    color: var(--primary-blue);
+    margin: 0;
+    font-size: clamp(1.1rem, 3.5vw, 1.3rem);
+}
+
+.race-focus {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+    font-size: clamp(14px, 3.5vw, 16px);
+}
+
+.race-actions {
+    color: var(--text-light);
+    font-size: clamp(12px, 3vw, 14px);
+    line-height: 1.5;
+}
+
+/* Branding Services Section - matches services */
+.branding-services {
+    background: var(--clients-gradient);
+    padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
+}
+
+.services-title {
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 1rem;
+    color: var(--primary-blue);
+    font-size: clamp(1.8rem, 5vw, 2.5rem);
+}
+
+.services-subtitle {
+    text-align: center;
+    color: var(--text-light);
+    margin-bottom: 3rem;
+    font-size: clamp(16px, 4vw, 20px);
+    margin-bottom: clamp(24px, 6vw, 48px);
+}
+
+.branding-services-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+    gap: clamp(20px, 5vw, 32px);
+}
+
+.service-card {
+    background: white;
+    border-radius: clamp(16px, 4vw, 20px);
+    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
+    text-align: center;
+    padding: clamp(24px, 6vw, 32px);
+    transition: all 0.2s ease;
+}
+
+.service-icon {
+    margin-bottom: 1.25rem;
+    font-size: clamp(2.5rem, 6vw, 3rem);
+    margin-bottom: clamp(16px, 4vw, 20px);
+}
+
+.service-title {
+    font-weight: bold;
+    color: var(--primary-blue);
+    margin-bottom: 1rem;
+    font-size: clamp(1.2rem, 4vw, 1.4rem);
+    margin-bottom: clamp(12px, 3vw, 16px);
+}
+
+.service-description {
+    color: var(--text-light);
+    line-height: 1.6;
+    font-size: clamp(14px, 3.5vw, 16px);
+}
+
+/* CTA Section - matches contact */
+.branding-cta {
+    background: var(--contact-gradient);
+    padding: clamp(60px, 15vw, 120px) clamp(16px, 4vw, 24px);
+}
+
+.cta-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.cta-title {
+    font-weight: bold;
+    text-align: center;
+    color: var(--primary-blue);
+    font-size: clamp(1.8rem, 5vw, 2.5rem);
+    margin-bottom: clamp(24px, 6vw, 48px);
+}
+
+.cta-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
+    gap: clamp(30px, 8vw, 60px);
+    align-items: start;
+}
+
+.cta-content {
+    background: white;
+    border-radius: clamp(16px, 4vw, 20px);
+    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
+    padding: clamp(24px, 6vw, 40px);
+}
+
+.cta-content-title {
+    font-weight: bold;
+    color: var(--primary-blue);
+    margin-bottom: 1rem;
+    font-size: clamp(1.3rem, 4vw, 1.6rem);
+}
+
+.cta-description {
+    color: var(--text-light);
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
+    font-size: clamp(14px, 3.5vw, 18px);
+}
+
+.cta-features {
+    margin-bottom: 2rem;
+}
+
+.cta-feature {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+    font-size: clamp(14px, 3.5vw, 16px);
+}
+
+.feature-icon {
+    color: var(--success-green);
+    font-weight: bold;
+}
+
+.cta-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(12px, 3vw, 16px);
+}
+
+.cta-btn {
+    padding: clamp(14px, 4vw, 16px) clamp(20px, 5vw, 24px);
+    border-radius: clamp(8px, 2vw, 12px);
+    font-weight: 600;
+    text-decoration: none;
+    text-align: center;
+    font-size: clamp(14px, 3.5vw, 16px);
+    transition: all 0.2s ease;
+    min-height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.cta-btn.primary {
+    background: var(--gradient-primary);
+    color: white;
+    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
+}
+
+.cta-btn.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
+}
+
+.cta-btn.secondary {
+    background: var(--background-card);
+    color: var(--primary-blue);
+    border: 2px solid var(--border-light);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+}
+
+.cta-btn.secondary:hover {
+    transform: translateY(-2px);
+    border-color: var(--primary-blue);
+    background: rgba(59, 130, 246, 0.05);
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
+}
+
+.cta-info {
+    background: white;
+    border-radius: clamp(16px, 4vw, 20px);
+    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.08);
+    padding: clamp(24px, 6vw, 40px);
+}
+
+.cta-info-title {
+    font-weight: bold;
+    color: var(--primary-blue);
+    margin-bottom: 1.5rem;
+    font-size: clamp(1.2rem, 4vw, 1.5rem);
+    margin-bottom: clamp(16px, 4vw, 24px);
+}
+
+.contact-item {
+    display: flex;
+    align-items: flex-start;
+    gap: clamp(12px, 3vw, 16px);
+    margin-bottom: clamp(20px, 5vw, 32px);
+}
+
+.contact-icon {
+    background: var(--primary-gradient);
+    border-radius: clamp(8px, 2vw, 12px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: clamp(40px, 10vw, 50px);
+    height: clamp(40px, 10vw, 50px);
+    font-size: clamp(16px, 4vw, 20px);
+}
+
+.contact-details h4 {
+    font-weight: 600;
+    color: var(--primary-blue);
+    margin-bottom: 0.5rem;
+    font-size: clamp(16px, 4vw, 19px);
+}
+
+.contact-details p {
+    color: var(--text-light);
+    line-height: 1.6;
+    font-size: clamp(14px, 3.5vw, 16px);
+}
+
+.contact-email {
+    color: var(--primary-blue);
+    text-decoration: none;
+}
+
+.contact-email:hover {
+    text-decoration: underline;
+}
+
+.commitment-statement {
+    background: var(--services-gradient);
+    border-left: 4px solid var(--primary-blue);
+    border-radius: clamp(12px, 3vw, 16px);
+    padding: clamp(16px, 4vw, 24px);
+    margin-top: clamp(20px, 5vw, 32px);
+}
+
+.commitment-text {
+    color: var(--primary-blue);
+    font-weight: 600;
+    text-align: center;
+    font-size: clamp(14px, 3.5vw, 18px);
+    line-height: 1.6;
+}
+
+/* Loading state for buttons */
+.cta-btn.loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 767px) {
+    .cta-buttons {
+        flex-direction: column;
+    }
+    
+    .process-step-card {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .step-number {
+        margin: 0 auto 1rem auto;
+    }
+    
+    .race-grid {
+        grid-template-columns: 1fr;
+    }
+}

templates/base.html

@@ -30,6 +30,7 @@
                 </a>
                 <nav class="header-nav" id="header-nav">
                     <a href="{% url 'core:homepage' %}" class="nav-link {% if request.resolver_match.url_name == 'homepage' %}active{% endif %}">Home</a>
+                    <a href="{% url 'core:digital_branding' %}" class="nav-link {% if request.resolver_match.url_name == 'digital_branding' %}active{% endif %}">Digital Branding</a>
                     <a href="{% url 'agent_base:marketplace' %}" class="nav-link {% if request.resolver_match.url_name == 'marketplace' %}active{% endif %}">AI Marketplace</a>
                     <a href="{% url 'core:pricing' %}" class="nav-link {% if request.resolver_match.url_name == 'pricing' %}active{% endif %}">Pricing</a>
                 </nav>

templates/core/digital_branding.html

@@ -0,0 +1,523 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Digital Branding Services - Quantum Tasks AI{% endblock %}
+
+{% block extra_css %}
+    <link rel="stylesheet" href="{% static 'css/digital-branding.css' %}">
+{% endblock %}
+
+{% block content %}
+<style>
+/* Override main-container for full-width sections */
+.main-container {
+    max-width: none;
+    padding: 0;
+}
+</style>
+
+<!-- Hero Section -->
+<section id="digital-branding-hero" class="digital-branding-hero">
+    <div class="hero-container">
+        <!-- Trust Badge -->
+        <div class="trust-badge">
+            <span class="trust-badge-emoji">✨</span>
+            <span>Trusted Digital Brand Partner</span>
+        </div>
+
+        <h1 class="hero-title">
+            <span class="hero-title-gradient">
+                Digital Branding
+            </span>
+            <br />
+            <span class="hero-title-normal">
+                Services
+            </span>
+        </h1>
+
+        <p class="hero-description">
+            Elevate Your Brand in the AI-Driven Era. Unlock unparalleled digital visibility, recognition, and growth with Quantum Task AI's expert digital branding solutions.
+        </p>
+
+        <!-- CTA Buttons -->
+        <div class="hero-buttons">
+            {% if user.is_authenticated %}
+                <a href="https://form.jotform.com/252121444918050" target="_blank" class="btn-primary">
+                    Start Discovery
+                </a>
+                <a href="#our-process" class="btn-secondary">
+                    View Process
+                </a>
+            {% else %}
+                <a href="https://form.jotform.com/252121444918050" target="_blank" class="btn-primary">
+                    Get Started
+                </a>
+                <a href="#our-process" class="btn-secondary">
+                    Learn More
+                </a>
+            {% endif %}
+        </div>
+
+        <!-- Trust Indicators -->
+        <div class="trust-indicators">
+            <div class="trust-card">
+                <div class="trust-number">
+                    AI-Powered
+                </div>
+                <div class="trust-text">
+                    Strategies
+                </div>
+            </div>
+            <div class="trust-card">
+                <div class="trust-number">
+                    End-to-End
+                </div>
+                <div class="trust-text">
+                    Digital Presence
+                </div>
+            </div>
+            <div class="trust-card">
+                <div class="trust-number">
+                    Custom
+                </div>
+                <div class="trust-text">
+                    Tailored Approach
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Why Choose Us Section -->
+<section id="why-choose-us" class="why-choose-us">
+    <div class="section-container">
+        <!-- Section Header -->
+        <div class="section-header">
+            <div class="section-badge">
+                <span class="section-badge-icon">🎯</span>
+                <span class="section-badge-text">Why Choose Us</span>
+            </div>
+            <h2 class="section-title">
+                AI-Powered Digital Excellence
+            </h2>
+            <p class="section-subtitle">
+                Transform your brand with cutting-edge AI strategies and comprehensive digital solutions
+            </p>
+        </div>
+
+        <div class="why-choose-grid">
+            <div class="choice-card">
+                <div class="choice-icon">🤖</div>
+                <h3 class="choice-title">AI-Powered Strategies</h3>
+                <p class="choice-description">
+                    Harness cutting-edge AI to analyze your digital landscape, audience trends, and competitor benchmarks, ensuring your brand stands out in the AI-driven era.
+                </p>
+            </div>
+            <div class="choice-card">
+                <div class="choice-icon">🌐</div>
+                <h3 class="choice-title">End-to-End Digital Presence</h3>
+                <p class="choice-description">
+                    From LLM, SEO and social activation to influencer partnerships and review management - we handle every aspect of your digital brand presence.
+                </p>
+            </div>
+            <div class="choice-card">
+                <div class="choice-icon">⚡</div>
+                <h3 class="choice-title">Custom-Tailored Approach</h3>
+                <p class="choice-description">
+                    Our process adapts to your unique vision, market challenges, and growth ambitions, delivering personalized strategies that drive real results.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Our Process Section -->
+<section id="our-process" class="our-process">
+    <div class="section-container">
+        <div class="section-header">
+            <div class="section-badge">
+                <span class="section-badge-icon">📋</span>
+                <span class="section-badge-text">Our Process</span>
+            </div>
+            <h2 class="section-title">
+                The SOSTAC+RACE Method
+            </h2>
+            <p class="section-subtitle">
+                A unified, data-driven planning system that combines proven strategy with powerful digital execution
+            </p>
+        </div>
+
+        <div class="process-grid">
+            <div class="process-step-card">
+                <div class="step-number">1</div>
+                <div class="step-content">
+                    <h3 class="step-title">Situation Analysis</h3>
+                    <p class="step-description">
+                        Understand your brand's current status, digital footprint, and competitor landscape to establish a baseline for growth.
+                    </p>
+                </div>
+            </div>
+            <div class="process-step-card">
+                <div class="step-number">2</div>
+                <div class="step-content">
+                    <h3 class="step-title">Objectives</h3>
+                    <p class="step-description">
+                        Set SMART goals to grow brand awareness, engagement, leads, and loyalty with measurable targets and timelines.
+                    </p>
+                </div>
+            </div>
+            <div class="process-step-card">
+                <div class="step-number">3</div>
+                <div class="step-content">
+                    <h3 class="step-title">Strategy</h3>
+                    <p class="step-description">
+                        Map your customer journey, segment audiences, define your value proposition, and select optimal channels for maximum impact.
+                    </p>
+                </div>
+            </div>
+            <div class="process-step-card">
+                <div class="step-number">4</div>
+                <div class="step-content">
+                    <h3 class="step-title">Tactics (RACE Framework)</h3>
+                    <p class="step-description">
+                        Execute with Reach (visibility), Act (engagement), Convert (sales), and Engage (loyalty) strategies across all channels.
+                    </p>
+                </div>
+            </div>
+            <div class="process-step-card">
+                <div class="step-number">5</div>
+                <div class="step-content">
+                    <h3 class="step-title">Action</h3>
+                    <p class="step-description">
+                        Assign tasks, manage timelines, and ensure streamlined brand asset creation across all digital channels and platforms.
+                    </p>
+                </div>
+            </div>
+            <div class="process-step-card">
+                <div class="step-number">6</div>
+                <div class="step-content">
+                    <h3 class="step-title">Control</h3>
+                    <p class="step-description">
+                        Monitor analytics, measure KPIs, and refine strategy through continuous feedback loops for ongoing optimization.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- RACE Framework Details -->
+        <div class="race-framework">
+            <h3 class="race-title">RACE Framework Breakdown</h3>
+            <div class="race-grid">
+                <div class="race-card">
+                    <div class="race-phase">
+                        <span class="race-icon">📢</span>
+                        <h4>Reach</h4>
+                    </div>
+                    <div class="race-focus">Maximize visibility</div>
+                    <div class="race-actions">LLM & SEO, paid ads, influencer partnerships, digital PR</div>
+                </div>
+                <div class="race-card">
+                    <div class="race-phase">
+                        <span class="race-icon">💬</span>
+                        <h4>Act</h4>
+                    </div>
+                    <div class="race-focus">Drive engagement</div>
+                    <div class="race-actions">Content marketing, landing pages, audience interaction</div>
+                </div>
+                <div class="race-card">
+                    <div class="race-phase">
+                        <span class="race-icon">🎯</span>
+                        <h4>Convert</h4>
+                    </div>
+                    <div class="race-focus">Increase conversions</div>
+                    <div class="race-actions">Optimized CTAs, retargeting, AI-powered lead nurture</div>
+                </div>
+                <div class="race-card">
+                    <div class="race-phase">
+                        <span class="race-icon">❤️</span>
+                        <h4>Engage</h4>
+                    </div>
+                    <div class="race-focus">Cultivate loyalty & advocacy</div>
+                    <div class="race-actions">Email/CRM, community management, advocacy campaigns</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Services Section -->
+<section id="services" class="branding-services">
+    <div class="section-container">
+        <h2 class="services-title">
+            What We Offer
+        </h2>
+        <p class="services-subtitle">
+            Comprehensive digital branding solutions tailored to your business needs
+        </p>
+        <div class="branding-services-grid">
+            <div class="service-card">
+                <div class="service-icon">🎨</div>
+                <h3 class="service-title">Brand Discovery & Identity Design</h3>
+                <p class="service-description">
+                    Complete brand audit, identity creation, and visual design systems that reflect your unique value proposition and market position.
+                </p>
+            </div>
+            <div class="service-card">
+                <div class="service-icon">📱</div>
+                <h3 class="service-title">Digital Platform Prioritization & Setup</h3>
+                <p class="service-description">
+                    Strategic platform selection and optimization across social media, websites, and digital touchpoints for maximum brand impact.
+                </p>
+            </div>
+            <div class="service-card">
+                <div class="service-icon">🔍</div>
+                <h3 class="service-title">LLMO, SEO, Paid Media & Social Activation</h3>
+                <p class="service-description">
+                    Advanced Large Language Model Optimization, search engine optimization, targeted advertising, and social media strategy execution.
+                </p>
+            </div>
+            <div class="service-card">
+                <div class="service-icon">📢</div>
+                <h3 class="service-title">Influencer & PR Campaigns</h3>
+                <p class="service-description">
+                    Strategic influencer partnerships, public relations campaigns, and media outreach to amplify your brand's reach and credibility.
+                </p>
+            </div>
+            <div class="service-card">
+                <div class="service-icon">🎯</div>
+                <h3 class="service-title">Consistent Visual & Messaging Systems</h3>
+                <p class="service-description">
+                    Unified brand guidelines, messaging frameworks, and visual standards that ensure consistency across all digital touchpoints.
+                </p>
+            </div>
+            <div class="service-card">
+                <div class="service-icon">📊</div>
+                <h3 class="service-title">Comprehensive Tracking & Analytics</h3>
+                <p class="service-description">
+                    Advanced analytics setup, performance monitoring, and data-driven insights to measure and optimize your brand's digital performance.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- CTA Section -->
+<section id="discovery-form" class="branding-cta">
+    <div class="cta-container">
+        <h2 class="cta-title">
+            Start Your Digital Branding Journey
+        </h2>
+        <div class="cta-grid">
+            <!-- CTA Content -->
+            <div class="cta-content">
+                <h3 class="cta-content-title">Ready to transform your digital brand?</h3>
+                <p class="cta-description">
+                    Fill out our Digital Branding Discovery Questionnaire and we'll review your goals and craft a personalized proposal within 24 hours.
+                </p>
+                
+                <!-- Features List -->
+                <div class="cta-features">
+                    <div class="cta-feature">
+                        <span class="feature-icon">✓</span>
+                        <span>Free brand assessment and consultation</span>
+                    </div>
+                    <div class="cta-feature">
+                        <span class="feature-icon">✓</span>
+                        <span>Customized digital strategy roadmap</span>
+                    </div>
+                    <div class="cta-feature">
+                        <span class="feature-icon">✓</span>
+                        <span>24-hour response with detailed proposal</span>
+                    </div>
+                </div>
+
+                <!-- CTA Buttons -->
+                <div class="cta-buttons">
+                    <a href="https://form.jotform.com/252121444918050" target="_blank" class="cta-btn primary">
+                        🚀 Get Discovery Questionnaire
+                    </a>
+                    <a href="https://form.jotform.com/252121444918050" target="_blank" class="cta-btn secondary">
+                        💬 Contact Us Directly
+                    </a>
+                </div>
+            </div>
+
+            <!-- Contact Information -->
+            <div class="cta-info">
+                <h3 class="cta-info-title">Get in Touch</h3>
+                
+                <!-- Contact Item -->
+                <div class="contact-item">
+                    <div class="contact-icon">
+                        ✉️
+                    </div>
+                    <div class="contact-details">
+                        <h4>Email Address</h4>
+                        <p>
+                            <a href="mailto:abhay@quantumtaskai.com" class="contact-email">
+                                abhay@quantumtaskai.com
+                            </a>
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Commitment Statement -->
+                <div class="commitment-statement">
+                    <p class="commitment-text">
+                        Transforming Brands for the Digital Future with AI-powered solutions and expert cybersecurity strategies.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+{% endblock %}
+
+{% block extra_js %}
+<script>
+class DigitalBrandingManager {
+    constructor() {
+        this.processCards = document.querySelectorAll('.process-step-card');
+        this.raceCards = document.querySelectorAll('.race-card');
+        this.serviceCards = document.querySelectorAll('.service-card');
+        this.ctaButtons = document.querySelectorAll('.cta-btn');
+        
+        this.init();
+    }
+    
+    init() {
+        this.setupCardInteractions();
+        this.setupButtonHovers();
+        this.addScrollAnimations();
+        this.setupSmoothScrolling();
+    }
+    
+    setupCardInteractions() {
+        // Process step cards
+        this.processCards.forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                this.highlightCard(card);
+            });
+            
+            card.addEventListener('mouseleave', () => {
+                this.removeHighlight(card);
+            });
+        });
+
+        // RACE framework cards
+        this.raceCards.forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                this.highlightCard(card);
+            });
+            
+            card.addEventListener('mouseleave', () => {
+                this.removeHighlight(card);
+            });
+        });
+
+        // Service cards
+        this.serviceCards.forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                this.highlightCard(card);
+            });
+            
+            card.addEventListener('mouseleave', () => {
+                this.removeHighlight(card);
+            });
+        });
+    }
+    
+    highlightCard(card) {
+        card.style.transform = 'translateY(-4px)';
+        card.style.boxShadow = '0 20px 40px rgba(30, 64, 175, 0.15)';
+    }
+    
+    removeHighlight(card) {
+        card.style.transform = 'translateY(0)';
+        card.style.boxShadow = '';
+    }
+    
+    setupButtonHovers() {
+        this.ctaButtons.forEach(button => {
+            button.addEventListener('mouseenter', () => {
+                button.style.transform = 'translateY(-2px)';
+            });
+            
+            button.addEventListener('mouseleave', () => {
+                button.style.transform = '';
+            });
+            
+            button.addEventListener('click', () => {
+                if (!button.classList.contains('loading')) {
+                    button.classList.add('loading');
+                    const originalText = button.textContent;
+                    button.textContent = '⏳ Loading...';
+                    
+                    setTimeout(() => {
+                        if (button.classList.contains('loading')) {
+                            button.classList.remove('loading');
+                            button.textContent = originalText;
+                        }
+                    }, 2000);
+                }
+            });
+        });
+    }
+    
+    addScrollAnimations() {
+        if ('IntersectionObserver' in window) {
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -50px 0px'
+            };
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }
+                });
+            }, observerOptions);
+            
+            // Observe cards for scroll animations
+            [...this.processCards, ...this.raceCards, ...this.serviceCards].forEach((card, index) => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(20px)';
+                card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
+                observer.observe(card);
+            });
+            
+            // Observe sections
+            document.querySelectorAll('.section-header, .cta-content').forEach(section => {
+                section.style.opacity = '0';
+                section.style.transform = 'translateY(20px)';
+                section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+                observer.observe(section);
+            });
+        }
+    }
+    
+    setupSmoothScrolling() {
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+    }
+}
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    new DigitalBrandingManager();
+});
+</script>
+{% endblock %}