......
This commit is contained in:
parent
addf7cb3aa
commit
5502d8a675
@ -7,6 +7,66 @@ draft: false
|
||||
extra:
|
||||
author: ThreeFold
|
||||
imgPath: home/tf.png
|
||||
title: "Pre-order Your AIBox"
|
||||
subtitle: "Choose the box that's packed with the best features for your computing needs."
|
||||
subtitle2: "The AI boxes are delivered by our hardware partners and they define the final price & specifications. Each AI boxes becomes part of the ThreeFold grid and earns rewards."
|
||||
plans:
|
||||
- name: "DIY"
|
||||
description: "Add your own GPU's"
|
||||
price: "1-1500"
|
||||
features:
|
||||
- name: "GPU your choice, minimal AMD Radeon RX 7900 XT"
|
||||
included: true
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: between 500 and 2000 INCA per month depending on chosen GPU"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
- name: "1 GPU"
|
||||
description: "Enough for smaller but smart models and Smart Agents."
|
||||
price: "2-2500"
|
||||
features:
|
||||
- name: "1x AMD Radeon RX 7900 XTX"
|
||||
included: true
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: 1000 INCA per month"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
|
||||
|
||||
- name: "2 GPU"
|
||||
description: "Support for 48 GB models, a lot of power in your hands."
|
||||
price: "4-5000"
|
||||
features:
|
||||
- name: "2x AMD Radeon RX 7900 XTX"
|
||||
included: true
|
||||
- name: "64-128 GB Memory"
|
||||
included: true
|
||||
- name: "2-4 TB of SSD"
|
||||
included: true
|
||||
- name: "Integrated Mycelium"
|
||||
included: true
|
||||
- name: "Zero-OS"
|
||||
included: false
|
||||
rewards:
|
||||
- name: "Proof of Capacity: 2000 INCA per month"
|
||||
- name: "Proof of Utilization: 80% of INCA Revenue"
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -45,8 +105,10 @@ ThreeFold is a peer-to-peer open-source Internet platform that connects users di
|
||||
|
||||
{% end %}
|
||||
|
||||
<!-- section 2 (Map) -->
|
||||
<!-- section 1.5 (Pricing) -->
|
||||
{% include "partials/hero/pricing-hero.html" %}
|
||||
|
||||
<!-- section 2 (Map) -->
|
||||
|
||||
{% grid_stats() %}
|
||||
|
||||
|
||||
@ -1,317 +1 @@
|
||||
<div class="bg-white py-12">
|
||||
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
|
||||
<h2 id="typing-text2" class=" fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Pre-order Your AIBox</h2>
|
||||
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/8">Choose the box that’s packed with the best features for your computing needs.</p>
|
||||
</div>
|
||||
<div class="relative pt-16 sm:pt-24">
|
||||
<div class="absolute inset-x-0 top-48 bottom-0"></div>
|
||||
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
|
||||
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
|
||||
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
|
||||
<h2 class="text-sm font-semibold text-black">Starter <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-gray-600">Everything you need to get started.</p>
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<div class="text-5xl font-semibold text-gray-950">$19</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<p>USD</p>
|
||||
<p>per month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="#" aria-label="Start a free trial on the Starter plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Custom domains
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Edge content delivery
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Advanced analytics
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Quarterly workshops
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Single sign-on (SSO)
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Priority phone support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
|
||||
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
|
||||
<h2 class="text-sm font-semibold text-black">Growth <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-gray-600">All the extras for your necessities.</p>
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<div class="text-5xl font-semibold text-gray-950">$49</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<p>USD</p>
|
||||
<p>per month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="#" aria-label="Start a free trial on the Growth plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Custom domains
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Edge content delivery
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Advanced analytics
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Quarterly workshops
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Single sign-on (SSO)
|
||||
</li>
|
||||
<li data-disabled="true" class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="sr-only">Not included:</span>
|
||||
Priority phone support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
|
||||
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
|
||||
<h2 class="text-sm font-semibold text-black">Scale <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-gray-600">Added flexibility at scale.</p>
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<div class="text-5xl font-semibold text-gray-950">$99</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<p>USD</p>
|
||||
<p>per month</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="#" aria-label="Start a free trial on the Scale plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Start selling with:</h3>
|
||||
<ul class="mt-3 space-y-3">
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Custom domains
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Edge content delivery
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Advanced analytics
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Quarterly workshops
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Single sign-on (SSO)
|
||||
</li>
|
||||
<li class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
Priority phone support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 2.2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
.fade-in-box:nth-child(4) { animation-delay: 0.6s; }
|
||||
.fade-in-box:nth-child(5) { animation-delay: 0.8s; }
|
||||
.fade-in-box:nth-child(6) { animation-delay: 1s; }
|
||||
.fade-in-box:nth-child(7) { animation-delay: 1.2s; }
|
||||
.fade-in-box:nth-child(8) { animation-delay: 1.4s; }
|
||||
.fade-in-box:nth-child(9) { animation-delay: 1.6s; }
|
||||
.fade-in-box:nth-child(10) { animation-delay: 1.8s; }
|
||||
.fade-in-box:nth-child(11) { animation-delay: 2s; }
|
||||
.fade-in-box:nth-child(12) { animation-delay: 2.2s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const text = "";
|
||||
const textElement = document.getElementById("typing-text2");
|
||||
let loopCount = 0;
|
||||
const maxLoops = 5;
|
||||
|
||||
function typeText(i, callback) {
|
||||
if (i < text.length) {
|
||||
textElement.textContent += text.charAt(i);
|
||||
setTimeout(() => typeText(i + 1, callback), 100);
|
||||
} else {
|
||||
setTimeout(callback, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteText(callback) {
|
||||
let currentText = textElement.textContent;
|
||||
if (currentText.length > 0) {
|
||||
textElement.textContent = currentText.substring(0, currentText.length - 1);
|
||||
setTimeout(() => deleteText(callback), 50);
|
||||
} else {
|
||||
setTimeout(callback, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function loopTyping() {
|
||||
if (loopCount < maxLoops) {
|
||||
typeText(0, () => {
|
||||
deleteText(() => {
|
||||
loopCount++;
|
||||
loopTyping();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
typeText(0, () => {}); // Final typing with no delete
|
||||
}
|
||||
}
|
||||
|
||||
loopTyping();
|
||||
});
|
||||
</script>
|
||||
{% include "partials/hero/pricing-hero.html" %}
|
||||
|
||||
1
templates/partials/hero/hero-title.html
Normal file
1
templates/partials/hero/hero-title.html
Normal file
@ -0,0 +1 @@
|
||||
<h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{% if text %}{{ text }}{% else %}Pre-order Your AIBox{% endif %}</h2>
|
||||
127
templates/partials/hero/pricing-hero.html
Normal file
127
templates/partials/hero/pricing-hero.html
Normal file
@ -0,0 +1,127 @@
|
||||
<div class="bg-white py-12">
|
||||
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
|
||||
<h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
|
||||
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
|
||||
<p class="mt-12 max-w-2xl text-lg font-light text-pretty text-gray-600 max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
|
||||
</div>
|
||||
<div class="relative pt-16 sm:pt-24">
|
||||
<div class="absolute inset-x-0 top-48 bottom-0"></div>
|
||||
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
|
||||
{% for plan in section.extra.plans %}
|
||||
<div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
|
||||
<div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
|
||||
<div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
|
||||
<h2 class="text-sm font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
|
||||
<p class="mt-2 text-sm/6 text-pretty text-gray-600">{{ plan.description }}</p>
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<div class="text-5xl font-semibold text-gray-950">${{ plan.price }}</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="#" aria-label="Start a free trial on the {{ plan.name }} plan" class="inline-block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Start a free trial</a>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
|
||||
<ul class="mt-3 space-y-3">
|
||||
{% for feature in plan.features %}
|
||||
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
|
||||
{{ feature.name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
|
||||
<ul class="mt-3 space-y-3">
|
||||
{% for feature in plan.rewards %}
|
||||
<li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
|
||||
<span class="inline-flex h-6 items-center">
|
||||
<svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
{% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
|
||||
{{ feature.name }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Fade-in animation for the grid items */
|
||||
.fade-in-box {
|
||||
opacity: 0;
|
||||
animation: fadeIn 2.2s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* Fading in each grid item with a slight delay */
|
||||
.fade-in-box:nth-child(1) { animation-delay: 0s; }
|
||||
.fade-in-box:nth-child(2) { animation-delay: 0.2s; }
|
||||
.fade-in-box:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const text = "";
|
||||
const textElement = document.getElementById("typing-text2");
|
||||
let loopCount = 0;
|
||||
const maxLoops = 5;
|
||||
|
||||
function typeText(i, callback) {
|
||||
if (i < text.length) {
|
||||
textElement.textContent += text.charAt(i);
|
||||
setTimeout(() => typeText(i + 1, callback), 100);
|
||||
} else {
|
||||
setTimeout(callback, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteText(callback) {
|
||||
let currentText = textElement.textContent;
|
||||
if (currentText.length > 0) {
|
||||
textElement.textContent = currentText.substring(0, currentText.length - 1);
|
||||
setTimeout(() => deleteText(callback), 50);
|
||||
} else {
|
||||
setTimeout(callback, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function loopTyping() {
|
||||
if (loopCount < maxLoops) {
|
||||
typeText(0, () => {
|
||||
deleteText(() => {
|
||||
loopCount++;
|
||||
loopTyping();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
typeText(0, () => {}); // Final typing with no delete
|
||||
}
|
||||
}
|
||||
|
||||
loopTyping();
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user