Untitled

async fn home(templ: Template) -> Markup {
    templ
        .render(Padded(html! {
            // Main container
            div.flex.flex-col style="min-height: 100vh; padding: 2rem;" {
                // Header Section
                div.text-center style="margin: 3rem 0;" {
                    h1 style="font-size: 3.75rem; font-weight: bold;" {
                        span style="font-weight: 900; color: #3B82F6;" { "A" }
                        "gent-based "
                        span style="font-weight: 900; color: #3B82F6;" { "D" }
                        "evice "
                        span style="font-weight: 900; color: #3B82F6;" { "A" }
                        "udit "
                        span style="font-weight: 900; color: #3B82F6;" { "M" }
                        "onitor"
                    }
                    div style="font-size: 1.25rem; margin-top: 1rem;" {
                        p { "Understand your Resources and Optimize" }
                        p { "using some, or all plugins" }
                    }
                }

                // Main content grid
                div style="display: flex; gap: 2rem;" {
                    // Left sidebar - Tools and Environment
                    div style="width: 25%; display: flex; flex-direction: column; gap: 1.5rem;" {
                        // Tools section
                        div style="background-color: #1F2937; border-radius: 0.5rem; padding: 1.5rem;" {
                            h2 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem;" { "Your tools / data" }
                            div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;" {
                                // Database tool
                                div style="background-color: #374151; border-radius: 0.5rem; padding: 0.75rem; text-align: center;" {
                                    svg style="width: 2rem; height: 2rem; margin: 0 auto 0.5rem auto;" viewBox="0 0 24 24" {
                                        path d="M4 18V6C4 4.89543 5.79086 4 8 4H16C18.2091 4 20 4.89543 20 6V18C20 19.1046 18.2091 20 16 20H8C5.79086 20 4 19.1046 4 18Z" fill="currentColor";
                                    }
                                    span { "Data" }
                                }
                                // Server tool
                                div style="background-color: #374151; border-radius: 0.5rem; padding: 0.75rem; text-align: center;" {
                                    svg style="width: 2rem; height: 2rem; margin: 0 auto 0.5rem auto;" viewBox="0 0 24 24" {
                                        path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" fill="currentColor";
                                    }
                                    span { "Server" }
                                }
                            }
                        }

                        // Environment section
                        div style="background-color: #1F2937; border-radius: 0.5rem; padding: 1.5rem;" {
                            h2 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem;" { "Your environment" }
                            p { "Applications and infrastructure" }
                            div style="margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem;" {
                                div style="display: flex; align-items: center; padding: 0.5rem; background-color: #374151; border-radius: 0.5rem;" {
                                    svg style="width: 1.5rem; height: 1.5rem; margin-right: 0.5rem;" viewBox="0 0 24 24" {
                                        path d="M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z" fill="currentColor";
                                    }
                                    span { "Infrastructure" }
                                }
                                div style="display: flex; align-items: center; padding: 0.5rem; background-color: #374151; border-radius: 0.5rem;" {
                                    svg style="width: 1.5rem; height: 1.5rem; margin-right: 0.5rem;" viewBox="0 0 24 24" {
                                        path d="M13 2l10 6v8l-10 6L3 16V8l10-6z" fill="currentColor";
                                    }
                                    span { "Applications" }
                                }
                            }
                        }
                    }

                    // Right content area
                    div style="width: 75%; display: flex; flex-direction: column; gap: 1.5rem;" {
                        // eBPF Visualization
                        div style="background-color: #1F2937; border-radius: 0.5rem; padding: 1.5rem;" {
                            h2 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem;" { "eBPF System Overview" }
                            div style="background-color: #374151; border-radius: 0.5rem; padding: 1rem;" {
                                svg style="width: 100%; height: 16rem;" viewBox="0 0 800 300" {
                                    // Background
                                    rect x="50" y="50" width="700" height="300" style="fill: #1e293b; rx: 8;" {};

                                    // User Space
                                    rect x="100" y="40" width="600" height="80" style="fill: #374151; rx: 4;" {};
                                    text x="150" y="85" style="fill: white; font-size: 16px;" { "User Space Applications" }

                                    // eBPF Programs
                                    rect x="100" y="140" width="600" height="80" style="fill: #1d4ed8; rx: 4;" {};
                                    text x="150" y="185" style="fill: white; font-size: 16px;" { "eBPF Programs" }

                                    // Kernel Space
                                    rect x="100" y="240" width="600" height="40" style="fill: #064e3b; rx: 4;" {};
                                    text x="150" y="265" style="fill: white; font-size: 16px;" { "Kernel Space" }

                                    // Connecting Lines
                                    path d="M400 120 L400 140" style="stroke: white; stroke-width: 2;" {};
                                    path d="M400 220 L400 240" style="stroke: white; stroke-width: 2;" {};
                                }
                            }
                        }

                        // Feature boxes grid
                        div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;" {
                            div style="background-color: #9B7EDE; border-radius: 0.5rem; padding: 1.5rem; text-align: center;" {
                                h3 style="font-size: 1.125rem; font-weight: 600;" { "Testing" }
                                p style="font-size: 0.875rem; margin-top: 0.5rem;" { "Comprehensive testing tools" }
                            }
                            div style="background-color: #5B9BD5; border-radius: 0.5rem; padding: 1.5rem; text-align: center;" {
                                h3 style="font-size: 1.125rem; font-weight: 600;" { "Observability solutions" }
                                p style="font-size: 0.875rem; margin-top: 0.5rem;" { "Monitor and analyze" }
                            }
                            div style="background-color: #68B37E; border-radius: 0.5rem; padding: 1.5rem; text-align: center;" {
                                h3 style="font-size: 1.125rem; font-weight: 600;" { "Incident response" }
                                p style="font-size: 0.875rem; margin-top: 0.5rem;" { "Quick resolution" }
                            }
                        }
                    }
                }
            }
        }))
        .await
}