lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
224 lines (201 loc) • 14.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=" md:absolute md:bottom-0 w-full bg-white dark:bg-black ">
<section
class="pt-16 pb-7 font-primarylw border border-gray-200 dark:border-gray-800 w-full bg-white dark:bg-black text-black dark:text-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div
class="grid grid-cols-1 lg:grid-cols-2 gap-8 xl:gap-24 pb-14 border-b-2 border-gray-300 dark:border-gray-700">
<div class="block w-full lg:max-w-full max-lg:mx-auto">
<div class="flex flex-col gap-8 w-full lg:max-w-xs ">
<!-- Logo Section -->
<div class="flex items-center space-x-2 w-full justify-center md:justify-start">
<img src="https://lightswind.com/lighstwind-logo.png" alt="Logo" class="w-8 md:w-12 h-8 md:h-12">
<h1 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-white">
Lighswind
</h1>
</div>
<p class="text-base font-normal text-black dark:text-white max-[470px]:text-center">
Trusted by over 5 million customers across 100+ countries. Stay connected with us on
social media for the latest updates and exclusive offers.
</p>
<div
class="flex flex-col min-[470px]:flex-row max-[470px]:gap-4 items-center max-[470px]:justify-center">
<div class="flex items-center">
<img src="https://i.pravatar.cc/100?img=1" alt=""
class="relative w-10 rounded-full">
<img src="https://i.pravatar.cc/100?img=2" alt=""
class="relative -translate-x-2 z-10 w-10 rounded-full">
<img src="https://i.pravatar.cc/100?img=3" alt=""
class="relative -translate-x-4 z-20 w-10 rounded-full">
</div>
<p class="text-black dark:text-white text-base font-normal"><span
class="text-black dark:text-white font-medium">1K
</span>Members
Join</p>
</div>
</div>
</div>
<div
class="w-full mx-auto flex flex-col min-[470px]:flex-row max-[470px]:items-center min-[470px]:justify-between gap-6 sm:gap-10 xl:gap-24">
<div class="">
<h6 class="text-lg font-medium text-black dark:text-white mb-7 max-[470px]:text-center">
Company</h6>
<ul class="flex flex-col max-[470px]:items-center gap-6">
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">About
Us</a>
</li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Our
Team</a>
</li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Careers</a>
</li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Press
& Media</a></li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Contact
Us</a></li>
</ul>
</div>
<div class="">
<h6 class="text-lg font-medium text-black dark:text-white max-[470px]:text-center mb-7">
Solutions</h6>
<ul class="flex flex-col max-[470px]:items-center gap-6">
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Enterprise
Solutions</a></li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Small
Business Solutions</a></li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Industry
Solutions</a></li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Custom
Development</a></li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Case
Studies</a></li>
</ul>
</div>
<div class="">
<h6 class="text-lg font-medium text-black dark:text-white max-[470px]:text-center mb-7">
Resources</h6>
<ul class="flex flex-col max-[470px]:items-center gap-6">
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Blog</a>
</li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Whitepapers</a>
</li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Webinars</a>
</li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Ebooks</a>
</li>
<li><a href="javascript:;"
class="text-base font-normal max-lg:text-center text-gray-600 dark:text-gray-400 whitespace-nowrap transition-all duration-300 hover:text-indigo-600 focus-within:outline-0 focus-within:text-indigo-600">Customer
Stories</a></li>
</ul>
</div>
</div>
</div>
<div
class="flex flex-col-reverse gap-5 md:flex-row items-center first-letter:items-center justify-between pt-7">
<p class="font-normal text-sm text-gray-600 dark:text-gray-400">©<a
href="https://pagedone.io/">Lighswind</a>2025, All
rights reserved.</p>
<ul class="flex items-center gap-9">
<li><a href="javascript:;"
class="text-gray-600 dark:text-gray-400 text-sm font-normal transition-all duration-300 hover:text-indigo-600 focus-within:text-indigo-600 focus-within:outline-0">Terms</a>
</li>
<li><a href="javascript:;"
class="text-gray-600 dark:text-gray-400 text-sm font-normal transition-all duration-300 hover:text-indigo-600 focus-within:text-indigo-600 focus-within:outline-0">Privacy</a>
</li>
<li><a href="javascript:;"
class="text-gray-600 dark:text-gray-400 text-sm font-normal transition-all duration-300 hover:text-indigo-600 focus-within:text-indigo-600 focus-within:outline-0">Cookies</a>
</li>
</ul>
</div>
</div>
</section>
</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-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>