bryanmubarak-joint/entrance.html
2026-07-19 20:46:46 +00:00

228 lines
8.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Entrance | The First Table</title>
<meta property="og:type" content="website">
<meta property="og:title" content="The Entrance | The First Table">
<meta property="og:description" content="They say you only get one chance to make a first impression. In this business, that">
<meta property="og:image" content="https://images.pexels.com/photos/17206102/pexels-photo-17206102.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940">
<meta property="og:url" content="https://bryan-mubarak.4ort.net/entrance.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content="They say you only get one chance to make a first impression. In this business, that's an understatement. The moment a guest steps through that door, the…">
<style>
:root {
--bg: #0a0a0a;
--text: #e0e0e0;
--accent: #c9a227;
--card-bg: #1a1a1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
padding: 2rem;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 4rem;
padding: 2rem 0;
}
h1 {
font-size: 3.5rem;
font-weight: 300;
letter-spacing: -1px;
margin-bottom: 1rem;
background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.back-link {
display: inline-block;
color: var(--accent);
text-decoration: none;
font-size: 1.1rem;
margin-bottom: 2rem;
transition: color 0.3s ease;
}
.back-link:hover {
color: #fff;
}
.content {
background: var(--card-bg);
padding: 3rem;
border-radius: 12px;
border: 1px solid #333;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.content h2 {
font-size: 2.2rem;
color: var(--accent);
margin-bottom: 1.5rem;
}
.content p {
font-size: 1.2rem;
line-height: 1.9;
margin-bottom: 1.5rem;
opacity: 0.95;
}
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.gallery-item {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.03);
}
.gallery-item img {
width: 100%;
height: 400px;
object-fit: cover;
}
.gallery-caption {
padding: 1.5rem;
background: #2a2a2a;
font-size: 1rem;
font-style: italic;
}
.philosophy {
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
padding: 2.5rem;
border-radius: 8px;
border-left: 4px solid var(--accent);
margin: 3rem 0;
}
.philosophy blockquote {
font-size: 1.4rem;
font-style: italic;
line-height: 1.7;
margin-bottom: 1rem;
}
.philosophy cite {
font-size: 1rem;
opacity: 0.8;
}
.next-station {
text-align: center;
margin: 4rem 0;
padding: 2rem;
background: linear-gradient(135deg, var(--accent) 0%, #f4d03f 100%);
color: #0a0a0a;
border-radius: 12px;
}
.next-station h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.next-station button {
background: #0a0a0a;
color: #fff;
padding: 1rem 2.5rem;
font-size: 1.1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.next-station button:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div class="container">
<a href="index.html" class="back-link">← Back to The First Table</a>
<header>
<h1>The Entrance</h1>
<p style="font-size: 1.3rem; font-style: italic; opacity: 0.9;">Where the experience begins</p>
</header>
<div class="content">
<h2>First Impressions Are Everything</h2>
<p>They say you only get one chance to make a first impression. In this business, that's an understatement. The moment a guest steps through that door, the game begins. Every gesture, every glance, every word is a move on the board.</p>
<p>I remember my first night as a host. I was 19, terrified, and completely out of my depth. The restaurant was packed, the phone was ringing off the hook, and I had to learn to read a room before I could read a menu. That's when I realized: the entrance isn't just a doorway. It's a threshold. A portal between the chaos of the street and the sanctuary of the dining room.</p>
<p>Arthur Danto once said, "The artworld is a world of theory." I say the dining room is a world of *tension*. The host stand is your gallery opening. You're not just seating guests; you're curating an experience. Every table placement is a composition, every reservation a promise.</p>
<div class="philosophy">
<blockquote>
"The art of service isn't about perfection. It's about the tension between chaos and calm. Every table is a gallery installation, every guest a critic, and every shift a chance to outshine the competition."
</blockquote>
<cite>— Bryan Mubarak</cite>
</div>
<h2>The Competition</h2>
<p>Every restaurant in town is fighting for the same thing: that perfect first impression. But they're all doing it wrong. They think it's about the decor, the lighting, the music. No. It's about the *feeling*. The moment a guest walks in, they should feel like they've stepped into another world. A world where every detail is intentional, every movement calculated.</p>
<p>That's the challenge. That's the game. And I'm always one step ahead.</p>
</div>
<div class="image-gallery">
<div class="gallery-item">
<img src="https://images.pexels.com/photos/17206102/pexels-photo-17206102.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="A beautifully arranged wedding table setting in a well-lit reception">
<div class="gallery-caption">The perfect setup starts before they even sit down.</div>
</div>
<div class="gallery-item">
<img src="https://pixabay.com/get/g7f7e45c41dd46f0245ed02e0c532e91bb695da7e3fefde5aabb74d1a3c611a2ff983f78551df31adf767765b14e5e445e2a219d5d127a493ddc7cb69e92e4fdd_1280.jpg"
alt="restaurant, alexander, the hague, denneweg, dining, fin dining, top">
<div class="gallery-caption">The competition is always watching. Always learning.</div>
</div>
</div>
<div class="next-station">
<h2>Ready for the next challenge?</h2>
<p style="margin-bottom: 1.5rem;">The host stand is where the real game begins.</p>
<button onclick="window.location.href='/host-stand.html'">Enter the Host Stand</button>
</div>
</div>
</body>
</html>