1271 lines
54 KiB
HTML
1271 lines
54 KiB
HTML
<!doctype html>
|
||
<html
|
||
lang="en-us"
|
||
dir="ltr"
|
||
>
|
||
<head>
|
||
<meta name="generator" content="Hugo 0.135.0">
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width" />
|
||
<title>
|
||
|
||
Clan
|
||
|
||
</title>
|
||
|
||
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48" />
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||
<link rel="shortcut icon" href="/favicon.ico" />
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||
<meta name="apple-mobile-web-app-title" content="Clan" />
|
||
<link rel="manifest" href="/site.webmanifest" />
|
||
|
||
<meta property="og:title" content="Clan" />
|
||
<meta
|
||
property="og:description"
|
||
content="Discover the simplest way to re-enter independent computing with our framework. Placing control directly at your fingertips."
|
||
/>
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://clan.lol" />
|
||
|
||
|
||
|
||
<meta
|
||
property="og:image"
|
||
content="https://clan.lol//images/blogpost-image-idea_hu8390140126450663017.png"
|
||
/>
|
||
<meta property="og:locale" content="en_US" />
|
||
|
||
|
||
|
||
|
||
<link
|
||
rel="stylesheet"
|
||
href="/css/main.min.29fef0a3eb305c905be609ddcefa2942fb7333ddfc6785c8e041c522123a8f32.css"
|
||
integrity="sha256-Kf7wo+swXJBb5gndzvopQvtzM938Z4XI4EHFIhI6jzI="
|
||
crossorigin="anonymous"
|
||
/>
|
||
|
||
|
||
</head>
|
||
<body class="body">
|
||
<div class="body__content">
|
||
<header>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div id="main-header" class="main-header main-header--inverted">
|
||
<div class="container">
|
||
<div class="py-6 flex justify-between">
|
||
<div class="column">
|
||
<a class="flex max-w-20 translate-y-1" href="/">
|
||
<svg
|
||
id="logo"
|
||
class="w-full"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 136.06 56.69"
|
||
>
|
||
<path
|
||
d="M33.15,12.6h6.13c.65,0,1.18-.53,1.18-1.18v-4.71c0-.65-.53-1.18-1.18-1.18h-1.93c-.62,0-1.13-.51-1.13-1.13v-1.93c0-.65-.53-1.18-1.18-1.18h-16.97c-.65,0-1.18.53-1.18,1.18v1.93c0,.62-.51,1.13-1.13,1.13h-1.93c-.65,0-1.18.53-1.18,1.18v1.93c0,.62-.51,1.13-1.13,1.13h-1.93c-.65,0-1.18.53-1.18,1.18,0,0-.28.7-.28,14.07,0,11.96.28,13.26.28,13.26,0,.65.53,1.18,1.18,1.18h1.93c.62,0,1.13.51,1.13,1.13v1.98c0,.62.51,1.13,1.13,1.13h1.98c.62,0,1.13.51,1.13,1.13v1.93c0,.65.53,1.18,1.18,1.18h16.97c.65,0,1.18-.53,1.18-1.18v-1.93c0-.62.51-1.13,1.13-1.13h3.12c.65,0,1.18-.53,1.18-1.18v-5.62c0-.65-.53-1.18-1.18-1.18h-7.32c-.65,0-1.18.53-1.18,1.18v2.84c0,.62-.51,1.13-1.13,1.13h-8.58c-.62,0-1.13-.51-1.13-1.13v-2.88c0-.65-.53-1.18-1.18-1.18h-2.88c-.62,0-.98.09-1.13-1.13-.05-.39-.07-.87-.11-1.52-.09-1.62-.17-3.33-.17-8.19,0-6.8.18-10.17.28-11.12s.51-1.13,1.13-1.13h2.88c.65,0,1.18-.53,1.18-1.18v-1.93c0-.62.51-1.13,1.13-1.13h8.58c.62,0,1.13.51,1.13,1.13v1.93c0,.65.53,1.18,1.18,1.18Z"
|
||
/>
|
||
<path
|
||
d="M11.77,46.57h-1.39c-.27,0-.49-.22-.49-.49v-1.39c0-.54-.44-.98-.98-.98h-3.76c-.54,0-.98.44-.98.98v1.39c0,.27-.22.49-.49.49h-1.39c-.54,0-.98.44-.98.98v3.76c0,.54.44.98.98.98h1.39c.27,0,.49.22.49.49v1.39c0,.54.44.98.98.98h3.76c.54,0,.98-.44.98-.98v-1.39c0-.27.22-.49.49-.49h1.39c.54,0,.98-.44.98-.98v-3.76c0-.54-.44-.98-.98-.98Z"
|
||
/>
|
||
<path
|
||
d="M133.63,22.5h-1.04c-.62,0-1.13-.51-1.13-1.13v-1.98c0-.62-.51-1.13-1.13-1.13h-1.98c-.62,0-1.13-.51-1.13-1.13v-1.98c0-.62-.51-1.13-1.13-1.13h-12.72c-.62,0-1.13.51-1.13,1.13v2.4c0,.31-.25.57-.57.57h-2.16c-.31,0-.51-.19-.57-.57l-.38-2.37c-.09-.66-.41-1.08-1.08-1.08l-2.22-.08h-1.25c-1.25,0-2.26,1.01-2.26,2.26v22.35c0,1.25-1.01,2.26-2.26,2.26h-5.09c-.62,0-1.13-.51-1.13-1.13v-16.25c0-7.16-4.53-11.38-13.68-11.38-8.32,0-12.33,3.05-12.86,8.74-.07.7.33,1.1,1.03,1.1l4.71.34c.69.06.97-.33,1.1-1,.47-2.26,2.53-3.53,6.03-3.53,4.29,0,6.09,2.03,6.09,5.49v1.83c0,.62-.51,1.13-1.13,1.13h-.21s-5.89-.01-5.89-.01c-9.35,0-13.94,3.62-13.94,10.87,0,2.3.47,4.27,1.37,5.89h-.36c-1.07-.77-1.49-1.35-1.85-1.77-.16-.18-.4-.33-.82-.33h-1.04s-3.63,0-3.63,0h-1.98c-1.25,0-2.26-1.01-2.26-2.26V2.36c0-.67-.4-1.07-1.08-1.07h-5.11c-.62,0-1.13.45-1.13,1.07l-.02,32.87v8.2c0,2.5,2.03,4.53,4.53,4.53h30.84c5.13-.26,5.22-2.07,5.72-2.75.39,2.16,1.13,2.63,2.86,2.73,4.94.07,11.13.02,11.22.02h3.02c2.5,0,4.05-2.03,4.05-4.53l.47-16.5c0-.62.51-1.13,1.13-1.13h1.23c.52,0,.94-.42.94-.94v-2.17c0-.62.51-1.13,1.13-1.13h7.2c1.13,0,2.04.91,2.04,2.04v1.97c0,.65.53,1.18,1.18,1.18h2.5c.31,0,.57.25.57.57v19.52c0,.62.51,1.13,1.13,1.13h4.15c1.25,0,2.26-1.01,2.26-2.26v-22.07c0-.62-.51-1.13-1.13-1.13ZM86.01,34.11c0,5.4-3.72,8.91-9.3,8.91-4.01,0-5.94-1.79-5.94-5.3,0-3.9,2.33-5.83,7.05-5.83h8.19v2.22Z"
|
||
/>
|
||
</svg>
|
||
|
||
</a>
|
||
</div>
|
||
<div class="flex-1 flex justify-end pt-0.25">
|
||
<ul class="main-header__nav hidden md:flex">
|
||
|
||
|
||
<li>
|
||
<a
|
||
|
||
class="uppercase mono small"
|
||
|
||
href="/blog/"
|
||
>Blog</a
|
||
>
|
||
</li>
|
||
|
||
<li class="pl-4">
|
||
<a
|
||
href="https://matrix.to/#/#clan:lassul.us"
|
||
alt="Clan Chat"
|
||
title="Clan Chat"
|
||
><svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M21 5V4H20V3H19V2H5V3H4V4H3V5H2V15H3V16H4V17H5V18H6V22H10V21H11V20H12V19H13V18H19V17H20V16H21V15H22V5H21ZM20 13H19V14H18V15H17V16H12V17H11V18H10V19H9V20H8V16H7V15H6V14H5V13H4V7H5V6H6V5H7V4H17V5H18V6H19V7H20V13Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a
|
||
href="https://git.clan.lol/clan/clan-core"
|
||
alt="Clan Code"
|
||
title="Clan Code"
|
||
>
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M5.83333 6V6.65H4.66667V7.95H3.5V9.25H2.33333V10.55H1.16667V11.2H0.583333V11.85H0V13.15H0.583333V13.8H1.16667V14.45H2.33333V15.75H3.5V17.05H4.08333H4.66667V17.7V18.35H5.83333V19H7V17.05H5.83333V15.75H4.66667V14.45H3.5V13.15H2.33333V11.85H3.5V10.55H4.66667V9.25H5.83333V7.95H7V6H5.83333Z"
|
||
fill="currentColor"
|
||
/>
|
||
<path
|
||
d="M23.4167 11.85V11.2H22.8333V10.55H21.6667V9.25H20.5V7.95H19.3333V6.65H18.1667V6H17V7.95H18.1667V9.25H19.3333V10.55H20.5V11.85H21.6667V13.15H20.5V14.45H19.3333V15.75H18.1667V17.05H17V19H18.1667V18.35H19.3333V17.05H20.5V16.4V15.75H21.6667V15.1V14.45H22.8333V13.8H23.4167V13.15H24V12.5V11.85H23.4167Z"
|
||
fill="currentColor"
|
||
/>
|
||
<path
|
||
d="M13.6667 3V5H12.8889V8H12.1111V11H11.3333V14H10.5556V17H9.77778V19H9V21H11.3333V20V19H12.1111V16H12.8889V13H13.6667V10H14.4444V7H15.2222V5H16V3H13.6667Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<a href="https://docs.clan.lol/" target="_blank" class="button ">
|
||
<span class="button__title">Get Started</span>
|
||
<span class="button__cover"></span>
|
||
</a>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="js-res-menu-caller" class="fixed z-50 top-0 res-menu--hidden">
|
||
<div
|
||
id="js-res-menu-nav"
|
||
class="res-menu__nav res-menu__nav--hidden z-50 flex items-end
|
||
"
|
||
>
|
||
<ul class="flex flex-col-reverse gap-3 p-2">
|
||
<li
|
||
class="js-menu-item bg-clan-primary-900 bg-opacity-95 pl-4 pr-6 py-2 rounded-3xl"
|
||
>
|
||
|
||
|
||
<a class="p flex items-center gap-4 text-white" href="/blog/">
|
||
<svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 56 56"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M6 4H10.8889V8.9H15.7778V13.8H10.8889V48.1H45.1111V13.8H40.2222V8.9H45.1111V4H50V53H6V4ZM35.3333 8.9V4H40.2222V8.9H35.3333ZM30.4444 8.9H35.3333V13.8H30.4444V8.9ZM25.5556 8.9V4H30.4444V8.9H25.5556ZM20.6667 8.9H25.5556V13.8H20.6667V8.9ZM20.6667 8.9V4H15.7778V8.9H20.6667ZM40.2222 18.7H15.7778V23.6H40.2222V18.7ZM15.7778 28.5H40.2222V33.4H15.7778V28.5ZM40.2222 43.2V38.3H30.4444V43.2H40.2222Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
Blog</a
|
||
>
|
||
|
||
</li>
|
||
<li
|
||
class="js-menu-item bg-clan-primary-900 bg-opacity-95 pl-4 pr-6 py-2 rounded-3xl"
|
||
>
|
||
<a
|
||
class="p flex items-center gap-4 text-white"
|
||
href="https://matrix.to/#/#clan:lassul.us"
|
||
alt="Clan Chat"
|
||
title="Clan Chat"
|
||
><svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M21 5V4H20V3H19V2H5V3H4V4H3V5H2V15H3V16H4V17H5V18H6V22H10V21H11V20H12V19H13V18H19V17H20V16H21V15H22V5H21ZM20 13H19V14H18V15H17V16H12V17H11V18H10V19H9V20H8V16H7V15H6V14H5V13H4V7H5V6H6V5H7V4H17V5H18V6H19V7H20V13Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
Chat
|
||
</a>
|
||
</li>
|
||
<li
|
||
class="js-menu-item bg-clan-primary-900 bg-opacity-95 pl-4 pr-6 py-2 rounded-3xl"
|
||
>
|
||
<a
|
||
class="p flex items-center gap-4 text-white"
|
||
href="https://git.clan.lol/clan/clan-core"
|
||
alt="Clan Code"
|
||
title="Clan Code"
|
||
>
|
||
<svg
|
||
width="22"
|
||
height="22"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M5.83333 6V6.65H4.66667V7.95H3.5V9.25H2.33333V10.55H1.16667V11.2H0.583333V11.85H0V13.15H0.583333V13.8H1.16667V14.45H2.33333V15.75H3.5V17.05H4.08333H4.66667V17.7V18.35H5.83333V19H7V17.05H5.83333V15.75H4.66667V14.45H3.5V13.15H2.33333V11.85H3.5V10.55H4.66667V9.25H5.83333V7.95H7V6H5.83333Z"
|
||
fill="currentColor"
|
||
/>
|
||
<path
|
||
d="M23.4167 11.85V11.2H22.8333V10.55H21.6667V9.25H20.5V7.95H19.3333V6.65H18.1667V6H17V7.95H18.1667V9.25H19.3333V10.55H20.5V11.85H21.6667V13.15H20.5V14.45H19.3333V15.75H18.1667V17.05H17V19H18.1667V18.35H19.3333V17.05H20.5V16.4V15.75H21.6667V15.1V14.45H22.8333V13.8H23.4167V13.15H24V12.5V11.85H23.4167Z"
|
||
fill="currentColor"
|
||
/>
|
||
<path
|
||
d="M13.6667 3V5H12.8889V8H12.1111V11H11.3333V14H10.5556V17H9.77778V19H9V21H11.3333V20V19H12.1111V16H12.8889V13H13.6667V10H14.4444V7H15.2222V5H16V3H13.6667Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
Code
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div
|
||
class="js-res-menu-button relative w-12 h-12 rounded-full bg-white bg-opacity-65 border-spacing-0.5 border-clan-primary-500"
|
||
>
|
||
<svg
|
||
class="js-res-menu-close opacity-0 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 56 56"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 4H10.9129V10.9129H4V4ZM17.8259 17.8259H10.9129V10.9129H17.8259V17.8259ZM24.7388 24.7388H17.8259V17.8259H24.7388V24.7388ZM31.6517 24.7388H24.7388V31.6517H17.8259V38.5646H10.9129V45.4776H4V52.3905H10.9129V45.4776H17.8259V38.5646H24.7388V31.6517H31.6517V38.5646H38.5646V45.4776H45.4776V52.3905H52.3905V45.4776H45.4776V38.5646H38.5646V31.6517H31.6517V24.7388ZM38.5646 17.8259V24.7388H31.6517V17.8259H38.5646ZM45.4776 10.9129V17.8259H38.5646V10.9129H45.4776ZM45.4776 10.9129V4H52.3905V10.9129H45.4776Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
|
||
<svg
|
||
class="js-res-menu-menu absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 56 56"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M4 10H52.3905V16.0488H4V10ZM4 25.122H52.3905V31.1708H4V25.122ZM52.3905 40.2441H4V46.2929H52.3905V40.2441Z"
|
||
fill="currentColor"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</header>
|
||
<main>
|
||
|
||
<section>
|
||
<div class="js-hero hero">
|
||
<div class="hero__stage">
|
||
|
||
|
||
|
||
<figure class="mx-auto">
|
||
<img
|
||
class="mix-blend-overlay opacity-20 object-center h-full w-full"
|
||
width="1921"
|
||
height="1000"
|
||
src="/images/clan-key-visual_hu2419825318156019427.webp"
|
||
/>
|
||
</figure>
|
||
|
||
<div class="grain"></div>
|
||
</div>
|
||
<div class="hero__content relative z-30">
|
||
<div class="container">
|
||
<div class="flex flex-col gap-6">
|
||
<header
|
||
class="relative flex flex-col items-center justify-center py-8 md:py-16 2xl:pt-0 2xl:pb-16 gap-4"
|
||
>
|
||
<h1 class="text-teaser text-white text-center">
|
||
Build Your Own Private Internet
|
||
</h1>
|
||
<p
|
||
class="hero__description text-center body text-balance text-clan-tertiary-200‚"
|
||
>
|
||
Discover the simplest way to re-enter independent<br class="hidden sm:inline" /> computing with our framework. Placing control<br class="hidden sm:inline" /> directly at your fingertips.
|
||
</p>
|
||
</header>
|
||
</div>
|
||
<div class="js-terminal terminal">
|
||
<div class="terminal__tool">
|
||
<div class="flex gap-1">
|
||
<div class="terminal__tool__dot"></div>
|
||
<div class="terminal__tool__dot"></div>
|
||
<div class="terminal__tool__dot"></div>
|
||
</div>
|
||
</div>
|
||
<div class="terminal__body">
|
||
<div class="js-terminal-row terminal__row mono">
|
||
<span class="terminal__column terminal__info">[Clan]</span>
|
||
<span class="text-clan-secondary-400">></span>
|
||
<span class="text-clan-secondary-200"> clan flakes create my-clan </span>
|
||
</div>
|
||
<div class="js-terminal-row terminal__row mono">
|
||
<span class="terminal__column terminal__info">[Clan]</span>
|
||
<span class="text-clan-secondary-400">></span>
|
||
<span class="text-clan-secondary-200">cd my-clan</span>
|
||
</div>
|
||
<div class="js-terminal-row terminal__row mono">
|
||
<span class="terminal__caret"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section
|
||
class="js-tiles relative z-20 py-12 md:py-16 lg:py-24 md:pb-8 lg:pb-12"
|
||
>
|
||
<div class="container container--full">
|
||
<div class="flex flex-col gap-12 md:gap-16 lg:gap-16">
|
||
<div class="flex justify-center">
|
||
<a
|
||
target="_blank"
|
||
href="https://matrix.to/#/#clan:lassul.us"
|
||
alt="Clan Matrix Chanlel"
|
||
class="group inline-flex justify-center mx-auto relative overflow-hidden bg-white rounded-full border border-white cursor-pointer"
|
||
>
|
||
<div
|
||
class="relative z-20 inline-flex items-center justify-center gap-3 pl-4 pr-3 pt-2 pb-2.5"
|
||
>
|
||
<div>
|
||
<svg
|
||
width="33"
|
||
height="31"
|
||
viewBox="0 0 33 31"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M3.31998 24.4999C3.14326 24.4999 3 24.3566 3 24.1799V5.82C3 5.64327 3.14327 5.5 3.32 5.5H7.68C7.85673 5.5 8 5.64327 8 5.82V7.04843C8 7.22516 7.85673 7.36843 7.68 7.36843H5.61798C5.44125 7.36843 5.29798 7.5117 5.29798 7.68843V22.6314V24.18C5.29798 24.3567 5.1547 24.5 4.97796 24.5L3.31998 24.4999Z"
|
||
fill="#0D1416"
|
||
/>
|
||
<path
|
||
d="M24.6244 11.494H23.6194C23.4108 11.494 23.2439 11.3279 23.2439 11.1204V10.1205C23.2439 9.913 23.0771 9.74698 22.8685 9.74698H21.8635C21.6549 9.74698 21.4881 9.58096 21.4881 9.37344V8.37354C21.4881 8.16602 21.3212 8 21.1126 8H13.0537C12.8451 8 12.6783 8.16602 12.6783 8.37354V9.37344C12.6783 9.58096 12.5114 9.74698 12.3028 9.74698H11.2978C11.0893 9.74698 10.9224 9.913 10.9224 10.1205V11.1204C10.9224 11.3279 10.7555 11.494 10.5469 11.494H9.54195C9.33337 11.494 9.1665 11.66 9.1665 11.8675V21.6325C9.1665 21.84 9.33337 22.006 9.54195 22.006H10.5469C10.7555 22.006 10.9224 22.1721 10.9224 22.3796V23.3795C10.9224 23.587 11.0893 23.753 11.2978 23.753H12.3028C12.5114 23.753 12.6783 23.919 12.6783 24.1266V25.1265C12.6783 25.334 12.8451 25.5 13.0537 25.5H21.1126C21.3212 25.5 21.4881 25.334 21.4881 25.1265V24.1266C21.4881 23.919 21.6549 23.753 21.8635 23.753H22.8685C23.0771 23.753 23.2439 23.587 23.2439 23.3795V22.3796C23.2439 22.1721 23.4108 22.006 23.6194 22.006H24.6244C24.833 22.006 24.9998 21.84 24.9998 21.6325V18.8705C24.9998 18.663 24.833 18.497 24.6244 18.497H21.8635C21.6549 18.497 21.4881 18.663 21.4881 18.8705V19.8817C21.4881 20.0893 21.3212 20.2553 21.1126 20.2553H20.0962C19.8877 20.2553 19.7208 20.4213 19.7208 20.6288V21.6287C19.7208 21.8362 19.5539 22.0023 19.3453 22.0023H14.8134C14.6048 22.0023 14.438 21.8362 14.438 21.6287V20.6288C14.438 20.4213 14.2711 20.2553 14.0625 20.2553H13.0575C12.8489 20.2553 12.6821 20.0893 12.6821 19.8817V13.6145C12.6821 13.407 12.8489 13.2409 13.0575 13.2409H14.0625C14.2711 13.2409 14.438 13.0749 14.438 12.8674V11.8675C14.438 11.66 14.6048 11.494 14.8134 11.494H19.3453C19.5539 11.494 19.7208 11.66 19.7208 11.8675V12.8674C19.7208 13.0749 19.8877 13.2409 20.0962 13.2409H21.1126C21.3212 13.2409 21.4881 13.407 21.4881 13.6145V14.6257C21.4881 14.8332 21.6549 14.9992 21.8635 14.9992H24.6244C24.833 14.9992 24.9998 14.8332 24.9998 14.6257V11.8637C24.9998 11.6562 24.833 11.4902 24.6244 11.4902V11.494Z"
|
||
fill="#0D1416"
|
||
/>
|
||
<path
|
||
d="M10.8293 27.0828V26.524C10.8293 26.4115 10.7165 26.315 10.5795 26.315H9.50391C9.36694 26.315 9.25414 26.2225 9.25414 26.1059V24.8757C9.25414 24.7632 9.14134 24.6667 9.00437 24.6667H6.81285C6.67587 24.6667 6.56308 24.7592 6.56308 24.8757V26.1059C6.56308 26.2185 6.45028 26.315 6.31331 26.315H5.24977C5.1128 26.315 5 26.4074 5 26.524V28.6427C5 28.7552 5.1128 28.8517 5.24977 28.8517H6.31733C6.4543 28.8517 6.5671 28.9442 6.5671 29.0608V30.291C6.5671 30.4035 6.6799 30.5 6.81687 30.5H9.0084C9.14537 30.5 9.25817 30.4076 9.25817 30.291V29.0608C9.25817 28.9482 9.37097 28.8517 9.50794 28.8517H10.5836C10.7205 28.8517 10.8333 28.7593 10.8333 28.6427V27.0828H10.8293Z"
|
||
fill="#0D1416"
|
||
/>
|
||
<path
|
||
d="M30.68 5.5C30.8567 5.5 31 5.64327 31 5.82L31 26.18C31 26.3567 30.8567 26.5 30.68 26.5L26.32 26.5C26.1433 26.5 26 26.3567 26 26.18L26 24.9943C26 24.8175 26.1433 24.6743 26.32 24.6743L28.382 24.6743C28.5588 24.6743 28.702 24.531 28.702 24.3543L28.702 7.64573C28.702 7.469 28.5588 7.32573 28.382 7.32573L26.32 7.32573C26.1433 7.32573 26 7.18246 26 7.00573L26 5.82C26 5.64327 26.1433 5.5 26.32 5.5L30.68 5.5Z"
|
||
fill="#0D1416"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<p
|
||
style="font-weight: bold;"
|
||
class="text-lg font-bold text-clan-primary-950"
|
||
>
|
||
Join our Matrix Group
|
||
</p>
|
||
<div
|
||
class="flex items-center justify-center w-6 h-6 rounded-full bg-clan-success-400"
|
||
>
|
||
<svg
|
||
class="scale-95"
|
||
width="7"
|
||
height="14"
|
||
viewBox="0 0 8 15"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M1.85938 14.0833H0V0.333313H1.85938V2.05206H3.71875V4.63019H5.57812V6.34894H7.4375V8.06769H5.57812V9.78644H3.71875V12.3646H1.85938V14.0833Z"
|
||
fill="#0D1416"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="-translate-x-full tran group-hover:translate-x-0 absolute z-10 top-0 left-0 w-full h-full bg-clan-primary-50 transition-transform"
|
||
></div>
|
||
</a>
|
||
</div>
|
||
|
||
<header class="flex flex-col items-center gap-y-2 text-center">
|
||
<h2>What is Clan</h2>
|
||
<h3 class="p text-clan-secondary-900 w-full max-w-2xl">
|
||
A peer-to-peer computer management<br/>framework that has
|
||
</h3>
|
||
</header>
|
||
|
||
<div class="overflow-hidden lg:overflow-visible">
|
||
<div
|
||
class="no-scrollbar snap-x snap-mandatory overflow-x-auto lg:overflow-visible flex md:grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8 px-4 lg:px-0"
|
||
>
|
||
|
||
<article
|
||
class="js-tile js-modal snap-center tile group col-span-1 hover:bg-clan-secondary-50 opacity-0"
|
||
data-long="Clan allows you specify everything about the machines you control, using a single Git repository. Declare disk layout, service configuration, access control, backup strategies, and more in the Nix language or JSON. Scale your IT infrastructure on your own terms. No need to rely on a centralized provider."
|
||
>
|
||
<div class="js-tile-inner tile__inner h-full">
|
||
<header>
|
||
<h3
|
||
class="tile__headline"
|
||
style="font-weight: bold;"
|
||
class="h4"
|
||
>
|
||
Uniform<br/>interface
|
||
</h3>
|
||
</header>
|
||
<div class="flex-1">
|
||
<div class="tile__description body text-clan-secondary-800">
|
||
Manage your networks from<br/>a single source of truth
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="tile__footer">
|
||
|
||
<button
|
||
class="flex items-center justify-center w-6 h-6 lg:w-8 lg:h-8 bg-clan-secondary-100 border border-clan-secondary-200 rounded-sm group-hover:bg-clan-secondary-200 group-hover:border-clan-secondary-300"
|
||
>
|
||
|
||
<img
|
||
width="20"
|
||
height="20"
|
||
src="/images/icon-plus.svg"
|
||
/>
|
||
|
||
</button>
|
||
</footer>
|
||
|
||
</div>
|
||
</article>
|
||
|
||
<article
|
||
class="js-tile js-modal snap-center tile group col-span-1 hover:bg-clan-secondary-50 opacity-0"
|
||
data-long="Passwords and other sensitive information are encrypted next to your configuration data, and automatically decrypted during deployment of services and their clients. This keeps your secrets safe while also simplifying their management."
|
||
>
|
||
<div class="js-tile-inner tile__inner h-full">
|
||
<header>
|
||
<h3
|
||
class="tile__headline"
|
||
style="font-weight: bold;"
|
||
class="h4"
|
||
>
|
||
Automated<br/>secret management
|
||
</h3>
|
||
</header>
|
||
<div class="flex-1">
|
||
<div class="tile__description body text-clan-secondary-800">
|
||
Automatically generate<br/>and provision secrets
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="tile__footer">
|
||
|
||
<button
|
||
class="flex items-center justify-center w-6 h-6 lg:w-8 lg:h-8 bg-clan-secondary-100 border border-clan-secondary-200 rounded-sm group-hover:bg-clan-secondary-200 group-hover:border-clan-secondary-300"
|
||
>
|
||
|
||
<img
|
||
width="20"
|
||
height="20"
|
||
src="/images/icon-plus.svg"
|
||
/>
|
||
|
||
</button>
|
||
</footer>
|
||
|
||
</div>
|
||
</article>
|
||
|
||
<article
|
||
class="js-tile js-modal snap-center tile group col-span-1 hover:bg-clan-secondary-50 opacity-0"
|
||
data-long="Setting up a service can be quite complex: many server adjustments need to be made, from setting up a database to adjusting webserver configurations and generating the correct private keys. Clan aims to make setting up a service as easy as installing an application. Through the Modules system, everything down to secrets can be set up through a smooth automated process."
|
||
>
|
||
<div class="js-tile-inner tile__inner h-full">
|
||
<header>
|
||
<h3
|
||
class="tile__headline"
|
||
style="font-weight: bold;"
|
||
class="h4"
|
||
>
|
||
Automated<br/>service setup
|
||
</h3>
|
||
</header>
|
||
<div class="flex-1">
|
||
<div class="tile__description body text-clan-secondary-800">
|
||
Install services as if<br/>they were applications
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="tile__footer">
|
||
|
||
<button
|
||
class="flex items-center justify-center w-6 h-6 lg:w-8 lg:h-8 bg-clan-secondary-100 border border-clan-secondary-200 rounded-sm group-hover:bg-clan-secondary-200 group-hover:border-clan-secondary-300"
|
||
>
|
||
|
||
<img
|
||
width="20"
|
||
height="20"
|
||
src="/images/icon-plus.svg"
|
||
/>
|
||
|
||
</button>
|
||
</footer>
|
||
|
||
</div>
|
||
</article>
|
||
|
||
<article
|
||
class="js-tile js-modal snap-center tile group col-span-1 hover:bg-clan-secondary-50 opacity-0"
|
||
data-long="Each clan service designates a state directory where all service state data is stored. This setup enables the automatic backup of every service to other peers, including Postgres databases. Using the Syncthing clan module, you can create perfect replicas of your laptop."
|
||
>
|
||
<div class="js-tile-inner tile__inner h-full">
|
||
<header>
|
||
<h3
|
||
class="tile__headline"
|
||
style="font-weight: bold;"
|
||
class="h4"
|
||
>
|
||
Automated<br/>backups
|
||
</h3>
|
||
</header>
|
||
<div class="flex-1">
|
||
<div class="tile__description body text-clan-secondary-800">
|
||
Synchronize state and backup<br/>to other peers automatically
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="tile__footer">
|
||
|
||
<button
|
||
class="flex items-center justify-center w-6 h-6 lg:w-8 lg:h-8 bg-clan-secondary-100 border border-clan-secondary-200 rounded-sm group-hover:bg-clan-secondary-200 group-hover:border-clan-secondary-300"
|
||
>
|
||
|
||
<img
|
||
width="20"
|
||
height="20"
|
||
src="/images/icon-plus.svg"
|
||
/>
|
||
|
||
</button>
|
||
</footer>
|
||
|
||
</div>
|
||
</article>
|
||
|
||
<article
|
||
class="js-tile js-modal snap-center tile group col-span-1 hover:bg-clan-secondary-50 opacity-0"
|
||
data-long="All machines in your Clan are interconnected through a self-configuring peer-to-peer mesh VPN. This additional layer of protection ensures that sensitive services, which might have too much attack surface to be hosted on the public internet, can still be made available on your Clan's network."
|
||
>
|
||
<div class="js-tile-inner tile__inner h-full">
|
||
<header>
|
||
<h3
|
||
class="tile__headline"
|
||
style="font-weight: bold;"
|
||
class="h4"
|
||
>
|
||
Peer-to-peer<br/>Mesh VPN
|
||
</h3>
|
||
</header>
|
||
<div class="flex-1">
|
||
<div class="tile__description body text-clan-secondary-800">
|
||
Securely connect machines over<br/>a private network
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="tile__footer">
|
||
|
||
<button
|
||
class="flex items-center justify-center w-6 h-6 lg:w-8 lg:h-8 bg-clan-secondary-100 border border-clan-secondary-200 rounded-sm group-hover:bg-clan-secondary-200 group-hover:border-clan-secondary-300"
|
||
>
|
||
|
||
<img
|
||
width="20"
|
||
height="20"
|
||
src="/images/icon-plus.svg"
|
||
/>
|
||
|
||
</button>
|
||
</footer>
|
||
|
||
</div>
|
||
</article>
|
||
|
||
<article
|
||
class="js-tile js-modal snap-center tile group col-span-1 hover:bg-clan-secondary-50 opacity-0"
|
||
data-long="With Clan, you can skip the cumbersome task of bootstrapping specific installation images. Clan allows you to overwrite any existing Linux distribution live over SSH, eliminating time-consuming setup processes. Deploy updates or new configurations swiftly and efficiently, maximizing uptime and minimizing hassle."
|
||
>
|
||
<div class="js-tile-inner tile__inner h-full">
|
||
<header>
|
||
<h3
|
||
class="tile__headline"
|
||
style="font-weight: bold;"
|
||
class="h4"
|
||
>
|
||
Live<br/>Overwrites
|
||
</h3>
|
||
</header>
|
||
<div class="flex-1">
|
||
<div class="tile__description body text-clan-secondary-800">
|
||
Deploy configuration over existing Linux distributions via SSH
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<footer class="tile__footer">
|
||
|
||
<button
|
||
class="flex items-center justify-center w-6 h-6 lg:w-8 lg:h-8 bg-clan-secondary-100 border border-clan-secondary-200 rounded-sm group-hover:bg-clan-secondary-200 group-hover:border-clan-secondary-300"
|
||
>
|
||
|
||
<img
|
||
width="20"
|
||
height="20"
|
||
src="/images/icon-plus.svg"
|
||
/>
|
||
|
||
</button>
|
||
</footer>
|
||
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="teaser relative pt-8 pb-16 md:pb-24 overflow-hidden "
|
||
>
|
||
<div class="relative z-20 container">
|
||
<div class="flex justify-center">
|
||
<header class="flex flex-col gap-3 text-center">
|
||
<div class="article__header-image">
|
||
|
||
|
||
<figure class="relative w-40 h-40 mx-auto">
|
||
<div class="teaser__marker absolute z-30">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M7 12V14H9V16H10V17H11V18H13V17H14V16H15V14H17V12H19V9H17V10H15V12H13V3H11V12H9V10H7V9H5V12H7Z"
|
||
fill="black"
|
||
/>
|
||
<path d="M19 17V19H5V17H3V21H21V17H19Z" fill="black" />
|
||
</svg>
|
||
|
||
</div>
|
||
<img class="" src="/images/clan-client-folder-3.svg" />
|
||
</figure>
|
||
|
||
</div>
|
||
<h2 class="h1 w-full max-w-2xl 2xl:max-w-[50rem]">
|
||
Get started with our framework
|
||
</h2>
|
||
<p
|
||
class="teaser__description p-teaser w-full max-w-2xl 2xl:max-w-[38rem]"
|
||
>
|
||
With Clan you can create customized installation images, and skip time consuming manual installation steps
|
||
</p>
|
||
<div class="pt-10 flex justify-center">
|
||
|
||
<a href="https://docs.clan.lol/" target="_blank" class="button ">
|
||
<span class="button__title">Getting Started</span>
|
||
<span class="button__cover"></span>
|
||
</a>
|
||
|
||
|
||
</div>
|
||
</header>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<div class="container">
|
||
<article class="use-case">
|
||
<a href="" class="use-case__inner">
|
||
<div class="use-case__column">
|
||
<div class="use-case__column__inner">
|
||
<div class="">
|
||
<span class="pill pill--highlight">
|
||
<span class="font-small mono">Use Case</span>
|
||
</span>
|
||
|
||
</div>
|
||
<header class="use-case__header">
|
||
<h3 style="text-shadow: 0 0 8px rgba(0,0,0,.4);" class="text-white title ">
|
||
Foster decentralized<br/>computing in your homelab
|
||
</h3>
|
||
|
||
</header>
|
||
|
||
</div>
|
||
<div class="use-case__backdrop"></div>
|
||
</div>
|
||
<div style="height: inherit;" class="flex-1">
|
||
|
||
|
||
<img
|
||
src="/images/blogpost-image-idea_hu10709864461948383386.webp"
|
||
class="w-full h-full object-cover"
|
||
alt="Use Case"
|
||
/>
|
||
</div>
|
||
</a>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="py-16 md:py-24">
|
||
<div
|
||
style="font-size: 16vw;"
|
||
class="sticky top-0 z-10 px-6 text-billboard text-center text-clan-secondary-200 opacity-40"
|
||
>
|
||
<svg
|
||
class="w-full mx-auto"
|
||
width="947"
|
||
height="141"
|
||
viewBox="0 0 947 141"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M866.035 141H845.931V0H876.086V20.1724H886.207V40.3447H896.259V60.4482H906.311V80.6206H916.431V100.724H926.483V0H946.586V141H916.431V120.896H906.311V100.724H896.259V80.6206H886.207V60.4482H876.086V40.3447H866.035V141Z"
|
||
fill="#91ACAF"
|
||
/>
|
||
<path
|
||
d="M735.224 141H715.121V110.845H725.172V80.6206H735.224V50.3965H745.276V20.1724H755.396V0H785.621V20.1724H795.672V50.3965H805.724V80.6206H815.776V110.845H825.896V141H805.724V110.845H735.224V141ZM745.276 90.6724H795.672V80.6206H785.621V50.3965H775.5V30.2241H765.448V50.3965H755.396V80.6206H745.276V90.6724Z"
|
||
fill="#91ACAF"
|
||
/>
|
||
<path
|
||
d="M699.974 141H609.371V0H629.474V120.896H699.974V141Z"
|
||
fill="#91ACAF"
|
||
/>
|
||
<path
|
||
d="M558.974 141H498.526V130.948H488.474V120.896H478.422V110.845H468.371V30.2241H478.422V20.1724H488.474V10.1206H498.526V0H558.974V10.1206H569.026V20.1724H579.146V30.2241H589.198V50.3965H569.026V40.3447H558.974V30.2241H548.922V20.1724H508.646V30.2241H498.526V40.3447H488.474V100.724H498.526V110.845H508.646V120.896H548.922V110.845H558.974V100.724H569.026V90.6724H589.198V110.845H579.146V120.896H569.026V130.948H558.974V141Z"
|
||
fill="#91ACAF"
|
||
/>
|
||
<path
|
||
d="M372.81 141H352.707V80.6206H342.586V60.4482H332.534V40.3447H322.482V20.1724H312.431V0H332.534V20.1724H342.586V40.3447H352.707V60.4482H372.81V40.3447H382.931V20.1724H392.982V0H413.086V20.1724H403.034V40.3447H392.982V60.4482H382.931V80.6206H372.81V141Z"
|
||
fill="#91ACAF"
|
||
/>
|
||
<path
|
||
d="M206.75 141H186.646V0H206.75V55.4224H277.25V0H297.422V141H277.25V75.5947H206.75V141Z"
|
||
fill="#91ACAF"
|
||
/>
|
||
<path
|
||
d="M60.7925 141H30.5684V120.896H20.5166V80.6206H10.4648V40.3447H0.413086V0H20.5166V40.3447H30.5684V80.6206H40.689V110.845H50.7407V80.6206H60.7925V40.3447H70.9131V0H101.068V40.3447H111.189V80.6206H121.241V110.845H131.292V80.6206H141.413V40.3447H151.465V0H171.568V40.3447H161.517V80.6206H151.465V120.896H141.413V141H111.189V120.896H101.068V80.6206H91.0166V40.3447H80.9648V80.6206H70.9131V120.896H60.7925V141Z"
|
||
fill="#91ACAF"
|
||
/>
|
||
</svg>
|
||
|
||
</div>
|
||
<div class="presentation">
|
||
|
||
<div class="js-slide slide bg-[#223536]">
|
||
<div class="slide__meta">
|
||
<p style="color: #ffffff" class="flex items-center gap-4">
|
||
<span style="color: #fff" class="text-base"
|
||
>01</span
|
||
><span
|
||
><svg
|
||
class="opacity-85"
|
||
width="8"
|
||
viewBox="0 0 18 31"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M3.81201 31H0.924805V27.1504H2.84961V23.2876H4.77441V19.438H6.69922V15.5752H8.63721V11.7256H10.562V7.86279H12.4868V4H14.4248V0.150391H17.312V4H15.3872V7.86279H13.4492V11.7256H11.5244V15.5752H9.59961V19.438H7.6748V23.2876H5.73682V27.1504H3.81201V31Z"
|
||
fill="#fff"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
</p>
|
||
<hr
|
||
style="border-color:#fff"
|
||
class="w-full border-t border-dashed opacity-20"
|
||
/>
|
||
</div>
|
||
|
||
<div class="slide__content container justify-start">
|
||
<div style="color: #ffffff" class="slide__text">
|
||
<h3
|
||
style="text-wrap: balance"
|
||
class="text-white leading-tight md:leading-tight lg:leading-tight"
|
||
>
|
||
In the early days of the internet and personal computing, users had full control over their digital experiences, fostering innovation and collaboration in an open, decentralized environment.
|
||
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="justify-content: center"
|
||
class="slide__img slide__img--right"
|
||
>
|
||
|
||
|
||
<img
|
||
style="max-width: 640px"
|
||
width="918"
|
||
height="1000"
|
||
src="/images/mac_hu3379333004666624559.webp"
|
||
class="slide__img__item max-w-[640px] items-center"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<svg
|
||
class="absolute z-20 top-1/2 w-full h-full opacity-5 -translate-y-1/2 scale-110"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 1529.48 577.57"
|
||
>
|
||
<path
|
||
d="M1400.18,334.81c.98,7.17,2.1,14.78,3.05,22.41,3.29,26.65.68,52.73-8.26,78.05-4.66,13.21-10.35,25.91-18.61,37.45-19.94,27.86-45.99,46.69-80.21,51.12-44.19,5.72-79.97-9.81-105.56-46.92-2.96-4.3-4.97-9.25-8.08-15.16-2.44,2.01-4.78,3.33-6.31,5.28-14.45,18.37-32.18,32.96-52.74,43.72-16.35,8.56-34,13.39-52.74,14-19,.62-36.97-2.21-54.16-10.98-15.64-7.99-28.13-19.12-38.32-33.17-1.78-2.46-3.68-4.84-6.07-7.97-3.87,2.48-7.32,4.42-10.47,6.76-23.64,17.56-48.88,32-77.51,39.82-26.91,7.36-53.75,8.46-80.82.21-21.3-6.5-36.64-20.31-49.5-37.64-2.53-3.41-5.03-6.84-8.05-10.95-4.09,3.29-7.25,6.18-10.74,8.6-24.89,17.31-50.99,32.31-80.67,39.81-21.44,5.41-43,8.39-65.44,6.03-20.4-2.15-39.78-6.62-58.08-15.72-4.44-2.21-8.79-4.71-12.88-7.52-4.91-3.37-9.45-3.36-14.82-.83-16.36,7.71-33.34,14.02-51.09,17.37-15.21,2.87-30.7,5.5-46.11,5.72-22.2.33-43.43-5.34-60.49-20.46-15.12-13.41-22.48-31.32-23.11-51.33-.4-12.66.7-25.47,2.37-38.05,2.7-20.31,6.36-40.5,9.77-60.71,1.5-8.87.37-17.53-2.77-25.67-5.19-13.43-14.16-18.07-29.76-17.25-13.72.73-25.77,6.56-35.51,16.65-12.84,13.29-23.07,28.2-31.01,45-15.87,33.58-23.64,69.23-28.7,105.67-1.11,7.99-1.34,16.12-2.84,24.03-2.35,12.48-10.58,18.84-22.97,18.74-13.89-.11-22.91-8.69-22.88-22.72.02-8.04,1.17-16.09,2.05-24.11,1.51-13.88,3.24-27.74,4.77-41.62.15-1.4-.35-2.86-.76-5.81-3.13,2.1-5.41,3.41-7.45,5.02-23.39,18.53-47.15,36.54-72.69,52.07-7.43,4.52-14.82,9.12-22.41,13.38-6.62,3.72-13.4,6.15-21.29,2.96-16.41-6.63-20.16-27.62-6.28-38.65,7.52-5.98,15.71-11.19,23.94-16.19,29.55-17.99,57.2-38.54,83.12-61.41,9.54-8.42,18.59-17.4,27.92-26.05,3.6-3.33,5.24-7.26,5.89-12.2,5.28-40.33,10.5-80.68,16.4-120.92,4.01-27.35,8.29-54.7,13.94-81.74,3.54-16.95,8.66-33.81,15.19-49.85,7.73-18.98,19.72-35.37,39.07-44.59,35.64-16.98,78.1-1.94,91.19,38.66,5.93,18.38,6.39,37.24,3.85,56.26-4.72,35.32-16.56,68.12-34.71,98.72-3.01,5.08-5.83,10.27-8.58,15.49-.95,1.81-1.42,3.88-2.29,6.35,2.07.55,3.48,1.11,4.93,1.28,15.95,1.79,29.68,8.57,42.16,18.38,9.18,7.22,14.31,16.99,18.39,27.56,7.04,18.26,6.88,37.25,4.56,56.13-2.57,20.94-6.75,41.69-9.54,62.61-1.1,8.25-.73,16.77-.34,25.13.41,8.93,5.81,14.64,13.51,18.68,11.43,6,23.71,4.7,35.69,3.86,16.49-1.14,32.49-5.24,48.1-10.73,1.76-.62,3.49-1.32,5.19-2.09,8.87-4.08,9.33-5.05,5.65-14.13-13.41-33.09-14.63-66.98-7.3-101.6,3.18-15.04,8.24-29.26,15.45-42.81,14.97-28.11,37.25-46.38,69.35-50.61,25.11-3.31,47.57,3.45,65.56,21.66,11.9,12.04,18.42,27.08,20.68,43.96,3.61,26.9-2.62,51.6-15.52,75.17-12.8,23.38-31.49,41.38-51.26,58.55-5.32,4.62-10.62,9.26-17.39,15.16,4.43,1.98,7.24,3.57,10.25,4.52,14.71,4.59,29.87,6.34,45.15,5,21.16-1.86,41.7-6.28,60.9-16.14,17.84-9.16,33.67-21.03,48.96-33.79,5.18-4.33,7.52-9.46,6.43-16.4-5.02-32.12-4.08-64.34-1.79-96.64,2.22-31.32,6.16-62.39,11.32-93.35,6.05-36.3,15.17-71.76,28.85-105.91,8.59-21.43,19.37-41.78,36.4-58,19.21-18.3,41.86-22.69,66.47-14.07,20.58,7.21,31.63,23.59,36.03,44.2,3.23,15.14,4.18,30.39,2.87,46.2-2.46,29.59-7.76,58.49-15.26,87.08-6.56,25-15.67,49.06-26.37,72.64-16.38,36.09-37.06,69.65-58.47,102.81-7.07,10.94-15.14,21.28-23.26,31.48-3.44,4.32-3.56,7.83-1.5,12.7,12.7,29.96,38.99,40.38,68.18,36.56,32.92-4.31,60.07-19.82,85.67-40.17,12.49-9.92,17.13-19.22,13.86-35.27-4.85-23.8-3-48.35-2.13-72.53.71-19.81,2.96-39.64,5.89-59.26,4.09-27.32,8.81-54.58,14.42-81.63,7.48-36.05,18.8-71.02,37.52-102.9,9.06-15.43,20.14-29.78,36.65-38.87,24.74-13.62,64.11-9.26,79.03,23.18,5.67,12.33,8.89,24.88,9.24,38.59,1.39,54.66-10.42,106.82-29.28,157.6-14.65,39.46-34.11,76.63-56.74,112.06-11.02,17.25-23.3,33.71-35.31,50.32-2.66,3.68-3.65,6.72-1.79,11.04,9.51,22,25.11,36.71,49.69,38.08,19.88,1.1,38.87-3.53,55.28-15.93,25.6-19.35,42.01-45.13,53.83-74.55,8.33-20.73,14.63-42.23,25.17-62.17,11.96-22.62,28.07-41.25,49.92-54.11,24.84-14.62,51.59-20.38,80.64-14.15,15.29,3.28,28.44,10.71,41.98,17.53,9.29,4.68,18.75,8.23,29.1,9.31,24.28,2.53,44.78-4.52,60.33-23.93,5.34-6.67,10.75-12.72,20.45-12.79,18.32-.14,29.9,18.01,20.56,33.72-4.54,7.63-10.42,14.88-17.05,20.78-20.41,18.14-44.63,27.8-71.94,29.58-1.53.1-3.07.38-4.57.72-.55.13-1.01.68-2.28,1.59ZM1281.45,477.87c10.66,1.35,21.44-1.04,31.2-7.32,17.52-11.27,30.27-26.54,37.74-46.06,4.81-12.57,7.01-25.56,7.86-39.08,1.05-16.71-.41-32.8-6.2-48.45-3.75-10.12-9.69-19.02-18.72-24.97-20.7-13.65-42.21-12.84-63.53-1.51-10.88,5.78-19.66,14.69-26.49,24.55-19.16,27.68-26.03,58.72-21.17,92.07,1.77,12.14,6.24,23.54,14.33,32.95,11.52,13.38,26.47,19.08,44.96,17.82ZM995.91,368.47c.74.21,1.49.42,2.23.63,4.65-6.89,9.56-13.63,13.92-20.71,13.35-21.7,25.56-44.01,36.48-67.07,12.45-26.27,21.66-53.62,27.57-81.96,4.43-21.24,7.75-42.75,10.56-64.26,1.6-12.28,1.46-24.84-1.74-37.05-3.28-12.52-12.51-15.36-22.28-6.75-7.99,7.04-14.5,15.16-19.39,24.79-13.64,26.82-22.14,55.36-28.64,84.53-6.14,27.59-11.27,55.37-13.58,83.61-1.44,17.61-3.75,35.16-4.99,52.78-.73,10.44-.13,20.97-.13,31.46ZM770.32,365.64c1,.38,1.99.76,2.99,1.14,1.89-2.26,4.11-4.33,5.63-6.83,6.78-11.15,13.71-22.22,19.92-33.69,9.61-17.75,19.55-35.41,27.77-53.81,11.8-26.43,20.66-54,26.49-82.42,5.44-26.52,9.88-53.18,8.28-80.44-.22-3.7-.36-7.5-1.3-11.05-2.79-10.59-13.9-14.6-22.43-7.68-5.23,4.25-10.05,9.41-13.82,14.99-12.48,18.49-20,39.33-26.15,60.54-7.7,26.56-14.13,53.48-17.55,81-2.33,18.79-4.5,37.59-6.45,56.42-1.41,13.57-2.53,27.18-3.39,40.79-.44,6.98-.02,14.02.01,21.03ZM230.45,284.56c.98.38,1.96.76,2.93,1.14,2.22-2.44,4.6-4.75,6.62-7.35,12.97-16.67,24.38-34.35,35.31-52.45,16.08-26.66,28.2-54.66,32.63-85.52,1.49-10.36,1.51-21.12.56-31.55-.5-5.49-3.92-11.1-7.25-15.79-1.83-2.58-6.08-4.28-9.47-4.74-10.95-1.49-18.38,4.66-23.68,13.28-3.38,5.51-5.87,11.64-8.2,17.71-7.17,18.65-10.73,38.26-14.04,57.83-4.71,27.84-8.7,55.8-12.83,83.74-1.16,7.85-1.73,15.8-2.57,23.7ZM522.35,436.18c3.89-2.8,7.26-4.92,10.29-7.44,12.16-10.1,24.11-20.35,34.65-32.3,8.94-10.14,17.1-20.72,21.9-33.24,5.64-14.71,8.18-29.99,2.02-45.45-4.23-10.62-13.04-16.58-24.32-17.04-10.3-.42-18.59,3.56-26.24,10.06-13.42,11.41-19.92,26.56-24.67,42.96-5.41,18.67-3.83,37.65-2.73,56.49.51,8.73,3.36,17.49,9.09,25.96Z"
|
||
/>
|
||
</svg>
|
||
|
||
|
||
|
||
|
||
<div style="background: #223536" class="slide__bg"></div>
|
||
<div
|
||
class="js-slide-cover absolute z-50 top-0 left-0 w-full h-full bg-black opacity-0"
|
||
></div>
|
||
</div>
|
||
|
||
|
||
<div class="js-slide slide bg-[#397396]">
|
||
<div class="slide__meta">
|
||
<p style="color: #ffffff" class="flex items-center gap-4">
|
||
<span style="color: #fff" class="text-base"
|
||
>02</span
|
||
><span
|
||
><svg
|
||
class="opacity-85"
|
||
width="8"
|
||
viewBox="0 0 18 31"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M3.81201 31H0.924805V27.1504H2.84961V23.2876H4.77441V19.438H6.69922V15.5752H8.63721V11.7256H10.562V7.86279H12.4868V4H14.4248V0.150391H17.312V4H15.3872V7.86279H13.4492V11.7256H11.5244V15.5752H9.59961V19.438H7.6748V23.2876H5.73682V27.1504H3.81201V31Z"
|
||
fill="#fff"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
</p>
|
||
<hr
|
||
style="border-color:#fff"
|
||
class="w-full border-t border-dashed opacity-20"
|
||
/>
|
||
</div>
|
||
|
||
<div class="slide__content container justify-end">
|
||
<div style="color: #ffffff" class="slide__text">
|
||
<h3
|
||
style="text-wrap: balance"
|
||
class="text-white leading-tight md:leading-tight lg:leading-tight"
|
||
>
|
||
Over the past two decades, a concerning shift occurred: computers and smartphones evolved into increasingly closed systems, while a handful of tech companies carved up the once-open internet.
|
||
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="justify-content: center"
|
||
class="slide__img slide__img--left"
|
||
>
|
||
|
||
|
||
<img
|
||
style="max-width: 640px"
|
||
width="1049"
|
||
height="1000"
|
||
src="/images/globe_hu15176621424956668263.webp"
|
||
class="slide__img__item max-w-[640px] items-center"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
|
||
|
||
<div style="background: #397396" class="slide__bg"></div>
|
||
<div
|
||
class="js-slide-cover absolute z-50 top-0 left-0 w-full h-full bg-black opacity-0"
|
||
></div>
|
||
</div>
|
||
|
||
|
||
<div class="js-slide slide bg-[#95ABAE]">
|
||
<div class="slide__meta">
|
||
<p style="color: #162324" class="flex items-center gap-4">
|
||
<span style="color: #162324" class="text-base"
|
||
>03</span
|
||
><span
|
||
><svg
|
||
class="opacity-85"
|
||
width="8"
|
||
viewBox="0 0 18 31"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M3.81201 31H0.924805V27.1504H2.84961V23.2876H4.77441V19.438H6.69922V15.5752H8.63721V11.7256H10.562V7.86279H12.4868V4H14.4248V0.150391H17.312V4H15.3872V7.86279H13.4492V11.7256H11.5244V15.5752H9.59961V19.438H7.6748V23.2876H5.73682V27.1504H3.81201V31Z"
|
||
fill="#162324"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
</p>
|
||
<hr
|
||
style="border-color:#162324"
|
||
class="w-full border-t border-dashed opacity-20"
|
||
/>
|
||
</div>
|
||
|
||
<div class="slide__content container justify-start">
|
||
<div style="color: #162324" class="slide__text">
|
||
<h3
|
||
style="text-wrap: balance"
|
||
class="text-white leading-tight md:leading-tight lg:leading-tight"
|
||
>
|
||
Users traded control and ownership for seamless experiences and access to powerful, free applications. Opting out is possible, but convenience is highly persuasive.
|
||
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="justify-content: end"
|
||
class="slide__img slide__img--right"
|
||
>
|
||
|
||
|
||
<img
|
||
style="max-width: 700px"
|
||
width="868"
|
||
height="1000"
|
||
src="/images/phone_hu12128726265768555589.webp"
|
||
class="slide__img__item max-w-[700px] slide__img__item--right"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
|
||
|
||
<svg
|
||
class="absolute z-20 w-10/12 h-auto top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-10"
|
||
width="2062"
|
||
height="918"
|
||
viewBox="0 0 2062 918"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M1264 918H342.003V860.74H284.502V803.87H227V632.87H284.502V576H342.003V519.13H514.902V576H572.403V519.13H630.298V461.87H687.8V405H918.2V461.87H975.702V519.13H1033.6V576H1091.1V519.13H1264V576H1321.5V632.87H1379V803.87H1321.5V860.74H1264V918Z"
|
||
fill="#DCE4E5"
|
||
/>
|
||
<path
|
||
d="M1979.14 369H1314.86V327.813H1273.43V286.907H1232V163.907H1273.43V123H1314.86V82.0934H1439.43V123H1480.86V82.0934H1522.57V40.9066H1564V0H1730V40.9066H1771.43V82.0934H1813.14V123H1854.57V82.0934H1979.14V123H2020.57V163.907H2062V286.907H2020.57V327.813H1979.14V369Z"
|
||
fill="#DCE4E5"
|
||
/>
|
||
<path
|
||
d="M408.678 202H45.3224V179.453H22.6612V157.06H0V89.7266H22.6612V67.3333H45.3224V44.94H113.461V67.3333H136.122V44.94H158.939V22.3933H181.6V0H272.4V22.3933H295.061V44.94H317.878V67.3333H340.539V44.94H408.678V67.3333H431.339V89.7266H454V157.06H431.339V179.453H408.678V202Z"
|
||
fill="#DCE4E5"
|
||
/>
|
||
</svg>
|
||
|
||
|
||
<div style="background: #95ABAE" class="slide__bg"></div>
|
||
<div
|
||
class="js-slide-cover absolute z-50 top-0 left-0 w-full h-full bg-black opacity-0"
|
||
></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<section>
|
||
<div class="container">
|
||
<header>
|
||
<h2></h2>
|
||
</header>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="relative">
|
||
<div class="">
|
||
<div class="container relative z-10 flex flex-col gap-16 md:gap-24 lg:gap-32">
|
||
<header class="mx-auto w-full max-w-[40rem] 2xl:max-w-[56rem]">
|
||
<h2 style="text-wrap: balance" class="h1 py-12 pb-6 md:py-16 text-center">
|
||
<span>
|
||
This transformation
|
||
</span>
|
||
<br />
|
||
<span class="text-clan-secondary-400">
|
||
has led to several pressing issues that we face today
|
||
</span>
|
||
</h2>
|
||
</header>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="container overflow-hidden lg:overflow-visible">
|
||
<div class="py-12">
|
||
<div
|
||
class="flex flex-col gap-6 items-center lg:flex-row lg:justify-center"
|
||
>
|
||
|
||
<div
|
||
style="z-index: 1"
|
||
class="js-statement flex items-center"
|
||
data-rotation="-8 bg-white"
|
||
>
|
||
<div
|
||
class="relative flex items-end w-full max-w-96 h-96 lg:h-[23rem] 2xl:h-[30rem] rounded-xl overflow-hidden"
|
||
>
|
||
<div class="absolute z-40 flex items-center p-8">
|
||
<header class="js-statement-headline">
|
||
<h3 class="">
|
||
<span>
|
||
Unprecented collection and monetization of personal data
|
||
</span>
|
||
</h3>
|
||
</header>
|
||
</div>
|
||
<div
|
||
style="background: #2E96E1"
|
||
class="relative w-full h-full pt-6"
|
||
>
|
||
|
||
|
||
<img
|
||
src="/images/tile_hu8983134257733771126.webp"
|
||
width="1918"
|
||
height="1000"
|
||
class="z-20 w-full h-full object-top object-contain lg:object-contain object-center-bottom mix-blend-screen"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div
|
||
style="z-index: 2"
|
||
class="js-statement flex items-center"
|
||
data-rotation="0 bg-white"
|
||
>
|
||
<div
|
||
class="relative flex items-end w-full max-w-96 h-96 lg:h-[23rem] 2xl:h-[30rem] rounded-xl overflow-hidden"
|
||
>
|
||
<div class="absolute z-40 flex items-center p-8">
|
||
<header class="js-statement-headline">
|
||
<h3 class="">
|
||
<span>
|
||
Undermining of communities and personal relationships
|
||
</span>
|
||
</h3>
|
||
</header>
|
||
</div>
|
||
<div
|
||
style="background: #60E432"
|
||
class="relative w-full h-full pt-6"
|
||
>
|
||
|
||
|
||
<img
|
||
src="/images/tile-1_hu11095625304547506092.webp"
|
||
width="1918"
|
||
height="1000"
|
||
class="z-20 w-full h-full object-top object-contain lg:object-contain object-center-bottom mix-blend-screen"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div
|
||
style="z-index: 3"
|
||
class="js-statement flex items-center"
|
||
data-rotation="10 bg-white"
|
||
>
|
||
<div
|
||
class="relative flex items-end w-full max-w-96 h-96 lg:h-[23rem] 2xl:h-[30rem] rounded-xl overflow-hidden"
|
||
>
|
||
<div class="absolute z-40 flex items-center p-8">
|
||
<header class="js-statement-headline">
|
||
<h3 class="">
|
||
<span>
|
||
Manipulative algorithms designed to influence behavior
|
||
</span>
|
||
</h3>
|
||
</header>
|
||
</div>
|
||
<div
|
||
style="background: #E73EB7"
|
||
class="relative w-full h-full pt-6"
|
||
>
|
||
|
||
|
||
<img
|
||
src="/images/tile-2_hu14301213009822237956.webp"
|
||
width="1918"
|
||
height="1000"
|
||
class="z-20 w-full h-full object-top object-contain lg:object-contain object-center-bottom mix-blend-screen"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pb-16 md:pb-24 lg:pb-32">
|
||
<div
|
||
class="container relative z-10 flex flex-col gap-16 md:gap-24 lg:gap-32"
|
||
>
|
||
<header class="mx-auto w-full max-w-[40rem] 2xl:max-w-[56rem]">
|
||
<h2
|
||
style="text-wrap: balance"
|
||
class="h1 py-12 pb-6 md:py-16 text-center"
|
||
>
|
||
<span> Despite growing awareness, </span>
|
||
<br />
|
||
<span class="text-clan-secondary-400">
|
||
there is still a lack of clear, practical solutions to change
|
||
course.
|
||
</span>
|
||
</h2>
|
||
</header>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="teaser relative pt-8 pb-16 md:pb-24 overflow-hidden teaser--inverted"
|
||
>
|
||
<div class="relative z-20 container">
|
||
<div class="flex justify-center">
|
||
<header class="flex flex-col gap-3 text-center">
|
||
<div class="article__header-image">
|
||
|
||
|
||
<figure class="relative w-40 h-40 mx-auto">
|
||
<div class="teaser__marker absolute z-30">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M7 12V14H9V16H10V17H11V18H13V17H14V16H15V14H17V12H19V9H17V10H15V12H13V3H11V12H9V10H7V9H5V12H7Z"
|
||
fill="black"
|
||
/>
|
||
<path d="M19 17V19H5V17H3V21H21V17H19Z" fill="black" />
|
||
</svg>
|
||
|
||
</div>
|
||
<img class="" src="/images/clan-client-folder-3.svg" />
|
||
</figure>
|
||
|
||
</div>
|
||
<h2 class="h1 w-full max-w-2xl 2xl:max-w-[50rem]">
|
||
Get started with our framework
|
||
</h2>
|
||
<p
|
||
class="teaser__description p-teaser w-full max-w-2xl 2xl:max-w-[38rem]"
|
||
>
|
||
With Clan you can create customized installation images, and skip time consuming manual installation steps
|
||
</p>
|
||
<div class="pt-10 flex justify-center">
|
||
|
||
<a href="https://docs.clan.lol/" target="_blank" class="button ">
|
||
<span class="button__title">Getting Started</span>
|
||
<span class="button__cover"></span>
|
||
</a>
|
||
|
||
|
||
</div>
|
||
</header>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<figure class="absolute z-10 top-0 left-0 mx-auto">
|
||
<img
|
||
class="mix-blend-overlay opacity-5"
|
||
width="3334"
|
||
height="1736"
|
||
src="/images/clan-key-visual.png"
|
||
/>
|
||
</figure>
|
||
|
||
|
||
</section>
|
||
|
||
|
||
</main>
|
||
<footer>
|
||
<div class="py-8">
|
||
<div class="container text-center">
|
||
<span class="font-small"
|
||
>Copyright 2024. All rights reserved.</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
</footer>
|
||
</div>
|
||
<div class="body__grain"></div>
|
||
|
||
|
||
<script
|
||
src="/js/main.e15ab3b4fd1f8791a6ed4236c754d55d3da3b6e3bcc231690e29c201e8c29a3b.js"
|
||
integrity="sha256-4VqztP0fh5Gm7UI2x1TVXT2jtuO8wjFpDinCAejCmjs="
|
||
crossorigin="anonymous"
|
||
></script>
|
||
|
||
</body>
|
||
</html>
|