i want to change this (<?php
// public/dashboard.php

// Enable error reporting for debugging (disable in production)
ini_set('display_errors', 0); // Set to 0 in production
ini_set('display_startup_errors', 0); // Set to 0 in production
error_reporting(E_ALL);

// Start output buffering to prevent "headers already sent" errors
ob_start();

// Include authentication and database connection first
require_once '../includes/auth.php';
require_once '../includes/db_connect.php';

// Now include the header
require_once '../includes/header.php';

/**
 * Fetch Quick Stats
 */

// Total Orders
$totalOrdersSql = "SELECT COUNT(*) AS total FROM orders";
$totalOrdersResult = $conn->query($totalOrdersSql);
$totalOrders = ($totalOrdersResult && $row = $totalOrdersResult->fetch_assoc()) ? (int)$row['total'] : 0;

// Pending Orders
$pendingOrdersSql = "SELECT COUNT(*) AS total FROM orders WHERE status = 'Pending'";
$pendingOrdersResult = $conn->query($pendingOrdersSql);
$pendingOrders = ($pendingOrdersResult && $row = $pendingOrdersResult->fetch_assoc()) ? (int)$row['total'] : 0;

// Completed Orders
$completedOrdersSql = "SELECT COUNT(*) AS total FROM orders WHERE status = 'Completed'";
$completedOrdersResult = $conn->query($completedOrdersSql);
$completedOrders = ($completedOrdersResult && $row = $completedOrdersResult->fetch_assoc()) ? (int)$row['total'] : 0;

// Delivered Orders
$deliveredOrdersSql = "SELECT COUNT(*) AS total FROM orders WHERE status = 'Delivered'";
$deliveredOrdersResult = $conn->query($deliveredOrdersSql);
$deliveredOrders = ($deliveredOrdersResult && $row = $deliveredOrdersResult->fetch_assoc()) ? (int)$row['total'] : 0;

// Total Sales from Completed and Delivered Orders considering discounts
$totalSalesSql = "
    SELECT 
        SUM(p.price * oi.quantity * (1 - (oi.discount_percentage / 100))) AS total_sales
    FROM 
        order_items oi
    JOIN 
        products p ON oi.product_id = p.id
    JOIN 
        orders o ON oi.order_id = o.id
    WHERE 
        o.status IN ('Completed', 'Delivered')
";
$totalSalesResult = $conn->query($totalSalesSql);
$totalSales = ($totalSalesResult && $row = $totalSalesResult->fetch_assoc()) ? (float)$row['total_sales'] : 0.00;

/**
 * Fetch Recent Orders
 */

// Fetch the 5 most recent orders
$recentOrdersSql = "
    SELECT 
        o.id AS order_id,
        c.name AS customer_name,
        c.contact,
        c.delivery_address,
        o.status,
        o.order_date,
        o.delivery_datetime,
        GROUP_CONCAT(
            CONCAT(
                p.name, ' - ', p.size, ' (', FORMAT(p.price, 2), ' KD) <br>',
                'Qty: ', oi.quantity, '<br>',
                'Packaging: ', IFNULL(oi.packaging_preferences, 'None'), '<br>',
                'Discount: ', oi.discount_percentage, '%<br>',
                'Reason: ', IFNULL(oi.discount_reason, 'N/A')
            ) SEPARATOR '<hr>'
        ) AS products_details
    FROM 
        orders o
    JOIN 
        customers c ON o.customer_id = c.id
    JOIN 
        order_items oi ON o.id = oi.order_id
    JOIN 
        products p ON oi.product_id = p.id
    GROUP BY 
        o.id
    ORDER BY 
        o.order_date DESC
    LIMIT 5
";

$recentOrdersResult = $conn->query($recentOrdersSql);
$recentOrders = ($recentOrdersResult && $recentOrdersResult->num_rows > 0) ? $recentOrdersResult : false;

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard - Kaak Alia Management System</title>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Nunito:wght@400;600;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    
    <!-- Custom Styles -->
<style>
    
    /* styles.css */

/* ---------------------------------------------------
   1. CSS Variables for Consistent Design
---------------------------------------------------- */
:root {
    /* Bakery-Themed Colors */
    --primary-color: #D19A66; /* Warm Accent Color */
    --secondary-color: #3A2F1B; /* Dark Brown */
    --light-brown: #E8D8C3; /* Soft Brown for Borders */
    --soft-cream: #F9F4EC; /* Light Cream Background */
    --hover-shadow: rgba(0, 0, 0, 0.1);

    /* Text Colors */
    --main-text: #333333;
    --secondary-text: #555555;
    --title-color: #3A2F1B;
    --placeholder-text: #AAAAAA;

    /* UI Elements */
    --input-border: var(--light-brown);
    --input-focus-border: var(--primary-color);
    --box-background: var(--soft-cream);
    --box-border-radius: 10px;
    --box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
    --title-font: 'Nunito', sans-serif;
    --body-font: 'Roboto', sans-serif;

    /* Additional Colors */
    --button-add-order: #e2a20c; /* Light Golden-Yellow */
    --button-view-orders: #118AB2; /* Blue */
    --button-manage-products: #06D6A0; /* Green */
    --button-manage-users: #F4A261; /* Orange */
    --button-generate-reports: #EF476F; /* Red-Pink */

    --badge-pending: #FFD166;
    --badge-in-progress: #118AB2;
    --badge-completed: #06D6A0;
    --badge-delivered: #EF476F;
}

/* ---------------------------------------------------
   2. Global Styles
---------------------------------------------------- */
body {
    font-family: var(--body-font), sans-serif;
    background: var(--box-background);
    margin: 0;
    padding: 0;
    color: var(--main-text);
}

.container-body {
    font-family: var(--body-font), sans-serif;
    background-color: #FFFFFF;
    margin: 0;
    padding: 30px;
    box-sizing: border-box;
}

/* ---------------------------------------------------
   3. Header Styles
---------------------------------------------------- */
.header {
    padding: 20px 30px;
    background-color: var(--secondary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.header h1 {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--title-font);
}

/* ---------------------------------------------------
   4. Welcome Section
---------------------------------------------------- */
.welcome-section {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    border-radius: var(--box-border-radius);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.welcome-section h3 {
    font-size: 24px;
    color: var(--main-text);
    margin-bottom: 10px;
    font-family: var(--title-font);
}

.welcome-section hr {
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
    border: none;
    margin: 10px auto;
}

/* ---------------------------------------------------
   5. Statistics Section
---------------------------------------------------- */
.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    border-radius: var(--box-border-radius);
    padding: 15px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    font-size: 32px;
    margin-right: 15px;
}

.stat-icon.total-orders { color: var(--secondary-text); }
.stat-icon.pending-orders { color: var(--primary-color); }
.stat-icon.completed-orders { color: var(--button-view-orders); }
.stat-icon.delivered-orders { color: var(--button-generate-reports); }
.stat-icon.total-sales { color: var(--button-manage-products); }

.stat-info h5 {
    font-size: 18px;
    color: var(--main-text);
    margin-bottom: 5px;
    font-family: var(--title-font);
}

.stat-info p {
    font-size: 24px;
    font-weight: 700;
    color: var(--main-text);
    margin: 0;
}

/* ---------------------------------------------------
   6. Main Buttons Section
---------------------------------------------------- */
.buttons-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    height: 60px;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    border: none;
    border-radius: var(--box-border-radius);
    padding: 10px 20px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    text-align: center;
    font-family: var(--title-font);
}

.action-button.add-order { background-color: var(--button-add-order); }
.action-button.view-orders { background-color: var(--button-view-orders); }
.action-button.manage-products { background-color: var(--button-manage-products); }
.action-button.manage-users { background-color: var(--button-manage-users); }
.action-button.generate-reports { background-color: var(--button-generate-reports); }

.action-button:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 10px var(--hover-shadow);
}

