Загрузка...
Адаптивный макет дашборда для образовательных мероприятий. Отображает детали событий, расписание, курсы и преподавателей. Идеально для платформ обучения.
<div
class="flex flex-col md:flex-row md:gap-8 lg:gap-10 text-neutral-100 w-full max-w-6xl mt-8 mr-auto mb-8 ml-auto relative gap-x-16 gap-y-16">
<!-- LEFT CARD: Event Details -->
<section
class="flex-1 overflow-hidden bg-gradient-to-b from-neutral-900 via-neutral-900 to-neutral-800 border-neutral-800 border rounded-3xl relative shadow-xl">
<div class="px-6 pt-6 pb-4 flex items-center justify-between border-b border-neutral-800/70">
<button class="inline-flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-100 transition rounded-full px-3 py-1 hover:bg-neutral-800/60 border border-transparent hover:border-neutral-700 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/70" type="button">
<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:alt-arrow-left-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M11.596 8.303L8.165 11.63a.5.5 0 0 0 0 .74l6.63 6.43c.414.401 1.205.158 1.205-.37v-5.723z" class=""></path><path fill="currentColor" d="M16 11.293V5.57c0-.528-.791-.771-1.205-.37l-2.482 2.406z" opacity=".5" class=""></path></svg>
<span class="tracking-tight font-sans">Back</span>
</button>
<button class="h-9 w-9 rounded-full flex items-center justify-center border border-neutral-800 text-neutral-400 hover:text-neutral-100 hover:bg-neutral-800 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/70" type="button">
<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:settings-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M15.523 12c0 1.657-1.354 3-3.023 3s-3.023-1.343-3.023-3S10.83 9 12.5 9s3.023 1.343 3.023 3" class=""></path></svg>
</button>
</div>
<div class="px-6 pb-6 space-y-6">
<div class="mt-4 space-y-1">
<p class="text-xs font-medium text-emerald-400 uppercase tracking-[0.16em] font-sans">
Event
</p>
<h1 class="text-2xl md:text-3xl text-neutral-50 font-sans tracking-tight">
Collaborative Stats Workshop
</h1>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm border-t border-b border-neutral-800/70 pt-4 pb-4">
<div class="space-y-1">
<p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
Time
</p>
<p class="text-neutral-50 font-medium font-sans">
Mar 4th · 11:00
</p>
</div>
<div class="space-y-1">
<p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
Location
</p>
<p class="text-neutral-50 font-medium font-sans">
Aurora Hall · 210
</p>
</div>
<div class="space-y-1">
<p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
Track
</p>
<p class="text-neutral-50 font-medium font-sans">
Data Foundations
</p>
</div>
</div>
<!-- Attendees vertical group -->
<div class="flex items-center gap-4">
<div class="flex -space-x-2">
<img class="h-9 w-9 rounded-full border border-neutral-900 object-cover" src="https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?auto=format&fit=crop&w=200&q=80" alt="Attendee avatar">
<img class="h-9 w-9 rounded-full border border-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dbf5085e-0341-4243-aa8f-73a531c46290_320w.webp" alt="Attendee avatar">
<img class="h-9 w-9 rounded-full border border-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e57b7081-23fd-4dd7-981e-59fc4fda47dc_320w.webp" alt="Attendee avatar">
</div>
<!-- perfect circle user+ -->
<button class="flex hover:bg-emerald-400 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80 flex-none text-neutral-900 bg-emerald-500 w-9 h-9 rounded-full shadow-md items-center justify-center" type="button">
<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:user-plus-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M16 6a4 4 0 1 1-8 0a4 4 0 0 1 8 0" class=""></path><path fill="currentColor" d="M14.477 21.92c-.726.053-1.547.08-2.477.08c-8 0-8-2.015-8-4.5S7.582 13 12 13c2.88 0 5.406.856 6.814 2.141C18.298 15 17.574 15 16.5 15c-1.65 0-2.475 0-2.987.513C13 16.025 13 16.85 13 18.5s0 2.475.513 2.987c.237.238.542.365.964.434" opacity=".5" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M16.5 22c-1.65 0-2.475 0-2.987-.513C13 20.975 13 20.15 13 18.5s0-2.475.513-2.987C14.025 15 14.85 15 16.5 15s2.475 0 2.987.513C20 16.025 20 16.85 20 18.5s0 2.475-.513 2.987C18.975 22 18.15 22 16.5 22m.583-5.056a.583.583 0 1 0-1.166 0v.973h-.973a.583.583 0 1 0 0 1.166h.973v.973a.583.583 0 1 0 1.166 0v-.973h.973a.583.583 0 1 0 0-1.166h-.973z" clip-rule="evenodd" class=""></path></svg>
</button>
<p class="text-xs text-neutral-400 font-sans">
Invite peers to join this live workshop.
</p>
</div>
</div>
<!-- Upload assignment strip -->
<div class="mt-4 px-6 pb-6 border-t border-neutral-800/70 pt-4">
<div
class="rounded-2xl border border-dashed border-emerald-500/30 bg-gradient-to-r from-emerald-500/10 to-emerald-500/5 p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div class="space-y-1">
<p class="text-sm font-medium text-neutral-50 tracking-tight font-sans">
Upload your prep work
</p>
<p class="text-xs text-neutral-400 font-sans">
You’ll unlock interactive boards after submitting your draft
notes.
</p>
</div>
<button class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-full bg-emerald-500 text-neutral-900 text-sm font-medium shadow hover:bg-emerald-400 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80" type="button">
<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:cloud-upload-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M6.5 18v-.09c0-.865 0-1.659.087-2.304c.095-.711.32-1.463.938-2.08c.618-.619 1.37-.844 2.08-.94c.646-.086 1.44-.086 2.306-.086h.178c.866 0 1.66 0 2.305.087c.711.095 1.463.32 2.08.938c.619.618.844 1.37.94 2.08c.085.637.086 1.416.086 2.267c2.573-.55 4.5-2.812 4.5-5.52c0-2.47-1.607-4.572-3.845-5.337C17.837 4.194 15.415 2 12.476 2C9.32 2 6.762 4.528 6.762 7.647c0 .69.125 1.35.354 1.962a4.4 4.4 0 0 0-.83-.08C3.919 9.53 2 11.426 2 13.765S3.919 18 6.286 18z" opacity=".5" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M12 14c-1.886 0-2.828 0-3.414.586S8 16.114 8 18s0 2.828.586 3.414S10.114 22 12 22s2.828 0 3.414-.586S16 19.886 16 18s0-2.828-.586-3.414S13.886 14 12 14m1.805 3.084l-1.334-1.333a.667.667 0 0 0-.942 0l-1.334 1.333a.667.667 0 1 0 .943.943l.195-.195v1.946a.667.667 0 0 0 1.334 0v-1.946l.195.195a.667.667 0 0 0 .943-.943" clip-rule="evenodd" class=""></path></svg>
<span>Upload</span>
</button>
</div>
</div>
</section>
<!-- CENTER CARD: Session Live view -->
<section
class="relative flex-1 max-w-md mx-auto bg-neutral-900 rounded-[2.2rem] shadow-2xl border border-neutral-800 overflow-hidden">
<!-- Status bar -->
<div
class="px-5 pt-5 flex items-center justify-between text-[11px] text-neutral-300 border-b border-neutral-800/70 pb-3">
<span class="font-sans">09:42</span>
<div class="flex items-center gap-1.5 text-xs">
<span class="iconify w-3.5 h-3.5" data-icon="solar:wifi-bold-duotone"></span>
<span class="font-sans">Strong</span>
</div>
</div>
<!-- Hero image -->
<div class="relative mt-3 mx-3 rounded-[1.8rem] overflow-hidden">
<img class="w-full h-80 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/89c17836-ca19-4c7c-9bb2-b8a36b6a0bde_800w.webp" alt="Student portrait">
<div class="bg-gradient-to-t from-black/70 via-black/30 to-transparent absolute top-0 right-0 bottom-0 left-0">
</div>
<div class="absolute top-4 left-4 right-4 flex items-start justify-between">
<div class="space-y-1">
<p class="text-[11px] text-neutral-200 font-sans">
48,210 learners synced · Live cohort
</p>
<p class="text-xs text-neutral-400 max-w-xs font-sans">
After the live block, the recording and notes will appear here
automatically.
</p>
</div>
<!-- perfect circle more (...) -->
<button class="flex outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80 flex-none text-neutral-100 bg-black/50 w-9 h-9 border-white/10 border rounded-full backdrop-blur items-center justify-center" type="button">
<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:menu-dots-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m14 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" class=""></path><path fill="currentColor" d="M14 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0" opacity=".5" class=""></path></svg>
</button>
</div>
</div>
<!-- Content under hero -->
<div class="mt-6 pr-6 pb-6 pl-6 space-y-6">
<div class="space-y-1 border-b border-neutral-800/70 pb-4">
<p class="text-xs font-medium text-emerald-400 uppercase tracking-[0.2em] font-sans">
MATH204 · Live Series
</p>
<h2 class="text-xl font-semibold tracking-tight text-neutral-50 font-sans">
Intuitive Linear Spaces & Models
</h2>
<p class="text-xs text-neutral-400 font-sans">
Can you read structure from this function’s shape? We’ll map
visuals to algebra.
</p>
</div>
<!-- Action buttons circle -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<button class="h-11 w-11 rounded-full bg-emerald-500 text-neutral-900 flex items-center justify-center shadow-lg hover:bg-emerald-400 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80" type="button">
<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:play-bold-duotone" class="iconify w-5 h-5 translate-x-[1px] iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M23 12c0-1.035-.53-2.07-1.591-2.647L8.597 2.385C6.534 1.264 4 2.724 4 5.033V12z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="m8.597 21.615l12.812-6.968A2.99 2.99 0 0 0 23 12H4v6.967c0 2.31 2.534 3.769 4.597 2.648" opacity=".5" class=""></path></svg>
</button>
<div class="text-xs">
<p class="text-neutral-200 font-medium font-sans">
Join session
</p>
<p class="text-neutral-500 font-sans">
Starts in 18 minutes
</p>
</div>
</div>
<div class="flex items-center gap-3 text-neutral-300">
<button class="flex hover:bg-neutral-700 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80 bg-neutral-800 w-10 h-10 rounded-full items-center justify-center" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(212, 212, 212); width: 16px; height: 16px" class="iconify iconify--solar w-[16px] h-[16px]" aria-hidden="true" role="img" data-icon="solar:phone-calling-rounded-bold-duotone" data-solar="eye-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#d4d4d4" d="M2 12c0 1.64.425 2.191 1.275 3.296C4.972 17.5 7.818 20 12 20s7.028-2.5 8.725-4.704C21.575 14.192 22 13.639 22 12c0-1.64-.425-2.191-1.275-3.296C19.028 6.5 16.182 4 12 4S4.972 6.5 3.275 8.704C2.425 9.81 2 10.361 2 12" opacity=".5" class=""></path><path fill="#d4d4d4" fill-rule="evenodd" d="M8.25 12a3.75 3.75 0 1 1 7.5 0a3.75 3.75 0 0 1-7.5 0m1.5 0a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0" clip-rule="evenodd" class=""></path></svg>
</button>
<button class="flex hover:bg-neutral-700 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80 bg-neutral-800 w-10 h-10 rounded-full items-center justify-center" type="button">
<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:phone-calling-rounded-bold-duotone" class="iconify iconify--solar w-[16px] h-[16px]" stroke-width="2" data-icon-replaced="true" style="color: rgb(212, 212, 212); width: 16px; height: 16px;"><path fill="currentColor" d="m10.038 5.316l.649 1.163c.585 1.05.35 2.426-.572 3.349c0 0-1.12 1.119.91 3.148c2.027 2.027 3.146.91 3.147.91c.923-.923 2.3-1.158 3.349-.573l1.163.65c1.585.884 1.772 3.106.379 4.5c-.837.836-1.863 1.488-2.996 1.53c-1.908.073-5.149-.41-8.4-3.66c-3.25-3.251-3.733-6.492-3.66-8.4c.043-1.133.694-2.159 1.53-2.996c1.394-1.393 3.616-1.206 4.5.38" opacity=".5" class=""></path><path fill="currentColor" d="M13.26 1.88a.75.75 0 0 1 .861-.62c.025.005.107.02.15.03q.129.027.352.09c.297.087.712.23 1.21.458c.996.457 2.321 1.256 3.697 2.631c1.376 1.376 2.175 2.702 2.632 3.698c.228.498.37.912.457 1.21a6 6 0 0 1 .113.454l.005.031a.765.765 0 0 1-.617.878a.75.75 0 0 1-.86-.617a3 3 0 0 0-.081-.327a7.4 7.4 0 0 0-.38-1.004c-.39-.85-1.092-2.024-2.33-3.262s-2.411-1.939-3.262-2.329a7.4 7.4 0 0 0-1.003-.38a6 6 0 0 0-.318-.08a.76.76 0 0 1-.626-.861" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M13.486 5.33a.75.75 0 0 1 .927-.516l-.206.721l.206-.72h.003l.003.001l.008.002l.02.006l.056.02q.067.023.177.07c.146.062.345.158.59.303c.489.29 1.157.77 1.942 1.556c.785.785 1.266 1.453 1.556 1.942c.145.245.241.444.303.59a3 3 0 0 1 .09.233l.005.02l.003.008v.003l.001.001s0 .002-.72.208l.72-.206a.75.75 0 0 1-1.439.422l-.003-.01l-.035-.088a4 4 0 0 0-.216-.417c-.223-.376-.626-.946-1.326-1.646s-1.269-1.102-1.646-1.325a4 4 0 0 0-.504-.25l-.01-.004a.75.75 0 0 1-.505-.925" clip-rule="evenodd" class=""></path></svg>
</button>
<button class="h-10 w-10 rounded-full bg-neutral-800 flex items-center justify-center hover:bg-neutral-700 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80" type="button">
<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:widget-3-bold-duotone" class="iconify iconify--solar w-[16px] h-[16px]" stroke-width="2" data-icon-replaced="true" style="color: rgb(212, 212, 212); width: 16px; height: 16px;"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" class=""><path d="M22.25 6.5a4.75 4.75 0 1 0-9.5 0a4.75 4.75 0 0 0 9.5 0m-11 11a4.75 4.75 0 1 0-9.5 0a4.75 4.75 0 0 0 9.5 0" class=""></path><path d="M1.75 6.5a4.75 4.75 0 1 1 9.5 0a4.75 4.75 0 0 1-9.5 0m11 11a4.75 4.75 0 1 1 9.5 0a4.75 4.75 0 0 1-9.5 0" opacity=".5" class=""></path></g></svg>
</button>
</div>
</div>
<!-- Meta -->
<div class="grid grid-cols-3 gap-4 text-[11px] text-neutral-400 border-t border-neutral-800/70 pt-4">
<div class="">
<p class="uppercase tracking-[0.22em] font-medium font-sans">
Level
</p>
<p class="mt-1 text-neutral-50 font-medium font-sans">
Intermediate
</p>
</div>
<div class="">
<p class="uppercase tracking-[0.22em] font-medium font-sans">
Length
</p>
<p class="mt-1 text-neutral-50 font-medium font-sans">
3 months
</p>
</div>
<div class="">
<p class="uppercase tracking-[0.22em] font-medium font-sans">
Credits
</p>
<p class="mt-1 text-neutral-50 font-medium font-sans">
4.0
</p>
</div>
</div>
</div>
</section>
<!-- RIGHT CARD: Course Details + Instructor -->
<section
class="relative flex-1 bg-gradient-to-b from-neutral-900 to-neutral-950 rounded-3xl shadow-xl border border-neutral-800 overflow-hidden">
<div class="px-6 pt-6 pb-4 flex items-center justify-between border-b border-neutral-800/70">
<button class="inline-flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-100 transition rounded-full px-3 py-1 hover:bg-neutral-800/60 border border-transparent hover:border-neutral-700 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/70" type="button">
<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:alt-arrow-left-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M11.596 8.303L8.165 11.63a.5.5 0 0 0 0 .74l6.63 6.43c.414.401 1.205.158 1.205-.37v-5.723z" class=""></path><path fill="currentColor" d="M16 11.293V5.57c0-.528-.791-.771-1.205-.37l-2.482 2.406z" opacity=".5" class=""></path></svg>
<span class="tracking-tight font-sans">Catalog</span>
</button>
<button class="h-9 w-9 rounded-full flex items-center justify-center border border-neutral-800 text-neutral-400 hover:text-neutral-100 hover:bg-neutral-800 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/70" type="button">
<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:star-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z" class=""></path><path fill="currentColor" d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408" opacity=".5" class=""></path></svg>
</button>
</div>
<div class="px-6 pb-6 space-y-6">
<div class="mt-4 space-y-1">
<p class="text-xs font-medium text-emerald-400 uppercase tracking-[0.2em] font-sans">
Course Overview
</p>
<h2 class="text-2xl text-neutral-50 font-sans tracking-tight">
Explorations in Linear Models & Geometry
</h2>
</div>
<div class="grid grid-cols-3 gap-4 text-sm border-y border-neutral-800/70 pt-4 pb-4">
<div class="space-y-1">
<p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
Term
</p>
<p class="text-neutral-50 font-medium font-sans">
3 months
</p>
</div>
<div class="space-y-1">
<p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
Credits
</p>
<p class="text-neutral-50 font-medium font-sans">
4.0
</p>
</div>
<div class="space-y-1">
<p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
Exam
</p>
<p class="text-neutral-50 font-medium font-sans">
Mid-term, Final
</p>
</div>
</div>
<p class="text-sm leading-relaxed text-neutral-300 font-sans">
This course builds an intuitive bridge between geometry and
statistical modeling. You'll learn how linear structures power
dimensionality reduction, prediction, and optimization in modern
data workflows, with emphasis on practical tooling.
</p>
<div class="space-y-3 border-t border-neutral-800/70 pt-4">
<p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.22em] font-sans">
Course Schedule
</p>
<div class="space-y-2 text-sm">
<div class="flex items-center justify-between gap-3 pb-2 border-b border-neutral-800/70">
<div class="">
<p class="text-[11px] text-neutral-500 uppercase tracking-[0.2em] font-sans">
Lesson 01
</p>
<p class="text-neutral-50 font-medium tracking-tight font-sans">
Vectors & Notation for Data
</p>
</div>
<p class="text-xs text-neutral-400 font-sans">
Feb 22 · 19:30
</p>
</div>
<div class="flex items-center justify-between gap-3 pb-2 border-b border-neutral-800/70">
<div class="">
<p class="text-[11px] text-neutral-500 uppercase tracking-[0.2em] font-sans">
Lesson 02
</p>
<p class="text-neutral-50 font-medium tracking-tight font-sans">
Linear Operators in Practice
</p>
</div>
<p class="text-xs text-neutral-400 font-sans">
Feb 28 · 19:30
</p>
</div>
<div class="flex items-center justify-between gap-3">
<div class="">
<p class="text-[11px] text-neutral-500 uppercase tracking-[0.2em] font-sans">
Lesson 03
</p>
<p class="text-neutral-50 font-medium tracking-tight font-sans">
Projection & Dimensionality
</p>
</div>
<p class="text-xs text-neutral-400 font-sans">
Mar 5 · 19:30
</p>
</div>
</div>
</div>
</div>
</section>
<!-- FLOATING PROJECT TRACKS CARD -->
<div class="hidden md:block -translate-x-12 absolute bottom-0 left-0 translate-y-[60%]">
<div
class="bg-neutral-900/95 w-80 border-neutral-800 border rounded-2xl pt-4 pr-4 pb-4 pl-4 shadow-2xl backdrop-blur space-y-3">
<p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.2em] font-sans">
Project Tracks
</p>
<div class="space-y-3 border-y border-neutral-800/70 py-3">
<div class="flex items-start justify-between gap-3">
<div class="space-y-1">
<p class="text-sm font-medium text-neutral-50 tracking-tight font-sans">
Predictive Forecasting Lab
</p>
<p class="text-xs text-neutral-400 font-sans">
Progress: 30%
</p>
</div>
<button class="h-8 w-8 flex items-center justify-center rounded-full bg-neutral-900 border border-neutral-800 text-neutral-300 hover:bg-neutral-800 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(212, 212, 212); width: 16px; height: 16px;" class="iconify iconify--solar w-[16px] h-[16px]" aria-hidden="true" role="img" data-icon="solar:phone-calling-rounded-bold-duotone" data-solar="stars-line-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#d4d4d4" d="M12.55 3.44c-.432-.931-.648-1.396-1.029-1.435s-.674.373-1.262 1.198l-.152.214c-.166.234-.25.351-.37.422c-.12.07-.263.087-.55.119l-.26.03c-1.01.112-1.514.168-1.664.52c-.15.351.154.765.761 1.592l.158.214c.172.235.258.352.29.49s.004.28-.05.564l-.05.259c-.192 1-.288 1.5 0 1.757c.289.256.77.099 1.733-.215l.249-.081c.274-.09.41-.134.55-.12s.266.086.519.23l.23.13c.89.506 1.335.759 1.663.566s.322-.704.31-1.725l-.004-.264c-.003-.29-.005-.436.05-.564c.055-.129.16-.227.371-.422l.192-.178c.742-.688 1.113-1.032 1.027-1.408c-.085-.375-.57-.534-1.54-.851L13.47 4.4c-.276-.09-.414-.135-.52-.23c-.105-.093-.166-.225-.289-.49z" class=""></path><path fill="#d4d4d4" fill-rule="evenodd" d="M11.205 11.279a.75.75 0 0 1 .515.927c-.366 1.283-.454 3.144-.396 5.008a41 41 0 0 0 .417 4.672a.75.75 0 0 1-1.483.228c-.17-1.11-.374-2.94-.433-4.853c-.059-1.894.02-3.95.453-5.467a.75.75 0 0 1 .927-.515m11.442-2.157a.75.75 0 0 1-.27 1.026C16.667 13.48 15.25 18.859 15.25 22a.75.75 0 0 1-1.5 0c0-3.525 1.583-9.48 7.872-13.148a.75.75 0 0 1 1.025.27" clip-rule="evenodd" opacity=".5" class=""></path><path fill="#d4d4d4" d="M5.133 13.765c-.023-.108.149-.207.23-.133c.238.213.56.457.86.537s.699.03 1.011-.036c.108-.023.207.149.133.23c-.213.238-.456.56-.537.86c-.08.299-.03.698.036 1.011c.023.108-.149.207-.23.133c-.238-.213-.56-.456-.859-.537c-.3-.08-.7-.03-1.012.036c-.108.023-.207-.149-.133-.23c.213-.238.457-.56.537-.859c.08-.3.03-.7-.036-1.012" class=""></path></svg>
</button>
</div>
<div class="flex items-start justify-between gap-3">
<div class="space-y-1">
<p class="text-sm font-medium text-neutral-50 tracking-tight font-sans">
Dimensionality Insights Task
</p>
<p class="text-xs text-neutral-400 font-sans">
Progress: 30%
</p>
</div>
<button class="h-8 w-8 flex items-center justify-center rounded-full bg-neutral-900 border border-neutral-800 text-neutral-300 hover:bg-neutral-800 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(212, 212, 212); width: 16px; height: 16px" class="iconify iconify--solar w-[16px] h-[16px]" aria-hidden="true" role="img" data-icon="solar:phone-calling-rounded-bold-duotone" data-solar="sort-horizontal-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#d4d4d4" d="M10.875 4a.75.75 0 0 0-1.272-.538l-4.125 4a.75.75 0 0 0 0 1.076l4.125 4A.75.75 0 0 0 10.875 12V8.75H18a.75.75 0 0 0 0-1.5h-7.125z" class=""></path><path fill="#d4d4d4" d="M13.125 12a.75.75 0 0 1 1.272-.538l4.125 4a.75.75 0 0 1 0 1.076l-4.125 4A.75.75 0 0 1 13.125 20v-3.25H6a.75.75 0 0 1 0-1.5h7.125z" opacity=".5" class=""></path></svg>
</button>
</div>
</div>
<p class="text-xs text-neutral-500 font-sans">
Wrap up at least one task before the workshop for deeper
discussion.
</p>
</div>
</div>
<!-- FLOATING SCHEDULE CARD -->
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 bottom-0 translate-y-[60%]">
<div
class="bg-neutral-900/95 backdrop-blur rounded-2xl border border-neutral-800 p-3 flex items-center gap-3 shadow-xl w-[320px]">
<div class="flex-1">
<p class="text-[11px] text-neutral-400 font-sans">
Wednesday, Mar 7th
</p>
<p class="text-sm font-medium text-neutral-50 tracking-tight font-sans">
14:00 – 15:30
</p>
<p class="text-[11px] text-neutral-400 font-sans">
Nebula Library · Studio C
</p>
</div>
<button class="px-3 py-1.5 rounded-full bg-neutral-100 text-neutral-900 text-[11px] font-medium hover:bg-white transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80" type="button">
Reserve seat
</button>
</div>
</div>
<!-- INSTRUCTOR OVERLAY CARD -->
<div class="hidden md:block absolute right-0 bottom-0 translate-x-8 translate-y-[40%]">
<div
class="sm:w-80 bg-neutral-900/95 w-72 border-neutral-800 border rounded-3xl pt-5 pr-5 pb-5 pl-5 shadow-2xl backdrop-blur space-y-4">
<div class="flex items-center gap-4 border-b border-neutral-800/70 pb-4">
<img class="h-16 w-16 rounded-full object-cover border border-neutral-800" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/aa213242-cfaa-4e7a-8277-f98114018a97_320w.webp" alt="Instructor portrait">
<div class="">
<p class="text-sm font-semibold tracking-tight text-neutral-50 font-sans">
Dr. Lian Rocha
</p>
<p class="text-xs text-neutral-400 font-sans">
Lead Scientist, NovaLearn Analytics Lab
</p>
</div>
</div>
<p class="text-xs text-neutral-400 font-sans">
Lian designs interactive curricula that connect rigorous linear
algebra with real data problems in biotech, climate, and product
analytics.
</p>
<div
class="flex items-center justify-between text-center text-xs text-neutral-300 border-y border-neutral-800/70 py-3">
<div class="flex-1">
<p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 font-sans">
Courses
</p>
<p class="mt-1 text-neutral-50 font-medium font-sans">
5
</p>
</div>
<div class="flex-1">
<p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 font-sans">
Projects
</p>
<p class="mt-1 text-neutral-50 font-medium font-sans">
34
</p>
</div>
<div class="flex-1">
<p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 font-sans">
Rating
</p>
<p class="mt-1 text-neutral-50 font-medium font-sans">
9.6
</p>
</div>
</div>
<button class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-full bg-neutral-100 text-neutral-900 text-sm font-medium hover:bg-white transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80" type="button">
<span class="iconify w-4 h-4" data-icon="solar:arrow-up-right-bold-duotone"></span>
<span class="font-sans">Enroll in this course</span>
</button>
</div>
</div>
</div>