HTML Source Code
<header class= 'bg-stone-900 text-stone-100'>
<nav class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16'>
<div class='flex items-center space-x-3'>
<span class='inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-stone-900 font-bold'>BT</span>
<span class='font-semibold text-xl tracking-tight'>Bean There</span>
</div>
<ul class='hidden md:flex space-x-6'>
<li><a href='#home' class='hover:text-amber-300'>Home</a></li>
<li><a href='#features' class='hover:text-amber-300'>Menu</a></li>
<li><a href='#locations' class='hover:text-amber-300'>Locations</a></li>
<li><a href='#testimonials' class='hover:text-amber-300'>Stories</a></li>
</ul>
<button aria-label='Open Menu' class='md:hidden text-amber-200'>Menu</button>
</nav>
</header>
<main id='home'>
<section id='hero' class='relative bg-gradient-to-br from-amber-900 via-orange-900 to-rose-900 text-white'>
<div class='absolute inset-0 bg-gradient-to-br from-amber-800 via-orange-800 to-rose-800 mix-blend-multiply opacity-40' aria-hidden='true'></div>
<div class='relative max-w-7xl mx-auto px-6 py-28'>
<h1 class='text-4xl md:text-6xl font-extrabold tracking-tight'>Bean There</h1>
<p class='mt-4 text-lg md:text-2xl text-amber-100'>A cozy coffee haven serving small-batch roasts, hand-crafted drinks, and warm conversations.</p>
<div class='mt-8 flex gap-4'>
<a href='#order' class='inline-flex items-center px-6 py-3 bg-amber-600 rounded-md font-semibold hover:bg-amber-500'>Order Online</a>
<a href='#menu' class='inline-flex items-center px-6 py-3 bg-transparent border border-amber-200 hover:bg-amber-50 text-amber-50 rounded-md font-semibold'>View Menu</a>
</div>
</div>
</section>
<section id='features' class='py-16 bg-stone-50'>
<div class='max-w-7xl mx-auto px-6'>
<h2 class='text-3xl font-extrabold text-stone-900'>What makes Bean There special</h2>
<p class='mt-2 text-stone-600'>From our roasts to our spaces, every detail is crafted with care.</p>
<div class='mt-10 grid grid-cols-1 md:grid-cols-3 gap-8'>
<article class='p-6 bg-white rounded-xl shadow-md hover:shadow-lg'>
<div class='flex items-center justify-center h-12 w-12 rounded-full bg-amber-100 text-amber-700 mb-4'>☕</div>
<h3 class='text-xl font-semibold mb-2'>Small-Batch Roasts</h3>
<p class='text-stone-600'>Each roast is small-batch and carefully cupped to ensure a balanced cup every time.</p>
</article>
<article class='p-6 bg-white rounded-xl shadow-md hover:shadow-lg'>
<div class='flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 text-indigo-700 mb-4'>☕</div>
<h3 class='text-xl font-semibold mb-2'>Cozy Work & Meetups</h3>
<p class='text-stone-600'>A warm, quiet corner with reliable Wi‑Fi and outlets for work or study.</p>
</article>
<article class='p-6 bg-white rounded-xl shadow-md hover:shadow-lg'>
<div class='flex items-center justify-center h-12 w-12 rounded-full bg-emerald-100 text-emerald-700 mb-4'>☕</div>
<h3 class='text-xl font-semibold mb-2'>Sustainable Sourcing</h3>
<p class='text-stone-600'>We work directly with farmers to bring fair-trade beans from ethical roasters.</p>
</article>
</div>
</div>
</section>
<section id='testimonials' class='py-16'>
<div class='max-w-7xl mx-auto px-6'>
<h2 class='text-3xl font-extrabold text-stone-900 mb-6'>What guests are saying</h2>
<div class='grid grid-cols-1 md:grid-cols-3 gap-6'>
<blockquote class='p-6 bg-white rounded-xl shadow'>
<p class='text-stone-700'>“The aroma alone brings me back every week. Bean There has become my office away from home.”</p>
<footer class='mt-3 text-sm text-stone-500'>— Mia R., Downtown</footer>
</blockquote>
<blockquote class='p-6 bg-white rounded-xl shadow'>
<p class='text-stone-700'>“Their espresso is smooth, and the pastries feel like a hug in a pastry. Friendly staff too.”</p>
<footer class='mt-3 text-sm text-stone-500'>— Owen K., Riverfront</footer>
</blockquote>
<blockquote class='p-6 bg-white rounded-xl shadow'>
<p class='text-stone-700'>“A go-to morning spot. The seating is comfy and the brew is consistently excellent.”</p>
<footer class='mt-3 text-sm text-stone-500'>— Priya S., East Side</footer>
</blockquote>
</div>
</div>
</section>
<section id='order' class='py-16 bg-amber-50'>
<div class='max-w-7xl mx-auto px-6 text-center'>
<h2 class='text-3xl font-extrabold text-stone-800'>Ready for your next cup?</h2>
<p class='mt-2 text-stone-600'>Order ahead, pick up in-store, or try our seasonal pour-overs today.</p>
<div class='mt-6 flex flex-col sm:flex-row items-center justify-center gap-4'>
<a href='#menu' class='px-6 py-3 bg-amber-600 text-white rounded-md font-semibold'>View Menu</a>
<a href='#locations' class='px-6 py-3 bg-stone-900 text-white rounded-md font-semibold'>Find a Location</a>
</div>
</div>
</section>
<section id='locations' class='py-16 bg-stone-50'>
<div class='max-w-7xl mx-auto px-6'>
<h2 class='text-3xl font-extrabold text-stone-900 mb-4'>Our Locations</h2>
<p class='text-stone-600 mb-6'>Visit us at the corner of Oak and 5th, or check nearby spots on the map below.</p>
<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
<div class='p-6 bg-white rounded-xl shadow'>
<h3 class='text-xl font-semibold'>Oak & 5th</h3>
<p class='text-stone-600'>Mon–Fri: 7am–6pm • Sat–Sun: 8am–4pm</p>
<p class='mt-2 text-sm text-emerald-600'>Coffee with a smile since 2014</p>
</div>
<div class='p-6 bg-white rounded-xl shadow'>
<h3 class='text-xl font-semibold'>Riverside Plaza</h3>
<p class='text-stone-600'>Mon–Sun: 6am–7pm</p>
<p class='mt-2 text-sm text-emerald-600'>Outdoor seating available</p>
</div>
<div class='p-6 bg-white rounded-xl shadow'>
<h3 class='text-xl font-semibold'>Market Street</h3>
<p class='text-stone-600'>Mon–Fri: 7am–5pm</p>
<p class='mt-2 text-sm text-emerald-600'>Weekend specials and new blends</p>
</div>
</div>
</div>
</section>
</main>
<footer class='bg-stone-900 text-stone-100'>
<div class='max-w-7xl mx-auto px-6 py-10 grid grid-cols-1 md:grid-cols-4 gap-8'>
<div>
<h4 class='font-semibold text-xl mb-2'>Bean There</h4>
<p class='text-stone-400 text-sm'>Bringing a warm cup and a warm welcome to every neighborhood.</p>
</div>
<div>
<h5 class='font-semibold mb-2'>Hours</h5>
<ul class='text-stone-400 text-sm space-y-1'>
<li>Mon–Fri: 7am–7pm</li>
<li>Sat–Sun: 8am–6pm</li>
</ul>
</div>
<div>
<h5 class='font-semibold mb-2'>Connect</h5>
<div class='flex space-x-4'>
<a href='#' aria-label='Instagram' class='text-stone-400 hover:text-amber-400'>IG</a>
<a href='#' aria-label='Facebook' class='text-stone-400 hover:text-amber-400'>FB</a>
<a href='#' aria-label='Twitter' class='text-stone-400 hover:text-amber-400'>X</a>
</div>
</div>
<form aria-label='Newsletter' class='sm:col-span-2'>
<label class='block text-sm font-semibold mb-1'>Newsletter</label>
<div class='flex'>
<input type='email' placeholder='Email address' class='w-full px-3 py-2 rounded-l-md border border-stone-300 focus:outline-none' />
<button type='submit' class='px-4 py-2 bg-amber-600 text-white rounded-r-md hover:bg-amber-500'>Join</button>
</div>
</form>
</div>
</footer>