correct spacing

This commit is contained in:
2025-02-25 00:12:05 +08:00
parent e8235b5264
commit 3be02da205
11 changed files with 198 additions and 39 deletions

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