Add GitHub Actions workflow for GitHub Pages deployment

This workflow automates the deployment of static content to GitHub Pages on push to the main branch or manually via the Actions tab.

Enhance content styling and structure in HTML and CSS for improved readability and visual appeal

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

index.html

@@ -83,18 +83,23 @@
         <div class="container">
             <h2>Why CodeMind?</h2>
             <div class="why-content">
-                <p>CodeMind brings together document semantic search, retrieval-augmented Q&A, and AI-powered commit
-                    message generation to help you work faster and smarter by leveraging your own project context.</p>
+                <p>CodeMind brings together <b class="b">document semantic search</b>, <b class="b">retrieval-augmented
+                        Q&A</b>, and
+                    <b class="b">AI-powered commit
+                        message generation</b> to help you work faster and smarter by leveraging your own project
+                    context.
+                </p>
+                <br>
 
-                <h3>Efficient Knowledge Retrieval</h3>
+                <h3 class="b">Efficient Knowledge Retrieval</h3>
                 <p>Makes searching and querying documentation more powerful by using semantic embeddings rather than
-                    keyword search.</p>
+                    keyword search.</p><br>
 
-                <h3>Smarter Git Workflow</h3>
+                <h3 class="b">Smarter Git Workflow</h3>
                 <p>Automates the creation of meaningful commit messages by analyzing git diffs and using an LLM to
-                    summarize changes.</p>
+                    summarize changes.</p><br>
 
-                <h3>AI-Powered Documentation</h3>
+                <h3 class="b">AI-Powered Documentation</h3>
                 <p>Enables you to ask questions about your project, using your own docs/context rather than just generic
                     answers.</p>
             </div>

style.css

