mirror of
https://github.com/psviderski/uncloud.git
synced 2026-08-26 11:03:34 +00:00
add value proposition section: Cloud-like experience you control
This commit is contained in:
Pavel Sviderski
+153
-238
@@ -95,7 +95,7 @@
|
||||
</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="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 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">
|
||||
@@ -126,270 +126,185 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<!-- Value proposition -->
|
||||
<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 class="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">
|
||||
Cloud-like experience you control
|
||||
</h2>
|
||||
<p class="text-lg text-zinc-500">
|
||||
Keep the Docker workflows you love while optimizing infrastructure costs
|
||||
</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>
|
||||
<!-- Mix and Match Infrastructure -->
|
||||
<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"/>
|
||||
<div class="flex items-center space-x-3 mb-4">
|
||||
<svg class="inline-flex stroke-zinc-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="20" height="20" fill="none"
|
||||
stroke-width="2" viewBox="0 0 24 24">
|
||||
<rect width="8" height="8" x="2" y="2" rx="1"/>
|
||||
<rect width="9" height="8" x="13" y="2" rx="1"/>
|
||||
<rect width="11" height="9" x="2" y="13" rx="1"/>
|
||||
<rect width="6" height="9" x="16" y="13" rx="1"/>
|
||||
</svg>
|
||||
<h3 class="font-inter-tight font-semibold text-zinc-900">Advanced AI</h3>
|
||||
<h3 class="font-inter-tight font-semibold text-zinc-900">
|
||||
Mix and Match Infrastructure
|
||||
</h3>
|
||||
</div>
|
||||
<div class="text-sm text-zinc-500">
|
||||
<ul class="space-y-3">
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Mix and match cloud and on-premise across regions and providers
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Deploy customer-facing apps on reliable cloud VMs
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Run resource-hungry background jobs on budget-friendly bare metal servers
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Put that dusty Mac mini to work as your staging environment
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<!-- Effortless Operation -->
|
||||
<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"/>
|
||||
<div class="flex items-center space-x-3 mb-4">
|
||||
<svg class="inline-flex fill-zinc-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20" viewBox="0 0 24 24">
|
||||
<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
||||
</svg>
|
||||
<h3 class="font-inter-tight font-semibold text-zinc-900">Simple Snippets</h3>
|
||||
<h3 class="font-inter-tight font-semibold text-zinc-900">Effortless Operation</h3>
|
||||
</div>
|
||||
<div class="text-sm text-zinc-500">
|
||||
<ul class="space-y-3">
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Zero-config distributed Docker cluster
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
No control plane to manage
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Keep apps running even when machines go offline
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Battle-tested WireGuard private networking, ready out of the box
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Automatic HTTPS for your domains using Let's Encrypt
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<!-- Developer Experience -->
|
||||
<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"/>
|
||||
<div class="flex items-center space-x-3 mb-4">
|
||||
<svg class="inline-flex fill-zinc-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20" viewBox="0 0 24 24">
|
||||
<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
|
||||
</svg>
|
||||
<h3 class="font-inter-tight font-semibold text-zinc-900">Precise Activity</h3>
|
||||
<h3 class="font-inter-tight font-semibold text-zinc-900">Developer Experience You
|
||||
Love</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 class="text-sm text-zinc-500">
|
||||
<ul class="space-y-3">
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Deploy across machines with familiar Docker-like commands
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Use the same Docker Compose from local dev to production
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Find your services instantly with built-in service discovery and DNS
|
||||
</li>
|
||||
<li class="flex gap-3 items-start">
|
||||
<svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Secure container communication across machines without opening ports
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user