use leptos::*;
/// Renders the home page of your application.
#[component]
pub fn InitialOffer() -> impl IntoView {
    view! {
        <div class="row wrap margin-y-4 justify-center">
            <div class="margin-x-3 text-left column justify-center">
                <h1 class="text-3x">"Site Reliability Engineering for Everyone, eZ : SREEZ"
                    <br/>
                    <span class="font-xl color-gray line-1">"Site Reliability Engineering for Everyone, eZ"</span>
                </h1>
                <h2 class="font-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>
            <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>
        <div class="text-center margin-y-25vh">
            <p class="text-3x font-bold max-width-900 margin-x-auto">"Imagine a world where your startup's infrastructure is as resilient as the biggest tech giants', but without the overhead."</p>
            <p class="text-3x font-bold max-width-900 margin-x-auto">"Welcome to SREEZ, where we make that dream a reality"</p>
        </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 : Kubernetes with monitoring, alterting, virtual machines, dashboard and more"</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>"Run anywhere : NationTech Network, Bare Metal, Virtual Machines, Public Cloud, Private Cloud"</li>
                    <li>"No vendor lock-in, only open source tools"</li>
                    <li>"Install any software based on your specific needs only"</li>
                </ul>
            </div>
        </div>
        <p>"And much more, just "</p>
        <a href="mailto:sreez@nationtech.io?subject=SREEZ: I want to know more" target="_blank" ><button class="btn btn-dark">"Ask us"</button></a>

        <div class="row card-list">
            <div class="card">
                <h3 class="border-bottom-4 height-110">"Bootstrap Package - Integrate, deliver, monitor"</h3>
                <p class="font-bold text-center ">"1 055 CAD / Month"</p>
                <p class="font-bold text-center ">"10 555 CAD / Year"</p>
                <p class="font-bold text-center">"Coming soon"</p>
                <p class="font-bold text-center">
                    <a target="_blank" href="mailto:sreez@nationtech.io?subject=SREEZ Bootstrap Package&body=I am interested in SREEZ Bootstrap Package">"Subscribe to waitlist"</a>
                </p>
                <ul class="text-left">
                    <li>"Dedicated 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>
            <div class="card">
                <h3 class="border-bottom-4 height-110">"Startup Package - SRE as a Service"</h3>
                <p class="font-bold text-center ">"5 555 CAD / Month"</p>
                <p class="font-bold text-center ">"55 555 CAD / Year"</p>
                <p class="font-bold text-center">"5 available "</p>
                <p class="font-bold text-center">
                    <a target="_blank" href="mailto:sreez@nationtech.io?subject=SREEZ Startup Package&body=I am interested in SREEZ Startup Package">"Get it now"</a>
                </p>
                <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>
                <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>
            </div>
            <div class="card">
                <h3 class="border-bottom-4 height-110">"Top Package - Dedicated Cluster"</h3>
                <p class="font-bold text-center">"55 555 CAD / Month"</p>
                <p class="font-bold text-center">"555 555 CAD / Year"</p>
                <p class="font-bold text-center">"1 available "</p>
                <p class="font-bold text-center">
                    <a target="_blank" href="mailto:sreez@nationtech.io?subject=SREEZ Top package&body=I am interested in SREEZ Top Package">"Get it now"</a>
                </p>
                <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>
                <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>
            </div>
        </div>
        <div class="margin-y-25vh">
            <h2>"Not ready to make a move yet but want to improve your infrastructure"</h2>
            <p>
                <a target="_blank" href="mailto:sreez@nationtech.io?subject=Mailing list subscription&body=I want to get SREEZ news">"Subscribe to our mailing list"</a>
                " for SRE advice and events"
            </p>
        </div>
        <h2>"How it works"</h2>
        <div class="md-container text-left">
        <ul class="list-style-none">
            <li><h3 class="text-2x">"Call the CLI and generate a project from a template"</h3>
            <ul>
                <li>"Rust front-end"</li>
                <li>"Rust REST API"</li>
                <li>"Rust gRPC"</li>
                <li>"Rust simple binary"</li>
                <li>"Python uvicorn backend"</li>
                <li>"React + Node SSR"</li>
                <li>"Vue + Node SSR"</li>
                <li>"PyTorch model"</li>
                <li>"Tensorflow model"</li>
                <li>"Burn model"</li>
            </ul>
            </li>
            <li><h3 class="text-2x">"Create an account"</h3>
            </li>
            <li><h3 class="text-2x">"Push a modification"</h3>
            </li>
            <li><h3 class="text-2x">"Enjoy life in production"</h3>
            </li>
        </ul>
        </div>
    }
}
