Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Modern Redesign</title> | |
| <meta name="description" content="A modern, responsive, and accessible website redesign using TailwindCSS." /> | |
| <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3 7h7l-5.5 4.2L18 21l-6-4-6 4 1.5-7.8L2 9h7z'/%3E%3C/svg%3E" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| // Tailwind config (optional) | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eef2ff', | |
| 100: '#e0e7ff', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| }, | |
| secondary: { | |
| 50: '#f0fdfa', | |
| 100: '#ccfbf1', | |
| 500: '#14b8a6', | |
| 600: '#0d9488', | |
| 700: '#0f766e', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-white text-slate-800 dark:bg-slate-900 dark:text-slate-100 antialiased"> | |
| <!-- Navbar --> | |
| <header class="sticky top-0 z-40 w-full border-b border-slate-200/70 bg-white/80 backdrop-blur-md dark:border-slate-700/60 dark:bg-slate-900/80"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="flex h-16 items-center justify-between"> | |
| <a href="#" class="flex items-center gap-2 font-semibold text-slate-900 dark:text-white"> | |
| <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-primary-500 text-white"> | |
| <i data-feather="zap"></i> | |
| </span> | |
| <span>Brand</span> | |
| </a> | |
| <nav class="hidden items-center gap-8 md:flex"> | |
| <a href="#features" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Features</a> | |
| <a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Pricing</a> | |
| <a href="#contact" class="text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white">Contact</a> | |
| </nav> | |
| <div class="hidden md:flex items-center gap-3"> | |
| <button id="theme-toggle" class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700" aria-label="Toggle theme"> | |
| <i id="theme-icon" data-feather="sun"></i> | |
| </button> | |
| <a href="#" class="inline-flex items-center rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">Sign in</a> | |
| </div> | |
| <button id="mobile-menu-button" class="inline-flex md:hidden h-10 w-10 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="mobile-menu" class="md:hidden hidden border-t border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900"> | |
| <div class="mx-auto max-w-7xl px-4 py-3 space-y-1"> | |
| <a href="#features" class="block rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800">Features</a> | |
| <a href="#pricing" class="block rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800">Pricing</a> | |
| <a href="#contact" class="block rounded-md px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800">Contact</a> | |
| <div class="flex items-center gap-2 px-3 py-2"> | |
| <button id="theme-toggle-mobile" class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700" aria-label="Toggle theme"> | |
| <i id="theme-icon-mobile" data-feather="sun"></i> | |
| </button> | |
| <a href="#" class="inline-flex items-center rounded-md bg-primary-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-600">Sign in</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero --> | |
| <section class="relative overflow-hidden"> | |
| <div class="absolute inset-0 -z-10"> | |
| <div class="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-primary-50 to-transparent dark:from-primary-900/10"></div> | |
| </div> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="py-16 sm:py-20 lg:py-24"> | |
| <div class="grid items-center gap-12 lg:grid-cols-2"> | |
| <div> | |
| <span class="inline-flex items-center gap-2 rounded-full border border-primary-200 bg-primary-50 px-3 py-1 text-xs font-semibold text-primary-700 dark:border-primary-800 dark:bg-primary-900/20 dark:text-primary-200"> | |
| <i data-feather="star"></i> | |
| New: Modern redesign is live | |
| </span> | |
| <h1 class="mt-4 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl dark:text-white">Build faster with a clean, modern design</h1> | |
| <p class="mt-4 text-lg text-slate-600 dark:text-slate-300"> | |
| A polished starter that’s responsive, accessible, and ready for production. Built with TailwindCSS and Feather icons. | |
| </p> | |
| <div class="mt-8 flex flex-wrap gap-3"> | |
| <a href="#features" class="inline-flex items-center gap-2 rounded-md bg-primary-500 px-5 py-3 text-sm font-semibold text-white shadow-sm hover:bg-primary-600"> | |
| <i data-feather="play"></i> Get started | |
| </a> | |
| <a href="#pricing" class="inline-flex items-center gap-2 rounded-md border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"> | |
| <i data-feather="book-open"></i> Learn more | |
| </a> | |
| </div> | |
| <div class="mt-10 flex items-center gap-6 text-sm text-slate-500 dark:text-slate-400"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="trending-up"></i> | |
| +42% conversion | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="zap"></i> | |
| Blazing fast | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="shield"></i> | |
| Secure by default | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -inset-4 rounded-2xl bg-gradient-to-tr from-primary-500/20 to-secondary-500/20 blur-2xl"></div> | |
| <div class="relative rounded-2xl border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-700 dark:bg-slate-800"> | |
| <div class="flex items-center justify-between border-b border-slate-200 pb-4 dark:border-slate-700"> | |
| <div class="flex items-center gap-2"> | |
| <span class="inline-block h-3 w-3 rounded-full bg-red-400"></span> | |
| <span class="inline-block h-3 w-3 rounded-full bg-yellow-400"></span> | |
| <span class="inline-block h-3 w-3 rounded-full bg-green-400"></span> | |
| </div> | |
| <div class="text-xs text-slate-500 dark:text-slate-400">Preview</div> | |
| </div> | |
| <div class="mt-6 grid gap-4 sm:grid-cols-2"> | |
| <div class="rounded-xl border border-slate-200 p-4 dark:border-slate-700"> | |
| <div class="flex items-center gap-3"> | |
| <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-300"> | |
| <i data-feather="layout"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Beautiful UI</div> | |
| <div class="text-xs text-slate-500 dark:text-slate-400">Tailwind powered</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-xl border border-slate-200 p-4 dark:border-slate-700"> | |
| <div class="flex items-center gap-3"> | |
| <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-secondary-600 dark:bg-secondary-900/30 dark:text-secondary-300"> | |
| <i data-feather="cpu"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Performance</div> | |
| <div class="text-xs text-slate-500 dark:text-slate-400">Fast by default</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-xl border border-slate-200 p-4 dark:border-slate-700"> | |
| <div class="flex items-center gap-3"> | |
| <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-300"> | |
| <i data-feather="smartphone"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Responsive</div> | |
| <div class="text-xs text-slate-500 dark:text-slate-400">Mobile-first</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="rounded-xl border border-slate-200 p-4 dark:border-slate-700"> | |
| <div class="flex items-center gap-3"> | |
| <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-secondary-600 dark:bg-secondary-900/30 dark:text-secondary-300"> | |
| <i data-feather="lock"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Secure</div> | |
| <div class="text-xs text-slate-500 dark:text-slate-400">Best practices</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="h-2 w-full rounded-full bg-slate-200 dark:bg-slate-700"> | |
| <div class="h-2 w-2/3 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section id="features" class="py-16 sm:py-20"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="mx-auto max-w-2xl text-center"> | |
| <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Everything you need</h2> | |
| <p class="mt-3 text-slate-600 dark:text-slate-300">Clean structure, accessible components, and sensible defaults.</p> | |
| </div> | |
| <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <div class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-300"> | |
| <i data-feather="feather"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Lightweight</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Minimal dependencies and optimized assets for quick loads.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <div class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-secondary-100 text-secondary-600 dark:bg-secondary-900/30 dark:text-secondary-300"> | |
| <i data-feather="smartphone"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Responsive</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Looks great on phones, tablets, and desktops out of the box.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <div class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-300"> | |
| <i data-feather="moon"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Dark mode</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Toggle and persistence with prefers-color-scheme support.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <div class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-secondary-100 text-secondary-600 dark:bg-secondary-900/30 dark:text-secondary-300"> | |
| <i data-feather="accessibility"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Accessible</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Semantic markup and keyboard-friendly navigation.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <div class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-300"> | |
| <i data-feather="tool"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Customizable</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">Tweak tokens and components quickly via Tailwind.</p> | |
| </div> | |
| <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <div class="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-secondary-100 text-secondary-600 dark:bg-secondary-900/30 dark:text-secondary-300"> | |
| <i data-feather="layers"></i> | |
| </div> | |
| <h3 class="mt-4 text-lg font-semibold">Scalable</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">A structure that grows with your project.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="py-16 sm:py-20"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="mx-auto max-w-2xl text-center"> | |
| <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Simple pricing</h2> | |
| <p class="mt-3 text-slate-600 dark:text-slate-300">Start free. Upgrade when you’re ready.</p> | |
| </div> | |
| <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <h3 class="text-lg font-semibold">Starter</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">For personal projects</p> | |
| <div class="mt-6"> | |
| <span class="text-4xl font-bold">$0</span> | |
| <span class="text-sm text-slate-500 dark:text-slate-400">/mo</span> | |
| </div> | |
| <ul class="mt-6 space-y-3 text-sm"> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> Unlimited projects</li> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> Basic support</li> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> Community access</li> | |
| </ul> | |
| <a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">Get started</a> | |
| </div> | |
| <div class="relative flex flex-col rounded-2xl border-2 border-primary-500 bg-white p-6 shadow-sm dark:bg-slate-800"> | |
| <span class="absolute right-4 top-4 rounded-full bg-primary-100 px-3 py-1 text-xs font-semibold text-primary-700 dark:bg-primary-900/30 dark:text-primary-200">Popular</span> | |
| <h3 class="text-lg font-semibold">Pro</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">For small teams</p> | |
| <div class="mt-6"> | |
| <span class="text-4xl font-bold">$19</span> | |
| <span class="text-sm text-slate-500 dark:text-slate-400">/mo</span> | |
| </div> | |
| <ul class="mt-6 space-y-3 text-sm"> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> Everything in Starter</li> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> Advanced components</li> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> Priority support</li> | |
| </ul> | |
| <a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-600">Start Pro</a> | |
| </div> | |
| <div class="flex flex-col rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <h3 class="text-lg font-semibold">Enterprise</h3> | |
| <p class="mt-1 text-sm text-slate-600 dark:text-slate-300">For large orgs</p> | |
| <div class="mt-6"> | |
| <span class="text-4xl font-bold">Custom</span> | |
| </div> | |
| <ul class="mt-6 space-y-3 text-sm"> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> SSO & SAML</li> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> Dedicated support</li> | |
| <li class="flex items-center gap-2"><i data-feather="check" class="h-4 w-4 text-secondary-500"></i> Custom SLA</li> | |
| </ul> | |
| <a href="#contact" class="mt-6 inline-flex w-full items-center justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">Contact sales</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact --> | |
| <section id="contact" class="py-16 sm:py-20"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="grid gap-10 lg:grid-cols-2"> | |
| <div> | |
| <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">Get in touch</h2> | |
| <p class="mt-3 text-slate-600 dark:text-slate-300">Questions, feedback, or partnership ideas? We’d love to hear from you.</p> | |
| <div class="mt-8 space-y-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-300"> | |
| <i data-feather="mail"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">Email</div> | |
| <a href="mailto:[email protected]" class="text-sm text-slate-600 hover:underline dark:text-slate-300">[email protected]</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <div class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-secondary-100 text-secondary-600 dark:bg-secondary-900/30 dark:text-secondary-300"> | |
| <i data-feather="message-circle"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium">Live chat</div> | |
| <a href="#" class="text-sm text-slate-600 hover:underline dark:text-slate-300">Start a conversation</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <form id="contact-form" class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"> | |
| <div class="grid gap-4 sm:grid-cols-2"> | |
| <div class="sm:col-span-1"> | |
| <label for="name" class="block text-sm font-medium">Name</label> | |
| <input id="name" name="name" type="text" required class="mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm placeholder-slate-400 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" placeholder="Jane Doe" /> | |
| </div> | |
| <div class="sm:col-span-1"> | |
| <label for="email" class="block text-sm font-medium">Email</label> | |
| <input id="email" name="email" type="email" required class="mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm placeholder-slate-400 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" placeholder="[email protected]" /> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="subject" class="block text-sm font-medium">Subject</label> | |
| <input id="subject" name="subject" type="text" required class="mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm placeholder-slate-400 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" placeholder="How can we help?" /> | |
| </div> | |
| <div class="sm:col-span-2"> | |
| <label for="message" class="block text-sm font-medium">Message</label> | |
| <textarea id="message" name="message" rows="4" required class="mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm placeholder-slate-400 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100" placeholder="Tell us more..."></textarea> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex items-center justify-between"> | |
| <p class="text-xs text-slate-500 dark:text-slate-400">We’ll never share your information.</p> | |
| <button type="submit" class="inline-flex items-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-600"> | |
| <i data-feather="send"></i> | |
| Send message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-slate-200 py-10 dark:border-slate-800"> | |
| <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> | |
| <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div> | |
| <div class="flex items-center gap-2 font-semibold text-slate-900 dark:text-white"> | |
| <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-primary-500 text-white"> | |
| <i data-feather="zap"></i> | |
| </span> | |
| <span>Brand</span> | |
| </div> | |
| <p class="mt-3 text-sm text-slate-600 dark:text-slate-300">Beautiful, fast, and accessible websites—built with Tailwind.</p> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Product</div> | |
| <ul class="mt-3 space-y-2 text-sm text-slate-600 dark:text-slate-300"> | |
| <li><a href="#features" class="hover:underline">Features</a></li> | |
| <li><a href="#pricing" class="hover:underline">Pricing</a></li> | |
| <li><a href="#" class="hover:underline">Changelog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Company</div> | |
| <ul class="mt-3 space-y-2 text-sm text-slate-600 dark:text-slate-300"> | |
| <li><a href="#" class="hover:underline">About</a></li> | |
| <li><a href="#contact" class="hover:underline">Contact</a></li> | |
| <li><a href="#" class="hover:underline">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="text-sm font-semibold">Follow</div> | |
| <div class="mt-3 flex items-center gap-3"> | |
| <a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700" aria-label="Twitter"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700" aria-label="GitHub"> | |
| <i data-feather="github"></i> | |
| </a> | |
| <a href="#" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700" aria-label="LinkedIn"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 border-t border-slate-200 pt-6 text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400"> | |
| © <span id="year"></span> Brand. All rights reserved. | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Toast --> | |
| <div id="toast" class="pointer-events-none fixed inset-0 flex items-end justify-center p-4 sm:items-center sm:p-6"> | |
| <div id="toast-content" class="hidden w-full max-w-sm rounded-lg border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-lg dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="check-circle" class="mt-0.5 h-5 w-5 text-secondary-500"></i> | |
| <div class="flex-1"> | |
| <div class="font-semibold">Message sent</div> | |
| <div class="text-xs text-slate-500 dark:text-slate-400">We’ll get back to you shortly.</div> | |
| </div> | |
| <button id="toast-close" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-200" aria-label="Close"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js" defer></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |