index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>⚡ZAP⚡</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="./css/output.css" rel="stylesheet">

    <script src="./language-highlight/highlight.min.js"></script>
    <link rel="stylesheet" href="./language-highlight/styles/atom-one-dark.css">
    <script>hljs.highlightAll();</script>

    <!-- Hamburger menu icon -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script>
        // Toggle between showing and hiding the navigation menu links.
        function toggleMenu() {
            const x = document.getElementById("links");
            x.classList.toggle("hidden");
        }
    </script>
</head>

<body class="h-screen">
    <div id="header" class="flex justify-between items-center py-2 px-4 md:px-10 border-b-zap-yellow border-b-solid border-b-2">
        <span class="text-3xl font-bold hover:underline decoration-zap-yellow"><a href="index.html">⚡ZAP⚡</a></span>
        <div class="hidden sm:flex gap-5">
            <span class="text-xl hover:underline decoration-zap-yellow"><a href="learn.html">Learn</a></span>
            <span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank" rel="noopener noreferrer">Docs</a></span>
            <span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap" target="_blank" rel="noopener noreferrer">GitHub</a></span>
        </div>
        <button class="block sm:hidden" onclick="toggleMenu()">
            <i class="fa fa-bars fa-lg"></i>
        </button>
    </div>

    <div id="links" class="hidden sm:hidden py-2 flex flex-col gap-2 justify-center items-center border-b-zap-yellow border-b-solid border-b-2">
        <span class="text-xl hover:underline decoration-zap-yellow"><a href="learn.html">Learn</a></span>
        <span class="text-xl hover:underline decoration-zap-yellow"><a href="https://zigzap.org/zap" target="_blank" rel="noopener noreferrer">Docs</a></span>
        <span class="text-xl hover:underline decoration-zap-yellow"><a href="https://github.com/zigzap/zap" target="_blank" rel="noopener noreferrer">GitHub</a></span>
    </div>

    <div class="my-2 sm:my-14" />

    <div class="pt-5 mb-10 mx-auto px-5 w-full lg:max-w-[120ch]">
        <div id="title" class="flex justify-center items-center flex-col">
            <h1 class="text-5xl font-bold mb-3">⚡ZAP⚡</h1>
            <h2 class="text-2xl font-medium w-full md:w-[50%] text-center opacity-65">Unleash the Low-Level Power of 
                Zig for Blazingly Fast and Robust Web Applications.</h3>
                <button
                    onclick="location.href='learn.html';"
                    class="text-white text-xl bg-zap-red px-8 py-2 rounded-lg mt-9 hover:underline decoration-zap-yellow">Get
                    Started</button>
        </div>

        <div class="my-16 lg:my-32" />

        <div id="features" class="grid grid-rows-4 sm:grid-cols-2 sm:grid-rows-2 gap-8 sm:gap-16 text-center">
            <div class="flex items-center justify-top flex-col">
                <h3 class="text-2xl font-semibold">Blazingly Fast Performance</h3>
                <p class="opacity-65 text-xl">Zap leverages the facilitation of the powerful evented networking C
                    library,
                    facil.io, to deliver exceptional speed.</p>
            </div>
            <div class="flex items-center justify-top flex-col">
                <h3 class="text-2xl font-semibold">Robust and Stable Operation</h3>
                <p class="opacity-65 text-xl">With over six months of successful production use, Zap has proven to be
                    extremely
                    robust and stable.</p>
            </div>
            <div class="flex items-center justify-top flex-col">
                <h3 class="text-2xl font-semibold">Memory-Safe Development</h3>
                <p class="opacity-65 text-xl">Zap is built with Zig's strengths in mind, ensuring memory safety and
                    error
                    handling.</p>
            </div>
            <div class="flex items-center justify-top flex-col">
                <h3 class="text-2xl font-semibold">TLS/HTTPS Support</h3>
                <p class="opacity-65 text-xl">Zap supports secure communication with TLS/HTTPS, allowing for encrypted
                    data
                    transmission.</p>
            </div>
        </div>

        <div class="my-16 lg:my-32" />

        <div id="code-example" class="flex flex-col md:flex-row md:gap-10 md:items-center">
            <div class="w-full lg:w-auto">
                <div class="block lg:hidden mb-5">
                    <h3 class="text-3xl font-semibold underline decoration-zap-yellow">Hello, Zap!</h3>
                    <p class="text-lg">Getting started with Zap is simple! Take a look at the <a href="#"
                            class="underline decoration-zap-yellow" target="_blank" rel="noopener noreferrer">learn</a>
                        page to see what else Zap can do or jump straight into the <a href="#"
                            class="underline decoration-zap-yellow" target="_blank" rel="noopener noreferrer">docs</a>.</p>
                </div>
                <pre>
<code class="language-zig rounded-lg !pl-7 !pr-14">const std = @import("std");
const zap = @import("zap");

fn on_request(r: zap.Request) void {
    r.sendBody("Hello, Zap!") catch return;
}

pub fn main() !void {
    var listener = zap.HttpListener.init(.{
        .port = 3000,
        .on_request = on_request,
        .log = true,
        .max_clients = 100000,
    });
    try listener.listen();

    std.debug.print("Listening on 0.0.0.0:3000\n", .{});

    zap.start(.{
        .threads = 2,
        .workers = 1, // 1 worker enables sharing state between threads
    });
}</code>
                    <pre>
            </div>
            <div class="hidden lg:block">
                <h3 class="text-3xl font-semibold underline decoration-zap-yellow mb-2">Hello, Zap!</h3>
                <p class="text-lg">Getting started with Zap is simple! Take a look at the <a href="learn.html"
                        class="underline decoration-zap-yellow">learn</a>
                    page to see what else Zap can do or jump straight into the <a href="https://zigzap.org/zap"
                        class="underline decoration-zap-yellow" target="_blank" rel="noopener noreferrer">docs</a>.</p>
            </div>
        </div>
    </div>
</body>

</html>