lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
234 lines (204 loc) • 12.8 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>
<div class="bg-white text-gray-700 dark:bg-black dark:text-gray-100 h-screen ">
<!-- Section 1 -->
<section class="w-full text-gray-700 bg-white font-primarylw dark:bg-black dark:text-gray-100">
<div
class="container flex flex-col flex-wrap items-center justify-between py-5 mx-auto md:flex-row max-w-7xl">
<div class="relative flex justify-between items-center w-full">
<!-- Logo -->
<a href="#_"
class="flex items-center mb-5 font-medium text-gray-900 dark:text-gray-200 lg:w-auto lg:items-center lg:justify-center md:mb-0">
<span class="text-xl font-bold leading-none text-gray-900 dark:text-white">AI<span
class="text-primarylw dark:text-primarylw">X</span></span>
</a>
<!-- Navigation Menu (Desktop) -->
<nav
class="hidden md:flex flex-wrap items-center mb-5 text-base md:mb-0 md:pl-8 md:ml-8 md:border-x md:border-gray-200 dark:border-gray-700">
<a href="#_"
class="mr-5 font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw">Home</a>
<a href="#_"
class="mr-5 font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw">Features</a>
<a href="#_"
class="mr-5 font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw">Pricing</a>
<a href="#_"
class="mr-5 font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw">Blog</a>
</nav>
<!-- Mobile Menu Button (Hamburger) -->
<button id="mobile-menu-button"
class="md:hidden flex items-center text-gray-600 focus:outline-none ml-auto"
onclick="toggleMobileMenu()">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<!-- Right Section (Sign In / Get Started) -->
<div class="inline-flex items-center space-x-6 lg:justify-end hidden md:flex">
<a href="#_"
class="text-base font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw transition duration-150 ease-in-out">Sign
in</a>
<a href="#_"
class="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-primarylw border border-transparent rounded-md shadow-md hover:bg-primarylw-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primarylw">
Get Started
</a>
</div>
</div>
</div>
</section>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu"
class="hidden bg-white text-gray-700 shadow-md md:hidden dark:bg-black dark:text-gray-100">
<div class="px-6 py-4">
<a href="#_"
class="block px-4 py-2 text-base font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw">Home</a>
<a href="#_"
class="block px-4 py-2 text-base font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw">Features</a>
<a href="#_"
class="block px-4 py-2 text-base font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw">Pricing</a>
<a href="#_"
class="block px-4 py-2 text-base font-medium text-gray-600 hover:text-primarylw dark:text-gray-200 hover:dark:text-primarylw">Blog</a>
<!-- Sign In and Get Started buttons inside the dropdown for mobile -->
<a href="#_"
class="block px-4 py-2 mt-4 text-base font-medium text-white bg-primarylw rounded-md hover:bg-primarylw-2">
Sign in
</a>
<a href="#_"
class="block px-4 py-2 mt-2 text-base font-medium text-white bg-primarylw rounded-md hover:bg-primarylw-2">
Get Started
</a>
</div>
</div>
<!-- Section 2 -->
<section class="px-2 pt-0 md:pt-20 bg-white md:px-0 font-primarylw dark:bg-black dark:text-gray-100">
<div class="container items-center max-w-6xl px-8 mx-auto xl:px-5">
<div class="flex flex-wrap items-center sm:-mx-3">
<div class="w-full md:w-1/2 md:px-3">
<div
class="w-full pb-6 space-y-6 sm:max-w-md lg:max-w-7xl md:space-y-4 lg:space-y-8 xl:space-y-9 sm:pr-5 lg:pr-0 md:pb-0">
<h1
class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-gray-200 sm:text-5xl md:text-4xl lg:text-5xl xl:text-6xl">
<span class="block xl:inline">Introducing AIX</span>
<span class="block text-primarylw xl:inline">The Future of Artificial
Intelligence.</span>
</h1>
<p class="mx-auto text-base text-gray-500 sm:max-w-md lg:text-xl md:max-w-3xl">Revolutionize
your business with AI-driven solutions that deliver results faster than ever. AIX
empowers you to innovate, automate, and scale with cutting-edge technology.</p>
<div class="relative flex flex-col sm:flex-row sm:space-x-4">
<a href="#_" class="flex items-center w-full px-6 py-3 mb-3 text-sm md:text-lg text-white bg-primarylw
rounded-md sm:mb-0 hover:bg-primarylw-2 sm:w-auto">
Try AIX Now
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-1" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
<a href="#_"
class="flex items-center px-6 py-3 text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 text-sm md:text-lg
hover:text-gray-600 dark:bg-gray-700 dark:text-gray-200 hover:dark:bg-gray-600 hover:dark:text-gray-300">
Learn More About AIX
</a>
</div>
</div>
</div>
<div class="w-full md:w-1/2">
<div class="w-full h-auto overflow-hidden rounded-md shadow-xl sm:rounded-xl">
<img src="https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="AI Image">
</div>
</div>
</div>
</div>
</section>
</div>
<script>
function toggleMobileMenu() {
var menu = document.getElementById('mobile-menu');
var menuButton = document.getElementById('mobile-menu-button');
// Toggle the visibility of the menu
menu.classList.toggle('hidden');
// Change the hamburger icon to 'X' when the menu is open
if (menu.classList.contains('hidden')) {
menuButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path></svg>';
} else {
menuButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>';
}
}
</script>
<!-- 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>