362 lines
12 KiB
HTML
362 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Alloro - Restaurant Management Software Built by Chefs</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
"Roboto",
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
Helvetica,
|
|
Arial,
|
|
sans-serif;
|
|
line-height: 1.5;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
background: #fafafa;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.card {
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
padding: 48px;
|
|
box-shadow:
|
|
0 1px 3px rgba(0, 0, 0, 0.12),
|
|
0 1px 2px rgba(0, 0, 0, 0.24);
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 48px;
|
|
font-weight: 400;
|
|
color: #1976d2;
|
|
margin-bottom: 8px;
|
|
font-family: "Roboto", sans-serif;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 18px;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
margin-bottom: 32px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.hero-text {
|
|
font-size: 16px;
|
|
margin-bottom: 32px;
|
|
color: rgba(0, 0, 0, 0.87);
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 16px;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.feature {
|
|
background: #ffffff;
|
|
padding: 24px;
|
|
border-radius: 4px;
|
|
box-shadow:
|
|
0 1px 3px rgba(0, 0, 0, 0.12),
|
|
0 1px 2px rgba(0, 0, 0, 0.24);
|
|
text-align: left;
|
|
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.feature:hover {
|
|
box-shadow:
|
|
0 3px 6px rgba(0, 0, 0, 0.16),
|
|
0 3px 6px rgba(0, 0, 0, 0.23);
|
|
}
|
|
|
|
.feature h3 {
|
|
color: rgba(0, 0, 0, 0.87);
|
|
margin-bottom: 8px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.feature p {
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.cta-section {
|
|
background: #1976d2;
|
|
color: white;
|
|
padding: 48px 32px;
|
|
border-radius: 4px;
|
|
margin: 24px 0;
|
|
box-shadow:
|
|
0 2px 4px rgba(0, 0, 0, 0.14),
|
|
0 3px 4px rgba(0, 0, 0, 0.12),
|
|
0 1px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.cta-section h2 {
|
|
margin-bottom: 16px;
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.cta-section p {
|
|
margin-bottom: 32px;
|
|
opacity: 0.9;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.email-signup {
|
|
background: white;
|
|
padding: 12px 24px;
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
box-shadow:
|
|
0 2px 4px rgba(0, 0, 0, 0.14),
|
|
0 3px 4px rgba(0, 0, 0, 0.12),
|
|
0 1px 5px rgba(0, 0, 0, 0.2);
|
|
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.email-signup:hover {
|
|
box-shadow:
|
|
0 3px 5px rgba(0, 0, 0, 0.2),
|
|
0 5px 8px rgba(0, 0, 0, 0.14),
|
|
0 1px 14px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.email-signup a {
|
|
color: #1976d2;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.about {
|
|
background: #ffffff;
|
|
padding: 32px;
|
|
border-radius: 4px;
|
|
margin: 24px 0;
|
|
box-shadow:
|
|
0 1px 3px rgba(0, 0, 0, 0.12),
|
|
0 1px 2px rgba(0, 0, 0, 0.24);
|
|
}
|
|
|
|
.about h2 {
|
|
color: rgba(0, 0, 0, 0.87);
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.about p {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.flag {
|
|
display: inline-block;
|
|
font-size: 1.2rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
padding: 32px;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 16px;
|
|
}
|
|
|
|
.card {
|
|
padding: 32px 24px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.features {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.cta-section {
|
|
padding: 32px 24px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="logo">Alloro</div>
|
|
<div class="tagline">
|
|
Restaurant Management Software Built by Chefs
|
|
<span class="flag">🇨🇦</span>
|
|
</div>
|
|
|
|
<div class="hero-text">
|
|
<strong>From the kitchen to your kitchen.</strong> We're
|
|
building the next generation of restaurant management
|
|
software, starting with recipe and cost management tools
|
|
that actually understand how restaurants work.
|
|
</div>
|
|
|
|
<div class="features">
|
|
<div class="feature">
|
|
<h3>🧅 Smart Ingredients</h3>
|
|
<p>
|
|
Unit conversions that make sense - buy in pounds,
|
|
cook in cups, no problem.
|
|
</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h3>📱 Mobile-First</h3>
|
|
<p>
|
|
Works in the kitchen, office, or basement prep room
|
|
- even without internet.
|
|
</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h3>💰 True Costing</h3>
|
|
<p>
|
|
Real-time recipe costs and portion optimization for
|
|
your target food cost.
|
|
</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h3>📋 Auto Prep Lists</h3>
|
|
<p>
|
|
Generate station prep lists automatically from your
|
|
upcoming orders.
|
|
</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h3>🚫 No Lock-In</h3>
|
|
<p>
|
|
Your recipes, your data. Export everything whenever
|
|
you want.
|
|
</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h3>🤝 Chef Support</h3>
|
|
<p>
|
|
Built by industry professionals who speak your
|
|
language.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta-section">
|
|
<h2>Want to stay updated?</h2>
|
|
<p>
|
|
We're conducting market research and building something
|
|
special. Join our list to be the first to know when we
|
|
launch, get early access, and help shape the features we
|
|
build.
|
|
</p>
|
|
|
|
<div class="email-signup">
|
|
<a
|
|
href="mailto:alloro@dylanbaird.com?subject=Newsletter Signup - Alloro&body=Hi Dylan,%0D%0A%0D%0AI'd like to stay updated on Alloro's development. Please add me to your newsletter list.%0D%0A%0D%0AName: [Your Name]%0D%0ARestaurant/Role: [Optional]%0D%0A%0D%0AThanks!"
|
|
>
|
|
📧 Join Our Newsletter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about">
|
|
<h2>Built by People Who Understand</h2>
|
|
<p>
|
|
Led by Dylan Baird, a chef with 15 years of kitchen
|
|
experience who transitioned to programming and
|
|
cybersecurity. Our team combines industry professionals
|
|
(cooks and sommeliers) with skilled developers. We're not
|
|
just building software - we're solving problems we've lived
|
|
through ourselves.
|
|
</p>
|
|
<p style="margin-top: 1rem">
|
|
<strong>We want to hear from YOU.</strong> What challenges
|
|
do you face running your restaurant? What would make your
|
|
day-to-day operations easier? We're actively seeking input
|
|
from industry professionals to guide our development.
|
|
Whether it's recipe management, inventory tracking, staff
|
|
scheduling, or something completely different - if it's a
|
|
problem you're dealing with, we want to know about it.
|
|
</p>
|
|
<p style="margin-top: 1rem">
|
|
<strong>Let's build this together.</strong> Contact us at
|
|
<a
|
|
href="mailto:alloro@dylanbaird.com"
|
|
style="color: #1976d2"
|
|
>alloro@dylanbaird.com</a
|
|
>
|
|
to share your ideas, frustrations, and dream features. Your
|
|
input directly shapes what we build.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<p>
|
|
Alloro - Proudly Canadian 🇨🇦 | Built with ❤️ for the restaurant
|
|
industry
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
// Simple mailto click tracking (optional)
|
|
document
|
|
.querySelector(".email-signup a")
|
|
.addEventListener("click", function () {
|
|
console.log("Newsletter signup clicked");
|
|
});
|
|
|
|
// Add Material Design interactions
|
|
document.querySelectorAll(".feature").forEach((feature) => {
|
|
feature.addEventListener("mouseenter", function () {
|
|
this.style.transform = "translateY(-1px)";
|
|
this.style.transition =
|
|
"transform 0.15s cubic-bezier(0.4, 0.0, 0.2, 1)";
|
|
});
|
|
|
|
feature.addEventListener("mouseleave", function () {
|
|
this.style.transform = "translateY(0)";
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|