<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - <%= title %></title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: #333;
        }
        .header {
            background-color: rgba(255, 126, 95, 0.9);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .header a {
            color: #fff;
            text-decoration: none;
            font-size: 24px;
        }
        .nav {
            display: flex;
        }
        .nav a {
            margin-left: 20px;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            transition: color 0.3s;
        }
        .nav a:hover {
            color: #ffd1a9;
        }
        .main {
            padding: 40px 20px;
            text-align: center;
        }
        .main h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        .main p {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 40px;
            max-width: 800px;
            margin: 0 auto;
        }
        .footer {
            background-color: rgba(255, 126, 95, 0.9);
            color: #fff;
            padding: 10px 20px;
            text-align: center;
            position: absolute;
            bottom: 0;
            width: 100%;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="header">
        <a href="/">Food Optimization</a>
        <div class="nav">
            <a href="/">Home</a>
            <a href="/profile">profile</a>
            <a href="/about">About</a>
            <a href="/register">Register</a>
            <a href="/login">Login</a>
        </div>
    </div>
    <div class="main">
        <h1>About Us</h1>
        <p>
            Food waste is a significant global issue contributing to environmental degradation and economic inefficiency. To address this problem, we propose the development of a Food Waste Reduction System. This system aims to assist users in minimizing food waste by providing various functionalities such as suggesting recipes for leftover ingredients, offering expiration date reminders, and providing tips for proper food storage to prolong freshness. By leveraging these features, users can effectively manage their food inventory, optimize their grocery shopping habits, and make more informed decisions regarding meal planning and consumption.
        </p>
    </div>
    <div class="footer">
        &copy; 2024 MyWebsite. All rights reserved.
    </div>
</body>
</html>
