All Prompts
All Prompts
herolanding pagetailwindprompt inputdark modemarketinginteractive
AI Assistant Hero Section with Interactive Prompt
Интерактивная секция "Hero" для AI-ассистента. Темная тема, ввод промптов, CTA, предпросмотр продукта. Идеально для SaaS и AI-инструментов.
Prompt
<section id="overview" class="relative overflow-hidden sm:pt-28 pt-24 pb-14">
<div class="max-w-7xl px-4 sm:px-6 lg:px-8 mx-auto">
<div class="flex flex-col gap-10 lg:gap-16 text-center items-center">
<div class="max-w-3xl mx-auto">
<span class="text-xs uppercase tracking-wider text-blue-300/90">New: Hands‑free automations</span>
<h1 class="sm:text-5xl lg:text-6xl leading-tight text-4xl tracking-tight mt-3" style="font-weight: 600">
Ask. Act. Automate your system.
</h1>
<p class="mt-5 text-lg text-gray-300 max-w-xl mx-auto">
A fast, privacy‑minded assistant that controls apps, settings, and files—by voice or text.
</p>
<!-- Prompt -->
<div class="mt-8 max-w-2xl mx-auto">
<div class="rounded-2xl border border-white/10 bg-black/60 backdrop-blur p-2 shadow-2xl">
<div class="flex items-center gap-2 p-2 rounded-xl bg-white/5 border border-white/10">
<button id="mic-btn" type="button" class="inline-flex items-center justify-center h-9 w-9 rounded-lg bg-black/40 border border-white/15 hover:border-white/25 transition" aria-pressed="false" aria-label="Toggle voice">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="mic" class="lucide lucide-mic w-[18px] h-[18px]"><path d="M12 19v3" class=""></path><path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path><rect x="9" y="2" width="6" height="13" rx="3" class=""></rect></svg>
</button>
<input id="prompt" type="text" placeholder="Ask ArcOS to do something…" class="flex-1 bg-transparent outline-none text-sm placeholder:text-gray-500 px-1">
<div class="hidden sm:flex items-center gap-2">
<span class="text-[10px] text-gray-400 px-1.5 py-1 rounded-md bg-white/5 border border-white/10">⌘</span>
<span class="text-[10px] text-gray-400 px-1.5 py-1 rounded-md bg-white/5 border border-white/10">K</span>
</div>
<button id="run-btn" type="button" class="inline-flex items-center gap-2 px-3 h-9 rounded-lg bg-blue-400 text-black hover:bg-blue-300 transition">
Run
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
</div>
<div class="px-2 pb-2">
<div id="listen-indicator" class="hidden mt-2 inline-flex items-center gap-2 text-xs text-blue-300 px-2 py-1 rounded-md bg-blue-500/10 border border-blue-500/20">
<span class="h-1.5 w-1.5 rounded-full bg-blue-400 animate-pulse"></span>
Listening…
</div>
<div class="mt-2 flex flex-wrap gap-2">
<button data-suggest="Turn on Do Not Disturb until 6 PM" type="button" class="text-xs px-2.5 py-1.5 rounded-md bg-white/5 border border-white/10 hover:bg-white/10">DND until 6 PM</button>
<button data-suggest="Open Figma and Slack side by side" type="button" class="text-xs px-2.5 py-1.5 rounded-md bg-white/5 border border-white/10 hover:bg-white/10">Arrange: Figma + Slack</button>
<button data-suggest="Find PDF invoices from last month" type="button" class="text-xs px-2.5 py-1.5 rounded-md bg-white/5 border border-white/10 hover:bg-white/10">Find invoices</button>
<button data-suggest="Start a 25‑minute focus timer" type="button" class="text-xs px-2.5 py-1.5 rounded-md bg-white/5 border border-white/10 hover:bg-white/10">Focus 25m</button>
</div>
<p class="mt-2 text-[11px] text-gray-500">Tip: Hold Space to talk</p>
</div>
</div>
</div>
<!-- Social proof -->
<div class="mt-8 flex items-center gap-6 justify-center">
<div class="flex -space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/52f90c3d-9f64-4db9-997b-8765ea3ff941_320w.jpg" alt="" class="w-8 h-8 rounded-full border-2 border-black object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cb2b351a-aabb-4336-a040-dccaed5418b7_320w.jpg" alt="" class="w-8 h-8 rounded-full border-2 border-black object-cover">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f7f6feef-fd3e-4901-bce6-7271aa74dc87_320w.jpg" alt="" class="w-8 h-8 rounded-full border-2 border-black object-cover">
<div class="w-8 h-8 rounded-full border-2 border-black bg-blue-400/90 flex items-center justify-center text-black text-[10px]">
2k+
</div>
</div>
<div class="">
<p class="text-sm text-gray-100">2,000+ users automated their day</p>
<p class="text-sm text-gray-400">Private, fast, and reliable</p>
</div>
</div>
</div>
<!-- Product preview -->
<div class="relative w-full max-w-5xl mx-auto">
<div class="relative overflow-hidden bg-gray-950/70 border border-white/10 rounded-2xl shadow-2xl backdrop-blur">
<!-- Top banner -->
<div class="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-black/50">
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-4.5 h-4.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
</span>
<p class="text-sm">Assistant</p>
</div>
<div class="inline-flex items-center gap-2 text-xs px-2 py-1 rounded-md bg-white/5 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check w-3.5 h-3.5 text-emerald-300"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
<span class="text-emerald-300">Private</span>
</div>
</div>
<div class="grid md:grid-cols-2">
<!-- Left: Suggestions + Mini chart -->
<div class="p-4 border-r border-white/10">
<div class="flex items-center justify-between mb-2">
<p class="text-xs text-gray-400">Suggested actions</p>
<span class="text-[10px] px-1.5 py-0.5 rounded bg-white/5 border border-white/10">6</span>
</div>
<div class="grid grid-cols-2 gap-2">
<button data-suggest="Turn on Do Not Disturb for 30 minutes" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="moon" class="lucide lucide-moon w-4 h-4 text-gray-300"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" class=""></path></svg>
</span>
<p class="text-sm leading-snug">Enable DND 30m</p>
</div>
<p class="mt-1 text-[11px] text-gray-500">Focus • System</p>
</button>
<button data-suggest="Open Notes and start a new note titled Daily Standup" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="notebook-text" class="lucide lucide-notebook-text w-4 h-4 text-gray-300"><path d="M2 6h4" class=""></path><path d="M2 10h4" class=""></path><path d="M2 14h4" class=""></path><path d="M2 18h4" class=""></path><rect width="16" height="20" x="4" y="2" rx="2" class=""></rect><path d="M9.5 8h5" class=""></path><path d="M9.5 12H16" class=""></path><path d="M9.5 16H14" class=""></path></svg>
</span>
<p class="text-sm leading-snug">New note: Daily Standup</p>
</div>
<p class="mt-1 text-[11px] text-gray-500">Notes • App</p>
</button>
<button data-suggest="Connect to Wi‑Fi network Studio-5G" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-4 h-4 text-gray-300"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
</span>
<p class="text-sm leading-snug">Join Wi‑Fi: Studio‑5G</p>
</div>
<p class="mt-1 text-[11px] text-gray-500">Network • System</p>
</button>
<button data-suggest="Arrange Safari and Mail side by side" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="panels-top-left" class="lucide lucide-panels-top-left w-4 h-4 text-gray-300"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M9 21V9" class=""></path></svg>
</span>
<p class="text-sm leading-snug">Tile Safari + Mail</p>
</div>
<p class="mt-1 text-[11px] text-gray-500">Windows • Layout</p>
</button>
<button data-suggest="Take a screenshot of the active window" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="camera" class="lucide lucide-camera w-4 h-4 text-gray-300"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" class=""></path><circle cx="12" cy="13" r="3" class=""></circle></svg>
</span>
<p class="text-sm leading-snug">Screenshot active</p>
</div>
<p class="mt-1 text-[11px] text-gray-500">Capture • System</p>
</button>
<button data-suggest="Set a reminder for 2 PM today" class="group rounded-lg bg-white/5 border border-white/10 p-3 text-left hover:bg-white/10 transition">
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-black/40 border border-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell w-4 h-4 text-gray-300"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
</span>
<p class="text-sm leading-snug">Reminder: 2 PM</p>
</div>
<p class="mt-1 text-[11px] text-gray-500">Calendar • System</p>
</button>
</div>
<!-- Mini chart -->
</div>
<!-- Right: Live controls + Recent -->
<div class="p-4">
<div class="flex items-center justify-between">
<p class="text-sm">Live controls</p>
<span class="text-xs text-gray-400">Today <span id="today-count">0</span> actions</span>
</div>
<div class="mt-3 space-y-2">
<!-- Toggle: DND -->
<div class="flex items-center gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2">
<div class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-black/40 border border-white/15">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="moon" class="lucide lucide-moon w-3.5 h-3.5"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" class=""></path></svg>
</div>
<div class="min-w-0">
<p class="text-sm leading-snug">Do Not Disturb</p>
<p class="text-xs text-gray-400">Silence notifications</p>
</div>
<button data-toggle="dnd" aria-pressed="false" class="ml-auto relative inline-flex h-6 w-10 items-center rounded-full bg-white/10 ring-1 ring-white/10 transition">
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transform transition-transform"></span>
</button>
</div>
<!-- Toggle: Wi-Fi -->
<div class="flex items-center gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2">
<div class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-black/40 border border-white/15">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-3.5 h-3.5"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
</div>
<div class="min-w-0">
<p class="text-sm leading-snug">Wi‑Fi</p>
<p class="text-xs text-gray-400">Studio‑5G</p>
</div>
<button data-toggle="wifi" aria-pressed="true" class="ml-auto relative inline-flex h-6 w-10 items-center rounded-full bg-blue-400/90 ring-1 ring-blue-300/60 transition">
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-black translate-x-4 shadow transition-transform"></span>
</button>
</div>
<!-- Toggle: Focus timer -->
<div class="flex items-center gap-3 rounded-lg bg-white/5 border border-white/10 px-3 py-2">
<div class="inline-flex h-6 w-6 items-center justify-center rounded-md bg-black/40 border border-white/15">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="timer" class="lucide lucide-timer w-3.5 h-3.5"><line x1="10" x2="14" y1="2" y2="2" class=""></line><line x1="12" x2="15" y1="14" y2="11" class=""></line><circle cx="12" cy="14" r="8" class=""></circle></svg>
</div>
<div class="min-w-0">
<p class="text-sm leading-snug">Focus 25m</p>
<p class="text-xs text-gray-400">Pomodoro</p>
</div>
<button data-toggle="focus" aria-pressed="false" class="ml-auto relative inline-flex h-6 w-10 items-center rounded-full bg-white/10 ring-1 ring-white/10 transition">
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform"></span>
</button>
</div>
</div>
<!-- Recent -->
<div class="mt-4">
<div class="flex items-center justify-between">
<p class="text-sm">Recent commands</p>
<button id="clear-recent" class="text-xs text-gray-300 hover:text-white px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 inline-flex items-center gap-2" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="trash-2" class="lucide lucide-trash-2 w-4 h-4"><path d="M10 11v6" class=""></path><path d="M14 11v6" class=""></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" class=""></path><path d="M3 6h18" class=""></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" class=""></path></svg>
Clear
</button>
</div>
<div id="recent-list" class="mt-2 space-y-2">
<!-- Rows get appended here -->
</div>
</div>
</div>
</div>
</div>
<!-- End preview -->
</div>
</div>
</div>
</section>