path: root/lume/src/landing/alvis.jsx

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 year = "2023";
export const series = "techaro";

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: "/blog/alvis/" },
        { name: "Guide", href: "/blog/alvis/" },
        { name: "API", href: "/blog/alvis/" },
        { name: "Showcase", href: "/blog/alvis/" },
        { name: "Pricing", href: "/blog/alvis/" },
      ],
    },
    {
      title: "Community",
      children: [
        { name: "Forum", href: "/blog/alvis/" },
        { name: "Discord", href: "/blog/alvis/" },
      ],
    },
  ];

  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.",
    },
    {
      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