lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
206 lines (177 loc) • 10.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Launch</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.2.0/src/lightswind.css">
</head>
<body class="relative bg-white dark:bg-black h-screen">
<div
class="relative w-full bg-white dark:bg-black px-2 py-10 mt-4 shadow-lg ring-1 ring-gray-400 dark:ring-gray-600
sm:mx-auto sm:max-w-2xl sm:rounded-xl sm:px-10 font-primarylw">
<div class="text-center">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-800 dark:text-gray-100 md:text-4xl">Frequently
Asked Questions</h2>
<p class="mt-4 text-sm text-gray-600 dark:text-gray-400 md:text-xl">
Get quick answers to common queries about our services.
</p>
</div>
<div class="mt-10">
<div class="max-w-xl mx-auto divide-y divide-gray-200">
<details
class="group py-5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg px-4 transition duration-200">
<summary
class="flex cursor-pointer items-center justify-between text-lg font-semibold text-gray-700 dark:text-gray-300">
<span>What is Lightswind, and how does it work?</span>
<span class="transition-transform transform group-open:rotate-180">
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-gray-600 dark:text-gray-200 leading-relaxed">
Lightswind is a UI framework designed to create stunning interfaces with minimal effort. It
streamlines development by offering pre-built components and an intuitive design language.
</p>
</details>
<details
class="group py-5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg px-4 transition duration-200">
<summary
class="flex cursor-pointer items-center justify-between text-lg font-semibold
text-gray-700 dark:text-gray-300">
<span>Can I customize Lightswind components?</span>
<span class="transition-transform transform group-open:rotate-180">
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-gray-600 dark:text-gray-200 leading-relaxed">
Absolutely! Lightswind components are fully customizable, allowing you to tailor them to match
your brand's style and preferences seamlessly.
</p>
</details>
<details
class="group py-5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg px-4 transition duration-200">
<summary
class="flex cursor-pointer items-center justify-between text-lg font-semibold text-gray-700 dark:text-gray-300">
<span>Is there a free version of Lightswind?</span>
<span class="transition-transform transform group-open:rotate-180">
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-gray-600 dark:text-gray-200 leading-relaxed">
Yes! Lightswind offers a free version with a selection of core components. For access to
advanced features and premium designs, consider the Pro plan.
</p>
</details>
<details
class="group py-5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg px-4 transition duration-200">
<summary
class="flex cursor-pointer items-center justify-between text-lg font-semibold text-gray-700 dark:text-gray-300">
<span>How do I integrate Lightswind with my project?</span>
<span class="transition-transform transform group-open:rotate-180">
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-gray-600 dark:text-gray-200 leading-relaxed">
Integrating Lightswind is simple. Add the framework to your project via npm or CDN, and start
using its pre-designed components right away.
</p>
</details>
<details
class="group py-5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg px-4 transition duration-200">
<summary
class="flex cursor-pointer items-center justify-between text-lg font-semibold text-gray-700 dark:text-gray-300">
<span>What support options are available?</span>
<span class="transition-transform transform group-open:rotate-180">
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 text-gray-600 dark:text-gray-200 leading-relaxed">
Lightswind offers comprehensive documentation, community forums, and premium support options to
ensure you have everything you need for success.
</p>
</details>
</div>
</div>
</div>
<!-- Theme Toggle Button -->
<button id="theme-toggle"
class="fixed z-50 top-2 left-2 text-gray-800 dark:text-gray-200 dark:text-gray-200 dark:text-white bg-gray-500/30 dark:bg-gray-900/70 p-2 rounded-full shadow-md hover:bg-gray-700">
<!-- Sun Icon for Light Mode -->
<svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
<!-- Moon Icon for Dark Mode -->
<svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
</button>
<script src="https://cdn.jsdelivr.net/npm/lightwind@3.1.0/src/lightswind.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class', // Enable class-based dark mode
theme: {
extend: {
colors: {},
},
},
};
const setInitialTheme = () => {
const currentTheme = localStorage.getItem('iframetheme') || 'dark';
if (currentTheme === 'dark') {
document.body.classList.add('dark');
document.getElementById('sun-icon').style.opacity = '0';
document.getElementById('moon-icon').style.opacity = '1';
} else {
document.body.classList.remove('dark');
document.getElementById('sun-icon').style.opacity = '1';
document.getElementById('moon-icon').style.opacity = '0';
}
};
setInitialTheme();
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
const currentTheme = localStorage.getItem('iframetheme') || 'dark';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem('iframetheme', newTheme);
document.body.classList.toggle('dark', newTheme === 'dark');
if (newTheme === 'dark') {
document.getElementById('moon-icon').style.opacity = '0';
document.getElementById('sun-icon').style.opacity = '1';
} else {
document.getElementById('moon-icon').style.opacity = '1';
document.getElementById('sun-icon').style.opacity = '0';
}
const iframe = document.querySelector('iframe');
if (iframe) {
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument || iframeWindow.document;
if (iframeDocument) {
iframeDocument.addEventListener('DOMContentLoaded', () => {
iframeDocument.body.classList.toggle('dark', newTheme === 'dark');
});
}
}
});
</script>
</body>
</html>