update home
This commit is contained in:
parent
32d19d3424
commit
13425cb73c
@ -29,7 +29,6 @@ template = "index.html"
|
||||
description="Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning. <br><br>Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.",
|
||||
button_text="Learn more",
|
||||
button_link="/about"
|
||||
|
||||
) }}
|
||||
|
||||
|
||||
@ -58,13 +57,13 @@ template = "index.html"
|
||||
{{ use_cases(
|
||||
subtitle="WHAT IT ENABLES",
|
||||
title="Powering Secure & Decentralized Connectivity",
|
||||
description="Mycelium, a key component of the ThreeFold Grid, can be installed on any computer (macOS, Linux, Windows) and smartphone (iOS, Android). With seamless integration, it enables secure and private communication across devices."
|
||||
description="Mycelium, a key component of the ThreeFold Grid, can be installed on any computer (macOS, Linux, Windows) and smartphone (iOS, Android). With seamless integration, it enables secure and private communication across devices.",
|
||||
description2="The ThreeFold Dashboard offers dozens of applications with built-in Mycelium support, making it easy to deploy and utilize. Once installed, Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure."
|
||||
) }}
|
||||
|
||||
<div class="container mx-auto px-6 lg:px-8 py-12 lg:pb-24">
|
||||
<div class="lg:max-w-7xl container mx-auto py-12 lg:pb-24">
|
||||
<div class="mx-auto grid grid-cols-1 gap-x-6 gap-y-10 text-base sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-x-8 lg:gap-y-8">
|
||||
<div class="relative pl-9">
|
||||
<div class="relative ">
|
||||
|
||||
## **PRODUCTIVITY & COMMUNICATION**
|
||||
|
||||
@ -79,7 +78,7 @@ template = "index.html"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-9">
|
||||
<div class="relative ">
|
||||
|
||||
## **INFRASTRUCTURE**
|
||||
|
||||
@ -94,7 +93,7 @@ template = "index.html"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-9">
|
||||
<div class="relative ">
|
||||
|
||||
## **SERVICES**
|
||||
|
||||
@ -109,7 +108,7 @@ template = "index.html"
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative pl-9">
|
||||
<div class="relative ">
|
||||
|
||||
## **MEDIA & CONTENT**
|
||||
|
||||
@ -140,14 +139,6 @@ template = "index.html"
|
||||
|
||||
|
||||
|
||||
<!-- {{ feature(
|
||||
feature_title="Decentralized Nodes",
|
||||
feature_description="Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.",
|
||||
)
|
||||
|
||||
}} -->
|
||||
|
||||
|
||||
<!-- Section 5 -->
|
||||
|
||||
{{ hero_bottom_img(
|
||||
@ -155,20 +146,17 @@ template = "index.html"
|
||||
image_alt="Coming Soon: The Future of Mycelium",
|
||||
subtitle="WHAT'S NEW",
|
||||
title="Coming Soon: The Future of Mycelium",
|
||||
description="Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what’s coming next by staying connected with our latest updates."
|
||||
)
|
||||
description="Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates."
|
||||
) }}
|
||||
|
||||
}}
|
||||
|
||||
<div class="container mx-auto lg:pb-24 pb-12">
|
||||
<div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
|
||||
|
||||
{{
|
||||
feature_card(
|
||||
title="✓ Quantum Safe Storage Functionality",
|
||||
description="Mycelium's quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.",
|
||||
icon=""
|
||||
)
|
||||
}}
|
||||
icon="") }}
|
||||
|
||||
{{ feature_card(
|
||||
title="✓ Entry and Exit Points for AI Workloads",
|
||||
@ -204,12 +192,11 @@ template = "index.html"
|
||||
{{ use_cases(
|
||||
subtitle="BENEFITS",
|
||||
title="Nature's Blueprint for Digital Connectivity",
|
||||
description="Just as nature's mycelium network serves as a critical component in the ecosystems of forests, connecting trees and plants underground, the Mycelium technology offers reliable connectivity in an efficient and resilient way."
|
||||
description="Just as nature's mycelium network serves as a critical component in the ecosystems of forests, connecting trees and plants underground, the Mycelium technology offers reliable connectivity in an efficient and resilient way.",
|
||||
description2=""
|
||||
|
||||
) }}
|
||||
|
||||
<div class="container mx-auto lg:pb-24 pb-12">
|
||||
<div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
|
||||
{{
|
||||
feature_card(
|
||||
@ -246,52 +233,79 @@ template = "index.html"
|
||||
|
||||
|
||||
|
||||
<!-- Section 7 -->
|
||||
|
||||
{{ hero3(
|
||||
announcement='',
|
||||
subheader="WHAT'S NEW",
|
||||
title="Coming Soon: The Future of Mycelium",
|
||||
<div class="lg:max-w-7xl container mx-auto lg:pb-24 pb-12">
|
||||
|
||||
{{ use_cases(
|
||||
subtitle="",
|
||||
description="Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what’s coming next by staying connected with our latest updates.",
|
||||
button1_text="Get started",
|
||||
button1_link="#",
|
||||
button2_text="Learn more",
|
||||
button2_link="#"
|
||||
title="Frequently Asked Questions",
|
||||
description="",
|
||||
description2=""
|
||||
) }}
|
||||
|
||||
{{
|
||||
hero2(
|
||||
title="Welcome to Your Zola Site",
|
||||
subtitle="A modern, responsive website built with Zola and styled with Tailwind CSS",
|
||||
button_text="Learn More",
|
||||
button_link="/blog", bg_color="bg-blue-700"
|
||||
<br>
|
||||
|
||||
{{ accordion(
|
||||
question="What is Mycelium?",
|
||||
description="Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications."
|
||||
) }}
|
||||
|
||||
{{ accordion(
|
||||
question="Is mycelium ready to scale to the world?",
|
||||
description="No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025."
|
||||
) }}
|
||||
|
||||
{{ accordion(
|
||||
question="How do I install Mycelium?",
|
||||
description="The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable. Click here for more info."
|
||||
) }}
|
||||
|
||||
## About This Site
|
||||
{{ accordion(
|
||||
question="How can I find and use my Mycelium address?",
|
||||
description="Upon using the Mycelium app, you're assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface."
|
||||
) }}
|
||||
|
||||
This is a modern, responsive website built with [Zola](https://www.getzola.org/) and styled with [Tailwind CSS](https://tailwindcss.com/). It demonstrates the use of shortcodes and markdown together to create beautiful, reusable components.
|
||||
{{ accordion(
|
||||
question="Can I deploy workloads on the TFGrid using Mycelium?",
|
||||
description="Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation."
|
||||
) }}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Getting Started
|
||||
|
||||
To add new content, create Markdown files in the `content` directory. Zola will automatically generate pages for each file.
|
||||
|
||||
For more information, check out the [Zola documentation](https://www.getzola.org/documentation/getting-started/overview/) and [Tailwind CSS documentation](https://tailwindcss.com/docs).
|
||||
|
||||
{{
|
||||
cta(
|
||||
title="Ready to Get Started?",
|
||||
description="Create your own beautiful website with Zola and Tailwind CSS today.",
|
||||
button_text="View Blog",
|
||||
button_link="/blog")
|
||||
{{ accordion(
|
||||
question="Is there an API available for Mycelium?",
|
||||
description="Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository"
|
||||
)
|
||||
}}
|
||||
|
||||
{{ accordion(
|
||||
question="What should I do if I encounter issues during installation or usage?",
|
||||
description="If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations."
|
||||
)
|
||||
}}
|
||||
|
||||
{{ accordion(
|
||||
question="How does Mycelium handle routing within its network?",
|
||||
description="Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network."
|
||||
)
|
||||
}}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Section 8 -->
|
||||
|
||||
{{ cta(
|
||||
image_src="/images/mycel3.png",
|
||||
image_alt="App screenshot",
|
||||
title="Get Mycelium Today",
|
||||
description="Join the Mycelium network and be a part of the decentralized movement.",
|
||||
button_text="Download Now",
|
||||
button_link="/download",
|
||||
button_text2="Read More",
|
||||
button_link2="https://threefold.info/mycelium/docs/"
|
||||
) }}
|
||||
|
||||
|
||||
<style scope>
|
||||
ul {
|
||||
list-style: circle;
|
||||
|
||||
@ -77,16 +77,7 @@ We follow a systematic approach to ensure that every solution we deliver meets t
|
||||
5. **Deployment** - Smooth transition to production with minimal disruption
|
||||
6. **Support** - Ongoing assistance to ensure long-term success
|
||||
|
||||
{{
|
||||
cta(
|
||||
title="Ready to Experience the Difference?",
|
||||
description="Join the many satisfied clients who have transformed their operations with our solutions.",
|
||||
button_text="Contact Us",
|
||||
button_link="#",
|
||||
bg_color="bg-indigo-100",
|
||||
text_color="text-indigo-800"
|
||||
)
|
||||
}}
|
||||
|
||||
|
||||
## Testimonials
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-10 flex items-baseline space-x-4">
|
||||
<a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Home</a>
|
||||
<a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Why</a>
|
||||
<a href="{{ get_url(path='about') }}" class="{% if current_path is starting_with('/about') %}bg-gray-800 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">About</a>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<!-- <div class="dropdown">
|
||||
@ -35,18 +35,18 @@
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
|
||||
<a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
||||
<!-- <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Blog</a>
|
||||
<a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} px-3 py-2 rounded-md text-sm font-medium">Team</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<div class="ml-4 flex items-center md:ml-6">
|
||||
<a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
||||
<!-- <a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
||||
Zola Docs
|
||||
</a>
|
||||
<a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
||||
Tailwind Docs
|
||||
</a> -->
|
||||
<a href="https://tailwindcss.com/docs" target="_blank" rel="noopener" class="border rounded-full text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">
|
||||
Get Mycelium
|
||||
</a>
|
||||
<button id="theme-toggle" type="button" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white p-2 rounded-md ml-2 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-gray-300 dark:focus:ring-white">
|
||||
<!-- Sun icon (light mode) -->
|
||||
@ -81,27 +81,27 @@
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||
<a href="{{ config.base_url }}" class="{% if current_path == '/' %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Home</a>
|
||||
<a href="{{ get_url(path='why') }}" class="{% if current_path is starting_with('/why') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Why</a>
|
||||
<a href="{{ get_url(path='about') }}" class="{% if current_path is starting_with('/about') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">About</a>
|
||||
|
||||
<!-- Mobile dropdown menu -->
|
||||
<!-- <div class="relative" x-data="{ open: false }">
|
||||
<button @click="open = !open" class="{% if current_path is starting_with('/why') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} w-full text-left flex justify-between items-center px-3 py-2 rounded-md text-base font-medium">
|
||||
<button @click="open = !open" class="{% if current_path is starting_with('/about') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} w-full text-left flex justify-between items-center px-3 py-2 rounded-md text-base font-medium">
|
||||
Why Us
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<div id="mobile-why-menu" class="hidden pl-4 py-2 space-y-1">
|
||||
<a href="{{ get_url(path='why') }}" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
|
||||
<a href="{{ get_url(path='about') }}" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Overview</a>
|
||||
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Our Approach</a>
|
||||
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Testimonials</a>
|
||||
<a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Case Studies</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
|
||||
<a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
||||
<a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Zola Docs</a>
|
||||
<!-- <a href="{{ get_url(path='blog') }}" class="{% if current_path is starting_with('/blog') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Blog</a>
|
||||
<a href="{{ get_url(path='team') }}" class="{% if current_path is starting_with('/team') %}bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-white{% else %}text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white{% endif %} block px-3 py-2 rounded-md text-base font-medium">Team</a> -->
|
||||
<a href="https://github.com/getzola/zola" target="_blank" rel="noopener" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Get Mycelium</a>
|
||||
<button id="mobile-theme-toggle" type="button" class="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left flex items-center">
|
||||
<span>Toggle Dark Mode</span>
|
||||
<svg id="mobile-theme-toggle-icon" class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
66
templates/shortcodes/accordion.html
Normal file
66
templates/shortcodes/accordion.html
Normal file
@ -0,0 +1,66 @@
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- <main class="fade-in relative flex flex-col justify-center overflow-hidden bg-white"> -->
|
||||
<!-- <div class="w-full mx-auto px-4 md:px-6 py-12 border-t-2"> -->
|
||||
|
||||
<!-- <h1 class="text-3xl lg:text-4xl font-normal tracking-tight text-black pt-12">Frequently Asked Questions</h1> -->
|
||||
|
||||
<!-- Accordion component -->
|
||||
<!-- <div class="divide-y divide-white/50 my-10"> -->
|
||||
<!-- Accordion item -->
|
||||
<div x-data="{ expanded: false }" class="py-2">
|
||||
<h2>
|
||||
<button
|
||||
id="faqs-title-01"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-full text-left font-semibold py-2 px-4 border rounded-lg"
|
||||
@click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
aria-controls="faqs-text-01"
|
||||
>
|
||||
<span class="">{{ question }}</span>
|
||||
<svg class="shrink-0 ml-8" fill="gray" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="faqs-text-01"
|
||||
role="region"
|
||||
aria-labelledby="faqs-title-01"
|
||||
class="grid text-sm overflow-hidden transition-all duration-300 ease-in-out"
|
||||
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
{% if description %}
|
||||
<p class="py-3 px-4 text-base font-light">
|
||||
{{ description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div> -->
|
||||
<!-- End: Accordion component -->
|
||||
|
||||
<!-- </div>
|
||||
</main> -->
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,31 +1,26 @@
|
||||
{% set title = title | default(value="Call to Action") %}
|
||||
{% set title = title | default(value="") %}
|
||||
{% 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") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
{% set button_text2 = button_text2 | default(value="") %}
|
||||
{% set button_link2 = button_link2 | default(value="") %}
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
|
||||
<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 class="fade-in lg:pt-12">
|
||||
<div class="mx-auto max-w-7xl py-12">
|
||||
<div class="relative isolate overflow-hidden bg-black px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
|
||||
<div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left">
|
||||
<h2 class="text-4xl font-normal tracking-tight text-white lg:text-5xl">{{ title }}</h2>
|
||||
<p class="mt-6 text-lg lg:text-xl text-pretty font-light text-gray-300">{{ description }}</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
|
||||
<a href="{{ button_link }}" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">{{ button_text }}</a>
|
||||
<a href="{{ button_link2 }}" class="text-sm/6 font-semibold text-white hover:text-gray-100">{{ button_text2 }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-16 h-80 lg:mt-8">
|
||||
<img class="absolute top-0 left-0 w-[25rem] lg:w-[45rem] max-w-none rounded-2xl ring-1 ring-white/10" src="{{ image_src }}" alt="{{ image_alt }}" width="1824" height="1080">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="lg:pt-24 pt-12">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="mx-auto max-w-4xl text-left lg:text-center">
|
||||
<p class="text-base/7 font-light tracking-wide">{{ subtitle }}</p>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight "> {{ title }}</h2>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="fade-in bg-white container mx-auto">
|
||||
<div class="fade-in bg-white lg:max-w-7xl container mx-auto">
|
||||
<div class="lg:py-24 py-12 relative isolate">
|
||||
<div class="px-6 lg:px-8 lg:pb-24">
|
||||
<p class="text-base font-light tracking-wide">{{ subtitle_1 }}</p>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="py-24 lg:pt-0 fade-in bg-semi-white container mx-auto px-6 lg:px-8">
|
||||
<div class="py-24 lg:pt-0 fade-in bg-semi-white lg:max-w-7xl container mx-auto px-6 lg:px-8">
|
||||
<div class="relative isolate">
|
||||
|
||||
<div class="mx-auto mt-10 lg:mt-0 lg:flex lg:items-center lg:gap-x-15 ">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="lg:pt-24 pt-12 container mx-auto px-6 lg:px-0">
|
||||
<div class="lg:pt-24 pt-12 lg:max-w-7xl container mx-auto px-6 lg:px-0">
|
||||
<div class="mx-auto">
|
||||
<div class="mx-auto">
|
||||
<p class="text-base font-light tracking-wide">{{ subtitle }}</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user