Skip to content

Commit cc53fc2

Browse files
motdotlamotdotla
committed
start listing pro features
1 parent 90b83bd commit cc53fc2

4 files changed

Lines changed: 51 additions & 28 deletions

File tree

‎_includes/v1/components/feature-box.html‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
1-
{% if include.href %}
2-
<a href="{{ include.href }}" class="card h-100 border border-zinc-200 dark:border-zinc-800 rounded py-3.5 px-4 gap-4 hover:border-yellow-400 dark:hover:border-yellow-300">
3-
<div class="flex gap-x-2 items-center">
4-
<h5 class="font-bold text-lg">{{ include.feature }}</h5>
5-
<span class="text-zinc-500 font-normal italic">{{ include.soon }}</span>
1+
<div class="relative">
2+
{% if include.href %}
3+
<a href="{{ include.href }}" class="block card h-100 border border-zinc-200 dark:border-zinc-800 rounded py-3.5 px-4 gap-4 hover:border-yellow-400 dark:hover:border-yellow-300">
4+
<div class="flex gap-x-2 items-center">
5+
<h5 class="font-bold text-lg">{{ include.feature }}</h5>
6+
<span class="text-zinc-500 font-normal italic">{{ include.soon }}</span>
7+
</div>
8+
<p class="text-zinc-500">{{ include.description }}</p>
9+
</a>
10+
{% else %}
11+
<div class="block card h-100 border border-zinc-200 dark:border-zinc-800 rounded py-3.5 px-4 gap-4 hover:border-yellow-400 dark:hover:border-yellow-300">
12+
<div class="flex gap-x-2 items-center">
13+
<h5 class="font-bold text-lg">{{ include.feature }}</h5>
14+
<span class="text-zinc-500 font-normal italic">{{ include.soon }}</span>
15+
</div>
16+
<p class="text-zinc-500">{{ include.description }}</p>
617
</div>
7-
<p class="text-zinc-500">{{ include.description }}</p>
8-
</a>
9-
{% else %}
10-
<div class="card h-100 border border-zinc-200 dark:border-zinc-800 rounded py-3.5 px-4 gap-4 hover:border-yellow-400 dark:hover:border-yellow-300">
11-
<div class="flex gap-x-2 items-center">
12-
<h5 class="font-bold text-lg">{{ include.feature }}</h5>
13-
<span class="text-zinc-500 font-normal italic">{{ include.soon }}</span>
14-
</div>
15-
<p class="text-zinc-500">{{ include.description }}</p>
18+
{% endif %}
19+
20+
{% if include.pro %}
21+
<div class="z-50 absolute -right-4 top-1 rotate-[20deg] origin-top-right inline-block bg-[#ECD53F] text-black font-bold px-2.5 py-1 text-lg italic rounded-sm">PRO</div>
22+
{% endif %}
1623
</div>
17-
{% endif %}

