philipp/uncloud
1
0
Fork 0
mirror of https://github.com/psviderski/uncloud.git synced 2026-08-26 19:13:34 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
b0162528217c8d48b83ccfa1f498edcd9eb75f90
uncloud/site/index.html
T

820 lines
63 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deploy Docker apps on your own infrastructure | Uncloud</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="./style.css" rel="stylesheet">
<link rel="apple-touch-icon" href="./images/apple-touch-icon.png" sizes="180x180"/>
<link rel="icon" type="image/svg+xml" href="./images/logo.svg"/>
<link rel="alternate icon" type="image/png" href="./images/favicon.png" sizes="96x96"/>
</head>
<body class="font-inter antialiased bg-white text-zinc-900 tracking-tight">
<!-- Page wrapper -->
<div class="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
<!-- Site header -->
<header class="absolute top-2 md:top-6 w-full z-30">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex items-center justify-between h-14">
<!-- Site branding -->
<div class="shrink-0 mr-4">
<a class="flex items-center" href="index.html">
<img class="w-8 h-8 rounded shadow-sm shadow-zinc-950/20" src="./images/logo.svg" alt="Logo">
<span class="ml-2 font-semibold text-lg text-zinc-900">uncloud</span>
</a>
</div>
<!-- Navigation links -->
<nav class="flex grow">
<ul class="flex grow justify-end flex-wrap items-center">
<li>
<a class="text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition"
href="https://github.com/psviderski/uncloud">
<svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/>
<path d="M9 18c-4.51 2-5-2-7-2"/>
</svg>
<span class="ml-1 hidden sm:inline">View Source</span>
</a>
</li>
<li class="ml-1">
<a class="btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
href="https://github.com/psviderski/uncloud">Get Started</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Page content -->
<main class="grow">
<!-- Hero -->
<section
class="relative before:absolute before:inset-0 before:h-80 before:pointer-events-none before:bg-gradient-to-b before:from-zinc-100 before:-z-10">
<div class="pt-32 pb-12 md:pt-40 md:pb-20">
<!-- Section content -->
<div class="px-4 sm:px-6">
<div class="max-w-3xl mx-auto">
<div class="text-center pb-12 md:pb-16">
<h1 class="font-inter-tight text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-zinc-500 via-zinc-900 to-zinc-900 pb-4">
Run on your servers<br>
Cut cloud costs
</h1>
<p class="text-lg text-zinc-500 mb-8">
Uncloud is a lightweight Docker clustering tool for running web apps on your own servers
— from cloud VMs to bare metal.
Replace Heroku and Render, no Kubernetes required.
</p>
<div class="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<div>
<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
href="quickstart.html">Quick Start</a>
</div>
<div>
<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow flex items-center justify-center"
href="https://github.com/yourusername/uncloud">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/>
<path d="M9 18c-4.51 2-5-2-7-2"/>
</svg>
Star on GitHub
</a>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
<div class="coding w-full bg-zinc-800 rounded-lg border border-zinc-700/50 shadow-2xl">
<!-- Title bar -->
<div class="pl-4 pt-4 flex items-center">
<div class="flex gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
</div>
<!-- Terminal content -->
<div class="p-4 text-sm sm:p-6 sm:text-[0.9375rem] text-white overflow-x-auto">
<pre class="text-zinc-500 select-none"># Start with any cloud VM or your own hardware</pre>
<pre><span class="text-emerald-500 select-none">$ </span>uc machine init root@137.123.45.67</pre>
<pre> </pre>
<pre class="text-zinc-500 select-none"># Deploy your app with automatic HTTPS</pre>
<pre><span class="text-emerald-500 select-none">$ </span>uc run --name my-app -p app.example.com:8000/https registry/app</pre>
<pre class="text-zinc-200">✨ Your app is available at <span class="underline">https://app.example.com</span></pre>
<pre> </pre>
<pre class="text-zinc-500 select-none"># Achieve high availability by adding more machines and scaling the app</pre>
<pre><span
class="text-emerald-500 select-none">$ </span>uc machine add ubuntu@65.21.45.67</pre>
<pre><span class="text-emerald-500 select-none">$ </span>uc scale my-app --replicas 2</pre>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="relative bg-zinc-50">
<div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="max-w-3xl mx-auto text-center pb-12">
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">Go further than
the speed of thought</h2>
<p class="text-lg text-zinc-500">AI reads and understands your designs, and with nothing more
than a single line of feedback, perform complex actions autonomously.</p>
</div>
<div x-data="{ tab: '1' }">
<!-- Tabs buttons -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
<button
:class="tab !== '1' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
class="text-left px-4 py-5 border border-transparent rounded"
@click.prevent="tab = '1'"
>
<div class="flex items-center justify-between mb-1">
<div class="font-inter-tight font-semibold text-zinc-900">AI Effects</div>
<svg :class="tab !== '1' ? 'hidden' : ''" class="fill-zinc-400 shrink-0 ml-2"
xmlns="http://www.w3.org/2000/svg" width="10" height="10">
<path d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"/>
</svg>
</div>
<div class="text-sm text-zinc-500">Visually structure your designs and structure them
easily.
</div>
</button>
<button
:class="tab !== '2' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
class="text-left px-4 py-5 border border-transparent rounded"
@click.prevent="tab = '2'"
>
<div class="flex items-center justify-between mb-1">
<div class="font-inter-tight font-semibold text-zinc-900">Creative Mode</div>
<svg :class="tab !== '2' ? 'hidden' : ''" class="fill-zinc-400 shrink-0 ml-2"
xmlns="http://www.w3.org/2000/svg" width="10" height="10">
<path d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"/>
</svg>
</div>
<div class="text-sm text-zinc-500">Visually structure your designs and structure them
easily.
</div>
</button>
<button
:class="tab !== '3' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
class="text-left px-4 py-5 border border-transparent rounded"
@click.prevent="tab = '3'"
>
<div class="flex items-center justify-between mb-1">
<div class="font-inter-tight font-semibold text-zinc-900">Realistic Images</div>
<svg :class="tab !== '3' ? 'hidden' : ''" class="fill-zinc-400 shrink-0 ml-2"
xmlns="http://www.w3.org/2000/svg" width="10" height="10">
<path d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"/>
</svg>
</div>
<div class="text-sm text-zinc-500">Visually structure your designs and structure them
easily.
</div>
</button>
<button
:class="tab !== '4' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
class="text-left px-4 py-5 border border-transparent rounded"
@click.prevent="tab = '4'"
>
<div class="flex items-center justify-between mb-1">
<div class="font-inter-tight font-semibold text-zinc-900">Powerful Plugins</div>
<svg :class="tab !== '4' ? 'hidden' : ''" class="fill-zinc-400 shrink-0 ml-2"
xmlns="http://www.w3.org/2000/svg" width="10" height="10">
<path d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"/>
</svg>
</div>
<div class="text-sm text-zinc-500">Visually structure your designs and structure them
easily.
</div>
</button>
</div>
<!-- Tabs items -->
<div class="relative lg:max-w-none [mask-image:linear-gradient(white_0%,white_calc(100%-40px),_transparent_calc(100%-1px))] -mx-6">
<div class="relative flex flex-col pt-12 md:pt-20 mx-6">
<!-- Item 1 -->
<div
class="w-full text-center"
x-show="tab === '1'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
>
<div class="inline-flex relative align-top">
<img class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
src="./images/feature-01.png" width="600" height="360" alt="Feature 01"/>
<img class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
src="./images/feature-illustration.png" width="273" height="288"
alt="Illustration" aria-hidden="true">
</div>
</div>
<!-- Item 2 -->
<div
class="w-full text-center"
x-show="tab === '2'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
>
<div class="inline-flex relative align-top">
<img class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
src="./images/feature-01.png" width="600" height="360" alt="Feature 02"/>
<img class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
src="./images/feature-illustration.png" width="273" height="288"
alt="Illustration" aria-hidden="true">
</div>
</div>
<!-- Item 3 -->
<div
class="w-full text-center"
x-show="tab === '3'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
>
<div class="inline-flex relative align-top">
<img class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
src="./images/feature-01.png" width="600" height="360" alt="Feature 03"/>
<img class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
src="./images/feature-illustration.png" width="273" height="288"
alt="Illustration" aria-hidden="true">
</div>
</div>
<!-- Item 4 -->
<div
class="w-full text-center"
x-show="tab === '4'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-4"
>
<div class="inline-flex relative align-top">
<img class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
src="./images/feature-01.png" width="600" height="360" alt="Feature 04"/>
<img class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
src="./images/feature-illustration.png" width="273" height="288"
alt="Illustration" aria-hidden="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features #2 -->
<section>
<div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="relative max-w-3xl mx-auto text-center pb-12 md:pb-20">
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">AI-powered
features and effects</h2>
<p class="text-lg text-zinc-500">Whenever you are ready, just hit publish to turn your site
sketches into an actual designs. No creating, no skills, no reshaping.</p>
</div>
<div class="max-w-xs mx-auto sm:max-w-none grid sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-4 lg:gap-8">
<article
class="sm:col-span-2 flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
<div class="grow flex flex-col p-5 pt-6">
<div class="flex items-center space-x-3 mb-1">
<svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
height="20">
<path d="M17 9c.6 0 1 .4 1 1v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h6c.6 0 1 .4 1 1s-.4 1-1 1H4v12h12v-6c0-.6.4-1 1-1Zm-.7-6.7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-8 8c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l8-8Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-900">Truly Collaborative</h3>
</div>
<p class="grow max-w-md text-sm text-zinc-500">Create teams and organize your designs
into folders using project specs and insights.</p>
</div>
<figure>
<img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
src="./images/feature-post-01.png" width="721" height="280" alt="Feature Post 01">
</figure>
</article>
<article
class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
<div class="grow flex flex-col p-5 pt-6">
<div class="flex items-center space-x-3 mb-1">
<svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
height="20">
<path d="m6.035 17.335-4-14c-.2-.8.5-1.5 1.3-1.3l14 4c.9.3 1 1.5.1 1.9l-6.6 2.9-2.8 6.6c-.5.9-1.7.8-2-.1Zm-1.5-12.8 2.7 9.5 1.9-4.4c.1-.2.3-.4.5-.5l4.4-1.9-9.5-2.7Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-900">Advanced AI</h3>
</div>
<p class="grow max-w-md text-sm text-zinc-500">Generate images and explore new ways of
presenting your designs with AI.</p>
</div>
<figure>
<img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
src="./images/feature-post-02.png" width="342" height="280" alt="Feature Post 02">
</figure>
</article>
<article
class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
<div class="grow flex flex-col p-5 pt-6">
<div class="flex items-center space-x-3 mb-1">
<svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
height="20">
<path d="M8.974 16c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-900">Simple Snippets</h3>
</div>
<p class="grow max-w-md text-sm text-zinc-500">Get your scenes inside your projects
using simple embed code/snippets.</p>
</div>
<figure>
<img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
src="./images/feature-post-03.png" width="342" height="280" alt="Feature Post 03">
</figure>
</article>
<article
class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
<div class="grow flex flex-col p-5 pt-6">
<div class="flex items-center space-x-3 mb-1">
<svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
height="20">
<path d="M9.3 11.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM9.3 17.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM2.3 12.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-900">Precise Activity</h3>
</div>
<p class="grow max-w-md text-sm text-zinc-500">Easily make drag and drop interactions
without coding.</p>
</div>
<figure>
<img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
src="./images/feature-post-04.png" width="342" height="280" alt="Feature Post 04">
</figure>
</article>
<article
class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
<div class="grow flex flex-col p-5 pt-6">
<div class="flex items-center space-x-3 mb-1">
<svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
height="20">
<path d="M16 2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h8.667l3.733 2.8A1 1 0 0 0 18 17V4a2 2 0 0 0-2-2Zm0 13-2.4-1.8a1 1 0 0 0-.6-.2H4V4h12v11Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-900">Real-time Feedback</h3>
</div>
<p class="grow max-w-md text-sm text-zinc-500">Create tasks, projects, issues and more
in just seconds.</p>
</div>
<figure>
<img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
src="./images/feature-post-05.png" width="342" height="280" alt="Feature Post 05">
</figure>
</article>
</div>
</div>
</div>
</section>
<!-- Features #3 -->
<section
class="relative bg-zinc-800 after:absolute after:top-0 after:right-0 after:h-full after:w-96 after:pointer-events-none after:bg-gradient-to-l after:from-zinc-800 max-lg:after:hidden">
<div class="py-12 md:py-20">
<!-- Carousel -->
<div class="max-w-xl lg:max-w-6xl mx-auto px-4 sm:px-6">
<div class="lg:flex space-y-12 lg:space-y-0 lg:space-x-12 xl:space-x-24" x-data="{ tab: '1' }">
<!-- Content -->
<div class="lg:max-w-none lg:min-w-[524px]">
<div class="mb-8">
<div class="inline-flex text-sm font-medium text-zinc-400 px-4 py-0.5 border border-transparent [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] rounded-full mb-4">
Scale Your Team
</div>
<h3 class="font-inter-tight text-3xl font-bold text-zinc-200 mb-4">Design-powered
workflows for teams of any size</h3>
<p class="text-lg text-zinc-500">Gray can understand what you are designing, learn from
your feedback to take your creativity further, and turn it instantly into beautiful
images.</p>
</div>
<!-- Tabs buttons -->
<div class="mb-8 md:mb-0 space-y-2">
<button
:class="tab !== '1' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
class="text-left flex items-center px-6 py-4 rounded border border-transparent"
@click.prevent="tab = '1'"
>
<svg class="shrink-0 fill-zinc-400 mr-3" xmlns="http://www.w3.org/2000/svg"
width="24" height="24">
<path d="m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z"/>
</svg>
<div>
<div class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1">Make
designs feel real
</div>
<div class="text-zinc-500">Save time and keep things consistent with reusable
images, and 3D assets in shared libraries.
</div>
</div>
</button>
<button
:class="tab !== '2' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
class="text-left flex items-center px-6 py-4 rounded border border-transparent"
@click.prevent="tab = '2'"
>
<svg class="shrink-0 fill-zinc-400 mr-3" xmlns="http://www.w3.org/2000/svg"
width="24" height="24">
<path d="m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z"/>
</svg>
<div>
<div class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1">Bring
creatives closer
</div>
<div class="text-zinc-500">Save time and keep things consistent with reusable
images, and 3D assets in shared libraries.
</div>
</div>
</button>
<button
:class="tab !== '3' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
class="text-left flex items-center px-6 py-4 rounded border border-transparent"
@click.prevent="tab = '3'"
>
<svg class="shrink-0 fill-zinc-400 mr-3" xmlns="http://www.w3.org/2000/svg"
width="24" height="24">
<path d="m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z"/>
</svg>
<div>
<div class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1">Scale and
align your design team
</div>
<div class="text-zinc-500">Save time and keep things consistent with reusable
images, and 3D assets in shared libraries.
</div>
</div>
</button>
</div>
</div>
<!-- Tabs items -->
<div class="relative lg:max-w-none">
<div class="relative flex flex-col">
<!-- Item 1 -->
<div
class="w-full"
x-show="tab === '1'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 translate-x-8"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 -translate-x-8"
>
<div>
<img class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
src="./images/carousel-illustration-01.jpg" width="800" height="620"
alt="Carousel 01"/>
</div>
</div>
<!-- Item 2 -->
<div
class="w-full"
x-show="tab === '2'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 translate-x-8"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 -translate-x-8"
>
<div>
<img class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
src="./images/carousel-illustration-01.jpg" width="800" height="620"
alt="Carousel 02"/>
</div>
</div>
<!-- Item 3 -->
<div
class="w-full"
x-show="tab === '3'"
x-transition:enter="transition ease-in-out duration-700 transform order-first"
x-transition:enter-start="opacity-0 translate-x-8"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform absolute"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 -translate-x-8"
>
<div>
<img class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
src="./images/carousel-illustration-01.jpg" width="800" height="620"
alt="Carousel 03"/>
</div>
</div>
</div>
<!-- Gear illustration -->
<img class="absolute left-0 bottom-0 -translate-x-1/2 translate-y-1/3 mix-blend-exclusion max-lg:w-32"
src="./images/features-illustration.png" alt="Features 02 illustration" width="173"
height="167" aria-hidden="true">
</div>
</div>
</div>
<!-- Features blocks -->
<div class="max-w-6xl mx-auto px-4 sm:px-6 mt-24 lg:mt-32">
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-16">
<!-- Block #1 -->
<div>
<div class="flex items-center mb-1">
<svg class="fill-zinc-400 mr-2" xmlns="http://www.w3.org/2000/svg" width="16"
height="16">
<path d="M15 9a1 1 0 0 1 0 2c-.441 0-1.243.92-1.89 1.716.319 1.005.529 1.284.89 1.284a1 1 0 0 1 0 2 2.524 2.524 0 0 1-2.339-1.545A3.841 3.841 0 0 1 9 16a1 1 0 0 1 0-2c.441 0 1.243-.92 1.89-1.716C10.57 11.279 10.361 11 10 11a1 1 0 0 1 0-2 2.524 2.524 0 0 1 2.339 1.545A3.841 3.841 0 0 1 15 9Zm-5-1H7.51l-.02.142C6.964 11.825 6.367 16 3 16a3 3 0 0 1-3-3 1 1 0 0 1 2 0 1 1 0 0 0 1 1c1.49 0 1.984-2.48 2.49-6H3a1 1 0 1 1 0-2h2.793c.52-3.1 1.4-6 4.207-6a3 3 0 0 1 3 3 1 1 0 0 1-2 0 1 1 0 0 0-1-1C8.808 2 8.257 3.579 7.825 6H10a1 1 0 0 1 0 2Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Discussions</h3>
</div>
<p class="text-sm text-zinc-500">Keep workflows efficient with tools that give teams
visibility throughout the process.</p>
</div>
<!-- Block #2 -->
<div>
<div class="flex items-center mb-1">
<svg class="fill-zinc-400 mr-2" xmlns="http://www.w3.org/2000/svg" width="16"
height="16">
<path d="M13 16c-.153 0-.306-.035-.447-.105l-3.851-1.926c-.231.02-.465.031-.702.031-4.411 0-8-3.14-8-7s3.589-7 8-7 8 3.14 8 7c0 1.723-.707 3.351-2 4.63V15a1.003 1.003 0 0 1-1 1Zm-4.108-4.054c.155 0 .308.036.447.105L12 13.382v-2.187c0-.288.125-.562.341-.752C13.411 9.506 14 8.284 14 7c0-2.757-2.691-5-6-5S2 4.243 2 7s2.691 5 6 5c.266 0 .526-.02.783-.048a1.01 1.01 0 0 1 .109-.006Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Team views</h3>
</div>
<p class="text-sm text-zinc-500">Keep workflows efficient with tools that give teams
visibility throughout the process.</p>
</div>
<!-- Block #3 -->
<div>
<div class="flex items-center mb-1">
<svg class="fill-zinc-400 mr-2" xmlns="http://www.w3.org/2000/svg" width="14"
height="16">
<path d="M13 0H1C.4 0 0 .4 0 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1ZM2 2h10v8H8v4H2V2Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Powerful search</h3>
</div>
<p class="text-sm text-zinc-500">Keep workflows efficient with tools that give teams
visibility throughout the process.</p>
</div>
<!-- Block #4 -->
<div>
<div class="flex items-center mb-1">
<svg class="fill-zinc-400 mr-2" xmlns="http://www.w3.org/2000/svg" width="16"
height="16">
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm8.707 12.293a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414l2.393 2.393Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Enhancing</h3>
</div>
<p class="text-sm text-zinc-500">Keep workflows efficient with tools that give teams
visibility throughout the process.</p>
</div>
<!-- Block #5 -->
<div>
<div class="flex items-center mb-1">
<svg class="fill-zinc-400 mr-2" xmlns="http://www.w3.org/2000/svg" width="16"
height="16">
<path d="M14.6.085 8 2.885 1.4.085c-.5-.2-1.4-.1-1.4.9v11c0 .4.2.8.6.9l7 3c.3.1.5.1.8 0l7-3c.4-.2.6-.5.6-.9v-11c0-1-.9-1.1-1.4-.9ZM2 2.485l5 2.1v8.8l-5-2.1v-8.8Zm12 8.8-5 2.1v-8.7l5-2.1v8.7Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Powerful search</h3>
</div>
<p class="text-sm text-zinc-500">Keep workflows efficient with tools that give teams
visibility throughout the process.</p>
</div>
<!-- Block #6 -->
<div>
<div class="flex items-center mb-1">
<svg class="fill-zinc-400 mr-2" xmlns="http://www.w3.org/2000/svg" width="14"
height="16">
<path d="M13 14a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2h12Zm-6.707-2.293-5-5a1 1 0 0 1 1.414-1.414L6 8.586V1a1 1 0 1 1 2 0v7.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0Z"/>
</svg>
<h3 class="font-inter-tight font-semibold text-zinc-200">Team views</h3>
</div>
<p class="text-sm text-zinc-500">Keep workflows efficient with tools that give teams
visibility throughout the process.</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section>
<div class="py-12 md:py-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="relative max-w-3xl mx-auto text-center pb-12 md:pb-16">
<div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-xl shadow-md mb-8 relative before:absolute before:-top-12 before:w-52 before:h-52 before:bg-zinc-900 before:opacity-[.08] before:rounded-full before:blur-3xl before:-z-10">
<a href="index.html">
<img src="./images/logo-02.png" width="60" height="60" alt="Logo">
</a>
</div>
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">Start your
journey
<em class="relative not-italic inline-flex justify-center items-end">
today
<svg class="absolute fill-zinc-300 w-[calc(100%+1rem)] -z-10"
xmlns="http://www.w3.org/2000/svg" width="120" height="10" viewBox="0 0 120 10"
aria-hidden="true" preserveAspectRatio="none">
<path d="M118.273 6.09C79.243 4.558 40.297 5.459 1.305 9.034c-1.507.13-1.742-1.521-.199-1.81C39.81-.228 79.647-1.568 118.443 4.2c1.63.233 1.377 1.943-.17 1.89Z"/>
</svg>
</em>
</h2>
<p class="text-lg text-zinc-500 mb-8">Gray removes creative distances by connecting beginners,
pros, and every team in between. Are you ready to start your journey?</p>
<div class="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<div>
<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
href="request-demo.html">Request Demo</a>
</div>
<div>
<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href="#0">Try
for Free</a>
</div>
</div>
</div>
<!-- Clients -->
<div class="text-center">
<ul class="inline-flex flex-wrap items-center justify-center -m-2 [mask-image:linear-gradient(to_right,transparent_8px,_theme(colors.white/.7)_64px,_theme(colors.white)_50%,_theme(colors.white/.7)_calc(100%-64px),_transparent_calc(100%-8px))]">
<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
aria-label="Adobe">
<path d="m21.966 31-1.69-4.231h-4.154l3.892-9.037L25.676 31h-3.71Zm-5.082-21H8v21l8.884-21ZM32 10h-8.884L32 31V10Z"/>
</svg>
</li>
<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
aria-label="Unsplash">
<path d="M16.119 9h8.762v6.571h-8.762zM24.881 18.857H32V32H9V18.857h7.119v6.572h8.762z"/>
</svg>
</li>
<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
aria-label="Google">
<path d="M8.407 26.488a13.458 13.458 0 0 1 0-11.98A13.48 13.48 0 0 1 29.63 10.57l-4.012 3.821a7.934 7.934 0 0 0-5.12-1.87 7.986 7.986 0 0 0-7.568 5.473 7.94 7.94 0 0 0-.408 2.504A7.94 7.94 0 0 0 12.93 23a7.986 7.986 0 0 0 7.567 5.472 8.577 8.577 0 0 0 4.566-1.127l4.489 3.459a13.415 13.415 0 0 1-9.055 3.19 13.512 13.512 0 0 1-12.09-7.507Zm25.036-8.444c.664 6.002-1.021 10.188-3.89 12.762l-4.488-3.46a6.581 6.581 0 0 0 2.795-3.78h-7.301v-5.522h12.884Z"/>
</svg>
</li>
<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
aria-label="WordPress">
<path d="M8.061 20.5c0-1.804.387-3.516 1.077-5.063l5.934 16.257c-4.15-2.016-7.01-6.271-7.01-11.194Zm20.836-.628c0 1.065-.41 2.3-.946 4.021L26.71 28.04l-4.496-13.371c.749-.04 1.424-.119 1.424-.119.67-.079.591-1.064-.08-1.025 0 0-2.014.158-3.315.158-1.222 0-3.276-.158-3.276-.158-.67-.039-.75.986-.079 1.025 0 0 .635.08 1.305.119l1.938 5.31-2.723 8.163-4.53-13.473c.75-.04 1.424-.119 1.424-.119.67-.079.591-1.064-.08-1.025 0 0-2.014.158-3.314.158-.234 0-.509-.005-.801-.015A12.425 12.425 0 0 1 20.5 8.061c3.238 0 6.187 1.238 8.4 3.266-.054-.004-.106-.01-.162-.01-1.221 0-2.088 1.064-2.088 2.207 0 1.025.591 1.893 1.221 2.918.474.828 1.026 1.892 1.026 3.43Zm-8.179 1.716 3.824 10.475c.025.061.056.118.089.171a12.434 12.434 0 0 1-7.645.198l3.732-10.844Zm10.697-7.056a12.378 12.378 0 0 1 1.524 5.968c0 4.589-2.487 8.595-6.185 10.751l3.799-10.985c.71-1.774.946-3.193.946-4.455 0-.458-.03-.883-.084-1.279ZM20.5 6C28.495 6 35 12.504 35 20.5 35 28.495 28.495 35 20.5 35S6 28.495 6 20.5C6 12.504 12.505 6 20.5 6Zm0 28.335c7.628 0 13.835-6.207 13.835-13.835 0-7.629-6.207-13.835-13.835-13.835-7.629 0-13.835 6.206-13.835 13.835 0 7.628 6.206 13.835 13.835 13.835Z"/>
</svg>
</li>
<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
aria-label="Windows">
<path d="m8 11.408 9.808-1.335.004 9.46-9.803.056L8 11.41Zm9.803 9.215.008 9.47-9.803-1.348-.001-8.185 9.796.063Zm1.19-10.725L31.996 8v11.413l-13.005.103V9.898ZM32 20.712l-.003 11.362-13.005-1.835-.018-9.548L32 20.712Z"/>
</svg>
</li>
<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
aria-label="Pinterest">
<path d="M19.482 6.455c-7.757 0-14.045 6.288-14.045 14.045 0 5.95 3.702 11.032 8.926 13.079-.123-1.112-.233-2.816.05-4.03.254-1.095 1.646-6.98 1.646-6.98s-.42-.842-.42-2.086c0-1.953 1.132-3.41 2.541-3.41 1.198 0 1.777.899 1.777 1.978 0 1.205-.767 3.006-1.163 4.676-.33 1.398.701 2.538 2.08 2.538 2.496 0 4.415-2.632 4.415-6.431 0-3.363-2.416-5.714-5.867-5.714-3.996 0-6.342 2.997-6.342 6.095 0 1.207.466 2.501 1.046 3.205a.42.42 0 0 1 .097.403c-.107.443-.343 1.397-.39 1.592-.061.258-.204.312-.47.188-1.754-.816-2.85-3.38-2.85-5.44 0-4.431 3.218-8.5 9.28-8.5 4.872 0 8.658 3.472 8.658 8.112 0 4.84-3.052 8.736-7.288 8.736-1.423 0-2.761-.74-3.22-1.613l-.874 3.339c-.317 1.22-1.173 2.749-1.746 3.682a14.04 14.04 0 0 0 4.159.626c7.757 0 14.045-6.288 14.045-14.045S27.238 6.455 19.482 6.455Z"/>
</svg>
</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<!-- Site footer -->
<footer>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<!-- Top area: Blocks -->
<div class="grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200">
<!-- 1st block -->
<div class="sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col">
<div class="mb-4">
<!-- Logo -->
<a class="flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20"
href="index.html">
<img src="./images/logo.png" width="24" height="24" alt="Logo">
</a>
</div>
<div class="grow text-sm text-zinc-500">&copy; Cruip.com. All rights reserved.</div>
<!-- Social links -->
<ul class="flex space-x-4 mt-4 mb-1">
<li>
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition"
href="#0" aria-label="Twitter">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="m7.063 3 3.495 4.475L14.601 3h2.454l-5.359 5.931L18 17h-4.938l-3.866-4.893L4.771 17H2.316l5.735-6.342L2 3h5.063Zm-.74 1.347H4.866l8.875 11.232h1.36L6.323 4.347Z"/>
</svg>
</a>
</li>
<li>
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition"
href="#0" aria-label="Medium">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="M17 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1.708 3.791-.858.823a.251.251 0 0 0-.1.241V12.9a.251.251 0 0 0 .1.241l.838.823v.181h-4.215v-.181l.868-.843c.085-.085.085-.11.085-.241V7.993L9.6 14.124h-.329l-2.81-6.13V12.1a.567.567 0 0 0 .156.472l1.129 1.37v.181h-3.2v-.181l1.129-1.37a.547.547 0 0 0 .146-.472V7.351A.416.416 0 0 0 5.683 7l-1-1.209V5.61H7.8l2.4 5.283 2.122-5.283h2.971l-.001.181Z"/>
</svg>
</a>
</li>
<li>
<a class="flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition"
href="#0" aria-label="Telegram">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="M17.968 3.276a.338.338 0 0 0-.232-.253 1.192 1.192 0 0 0-.63.045S3.087 8.106 2.286 8.664c-.172.121-.23.19-.259.272-.138.4.293.573.293.573l3.613 1.177a.388.388 0 0 0 .183-.011c.822-.519 8.27-5.222 8.7-5.38.068-.02.118 0 .1.049-.172.6-6.606 6.319-6.64 6.354a.138.138 0 0 0-.05.118l-.337 3.528s-.142 1.1.956 0a30.66 30.66 0 0 1 1.9-1.738c1.242.858 2.58 1.806 3.156 2.3a1 1 0 0 0 .732.283.825.825 0 0 0 .7-.622S17.894 5.292 17.98 3.909c.008-.135.021-.217.021-.317a1.177 1.177 0 0 0-.032-.316Z"/>
</svg>
</a>
</li>
</ul>
</div>
<!-- 2nd block -->
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-sm text-zinc-800 font-medium mb-2">Company</h6>
<ul class="text-sm space-y-2">
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">About us</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Diversity & Inclusion</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Blog</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Careers</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Financial statements</a>
</li>
</ul>
</div>
<!-- 3rd block -->
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-sm text-zinc-800 font-medium mb-2">Resources</h6>
<ul class="text-sm space-y-2">
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Community</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms of service</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Collaboration features</a>
</li>
</ul>
</div>
<!-- 4th block -->
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-sm text-zinc-800 font-medium mb-2">Legals</h6>
<ul class="text-sm space-y-2">
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Refund policy</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms & Conditions</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Privacy policy</a>
</li>
<li>
<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Brand Kit</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
<script src="./js/vendors/alpinejs.min.js" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink