Загрузка...
Широкий hero-раздел портфолио: слайдер изображений, карточка профиля с соцсетями и галерея работ. Адаптивный дизайн для сайтов креативных специалистов.
<section
class="sm:px-6 lg:px-8 lg:py-10 grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 max-w-6xl mr-auto ml-auto pt-8 pr-4 pb-8 pl-4 gap-x-6 gap-y-6">
<style id="border-gradient-shared-style">
[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}</style>
<!-- Left: main hero image -->
<div class="relative rounded-3xl bg-slate-900/70 border border-slate-800/90 overflow-hidden flex items-stretch">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a0598941-97b9-43d5-8007-56fa92437c3c_1600w.webp" alt="Portrait photography of a woman with short dark hair" class="w-full h-full object-cover">
<!-- Slider controls -->
<button class="absolute left-3 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-900/80 border border-slate-700/70 text-slate-200 hover:bg-slate-800/90 transition">
<i class="lucide lucide-chevron-left h-4 w-4"></i>
</button>
<button class="absolute right-3 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-900/80 border border-slate-700/70 text-slate-200 hover:bg-slate-800/90 transition">
<i class="lucide lucide-chevron-right h-4 w-4"></i>
</button>
<!-- Bottom-left meta -->
<div
class="absolute left-4 bottom-4 flex items-center gap-4 rounded-2xl bg-slate-950/80 border border-slate-800/80 px-4 py-3 backdrop-blur">
<div class="flex flex-col">
<span class="text-[11px] font-medium uppercase tracking-[0.14em] text-slate-400">
FEATURED SERIES
</span>
<span class="mt-1 text-xl md:text-2xl font-semibold tracking-tight text-slate-50">
Echoes in Blue Light
</span>
</div>
<div class="hidden sm:flex flex-col text-right">
<span class="text-xs text-slate-400">Frames captured</span>
<span class="text-base font-semibold tracking-tight">
2,184
</span>
</div>
</div>
</div>
<!-- Right: profile, stats & thumbnails -->
<div class="flex flex-col gap-4 lg:gap-5">
<!-- Profile card -->
<div
class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-gradient-to-br from-white/10 to-white/0 rounded-3xl pt-4 pr-5 pb-4 pl-5 backdrop-blur-xl gap-x-4 gap-y-4"
style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="flex items-center gap-4">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/483d492c-49f6-4e55-94ba-ed82fdf89abf_320w.webp" alt="Portrait of Nova Keller" class="w-12 h-12 object-cover ring-slate-700/90 ring-2 rounded-full">
<div class="">
<h1 class="text-2xl md:text-3xl font-semibold tracking-tight text-slate-50">
Nova Keller
</h1>
<p class="text-xs font-medium text-slate-400">
Visual Narrative Designer · Based in Berlin
</p>
</div>
</div>
<div class="flex flex-col sm:items-end gap-3">
<div class="flex gap-4 text-xs text-slate-300">
<div class="flex flex-col">
<span class="text-[11px] uppercase tracking-[0.16em] text-slate-500">
Projects
</span>
<span class="mt-1 font-semibold tracking-tight">47</span>
</div>
<div class="flex flex-col">
<span class="text-[11px] uppercase tracking-[0.16em] text-slate-500">
Years
</span>
<span class="mt-1 font-semibold tracking-tight">9</span>
</div>
<div class="flex flex-col">
<span class="text-[11px] uppercase tracking-[0.16em] text-slate-500">
Cities
</span>
<span class="mt-1 font-semibold tracking-tight">5</span>
</div>
</div>
<button class="inline-flex hover:bg-cyan-500/20 transition text-xs font-medium text-cyan-100 bg-cyan-500/10 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 gap-x-2 gap-y-2 items-center" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" style="color: rgb(207, 250, 254); width: 14px; height: 14px" class="lucide lucide-play h-3.5 w-3.5 w-[14px] h-[14px]" data-solar="arrow-right-down-outline" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#cffafe" fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0l10.72 10.72V9a.75.75 0 0 1 1.5 0v9a.75.75 0 0 1-.75.75H9a.75.75 0 0 1 0-1.5h7.19L5.47 6.53a.75.75 0 0 1 0-1.06" clip-rule="evenodd" class=""></path></svg>
View 2025 reel
</button>
</div>
</div>
<!-- Bio & socials -->
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
<div
class="md:col-span-3 flex flex-col gap-3 bg-gradient-to-br from-white/10 to-white/0 rounded-3xl pt-4 pr-5 pb-4 pl-5 backdrop-blur-xl gap-x-3 gap-y-3"
style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<p class="text-sm text-slate-300 leading-relaxed">
I craft cinematic portraits and minimal editorials that explore
the space between stillness and motion. Each frame is built as
a small world—quiet, intentional, and lit to echo the feeling
long after the moment fades.
</p>
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2 text-xs text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
style="color: rgb(148, 163, 184); width: 14px; height: 14px;"
class="lucide lucide-camera w-[14px] h-[14px]" data-solar="clock-circle-bold-duotone"
data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
<path fill="#94a3b8" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
opacity=".5" class=""></path>
<path fill="#94a3b8" fill-rule="evenodd"
d="M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75"
clip-rule="evenodd" class=""></path>
</svg>
<span class="">Analog & digital workflows</span>
</div>
<div class="flex items-center gap-2 text-xs text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
style="color: rgb(148, 163, 184); width: 14px; height: 14px"
class="lucide lucide-sparkles h-3.5 w-3.5 w-[14px] h-[14px]" data-solar="calendar-add-bold-duotone"
data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
<path fill="#94a3b8"
d="M6.96 2c.418 0 .756.31.756.692V4.09c.67-.012 1.422-.012 2.268-.012h4.032c.846 0 1.597 0 2.268.012V2.692c0-.382.338-.692.756-.692s.756.31.756.692V4.15c1.45.106 2.403.368 3.103 1.008c.7.641.985 1.513 1.101 2.842v1H2V8c.116-1.329.401-2.2 1.101-2.842c.7-.64 1.652-.902 3.103-1.008V2.692c0-.382.339-.692.756-.692"
class=""></path>
<path fill="#94a3b8"
d="M22 14v-2c0-.839-.013-2.335-.026-3H2.006c-.013.665 0 2.161 0 3v2c0 3.771 0 5.657 1.17 6.828C4.349 22 6.234 22 10.004 22h4c3.77 0 5.654 0 6.826-1.172S22 17.771 22 14"
opacity=".5" class=""></path>
<path fill="#94a3b8" fill-rule="evenodd"
d="M16 13.25a.75.75 0 0 1 .75.75v1.25H18a.75.75 0 0 1 0 1.5h-1.25V18a.75.75 0 0 1-1.5 0v-1.25H14a.75.75 0 0 1 0-1.5h1.25V14a.75.75 0 0 1 .75-.75"
clip-rule="evenodd" class=""></path>
</svg>
<span class="">Available for commissions Q1–Q3 · 2025</span>
</div>
</div>
</div>
<div
class="md:col-span-2 flex flex-col gap-2 bg-gradient-to-br from-white/10 to-white/0 rounded-3xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-xl gap-x-2 gap-y-2"
style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="flex flex-col gap-2 text-xs text-slate-200">
<button class="flex items-center justify-between rounded-2xl bg-slate-900/80 border border-slate-700/80 px-3 py-2 hover:bg-slate-800/80 transition">
<span class="">Instagram</span>
<span class="flex items-center gap-1 text-[11px] text-slate-400">
38.4k
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" style="width: 14px; height: 14px; color: rgb(148, 163, 184);" class="lucide lucide-arrow-up-right w-[14px] h-[14px]" data-mingcute="instagram-line" data-icon-set="mingcute" data-icon-replaced="true" stroke-width="2"><g fill="none" fill-rule="evenodd" class=""><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" class=""></path><path fill="#94a3b8" d="M16 3a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8a5 5 0 0 1 5-5zm0 2H8a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3m-4 3a4 4 0 1 1 0 8a4 4 0 0 1 0-8m0 2a2 2 0 1 0 0 4a2 2 0 0 0 0-4m4.5-3.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2" class=""></path></g></svg>
</span>
</button>
<button class="flex items-center justify-between rounded-2xl bg-slate-900/60 border border-slate-800/80 px-3 py-2 hover:bg-slate-800/80 transition">
<span class="">Dribbble</span>
<span class="flex items-center gap-1 text-[11px] text-slate-400">
12.1k
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" style="color: rgb(148, 163, 184); width: 14px; height: 14px;" class="lucide lucide-arrow-up-right w-[14px] h-[14px]" data-mingcute="dribbble-line" data-icon-set="mingcute" data-icon-replaced="true" stroke-width="2"><g fill="none" fill-rule="evenodd" class=""><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" class=""></path><path fill="#94a3b8" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m1.617 11.984A12.02 12.02 0 0 0 7.28 18.46A7.96 7.96 0 0 0 12 20a8 8 0 0 0 3.028-.593a33 33 0 0 0-1.411-5.424Zm1.978-.403c.532 1.543.96 3.135 1.274 4.768a8 8 0 0 0 2.922-4.523a12.1 12.1 0 0 0-4.196-.245m-3.244-2.669a19.1 19.1 0 0 1-8.35.984L4 12c0 1.927.682 3.695 1.817 5.076a14.02 14.02 0 0 1 7.072-4.963a33 33 0 0 0-.538-1.2Zm6.137-3.593a19 19 0 0 1-4.288 2.825q.351.75.668 1.517c1.7-.26 3.45-.206 5.13.161a7.96 7.96 0 0 0-1.51-4.503M8.574 4.77a8.02 8.02 0 0 0-4.298 5.145a17.1 17.1 0 0 0 7.157-.8A33 33 0 0 0 8.574 4.77M12 4q-.721 0-1.405.123a35 35 0 0 1 2.703 4.235a17 17 0 0 0 3.826-2.502A7.97 7.97 0 0 0 12 4" class=""></path></g></svg>
</span>
</button>
<button class="flex items-center justify-between rounded-2xl bg-slate-900/60 border border-slate-800/80 px-3 py-2 hover:bg-slate-800/80 transition">
<span class="">Behance</span>
<span class="flex items-center gap-1 text-[11px] text-slate-400">
24.7k
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" style="color: rgb(148, 163, 184); width: 14px; height: 14px" class="lucide lucide-arrow-up-right h-3.5 w-3.5 w-[14px] h-[14px]" data-mingcute="behance-line" data-icon-set="mingcute" data-icon-replaced="true" stroke-width="2"><g fill="none" fill-rule="evenodd" class=""><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z" class=""></path><path fill="#94a3b8" d="M8 5a4 4 0 0 1 2.646 7A4 4 0 0 1 8 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm9.5 4c2.607 0 4.5 2.368 4.5 5a1 1 0 0 1-.883.993L21 15h-5.86c.358 1.224 1.353 2 2.36 2c1.08 0 1.692-.511 2.24-1.15a1 1 0 1 1 1.52 1.3l-.107.122l-.229.246C20.202 18.26 19.146 19 17.5 19c-2.607 0-4.5-2.368-4.5-5s1.893-5 4.5-5M8 13H4v4h4a2 2 0 0 0 .15-3.995zm9.5-2c-1.007 0-2.002.776-2.36 2h4.72c-.358-1.224-1.353-2-2.36-2M8 7H4v4h4a2 2 0 1 0 0-4m11-1a1 1 0 1 1 0 2h-3a1 1 0 1 1 0-2z" class=""></path></g></svg>
</span>
</button>
</div>
<button class="inline-flex hover:bg-slate-200 transition text-xs font-medium text-slate-950 bg-gradient-to-br from-white/80 to-white/40 rounded-2xl mt-2 pt-2 pr-3 pb-2 pl-3 items-center justify-between">
<span class="">Book a project call</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="width: 16px; height: 16px; color: rgb(2, 6, 23);" class="lucide lucide-mail w-[16px] h-[16px]" data-solar="arrow-right-up-outline" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#020617" fill-rule="evenodd" d="M9 6.75a.75.75 0 0 1 0-1.5h9a.75.75 0 0 1 .75.75v9a.75.75 0 0 1-1.5 0V7.81L6.53 18.53a.75.75 0 0 1-1.06-1.06L16.19 6.75z" clip-rule="evenodd" class=""></path></svg>
</button>
</div>
</div>
<!-- Latest work thumbnails -->
<div
class="flex flex-col bg-gradient-to-br from-white/10 to-white/0 rounded-3xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-xl gap-x-3 gap-y-3"
style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-xs font-medium uppercase tracking-[0.18em] text-slate-500">
Latest work
</span>
<i class="lucide lucide-arrow-down h-3.5 w-3.5 text-slate-500"></i>
</div>
<button class="text-[11px] font-medium text-slate-300 hover:text-slate-100 underline underline-offset-4 decoration-slate-600/80">
View archive
</button>
</div>
<div class="grid grid-cols-2 gap-3">
<!-- Card 1 -->
<article class="group rounded-2xl bg-slate-900/80 overflow-hidden border border-slate-800/90 flex flex-col">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a59cc4df-4519-45ac-a6d8-de00a626a02e_800w.webp" alt="Muted beige fashion portrait" class="transition duration-500 group-hover:scale-[1.03] w-full h-36 object-cover">
<span class="absolute left-3 top-3 rounded-full bg-slate-950/80 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.18em] text-slate-200">
Beige Silence
</span>
</div>
<div class="px-3.5 py-2.5 flex items-center justify-between">
<p class="text-[11px] text-slate-400">
Studio editorial · 18 shots
</p>
<i class="lucide lucide-arrow-right h-3.5 w-3.5 text-slate-500"></i>
</div>
</article>
<!-- Card 2 -->
<article class="group rounded-2xl bg-slate-900/80 overflow-hidden border border-slate-800/90 flex flex-col">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Dark-toned portrait with earring" class="h-36 w-full object-cover transition duration-500 group-hover:scale-[1.03]">
<span class="absolute left-3 top-3 rounded-full bg-slate-950/80 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.18em] text-slate-200">
Night Signal
</span>
</div>
<div class="px-3.5 py-2.5 flex items-center justify-between">
<p class="text-[11px] text-slate-400">
Ambient portrait · 23 shots
</p>
<i class="lucide lucide-arrow-right h-3.5 w-3.5 text-slate-500"></i>
</div>
</article>
</div>
</div>
</div>
</section>