lume/blog: alvis post

Signed-off-by: Xe Iaso <me@xeiaso.net>

1 files changed, 478 insertions, 0 deletions

diff --git a/lume/src/landing/alvis.jsx b/lume/src/landing/alvis.jsx
new file mode 100644
index 0000000..bdb2405
--- /dev/null
+++ b/lume/src/landing/alvis.jsx
@@ -0,0 +1,478 @@
+import BrandGithub from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/brand-github.tsx";
+import LemonIcon from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/lemon-2.tsx";
+import CheckIcon from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/check.tsx"
+import IconChevronRight from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/chevron-right.tsx";
+import IconAlarm from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/alarm.tsx";
+import IconZZZ from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/zzz.tsx"
+import IconArmchair from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/armchair.tsx";
+
+export const layout = "bare.njk";
+export const title = "Alvis - Never get paged again";
+
+export const Header = ({ active }) => {
+  const menus = [
+    { name: "Home", href: "/" },
+    { name: "Blog", href: "/blog/" },
+    { name: "Contact", href: "/contact/" },
+    { name: "Resume", href: "/resume/" },
+    { name: "Talks", href: "/talks/" },
+    { name: "VODs", href: "/vods/" },
+  ];
+
+  return (
+    <div className="bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-100 mb-4 w-full max-w-screen-lg py-6 px-8 flex flex-col md:flex-row gap-4">
+      <div className="flex items-center flex-1">
+        <LemonIcon className="inline-block" aria-hidden="true" />
+        <div className="text-2xl ml-1 font-bold">
+          Alvis
+        </div>
+      </div>
+      <ul className="flex items-center gap-6">
+        {menus.map((menu) => (
+          <li>
+            <a
+              href={menu.href}
+              className={menu.href === active ? " font-bold border-b-2" : ""}
+            >
+              {menu.name}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export const Footer = () => {
+  const menus = [
+    {
+      title: "Documentation",
+      children: [
+        { name: "Getting Started", href: "#" },
+        { name: "Guide", href: "#" },
+        { name: "API", href: "#" },
+        { name: "Showcase", href: "#" },
+        { name: "Pricing", href: "/blog/alvis/" },
+      ],
+    },
+    {
+      title: "Community",
+      children: [
+        { name: "Forum", href: "#" },
+        { name: "Discord", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <div class="bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-100 mt-4 flex flex-col md:flex-row w-full max-w-screen-lg gap-8 md:gap-16 px-8 py-8 text-sm">
+      <div class="flex-1">
+        <div class="flex items-center gap-1">
+          <LemonIcon class="inline-block" aria-hidden="true" />
+          <div class="font-bold text-2xl">
+            Alvis
+          </div>
+        </div>
+        <div class="text-gray-500">
+          Give ChatGPT root in prod. What could possibly go wrong?
+        </div>
+      </div>
+
+      {menus.map((item) => (
+        <div class="mb-4" key={item.title}>
+          <div class="font-bold">{item.title}</div>
+          <ul class="mt-2">
+            {item.children.map((child) => (
+              <li class="mt-2" key={child.name}>
+                <a href={child.href}>
+                  {child.name}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+
+      <div class="text-gray-500 space-y-2">
+        <div class="text-xs">
+          Copyright 2023 Xeserv.<br />
+          All rights reserved.
+        </div>
+
+        <a
+          href="https://github.com/Xe"
+          class="inline-block hover:text-black"
+          aria-label="GitHub"
+        >
+          <BrandGithub aria-hidden="true" />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export const Hero = () => {
+  return (
+    <div
+      class="w-full my-8 py-8 flex px-8 py-10 min-h-[24em] justify-center items-center flex-col gap-8 bg-cover bg-center bg-no-repeat bg-slate-50 rounded-xl text-white"
+      style="background-image:linear-gradient(rgba(0, 0, 40, 0.8),rgba(0, 0, 40, 0.8)), url('https://cdn.xeiaso.net/file/christine-static/hero/basketball.jpg');"
+    >
+      <div class="space-y-4 text-center">
+        <h1 class="text-3xl inline-block font-bold">Alvis</h1>
+        <p class="text-xl max-w-lg text-blue-100">
+          Don't worry about being paged, Alvis will take care of it.
+        </p>
+      </div>
+
+      <div class="flex flex-col md:flex-row items-center">
+        <a
+          href="/blog/alvis/"
+          class="block mt-4 text-blue-600 visited:text-blue-600 cursor-pointer inline-flex items-center group text-blue-800 bg-white px-8 py-2 rounded-md hover:bg-blue-50 font-bold"
+        >
+          Get started{" "}
+        </a>
+        <a
+          href="/blog/alvis/"
+          class="block mt-4 transition-colors text-blue-400 visited:text-blue-400 cursor-pointer inline-flex items-center group px-4 py-2 hover:text-blue-100"
+        >
+          Learn more{" "}
+          <IconChevronRight
+            class="inline-block w-5 h-5 transition group-hover:translate-x-0.5"
+            aria-hidden="true"
+          />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export const Features = () => {
+  const featureItems = [
+    {
+      icon: IconAlarm,
+      description:
+        "Automatically respond to production incidents with our industry-leading AI. Alvis will diagnose the problem and fix it.",
+      link: "#",
+    },
+    {
+      icon: IconZZZ,
+      description:
+        "Leave yourself free to sleep, write, work on projects, relax, or spend time with your family. Alvis will take care of it.",
+    },
+    {
+      icon: IconArmchair,
+      description: "Get a detailed report for every incident Alvis handles. This helps you understand what went wrong and how to fix it.",
+      link: "/landing/alvis/P0001/",
+    },
+  ];
+
+  return (
+    <div class="flex my-8 flex-col md:flex-row gap-8 p-8">
+      {featureItems.map((item) => {
+        return (
+          <div class="flex-1 space-y-2">
+            <div class="bg-blue-600 inline-block p-3 rounded-xl text-white">
+              <item.icon class="w-10 h-10" aria-hidden="true" />
+            </div>
+            <p class="text-xl">
+              {item.description}
+            </p>
+
+            {item.link &&
+              (
+                <a class="block" href={item.link}>
+                  <p class="text-blue-600 cursor-pointer hover:underline inline-flex items-center group">
+                    Read More{" "}
+                    <IconChevronRight
+                      class="inline-block w-5 h-5 transition group-hover:translate-x-0.5"
+                      aria-hidden="true"
+                    />
+                  </p>
+                </a>
+              )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export const Testimonials = () => {
+  const testimonials = [
+    {
+      name: "James Dornick",
+      position: "Lead SRE @ WritePulse",
+      color: "bg-[#9d789b]",
+      avatar: "https://cdn.xeiaso.net/avatar/d69caff2a9fd74b7069be6ece1a06ac5",
+      quote: "Honestly, I wasn't able to spend time with my kid until I set up Alvis. Now family time isn't turned into work time!",
+    },
+    {
+      name: "Samus Rhodes",
+      position: "SRE @ Worcation",
+      color: "bg-[#5b5faf]",
+      avatar: "https://cdn.xeiaso.net/avatar/9108f6d8df326e20a4c1983a910cd952",
+      quote: "I was able to get a promotion after setting up Alvis. I can't believe I didn't do it sooner!",
+    },
+    {
+      name: "Maria Robotnik",
+      position: "SRE @ G.U.N.",
+      color: "bg-[#d61a9b]",
+      avatar: "https://cdn.xeiaso.net/avatar/f9f35179d3331f30f92793b724c26cf9",
+      quote: "Every time I get paged, I just tell Alvis to take care of it. I don't even have to look at my phone anymore!",
+    }
+  ];
+
+  return (
+    <section class="py-8 text-neutral-700 dark:text-neutral-300">
+      <div class="mx-auto text-center md:max-w-xl lg:max-w-3xl">
+        <h3 class="mb-6 text-3xl font-bold">Testimonials</h3>
+        <p class="mb-6 pb-2 md:mb-12 md:pb-0">
+          Don't believe us? Trust the voices of your peers. They obviously know what they're talking about, don't they?
+        </p>
+      </div>
+
+      <div class="grid gap-6 text-center md:grid-cols-3">
+        {testimonials.map((testimonial) => (
+          <div>
+            <div
+              className="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30 h-full">
+              <div className={`h-28 overflow-hidden rounded-t-lg ${testimonial.color}`}></div>
+              <div
+                className="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
+                <img
+                  src={testimonial.avatar} />
+              </div>
+              <div className="p-6">
+                <h4 className="mb-2 text-2xl font-semibold">{testimonial.name}</h4>
+                <div className="mb-2">{testimonial.position}</div>
+                <hr />
+                <p className="mt-4">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    class="inline-block h-7 w-7 pr-2"
+                    viewBox="0 0 24 24">
+                    <path
+                      d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
+                  </svg>
+                  {testimonial.quote}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export const FAQs = () => {
+  const faqs = [
+    {
+      question: "How does Alvis work?",
+      answer: "Alvis takes your production playbooks and turns them into diagnostic and remediation scripts. It then runs them when you get paged. If it's able to fix the problem, it closes the incident. Otherwise it escalates to you.",
+    },
+    {
+      question: "What AI does Alvis use?",
+      answer: "Alvis uses the latest and greatest in large language model technology. It's all developed in-house and is not a wrapper to other services. This ensures your data is safe and secure with Alvis.",
+    },
+    {
+      question: "What is the connection between Alvis and the Rhadamanthus organization?",
+      answer: "Alvis is a completly separate entity from Rhadamanthus. We are not affiliated with them in any way. We wish them luck with Project Exodus and their conflicts with the Saviorites.",
+    },
+    {
+      question: "What happens when I go over the number of incidents in my plan?",
+      answer: "Alvis will automatically escalate your incidents to the oncall engineer. This ensures that Alvis is fast and ready for everyone!",
+    }
+  ]
+  return (
+    <div className="mx-auto max-w-7xl px-6 py-12 sm:pt-16 lg:px-8 lg:py-40">
+      <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+        <div className="lg:col-span-5">
+          <h2 className="text-2xl font-bold leading-10 tracking-tight text-stone-950 dark:text-stone-50">Frequently asked questions</h2>
+          <p className="mt-4 text-base leading-7">
+            Can’t find the answer you’re looking for? Reach out to our{' '}
+            <a href="#" className="font-semibold text-indigo-600 hover:text-indigo-500 visited:text-indigo-600">
+              customer support
+            </a>{' '}
+            team.
+          </p>
+        </div>
+        <div className="mt-10 lg:col-span-7 lg:mt-0">
+          <dl className="space-y-10">
+            {faqs.map((faq) => (
+              <div key={faq.question}>
+                <dt className="text-base font-semibold leading-7 text-stone-800 dark:text-stone-400">{faq.question}</dt>
+                <dd className="mt-2 text-base leading-7">{faq.answer}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Pricing = () => {
+  const tiers = [
+    {
+      name: 'Individual',
+      id: 'tier-individual',
+      href: '#',
+      priceMonthly: '$10',
+      description: 'The essentials to provide your best work for clients.',
+      features: [
+        '50 incidents included per month',
+        '48 hour response time',
+        'Basic analytics',
+        'Help center access',
+        'Tailscale integration',
+      ],
+      mostPopular: false,
+    },
+    {
+      name: 'Startup',
+      id: 'tier-startup',
+      href: '#',
+      priceMonthly: '$32',
+      description: 'A plan that scales with your rapidly growing business.',
+      features: [
+        'Custom incident response steps',
+        '500 incidents included per month',
+        'Same-day response time',
+        'Advanced analytics',
+      ],
+      mostPopular: true,
+    },
+    {
+      name: 'Enterprise',
+      id: 'tier-enterprise',
+      href: '#',
+      priceMonthly: '$500',
+      description: 'Dedicated support and infrastructure for your company.',
+      features: [
+        'Artificial General Intelligence',
+        'Unlimited incidents',
+        'SOCII/HIPPA/PCI compliance',
+        'Custom analytics',
+        'Custom SLAs',
+      ],
+      mostPopular: false,
+    },
+  ]
+
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(' ')
+  }
+
+  return (
+    <div className="py-8 sm:py-12">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-4xl text-center">
+          <h2 className="text-base font-semibold leading-7 text-indigo-600">Pricing</h2>
+          <p className="mt-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
+            Pricing plans for teams of&nbsp;all&nbsp;sizes
+          </p>
+        </div>
+        <div className="isolate mx-auto mt-8 grid max-w-md grid-cols-1 gap-y-8 sm:mt-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {tiers.map((tier, tierIdx) => (
+            <div
+              key={tier.id}
+              className={classNames(
+                tier.mostPopular ? 'lg:z-10 lg:rounded-b-none' : 'lg:mt-8',
+                tierIdx === 0 ? 'lg:rounded-r-none' : '',
+                tierIdx === tiers.length - 1 ? 'lg:rounded-l-none' : '',
+                'flex flex-col justify-between rounded-3xl bg-stone-100 dark:bg-stone-800 p-8 ring-1 ring-gray-200 xl:p-10'
+              )}
+            >
+              <div>
+                <div className="flex items-center justify-between gap-x-4">
+                  <h3
+                    id={tier.id}
+                    className={classNames(
+                      tier.mostPopular ? 'text-indigo-600 dark:text-indigo-200' : 'text-gray-900 dark:text-gray-100',
+                      'text-lg font-semibold leading-8'
+                    )}
+                  >
+                    {tier.name}
+                  </h3>
+                  {tier.mostPopular ? (
+                    <p className="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600">
+                      Most popular
+                    </p>
+                  ) : null}
+                </div>
+                <p className="mt-4 text-sm leading-6 text-gray-600 dark:text-gray-300">{tier.description}</p>
+                <p className="mt-6 flex items-baseline gap-x-1">
+                  <span className="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">{tier.priceMonthly}</span>
+                  <span className="text-sm font-semibold leading-6 text-gray-600 dark:text-gray-300">/month</span>
+                </p>
+                <ul role="list" className="mt-8 space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-300">
+                  {tier.features.map((feature) => (
+                    <li key={feature} className="flex gap-x-3">
+                      <CheckIcon className="h-6 w-5 flex-none stroke-indigo-600" aria-hidden="true" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <a
+                href={tier.href}
+                aria-describedby={tier.id}
+                className={classNames(
+                  tier.mostPopular
+                    ? 'bg-indigo-600 dark:bg-indigo-300 text-white dark:text-black shadow-sm hover:text-white visited:text-black hover:bg-indigo-500'
+                    : 'text-indigo-600 dark:text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300',
+                  'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                )}
+              >
+                Buy plan
+              </a>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const CTA = () => {
+  return (
+    <div className="mx-auto max-w-7xl px-6 pb-8 sm:pb-10 lg:px-8">
+      <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+        Boost your productivity.
+        <br />
+        Start using Alvis today.
+      </h2>
+      <div className="mt-10 flex items-center gap-x-6">
+        <a
+          href="/blog/alvis/"
+          className="rounded-md visited:text-white bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+          Get started
+        </a>
+        <a href="/blog/alvis/" className="text-sm font-semibold leading-6 text-gray-900">
+          Learn more <span aria-hidden="true">→</span>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default function Alvis() {
+  return (
+    <body className="lg:max-w-5xl max-w-xl px-4 py-2 mx-auto dark:bg-stone-950 bg-stone-50 dark:text-stone-50 text-stone-950">
+      <link rel="stylesheet" href="/static/font/inter/inter.css" />
+      <div className="font-['Inter']">
+        <Header active="/" />
+        <Hero />
+        <Features />
+        <Testimonials />
+        <Pricing />
+        <FAQs />
+        <CTA />
+        <Footer />
+      </div>
+    </body>
+  );
+};
\ No newline at end of file