ourworld_web/www_aibox
20
0
Fork 0
Code Pull Requests Activity

correct spacing

Browse Source
This commit is contained in:
sasha-astiadi 2025-02-25 00:12:05 +08:00
parent e8235b5264
commit 3be02da205
11 changed files with 198 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/index.html
View File

@ -6,6 +6,6 @@
{% include "partials/hero/aihero4.html" %}
{% include "partials/hero/aihero5.html" %}
{% include "partials/hero/aihero6.html" %}
{% include "partials/hero/aihero7.html" %}
{% include "partials/hero/aihero9.html" %}
{% include "partials/hero/aihero10.html" %}
{% endblock content %}

4
templates/partials/footer.html
View File

@ -4,9 +4,9 @@
<html>
<head />
<body>
<div class="mt-18 border-t border-gray-700"></div>
<div class=" border-t border-gray-700"></div>
<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="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" />

2
templates/partials/hero/aihero1.html
View File

@ -5,7 +5,7 @@
Your
<span id="slides" class="slides"></span>
</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">
Learn more <span aria-hidden="true">→</span>
</a>

53
templates/partials/hero/aihero10.html
View File

@ -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">
<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.
</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">
<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">
<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">
Pre-order Now
</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>
<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>

2
templates/partials/hero/aihero2.html
View File

@ -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>
</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>
</div>
</div>

6
templates/partials/hero/aihero3.html
View File

@ -1,5 +1,5 @@
<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 lg:pt-24 pb-0">
<div class="mx-auto max-w-7xl px-6 lg:px-8 pb-10">
<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 lg:pb-10 pb-0">
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<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>
@ -8,7 +8,7 @@
</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 -->
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">

2
templates/partials/hero/aihero4.html
View File

@ -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-2xl px-6 lg:max-w-7xl lg:px-8">
<div class="max-w-3xl">

2
templates/partials/hero/aihero5.html
View File

@ -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">
<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...

6
templates/partials/hero/aihero6.html
View File

@ -1,12 +1,12 @@
<div class="fade-in">
<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">
<!-- Typing Text -->
<h1 id="typing-text2" class="mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]"></h1>
<!-- 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 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>
@ -18,7 +18,7 @@
</dl>
</div>
<!-- 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">
</div>
</div>

132
templates/partials/hero/aihero9.html
View File

@ -1,10 +1,124 @@
<div class="fade-in">
<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">
<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>
<div class="mt-10 flex items-center gap-x-6 lg:mt-0 lg:shrink-0">
<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>
<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 class="bg-white">
<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-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-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 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>

26
templates/partials/hero/pricing-hero.html
View File

@ -1,10 +1,10 @@
<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">
<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 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>
<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>
<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-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 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="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">
@ -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="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>
<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-8">
<div class="mt-6">
<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 %}
<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">
@ -35,9 +35,9 @@
{% endfor %}
</ul>
</div>
<div class="mt-8">
<div class="mt-6">
<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 %}
<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">