Update spiritual path assessment with landing page and improved navigation

- Add beautiful landing page with Intercom-inspired design
- Create separate routes for landing (/) and assessment (/assessment)
- Remove logout button from assessment pages
- Add Previous button for navigation between questions
- Remove Next button - implement auto-advance on selection
- Fix radio button enabling for answer changes
- Update navigation styling and layout
- Add gradient backgrounds and modern UI elements

app.py

@@ -198,7 +198,11 @@ def calculate_results(answers):
     return recommendations
 
 @app.route("/")
-def home():
+def landing():
+    return render_template('landing.html')
+
+@app.route("/assessment")
+def assessment():
     if 'username' not in session:
         return redirect(url_for('login'))
     

static/landing.css

@@ -0,0 +1,455 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #6366f1;
+    --primary-dark: #4f46e5;
+    --secondary: #8b5cf6;
+    --accent: #ec4899;
+    --text-dark: #1e293b;
+    --text-light: #64748b;
+    --bg-white: #ffffff;
+    --bg-light: #f8fafc;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    line-height: 1.6;
+    color: var(--text-dark);
+    background: var(--bg-white);
+    overflow-x: hidden;
+}
+
+/* Animated Gradient Background */
+.gradient-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+    opacity: 0.05;
+    z-index: -1;
+    animation: gradientShift 15s ease infinite;
+}
+
+@keyframes gradientShift {
+    0%, 100% { transform: scale(1) rotate(0deg); }
+    50% { transform: scale(1.1) rotate(5deg); }
+}
+
+/* Navigation */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    z-index: 1000;
+    padding: 1rem 0;
+}
+
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--text-dark);
+}
+
+.nav-cta {
+    padding: 0.625rem 1.5rem;
+    background: var(--primary);
+    color: white;
+    text-decoration: none;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+}
+
+.nav-cta:hover {
+    background: var(--primary-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+/* Main Content */
+.main-content {
+    padding-top: 80px;
+}
+
+/* Hero Section */
+.hero-section {
+    padding: 6rem 2rem 4rem;
+    text-align: center;
+    position: relative;
+}
+
+.hero-container {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 50px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--primary);
+    margin-bottom: 2rem;
+    animation: fadeInUp 0.6s ease;
+}
+
+.hero-title {
+    font-size: 4.5rem;
+    font-weight: 800;
+    line-height: 1.1;
+    margin-bottom: 1.5rem;
+    color: var(--text-dark);
+    animation: fadeInUp 0.6s ease 0.1s both;
+}
+
+.gradient-text {
+    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-light);
+    max-width: 700px;
+    margin: 0 auto 3rem;
+    line-height: 1.8;
+    animation: fadeInUp 0.6s ease 0.2s both;
+}
+
+.cta-buttons {
+    animation: fadeInUp 0.6s ease 0.3s both;
+}
+
+.btn-primary, .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 2.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    color: white;
+    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
+}
+
+.btn-primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary .arrow {
+    transition: transform 0.3s ease;
+}
+
+.btn-primary:hover .arrow {
+    transform: translateX(5px);
+}
+
+.assessment-meta {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    margin-top: 2rem;
+    font-size: 0.9rem;
+    color: var(--text-light);
+}
+
+/* Hero Visual */
+.hero-visual {
+    position: relative;
+    height: 400px;
+    margin-top: 5rem;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.floating-card {
+    position: absolute;
+    background: white;
+    padding: 1.25rem 1.75rem;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    animation: float 6s ease-in-out infinite;
+    white-space: nowrap;
+}
+
+.floating-card .card-icon {
+    font-size: 1.75rem;
+    flex-shrink: 0;
+}
+
+.floating-card .card-text {
+    font-weight: 600;
+    color: var(--text-dark);
+    font-size: 0.95rem;
+}
+
+.card-1 {
+    left: 5%;
+    top: 10%;
+    animation-delay: 0s;
+}
+
+.card-2 {
+    right: 5%;
+    top: 50%;
+    animation-delay: 2s;
+}
+
+.card-3 {
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 10%;
+    animation-delay: 4s;
+}
+
+@keyframes float {
+    0%, 100% { 
+        transform: translateY(0px);
+    }
+    50% { 
+        transform: translateY(-20px);
+    }
+}
+
+/* Fix for card-3 animation to maintain centering */
+.card-3 {
+    animation: floatCenter 6s ease-in-out infinite;
+}
+
+@keyframes floatCenter {
+    0%, 100% { 
+        transform: translate(-50%, 0px);
+    }
+    50% { 
+        transform: translate(-50%, -20px);
+    }
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Features Section */
+.features-section {
+    padding: 6rem 2rem;
+    background: var(--bg-light);
+}
+
+.section-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.section-header h2 {
+    font-size: 3rem;
+    font-weight: 800;
+    color: var(--text-dark);
+    margin-bottom: 1rem;
+}
+
+.section-header p {
+    font-size: 1.25rem;
+    color: var(--text-light);
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 2rem;
+}
+
+.feature-card {
+    background: white;
+    padding: 2.5rem;
+    border-radius: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
+}
+
+.feature-icon-wrapper {
+    width: 80px;
+    height: 80px;
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.feature-icon {
+    font-size: 2.5rem;
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-dark);
+    margin-bottom: 1rem;
+}
+
+.feature-card p {
+    color: var(--text-light);
+    line-height: 1.8;
+}
+
+/* CTA Section */
+.cta-section {
+    padding: 6rem 2rem;
+    text-align: center;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    color: white;
+}
+
+.cta-container h2 {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+}
+
+.cta-container p {
+    font-size: 1.25rem;
+    margin-bottom: 2.5rem;
+    opacity: 0.9;
+}
+
+.btn-secondary {
+    background: white;
+    color: var(--primary);
+}
+
+.btn-secondary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
+}
+
+/* Footer */
+.footer {
+    background: var(--text-dark);
+    color: white;
+    padding: 3rem 2rem;
+    text-align: center;
+}
+
+.footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.footer p {
+    opacity: 0.7;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .hero-visual {
+        height: 300px;
+    }
+    
+    .floating-card {
+        padding: 1rem 1.5rem;
+        font-size: 0.85rem;
+    }
+    
+    .floating-card .card-icon {
+        font-size: 1.5rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .nav-container {
+        padding: 0 1rem;
+    }
+    
+    .hero-section {
+        padding: 4rem 1rem 3rem;
+    }
+    
+    .hero-title {
+        font-size: 2.5rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.1rem;
+    }
+    
+    .assessment-meta {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    
+    .hero-visual {
+        display: none;
+    }
+    
+    .section-header h2 {
+        font-size: 2rem;
+    }
+    
+    .cta-container h2 {
+        font-size: 2rem;
+    }
+    
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .btn-primary, .btn-secondary {
+        padding: 0.875rem 2rem;
+        font-size: 1rem;
+    }
+}

static/script.js

@@ -69,11 +69,6 @@ function showQuestion(questionIndex) {
         block.classList.remove('active');
         var blockIndex = parseInt(block.getAttribute('data-question-index'));
         if (blockIndex === questionIndex) block.classList.add('active');
-        if (blockIndex < questionIndex) {
-            block.querySelectorAll('input[type="radio"]').forEach(function(radio) {
-                radio.disabled = true;
-            });
-        }
     });
     
     currentQuestion = questionIndex;
@@ -83,20 +78,13 @@ function showQuestion(questionIndex) {
 }
 
 function updateNavigationButtons() {
-    var nextBtn = document.getElementById('nextBtn' + currentQuestion);
+    // Check if we're on the last question and it's answered
+    var currentQuestionId = questionIds[currentQuestion - 1];
+    var radioName = 'q' + currentQuestionId;
+    var isAnswered = document.querySelector('input[name="' + radioName + '"]:checked') !== null;
     
-    if (nextBtn) {
-        var currentQuestionId = questionIds[currentQuestion - 1];
-        var radioName = 'q' + currentQuestionId;
-        var isAnswered = document.querySelector('input[name="' + radioName + '"]:checked') !== null;
-        
-        if (currentQuestion === totalQuestions && isAnswered) {
-            nextBtn.style.display = 'none';
-            document.getElementById('submitBtn').style.display = 'block';
-        } else {
-            nextBtn.disabled = !isAnswered;
-            nextBtn.style.display = 'inline-block';
-        }
+    if (currentQuestion === totalQuestions && isAnswered) {
+        document.getElementById('submitBtn').style.display = 'block';
     }
 }
 
@@ -108,18 +96,12 @@ function handleAnswer(radioElement) {
         return;
     }
     
-    updateNavigationButtons();
-    
     // Auto-advance to next question after selection
     setTimeout(function() {
         if (questionIndex < totalQuestions) {
             showQuestion(questionIndex + 1);
         } else {
             // Last question - show submit button
-            var nextBtn = document.getElementById('nextBtn' + questionIndex);
-            if (nextBtn) {
-                nextBtn.style.display = 'none';
-            }
             document.getElementById('submitBtn').style.display = 'block';
         }
     }, 400);
@@ -131,6 +113,12 @@ function goToNext() {
     }
 }
 
+function goToPrev() {
+    if (currentQuestion > 1) {
+        showQuestion(currentQuestion - 1);
+    }
+}
+
 function submitAssessment() {
     var form = document.getElementById('assessmentForm');
     var answers = [];

static/style.css

@@ -355,7 +355,7 @@ button:disabled {
 .nav-buttons {
     display: flex;
     gap: 12px;
-    justify-content: space-between;
+    justify-content: flex-start;
     margin-top: 20px;
 }
 
@@ -607,3 +607,26 @@ button:disabled {
     padding: 10px 14px;
 }
 
+/* Navigation Header */
+.nav-header {
+    padding: 0 0 20px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.back-link {
+    color: #667eea;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 14px;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.back-link:hover {
+    color: #5a6fd8;
+    transform: translateX(-3px);
+}
+

templates/index.html

@@ -8,6 +8,9 @@
 </head>
 <body>
     <div class="container">
+        <div class="nav-header">
+            <a href="/" class="back-link">← Back to Home</a>
+        </div>
         {% if not logged_in %}
             <!-- Login/Signup Form -->
             <h1><span class="icon">🌟</span>Spiritual Path Finder</h1>
@@ -30,7 +33,7 @@
             {% if not has_results %}
                 <p class="subtitle">
                     Discover which spiritual or religious path aligns with your beliefs, values, and lifestyle. 
-                    Answer 8 thoughtful questions about your worldview.
+                    <br> Answer 8 thoughtful questions about your worldview.
                 </p>
                 
                 <div class="question-counter" id="questionCounter">Question 1 of {{ questions|length }}</div>
@@ -63,9 +66,9 @@
                         </label>
                         {% endfor %}
                         
-                        <div class="nav-buttons" style="justify-content: flex-end;">
-                            <button type="button" class="nav-btn next" id="nextBtn{{ q_index }}" onclick="goToNext()" disabled>
-                                Next →
+                        <div class="nav-buttons">
+                            <button type="button" class="nav-btn prev" id="prevBtn{{ q_index }}" onclick="goToPrev()" {% if loop.first %}style="visibility: hidden;"{% endif %}>
+                                ← Previous
                             </button>
                         </div>
                     </div>
@@ -110,7 +113,6 @@
                                 <div class="chat-message bot">
                                     Hi! Ask me anything about {{ result.name }}.<br>
                                     <span style="color:#7C3AED; font-size:13px;">
-                                        Example: "What are the daily practices?"<br>
                                         Example: "How do I get started with this path?"
                                     </span>
                                 </div>
@@ -136,10 +138,6 @@
                     <button class="btn reset-btn" onclick="resetAssessment()">🔄 Retake Assessment</button>
                 </div>
             {% endif %}
-            
-            <div style="text-align: center;">
-                <a href="/logout" class="btn logout-btn">Logout</a>
-            </div>
         {% endif %}
     </div>
     <script src="{{ url_for('static', filename='script.js') }}"></script>

templates/landing.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spiritual Path Assessment</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='landing.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="gradient-bg"></div>
+    
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="logo">✨ Spiritual Path</div>
+            <a href="/assessment" class="nav-cta">Start Assessment</a>
+        </div>
+    </nav>
+
+    <main class="main-content">
+        <section class="hero-section">
+            <div class="hero-container">
+                <div class="badge">🌟 Discover Your Path</div>
+                <h1 class="hero-title">
+                    Find Your <span class="gradient-text">Spiritual Journey</span>
+                </h1>
+                <p class="hero-subtitle">
+                    A personalized assessment designed to help you explore and understand your unique spiritual path through thoughtful questions and AI-powered insights.
+                </p>
+                
+                <div class="cta-buttons">
+                    <a href="/assessment" class="btn-primary">
+                        Begin Your Assessment
+                        <span class="arrow">→</span>
+                    </a>
+                    <div class="assessment-meta">
+                        <span>⏱️ 5-10 minutes</span>
+                        <span>🆓 Completely free</span>
+                        <span>🧘 Personalized insights</span>
+                    </div>
+                </div>
+
+                <div class="hero-visual" style="display: none;">
+                    <div class="floating-card card-1">
+                        <div class="card-icon">🧘</div>
+                        <div class="card-text">Personalized Insights</div>
+                    </div>
+                    <div class="floating-card card-2">
+                        <div class="card-icon">📊</div>
+                        <div class="card-text">Deep Analysis</div>
+                    </div>
+                    <div class="floating-card card-3">
+                        <div class="card-icon">🎯</div>
+                        <div class="card-text">Actionable Guidance</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="features-section">
+            <div class="section-container">
+                <div class="section-header">
+                    <h2>What You'll Discover</h2>
+                    <p>Comprehensive insights into your spiritual journey</p>
+                </div>
+
+                <div class="features-grid">
+                    <div class="feature-card">
+                        <div class="feature-icon-wrapper">
+                            <div class="feature-icon">🌈</div>
+                        </div>
+                        <h3>Your Spiritual Dimensions</h3>
+                        <p>Understand your current spiritual development across multiple dimensions and uncover hidden aspects of your journey.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <div class="feature-icon-wrapper">
+                            <div class="feature-icon">💡</div>
+                        </div>
+                        <h3>Personalized Recommendations</h3>
+                        <p>Get specific guidance tailored to your unique spiritual path, beliefs, and goals for meaningful growth.</p>
+                    </div>
+
+                    <div class="feature-card">
+                        <div class="feature-icon-wrapper">
+                            <div class="feature-icon">🚀</div>
+                        </div>
+                        <h3>Growth Opportunities</h3>
+                        <p>Identify areas for spiritual growth and receive practical steps to deepen your practice and understanding.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="cta-section">
+            <div class="cta-container">
+                <h2>Ready to begin your journey?</h2>
+                <p>Start your spiritual path assessment today</p>
+                <a href="/assessment" class="btn-secondary">
+                    Get Started Now
+                    <span class="arrow">→</span>
+                </a>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer">
+        <div class="footer-container">
+            <p>© 2025 Spiritual Path Assessment. Empowering your spiritual journey.</p>
+        </div>
+    </footer>
+</body>
+</html>