Загрузка...
Секция-герой для аудиоустройств. Полноэкранный дизайн с навигацией, CTA, логотипами, аватарами и интерактивными аннотациями к продукту. Tailwind CSS.
<html lang="en" __gchrome_remoteframetoken="2dde0c8e66c498c4698d1c4f5bf4a294">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Product Hero</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Hide scrollbar for cleaner look */
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
</style>
<meta name="disabled-font-classes"
content="font-geist,font-roboto,font-montserrat,font-poppins,font-playfair,font-instrument-serif,font-merriweather,font-bricolage,font-jakarta,font-manrope,font-space-grotesk,font-work-sans,font-pt-serif,font-geist-mono,font-space-mono,font-quicksand,font-nunito,font-newsreader,font-google-sans-flex,font-oswald,font-dm-sans,font-cormorant">
</head>
<body class="bg-[#0A1010] overflow-x-hidden antialiased selection:bg-slate-200 selection:text-slate-900 text-slate-100">
<!-- Background (component) added by Aura -->
<div class="aura-background-component top-0 w-full h-screen absolute -z-50 saturate-200 hue-rotate-90 opacity-70"
data-alpha-mask="12"
style="; mask-image: linear-gradient(to bottom, transparent, black 0%, black 12%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 12%, transparent)">
<div class="aura-background-component top-0 w-full -z-10 absolute h-full">
<div data-us-project="EET25BiXxR2StNXZvAzF" class="absolute w-full h-full left-0 top-0 -z-10"></div>
<script type="text/javascript">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script>
</div>
</div>
<!-- Vertical Grid Lines Container (Background) -->
<div
class="fixed inset-0 pointer-events-none flex justify-between px-6 xl:px-24 max-w-[1800px] mx-auto z-0 opacity-40">
<div class="w-px h-full bg-slate-800/50"></div>
<div class="w-px h-full hidden md:block bg-slate-800/50"></div>
<div class="w-px h-full hidden lg:block bg-slate-800/50"></div>
<div class="w-px h-full bg-slate-800/50"></div>
</div>
<!-- Main Content Wrapper -->
<div class="relative z-10 w-full max-w-[1800px] mx-auto px-6 xl:px-24 min-h-screen flex flex-col">
<!-- Navigation -->
<nav class="flex md:py-10 pt-8 pb-8 items-center justify-between">
<div class="flex items-center gap-12">
<a href="#" class="text-2xl font-semibold tracking-tight">Audio<span class="text-slate-600">Lab.</span></a>
<div class="hidden md:flex items-center gap-3 cursor-pointer group">
<div class="space-y-1">
<span class="block w-6 h-0.5 transition-all group-hover:w-4 bg-slate-100"></span>
<span class="block w-4 h-0.5 transition-all group-hover:w-6 bg-slate-100"></span>
</div>
<span class="text-base font-medium ml-2">Menu</span>
</div>
</div>
<div class="flex items-center gap-6">
<button class="p-2 rounded-full transition-colors hover:bg-slate-800">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" aria-hidden="true" class="lucide lucide-search w-5 h-5 text-slate-400"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
</button>
<div class="relative p-2 rounded-full transition-colors cursor-pointer hover:bg-slate-800">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="shopping-bag" aria-hidden="true" class="lucide lucide-shopping-bag w-5 h-5 text-slate-400">
<path d="M16 10a4 4 0 0 1-8 0"></path>
<path d="M3.103 6.034h17.794"></path>
<path
d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z">
</path>
</svg>
<span class="text-[10px] flex items-center justify-center font-bold w-4 h-4 rounded-full absolute top-1 right-0 text-black bg-slate-100">2</span>
</div>
<a href="#"
class="hidden sm:flex items-center gap-2 transition-all text-sm font-medium rounded-full pt-3 pr-6 pb-3 pl-6 shadow-lg hover:bg-slate-200 shadow-slate-800 text-black bg-slate-100">
Pre-order Now
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
data-lucide="arrow-up-right" aria-hidden="true" class="lucide lucide-arrow-up-right w-4 h-4">
<path d="M7 7h10v10"></path>
<path d="M7 17 17 7"></path>
</svg>
</a>
</div>
</nav>
<!-- Main Grid Area -->
<main class="flex-grow grid grid-cols-1 lg:grid-cols-12 lg:gap-8 lg:pt-16 pt-8 pb-12 gap-x-y-12 gap-y-12">
<!-- Left Indicator Column (01, 02, 03) -->
<div class="hidden lg:flex lg:col-span-1 flex-col pt-4 relative items-start">
<div class="sticky top-32 flex flex-col gap-6">
<button class="group flex items-center gap-3">
<div class="flex text-xs font-medium w-8 h-8 rounded-full items-center justify-center text-black bg-slate-100">1</div>
</button>
<button class="group flex items-center gap-3">
<div class="flex group-hover:border-slate-900 group-hover:text-slate-900 transition-all text-xs font-medium w-8 h-8 border rounded-full items-center justify-center text-slate-600 border-slate-700">2</div>
</button>
<button class="group flex items-center gap-3">
<div class="flex group-hover:border-slate-900 group-hover:text-slate-900 transition-all text-xs font-medium w-8 h-8 border rounded-full items-center justify-center text-slate-600 border-slate-700">3</div>
</button>
</div>
<!-- Vertical Progress Line -->
<div class="absolute left-4 top-40 w-px h-64 bg-gradient-to-b to-transparent -z-10 from-slate-800"></div>
<span class="mt-auto mb-32 text-xs font-medium rotate-180 text-slate-600" style="writing-mode: vertical-rl;">01 — INTRO</span>
</div>
<!-- Content Column -->
<div class="lg:col-span-5 flex flex-col z-20 justify-start">
<!-- Badge -->
<div class="flex gap-4 mb-8 gap-x-4 gap-y-4 items-center">
<div
class="flex w-12 h-12 border rounded-full shadow-sm items-center justify-center bg-black border-slate-900">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
style="width: 16px; height: 16px" class="w-[16px] h-[16px]" aria-hidden="true" role="img"
data-icon="solar:soundwave-square-bold-duotone" data-simple-icons="digitalocean"
data-icon-set="simple-icons" data-icon-replaced="true" stroke-width="2">
<path fill="#f1f5f9"
d="M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 0 1 4.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83c-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0 0 12.039 0zM7.39 19.362H3.828v3.564H7.39zm-3.563 0v-2.978H.85v2.978z">
</path>
</svg>
</div>
<div>
<h3 class="text-base font-semibold leading-tight text-slate-100">Sonic Field-1</h3>
<p class="text-sm text-slate-500">Engineering Sample v2.0</p>
</div>
</div>
<!-- Headline -->
<h1 class="lg:text-7xl leading-[1.1] text-5xl font-semibold tracking-tight mb-8 text-slate-100">Audio <br> Digital
<span class="text-slate-600">Lab.</span>
</h1>
<!-- Subtext -->
<p class="lg:text-xl leading-relaxed text-lg font-normal text-slate-500 max-w-md mb-10">Designed for creators
who demand fidelity. Experi.</p>
<!-- Trusted By Logos (Replacing Text Logos as requested) -->
<div class="mb-10">
<p class="text-xs font-medium uppercase tracking-widest mb-4 text-slate-600">Technology Partners</p>
<div
class="flex gap-6 hover:grayscale-0 transition-all duration-500 opacity-60 grayscale gap-x-6 gap-y-6 items-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="simple-icons:nasa">
<path fill="currentColor"
d="M4.344 13.598c.075.281.195.39.407.39c.22 0 .335-.132.335-.39V8.804h1.379v4.794c0 .675-.088.968-.43 1.31c-.247.248-.703.439-1.278.439c-.464 0-.909-.154-1.192-.438c-.249-.25-.386-.505-.599-1.311l-.846-3.196c-.074-.281-.194-.39-.406-.39c-.22 0-.336.132-.336.39v4.794H0v-4.794c0-.675.088-.968.43-1.31c.247-.248.703-.439 1.278-.439c.464 0 .909.154 1.192.438c.249.25.385.505.599 1.311zm18.231 1.598l-1.591-4.98a.4.4 0 0 0-.06-.132a.23.23 0 0 0-.186-.082a.23.23 0 0 0-.185.082a.4.4 0 0 0-.06.132l-1.591 4.98h-1.425l1.739-5.44c.09-.283.22-.524.384-.684c.282-.275.614-.419 1.138-.419c.525 0 .857.144 1.139.42c.164.16.294.4.384.683L24 15.196zm-7.044 0c.903 0 1.344-.192 1.692-.538c.385-.383.569-.802.569-1.427c0-.553-.202-1.064-.51-1.37c-.403-.4-.903-.527-1.719-.527h-1.142c-.436 0-.61-.053-.748-.188c-.094-.093-.139-.23-.139-.393c0-.168.04-.334.156-.448c.103-.1.243-.147.511-.147h3.301V8.804h-3.049c-.903 0-1.343.192-1.691.538c-.385.383-.57.802-.57 1.427c0 .553.203 1.064.51 1.37c.404.4.904.527 1.72.527h1.141c.437 0 .61.053.748.188c.095.093.14.23.14.393c0 .169-.041.335-.157.448c-.102.1-.242.147-.51.147h-3.405l-1.306-4.086c-.09-.283-.22-.524-.384-.684c-.282-.275-.615-.419-1.139-.419s-.857.144-1.138.42c-.165.16-.294.4-.385.683l-1.738 5.44h1.424l1.592-4.98a.4.4 0 0 1 .06-.132a.23.23 0 0 1 .185-.082q.121 0 .186.082a.4.4 0 0 1 .06.132l1.591 4.98z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="simple-icons:spacex">
<path fill="currentColor"
d="M24 7.417C8.882 8.287 1.89 14.75.321 16.28L0 16.583h2.797C10.356 9.005 21.222 7.663 24 7.417m-17.046 6.35c-.472.321-.945.68-1.398 1.02l2.457 1.796h2.778zM2.948 10.8H.189l3.25 2.381c.473-.321 1.02-.661 1.512-.945Z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="simple-icons:sony">
<path fill="currentColor"
d="M8.55 9.888c.921 0 1.658.23 2.221.742c.385.349.6.846.594 1.367a1.9 1.9 0 0 1-.594 1.373c-.527.484-1.348.742-2.22.742s-1.68-.258-2.215-.742a1.8 1.8 0 0 1-.603-1.373c0-.518.218-1.015.603-1.367c.5-.454 1.384-.742 2.214-.742m.003 3.67c.461 0 .888-.161 1.188-.458c.3-.3.433-.66.433-1.103c0-.424-.148-.821-.433-1.103c-.294-.29-.733-.454-1.188-.454s-.893.163-1.19.454c-.285.282-.434.679-.434 1.103a1.56 1.56 0 0 0 .434 1.103c.297.294.733.457 1.19.457M3.712 11.59q.24.061.466.163a1.4 1.4 0 0 1 .379.258c.197.206.309.482.306.767a.96.96 0 0 1-.379.778a2.1 2.1 0 0 1-.709.349a3.7 3.7 0 0 1-1.194.17c-.352 0-.546-.041-.813-.097l-.077-.016a4.7 4.7 0 0 1-.858-.278a.07.07 0 0 0-.042-.012a.084.084 0 0 0-.082.084v.203H.121v-1.478h.524a.76.76 0 0 0 .137.418c.212.26.44.36.657.44c.367.12.752.184 1.136.196c.553 0 .876-.134.946-.163l.009-.004l.006-.002c.062-.023.312-.114.312-.392c0-.274-.234-.334-.387-.373l-.022-.005c-.17-.046-.562-.088-.99-.133l-.152-.016a14 14 0 0 1-1.197-.175c-.498-.11-.694-.292-.816-.405l-.008-.008a1.02 1.02 0 0 1-.276-.7c0-.496.34-.796.758-.98a3.6 3.6 0 0 1 1.439-.289c.82.003 1.487.27 1.727.394c.097.052.145-.012.145-.06v-.149h.527v1.288h-.472a.9.9 0 0 0-.294-.491a1.3 1.3 0 0 0-.297-.179a3.1 3.1 0 0 0-1.251-.245c-.443 0-.867.085-1.08.215q-.199.124-.2.306c0 .173.146.242.22.263c.196.06.632.103.971.137l.204.021c.327.033 1.012.124 1.315.2m18.167-.997v-.479H24v.47h-.476c-.172 0-.242.033-.372.179l-1.427 1.63a.1.1 0 0 0-.019.07v.742a1 1 0 0 0 .012.103a.15.15 0 0 0 .1.09a1 1 0 0 0 .13.01h.486v.47H19.86v-.47h.46a1 1 0 0 0 .13-.01a.16.16 0 0 0 .104-.09a1 1 0 0 0 .009-.1v-.742c0-.025 0-.025-.033-.064L19.119 10.8c-.076-.079-.206-.206-.406-.206h-.458v-.47h2.588v.47h-.312c-.07 0-.118.07-.058.146l.879 1.051c.009.012.015.012.027.003s.894-1.045.9-1.054a.09.09 0 0 0-.018-.128a.1.1 0 0 0-.06-.018zm-6.284-.003h.485c.221 0 .26.085.263.291l.028 1.566l-2.582-2.324h-1.845v.47h.412c.297 0 .318.164.318.31v2.213c0 .128.001.295-.182.295h-.506v.467h2.164v-.47h-.528c-.212 0-.22-.097-.224-.303v-1.882l2.973 2.651h.757l-.04-2.996c.004-.218.019-.291.243-.291h.473v-.47h-2.209Z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="simple-icons:dolby">
<path fill="currentColor"
d="M0 3.564v16.872h2.488c4.648 0 8.438-3.788 8.438-8.436s-3.79-8.436-8.438-8.436zm21.512 0c-4.648 0-8.438 3.788-8.438 8.436s3.79 8.436 8.438 8.436H24V3.564z">
</path>
</svg>
</div>
</div>
<!-- CTA & Avatar Group -->
<div class="flex flex-wrap gap-8 mb-16 gap-x-8 gap-y-8 items-center">
<a href="#contact"
class="group inline-flex items-center justify-center gap-3 transition duration-150 ease-out hover:-translate-y-0.5 text-base font-medium bg-gradient-to-br ring-1 rounded-full pt-3 pr-6 pb-3 pl-6 shadow-lg shadow-neutral-900/20 text-white from-neutral-900 to-neutral-800/25 ring-black/10">
Start a project
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full ring-1 bg-white/15 ring-white/25">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 24" style="color: rgb(255, 255, 255); width: 24px; height: 16px" class="lucide lucide-arrow-up-right w-[24px] h-[16px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" data-solar="arrow-right-up-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#ffffff" fill-rule="evenodd" d="M17.47 15.53a.75.75 0 0 0 1.28-.53V6a.75.75 0 0 0-.75-.75H9a.75.75 0 0 0-.53 1.28z" clip-rule="evenodd"></path><path fill="#ffffff" d="M5.47 17.47a.75.75 0 1 0 1.06 1.06l6.97-6.97l-1.06-1.06z" opacity=".5"></path></svg>
</span>
</a>
<div class="flex items-center -space-x-3">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=64&h=64" alt="User" class="w-10 h-10 rounded-full border-2 object-cover border-slate-950">
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=64&h=64" alt="User" class="w-10 h-10 rounded-full border-2 object-cover border-slate-950">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=64&h=64" alt="User" class="w-10 h-10 rounded-full border-2 object-cover border-slate-950">
<div
class="w-10 h-10 rounded-full border-2 flex items-center justify-center text-xs font-semibold border-slate-950 bg-slate-900 text-slate-400">
+2k</div>
</div>
</div>
</div>
<!-- Product Image Column -->
<div class="lg:col-span-6 relative h-[500px] lg:h-auto flex items-center justify-center">
<!-- Background Glow --
<div class="absolute w-[80%] h-[80%] bg-blue-100/50 rounded-full blur-3xl -z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
<!-- Main Product Image -->
<!-- Using a placeholder that resembles a high-tech field recorder/camera -->
<div class="flex md:justify-end relative items-center justify-center">
<img src="https://images.unsplash.com/photo-1593118247619-e2d6f056869e?q=80&w=1000&auto=format&fit=crop" class="grayscale-[20%] mix-blend-normal w-full h-auto object-cover rounded-3xl drop-shadow-2xl" alt="Field Recorder Device"><!-- Overlay Grid on Image (Decoration) -->
<div
class="absolute top-6 right-6 px-3 py-1 backdrop-blur-md rounded text-xs font-mono tracking-widest bg-white/80 text-black">
REC 00:04:12
</div>
</div>
<!-- Floating Annotation 1 (Top Left) -->
<div
class="absolute top-10 left-0 lg:-left-12 backdrop-blur-xl border shadow-lg p-4 rounded-2xl max-w-[180px] hidden md:block bg-black/80 border-black/50">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:battery-charge-bold-duotone">
<path fill="currentColor"
d="M3.172 5.172C2 6.343 2 8.229 2 12s0 5.657 1.172 6.828S6.229 20 10 20h1.5c3.771 0 5.657 0 6.828-1.172S19.5 15.771 19.5 12s0-5.657-1.172-6.828S15.271 4 11.5 4H10C6.229 4 4.343 4 3.172 5.172"
opacity=".5"></path>
<path fill="currentColor"
d="M19.491 14c.009-.6.009-1.264.009-2c0-.735 0-1.4-.009-2H20c.942 0 1.414 0 1.707.293S22 11.057 22 12s0 1.414-.293 1.707S20.942 14 20 14zm-7.415-4.52a.75.75 0 0 0-1.152-.96l-2.5 3A.75.75 0 0 0 9 12.75h1.899l-1.475 1.77a.75.75 0 0 0 1.152.96l2.5-3a.75.75 0 0 0-.576-1.23h-1.899z">
</path>
</svg>
<span class="text-xs font-semibold text-slate-100">Li-Ion 5000mAh</span>
</div>
<p class="text-[10px] text-slate-500 leading-snug">72-hour continuous recording on a single charge.</p>
<!-- Connector Line -->
<div class="absolute top-1/2 -right-12 w-12 h-px bg-slate-600"></div>
<div class="absolute top-1/2 -right-12 w-1 h-1 rounded-full bg-slate-100"></div>
</div>
<!-- Floating Annotation 2 (Bottom Right) -->
<div
class="absolute bottom-20 right-0 lg:-right-4 backdrop-blur-xl border shadow-lg p-4 rounded-2xl max-w-[200px] hidden md:block bg-black/80 border-black/50">
<div class="flex items-center gap-2 mb-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:cpu-bold-duotone">
<path fill="currentColor" fill-rule="evenodd"
d="M12 3c.385 0 .698.312.698.698v2.79q.764.001 1.395.017V3.698a.698.698 0 0 1 1.395 0v2.79a1 1 0 0 1-.008.108c.936.115 1.585.353 2.078.846s.731 1.142.846 2.078a1 1 0 0 1 .108-.008h2.79a.698.698 0 0 1 0 1.395h-2.807q.017.63.017 1.395h2.79a.698.698 0 0 1 0 1.396h-2.79q-.001.764-.017 1.395h2.807a.698.698 0 0 1 0 1.395h-2.79a1 1 0 0 1-.108-.008c-.115.936-.353 1.585-.846 2.078s-1.142.731-2.078.846q.009.053.008.108v2.79a.698.698 0 0 1-1.395 0v-2.807q-.63.017-1.395.017v2.79a.698.698 0 0 1-1.396 0v-2.79a56 56 0 0 1-1.395-.017v2.807a.698.698 0 0 1-1.395 0v-2.79q0-.056.008-.108c-.936-.115-1.585-.353-2.078-.846s-.731-1.142-.846-2.078a1 1 0 0 1-.108.008h-2.79a.698.698 0 0 1 0-1.395h2.807a56 56 0 0 1-.017-1.395h-2.79a.698.698 0 0 1 0-1.396h2.79q.001-.764.017-1.395H2.698a.698.698 0 0 1 0-1.395h2.79q.056 0 .108.008c.115-.936.353-1.585.846-2.078s1.142-.731 2.078-.846a1 1 0 0 1-.008-.108v-2.79a.698.698 0 0 1 1.395 0v2.807q.63-.017 1.395-.017v-2.79c0-.386.313-.698.698-.698m-.976 5.581c-.619 0-1.152 0-1.578.058c-.458.061-.896.2-1.252.555c-.355.356-.494.794-.555 1.252c-.058.427-.058.96-.058 1.578v1.952c0 .619 0 1.151.058 1.578c.061.458.2.896.555 1.252c.356.355.794.494 1.252.555c.426.058.96.058 1.578.058h1.952c.619 0 1.151 0 1.578-.058c.458-.061.896-.2 1.252-.555c.355-.356.494-.794.555-1.252c.058-.427.058-.96.058-1.578v-1.952c0-.619 0-1.151-.058-1.578c-.061-.458-.2-.896-.555-1.252c-.356-.355-.794-.494-1.252-.555c-.427-.058-.96-.058-1.578-.058z"
clip-rule="evenodd"></path>
<path fill="currentColor"
d="M9.18 10.18c.054-.052.149-.118.451-.159c.323-.043.761-.044 1.439-.044h1.86c.678 0 1.116.001 1.438.044c.303.041.398.107.45.16c.054.053.12.148.16.45c.044.323.045.761.045 1.439v1.86c0 .678-.001 1.116-.045 1.438c-.04.303-.106.398-.16.45c-.052.054-.147.12-.45.16c-.322.044-.76.045-1.438.045h-1.86c-.678 0-1.116-.001-1.439-.045c-.302-.04-.397-.106-.45-.16c-.053-.052-.119-.147-.16-.45c-.043-.322-.044-.76-.044-1.438v-1.86c0-.678.001-1.116.044-1.438c.041-.303.107-.398.16-.451"
opacity=".5"></path>
</svg>
<span class="text-xs font-semibold text-slate-100">Neural Engine</span>
</div>
<p class="text-[10px] text-slate-500 leading-snug">On-device processing for instant vocal isolation.</p>
<!-- Connector Line -->
<div class="absolute top-1/2 -left-8 w-8 h-px bg-slate-600"></div>
<div class="absolute top-1/2 -left-8 w-1 h-1 rounded-full bg-slate-100"></div>
</div>
<!-- Floating Annotation 3 (Mid Left) -->
<div
class="absolute bottom-1/3 left-4 lg:-left-8 backdrop-blur-xl border shadow-lg p-3 rounded-2xl flex items-center gap-3 hidden md:flex bg-black/80 border-black/50">
<div class="flex w-8 h-8 rounded-full items-center justify-center bg-slate-900">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em"
viewBox="0 0 24 24" data-icon="solar:tuning-bold-duotone">
<path fill="currentColor" d="M13.752 14.5a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-10-5a3 3 0 1 0 6 0a3 3 0 0 0-6 0">
</path>
<path fill="currentColor"
d="M7.462 6.584a3 3 0 0 0-1.5.021V2a.75.75 0 0 1 1.5 0zm-1.5 5.81a3 3 0 0 0 1.5.021V22a.75.75 0 0 1-1.5 0zm10 5V22a.75.75 0 0 0 1.5 0v-4.585a3 3 0 0 1-1.5-.021m1.5-5.81V2a.75.75 0 0 0-1.5 0v9.605a3 3 0 0 1 1.5-.021"
opacity=".5"></path>
</svg>
</div>
<div>
<span class="block text-xs font-semibold text-slate-100">Haptic Dial</span>
<span class="block text-[10px] text-slate-500">Precision Seek</span>
</div>
<!-- Connector Line -->
<div class="absolute top-1/2 -right-8 w-8 h-px rotate-12 origin-left bg-slate-600"></div>
</div>
</div>
<!-- Bottom Feature Cards (Spanning width of content area) -->
</main>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>