site-builder/templates/restaurant-cafe.html

<!-- Navigation -->
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#1c1917;">
    <div style="font-size:24px;font-weight:700;color:#fef3c7;font-family:'Playfair Display',serif;letter-spacing:1px;">Ember & Oak</div>
    <div style="display:flex;gap:32px;align-items:center;">
        <a href="#menu" style="color:#d6d3d1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Menu</a>
        <a href="#story" style="color:#d6d3d1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Our Story</a>
        <a href="#reserve" style="display:inline-block;padding:10px 24px;background:#b45309;color:#fff;font-size:13px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Reserve a Table</a>
    </div>
</nav>

<!-- Hero -->
<section style="min-height:650px;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=1920');background-size:cover;background-position:center;position:relative;text-align:center;">
    <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(28,25,23,0.7);"></div>
    <div style="position:relative;z-index:1;max-width:700px;padding:40px 20px;">
        <p style="color:#b45309;font-size:14px;font-weight:600;margin-bottom:16px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">EST. 2018 · Farm to Table</p>
        <h1 style="color:#fef3c7;font-size:64px;font-weight:700;margin-bottom:24px;font-family:'Playfair Display',serif;line-height:1.1;">Where Fire Meets Flavor</h1>
        <p style="color:#d6d3d1;font-size:18px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;">Wood-fired cuisine crafted from locally sourced ingredients. An intimate dining experience in the heart of downtown.</p>
        <div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
            <a href="#reserve" style="display:inline-block;padding:16px 40px;background:#b45309;color:#fff;font-size:15px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Reserve a Table</a>
            <a href="#menu" style="display:inline-block;padding:16px 40px;background:transparent;color:#fef3c7;font-size:15px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;border:1px solid rgba(254,243,199,0.3);text-transform:uppercase;letter-spacing:1px;">View Menu</a>
        </div>
    </div>
</section>

<!-- About -->
<section id="story" style="padding:100px 20px;background:#faf5ef;">
    <div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;align-items:center;">
        <div style="flex:1;min-width:300px;">
            <img src="https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=600&h=700&fit=crop" style="width:100%;border-radius:12px;display:block;" alt="Chef preparing food">
        </div>
        <div style="flex:1;min-width:300px;">
            <p style="color:#b45309;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Our Story</p>
            <h2 style="font-size:40px;font-weight:700;color:#1c1917;margin-bottom:24px;font-family:'Playfair Display',serif;line-height:1.2;">A passion for honest, wood-fired cooking</h2>
            <p style="color:#57534e;font-size:17px;line-height:1.8;margin-bottom:20px;font-family:Inter,sans-serif;">Chef Marcus Rivera opened Ember & Oak with a simple belief: the best food comes from the best ingredients, cooked over real fire. Every dish tells a story of local farms, seasonal produce, and time-honored techniques.</p>
            <p style="color:#57534e;font-size:17px;line-height:1.8;font-family:Inter,sans-serif;">Our custom-built wood-fired oven reaches 900°F, creating that distinctive char and smoky depth that keeps our guests coming back week after week.</p>
        </div>
    </div>
</section>

<!-- Menu Highlights -->
<section id="menu" style="padding:100px 20px;background:#1c1917;">
    <div style="max-width:1200px;margin:0 auto;">
        <div style="text-align:center;margin-bottom:60px;">
            <p style="color:#b45309;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">From Our Kitchen</p>
            <h2 style="font-size:42px;font-weight:700;color:#fef3c7;font-family:'Playfair Display',serif;">Menu Highlights</h2>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
            <div style="flex:1;min-width:280px;max-width:380px;border-radius:12px;overflow:hidden;background:#292524;">
                <img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&h=280&fit=crop" style="width:100%;height:240px;object-fit:cover;display:block;" alt="Steak">
                <div style="padding:28px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                        <h3 style="font-size:20px;font-weight:600;color:#fef3c7;font-family:'Playfair Display',serif;">Wood-Fired Ribeye</h3>
                        <span style="color:#b45309;font-size:18px;font-weight:700;font-family:Inter,sans-serif;">$48</span>
                    </div>
                    <p style="color:#a8a29e;line-height:1.6;font-size:14px;font-family:Inter,sans-serif;">14oz prime ribeye, oak-smoked, served with roasted bone marrow butter and charred broccolini</p>
                </div>
            </div>
            <div style="flex:1;min-width:280px;max-width:380px;border-radius:12px;overflow:hidden;background:#292524;">
                <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=400&h=280&fit=crop" style="width:100%;height:240px;object-fit:cover;display:block;" alt="Pizza">
                <div style="padding:28px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                        <h3 style="font-size:20px;font-weight:600;color:#fef3c7;font-family:'Playfair Display',serif;">Truffle Margherita</h3>
                        <span style="color:#b45309;font-size:18px;font-weight:700;font-family:Inter,sans-serif;">$24</span>
                    </div>
                    <p style="color:#a8a29e;line-height:1.6;font-size:14px;font-family:Inter,sans-serif;">San Marzano tomatoes, fresh mozzarella di bufala, black truffle, basil, finished in our 900°F oven</p>
                </div>
            </div>
            <div style="flex:1;min-width:280px;max-width:380px;border-radius:12px;overflow:hidden;background:#292524;">
                <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=400&h=280&fit=crop" style="width:100%;height:240px;object-fit:cover;display:block;" alt="Dessert">
                <div style="padding:28px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                        <h3 style="font-size:20px;font-weight:600;color:#fef3c7;font-family:'Playfair Display',serif;">Smoked Crème Brûlée</h3>
                        <span style="color:#b45309;font-size:18px;font-weight:700;font-family:Inter,sans-serif;">$16</span>
                    </div>
                    <p style="color:#a8a29e;line-height:1.6;font-size:14px;font-family:Inter,sans-serif;">Madagascar vanilla custard, applewood-smoked sugar crust, fresh seasonal berries</p>
                </div>
            </div>
        </div>
        <div style="text-align:center;margin-top:48px;">
            <a href="#" style="display:inline-block;padding:14px 36px;background:transparent;color:#fef3c7;font-size:14px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;border:1px solid rgba(254,243,199,0.3);text-transform:uppercase;letter-spacing:1px;">View Full Menu →</a>
        </div>
    </div>