@@ -1,313 +1,395 @@
-        :root {
-            --primary: #6c63ff;
-            --primary-dark: #5651e9;
-            --secondary: #4a4a4a;
-            --light: #f8f9fa;
-            --dark: #212529;
-            --success: #28a745;
-            --info: #17a2b8;
-            --gradient-start: #6c63ff;
-            --gradient-end: #4a43b7;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-
-        body {
-            color: var(--dark);
-            line-height: 1.6;
-            background-color: #f9f9f9;
-        }
-
-        .container {
-            width: 90%;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 15px;
-        }
-
-        /* Header & Navigation */
-        header {
-            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-            color: white;
-            padding: 1rem 0;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        nav {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .logo {
-            font-size: 1.8rem;
-            font-weight: 700;
-            display: flex;
-            align-items: center;
-        }
-
-        .logo-icon {
-            margin-right: 10px;
-            font-size: 2rem;
-        }
-
-        .nav-links {
-            display: flex;
-            list-style: none;
-        }
-
-        .nav-links li {
-            margin-left: 2rem;
-        }
-
-        .nav-links a {
-            color: white;
-            text-decoration: none;
-            font-weight: 500;
-            transition: opacity 0.3s;
-        }
-
-        .nav-links a:hover {
-            opacity: 0.8;
-        }
-
-        /* Hero Section */
-        .hero {
-            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-            color: white;
-            padding: 5rem 0;
-            text-align: center;
-        }
-
-        .hero h1 {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-        }
-
-        .hero p {
-            font-size: 1.2rem;
-            max-width: 700px;
-            margin: 0 auto 2rem;
-        }
-
-        .btn {
-            display: inline-block;
-            background: white;
-            color: var(--primary);
-            padding: 0.8rem 1.5rem;
-            border-radius: 30px;
-            text-decoration: none;
-            font-weight: 600;
-            transition: all 0.3s;
-            border: none;
-            cursor: pointer;
-        }
-
-        .btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-        }
-
-        .btn-outline {
-            background: transparent;
-            border: 2px solid white;
-            color: white;
-            margin-left: 1rem;
-        }
-
-        /* Sections */
-        section {
-            padding: 5rem 0;
-        }
-
-        section h2 {
-            text-align: center;
-            margin-bottom: 3rem;
-            font-size: 2.5rem;
-            color: var(--secondary);
-        }
-
-        section h3 {
-            margin-bottom: 1rem;
-            color: var(--primary);
-        }
-
-        /* Features */
-        .features {
-            background-color: white;
-        }
-
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-        }
-
-        .feature-card {
-            background: var(--light);
-            padding: 2rem;
-            border-radius: 10px;
-            text-align: center;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-            transition: transform 0.3s;
-        }
-
-        .feature-card:hover {
-            transform: translateY(-5px);
-        }
-
-        .feature-icon {
-            font-size: 2.5rem;
-            color: var(--primary);
-            margin-bottom: 1rem;
-        }
-
-        /* Why Section */
-        .why {
-            background-color: var(--light);
-        }
-
-        .why-content {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        /* How It Works */
-        .how-steps {
-            display: flex;
-            flex-direction: column;
-            gap: 2rem;
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        .step {
-            display: flex;
-            align-items: flex-start;
-            gap: 1.5rem;
-        }
-
-        .step-number {
-            background: var(--primary);
-            color: white;
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-            font-weight: bold;
-        }
-
-        .step-content {
-            flex: 1;
-        }
-
-        /* Usage */
-        .usage {
-            background-color: var(--light);
-        }
-
-        .code-block {
-            background: #2d2d2d;
-            color: #f8f8f2;
-            padding: 1.5rem;
-            border-radius: 5px;
-            overflow-x: auto;
-            margin: 1.5rem 0;
-            font-family: 'Courier New', monospace;
-        }
-
-        .code-comment {
-            color: #75715e;
-        }
-
-        /* Setup */
-        .setup-cards {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-        }
-
-        .setup-card {
-            background: white;
-            padding: 2rem;
-            border-radius: 10px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-        }
-
-        /* FAQ */
-        .faq-list {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        .faq-item {
-            margin-bottom: 1.5rem;
-            border-bottom: 1px solid #eee;
-            padding-bottom: 1.5rem;
-        }
-
-        .faq-question {
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            color: var(--primary);
-        }
-
-        /* Footer */
-        footer {
-            background: var(--dark);
-            color: white;
-            padding: 3rem 0;
-            text-align: center;
-        }
-
-        .footer-links {
-            display: flex;
-            justify-content: center;
-            list-style: none;
-            margin: 2rem 0;
-        }
-
-        .footer-links li {
-            margin: 0 1rem;
-        }
-
-        .footer-links a {
-            color: white;
-            text-decoration: none;
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .nav-links {
-                display: none;
-            }
-
-            .hero h1 {
-                font-size: 2.2rem;
-            }
-
-            .step {
-                flex-direction: column;
-            }
-
-            .btn {
-                display: block;
-                margin: 0.5rem auto;
-                width: 80%;
-            }
-
-            .btn-outline {
-                margin-left: 0;
-            }
-        }
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+:root {
+    --primary: #6c63ff;
+    --primary-dark: #5651e9;
+    --secondary: #4a4a4a;
+    --light: #f8f9fa;
+    --dark: #212529;
+    --success: #28a745;
+    --info: #17a2b8;
+    --gradient-start: #6c63ff;
+    --gradient-end: #4a43b7;
+    --card-bg: #fff;
+    --card-shadow: 0 8px 32px rgba(44, 62, 80, 0.08);
+    --border-radius: 16px;
+    --section-spacing: 6rem;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    color: var(--dark);
+    line-height: 1.7;
+    background-color: #f4f6fb;
+    font-size: 1.08rem;
+}
+
+.b {
+    letter-spacing: .777px;
+    font-weight: 800;
+    color: var(--primary);
+}
+
+.container {
+    width: 92%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 18px;
+}
+
+header {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: white;
+    padding: 1.5rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 4px 24px rgba(44, 62, 80, 0.08);
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 2rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    letter-spacing: 1px;
+}
+
+.logo-icon {
+    margin-right: 12px;
+    font-size: 2.2rem;
+}
+
+.nav-links {
+    display: flex;
+    list-style: none;
+}
+
+.nav-links li {
+    margin-left: 2.2rem;
+}
+
+.nav-links a {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    transition: opacity 0.3s, color 0.3s;
+    padding: 0.3rem 0.7rem;
+    border-radius: 8px;
+}
+
+.nav-links a:hover {
+    opacity: 0.85;
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.hero {
+    background: linear-gradient(120deg, var(--gradient-start) 60%, var(--gradient-end) 100%);
+    color: white;
+    padding: 6rem 0 4rem 0;
+    text-align: center;
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.08);
+}
+
+.hero h1 {
+    font-size: 3.2rem;
+    margin-bottom: 1.2rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+.hero p {
+    font-size: 1.25rem;
+    max-width: 700px;
+    margin: 0 auto 2.2rem;
+    opacity: 0.95;
+}
+
+.btn {
+    display: inline-block;
+    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
+    color: white;
+    padding: 1rem 2.2rem;
+    border-radius: 30px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1.08rem;
+    transition: all 0.3s;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.08);
+    margin: 0.5rem 0.5rem 0.5rem 0;
+}
+
+.btn:hover {
+    transform: translateY(-2px) scale(1.04);
+    box-shadow: 0 10px 24px rgba(44, 62, 80, 0.12);
+    background: linear-gradient(90deg, var(--primary-dark), var(--gradient-end));
+}
+
+.btn-outline {
+    background: transparent;
+    border: 2px solid white;
+    color: white;
+    margin-left: 1rem;
+}
+
+section {
+    padding: var(--section-spacing) 0;
+}
+
+section h2 {
+    text-align: center;
+    margin-bottom: 3.5rem;
+    font-size: 2.7rem;
+    color: var(--secondary);
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+section h3 {
+    margin-bottom: 1rem;
+    color: var(--primary);
+    font-weight: 600;
+}
+
+.features {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 2.5rem;
+}
+
+.feature-card {
+    background: var(--light);
+    padding: 2.2rem;
+    border-radius: var(--border-radius);
+    text-align: center;
+    box-shadow: var(--card-shadow);
+    transition: transform 0.3s, box-shadow 0.3s;
+    border: 1px solid #ececec;
+}
+
+.feature-card:hover {
+    transform: translateY(-7px) scale(1.03);
+    box-shadow: 0 12px 32px rgba(44, 62, 80, 0.12);
+    border-color: var(--primary);
+}
+
+.feature-icon {
+    font-size: 2.7rem;
+    color: var(--primary);
+    margin-bottom: 1.2rem;
+}
+
+.why {
+    background-color: var(--light);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+}
+
+.why-content {
+    max-width: 800px;
+    margin: 0 auto;
+    font-size: 1.15rem;
+    opacity: 0.97;
+}
+
+.how-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+.step {
+    display: flex;
+    align-items: flex-start;
+    gap: 2rem;
+    background: var(--card-bg);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    padding: 2rem;
+    transition: box-shadow 0.3s;
+}
+
+.step:hover {
+    box-shadow: 0 16px 32px rgba(44, 62, 80, 0.14);
+}
+
+.step-number {
+    background: var(--primary);
+    color: white;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-weight: bold;
+    font-size: 1.3rem;
+    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.08);
+}
+
+.step-content {
+    flex: 1;
+}
+
+.usage {
+    background-color: var(--light);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+}
+
+.code-block {
+    background: #23272f;
+    color: #f8f8f2;
+    padding: 1.7rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 1.7rem 0;
+    font-family: 'Fira Mono', 'Courier New', monospace;
+    font-size: 1.05rem;
+    box-shadow: 0 4px 16px rgba(44, 62, 80, 0.08);
+}
+
+.code-comment {
+    color: #8ec07c;
+}
+
+.setup-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 2.5rem;
+}
+
+.setup-card {
+    background: var(--card-bg);
+    padding: 2.2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+    border: 1px solid #ececec;
+}
+
+.faq-list {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.faq-item {
+    padding: 12px;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 2rem;
+    background: var(--card-bg);
+    border-radius: var(--border-radius);
+    box-shadow: var(--card-shadow);
+}
+
+.faq-question {
+    font-weight: 600;
+    margin-bottom: 0.7rem;
+    color: var(--primary);
+    font-size: 1.13rem;
+}
+
+footer {
+    background: var(--dark);
+    color: white;
+    padding: 3.5rem 0;
+    text-align: center;
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+    box-shadow: 0 -4px 24px rgba(44, 62, 80, 0.08);
+}
+
+.footer-links {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    margin: 2.5rem 0;
+}
+
+.footer-links li {
+    margin: 0 1.2rem;
+}
+
+.footer-links a {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    transition: color 0.3s;
+}
+
+.footer-links a:hover {
+    color: var(--primary);
+}
+
+@media (max-width: 900px) {
+    .container {
+        width: 98%;
+        padding: 0 8px;
+    }
+
+    .features-grid,
+    .setup-cards {
+        grid-template-columns: 1fr;
+    }
+
+    .how-steps {
+        gap: 1.2rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+    }
+
+    .hero h1 {
+        font-size: 2.2rem;
+    }
+
+    .step {
+        flex-direction: column;
+        padding: 1.2rem;
+    }
+
+    .btn {
+        display: block;
+        margin: 0.7rem auto;
+        width: 90%;
+    }
+
+    .btn-outline {
+        margin-left: 0;
+    }
+
+    section {
+        padding: 3rem 0;
+    }
+}