feat: Improve visual hierarchy and fix navigation links - IMPROVEMENT 1: Visual Hierarchy & Content Structure - Converted Quick Navigation section to card-based grid layout - Converted Key Features section to card-based grid layout with hover effects - Cards provide better visual scanning and engagement - Improved spacing and visual separation between sections - Enhanced CSS with stronger overrides for theme compatibility - IMPROVEMENT 2: Fix Broken Navigation Links - Replaced Python file links (.py) with GitHub repository links - All tool links now point to actual GitHub file locations - Documentation links use proper .html extensions for GitHub Pages - Removed redundant Live Site section - All navigation links are now functional on GitHub Pages

Author: ElaMCB

assets/css/style.css

@@ -157,22 +157,23 @@ a:hover {
 /* Buttons */
 .btn {
     display: inline-block;
-    padding: 0.75rem 1.5rem;
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    color: white;
+    padding: 0.75rem 1.5rem !important;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
+    color: white !important;
     border: none;
     border-radius: 6px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s;
     box-shadow: var(--shadow);
+    margin: 0.5rem;
 }
 
 .btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
-    text-decoration: none;
-    color: white;
+    text-decoration: none !important;
+    color: white !important;
 }
 
 /* Code Blocks */
@@ -254,30 +255,46 @@ li {
 
 /* Features Section */
 .features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
-    margin: 2rem 0;
+    display: grid !important;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
+    gap: 1.5rem !important;
+    margin: 2rem 0 !important;
 }
 
 .feature-card {
-    background: white;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1.5rem;
+    background: white !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    padding: 1.5rem !important;
     text-align: center;
     transition: all 0.3s;
+    box-shadow: var(--shadow);
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
 }
 
 .feature-card:hover {
     transform: translateY(-4px);
-    box-shadow: var(--shadow-lg);
-    border-color: var(--primary-color);
+    box-shadow: var(--shadow-lg) !important;
+    border-color: var(--primary-color) !important;
 }
 
 .feature-card h3 {
-    color: var(--primary-color);
-    margin-top: 0;
+    color: var(--primary-color) !important;
+    margin-top: 0 !important;
+    border: none !important;
+    font-size: 1.25rem !important;
+}
+
+.feature-card ul {
+    margin: 1rem 0 !important;
+    flex-grow: 1;
+}
+
+.feature-card li {
+    margin: 0.75rem 0 !important;
+    line-height: 1.6;
 }
 
 /* Footer */
