Okay, let's craft a landing page for `agentable` that's not just informative and high-quality, but truly *pops* with a sleek, content-focused "Netflix aesthetic." We'll focus on dynamic visuals, rich typography, and a narrative flow that draws the user in, making them want to explore this powerful tool. --- ## Agentable Landing Page: "Orchestrate Smarter LLM Agents" **Design Language: "The Algorithm's Edge"** * **Overall Vibe:** Dark, sophisticated, futuristic. Think Netflix's UI – deep backgrounds, vibrant, carefully placed accent colors, sharp text, and a focus on compelling content. * **Color Palette:** * **Primary Background:** `#0A0A0E` (Deep Charcoal Black) * **Secondary Backgrounds/Cards:** `#15151A` (Slightly lighter charcoal) * **Accent 1 (Primary Highlight):** `#E50914` (Netflix Red, used sparingly for CTAs, key accents) * **Accent 2 (Secondary Highlight/Glow):** `#00F0FF` (Electric Cyan – for subtle glowing elements, data streams, code highlights) * **Accent 3 (Tertiary Glow):** `#8A2BE2` (Amethyst Purple – for background gradients, ethereal effects) * **Text:** `#F0F0F0` (Off-white for readability), `#B0B0B0` (Lighter gray for secondary text). * **Typography:** * **Headings (H1, H2):** Montserrat (Bold, Ultra-Bold) - Modern, strong, impactful. * **Body Text:** Lato (Regular, Light) - Clean, highly readable. * **Code Blocks:** Roboto Mono - Monospaced, clear for code. * **Imagery & Visuals:** * Abstract, glowing neural network patterns. * Dynamic data streams flowing in the background. * Subtle animations: parallax scrolling, hover effects, subtle glows. * Clean, minimalist iconography where appropriate. * Focus on illustrative representations of "memory," "state," and "connections." --- ### **Section 1: Hero - The Grand Reveal** **(Visual: Full-width, dynamic background. Imagine a dark, cosmic-like canvas. Subtle, electric blue and amethyst purple light trails streak across the background, resembling data flow or neural pathways. In the foreground, the Agentable logo subtly glows.)** --- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentable: Orchestrate Smarter LLM Agents</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Lato:wght@300;400&family=Roboto+Mono&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-primary: #0A0A0E;
            --bg-secondary: #15151A;
            --accent-red: #E50914;
            --accent-cyan: #00F0FF;
            --accent-purple: #8A2BE2;
            --text-light: #F0F0F0;
            --text-subtle: #B0B0B0;
            --code-bg: #1A1A1E;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Lato', sans-serif;
            color: var(--text-light);
            background-color: var(--bg-primary);
            line-height: 1.6;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            color: var(--text-light);
        }

        a {
            color: var(--accent-cyan);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: var(--accent-red);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        /* --- Hero Section --- */
        .hero {
            position: relative;
            height: 90vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: hidden;
            background: linear-gradient(135deg, var(--bg-primary) 0%, #000000 100%);
            border-bottom: 2px solid var(--accent-purple);
        }

        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(circle at center, rgba(0,240,255,0.1) 0%, transparent 50%),
                              url('data:image/svg+xml;utf8,');
            background-size: cover, 100% 100%;
            opacity: 0.7;
            animation: pulse-glow 8s infinite alternate;
        }

        @keyframes pulse-glow {
            from { opacity: 0.7; transform: scale(1); }
            to { opacity: 0.9; transform: scale(1.03); }
        }

        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 900px;
            padding: 20px;
        }

        .hero h1 {
            font-size: 4.5em; /* 72px */
            margin-bottom: 20px;
            letter-spacing: -2px;
            line-height: 1.1;
            background: linear-gradient(45deg, var(--accent-cyan), var(--accent-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 15px rgba(0,240,255,0.4), 0 0 30px rgba(138,43,226,0.3);
            animation: text-glow 2s infinite alternate;
        }

        @keyframes text-glow {
            from { text-shadow: 0 0 10px rgba(0,240,255,0.3), 0 0 20px rgba(138,43,226,0.2); }
            to { text-shadow: 0 0 15px rgba(0,240,255,0.5), 0 0 30px rgba(138,43,226,0.4); }
        }

        .hero p {
            font-size: 1.6em; /* 26px */
            margin-bottom: 40px;
            color: var(--text-subtle);
            font-weight: 300;
        }

        .hero-cta-group {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 18px 36px;
            border-radius: 8px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.1em;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }

        .btn-primary {
            background-color: var(--accent-red);
            color: var(--text-light);
            box-shadow: 0 5px 20px rgba(229,9,20,0.4);
            animation: pulse-btn 1.5s infinite alternate;
        }

        .btn-primary:hover {
            background-color: #FF1A23;
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 25px rgba(229,9,20,0.6);
        }

        @keyframes pulse-btn {
            from { transform: scale(1); box-shadow: 0 5px 20px rgba(229,9,20,0.4); }
            to { transform: scale(1.02); box-shadow: 0 8px 25px rgba(229,9,20,0.6); }
        }

        .btn-secondary {
            background-color: transparent;
            color: var(--accent-cyan);
            border: 2px solid var(--accent-cyan);
            box-shadow: 0 0 15px rgba(0,240,255,0.3);
        }

        .btn-secondary:hover {
            background-color: rgba(0,240,255,0.1);
            border-color: var(--accent-cyan);
            color: var(--accent-cyan);
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 0 20px rgba(0,240,255,0.5);
        }
        
        /* Scroll indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.9em;
            color: var(--text-subtle);
            opacity: 0.7;
            animation: bounce-arrow 2s infinite;
        }
        .scroll-indicator svg {
            margin-top: 10px;
            width: 24px;
            height: 24px;
            fill: var(--accent-cyan);
        }

        @keyframes bounce-arrow {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        /* --- Global Section Styling --- */
        section {
            padding: 80px 0;
            position: relative;
            z-index: 1; /* Ensure content is above background effects */
        }

        section:nth-of-type(odd) {
            background-color: var(--bg-secondary);
            border-top: 1px solid rgba(138,43,226,0.2);
            border-bottom: 1px solid rgba(0,240,255,0.2);
        }

        section h2 {
            font-size: 3.2em; /* 50px */
            text-align: center;
            margin-bottom: 60px;
            letter-spacing: -1px;
            background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(138,43,226,0.2);
        }

        section p {
            font-size: 1.15em; /* 18px */
            margin-bottom: 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            color: var(--text-subtle);
        }
        
        /* Specific section styling */
        .problem-solution .content-grid {
            display: flex;
            gap: 40px;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .problem-solution .card {
            background-color: var(--bg-primary);
            border: 1px solid rgba(0,240,255,0.1);
            border-radius: 12px;
            padding: 30px;
            flex: 1;
            min-width: 300px;
            max-width: 45%;
            box-shadow: 0 0 30px rgba(0,240,255,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .problem-solution .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 40px rgba(0,240,255,0.2);
        }

        .problem-solution .card h3 {
            font-size: 1.8em;
            margin-bottom: 20px;
            color: var(--accent-cyan);
            border-bottom: 2px solid rgba(0,240,255,0.3);
            padding-bottom: 10px;
        }

        .problem-solution .card.solution h3 {
            color: var(--accent-purple);
            border-bottom: 2px solid rgba(138,43,226,0.3);
        }

        .problem-solution .card ul {
            list-style: none;
            padding-left: 0;
        }

        .problem-solution .card ul li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 10px;
            font-size: 1.05em;
            color: var(--text-subtle);
        }

        .problem-solution .card ul li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--accent-cyan);
            font-size: 1.2em;
            line-height: 1;
        }
        .problem-solution .card.solution ul li::before {
            color: var(--accent-purple);
        }


        /* Key Features */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .feature-card {
            background-color: var(--bg-primary);
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            border: 1px solid rgba(138,43,226,0.1);
            box-shadow: 0 0 25px rgba(138,43,226,0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, rgba(138,43,226,0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 0;
        }

        .feature-card:hover::before {
            opacity: 1;
            animation: rotate-glow 5s linear infinite;
        }

        @keyframes rotate-glow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 0 35px rgba(138,43,226,0.3);
        }

        .feature-card .icon {
            font-size: 3em;
            color: var(--accent-cyan);
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(0,240,255,0.5);
            position: relative;
            z-index: 1;
        }
        
        .feature-card h3 {
            font-size: 1.6em;
            margin-bottom: 15px;
            color: var(--accent-red);
            position: relative;
            z-index: 1;
        }

        .feature-card p {
            font-size: 1em;
            color: var(--text-subtle);
            position: relative;
            z-index: 1;
        }

        /* Core Components */
        .component-section {
            padding: 80px 0;
            text-align: center;
        }
        .component-section h2 {
            margin-bottom: 30px;
        }
        .component-section > p {
            margin-bottom: 60px;
        }

        .component-grid {
            display: flex;
            gap: 40px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .component-card {
            background: linear-gradient(145deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            border-radius: 15px;
            padding: 40px;
            flex: 1;
            min-width: 350px;
            max-width: 48%;
            border: 1px solid rgba(0,240,255,0.1);
            box-shadow: 0 5px 30px rgba(0,0,0,0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            text-align: left;
        }

        .component-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top right, rgba(0,240,255,0.15) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .component-card:nth-of-type(2)::after {
            background: radial-gradient(circle at bottom left, rgba(138,43,226,0.15) 0%, transparent 60%);
        }

        .component-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        }
        .component-card:hover::after {
            opacity: 1;
        }

        .component-card h3 {
            font-size: 2.2em;
            margin-bottom: 20px;
            background: linear-gradient(90deg, var(--accent-cyan), var(--text-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            z-index: 1;
        }
        .component-card:nth-of-type(2) h3 {
            background: linear-gradient(90deg, var(--accent-purple), var(--text-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .component-card p {
            font-size: 1.1em;
            margin-bottom: 25px;
            color: var(--text-subtle);
            position: relative;
            z-index: 1;
        }

        .component-card .code-block-inline {
            background-color: var(--code-bg);
            border-radius: 8px;
            padding: 20px;
            font-family: 'Roboto Mono', monospace;
            font-size: 0.9em;
            color: var(--accent-cyan);
            border: 1px solid rgba(0,240,255,0.2);
            position: relative;
            z-index: 1;
            white-space: pre-wrap; /* Allows line breaks in code */
            word-break: break-all;
        }
        .component-card:nth-of-type(2) .code-block-inline {
            color: var(--accent-purple);
            border: 1px solid rgba(138,43,226,0.2);
        }

        /* Getting Started */
        .get-started {
            text-align: center;
        }

        .code-block {
            background-color: var(--code-bg);
            border-radius: 10px;
            padding: 30px;
            margin: 40px auto 60px auto;
            max-width: 800px;
            text-align: left;
            overflow-x: auto;
            border: 2px solid var(--accent-cyan);
            box-shadow: 0 0 25px rgba(0,240,255,0.3);
            position: relative;
        }

        .code-block code {
            font-family: 'Roboto Mono', monospace;
            font-size: 1em;
            line-height: 1.6;
            color: var(--text-light);
        }

        /* Syntax Highlighting - Faux */
        .code-block .keyword { color: var(--accent-red); font-weight: bold; }
        .code-block .function { color: var(--accent-cyan); }
        .code-block .string { color: #A4F0B7; } /* Green */
        .code-block .comment { color: #6A6A70; font-style: italic; }
        .code-block .class { color: var(--accent-purple); font-weight: bold; }
        .code-block .variable { color: var(--text-subtle); }
        .code-block .number { color: #F0B7A4; } /* Orange */

        .code-block .line-numbers {
            opacity: 0.3;
            user-select: none;
            display: inline-block;
            margin-right: 15px;
            text-align: right;
            border-right: 1px solid rgba(255,255,255,0.1);
            padding-right: 15px;
            color: var(--text-subtle);
            font-size: 0.9em;
        }
        .code-block .code-lines {
            display: inline-block;
            vertical-align: top;
        }
        .code-block pre {
            display: flex;
        }
        .code-block pre code {
            flex-grow: 1;
        }

        /* Why Agentable */
        .why-agentable .reason-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .reason-card {
            background-color: var(--bg-primary);
            border-radius: 10px;
            padding: 30px;
            border: 1px solid rgba(138,43,226,0.1);
            box-shadow: 0 0 20px rgba(138,43,226,0.1);
            transition: all 0.3s ease;
            text-align: center;
        }

        .reason-card:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 0 30px rgba(138,43,226,0.25);
            border-color: var(--accent-purple);
        }

        .reason-card h3 {
            font-size: 1.8em;
            margin-bottom: 15px;
            color: var(--accent-purple);
        }

        .reason-card p {
            font-size: 1.05em;
            color: var(--text-subtle);
        }

        /* Call to Action Final */
        .cta-final {
            background: linear-gradient(45deg, var(--accent-red), #FF4500); /* Orange-red gradient */
            padding: 80px 0;
            text-align: center;
            border-top: 2px solid var(--accent-cyan);
        }
        .cta-final h2 {
            color: var(--text-light);
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
            -webkit-text-fill-color: var(--text-light); /* Override gradient for this specific h2 */
            background: none;
        }
        .cta-final p {
            font-size: 1.4em;
            max-width: 700px;
            margin: 0 auto 40px auto;
            color: var(--text-light);
            font-weight: 300;
        }

        /* Footer */
        .footer {
            background-color: #050508;
            color: var(--text-subtle);
            padding: 40px 0;
            text-align: center;
            font-size: 0.9em;
            border-top: 1px solid rgba(0,240,255,0.1);
        }

        .footer a {
            color: var(--accent-cyan);
            margin: 0 15px;
        }
        .footer a:hover {
            color: var(--accent-red);
        }
        .footer .social-icons {
            margin-top: 20px;
        }
        .footer .social-icons img {
            width: 28px;
            height: 28px;
            margin: 0 10px;
            filter: grayscale(100%) brightness(1.5);
            transition: filter 0.3s ease;
        }
        .footer .social-icons img:hover {
            filter: grayscale(0%) brightness(1);
        }

        /* Responsive Adjustments */
        @media (max-width: 1024px) {
            .container {
                padding: 30px 15px;
            }
            .hero h1 {
                font-size: 3.5em;
            }
            .hero p {
                font-size: 1.4em;
            }
            section h2 {
                font-size: 2.8em;
                margin-bottom: 40px;
            }
            .problem-solution .card {
                max-width: 100%;
            }
            .component-card {
                max-width: 100%;
            }
        }

        @media (max-width: 768px) {
            .hero {
                height: 100vh;
            }
            .hero h1 {
                font-size: 2.8em;
                letter-spacing: -1px;
            }
            .hero p {
                font-size: 1.2em;
            }
            .hero-cta-group {
                flex-direction: column;
                gap: 15px;
            }
            .btn {
                width: 80%;
                margin: 0 auto;
            }
            section {
                padding: 60px 0;
            }
            section h2 {
                font-size: 2.2em;
            }
            .problem-solution .content-grid, .component-grid, .features-grid, .why-agentable .reason-grid {
                flex-direction: column;
            }
            .component-card, .feature-card, .reason-card, .problem-solution .card {
                width: 100%;
            }
            .code-block {
                padding: 20px;
            }
        }
        @media (max-width: 480px) {
            .hero h1 {
                font-size: 2.2em;
            }
            .hero p {
                font-size: 1em;
            }
            .btn {
                width: 90%;
            }
            section h2 {
                font-size: 1.8em;
            }
            .problem-solution .card h3, .feature-card h3, .component-card h3, .reason-card h3 {
                font-size: 1.5em;
            }
            .component-card .code-block-inline {
                font-size: 0.8em;
            }
            .code-block code {
                font-size: 0.8em;
            }
        }

    </style>
</head>
<body>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-background"></div>
        <div class="hero-content">
            <h1>AGENTABLE<br> Orchestrate Smarter LLM Agents.</h1>
            <p>Unleash the full potential of your AI agents with seamless, persistent memory and state management. Built for resilience, designed for clarity.</p>
            <div class="hero-cta-group">
                <a href="https://github.com/mikehenken/agentable#getting-started" target="_blank" class="btn btn-primary">Get Started Instantly</a>
                <a href="#explore-features" class="btn btn-secondary">Explore The Core</a>
            </div>
        </div>
        <div class="scroll-indicator">
            Scroll to Discover
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21l-8-9h5V3h6v9h5l-8 9z"/></svg>
        </div>
    </section>

    <!-- The Challenge & The Solution -->
    <section class="problem-solution">
        <div class="container">
            <h2>The Forgetting Frontier: Why Agents Struggle</h2>
            <p>Building truly intelligent and long-running LLM agents often hits a wall. Without robust memory and state management, agents are confined to short, stateless interactions, losing context and consistency.</p>
            
            <div class="content-grid">
                <div class="card problem">
                    <h3>The Pain Points</h3>
                    <ul>
                        <li><strong>Context Loss:</strong> Agents forget previous interactions, leading to repetitive or illogical responses.</li>
                        <li><strong>Stateless Operation:</strong> Every interaction is a new start, making complex, multi-turn conversations impossible.</li>
                        <li><strong>Scalability Nightmare:</strong> Manually managing agent data across sessions or users is prone to errors and bottlenecks.</li>
                        <li><strong>Developer Overhead:</strong> Re-implementing memory and state for every agent drains valuable development time.</li>
                        <li><strong>Reliability Concerns:</strong> System crashes or restarts mean lost progress and frustrated users.</li>
                    </ul>
                </div<!--
                --><div class="card solution">
                    <h3>Agentable: The Persistent Solution</h3>
                    <ul>
                        <li><strong>Infinite Memory:</strong> Agents remember everything, from specific messages to overall conversation flow.</li>
                        <li><strong>Dynamic State:</strong> Maintain and evolve internal variables, environment settings, and agent persona effortlessly.</li>
                        <li><strong>Built-in Persistence:</strong> Data is automatically saved and restored, ensuring continuity across sessions.</li>
                        <li><strong>Simplified Development:</9strong> Focus on agent logic, not boilerplate data management.</li>
                        <li><strong>Framework Agnostic:</strong> Designed to integrate smoothly with LangChain, LlamaIndex, or your custom LLM stack.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Key Features -->
    <section id="explore-features">
        <div class="container">
            <h2>Beyond Simple Chats: What Agentable Delivers</h2>
            <p>Agentable isn't just about storing data; it's about empowering your agents with true awareness and the ability to operate across complex, multi-stage interactions.</p>

            <div class="features-grid">
                <div class="feature-card">
                    <div class="icon">🧠</div>
                    <h3>Intelligent Memory</h3>
                    <p>Structured storage for conversational history, scratchpad notes, and episodic memories. Agents learn and adapt over time.</p>
                </div>
                <div class="feature-card">
                    <div class="icon">⚙️</div>
                    <h3>Robust State Management</h3>
                    <p>Define and manage agent variables, environmental parameters, and internal flags. Keep your agents consistent and contextually aware.</p>
                </div>
                <div class="feature-card">
                    <div class="icon">💾</div>
                    <h3>Automatic Persistence</h3>
                    <p>Leverage SQLAlchemy for seamless database integration. All agent memory and state are automatically saved and restored.</p>
                </div>
                <div class="feature-card">
                    <div class="icon">✨</div>
                    <h3>Pythonic Simplicity</h3>
                    <p>A clean, intuitive API designed for Python developers. Integrate with just a few lines of code, focusing on agent logic.</p>
                </div>
                <div class="feature-card">
                    <div class="icon">🔗</div>
                    <h3>Framework Compatibility</h3>
                    <p>Designed with common LLM frameworks like LangChain in mind, Agentable is easily adaptable to your existing projects.</p>
                </div>
                <div class="feature-card">
                    <div class="icon">🔒</div>
                    <h3>Reliable & Scalable</h3>
                    <p>Built on proven technologies, Agentable provides a solid foundation for deploying production-grade, multi-user LLM applications.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Core Components -->
    <section class="component-section">
        <div class="container">
            <h2>Anatomy of an Intelligent Agent</h2>
            <p>Agentable provides two core, highly flexible components that work in harmony to give your LLM agents true persistence and context.</p>

            <div class="component-grid">
                <div class="component-card">
                    <h3>The AgentMemory</h3>
                    <p>The ultimate recall system for your agents. <code>AgentMemory</code> stores every interaction, thought, and observation, allowing your agents to build rich, long-term context over countless sessions.</p>
                    <div class="code-block-inline">
                        <span class="keyword">from</span> agentable <span class="keyword">import</span> AgentMemory<br><br>
                        memory = <span class="class">AgentMemory</span>(agent_id=<span class="string">"user123"</span>)<br>
                        memory.add_message(<span class="string">"user"</span>, <span class="string">"Hello, who are you?"</span>)<br>
                        memory.add_scratchpad_note(<span class="string">"Planning response..."</span>)<br>
                        <span class="comment"># ... and it's all saved!</span>
                    </div>
                </div><!--
                --><div class="component-card">
                    <h3>The AgentState</h3>
                    <p>The agent's dynamic environment. <code>AgentState</code> holds all the critical variables, parameters, and environmental data that define an agent's current situation and capabilities, ensuring consistent behavior.</p>
                    <div class="code-block-inline">
                        <span class="keyword">from</span> agentable <span class="keyword">import</span> AgentState<br><br>
                        state = <span class="class">AgentState</span>(agent_id=<span class="string">"user123"</span>)<br>
                        state.set(<span class="string">"user_name"</span>, <span class="string">"Alice"</span>)<br>
                        state.set(<span class="string">"tool_access"</span>, <span class="keyword">True</span>)<br>
                        <span class="comment"># ... ready for the next interaction!</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Agentable Stands Apart -->
    <section class="why-agentable">
        <div class="container">
            <h2>Why Choose Agentable?</h2>
            <p>In a rapidly evolving AI landscape, Agentable offers the foundational robustness and simplicity developers need to build truly next-generation LLM applications.</p>

            <div class="reason-grid">
                <div class="reason-card">
                    <h3>Developer-First Design</h3>
                    <p>Intuitive API, clear documentation, and minimal boilerplate code let you focus on what matters: your agent's intelligence.</p>
                </div>
                <div class="reason-card">
                    <h3>Seamless Persistence</h3>
                    <p>Forget manual serialization. Agentable automatically handles saving and loading, powered by the battle-tested SQLAlchemy.</p>
                </div>
                <div class="reason-card">
                    <h3>Open-Source Power</h3>
                    <p>Benefit from community contributions, transparent development, and the flexibility to adapt it to your unique needs.</p>
                </div>
                <div class="reason-card">
                    <h3>Future-Proof Foundation</h3>
                    <p>Designed for extensibility, Agentable provides a solid base that can evolve with your agent's growing complexity and new LLM paradigms.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="get-started">
        <div class="container">
            <h2>Your Journey Starts Here.</h2>
            <p>Ready to build more intelligent, persistent LLM agents? Get Agentable up and running in minutes.</p>

            <div class="code-block">
                <pre>
                    <div class="line-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br></div><code class="code-lines">
<span class="comment"># 1. Install Agentable</span>
<span class="function">pip</span> <span class="function">install</span> agentable <span class="comment"># or pip install "agentable[sqlite]" for SQLite support</span>

<span class="comment"># 2. Basic Usage Example (Python)</span>
<span class="keyword">from</span> agentable <span class="keyword">import</span> AgentMemory, AgentState, create_session_factory
<span class="keyword">from</span> sqlalchemy <span class="keyword">import</span> create_engine

<span class="comment"># Configure your database (e.g., SQLite for simplicity)</span>
engine = <span class="function">create_engine</span>(<span class="string">"sqlite:///./agent_data.db"</span>)
<span class="comment"># Create a session factory for Agentable</span>
SessionFactory = <span class="function">create_session_factory</span>(engine)

<span class="comment"># Define a unique ID for your agent instance/user</span>
agent_id = <span class="string">"my_first_agent"</span>

<span class="comment"># Initialize AgentMemory and AgentState with a session</span>
<span class="keyword">with</span> SessionFactory() <span class="keyword">as</span> session:
    memory = <span class="class">AgentMemory</span>(<span class="variable">agent_id</span>=<span class="variable">agent_id</span>, session=<span class="variable">session</span>)
    state = <span class="class">AgentState</span>(<span class="variable">agent_id</span>=<span class="variable">agent_id</span>, session=<span class="variable">session</span>)

    <span class="comment"># Add to memory</span>
    memory.add_message(<span class="string">"user"</span>, <span class="string">"What is the capital of France?"</span>)
    memory.add_scratchpad_note(<span class="string">"User asked about geography."</span>)

    <span class="comment"># Update state</span>
    state.set(<span class="string">"topic"</span>, <span class="string">"geography"</span>)
    state.increment(<span class="string">"query_count"</span>)

    <span class="comment"># Retrieve data</span>
    <span class="function">print</span>(<span class="string">"Latest message:"</span>, memory.get_latest_message().content)
    <span class="function">print</span>(<span class="string">"Current topic:"</span>, state.get(<span class="string">"topic"</span>))

    <span class="comment"># All changes are automatically committed at the end of the 'with' block!</span>
                    </code>
                </pre>
            </div>

            <div class="hero-cta-group">
                <a href="https://github.com/mikehenken/agentable#documentation" target="_blank" class="btn btn-primary">Read The Full Docs</a>
                <a href="https://github.com/mikehenken/agentable" target="_blank" class="btn btn-secondary">View on GitHub</a>
            </div>
        </div>
    </section>

    <!-- Final Call to Action -->
    <section class="cta-final">
        <div class="container">
            <h2>Join The Agentable Revolution.</h2>
            <p>Elevate your LLM agents from transient chatbots to truly intelligent, context-aware entities. The future of AI agent orchestration is here.</p>
            <a href="https://github.com/mikehenken/agentable#getting-started" target="_blank" class="btn btn-secondary">Start Building Today</a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 Agentable. All rights reserved.</p>
            <p>
                <a href="https://github.com/mikehenken/agentable#license" target="_blank">License</a> |
                <a href="https://github.com/mikehenken/agentable#contributing" target="_blank">Contribute</a> |
                <a href="https://github.com/mikehenken/agentable/issues" target="_blank">Report an Issue</a>
            </p>
            <div class="social-icons">
                <a href="https://github.com/mikehenken/agentable" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/GitHub_Invertocat_Logo.svg/1000px-GitHub_Invertocat_Logo.svg.png" alt="GitHub"></a>
                <!-- Add other social links if desired, e.g., Twitter, LinkedIn -->
            </div>
        </div>
    </footer>

</body>
</html>
--- ### **Explanation of Design Choices & "Netflix Aesthetic" Implementation:** 1. **Dark, Immersive Backgrounds:** * The `body` uses a deep charcoal (`--bg-primary`). * Sections alternate with a slightly lighter charcoal (`--bg-secondary`) to create visual breaks without losing the dark theme. * The Hero section features a `hero-background` with radial and linear gradients, along with a subtle SVG background image that mimics data streams and neural pathways, giving it a high-tech, abstract, and dynamic feel. Keyframe animations (`pulse-glow`) add subtle movement. 2. **Vibrant Accent Colors:** * **Netflix Red (`--accent-red`):** Used primarily for the strong call-to-action buttons (e.g., "Get Started Instantly"), giving them a prominent, urgent feel. It's used sparingly to maximize impact. * **Electric Cyan (`--accent-cyan`):** Employed for secondary CTAs, icons, links, and code highlighting. This cool tone contrasts beautifully with the deep backgrounds and offers a "digital" glow. * **Amethyst Purple (`--accent-purple`):** Used in gradients for headings and some background effects, adding depth and a futuristic, sophisticated touch. 3. **Bold, Crisp Typography:** * **Montserrat:** Chosen for all headings for its modern, geometric, and strong presence, echoing the confidence often seen in Netflix titles. * **Lato:** A highly readable sans-serif for body text, ensuring that even with the verbose content, it's easy on the eyes. * **Roboto Mono:** Essential for code blocks, maintaining clarity and a professional developer feel. * **Text Gradients & Shadows:** Headings use `linear-gradient` and `-webkit-background-clip: text` to make them glow and stand out, a premium touch often seen in high-end interfaces. Text shadows enhance this effect. 4. **Structured, Content-Focused Layouts:** * **`container`:** Keeps content within a readable width, common in content-heavy platforms. * **Grids & Flexbox:** Used extensively for responsive layouts (`features-grid`, `component-grid`, `reason-grid`, `content-grid`), allowing for clear organization of information. * **Cards:** Features, components, and problem/solution points are encapsulated in cards with subtle borders and box-shadows that lift them off the dark background, making them feel like distinct "episodes" or "features" to explore. Hover effects add interactivity. 5. **Interactive Elements & Micro-Animations:** * **Button Animations:** `pulse-btn` for the primary CTA makes it feel alive and invites interaction. Hover effects add a slight lift and stronger shadow. * **Card Hover Effects:** Subtle `transform: translateY` and `box-shadow` changes on hover give a sense of depth and responsiveness. * **Feature Card Glow (`::before` pseud-element with `radial-gradient` and `rotate-glow` animation):** Adds a dynamic, internal glow to feature cards on hover, suggesting advanced tech. * **Scroll Indicator (`bounce-arrow`):** A subtle animation at the bottom of the hero visually prompts users to scroll down, guiding them through the content, similar to Netflix's "scroll for more" interaction. 6. **"Verbose" & Informative Content Strategy:** * Each section is designed to tell a part of Agentable's story, from identifying the core problem (`The Forgetting Frontier`) to presenting the solution (`Agentable: The Persistent Solution`), detailing its capabilities (`Beyond Simple Chats`), and guiding users to get started (`Your Journey Starts Here`). * **Problem/Solution Section:** Explicitly lists pain points and how Agentable addresses them, structured for easy comparison. * **Key Features:** Uses impactful icons and concise descriptions to highlight benefits. * **Core Components:** Dedicated cards for `AgentMemory` and `AgentState`, explaining their role with illustrative (though simplified) code snippets. * **Code Blocks:** Presented in a clean, scrollable dark box with faux syntax highlighting and line numbers for a truly developer-friendly experience. * **Why Choose Agentable:** Reinforces unique selling points. 7. **Narrative Flow:** * The page is structured to take the user on a journey: *Problem* → *Solution Overview* → *Detailed Features* → *How it Works (Components)* → *Why it's Better* → *Call to Action (Get Started)*. This mimics how a narrative unfolds, keeping the user engaged. This comprehensive approach leverages visual flair, clear structure, and detailed content to create a high-quality, engaging landing page that not only informs but also excites developers about the potential of `agentable`, all while resonating with that distinctive Netflix aesthetic.