Sarah
05dd55e0b6
Full vanilla HTML/CSS/JS consumer app with mobile-first responsive design. Pages: feed (index), post meal, trades, messages inbox, chat, landing page, and admin login skeleton. Uses Ava's design tokens throughout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
202 lines
9.6 KiB
HTML
202 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GrubFlip — Swap Meals with Restaurant Workers Near You</title>
|
|
<meta name="description" content="GrubFlip is the meal trading app for restaurant workers. Swap staff meals, discover new flavors, save money. Join the flip.">
|
|
<meta name="theme-color" content="#FF6B35">
|
|
<meta property="og:title" content="GrubFlip — Swap Meals Near You">
|
|
<meta property="og:description" content="The meal trading app for restaurant workers. Swap staff meals, discover new flavors, save money.">
|
|
<meta property="og:type" content="website">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/landing.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Nav -->
|
|
<header class="nav">
|
|
<div class="nav__inner">
|
|
<a href="/" class="nav__logo">Grub<span>Flip</span></a>
|
|
<div class="nav__links">
|
|
<a href="#how-it-works" class="nav__link">How It Works</a>
|
|
<a href="#features" class="nav__link hide-mobile">Features</a>
|
|
<a href="#download" class="btn btn--primary btn--sm">Get the App</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero__content">
|
|
<span class="hero__badge">🍕 Built for restaurant crews</span>
|
|
<h1 class="hero__title">Tired of the same<br> staff meal?<br><span class="hero__highlight">Flip it.</span></h1>
|
|
<p class="hero__sub">Trade meals with other restaurant workers nearby. Your pad thai for their pizza slice. Free, fast, and way better than eating the same thing every shift.</p>
|
|
<div class="hero__cta">
|
|
<a href="#download" class="btn btn--primary btn--lg">Start Flipping</a>
|
|
<a href="#how-it-works" class="btn btn--outline btn--lg">See How It Works</a>
|
|
</div>
|
|
<p class="hero__social-proof">
|
|
<span class="hero__avatars">
|
|
<span class="hero__avatar" style="background:#FF6B35;">🧑🍳</span>
|
|
<span class="hero__avatar" style="background:#2D6A4F;">👩🍳</span>
|
|
<span class="hero__avatar" style="background:#FFBA08;">👨🍳</span>
|
|
</span>
|
|
<span class="hero__social-text"><strong>500+</strong> restaurant workers already flipping</span>
|
|
</p>
|
|
</div>
|
|
<div class="hero__visual">
|
|
<div class="hero__phone">
|
|
<div class="phone-mockup">
|
|
<div class="phone-mockup__screen">
|
|
<div class="phone-mockup__header">
|
|
<span class="phone-mockup__logo">Grub<span>Flip</span></span>
|
|
</div>
|
|
<div class="phone-mockup__card">
|
|
<div class="phone-mockup__food-emoji">🍕</div>
|
|
<div class="phone-mockup__card-text">
|
|
<strong>Margherita Slice</strong>
|
|
<small>Marco's Pizzeria · 0.2 mi</small>
|
|
</div>
|
|
<span class="phone-mockup__badge">Swap</span>
|
|
</div>
|
|
<div class="phone-mockup__card phone-mockup__card--alt">
|
|
<div class="phone-mockup__food-emoji">🍜</div>
|
|
<div class="phone-mockup__card-text">
|
|
<strong>Pad Thai Bowl</strong>
|
|
<small>Thai Garden · 0.4 mi</small>
|
|
</div>
|
|
<span class="phone-mockup__badge phone-mockup__badge--green">Swap</span>
|
|
</div>
|
|
<div class="phone-mockup__card">
|
|
<div class="phone-mockup__food-emoji">🌮</div>
|
|
<div class="phone-mockup__card-text">
|
|
<strong>Carnitas Tacos (2x)</strong>
|
|
<small>La Cocina · 0.3 mi</small>
|
|
</div>
|
|
<span class="phone-mockup__badge">Swap</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="how-it-works" id="how-it-works">
|
|
<div class="container">
|
|
<h2 class="section-title">How It Works</h2>
|
|
<p class="section-sub">Three steps. That's it. No accounts to verify, no fees, no BS.</p>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step__icon">📸</div>
|
|
<div class="step__num">1</div>
|
|
<h3 class="step__title">Post Your Meal</h3>
|
|
<p class="step__desc">Snap a pic of your staff meal and post it. Add what restaurant you work at and when you're free to swap.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step__icon">🔄</div>
|
|
<div class="step__num">2</div>
|
|
<h3 class="step__title">Find a Flip</h3>
|
|
<p class="step__desc">Browse meals from nearby restaurant workers. See something you want? Send a flip request. They accept, you're in.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step__icon">🤝</div>
|
|
<div class="step__num">3</div>
|
|
<h3 class="step__title">Meet & Eat</h3>
|
|
<p class="step__desc">Meet up between shifts, swap meals, and enjoy something different. Rate the flip and build your rep.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<h2 class="section-title">Why Restaurant Workers<br>Love GrubFlip</h2>
|
|
<div class="features__grid">
|
|
<div class="feature-card">
|
|
<div class="feature-card__icon">💸</div>
|
|
<h3 class="feature-card__title">100% Free</h3>
|
|
<p class="feature-card__desc">No money changes hands. Just meal for meal. The way it should be.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-card__icon">📍</div>
|
|
<h3 class="feature-card__title">Hyper-Local</h3>
|
|
<p class="feature-card__desc">Only see meals within walking distance. Built for your block, not your borough.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-card__icon">⚡</div>
|
|
<h3 class="feature-card__title">Shift-Friendly</h3>
|
|
<p class="feature-card__desc">Set your availability around your shifts. GrubFlip works on your schedule, not the other way around.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-card__icon">⭐</div>
|
|
<h3 class="feature-card__title">Rep System</h3>
|
|
<p class="feature-card__desc">Build your reputation as a reliable flipper. The more you trade, the more people trust you.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonial -->
|
|
<section class="testimonial">
|
|
<div class="container">
|
|
<blockquote class="testimonial__quote">
|
|
"I've been eating the same chicken parm for 3 years. First week on GrubFlip I had sushi, ramen, and the best empanadas of my life. Game changer."
|
|
</blockquote>
|
|
<div class="testimonial__author">
|
|
<span class="testimonial__avatar">👨🍳</span>
|
|
<div>
|
|
<strong>Danny R.</strong>
|
|
<span>Line cook, Brooklyn</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA / Download -->
|
|
<section class="download" id="download">
|
|
<div class="container">
|
|
<h2 class="download__title">Ready to flip?</h2>
|
|
<p class="download__sub">Join 500+ restaurant workers already trading meals. Available on iOS and Android.</p>
|
|
<div class="download__buttons">
|
|
<a href="#" class="btn btn--dark btn--lg download__store-btn" aria-label="Download on the App Store">
|
|
<svg class="download__store-icon" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
App Store
|
|
</a>
|
|
<a href="#" class="btn btn--dark btn--lg download__store-btn" aria-label="Get it on Google Play">
|
|
<svg class="download__store-icon" viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M3.18 23.49c-.31-.16-.52-.46-.57-.82L2 3.35c-.04-.36.12-.7.42-.9L13.26 12 2.61 21.55l.57 1.94zM14.62 12L4.5 2.74l10.8 6.3-1.68 2.96zm1.56.89L6.84 21.3l10.76-6.28-1.42-2.13zM21.15 11.1l-3.87-2.27L15.2 12l2.08 3.17 3.87-2.27c.59-.34.59-1.46 0-1.8z"/></svg>
|
|
Google Play
|
|
</a>
|
|
</div>
|
|
<p class="download__note">Or use the <a href="index.html">web app</a> — no download needed.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer__inner">
|
|
<div class="footer__brand">
|
|
<span class="footer__logo">Grub<span>Flip</span></span>
|
|
<p class="footer__tagline">Meal trading for restaurant crews.</p>
|
|
</div>
|
|
<div class="footer__links">
|
|
<a href="#">About</a>
|
|
<a href="#">Privacy</a>
|
|
<a href="#">Terms</a>
|
|
<a href="#">Contact</a>
|
|
</div>
|
|
</div>
|
|
<p class="footer__copy">© 2026 GrubFlip. Made with 🍕 for the people who make the food.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/landing.js"></script>
|
|
</body>
|
|
</html>
|