use leptos::*;
/// Renders the home page of your application.
#[component]
pub fn HomePage() -> impl IntoView {
    // Creates a reactive value to update the button
    view! {
        <div class="row margin-y-4 justify-center">
            <img src="assets/sreez_transparent_bg.png"  alt="SREEZ mascot. Yes it is text-to-image generated by GPT4/DALL·E" class="max-width-400 margin-x-3"/>
            <div class="margin-x-3 text-left column justify-center">
                <h1>"SREEZ"
                    <br/>
                    <span class="font-size-xl color-gray">"Site Reliability Engineering for Everyone, eZ"</span>
                </h1>
                <h2 class="font-size-3xl">
                    <span>"Stay focused"</span><br/>
                    <span>"on your features,"</span><br/>
                    <span>"we take care"</span><br/>
                    <span>"of the infrastructure."</span>
                </h2>
            </div>
        </div>
        <div class="row card-list">
            <div class="card">
                <h3>"24/7 support"</h3>
                <ul>
                    <li>"We make sure your infrastructure is running, all the time"</li>
                    <li>"We won't wake you up unless there is a bug in your code"</li>
                    <li>"Full post-mortem and reactive measures taken so it won't happen again"</li>
                </ul>
            </div>
            <div class="card">
                <h3>"Batteries included"</h3>
                <ul>
                    <li>"Managed Orchestrator : RedHat OpenShift Community (OKD) cluster"</li>
                    <li>"Marketplace : Easily install hundreds of apps, databases, productivity tools at no additional cost"</li>
                    <li>"CI/CD Pipeline : Source Control, Continuous Integration, Test Automation, Static Analysis, Continuous Delivery"</li>
                    <li>"AI Tools : Open source LLMs, Model Management and Deployment, Jupyter Notebooks, NVidia GPUs"</li>
                </ul>
            </div>
            <div class="card">
                <h3>"Free as a byte"</h3>
                <ul>
                    <li>"No vendor lock-in, only open source tools"</li>
                    <li>"Install any software based on your specific needs only"</li>
                    <li>"Run anywhere : NationTech Network, Bare Metal, Virtual Machines, Public Cloud, Private Cloud"</li>
                </ul>
            </div>
        </div>
        <p>"And much more, just "<a href="mailto:sreez@nationtech.io">"ask us!"</a></p>
        <h2>"How it works"</h2>
        <div class="md-container text-left">
        <ol class="huge-list-markers">
            <li><h3 class="text-3x">"Fork a template repo"</h3></li>
            <li><h3 class="text-3x">"Create an account"</h3></li>
            <li><h3 class="text-3x">"Push a modification"</h3></li>
            <li><h3 class="text-3x">"Enjoy life in production"</h3></li>
        </ol>
        </div>
        <div class="row card-list">
            <div class="card">
                <h3 class="border-bottom-4">"Base package - Self Managed"</h3>
                <ul class="text-left">
                    <li>"1 Kubernetes namespace - Auto-Healing, Auto-Scaling, Fully Managed"</li>
                    <li>"Kubeapps dashboard - install hundreds of applications and databases in 1 click"</li>
                    <li>"Argo-CD"</li>
                    <li>"Gitea"</li>
                    <li>"Jenkins"</li>
                    <li>"Prometheus"</li>
                    <li>"Grafana"</li>
                    <li>"64 GB RAM"</li>
                    <li>"32 CPU Cores"</li>
                    <li>"2 TB General Purpose Distributed Storage"</li>
                </ul>
                <div class="spacer"></div>
                <p class="font-bold text-center text-4">"1 055 CAD / Month"</p>
                <p class="font-bold text-center text-4">"10 555 CAD / Year"</p>
            </div>
            <div class="card">
                <h3 class="border-bottom-4">"Startup Package - SRE as a Service"</h3>
                <ul class="text-left">
                    <li>"Everything in lower package, plus"</li>
                    <li>"Unlimited Kubernetes namespaces - Auto-Healing, Auto-Scaling, Fully Managed"</li>
                    <li>"Kubeflow"</li>
                    <li>"OpenLLM - LLaMa, Mistral, StarCoder and more open source models to tune and run privately"</li>
                    <li>"1 AI GPU with 24GB+ VRAM"</li>
                    <li>"256 GB RAM"</li>
                    <li>"96 CPU Cores"</li>
                    <li>"10 TB General Purpose Distributed Storage"</li>
                    <li>"2 hours per month complimentary consulting with our SRE team"</li>
                    <li>"Access to direct messaging with 4 hour SLA 24/7"</li>
                </ul>
                <div class="spacer"></div>
                <p class="margin-x-1">"For those who have modest needs but want to benefit from the best SRE tools and teams in the industry"</p>
                <p class="font-bold text-center text-4">"5 555 CAD / Month"</p>
                <p class="font-bold text-center text-4">"55 555 CAD / Year"</p>
            </div>
            <div class="card">
                <h3 class="border-bottom-4">"Top Package - Dedicated Cluster"</h3>
                <ul class="text-left">
                    <li>"Everything in lower package, plus"</li>
                    <li>"2 Dedicated OKD (OpenShift Community) Clusters"</li>
                    <li>"Distributed in two geographical sites of your choice"</li>
                    <li>"4 days per month SRE development and improvement on your stack"</li>
                    <li>"4 AI GPUs with 24GB+ VRAM"</li>
                    <li>"4 000 GB RAM"</li>
                    <li>"500 CPU Cores"</li>
                    <li>"1 200 TB General Purpose Distributed Storage"</li>
                </ul>
                <div class="spacer"></div>
                <p class="margin-x-1">"We can customize our offering around this base package. Let us know what you need."</p>
                <p class="margin-x-1">"We can deliver, fast : 2 clusters available within 3 days."</p>
                <p class="margin-x-1">"1 month lead time for more clusters."</p>
                <p class="font-bold text-center text-4">"55 555 CAD / Month"</p>
                <p class="font-bold text-center text-4">"555 555 CAD / Year"</p>
            </div>
        </div>
    }
}