/* ---------------------------------------------------
   7. Recent Orders Section
---------------------------------------------------- */
.recent-orders-section {
    background-color: var(--white);
    border-radius: var(--box-border-radius);
    padding: 20px;
    box-shadow: var(--box-shadow);
}

.recent-orders-section h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 15px;
    font-family: var(--title-font);
}

/* Make table responsive */
.table-responsive {
    overflow-x: auto;
}

.recent-orders-section table {
    width: 100%;
    border-collapse: collapse;
}

.recent-orders-section th, 
.recent-orders-section td {
    padding: 12px;
    text-align: left;
    font-size: 16px;
    vertical-align: top;
    font-family: var(--body-font);
}

.recent-orders-section th {
    background-color: var(--secondary-color);
    color: #FFFFFF;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 1;
}

.recent-orders-section tr:nth-child(even) {
    background-color: #F9F9F9;
}

.recent-orders-section tr:hover {
    background-color: #e6f7ff;
}

.recent-orders-section td {
    font-size: 14px;
    color: var(--main-text);
}

.recent-orders-section .view-all {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-size: 16px;
    color: var(--button-view-orders);
    font-weight: 700;
    text-decoration: none;
    font-family: var(--title-font);
}

.recent-orders-section .view-all:hover {
    color: #075985;
}

