<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<title>Grocery Shop</title>
</head>
<body>
<header>
<div class="header-container">
<div class="logo">
<img src="{{ url_for('static', filename='logo.png') }}" alt="Logo">
</div>
<div class="search-bar">
<input type="text" placeholder="Search for your groceries...">
</div>
<div class="login-signup">
<button>Login</button>
<button>Sign Up</button>
</div>
</div>
</header>
<main>
<div class="banner">
<h1>Come and grab a byte tonite</h1>
<p>From a variety of fresh products</p>
<button>Start Shopping</button>
</div>
<section class="deals">
<h2>Weekly Deals</h2>
<div class="products">
<div class="product">
<img src="{{ url_for('static', filename='product.png') }}" alt="Product">
<p>Product Name 1</p>
<p>$X.XX</p>
</div>
<!-- Repeat for more products -->
</div>
</section>
<section class="seasonal">
<h2>Seasonal Items</h2>
<div class="products">
<div class="product">
<img src="{{ url_for('static', filename='product.png') }}" alt="Product">
<p>Product Name 2</p>
<p>$X.XX</p>
</div>
<!-- Repeat for more products -->
</div>
</section>
</main>
</body>
</html>