update home template
This commit is contained in:
65
templates/shortcodes/admonition.html
Normal file
65
templates/shortcodes/admonition.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!-- admonition shortcode for adding admonition in md-->
|
||||
|
||||
{% set classes = "" %}
|
||||
|
||||
{% set first_line = body | split(pat="\n") | first %}
|
||||
{% set parsed_first_line = first_line | split(pat=" ") %}
|
||||
{% set admonition = parsed_first_line | first %}
|
||||
{% set style = "" %}
|
||||
|
||||
{% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %}
|
||||
|
||||
<!-- sets admonition type depending on qualifiers and modifiers
|
||||
hides content if doesn't adhere to admonition formatting -->
|
||||
{% if admonition == "!!!" %}
|
||||
{% set classes = "admonition" %}
|
||||
{% elif admonition == "???" %}
|
||||
{% set style = "collapsible closed" %}
|
||||
{% set classes = "admonition" %}
|
||||
{% elif admonition == "???+" %}
|
||||
{% set style = "collapsible open" %}
|
||||
{% set classes = "admonition" %}
|
||||
{% else %}
|
||||
{% set classes = "hidden" %}
|
||||
{% endif %}
|
||||
|
||||
{% if "inline end" in first_line %}
|
||||
{% set classes = classes ~ " inline end" %}
|
||||
{% set parsed_first_line = parsed_first_line | slice(end=-2)%}
|
||||
{% elif "inline" in first_line %}
|
||||
{% set classes = classes ~ " inline" %}
|
||||
{% set parsed_first_line = parsed_first_line | slice(end=-1)%}
|
||||
{% endif %}
|
||||
|
||||
{% if classes != "hidden"%}
|
||||
{% if parsed_first_line[1] %}
|
||||
{% set classes = classes ~ " " ~ parsed_first_line[1] %}
|
||||
{% endif %}
|
||||
{% if parsed_first_line[2] %}
|
||||
{% if not parsed_first_line[2] == '""' %}
|
||||
{% set title = parsed_first_line | slice(start=2) | join(sep=" ") %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if parsed_first_line[1] %}
|
||||
{% set title = parsed_first_line[1] | title %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if "collapsible" in style %}
|
||||
<details class="{{classes}}"
|
||||
{% if "open" in style %} {{ "open='open'" }} {% endif %}>
|
||||
{% if title %}
|
||||
<summary class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</summary>
|
||||
<p>{{ content }}</p>
|
||||
{% endif %}
|
||||
</details>
|
||||
{% else %}
|
||||
<div class="{{classes}}">
|
||||
{% if title %}
|
||||
<div class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</div>
|
||||
{% endif %}
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
5
templates/shortcodes/button.html
Normal file
5
templates/shortcodes/button.html
Normal file
@@ -0,0 +1,5 @@
|
||||
|
||||
{% set path = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"') | trim_end_matches(pat='"') %}
|
||||
<button a href="{{path}}" class="border-transparent flex flex-col border-2 w-full items-start rounded h-16 md:h-24 transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
|
||||
{{ body | trim_start_matches(pat="<p>") | safe}}
|
||||
</button>
|
||||
31
templates/shortcodes/contact.html
Normal file
31
templates/shortcodes/contact.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<div class="relative isolate mt-20">>
|
||||
<div class="mx-auto grid max-w-4xl grid-cols-1 lg:grid-cols-1">
|
||||
<div class="relative px-6 pb-20 lg:pt-4 pt-32 lg:static lg:px-8 lg:py-48">
|
||||
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-2xl">
|
||||
<h2 class="text-3xl font-bold tracking-tight text-white">Get in touch</h2>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">Whether you have a question about our services, need assistance, or just want to share feedback, our team is ready to help.</p>
|
||||
<dl class="mt-10 space-y-4 text-base leading-7 text-gray-300">
|
||||
<div class="flex gap-x-4">
|
||||
<dt class="flex-none">
|
||||
<span class="sr-only">Address</span>
|
||||
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
|
||||
</svg>
|
||||
</dt>
|
||||
<dd>Antwerpse Steenweg 19 9000 - <br>Lochristi, Belgium.</dd>
|
||||
</div>
|
||||
<div class="flex gap-x-4">
|
||||
<dt class="flex-none">
|
||||
<span class="sr-only">Email</span>
|
||||
<svg class="h-7 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
|
||||
</svg>
|
||||
</dt>
|
||||
<dd><u><a class="hover:text-indigo-400" href="mailto:info@threefold.io">info@threefold.tech</a></u></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
{% set title = title | default(value="Call to Action") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button_text = button_text | default(value="Learn More") %}
|
||||
{% set button_link = button_link | default(value="#") %}
|
||||
{% set bg_color = bg_color | default(value="bg-indigo-100") %}
|
||||
{% set text_color = text_color | default(value="text-indigo-800") %}
|
||||
{% set button_color = button_color | default(value="bg-indigo-600") %}
|
||||
{% set button_text_color = button_text_color | default(value="text-white") %}
|
||||
|
||||
<div class="relative {{ bg_color }} {{ text_color }} rounded-lg shadow-md overflow-hidden my-8">
|
||||
<div class="px-6 py-8 md:p-10 md:flex md:items-center md:justify-between">
|
||||
<div class="md:flex-1">
|
||||
<h3 class="text-2xl font-bold">{{ title }}</h3>
|
||||
{% if description %}
|
||||
<p class="mt-2 text-base">{{ description }}</p>
|
||||
{% endif %}
|
||||
{% if caller %}
|
||||
<div class="mt-4">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if button_text and button_link %}
|
||||
<div class="mt-6 md:mt-0 md:ml-10 md:flex-shrink-0">
|
||||
<a href="{{ button_link }}" class="block w-full md:w-auto rounded-md px-5 py-3 {{ button_color }} {{ button_text_color }} text-base font-medium text-center shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
{{ button_text }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,22 +0,0 @@
|
||||
{% set title = title | default(value="Feature") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set icon = icon | default(value="") %}
|
||||
{% set bg_color = bg_color | default(value="bg-white") %}
|
||||
{% set hover_color = hover_color | default(value="hover:bg-gray-50") %}
|
||||
|
||||
<div class="relative {{ bg_color }} {{ hover_color }} shadow rounded-lg p-6 transition-all duration-300">
|
||||
{% if icon %}
|
||||
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
|
||||
<span class="text-xl">{{ icon | safe }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<h3 class="text-lg font-medium text-gray-900">{{ title }}</h3>
|
||||
{% if description %}
|
||||
<p class="mt-2 text-base text-gray-500">{{ description }}</p>
|
||||
{% endif %}
|
||||
{% if caller %}
|
||||
<div class="mt-4">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
26
templates/shortcodes/features.html
Normal file
26
templates/shortcodes/features.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set svg = svg | default(value="") %}
|
||||
{% set svg2 = svg2 | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
|
||||
<!-- section 2 page templates -->
|
||||
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center gap-x-3 text-lg font-semibold leading-7 mb-2 tracking-tight">
|
||||
{% if svg %}
|
||||
<svg class="h-full w-6 object-cover flex-none text-indigo-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
{% if svg %}
|
||||
<path fill-rule="evenodd" d="{{ svg }}" clip-rule="evenodd" />
|
||||
{% endif %}
|
||||
|
||||
{% if svg2 %}
|
||||
<path d="{{ svg2 }}" />
|
||||
{% endif %}
|
||||
</svg>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{{ title }}
|
||||
</div>
|
||||
<p class="text-base">{{ description }}</p>
|
||||
</div>
|
||||
@@ -4,8 +4,8 @@
|
||||
|
||||
<div class="flex gap-x-4 rounded-xl bg-white/5 p-6 ring-1 ring-inset ring-white/10">
|
||||
<div class="text-base leading-7">
|
||||
<h4 class="font-semibold ">{{ title }}</h4>
|
||||
<p class="mt-2 text-lg">{{ description }}
|
||||
<h4 class="font-semibold text-white">{{ title }}</h4>
|
||||
<p class="mt-2 text-lg text-gray-300">{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
16
templates/shortcodes/features_top_img.html
Normal file
16
templates/shortcodes/features_top_img.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set svg = svg | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
|
||||
<article class="flex flex-col items-start justify-between">
|
||||
<div class="max-w-xl">
|
||||
<div class="group relative">
|
||||
<div class="my-2 flex h-10 w-10 items-center justify-center rounded-lg">
|
||||
<img src="{{ svg }}" alt="">
|
||||
</div>
|
||||
<h4 class="mb-0 font-semibold">{{ title }}</h4>
|
||||
<p class="mt-1 text-base leading-6">{{ description }}</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
{% set title = title | default(value="Welcome") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
{% set bg_color = bg_color | default(value="bg-indigo-600") %}
|
||||
{% set text_color = text_color | default(value="text-white") %}
|
||||
|
||||
<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-20">
|
||||
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
|
||||
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
|
||||
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl xl:text-6xl">
|
||||
{{ title }}
|
||||
</h1>
|
||||
{% if subtitle %}
|
||||
<p class="mt-3 text-base sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if button_text and button_link %}
|
||||
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
|
||||
<a href="{{ button_link }}" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-600 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||
{{ button_text }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
|
||||
{% if caller %}
|
||||
{{ caller() }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,46 +0,0 @@
|
||||
{% set title = title | default(value="Welcome") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
{% set bg_color = bg_color | default(value="bg-blue-700") %}
|
||||
{% set text_color = text_color | default(value="text-white") %}
|
||||
{% set image = image | default(value="") %}
|
||||
|
||||
<div class="relative {{ bg_color }} {{ text_color }} overflow-hidden my-12 lg:my-24">
|
||||
<div class="absolute inset-0 z-0 opacity-20 bg-pattern"></div>
|
||||
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 relative z-10">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
|
||||
{{ title }}
|
||||
</h1>
|
||||
{% if subtitle %}
|
||||
<p class="mt-6 max-w-2xl mx-auto text-xl">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if button_text and button_link %}
|
||||
<div class="mt-10">
|
||||
<a href="{{ button_link }}" class="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md shadow-sm bg-white text-blue-700 hover:bg-blue-50 sm:px-10">
|
||||
{{ button_text }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if image %}
|
||||
<div class="mt-10 max-w-xl mx-auto">
|
||||
<img src="{{ image }}" alt="Hero image" class="rounded-lg shadow-xl">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if caller %}
|
||||
<div class="mt-8">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg-pattern {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
@@ -1,21 +0,0 @@
|
||||
<div class="fade-in flex items-center justify-center ">
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div class="mx-auto max-w-7xl py-12">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
|
||||
{{ announcement | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-base/7 font-light tracking-wide">{{ subheader }}</p>
|
||||
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance">{{ title }}</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight">{{ subtitle }}</h2>
|
||||
<p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">{{ description }}</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="{{ button1_link }}" class="rounded-2xl bg-gray-300 px-4 py-2 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">{{ button1_text }}</a>
|
||||
<a href="{{ button2_link }}" class="text-sm/6 font-semibold hover:text-gray-300">{{ button2_text }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
23
templates/shortcodes/hero_BG_image.html
Normal file
23
templates/shortcodes/hero_BG_image.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set image_BG = image_BG | default(value="") %}
|
||||
|
||||
<div class="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8">
|
||||
<img src="{{ image_BG }}" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover">
|
||||
|
||||
<div class="absolute -bottom-8 -left-96 -z-10 transform-gpu blur-3xl sm:-bottom-64 sm:-left-40 lg:-bottom-32 lg:left-8 xl:-left-10" aria-hidden="true">
|
||||
<div class="aspect-[1266/975] w-[79.125rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
{% if subtitle %}
|
||||
<h5>{{ subtitle }}</h5>
|
||||
{% endif %}
|
||||
<h1 class="pt-30">{{ title }}</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-300">{{ description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
36
templates/shortcodes/hero_BG_video.html
Normal file
36
templates/shortcodes/hero_BG_video.html
Normal file
@@ -0,0 +1,36 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set video_BG= video_BG| default(value="") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set button_text_1 = button_text_1 | default(value="") %}
|
||||
{% set button_link_1 = button_link_1 | default(value="") %}
|
||||
{% set button_text_2 = button_text_2 | default(value="") %}
|
||||
{% set button_link_2 = button_link_2 | default(value="") %}
|
||||
|
||||
<div class="relative isolate overflow-hidden pt-14">
|
||||
<!-- Video background -->
|
||||
<video autoplay loop muted class="absolute inset-0 -z-10 h-full w-full object-fill">
|
||||
<source src="{{ video_BG }}" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<!-- Gray transparent overlay -->
|
||||
<div class="absolute inset-0 bg-gray-900/50 -z-10"></div>
|
||||
|
||||
<!-- Content on top -->
|
||||
<div class="mx-auto max-w-3xl py-32 px-6">
|
||||
<div class="text-center">
|
||||
<h1 class="mb-4 text-white">{{ title }}</h1>
|
||||
<h2 class="lg:text-4xl text-3xl mt-2 text-white">{{ subtitle }}</h2>
|
||||
<p class="mt-4 leading-8 text-white">{{ description }}</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6 text-white">
|
||||
<a href="{{ button_link_1 }}" class="rounded-md bg-gray-900 px-3 py-2 font-semibold text-white shadow-sm hover:bg-gray-500 hover:text-white ">
|
||||
{{ button_text_1 }}
|
||||
</a>
|
||||
<a href="{{ button_link_2 }}" class="text-sm font-semibold leading-6">
|
||||
{{ button_text_2 }} <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
25
templates/shortcodes/image_content.html
Normal file
25
templates/shortcodes/image_content.html
Normal file
@@ -0,0 +1,25 @@
|
||||
{% set title = title | default(value="") %}
|
||||
{% set image = image | default(value="") %}
|
||||
{% set description_1 = description_1 | default(value="") %}
|
||||
{% set description_2 = description_2 | default(value="") %}
|
||||
{% set description_3 = description_3 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="relative py-2 bor">
|
||||
<div class="relative lg:h-72 h-auto w-full overflow-hidden rounded-lg">
|
||||
<img src="{{ image }}" alt="usecase" class="h-30 w-full object-cover object-center">
|
||||
</div>
|
||||
<div class="relative mt-4">
|
||||
<h3 class="text-lg font-semibold">{{ title }}</h3>
|
||||
<p class="mt-1 mb-4 text-base">{{ description_1 }}</p>
|
||||
<p class="mt-1 mb-4 text-base">{{ description_2 }}</p>
|
||||
<p class="mt-1 mb-4 text-base">{{ description_3 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
44
templates/shortcodes/menu.html
Normal file
44
templates/shortcodes/menu.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<!-- row shortcode
|
||||
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
||||
Divides markdown into columns by splitting content using column identifier "|||"
|
||||
Creates equal width blocks in a flex row.
|
||||
|
||||
Parameters:
|
||||
- style:
|
||||
- lean: if style is lean, the row doesn't have outer margins
|
||||
- bgPath: if bgPath is passed, the row has a full width background
|
||||
-->
|
||||
|
||||
{% set columns = body | safe | markdown | split(pat="|||") %}
|
||||
|
||||
<!-- aligns columns depending on col number-->
|
||||
|
||||
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %}
|
||||
{% set column_classes = "flex-1 m-2 lg:m-4" %}
|
||||
|
||||
<!-- makes row full screen width and adds background img -->
|
||||
|
||||
<div class="{{classes}}">
|
||||
{% for column in columns%}
|
||||
<!-- Hides empty columns if displayed vertically in small screen -->
|
||||
{% if column | as_str | length < 10 %}
|
||||
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
|
||||
{{column | split(pat="{% button() %}") | slice(end=1)}}
|
||||
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
|
||||
{% set body = button %}
|
||||
{% include "shortcodes/button.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="{{column_classes}}">
|
||||
{{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
|
||||
<hr class="border-t-2 mt-2">
|
||||
<br/>
|
||||
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
|
||||
{% set body = button %}
|
||||
{% include "shortcodes/button.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
3
templates/shortcodes/mermaid.html
Normal file
3
templates/shortcodes/mermaid.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="mermaid">
|
||||
{{ body }}
|
||||
</div>
|
||||
265
templates/shortcodes/row.html
Normal file
265
templates/shortcodes/row.html
Normal file
@@ -0,0 +1,265 @@
|
||||
<!-- row shortcode
|
||||
Shortcode used in markdown for the creation of mobile compatible vertical rows
|
||||
Divides markdown into columns by splitting content using column identifier "|||"
|
||||
Creates equal width blocks in a flex row.
|
||||
|
||||
Parameters:
|
||||
- style:
|
||||
- lean: if style is lean, the row doesn't have outer margins
|
||||
- bgPath: if bgPath is passed, the row has a full width background
|
||||
-->
|
||||
|
||||
|
||||
<!-- This fixes link & img paths in local, prod, and wth prefix -->
|
||||
{% if page %}
|
||||
{% if "](" in body %}
|
||||
{% set body_arr = body | split(pat="](") %}
|
||||
{% set body = body_arr[0] %}
|
||||
{% for i in body_arr %}
|
||||
{% set prev_index = loop.index0 - 1 %}
|
||||
{% if not loop.first %}
|
||||
{% if "![" in body_arr[prev_index] %}
|
||||
{% set_global body = body ~ '](' ~ page.permalink ~ i %}
|
||||
{% else %}
|
||||
{% if i is not starting_with("http") %}
|
||||
{% set base_url = get_url(path="") %}
|
||||
{% set_global body = body ~ '](' ~ base_url ~ i %}
|
||||
{% else %}
|
||||
{% set_global body = body ~ '](' ~ i %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% set columns = body | safe | markdown | split(pat="<p>|||</p>") %}
|
||||
|
||||
{% set row_class = "relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden"%}
|
||||
|
||||
<!-- aligns columns depending on col number-->
|
||||
{% if 2 < columns | length %}
|
||||
{% set row_class = row_class ~ " lg:items-start" %}
|
||||
{% else %}
|
||||
{% set row_class = row_class ~ " items-center" %}
|
||||
{% endif %}
|
||||
|
||||
{% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 mx-4" %}
|
||||
|
||||
|
||||
{% set row_id = '' %}
|
||||
|
||||
{% if id %}
|
||||
{% set row_id = id %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
<!-- reverse col at mobile -->
|
||||
|
||||
|
||||
{% if reverse %}
|
||||
{% if "rightreserve" in reverse %}
|
||||
{% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %}
|
||||
{% elif "leftreserve" in reverse %}
|
||||
{% set row_class = "flex flex-col md:flex-row items-center mx-8" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Padding -->
|
||||
|
||||
{% set padding_class = " py-4 md:py-4 lg:py-24" %}
|
||||
|
||||
{% if padding %}
|
||||
{% if "none" in padding %}
|
||||
{% set padding_class = " py-0" %}
|
||||
{% elif "top" in padding %}
|
||||
{% set padding_class = " py-0 lg:pt-12" %}
|
||||
{% elif "bottom" in padding %}
|
||||
{% set padding_class = " py-2 md:py-4 lg:pb-12" %}
|
||||
{% elif "both" in padding %}
|
||||
{% set padding_class = " py-4 md:py-4 lg:py-16" %}
|
||||
{% endif %}
|
||||
{% if "hero" in padding %}
|
||||
{% set padding_class = " py-4 md:py-4 lg:py-12" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if css %}
|
||||
{% set padding_class = padding_class ~ " " ~ css %}
|
||||
{% endif %}
|
||||
|
||||
{% set row_class = row_class ~ padding_class %}
|
||||
|
||||
|
||||
<!-- Margins -->
|
||||
|
||||
{% set margin_class = " mx-4 md:mx-16 lg:mx-24" %}
|
||||
|
||||
{% if margin %}
|
||||
{% if "none" in margin %}
|
||||
{% set margin_class = " mx-0" %}
|
||||
{% elif "wide" in margin %}
|
||||
{% set margin_class = " mx-2 sm:mx-4 md:mx-6 lg:mx-8 xl:mx-10 " %}
|
||||
{% elif "semiwide" in margin %}
|
||||
{% set margin_class = " mx-2 sm:mx-8 md:mx-12 lg:mx-16 xl:mx-20 " %}
|
||||
{% elif "moderate" in margin %}
|
||||
{% set margin_class = " mx-4 sm:mx-16 md:mx-20 lg:mx-28" %}
|
||||
{% elif "narrow" in margin %}
|
||||
{% set margin_class = " mx-4 sm:mx-20 md:mx-28 lg:mx-40" %}
|
||||
{% elif "tight" in margin %}
|
||||
{% set margin_class = " mx-4 sm:mx-32 md:mx-40 lg:mx-80 xl:mx-96" %}
|
||||
{% elif "header" in margin %}
|
||||
{% set margin_class = " mx-4 sm:mx-20 md:mx-28 lg:mx-40 my-10" %}
|
||||
{% elif "withContainer" in margin %}
|
||||
{% set margin_class = " mx-4 " %}
|
||||
{% endif %}
|
||||
{% if "lean-left" in margin %}
|
||||
{% set margin = margin_class | replace(from=" ", to=" first:")%}
|
||||
{% set margin_left = margin | replace(from="mx", to="-ml") %}
|
||||
{% set margin_right = margin | replace(from="mx", to="mr") %}
|
||||
{% set col_class = col_class ~ " md:last:px-8 lg:last:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
|
||||
{% set row_class = row_class ~ " sm:gap-0 " %}
|
||||
{% elif "lean-right" in margin %}
|
||||
{% set margin = margin_class | replace(from=" ", to=" last:")%}
|
||||
{% set margin_left = margin | replace(from="mx", to="ml") %}
|
||||
{% set margin_right = margin | replace(from="mx", to="-mr") %}
|
||||
{% set col_class = col_class ~ " md:first:px-8 lg:first:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
|
||||
{% set row_class = row_class ~ " sm:gap-0 " %}
|
||||
{% endif %}
|
||||
{% if "hero" in margin %}
|
||||
{% set margin_class = " mx-4 md:mx-16 lg:mx-24" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if css %}
|
||||
{% set margin_class = margin_class ~ " " ~ css %}
|
||||
{% endif %}
|
||||
|
||||
{% set row_class = row_class ~ margin_class %}
|
||||
|
||||
|
||||
|
||||
{% if style %}
|
||||
|
||||
{% if "center" in style %}
|
||||
{% set row_class = row_class ~ " text-center items-center " %}
|
||||
{% set col_class = col_class ~ " flex-1 " %}
|
||||
{% endif %}
|
||||
|
||||
{% if "right" in style %}
|
||||
{% set row_class = row_class ~ " text-center lg:text-right md:text-right justify-center " %}
|
||||
{% set col_class = col_class ~ " flex-1" %}
|
||||
{% endif %}
|
||||
|
||||
{% if "left" in style %}
|
||||
{% set row_class = row_class ~ " text-center lg:text-left md:text-left justify-center " %}
|
||||
{% set col_class = col_class ~ " flex-1" %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if "items-end" in style %}
|
||||
{% set row_class = row_class ~ " lg:items-end" %}
|
||||
{% set col_class = col_class ~ " flex-1 " %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- makes row semi-full screen width, strips margins -->
|
||||
{% if "between" in style %}
|
||||
{% set row_class = row_class ~ " lg:max-w-6xl " %}
|
||||
{% elif "moderate" in style %}
|
||||
{% set row_class = row_class ~ " " %}
|
||||
{% endif %}
|
||||
|
||||
<!-- makes row full screen width, strips margins -->
|
||||
{% if "narrow" in style %}
|
||||
{% set row_class = row_class ~ " lg:max-w-3xl " %}
|
||||
{% elif "tight" in style %}
|
||||
{% set row_class = row_class ~ " lg:max-w-sm " %}
|
||||
{% elif "moderate" in style %}
|
||||
{% set row_class = row_class ~ " mx-20 " %}
|
||||
{% endif %}
|
||||
|
||||
{% if "invert-color" in style %}
|
||||
|
||||
{% set row_class = row_class ~ " text-white lg:text-white " %}
|
||||
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% set row_class = row_class ~ " " %}
|
||||
{% endif %}
|
||||
|
||||
{% set anchor_link = ""%}
|
||||
{% if anchor %}
|
||||
{% set anchor_link = anchor %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- makes row full screen width and adds background img -->
|
||||
{% set styles = "" %}
|
||||
{% set div_class = " " %}
|
||||
{% if bgPath %}
|
||||
{% set background_url = page.permalink ~ bgPath %}
|
||||
{% set styles = "background: url('" ~ background_url ~ "'); background-size: cover; background-position: center;" %}
|
||||
{% if "#desktop" in bgPath %}
|
||||
{% set bgStyle = false %}
|
||||
{% set div_class = " !bg-[length:0px_0px] !bg-no-repeat lg:!bg-cover " %}
|
||||
{% set row_class = row_class | replace(from='text-white', to='text-black') %}
|
||||
{% if "invert-color" in style %}
|
||||
{% if "#desktop" in bgPath %}
|
||||
{% set row_class = row_class ~ " lg:text-white " %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if bgStyle %}
|
||||
{% if "full" in bgStyle %}
|
||||
{% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;" %}
|
||||
{% elif "hero" in bgStyle %}
|
||||
{% set div_class = div_class ~ " -mt-24 pt-12 " %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if bgColor %}
|
||||
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
|
||||
{% set row_class = row_class %}
|
||||
{% endif %}
|
||||
|
||||
{% if class %}
|
||||
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
|
||||
{% set row_class = row_class %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Cancels page margins so that rows can have separate margins -->
|
||||
{% set no_margins = " -mx-8 md:-mx-12 lg:-mx-16 xl:-mx-20" %}
|
||||
|
||||
|
||||
<div id="{{anchor_link}}" class="{{'relative justify-center flex overflow-hidden ' ~ div_class }}" style="{{styles}}">
|
||||
<div id="{{row_id}}" class="{{row_class}}" style="min-width: -webkit-fill-available; min-width: -moz-available">
|
||||
|
||||
{% for column in columns%}
|
||||
|
||||
<!-- Hides empty columns if displayed vertically in small screen -->
|
||||
{% if column | as_str | length < 10 %}
|
||||
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1 ">
|
||||
{{ column | safe }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="{{col_class}}">
|
||||
<!-- handles mermaid markdown content display -->
|
||||
|
||||
{% if "{% mermaid() %}" in column %}
|
||||
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
|
||||
{% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
|
||||
<div class="mermaid">
|
||||
{{mermaid_content | safe }}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ column | safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
8
templates/shortcodes/space.html
Normal file
8
templates/shortcodes/space.html
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
{% set height = 52 %}
|
||||
{% if size %}
|
||||
{% if size == "small" %}
|
||||
{% set height = 28 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="h-20 lg:h-{{height}}"></div>
|
||||
165
templates/shortcodes/tabs.html
Normal file
165
templates/shortcodes/tabs.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<div class="">
|
||||
<section aria-labelledby="features-heading" class="mx-auto max-w-7xl py-12 lg:py-24 sm:px-2 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0">
|
||||
<div class="max-w-3xl">
|
||||
<h2 id="features-heading">Technical Specifications</h2>
|
||||
<p class="mt-4">Dive into the technical details that empower our revolutionary cloud platform, Offering Compute (GPU, CPU), Storage and Network.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="-mx-4 flex overflow-x-auto sm:mx-0">
|
||||
<div class="flex-auto border-b border-gray-200 px-4 sm:px-0">
|
||||
<div class="-mb-px flex space-x-2 lg:space-x-10" aria-orientation="horizontal" role="tablist">
|
||||
<!-- Current: "border-indigo-400 text-indigo-400", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
||||
<button id="features-tab-1" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-50 hover:text-gray-300" aria-controls="features-panel-1" role="tab" type="button">3Nodes</button>
|
||||
<button id="features-tab-2" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-50 hover:text-gray-300" aria-controls="features-panel-2" role="tab" type="button">Zero-OS</button>
|
||||
<button id="features-tab-3" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-50 hover:text-gray-300" aria-controls="features-panel-3" role="tab" type="button">Mycelium</button>
|
||||
<button id="features-tab-4" class="whitespace-nowrap border-b-2 border-transparent py-6 text-base font-medium text-gray-50 hover:text-gray-300" aria-controls="features-panel-4" role="tab" type="button">QSS</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="features-panel-1" class="space-y-6 pt-4" aria-labelledby="features-tab-1" role="tabpanel" tabindex="0">
|
||||
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
||||
<div class="mt-6 lg:col-span-7 lg:mt-0">
|
||||
<h3 class="">3Nodes</h3>
|
||||
<p class="mt-2 ">3Nodes are the hardware building blocks of our stack and are installed in data centres, offices or homes.
|
||||
</p>
|
||||
<dl class="mt-6 space-y-4">
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Plug & Play</h5>
|
||||
<p class="text-base">Simply connect your certified node to the internet.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Peer-to-peer</h5>
|
||||
<p class="text-base">Consumes up to 10x less energy for certain workloads.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Scalable</h5>
|
||||
<p class="text-base">Nodes can be deployed on any level providing unlimited scalability.</p>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="lg:col-span-5">
|
||||
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
|
||||
<img src="/technology/img/3node.png" alt="Maple organizer base with slots, supporting white polycarbonate trays of various sizes." class="object-cover object-center">
|
||||
</div> #}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="features-panel-2" class="space-y-6 pt-4" aria-labelledby="features-tab-2" role="tabpanel" tabindex="0">
|
||||
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
||||
<div class="mt-6 lg:col-span-7 lg:mt-0">
|
||||
<h3>Zero-OS</h3>
|
||||
<p class="mt-2 text-base text-gray-50">Zero-OS is a bare-metal, stateless, and efficient operating system designed to host AI, Web2, and Web3 workloads in a more sovereign manner, without compromising on security, control, and monitoring.</p>
|
||||
<dl class="mt-6 space-y-4">
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• CORE-0</h5>
|
||||
<p class="mt-2 text-base text-gray-100">First process launched on the Zero-OS. This process kicks off all activities on the node and allows the full OS to be booted over the network maintening full integrity and hacking surfaces </p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Hardware Support</h5>
|
||||
<p class="mt-2 text-base text-gray-100">Support for INTEL, AMD or ARM Based CPUs. Support any amount of GPU/CPU/Memory</p>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Kernel</h5>
|
||||
<p class="mt-2 text-base text-gray-100">Zero-OS uses the well known Linux Kernel because it has device drivers for almost any hardware that exists.</p>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="lg:col-span-5">
|
||||
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
|
||||
<img src="/technology/img/zos.png" alt="" class="object-cover object-center">
|
||||
</div> #}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="features-panel-3" class="space-y-6 pt-4" aria-labelledby="features-tab-3" role="tabpanel" tabindex="0">
|
||||
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
||||
<div class="mt-6 lg:col-span-7 lg:mt-0">
|
||||
<h3>Mycelium</h3>
|
||||
<p class="mt-2 text-base text-gray-50">
|
||||
Mycelium is the culmination of a decade-long quest for a more efficient network system, enabling faster and more reliable communication between machines and people.
|
||||
</p>
|
||||
<dl class="mt-6 space-y-4">
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Shortest Path Route</h5>
|
||||
<dd class="mt-2 text-base text-gray-100">Mycelium optimizes data transmission by identifying and utilizing the fastest and most direct routes.</dd>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• End-to-End Encrypted</h5>
|
||||
<dd class="mt-2 text-base text-gray-100">All data is secured with end-to-end encryption, ensuring protection against interception.</dd>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Ultra Compatible</h5>
|
||||
<dd class="mt-2 text-base text-gray-100">Mycelium seamlessly integrates with any existing internet connection, including peer-to-peer networks.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="lg:col-span-5">
|
||||
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
|
||||
<img src="/technology/img/mycelium.png" alt="" class="object-cover object-center">
|
||||
</div> #}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="features-panel-4" class="space-y-6 pt-4" aria-labelledby="features-tab-4" role="tabpanel" tabindex="0">
|
||||
<div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
|
||||
<div class="mt-6 lg:col-span-7 lg:mt-0">
|
||||
<h3>QSS</h3>
|
||||
<p class="mt-2 text-base text-gray-100">A decentralized, globally distributed data storage system that is up to 10 times more efficient in terms of power and hardware usage. It is highly reliable, ensuring that data cannot be lost or corrupted. Additionally, it is safe, private, and scalable.
|
||||
</p>
|
||||
<dl class="mt-6 space-y-4">
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Always Consistent</h5>
|
||||
<dd class="mt-2 text-base text-gray-100">It employs advanced storage algorithms that fragment files into multiple pieces distributed across numerous nodes and sites.</dd>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Self-healing</h5>
|
||||
<dd class="mt-2 text-base text-gray-100">The storage layer is equipped with automatic data integrity checks that promptly detect and correct any corruption, ensuring continuous data health..</dd>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg mb-0">• Ultra Secure</h5>
|
||||
<dd class="mt-2 text-base text-gray-100">With its sophisticated encryption and redundancy protocols, data remains secure, protected from loss, and impervious to corruption.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="lg:col-span-5">
|
||||
{# <div class="lg:aspect-h-1 lg:aspect-w-1 overflow-hidden rounded-lg">
|
||||
<img src="/technology/img/fungistor.png" alt="Walnut organizer system on black leather desk mat on top of white desk." class="object-cover object-center">
|
||||
</div> #}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const tabs = document.querySelectorAll('[role="tab"]');
|
||||
const panels = document.querySelectorAll('[role="tabpanel"]');
|
||||
|
||||
tabs.forEach((tab, index) => {
|
||||
tab.addEventListener('click', function () {
|
||||
tabs.forEach(t => t.classList.remove('border-indigo-400', 'text-indigo-400'));
|
||||
panels.forEach(panel => panel.style.display = 'none');
|
||||
|
||||
tab.classList.add('border-indigo-400', 'text-indigo-400');
|
||||
const panelId = tab.getAttribute('aria-controls');
|
||||
document.getElementById(panelId).style.display = 'block';
|
||||
});
|
||||
|
||||
// Hide all panels except the first one on load
|
||||
if (index === 0) {
|
||||
tab.classList.add('border-indigo-400', 'text-indigo-400');
|
||||
panels[index].style.display = 'block';
|
||||
} else {
|
||||
panels[index].style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user