/* Badge Styles */
.badge-status-pending {
    background-color: var(--badge-pending);
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.badge-status-in-progress {
    background-color: var(--badge-in-progress);
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.badge-status-completed {
    background-color: var(--badge-completed);
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.badge-status-delivered {
    background-color: var(--badge-delivered);
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

/* ---------------------------------------------------
   8. Input Fields
---------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 16px;
    color: var(--main-text);
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px var(--hover-shadow);
    transition: border 0.3s, box-shadow 0.3s;
    font-family: var(--body-font);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--placeholder-text);
    font-style: italic;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border: 1px solid var(--input-focus-border);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    outline: none;
}

/* ---------------------------------------------------
   9. Content Boxes and Containers
---------------------------------------------------- */
.box {
    background-color: var(--box-background);
    border-radius: var(--box-border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.box:hover {
    box-shadow: 0px 4px 8px var(--hover-shadow);
}

/* ---------------------------------------------------
   10. Titles and Headings
---------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font), serif;
    color: var(--title-color);
    margin: 20px 0;
}

h1 {
    font-size: 32px;
    font-weight: 700;
}

h2 {
    font-size: 24px;
    font-weight: 600;
}

h3 {
    font-size: 20px;
    font-weight: 600;
}

h4 {
    font-size: 18px;
    font-weight: 700;
}

h5 {
    font-size: 16px;
    font-weight: 600;
}

h6 {
    font-size: 14px;
    font-weight: 500;
}

.title-highlight {
    border-bottom: 2px solid var(--primary-color);
}

/* ---------------------------------------------------
   11. Footer Styles
---------------------------------------------------- */
.footer {
    background-color: var(--secondary-color);
    color: #FFFFFF;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    margin-top: 40px;
    font-family: var(--body-font);
}

/* ---------------------------------------------------
   12. Responsive Design Enhancements
---------------------------------------------------- */
@media (min-width: 768px) {
    .buttons-section .action-button {
        width: 48%;
    }
}

@media (max-width: 767px) {
    .buttons-section .action-button {
        width: 100%;
    }

    .recent-orders-section table, 
    .recent-orders-section th, 
    .recent-orders-section td {
        font-size: 12px;
    }

    .recent-orders-section h4 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 15px 20px;
    }

    .header h1 {
        font-size: 20px;
    }

    .welcome-section h3 {
        font-size: 18px;
    }

    .action-button {
        font-size: 16px;
        height: 50px;
    }

    .recent-orders-section th, 
    .recent-orders-section td {
        padding: 10px;
        font-size: 12px;
    }

    .recent-orders-section h4 {
        font-size: 14px;
    }
}
</style></head>
<body>
<main class='container-body'>
    <!-- Header -->
    <div class="header">
        <h1>Kaak Alia Dashboard</h1>
    </div>

    <!-- Welcome Section -->
    <div class="welcome-section">
        <h3>Welcome to the Kaak Alia Management System!</h3>
        <hr>
    </div>

    <!-- Statistics Section -->
    <div class="stats-section">
        <!-- Total Orders -->
        <div class="stat-card">
            <div class="stat-icon total-orders">
                <i class="bi bi-cart-fill"></i>
            </div>
            <div class="stat-info">
                <h5>Total Orders</h5>
                <p><?= number_format($totalOrders) ?></p>
            </div>
        </div>
        <!-- Pending Orders -->
        <div class="stat-card">
            <div class="stat-icon pending-orders">
                <i class="bi bi-hourglass-top"></i>
            </div>
            <div class="stat-info">
                <h5>Pending Orders</h5>
                <p><?= number_format($pendingOrders) ?></p>
            </div>
        </div>
        <!-- Completed Orders -->
        <div class="stat-card">
            <div class="stat-icon completed-orders">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div class="stat-info">
                <h5>Completed Orders</h5>
                <p><?= number_format($completedOrders) ?></p>
            </div>
        </div>
        <!-- Delivered Orders -->
        <div class="stat-card">
            <div class="stat-icon delivered-orders">
                <i class="bi bi-truck"></i>
            </div>
            <div class="stat-info">
                <h5>Delivered Orders</h5>
                <p><?= number_format($deliveredOrders) ?></p>
            </div>
        </div>
        <!-- Total Sales -->
        <div class="stat-card">
            <div class="stat-icon total-sales">
                <i class="bi bi-cash-stack"></i>
            </div>
            <div class="stat-info">
                <h5>Total Sales (KD)</h5>
                <p><?= number_format($totalSales, 2) ?></p>
            </div>
        </div>
    </div>

    <!-- Main Buttons Section -->
    <div class="buttons-section">
        <a href="orders/add_order.php" class="action-button add-order">
            <i class="bi bi-plus-circle-fill me-2"></i>
            Add New Order
        </a>
        <a href="orders/view_orders.php" class="action-button view-orders">
            <i class="bi bi-eye-fill me-2"></i>
            View Orders
        </a>
        <a href="products/manage_products.php" class="action-button manage-products">
            <i class="bi bi-box-seam-fill me-2"></i>
            Manage Products
        </a>
        <a href="users/manage_users.php" class="action-button manage-users">
            <i class="bi bi-people-fill me-2"></i>
            Manage Users
        </a>
        <a href="reports/generate_reports.php" class="action-button generate-reports">
            <i class="bi bi-bar-chart-fill me-2"></i>
            Generate Reports
        </a>
    </div>

    <!-- Recent Orders Section -->
    <div class="recent-orders-section">
        <h4>Recent Orders</h4>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>#ID</th>
                        <th>Customer Name</th>
                        <th>Contact</th>
                        <th>Delivery Address</th>
                        <th>Products</th>
                        <th>Status</th>
                        <th>Order Date</th>
                        <th>Delivery DateTime</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if ($recentOrders && $recentOrders->num_rows > 0): ?>
                        <?php while($order = $recentOrders->fetch_assoc()): ?>
                            <tr>
                                <td><?= htmlspecialchars($order['order_id']) ?></td>
                                <td><?= htmlspecialchars($order['customer_name']) ?></td>
                                <td><?= htmlspecialchars($order['contact']) ?></td>
                                <td><?= nl2br(htmlspecialchars($order['delivery_address'])) ?></td>
                                <td>
                                    <?php
                                        // Display all products associated with the order
                                        echo $order['products_details'];
                                    ?>
                                </td>
                                <td>
                                    <?php
                                        switch ($order['status']) {
                                            case 'Pending':
                                                echo '<span class="badge-status-pending">Pending</span>';
                                                break;
                                            case 'In Progress':
                                                echo '<span class="badge-status-in-progress">In Progress</span>';
                                                break;
                                            case 'Completed':
                                                echo '<span class="badge-status-completed">Completed</span>';
                                                break;
                                            case 'Delivered':
                                                echo '<span class="badge-status-delivered">Delivered</span>';
                                                break;
                                            default:
                                                echo '<span class="badge bg-light text-dark">Unknown</span>';
                                        }
                                    ?>
                                </td>
                                <td><?= htmlspecialchars(date("d M Y, h:i A", strtotime($order['order_date']))) ?></td>
                                <td><?= $order['delivery_datetime'] ? htmlspecialchars(date("d M Y, h:i A", strtotime($order['delivery_datetime']))) : 'N/A' ?></td>
                            </tr>
                        <?php endwhile; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="8" class="text-center">No recent orders.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
        <a href="orders/view_orders.php" class="view-all">View All Orders</a>
    </div>

    <!-- Footer -->
    <div class="footer">
        &copy; 2024 Kaak Alia Bakery. All rights reserved.
    </div>
</main>
    <!-- Embedded Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php
// Flush the output buffer
ob_end_flush();
// No closing PHP tag to prevent unwanted output
?>) design codes to new and use this (redesign this interface with a bakery-inspired, modern e-commerce style for online products, we’ll focus on a light, inviting aesthetic with a white background. We'll use warm, natural colors that are reminiscent of bakery tones, such as soft browns, beige, and light pinks, to create a cozy, friendly feel. This design will provide a clean, professional, and visually appealing experience for users shopping online for bakery items.

1. Background and Layout
Background Color: Use a pure white background for the main panel to create a fresh, clean canvas. This will make bakery images and product details stand out.
Card and Table Borders: Create a "card" effect by adding subtle, soft shadows around product cards and sections. This gives depth to each section, making them feel approachable and light.
Padding and Spacing: Increase the spacing around cards, filters, and sections for a more relaxed, airy feel that mirrors the cozy ambiance of a bakery.
2. Filters Section
Filter Buttons: Style the filter buttons as rounded rectangles or "pill" shapes in a warm gradient, such as from beige to soft brown, to evoke the look of toasted bread or pastries. This makes them inviting and visually distinct.
Date Pickers and Dropdowns: Use outlined fields with soft rounded corners, and change the border color to a warm brown on focus. This enhances the interactive feel without overwhelming the design.
3. Search Bar
Search Field Styling: Style the search bar with a light beige background and a subtle shadow, adding a search icon on the left for usability. Use a soft, warm grey or brown for the border to make the search field feel integrated with the bakery theme.
Search Button: Style the button in a warm brown or honey-yellow tone, which pairs well with the bakery-inspired color palette. Add a slight hover effect, like a subtle shadow or darker shade, to make it interactive.
4. Product Display and Table
Column Headers: Use a friendly sans-serif font in a slightly larger size, with light beige or grey as the background color for the header row. Avoid heavy lines; instead, use a subtle bottom border to separate the header from the content.
Row Backgrounds: Alternate row backgrounds in very light shades, like off-white and beige, to create visual variety without disrupting the overall clean look.
Product Details: Organize product details within each cell in a "card" style format, using smaller fonts and a soft brown color. This layout allows users to easily scan information, and the warm colors keep it visually aligned with a bakery theme.
Status Badges: Use rounded labels with soft pastel backgrounds for product status. For example:
In Stock: Light green with brown text for a fresh look.
Sold Out: Light pink or soft orange to gently communicate unavailability.
Product Labels: Use badge colors that convey warmth and urgency:
New Arrival: Light yellow with dark brown text.
Popular: Soft coral or light brown.
5. Action Buttons
Button Colors and Layout: Style action buttons with warm, natural colors, using gradients or solid fills:
Add to Cart: Soft gradient from light honey to caramel brown for a warm, bakery-inspired look.
View Details: Beige or cream background with brown text, subtly shaded for a clean, light feel.
Remove: Light red gradient from soft pink to a deeper red-brown, blending with the bakery palette.
Button Shape and Iconography: Use rounded pill-shaped buttons with slight shadowing to give them a soft, friendly appearance. Add small icons next to labels (e.g., a shopping cart for "Add to Cart" or an eye icon for "View Details") for clear, easy-to-understand functionality.
6. Typography
Font Choice: Choose a friendly, sans-serif font like "Poppins" or "Nunito" to keep the tone inviting. These fonts are professional yet have rounded, soft features that match a bakery style.
Hierarchy and Emphasis: Use bold or larger fonts for key information like product names and prices. Subtler fonts or lighter colors can be used for secondary details like ingredients or serving sizes, keeping the focus on the main product attributes.
7. Color Palette
Primary Colors: White as the main background, paired with soft brown, beige, and hints of light pink.
Accent Colors: Warm yellows, greens, and subtle coral tones for highlights, such as "New Arrival" or "Popular" labels.
Text Colors: Dark brown for primary text to provide strong contrast against the white background, with softer shades of brown and beige for secondary text. Use white text on buttons and colored labels to maintain contrast.
8. Image and Visuals
Product Images: Use high-quality images with a soft shadow effect to make each product feel highlighted and distinct. Ensure images have a warm tone to match the overall color palette.
Decorative Elements: Consider adding small, subtle icons or illustrations related to baked goods (e.g., bread slices, rolling pins, or a light, faint overlay of wheat patterns) in the background or as dividers between sections. This adds character and reinforces the bakery theme.
These updates will result in a welcoming, bakery-inspired design that emphasizes the warmth and charm associated with bakery products. The light, clean background with cozy brown and beige accents keeps the interface feeling fresh and modern, while soft shadows and rounded elements add a touch of friendliness and approachability. This design will provide an inviting and enjoyable experience for users browsing bakery items online.






) and type full codes and make it one file page