This commit is contained in:
2024-11-19 17:03:06 +01:00
parent 100c989027
commit 41b6375b8a
3 changed files with 69 additions and 1 deletions

View File

@@ -6,6 +6,7 @@
{% include "partials/home/grid_stats.html" %}
{% include "partials/home/features.html" %}
{% include "partials/home/web4.html" %}
{% include "partials/home/faq.html" %}
{% include "partials/home/cta.html" %}
{% endblock content %}

View File

@@ -0,0 +1,67 @@
<div class="bg-transparent">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
<div class="mx-auto max-w-4xl divide-y divide-white/10">
<h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">Frequently asked questions</h2>
<dl class="mt-10 space-y-6 divide-y divide-white/10">
<div class="pt-6">
<dt>
<!-- Expand/collapse question button -->
<button type="button" class="flex w-full items-start justify-between text-left text-white" aria-controls="faq-0" aria-expanded="false">
<span class="text-base/7 font-semibold">What&#039;s the best thing about Switzerland?</span>
<span class="ml-6 flex h-7 items-center">
<!--
Icon when question is collapsed.
Item expanded: "hidden", Item collapsed: ""
-->
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<!--
Icon when question is expanded.
Item expanded: "", Item collapsed: "hidden"
-->
<svg class="hidden size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 pr-12" id="faq-0">
<p class="text-base/7 text-gray-300">I don&#039;t know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</dd>
</div>
<!-- More questions... -->
</dl>
</div>
</div>
</div>
<script>
// Select all buttons controlling the dropdowns
document.querySelectorAll('button[aria-controls]').forEach(button => {
button.addEventListener('click', () => {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
const contentId = button.getAttribute('aria-controls');
const content = document.getElementById(contentId);
// Toggle the "aria-expanded" attribute
button.setAttribute('aria-expanded', !isExpanded);
// Show or hide the associated content
if (isExpanded) {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
// Toggle the visibility of icons
const [iconExpand, iconCollapse] = button.querySelectorAll('[data-slot="icon"]');
iconExpand.classList.toggle('hidden', isExpanded);
iconCollapse.classList.toggle('hidden', !isExpanded);
});
});
</script>

View File

@@ -4,7 +4,7 @@
<div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">What Weve Built</h2>
<p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
At Threefold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability. Explore how our creations are shaping a more open and connected future.
At Threefold, we've created solutions that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
</p>
</div>
</div>