@@ -324,25 +341,28 @@ li {
 
 /* Hero Section */
 .hero {
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-    color: white;
-    padding: 4rem 1rem;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
+    color: white !important;
+    padding: 4rem 1rem !important;
     text-align: center;
-    margin: -2rem -1rem 3rem -1rem;
+    margin: -2rem -1rem 3rem -1rem !important;
+    border-radius: 0;
 }
 
 .hero h1 {
-    color: white;
-    border: none;
-    font-size: 3rem;
-    margin-bottom: 1rem;
+    color: white !important;
+    border: none !important;
+    font-size: 3rem !important;
+    margin-bottom: 1rem !important;
+    padding-bottom: 0 !important;
 }
 
 .hero p {
-    font-size: 1.3rem;
+    font-size: 1.3rem !important;
     opacity: 0.95;
     max-width: 800px;
-    margin: 0 auto;
+    margin: 1rem auto !important;
+    color: white !important;
 }
 
 /* Badge/Pill */

index.md

@@ -20,60 +20,100 @@ Learn to speak AI's language. Turn vague requests into precise instructions that
 
 ## Quick Navigation
 
-### Documentation
-- **[Quick Start Guide](docs/QUICK_START.md)** - Get started in minutes
-- **[API Reference](docs/API_REFERENCE.md)** - Complete tool documentation
-- **[Troubleshooting](docs/TROUBLESHOOTING.md)** - Common issues and solutions
-
-### Course Materials
-- **[Course Overview](course_overview.md)** - Full curriculum
-- **[Course Roadmap](COURSE_ROADMAP.md)** - Learning path
-- **[Foundations Lab](foundations_lab.md)** - First interactive lab
-- **[Start Here](START_HERE.md)** - Getting started guide
-
-### Tools & Resources
-- **[Interactive Dashboard](streamlit_app.py)** - Run with `streamlit run streamlit_app.py`
-- **[Prompt Validator](notebooks/prompt_validator.py)** - Score prompts 0-100%
-- **[Production Validator](notebooks/production_validator.py)** - Production testing
-- **[A/B Testing](notebooks/ab_testing_framework.py)** - Compare prompt versions
-- **[Progress Tracker](notebooks/progress_tracker.py)** - Track learning
-
-### Community
-- **[Contributing Guide](CONTRIBUTING.md)** - How to contribute
-- **[GitHub Repository](https://github.com/ElaMCB/AI-Prompt-Engineering)** - Source code
-- **[Improvements Summary](IMPROVEMENTS_SUMMARY.md)** - Recent enhancements
+<div class="features">
+
+<div class="feature-card">
+<h3>Documentation</h3>
+<ul style="text-align: left; padding-left: 1.5rem;">
+<li><a href="docs/QUICK_START.html">Quick Start Guide</a> - Get started in minutes</li>
+<li><a href="docs/API_REFERENCE.html">API Reference</a> - Complete tool documentation</li>
+<li><a href="docs/TROUBLESHOOTING.html">Troubleshooting</a> - Common issues and solutions</li>
+</ul>
+</div>
+
+<div class="feature-card">
+<h3>Course Materials</h3>
+<ul style="text-align: left; padding-left: 1.5rem;">
+<li><a href="course_overview.html">Course Overview</a> - Full curriculum</li>
+<li><a href="COURSE_ROADMAP.html">Course Roadmap</a> - Learning path</li>
+<li><a href="foundations_lab.html">Foundations Lab</a> - First interactive lab</li>
+<li><a href="START_HERE.html">Start Here</a> - Getting started guide</li>
+</ul>
+</div>
+
+<div class="feature-card">
+<h3>Tools & Resources</h3>
+<ul style="text-align: left; padding-left: 1.5rem;">
+<li><a href="https://github.com/ElaMCB/AI-Prompt-Engineering/blob/main/streamlit_app.py">Interactive Dashboard</a> - Run with <code>streamlit run streamlit_app.py</code></li>
+<li><a href="https://github.com/ElaMCB/AI-Prompt-Engineering/blob/main/notebooks/prompt_validator.py">Prompt Validator</a> - Score prompts 0-100%</li>
+<li><a href="https://github.com/ElaMCB/AI-Prompt-Engineering/blob/main/notebooks/production_validator.py">Production Validator</a> - Production testing</li>
+<li><a href="https://github.com/ElaMCB/AI-Prompt-Engineering/blob/main/notebooks/ab_testing_framework.py">A/B Testing</a> - Compare prompt versions</li>
+<li><a href="https://github.com/ElaMCB/AI-Prompt-Engineering/blob/main/notebooks/progress_tracker.py">Progress Tracker</a> - Track learning</li>
+</ul>
+</div>
+
+<div class="feature-card">
+<h3>Community</h3>
+<ul style="text-align: left; padding-left: 1.5rem;">
+<li><a href="CONTRIBUTING.html">Contributing Guide</a> - How to contribute</li>
+<li><a href="https://github.com/ElaMCB/AI-Prompt-Engineering">GitHub Repository</a> - Source code</li>
+<li><a href="IMPROVEMENTS_SUMMARY.html">Improvements Summary</a> - Recent enhancements</li>
+</ul>
+</div>
+
+</div>
 
 ---
 
 ## Key Features
 
-### **Prompt Validator**
-Score prompts 0-100% using multi-factor weighted scoring:
-- Clarity (25%)
-- Specificity (25%)
-- Context (20%)
-- Structure (15%)
-- Examples (15%)
-
-### **Production Validator**
-Test prompts for production deployment:
-- Consistency testing
-- Robustness with edge cases
-- Performance monitoring
-- Automated recommendations
-
-### **Model-Agnostic LLM Support**
-Works with multiple providers:
-- OpenAI (GPT-3.5, GPT-4)
-- Anthropic (Claude 3)
-- Ollama (local models)
-
-### **Interactive Dashboard**
-Use the Streamlit dashboard for:
-- Real-time prompt validation
-- LLM playground
-- A/B testing interface
-- Progress tracking
+<div class="features">
+
+<div class="feature-card">
+<h3>Prompt Validator</h3>
+<p>Score prompts 0-100% using multi-factor weighted scoring:</p>
+<ul style="text-align: left; padding-left: 1.5rem;">
+<li>Clarity (25%)</li>
+<li>Specificity (25%)</li>
+<li>Context (20%)</li>
+<li>Structure (15%)</li>
+<li>Examples (15%)</li>
+</ul>
+</div>
+
+<div class="feature-card">
+<h3>Production Validator</h3>
+<p>Test prompts for production deployment:</p>
+<ul style="text-align: left; padding-left: 1.5rem;">
+<li>Consistency testing</li>
+<li>Robustness with edge cases</li>
+<li>Performance monitoring</li>
+<li>Automated recommendations</li>
+</ul>
+</div>
+
+<div class="feature-card">
+<h3>Model-Agnostic LLM Support</h3>
+<p>Works with multiple providers:</p>
+<ul style="text-align: left; padding-left: 1.5rem;">
+<li>OpenAI (GPT-3.5, GPT-4)</li>
+<li>Anthropic (Claude 3)</li>
+<li>Ollama (local models)</li>
+</ul>
+</div>
+
+<div class="feature-card">
+<h3>Interactive Dashboard</h3>
+<p>Use the Streamlit dashboard for:</p>
+<ul style="text-align: left; padding-left: 1.5rem;">
+<li>Real-time prompt validation</li>
+<li>LLM playground</li>
+<li>A/B testing interface</li>
+<li>Progress tracking</li>
+</ul>
+</div>
+
+</div>
 
 ---
 
@@ -153,18 +193,10 @@ Use the Streamlit dashboard for:
 
 ---
 
-## Live Site
-
-Your GitHub Pages site: **https://elamcb.github.io/AI-Prompt-Engineering/**
-
-- Auto-deployed from main branch
-- Documentation accessible online
-- Markdown rendering
-- Easy navigation
 
 ---
 
-## 📝 License
+## License
 
 MIT Licensed • Actively Maintained • Community Contributions Welcome