in this codes (<?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
?>) change the deisgn and make it cool (refine the design to make it modern, clean, and professional while maintaining a subtle, sophisticated hint of the bakery theme. This approach will result in an interface that feels both contemporary and warm, ideal for an upscale online bakery platform.

1. Background and Layout
Background Color: Use a crisp white background for the entire interface. This creates a professional, high-end look and allows the products to be the main focus.
Card and Table Shadows: Implement minimal shadows on product cards and tables for a sleek "floating" effect. This adds depth without overcrowding the design, keeping it light and professional.
Padding and Spacing: Increase spacing around elements to create an airy layout, making the interface feel open and reducing visual clutter.
2. Filters Section
Filter Buttons: Use pill-shaped filter buttons in a neutral palette, like cool greys or soft charcoal, with a gradient accent. This keeps the design sleek and modern while adding a subtle highlight.
Date Pickers and Dropdowns: Use outlined fields with a thin grey border. When clicked, the border color changes to a soft accent color (e.g., light grey or teal) to enhance interactivity.
3. Search Bar
Search Field Styling: Incorporate a modern search bar with a grey border and a magnifying glass icon inside the field for usability. On focus, the border color should change to a darker grey, creating a professional highlight effect.
Search Button: Use a rounded, solid button in a soft grey or cool-toned accent color. Adding a slight shadow or a darkened border on hover makes it feel interactive while remaining understated.
4. Product Display and Table
Column Headers: Use a sans-serif font like "Inter" or "Roboto" in a slightly larger size and bold weight for headers. Style headers with a very light grey background and a single underline to separate them from the content rows, giving a minimalist appearance.
Row Backgrounds: Use alternating light grey and white backgrounds for rows to improve readability without adding visual noise.
Product Details: Arrange product details in a clean, vertical layout within each cell. This could include the product name, price, and description, each on a new line in a smaller, lighter font.
Status Badges: Design status labels with modern colors and rounded edges. For example:
Available: A muted green label with white text.
Out of Stock: Light grey with dark text to indicate unavailability in a subtle way.
New Arrival: Soft blue with white text to add a touch of vibrancy without overpowering the layout.
5. Action Buttons
Button Colors and Layout: Use clean, solid-colored buttons with slight gradients for emphasis, keeping the colors muted to match the professional tone:
Add to Cart: Soft grey-blue or charcoal to fit the modern look.
View Details: Neutral grey with a slight hover effect, like darkening the button or adding a shadow.
Remove: Soft, muted red for "Remove" to indicate caution without looking aggressive.
Button Shape and Iconography: Use rounded buttons with slight shadowing to give them a subtle, floating effect. Small icons next to the text (e.g., shopping cart icon for "Add to Cart") can add clarity to the buttons without adding too much visual weight.
6. Typography
Font Choice: Choose a modern sans-serif font like "Inter," "Roboto," or "Open Sans" to keep the text clean and professional. Use different weights to establish hierarchy, such as bold for product names and regular or light for details.
Hierarchy and Emphasis: Increase font sizes for key information like product names and headers. Keep secondary details in a smaller, lighter font for contrast and readability.
7. Color Palette
Primary Colors: White and light grey for a clean, modern background. Dark grey or charcoal can be used for text to maintain high contrast.
Accent Colors: Muted blues, greens, and a touch of soft red for status indicators or subtle highlights on buttons.
Text Colors: Dark grey or black for primary text for readability, with lighter shades of grey for secondary information.
8. Image and Visuals
Product Images: Use high-resolution images with a subtle shadow around each to give them a polished look. Keeping the images well-lit and professionally styled adds to the upscale aesthetic.
Minimal Decorative Elements: For a more modern and professional look, limit decorative elements. Instead, rely on clean lines, soft shadows, and whitespace for visual structure.
9. Interactive Elements and Transitions
Hover and Focus Effects: Add subtle transitions when hovering over interactive elements like buttons and filter options. For instance, slightly darken the color or add a shadow to indicate interactivity.
Load Animations: When loading new products or applying filters, consider adding a minimalist fade-in effect to maintain a smooth, modern user experience.
10. Product Highlights and Labels
Featured Products or Discounts: Use a sleek "badge" design in a soft accent color like muted teal or grey-blue for featured products, bestsellers, or discounts. Keep the text small and centered for a refined look.
This design approach will create a clean, modern UI that feels both professional and sophisticated, with a hint of bakery warmth through subtle accent colors. By using minimalistic layouts, rounded buttons, and a balanced color palette, the interface will look polished and user-friendly, ideal for an online bakery platform focused on a professional shopping experience.






) and type full codes