correct spacing
This commit is contained in:
parent
e8235b5264
commit
3be02da205
@ -6,6 +6,6 @@
|
|||||||
{% include "partials/hero/aihero4.html" %}
|
{% include "partials/hero/aihero4.html" %}
|
||||||
{% include "partials/hero/aihero5.html" %}
|
{% include "partials/hero/aihero5.html" %}
|
||||||
{% include "partials/hero/aihero6.html" %}
|
{% include "partials/hero/aihero6.html" %}
|
||||||
{% include "partials/hero/aihero7.html" %}
|
{% include "partials/hero/aihero9.html" %}
|
||||||
{% include "partials/hero/aihero10.html" %}
|
{% include "partials/hero/aihero10.html" %}
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
@ -4,9 +4,9 @@
|
|||||||
<html>
|
<html>
|
||||||
<head />
|
<head />
|
||||||
<body>
|
<body>
|
||||||
<div class="mt-18 border-t border-gray-700"></div>
|
<div class=" border-t border-gray-700"></div>
|
||||||
<footer class="bg-transparent">
|
<footer class="bg-transparent">
|
||||||
<div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
|
<div class="max-w-screen-2xl bg-transparent mx-auto py-12 px-4 sm:px-6">
|
||||||
<div class="xl:flex xl:gap-4">
|
<div class="xl:flex xl:gap-4">
|
||||||
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
|
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
|
||||||
<img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
|
<img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
Your
|
Your
|
||||||
<span id="slides" class="slides"></span>
|
<span id="slides" class="slides"></span>
|
||||||
</h1>
|
</h1>
|
||||||
<div id="learn-more" class="mt-10 flex items-center gap-x-6 hidden">
|
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6 hidden">
|
||||||
<a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
|
<a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
|
||||||
Learn more <span aria-hidden="true">→</span>
|
Learn more <span aria-hidden="true">→</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<div class="bg-transparent mt-12">
|
<div class="bg-transparent py-24 mb-10 mt-10">
|
||||||
<div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
|
<div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
|
||||||
<h2 class="lg:text-balance text-left items-start lg:text-[6rem] text-[2.5rem] font-normal tracking-tight text-black fade-in">
|
<h2 id="blinking4" class="lg:text-balance text-left items-start lg:text-[6rem] text-[2.5rem] font-normal tracking-tight text-black fade-in">
|
||||||
Own Your AI. <br>Pre-Order<br>Now.
|
Own Your AI. <br>Pre-Order<br>Now.
|
||||||
</h2>
|
</h2>
|
||||||
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
<div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
|
||||||
<a href="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
<a href="https://docs.threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
|
||||||
Pre-order Now
|
Pre-order Now
|
||||||
</a>
|
</a>
|
||||||
<a href="/action" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
<a href="/action" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||||
@ -13,3 +13,48 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Initial state: elements are invisible */
|
||||||
|
.fade-in {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* State when element is in view */
|
||||||
|
.fade-in.visible {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Get all the elements that need to be faded in
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const h2 = document.getElementById("blinking4");
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
|
||||||
|
}, 1000); // Blinks every 2 seconds
|
||||||
|
// Target all elements with the 'fade-in' class
|
||||||
|
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries, observer) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
// Add 'visible' class to the element when it's in view
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
observer.unobserve(entry.target); // Stop observing after it fades in
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, {
|
||||||
|
threshold: 0.1 // Trigger when 10% of the element is in view
|
||||||
|
});
|
||||||
|
|
||||||
|
fadeInElements.forEach(element => {
|
||||||
|
observer.observe(element);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
<h2 id="typing-text" class="mx-auto fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black">
|
<h2 id="typing-text" class="mx-auto fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black">
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="mx-auto mt-8 fade-in text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">Meet <span class="font-medium">AIBox</span> – a powerful and personalized AI experience, without limitations.
|
<h3 class="mx-auto lg:mt-8 mt-6 fade-in text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">Meet <span class="font-medium">AIBox</span> – a powerful and personalized AI experience, without limitations.
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 lg:pt-24 pb-0">
|
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 pb-0">
|
||||||
<div class="mx-auto max-w-7xl px-6 lg:px-8 pb-10">
|
<div class="mx-auto max-w-7xl px-6 lg:px-8 lg:pb-10 pb-0">
|
||||||
<div class="mx-auto max-w-2xl lg:max-w-4xl">
|
<div class="mx-auto max-w-2xl lg:max-w-4xl">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h2 id="blinking" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
|
<h2 id="blinking" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
|
||||||
@ -8,7 +8,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-8 pt-12 pb-24 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
<div class="space-y-8 lg:py-12 py-6 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||||
|
|
||||||
<!-- Item #1 -->
|
<!-- Item #1 -->
|
||||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
|
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<div class="bg-white pt-12 lg:pt-24 pb-12">
|
<div class="bg-white pt-12 lg:pt-24 pb-6">
|
||||||
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
|
<div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
|
||||||
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||||
<div class="max-w-3xl">
|
<div class="max-w-3xl">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<div class="bg-white px-12 pb-12 mx-auto">
|
<div class="bg-white px-12 pb-24 lg:pb-16 mx-auto">
|
||||||
<div class="mx-auto max-w-3xl items-start pb-12">
|
<div class="mx-auto max-w-3xl items-start pb-12">
|
||||||
<p id="1" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black px-10">
|
<p id="1" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black px-10">
|
||||||
Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing...
|
Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing...
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
<div class="fade-in">
|
<div class="fade-in">
|
||||||
<div class="relative isolate">
|
<div class="relative isolate">
|
||||||
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:gap-x-15 lg:px-8 lg:py-40">
|
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
|
||||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
|
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
|
||||||
<!-- Typing Text -->
|
<!-- Typing Text -->
|
||||||
<h1 id="typing-text2" class="mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]"></h1>
|
<h1 id="typing-text2" class="mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]"></h1>
|
||||||
|
|
||||||
<!-- Specification List -->
|
<!-- Specification List -->
|
||||||
<dl class="mt-10 px-10 max-w-xl space-y-6 text-gray-900 lg:max-w-xl">
|
<dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
|
||||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
|
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
|
||||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
|
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
|
||||||
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Powefull AMD CPU</dt></div>
|
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Powefull AMD CPU</dt></div>
|
||||||
@ -18,7 +18,7 @@
|
|||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
<!-- Image Section -->
|
<!-- Image Section -->
|
||||||
<div class="fade-in-image mt-16 sm:mt-24 lg:mt-0 lg:flex lg:justify-center lg:w-1/2">
|
<div class="fade-in-image mt-8 lg:mt-24 lg:flex lg:justify-center lg:w-1/2">
|
||||||
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="Mobile App Screenshot">
|
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="Mobile App Screenshot">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,10 +1,124 @@
|
|||||||
<div class="fade-in">
|
<div class="bg-white">
|
||||||
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-center lg:justify-between lg:px-8">
|
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
|
||||||
<h2 class="max-w-2xl text-4xl font-normal tracking-tight text-black sm:text-5xl">this part is cta4.html<br>this part is cta4.html</h2>
|
<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>
|
||||||
<div class="mt-10 flex items-center gap-x-6 lg:mt-0 lg:shrink-0">
|
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black 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>
|
||||||
<a href="#" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-black ring-1 ring-black shadow-xs hover:bg-gray-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
|
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
|
||||||
<a href="#" class="text-sm/6 font-semibold text-white hover:text-gray-300">Learn more <span aria-hidden="true">→</span></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
|
||||||
|
<p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
|
||||||
|
<div class="mt-4 flex items-center gap-4">
|
||||||
|
<div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
|
||||||
|
<div class="text-sm text-gray-600">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6">
|
||||||
|
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
|
||||||
|
<ul class="mt-3 space-y-2">
|
||||||
|
{% 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-6">
|
||||||
|
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
|
||||||
|
<ul class="mt-3 space-y-2">
|
||||||
|
{% 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>
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
<div class="bg-white py-12">
|
<div class="bg-white py-12 fade-in-box">
|
||||||
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
|
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8 fade-in-box">
|
||||||
<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>
|
<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-6 max-w-2xl text-lg font-light text-pretty text-black 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>
|
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative pt-16 sm:pt-24">
|
<div class="relative pt-16 sm:pt-24 fade-in-box">
|
||||||
<div class="absolute inset-x-0 top-48 bottom-0"></div>
|
<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="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="grid grid-cols-1 gap-10 lg:grid-cols-3">
|
||||||
@ -12,16 +12,16 @@
|
|||||||
<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="-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="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">
|
<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>
|
<h2 class="lg:text-4xl text-3xl 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>
|
<p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
|
||||||
<div class="mt-8 flex items-center gap-4">
|
<div class="mt-4 flex items-center gap-4">
|
||||||
<div class="text-5xl font-semibold text-gray-950">${{ plan.price }}</div>
|
<div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
|
||||||
<div class="text-sm text-gray-600">
|
<div class="text-sm text-gray-600">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-8">
|
<div class="mt-6">
|
||||||
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
|
<h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
|
||||||
<ul class="mt-3 space-y-3">
|
<ul class="mt-3 space-y-2">
|
||||||
{% for feature in plan.features %}
|
{% 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">
|
<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">
|
<span class="inline-flex h-6 items-center">
|
||||||
@ -35,9 +35,9 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-8">
|
<div class="mt-6">
|
||||||
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
|
<h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
|
||||||
<ul class="mt-3 space-y-3">
|
<ul class="mt-3 space-y-2">
|
||||||
{% for feature in plan.rewards %}
|
{% 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">
|
<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">
|
<span class="inline-flex h-6 items-center">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user