All Prompts
All Prompts
hero sectionlanding pagerestauranttailwindresponsivenav barchef gridcta buttons
Restaurant Hero Section with Chef Grid Showcase
Адаптивная секция Hero для сайта ресторана: лого, заголовок, кнопки CTA, карточки шефов. Tailwind CSS. Идеально для фуд-сервиса.
Prompt
<section class="relative w-full sm:px-6 md:px-10 max-w-7xl mt-12 mr-auto mb-12 ml-auto pr-4 pl-4">
<div class="relative -mt-2 w-full shadow-[0_30px_80px_-30px_rgba(0,0,0,0.25)] bg-white/90 border-neutral-200/70 rounded-[40px] border-t backdrop-blur-xl">
<div class="sm:px-6 md:px-10 pt-8 pr-4 pb-10 pl-4">
<!-- Meta row -->
<header class="w-full">
<header class="flex gap-4 w-full mb-8 items-center justify-between">
<div class="flex items-center gap-3">
<span class="text-lg font-semibold text-black tracking-tight font-playfair">NONNA'S TABLE</span>
</div>
<nav class="hidden md:flex items-center gap-6 text-sm text-neutral-700">
<a href="#menu" class="hover:text-black transition-colors font-medium">Menu</a>
<a href="#story" class="hover:text-black transition-colors font-medium">Our Story</a>
<a href="#events" class="hover:text-black transition-colors font-medium">Events</a>
<a href="#contact" class="hover:text-black transition-colors font-medium">Contact</a>
</nav>
<div class="flex items-center gap-3">
<button class="md:hidden inline-flex items-center justify-center h-10 w-10 rounded-lg ring-1 ring-black/20 bg-black text-white hover:bg-neutral-800 transition-colors">
<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="menu" class="lucide lucide-menu w-5 h-5" style="stroke-width: 1.5"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
</button>
<button class="group inline-flex gap-3 shadow-stone-800/20 ring-1 ring-red-800/10 transition duration-150 ease-out hover:-translate-y-0.5 text-base font-medium text-white bg-gradient-to-l from-gray-900 to-black rounded-full pt-3 pr-6 pb-3 pl-6 shadow-lg items-center justify-center">Sign In</button>
</div>
</header>
</header>
<!-- Headline -->
<h1 class="max-w-3xl sm:text-5xl md:text-6xl lg:text-8xl leading-[1.05] text-4xl font-normal text-neutral-900 tracking-tighter font-playfair">
Benvenuti a<img alt="Fresh pasta" class="inline-block align-middle h-10 w-10 sm:h-12 sm:w-12 md:h-16 md:w-24 ring-1 ring-neutral-200 object-cover rounded-xl mr-2 ml-2" src="https://cdn.midjourney.com/1c83599c-faac-4943-9b6a-47e13b6df277/0_0.png?w=800&q=80" style=""> Nonna's Table,<img alt="Italian chef" class="inline-block align-middle h-10 w-12 sm:h-12 sm:w-16 md:h-16 md:w-24 ring-1 ring-neutral-200 object-cover rounded-xl mr-2 ml-2" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b59bad79-703a-4c05-8ed2-fafcc49a7b51_320w.jpg" style=""> where tradition meets taste
</h1>
<!-- Subcopy -->
<p class="sm:text-lg max-w-[85ch] text-base text-neutral-600 mt-4">
Four generations of authentic Italian recipes, served with passion in an atmosphere that feels like home. From handmade pasta to wood-fired pizzas, every dish tells a story.
</p>
<!-- Feature badges -->
<div class="mt-6 flex flex-wrap gap-2.5">
<span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-slate-950 bg-neutral-200 rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
<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="leaf" class="lucide lucide-leaf w-[14px] h-[14px] text-slate-950" style="stroke-width: 1.5; width: 14px; height: 14px;" data-icon-replaced="true"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" class=""></path><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" class=""></path></svg>
Fresh Daily
</span>
<span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-slate-950 bg-neutral-200 rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
<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="flame" class="lucide lucide-flame w-[14px] h-[14px] text-slate-950" style="stroke-width: 1.5; width: 14px; height: 14px;" data-icon-replaced="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" class=""></path></svg>
Wood-fired Oven
</span>
<span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-slate-950 bg-neutral-200 rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
<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="award" class="lucide lucide-award w-[14px] h-[14px] text-slate-950" style="stroke-width: 1.5; width: 14px; height: 14px;" data-icon-replaced="true"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" class=""></path><circle cx="12" cy="8" r="6" class=""></circle></svg>
Award-winning
</span>
<span class="inline-flex items-center gap-2 ring-1 ring-neutral-200 text-xs text-slate-950 bg-neutral-200 rounded-full pt-1.5 pr-3 pb-1.5 pl-3">
<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="heart" class="lucide lucide-heart w-[14px] h-[14px] text-slate-950" style="stroke-width: 1.5; width: 14px; height: 14px;" data-icon-replaced="true"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
Family recipes
</span>
</div>
<!-- CTAs -->
<div class="mt-8 flex flex-col sm:flex-row gap-3 sm:gap-4">
<a href="#contact" class="group inline-flex items-center justify-center gap-3 shadow-stone-800/20 ring-1 ring-red-800/10 transition duration-150 ease-out hover:-translate-y-0.5 text-base font-medium text-white bg-gradient-to-l from-gray-900 to-black rounded-full pt-3 pr-6 pb-3 pl-6 shadow-lg">
Book a table
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/15 ring-1 ring-white/25">
<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" class="lucide lucide-arrow-up-right w-4 h-4" style="stroke-width: 1.5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
</span>
</a>
<a href="#menu" class="inline-flex items-center justify-center text-base font-medium text-neutral-800 bg-neutral-100/60 border border-neutral-200 rounded-full px-6 py-3 hover:bg-neutral-100">
View menu
</a>
</div>
<!-- Footer bar in badge -->
<section class="sm:p-8 bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6" style="position: relative; overflow: hidden;">
<!-- Background dividers -->
<div class="absolute inset-0 opacity-10 pointer-events-none">
<div class="absolute top-1/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-zinc-600 to-transparent"></div>
<div class="absolute top-3/4 left-0 right-0 h-px bg-gradient-to-r from-transparent via-zinc-600 to-transparent"></div>
<div class="absolute top-0 bottom-0 left-1/3 w-px bg-gradient-to-b from-transparent via-zinc-600 to-transparent"></div>
<div class="absolute top-0 bottom-0 right-1/3 w-px bg-gradient-to-b from-transparent via-zinc-600 to-transparent"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 items-start relative z-10">
<!-- Left: Heading + copy -->
<div class="flex flex-col justify-between min-h-full">
<div class="">
<span class="text-sm font-normal text-zinc-500">Traditional Italian Experience</span>
<h2 class="text-[44px] sm:text-6xl lg:text-7xl leading-[0.9] text-zinc-100 mt-2 font-medium tracking-tighter font-playfair">Meet our culinary family.</h2>
<!-- subtle plus markers with divider -->
<div class="mt-8 relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full h-px bg-gradient-to-r from-zinc-800 via-zinc-700 to-zinc-800"></div>
</div>
<div class="hidden sm:grid grid-cols-3 gap-6 text-zinc-600 bg-zinc-900 px-4 relative">
<div class="flex items-center gap-2">
<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="plus" class="lucide lucide-plus h-4 w-4" style="stroke-width: 1.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
<span class="text-sm font-normal">Authentic Recipes</span>
</div>
<div class="flex items-center gap-2">
<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="plus" class="lucide lucide-plus h-4 w-4" style="stroke-width: 1.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
<span class="text-sm font-normal">Fresh Ingredients</span>
</div>
<div class="flex items-center gap-2">
<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="plus" class="lucide lucide-plus h-4 w-4" style="stroke-width: 1.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
<span class="text-sm font-normal">Warm Hospitality</span>
</div>
</div>
</div>
</div>
<div class="mt-10 grid grid-cols-1 sm:grid-cols-2 gap-8">
<div class="">
<p class="text-sm text-zinc-100 font-medium tracking-tight">A legacy of flavor</p>
<p class="mt-1 text-sm text-zinc-400">From our famiglia to yours, experience the passion and tradition that has been passed down through generations.</p>
<button class="mt-4 inline-flex items-center gap-2 h-10 px-4 rounded-full bg-zinc-100 text-zinc-900 text-sm font-normal hover:bg-zinc-200 transition">
Our Story
<span class="inline-flex h-2 w-2 rounded-full bg-zinc-900"></span>
</button>
</div>
<!-- Vertical divider -->
<div class="relative">
<div class="absolute left-0 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-zinc-700 to-transparent sm:block hidden"></div>
<p class="text-base text-zinc-300 leading-relaxed sm:text-right sm:pl-8">
Our master chefs bring <span class="font-medium text-zinc-100">decades of culinary expertise</span>
from the heart of Italy to create unforgettable dining experiences.
</p>
</div>
</div>
</div>
<!-- Right: Chef grid -->
<div class="grid grid-cols-2 gap-4 relative">
<!-- Chef 1 -->
<article class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
<div class="absolute inset-0 bg-cover hover:scale-105 transition-transform duration-500 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/76c3bb17-90f7-4f44-ba0f-faa4e1101e83_800w.jpg)] bg-center" style=""></div>
<div class="absolute top-3 left-3">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
<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="chef-hat" class="lucide lucide-chef-hat h-3.5 w-3.5" style="stroke-width: 1.5"><path d="M17 21a1 1 0 0 0 1-1v-5.35c0-.457.316-.844.727-1.041a4 4 0 0 0-2.134-7.589 5 5 0 0 0-9.186 0 4 4 0 0 0-2.134 7.588c.411.198.727.585.727 1.041V20a1 1 0 0 0 1 1Z" class=""></path><path d="M6 17h12" class=""></path></svg>
</span>
</div>
<div class="absolute top-3 right-3">
<span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800">Head Chef</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-lg font-medium tracking-tight leading-tight">Marco Romano</p>
</div>
</article>
<!-- Chef 2 -->
<article class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
<div class="absolute inset-0 bg-cover hover:scale-105 transition-transform duration-500 bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/41c1c6ee-fb69-4705-8aeb-9c1dbc61edcb_800w.jpg)]" style=""></div>
<div class="absolute top-3 left-3">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
<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="utensils" class="lucide lucide-utensils h-3.5 w-3.5" style="stroke-width: 1.5"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2" class=""></path><path d="M7 2v20" class=""></path><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7" class=""></path></svg>
</span>
</div>
<div class="absolute top-3 right-3">
<span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800">Sous Chef</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-lg font-medium tracking-tight leading-tight">Sofia Benedetti</p>
</div>
</article>
<!-- Chef 3 -->
<article class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
<div class="absolute inset-0 bg-cover hover:scale-105 transition-transform duration-500 bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/926d10d3-af41-47fe-a429-15ad531c8cad_800w.jpg)]" style=""></div>
<div class="absolute top-3 left-3">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
<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="wheat" class="lucide lucide-wheat h-3.5 w-3.5" style="stroke-width: 1.5"><path d="M2 22 16 8" class=""></path><path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" class=""></path><path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" class=""></path><path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" class=""></path><path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" class=""></path><path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" class=""></path><path d="M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" class=""></path><path d="M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" class=""></path></svg>
</span>
</div>
<div class="absolute top-3 right-3">
<span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800">Pasta Master</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-lg font-medium tracking-tight leading-tight">Giuseppe Ricci</p>
</div>
</article>
<!-- Chef 4 -->
<article class="relative overflow-hidden h-[200px] bg-gradient-to-br from-zinc-800 to-zinc-900 border border-zinc-800 rounded-2xl">
<div class="absolute inset-0 bg-cover hover:scale-105 transition-transform duration-500 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e90be3ec-52f2-4920-af4b-31f337ab931b_800w.jpg)] bg-center" style=""></div>
<div class="absolute top-3 left-3">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-zinc-100/90 text-zinc-900 border border-zinc-700">
<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="pizza" class="lucide lucide-pizza h-3.5 w-3.5" style="stroke-width: 1.5"><path d="m12 14-1 1" class=""></path><path d="m13.75 18.25-1.25 1.42" class=""></path><path d="M17.775 5.654a15.68 15.68 0 0 0-12.121 12.12" class=""></path><path d="M18.8 9.3a1 1 0 0 0 2.1 7.7" class=""></path><path d="M21.964 20.732a1 1 0 0 1-1.232 1.232l-18-5a1 1 0 0 1-.695-1.232A19.68 19.68 0 0 1 15.732 2.037a1 1 0 0 1 1.232.695z" class=""></path></svg>
</span>
</div>
<div class="absolute top-3 right-3">
<span class="px-2 py-1 rounded-md bg-zinc-900/60 backdrop-blur text-[11px] text-zinc-300 font-normal border border-zinc-800">Pizza Chef</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-lg font-medium tracking-tight leading-tight">Antonio Rossi</p>
</div>
</article>
</div>
</div>
</section>
</div>
</div>
</section>