</section>

<!-- Hours & Location -->
<section style="padding:80px 20px;background:#faf5ef;">
    <div style="max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:60px;justify-content:center;">
        <div style="flex:1;min-width:280px;text-align:center;">
            <h3 style="font-size:22px;font-weight:700;color:#1c1917;margin-bottom:20px;font-family:'Playfair Display',serif;">Hours</h3>
            <p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Monday – Thursday: 5pm – 10pm</p>
            <p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Friday – Saturday: 5pm – 11pm</p>
            <p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Sunday: 4pm – 9pm</p>
            <p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Brunch: Sat & Sun 10am – 2pm</p>
        </div>
        <div style="flex:1;min-width:280px;text-align:center;">
            <h3 style="font-size:22px;font-weight:700;color:#1c1917;margin-bottom:20px;font-family:'Playfair Display',serif;">Location</h3>
            <p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">742 Fireside Lane</p>
            <p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Downtown District</p>
            <p style="color:#57534e;font-size:16px;line-height:2;font-family:Inter,sans-serif;">Portland, OR 97201</p>
            <p style="color:#b45309;font-size:16px;line-height:2;font-family:Inter,sans-serif;">(503) 555-0182</p>
        </div>
        <div style="flex:1;min-width:280px;text-align:center;">
            <h3 style="font-size:22px;font-weight:700;color:#1c1917;margin-bottom:20px;font-family:'Playfair Display',serif;">Private Events</h3>
            <p style="color:#57534e;font-size:16px;line-height:1.8;font-family:Inter,sans-serif;">Our private dining room seats up to 24 guests. Perfect for celebrations, corporate dinners, and special occasions.</p>
            <a href="#" style="display:inline-block;margin-top:16px;color:#b45309;font-size:14px;font-weight:600;text-decoration:none;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Inquire Now →</a>
        </div>
    </div>
</section>

<!-- Reservation CTA -->
<section id="reserve" style="padding:100px 20px;background-image:url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1920');background-size:cover;background-position:center;position:relative;text-align:center;">
    <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(28,25,23,0.8);"></div>
    <div style="position:relative;z-index:1;max-width:600px;margin:0 auto;">
        <h2 style="font-size:42px;font-weight:700;color:#fef3c7;margin-bottom:20px;font-family:'Playfair Display',serif;">Reserve Your Table</h2>
        <p style="font-size:18px;color:#d6d3d1;margin-bottom:40px;line-height:1.7;font-family:Inter,sans-serif;">Join us for an unforgettable dining experience. Walk-ins welcome, but reservations are recommended.</p>
        <a href="#" style="display:inline-block;padding:18px 48px;background:#b45309;color:#fff;font-size:16px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Book Now on OpenTable</a>
    </div>
</section>

<!-- Footer -->
<footer style="padding:40px 20px;background:#1c1917;text-align:center;">
    <div style="font-size:20px;font-weight:700;color:#fef3c7;margin-bottom:16px;font-family:'Playfair Display',serif;">Ember & Oak</div>
    <div style="display:flex;justify-content:center;gap:20px;margin-bottom:16px;">
        <a href="#" style="color:#a8a29e;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Instagram</a>
        <a href="#" style="color:#a8a29e;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Facebook</a>
        <a href="#" style="color:#a8a29e;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Yelp</a>
    </div>
    <p style="color:#57534e;font-size:13px;font-family:Inter,sans-serif;">© 2026 Ember & Oak. All rights reserved.</p>
</footer>