‎_includes/v1/components/feature-box2.html‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
1-
<a href="{{ include.href }}" class="flex flex-col gap-1">
2-
{% if include.mp4 %}
3-
<div class="overflow-hidden rounded-lg border-4 border-zinc-200 dark:border-zinc-800 hover:border-blue-500 dark:hover:border-blue-400 aspect-[16/10]">
4-
<video autoplay muted loop playsinline class="w-full h-full object-cover">
5-
<source src="{{ include.mp4 }}" type="video/mp4">
6-
your browser does not support the video tag
7-
</video>
8-
</div>
9-
{% else %}
10-
<img src="{{ include.png }}" class="rounded-lg border-4 border-zinc-200 dark:border-zinc-800 hover:border-blue-500 dark:hover:border-blue-400"/>
1+
<div class="relative">
2+
<a href="{{ include.href }}" class="flex flex-col gap-1">
3+
{% if include.mp4 %}
4+
<div class="overflow-hidden rounded-lg border-4 border-zinc-200 dark:border-zinc-800 hover:border-blue-500 dark:hover:border-blue-400 aspect-[16/10]">
5+
<video autoplay muted loop playsinline class="w-full h-full object-cover">
6+
<source src="{{ include.mp4 }}" type="video/mp4">
7+
your browser does not support the video tag
8+
</video>
9+
</div>
10+
{% elsif include.png %}
11+
<img src="{{ include.png }}" class="overflow-hidden rounded-lg border-4 border-zinc-200 dark:border-zinc-800 hover:border-blue-500 dark:hover:border-blue-400 aspec-[16/10]"/>
12+
{% elsif include.txt %}
13+
<div class="text-center flex items-center justify-center overflow-hidden rounded-lg border-4 border-zinc-200 dark:border-zinc-800 hover:border-blue-500 dark:hover:border-blue-400 aspect-[16/10] bg-zinc-100 dark:bg-zinc-900"><span class="font-bold font-mono italic">{{ include.txt }}</span></div>
14+
{% else %}
15+
<div class="overflow-hidden rounded-lg border-4 border-zinc-200 dark:border-zinc-800 hover:border-blue-500 dark:hover:border-blue-400 aspect-[16/10] bg-zinc-100 dark:bg-zinc-900"></div>
16+
{% endif %}
17+
<h5 class="font-bold text-lg link-primary text-center">{{ include.feature }}</h5>
18+
<p class="text-center text-zinc-500 text-sm">{{ include.description }}</p>
19+
</a>
20+
21+
{% if include.pro %}
22+
<div class="z-50 absolute -right-4 top-1 rotate-[30deg] origin-top-right inline-block bg-[#ECD53F] text-black font-bold px-2.5 py-1 text-lg italic rounded-sm">PRO</div>
1123
{% endif %}
12-
<h5 class="font-bold text-lg link-primary text-center">{{ include.feature }}</h5>
13-
<p class="text-center text-zinc-500 text-sm">{{ include.description }}</p>
14-
</a>
24+
</div>

‎_includes/v1/features.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ <h2 class="my-5 text-center text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bo
2626

2727
{% include v1/components/feature-box.html feature="Prebuild" description="Prevent building .env files into docker images" %}
2828
{% include v1/components/feature-box.html feature="Precommit" description="Prevent committing .env files to code" %}
29+
30+
{% include v1/components/feature-box.html feature="Cloaked Keys" description="Hide private keys. Share access, not the keys." pro="true" %}
31+
{% include v1/components/feature-box.html feature="Pull Requests" description="Review and approve .env changes securely in GitHub PRs." pro="true" %}
2932
</div>
3033

3134
<p class="mx-auto mt-6 max-w-3xl text-center text-md md:text-lg text-zinc-600 leading-2 mb-6"><a href="/docs/advanced" class="link-primary underline font-semibold">See all advanced features</a></p>

‎features/index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ title: Features
1111
{% include v1/components/feature-box2.html feature="Multiple Environments" description="Switch environments easily with .env, .env.production, and more." mp4="https://github.com/user-attachments/assets/6fadc884-371e-4aec-a14c-d5e7bce2a48a" href="/features/multiple-environments" %}
1212
{% include v1/components/feature-box2.html feature="Encryption" description="Encrypt your .env files using asymmetric keys." png="https://github.com/user-attachments/assets/634ce9a4-48f4-48db-829e-b792bfa8c930" href="/features/encryption" %}
1313
{% include v1/components/feature-box2.html feature="Multiple Files" description="Compose multiple .env files flexibly." png="https://github.com/user-attachments/assets/cd68a192-9877-4f37-90e5-bdddaf59cc88" href="/features/multiple-files" %}
14+
{% include v1/components/feature-box2.html feature="Variable Expansion" description="Reference and expand variables already on your machine for use in your .env file." href="/features/variable-expansion" txt="${EXPAND}" %}
15+
{% include v1/components/feature-box2.html feature="Command Substitution" description="Add the output of a command to one of your variables in your .env file." href="/features/command-substitution" txt="$(COMMAND)" %}
16+
{% include v1/components/feature-box2.html feature="Cloaked Keys" description="Hide private keys with zero-knowledge encryption. Share access, not the key." href="/features/cloaked-keys" txt="dotenvx pro cloak" pro="true" %}
17+
{% include v1/components/feature-box2.html feature="Pull Requests" description="Review and approve .env changes through GitHub pull requests." href="/features/pull-requests" txt="Pull Requests" pro="true" %}
1418
</div>
1519
</section>
1620
{% include v1/pro.html %}

0 commit comments

Comments
 (0)