<!--
@type: Header
@industry: Product
@style: Light
@category: Navigation, Page Section
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-blue-50: #eff6ff;
--color-blue-400: #60a5fa;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-800: #1e40af;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--max-width: 80rem; /* max-w-7xl */
--transition-duration: 200ms;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.5;
}
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Header Component */
.header {
position: relative;
background-color: var(--color-gray-50);
}
.header-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 640px) {
.header-container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.header-container {
padding: 0 2rem;
}
}
.header-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 0;
}
/* Logo */
.logo {
display: flex;
align-items: center;
text-decoration: none;
}
.logo svg {
height: 2rem;
width: auto;
color: var(--color-blue-600);
}
.logo-text {
margin-left: 0.75rem;
font-size: 1.25rem;
font-weight: 500;
color: var(--color-gray-800);
}
/* Desktop Navigation */
.desktop-nav {
display: none;
align-items: center;
gap: 2rem;
}
@media (min-width: 768px) {
.desktop-nav {
display: flex;
}
}
.nav-link {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: color var(--transition-duration);
}
.nav-link:hover {
color: var(--color-gray-800);
}
/* Resources Dropdown */
.dropdown {
position: relative;
}
.dropdown-button {
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 500 !important;
color: var(--color-gray-600);
background: none;
border: none;
cursor: pointer;
padding: 0;
font-family: inherit;
}
.dropdown-button:hover {
color: var(--color-gray-800);
}
.dropdown-icon {
margin-left: 0.25rem;
height: 1rem;
width: 1rem;
color: var(--color-gray-500);
flex-shrink: 0; /* Megakadályozza az ikon összenyomódását */
}
.dropdown-button:hover .dropdown-icon {
color: var(--color-gray-600);
}
.dropdown-menu {
position: absolute;
left: 50%;
top: 100%;
z-index: 10;
width: 14rem;
margin-top: 0.5rem;
padding: 1rem;
background: var(--color-white);
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: all var(--transition-duration) ease-out;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
}
.dropdown-item {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
text-decoration: none;
}
.dropdown-item:not(:last-child) {
margin-bottom: 0.75rem;
}
.dropdown-item:hover {
background-color: var(--color-gray-50);
}
.dropdown-item-title {
color: var(--color-gray-700);
font-weight: 500;
}
.dropdown-item-description {
font-size: 0.875rem;
color: var(--color-gray-500);
font-weight: 300;
}
/* Desktop CTA Buttons */
.desktop-cta {
display: none;
align-items: center;
gap: 1rem;
}
@media (min-width: 768px) {
.desktop-cta {
display: flex;
}
}
.cta-secondary {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-600);
text-decoration: none;
transition: color var(--transition-duration);
}
.cta-secondary:hover {
color: var(--color-gray-800);
}
.cta-primary {
display: inline-block;
padding: 0.75rem 1.5rem;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-800);
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: background-color var(--transition-duration);
}
.cta-primary:hover {
background-color: var(--color-gray-50);
}
/* Mobile Menu Button */
.mobile-menu-button {
display: flex;
padding: 0.5rem;
color: var(--color-gray-600);
background: none;
border: none;
border-radius: 0.375rem;
cursor: pointer;
}
.mobile-menu-button svg {
height: 1.5rem;
width: 1.5rem;
}
.menu-icon,
.close-icon {
display: block;
}
@media (min-width: 768px) {
.mobile-menu-button {
display: none;
}
}
.mobile-menu-button:hover {
background-color: var(--color-gray-50);
color: var(--color-gray-800);
}
.mobile-menu-button:focus {
outline: 2px solid var(--color-blue-400);
outline-offset: -2px;
}
/* Mobile Menu */
.mobile-menu {
display: none;
background: var(--color-white);
margin: 0 1rem 1rem;
border-radius: 0 0 0.75rem 0.75rem;
box-shadow: var(--shadow-lg);
}
.mobile-menu.show {
display: block;
}
.mobile-menu-items {
padding: 1rem;
}
.mobile-menu-link {
display: block;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
text-decoration: none;
}
.mobile-menu-link:hover {
background-color: var(--color-gray-50);
}
.mobile-dropdown {
margin: 0.25rem 0;
}
.mobile-dropdown-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
border: none;
background: none;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-700);
cursor: pointer;
}
.mobile-dropdown-button:hover {
background-color: var(--color-gray-50);
}
.mobile-dropdown-content {
display: none;
margin-left: 0.75rem;
}
.mobile-dropdown-content.show {
display: block;
}
.mobile-menu-cta {
border-top: 1px solid var(--color-gray-200);
padding: 1rem;
}
/* Announcement Banner */
.announcement {
background-color: var(--color-blue-600);
}
.announcement-container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0.75rem 1rem;
}
@media (min-width: 640px) {
.announcement-container {
padding: 0.75rem 1.5rem;
}
}
@media (min-width: 1024px) {
.announcement-container {
padding: 0.75rem 2rem;
}
}
.announcement-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.announcement-message {
flex: 1;
display: flex;
align-items: center;
}
.announcement-icon {
display: flex;
padding: 0.25rem;
background-color: var(--color-blue-800);
border-radius: 0.5rem;
}
.announcement-icon svg {
height: 1.25rem;
width: 1.25rem;
color: var(--color-white);
}
.announcement-text {
margin-left: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-white);
white-space: normal;
}
@media (min-width: 640px) {
.announcement-text {
white-space: nowrap;
}
}
.announcement-cta {
order: 3;
width: 100%;
margin-top: 0.5rem;
}
@media (min-width: 640px) {
.announcement-cta {
order: 2;
width: auto;
margin-top: 0;
}
}
.announcement-button {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
background: var(--color-white);
border: none;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-blue-600);
text-decoration: none;
box-shadow: var(--shadow-sm);
}
.announcement-button:hover {
background-color: var(--color-blue-50);
}
.announcement-close {
order: 2;
margin-right: -0.25rem;
}
@media (min-width: 640px) {
.announcement-close {
order: 3;
margin-left: 0.75rem;
margin-right: -0.5rem;
}
}
.announcement-close-button {
display: flex;
padding: 0.5rem;
background: none;
border: none;
border-radius: 0.375rem;
cursor: pointer;
}
.announcement-close-button:hover {
background-color: var(--color-blue-500);
}
.announcement-close-button:focus {
outline: none;
ring: 2px solid var(--color-white);
}
.announcement-close-button svg {
height: 1.25rem;
width: 1.25rem;
color: var(--color-white);
}
</style>
<section class="header">
<div class="header-container">
<div class="header-nav">
<!-- Logo -->
<div class="logo-wrapper">
<a href="#" class="logo" aria-label="Product homepage">
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="logo-text">ProductLab</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="desktop-nav" aria-label="Main navigation">
<a href="#products" class="nav-link">Products</a>
<a href="#solutions" class="nav-link">Solutions</a>
<!-- Resources dropdown -->
<div class="dropdown">
<button type="button" class="dropdown-button" aria-expanded="false" aria-haspopup="true">
Resources
<svg class="dropdown-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" stroke="currentColor" stroke-width="1"/>
</svg>
</button>
<div class="dropdown-menu">
<a href="#guides" class="dropdown-item">
<div class="dropdown-item-title">Guides</div>
<p class="dropdown-item-description">Learn how to maximize our platform</p>
</a>
<a href="#documentation" class="dropdown-item">
<div class="dropdown-item-title">Documentation</div>
<p class="dropdown-item-description">API references and examples</p>
</a>
<a href="#webinars" class="dropdown-item">
<div class="dropdown-item-title">Webinars</div>
<p class="dropdown-item-description">Watch tutorials and product demos</p>
</a>
</div>
</div>
<a href="#pricing" class="nav-link">Pricing</a>
</nav>
<!-- Desktop CTA Buttons -->
<div class="desktop-cta">
<a href="#login" class="cta-secondary">Sign in</a>
<a href="#register" class="cta-primary">Start free trial</a>
</div>
<!-- Mobile menu button -->
<button type="button"
class="mobile-menu-button"
aria-controls="mobile-menu"
aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed -->
<svg class="menu-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Icon when menu is open -->
<svg class="close-icon hidden" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Mobile menu -->
<div class="mobile-menu" id="mobile-menu">
<div class="mobile-menu-items">
<a href="#products" class="mobile-menu-link">Products</a>
<a href="#solutions" class="mobile-menu-link">Solutions</a>
<!-- Mobile resources dropdown -->
<div class="mobile-dropdown">
<button class="mobile-dropdown-button">
Resources
<svg class="dropdown-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" stroke="currentColor" stroke-width="1"/>
</svg>
</button>
<div class="mobile-dropdown-content">
<a href="#guides" class="mobile-menu-link">Guides</a>
<a href="#documentation" class="mobile-menu-link">Documentation</a>
<a href="#webinars" class="mobile-menu-link">Webinars</a>
</div>
</div>
<a href="#pricing" class="mobile-menu-link">Pricing</a>
</div>
<div class="mobile-menu-cta">
<a href="#login" class="mobile-menu-link">Sign in</a>
<a href="#register" class="cta-primary" style="width: 100%; text-align: center;">Start free trial</a>
</div>
</div>
<!-- Announcement banner -->
<div class="announcement">
<div class="announcement-container">
<div class="announcement-content">
<div class="announcement-message">
<span class="announcement-icon">
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>
</span>
<p class="announcement-text">
New features available! Check out our latest product update.
</p>
</div>
<div class="announcement-cta">
<a href="#announcement" class="announcement-button">
Learn more
</a>
</div>
<div class="announcement-close">
<button type="button" class="announcement-close-button">
<span class="sr-only">Dismiss</span>
<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<script>
// Dropdown functionality
document.addEventListener('DOMContentLoaded', function() {
// Desktop dropdown
const dropdownButton = document.querySelector('.dropdown-button');
const dropdownMenu = document.querySelector('.dropdown-menu');
let dropdownTimeout;
function showDropdown() {
clearTimeout(dropdownTimeout);
dropdownMenu.classList.add('show');
dropdownButton.setAttribute('aria-expanded', 'true');
}
function hideDropdown() {
dropdownTimeout = setTimeout(() => {
dropdownMenu.classList.remove('show');
dropdownButton.setAttribute('aria-expanded', 'false');
}, 200);
}
dropdownButton.parentElement.addEventListener('mouseenter', showDropdown);
dropdownButton.parentElement.addEventListener('mouseleave', hideDropdown);
// Mobile menu
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
const menuIcon = document.querySelector('.menu-icon');
const closeIcon = document.querySelector('.close-icon');
mobileMenuButton.addEventListener('click', () => {
const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('show');
menuIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
// Mobile dropdown
const mobileDropdownButton = document.querySelector('.mobile-dropdown-button');
const mobileDropdownContent = document.querySelector('.mobile-dropdown-content');
mobileDropdownButton.addEventListener('click', () => {
const isExpanded = mobileDropdownButton.getAttribute('aria-expanded') === 'true';
mobileDropdownButton.setAttribute('aria-expanded', !isExpanded);
mobileDropdownContent.classList.toggle('show');
});
// Announcement banner close
const announcementCloseButton = document.querySelector('.announcement-close-button');
const announcement = document.querySelector('.announcement');
announcementCloseButton.addEventListener('click', () => {
announcement.style.display = 'none';
});
});
</script>
<!--
@type: Header
@industry: Product
@style: Light
@category: Navigation, Page Section
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 relative" x-data="{ mobileMenuOpen: false, dropdownOpen: false }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between py-6">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<a href="#" class="flex items-center" aria-label="Product homepage">
<!-- Product logo SVG -->
<svg class="h-8 w-auto text-blue-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="ml-3 text-xl font-medium text-gray-800">ProductLab</span>
</a>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center space-x-8" aria-label="Main navigation">
<a href="#products" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors">Products</a>
<a href="#solutions" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors">Solutions</a>
<!-- Resources dropdown -->
<div class="relative" @mouseenter="dropdownOpen = true" @mouseleave="dropdownOpen = false">
<button type="button" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors flex items-center group" aria-expanded="false" aria-haspopup="true">
Resources
<svg class="ml-1 h-4 w-4 text-gray-500 group-hover:text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" stroke="currentColor" stroke-width="1"/>
</svg>
</button>
<!-- Dropdown menu -->
<div x-show="dropdownOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-1"
class="absolute left-1/2 z-10 mt-2 w-56 -translate-x-1/2 transform rounded-xl bg-white p-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
style="display: none;">
<div class="space-y-3">
<a href="#guides" class="block rounded-lg px-3 py-2 text-base text-gray-700 hover:bg-gray-50">
<div class="font-medium">Guides</div>
<p class="text-sm text-gray-500 font-light">Learn how to maximize our platform</p>
</a>
<a href="#documentation" class="block rounded-lg px-3 py-2 text-base text-gray-700 hover:bg-gray-50">
<div class="font-medium">Documentation</div>
<p class="text-sm text-gray-500 font-light">API references and examples</p>
</a>
<a href="#webinars" class="block rounded-lg px-3 py-2 text-base text-gray-700 hover:bg-gray-50">
<div class="font-medium">Webinars</div>
<p class="text-sm text-gray-500 font-light">Watch tutorials and product demos</p>
</a>
</div>
</div>
</div>
<a href="#pricing" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors">Pricing</a>
</nav>
<!-- Desktop CTA Buttons -->
<div class="hidden md:flex items-center space-x-4">
<a href="#login" class="text-base font-medium text-gray-600 hover:text-gray-800 transition-colors">
Sign in
</a>
<a href="#register" class="bg-white font-medium border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-colors">
Start free trial
</a>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button type="button"
class="inline-flex items-center justify-center rounded-md p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400"
aria-controls="mobile-menu"
aria-expanded="false"
@click="mobileMenuOpen = !mobileMenuOpen">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed -->
<svg class="h-6 w-6" :class="{'hidden': mobileMenuOpen, 'block': !mobileMenuOpen}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Icon when menu is open -->
<svg class="h-6 w-6" :class="{'block': mobileMenuOpen, 'hidden': !mobileMenuOpen}" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="md:hidden" id="mobile-menu" x-show="mobileMenuOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1">
<div class="bg-white shadow-lg rounded-b-xl mx-4 mb-4">
<div class="space-y-1 px-4 py-4">
<a href="#products" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50">Products</a>
<a href="#solutions" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50">Solutions</a>
<!-- Mobile resources dropdown -->
<div x-data="{ open: false }">
<button @click="open = !open" class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50" aria-expanded="false">
Resources
<svg class="ml-1 h-4 w-4 text-gray-500 group-hover:text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" stroke="currentColor" stroke-width="1"/>
</svg>
</button>
<div x-show="open" class="ml-3 space-y-1">
<a href="#guides" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50">Guides</a>
<a href="#documentation" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50">Documentation</a>
<a href="#webinars" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-600 hover:bg-gray-50">Webinars</a>
</div>
</div>
<a href="#pricing" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50">Pricing</a>
</div>
<div class="border-t border-gray-200 px-4 py-4 space-y-3">
<a href="#login" class="block rounded-lg px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50">
Sign in
</a>
<a href="#register" class="block w-full text-center bg-white font-medium border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-colors">
Start free trial
</a>
</div>
</div>
</div>
<!-- Announcement banner -->
<div class="bg-blue-600">
<div class="max-w-7xl mx-auto py-3 px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between flex-wrap">
<div class="flex-1 flex items-center">
<span class="flex p-1 rounded-lg bg-blue-800">
<svg class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
</svg>
</span>
<p class="ml-3 text-sm font-medium text-white truncate sm:whitespace-nowrap whitespace-normal">
New features available! Check out our latest product update.
</p>
</div>
<div class="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
<a href="#announcement" class="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 bg-white hover:bg-blue-50">
Learn more
</a>
</div>
<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
<button type="button" class="-mr-1 flex p-2 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Alpine.js for dropdown and mobile menu functionality -->
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
