feat: shopping cart page
diff --git a/erpnext/templates/pages/cart.html b/erpnext/templates/pages/cart.html
index 3033d15..2cabf5a 100644
--- a/erpnext/templates/pages/cart.html
+++ b/erpnext/templates/pages/cart.html
@@ -2,7 +2,7 @@
 
 {% block title %} {{ _("Shopping Cart") }} {% endblock %}
 
-{% block header %}<h1>{{ _("Shopping Cart") }}</h1>{% endblock %}
+{% block header %}<h3 class="shopping-cart-header mt-2 mb-6">{{ _("Shopping Cart") }}</h1>{% endblock %}
 
 <!--
 {% block script %}
@@ -18,94 +18,119 @@
 
 {% from "templates/includes/macros.html" import item_name_and_description %}
 
+{% if doc.items %}
 <div class="cart-container">
-	<div id="cart-error" class="alert alert-danger" style="display: none;"></div>
+	<div class="row m-0">
+		<div class="col-md-8 frappe-card p-5">
+			<div>
+				<div id="cart-error" class="alert alert-danger" style="display: none;"></div>
+				<div class="cart-items-header">
+					{{ _('Items') }}
+				</div>
+				<table class="table mt-3 cart-table">
+					<thead>
+						<tr>
+							<th width="60%">{{ _('Item') }}</th>
+							<th width="20%">{{ _('Quantity') }}</th>
+							{% if cart_settings.enable_checkout %}
+							<th width="20%" class="text-right">{{ _('Subtotal') }}</th>
+							{% endif %}
+						</tr>
+					</thead>
+					<tbody class="cart-items">
+						{% include "templates/includes/cart/cart_items.html" %}
+					</tbody>
+					{% if cart_settings.enable_checkout %}
+					<tfoot class="cart-tax-items">
+						{% include "templates/includes/order/order_taxes.html" %}
+					</tfoot>
+					{% endif %}
+				</table>
+			</div>
+			<div class="row">
+				<div class="col-4">
+					{% if cart_settings.enable_checkout %}
+					<a class="btn btn-outline-primary" href="/orders">
+						{{ _('See past orders') }}
+					</a>
+					{% else %}
+					<a class="btn btn-outline-primary" href="/quotations">
+						{{ _('See past quotations') }}
+					</a>
+					{% endif %}
+				</div>
+				<div class="col-8">
+					{% if doc.items %}
+					<div class="place-order-container">
+						{% if cart_settings.enable_checkout %}
+							<button class="btn btn-primary btn-place-order" type="button">
+								{{ _("Place Order") }}
+							</button>
+						{% else %}
+							<button class="btn btn-primary btn-request-for-quotation" type="button">
+								{{ _("Request for Quotation") }}
+							</button>
+						{% endif %}
+					</div>
+					{% endif %}
+				</div>
+			</div>
 
-	{% if doc.items %}
-	<table class="table table-bordered mt-3">
-		<thead>
-			<tr>
-				<th width="60%">{{ _('Item') }}</th>
-				<th width="20%" class="text-right">{{ _('Quantity') }}</th>
-				{% if cart_settings.enable_checkout %}
-				<th width="20%" class="text-right">{{ _('Subtotal') }}</th>
-				{% endif %}
-			</tr>
-		</thead>
-		<tbody class="cart-items">
-			{% include "templates/includes/cart/cart_items.html" %}
-		</tbody>
-		{% if cart_settings.enable_checkout %}
-		<tfoot class="cart-tax-items">
-			{% include "templates/includes/order/order_taxes.html" %}
-		</tfoot>
-		{% endif %}
-	</table>
-	{% else %}
-	<p class="text-muted">{{ _('Your cart is Empty') }}</p>
-	{% endif %}
 
-	{% if doc.items %}
-		<div class="place-order-container">
-			{% if cart_settings.enable_checkout %}
-				<button class="btn btn-primary btn-place-order" type="button">
-					{{ _("Place Order") }}
-				</button>
-			{% else %}
-				<button class="btn btn-primary btn-request-for-quotation" type="button">
-					{{ _("Request for Quotation") }}
-				</button>
+			{% if doc.items %}
+			{% if doc.tc_name %}
+				<div class="terms-and-conditions-link">
+					<a href class="link-terms-and-conditions" data-terms-name="{{ doc.tc_name }}">
+						{{ _("Terms and Conditions") }}
+					</a>
+					<script>
+						frappe.ready(() => {
+							$('.link-terms-and-conditions').click((e) => {
+								e.preventDefault();
+								const $link = $(e.target);
+								const terms_name = $link.attr('data-terms-name');
+								show_terms_and_conditions(terms_name);
+							})
+						});
+						function show_terms_and_conditions(terms_name) {
+							frappe.call('erpnext.shopping_cart.cart.get_terms_and_conditions', { terms_name })
+							.then(r => {
+								frappe.msgprint({
+									title: terms_name,
+									message: r.message
+								});
+							});
+						}
+					</script>
+				</div>
 			{% endif %}
 		</div>
-	{% endif %}
 
-	{% if doc.items %}
-	{% if doc.tc_name %}
-		<div class="terms-and-conditions-link">
-			<a href class="link-terms-and-conditions" data-terms-name="{{ doc.tc_name }}">
-				{{ _("Terms and Conditions") }}
-			</a>
-			<script>
-				frappe.ready(() => {
-					$('.link-terms-and-conditions').click((e) => {
-						e.preventDefault();
-						const $link = $(e.target);
-						const terms_name = $link.attr('data-terms-name');
-						show_terms_and_conditions(terms_name);
-					})
-				});
-				function show_terms_and_conditions(terms_name) {
-					frappe.call('erpnext.shopping_cart.cart.get_terms_and_conditions', { terms_name })
-					.then(r => {
-						frappe.msgprint({
-							title: terms_name,
-							message: r.message
-						});
-					});
-				}
-			</script>
+		<div class="col-md-4">
+			<div class="cart-addresses">
+				{% include "templates/includes/cart/cart_address.html" %}
+				</div>
 		</div>
-	{% endif %}
-
-	<div class="cart-addresses mt-5">
-	{% include "templates/includes/cart/cart_address.html" %}
+		{% endif %}
 	</div>
-	{% endif %}
 </div>
-
-<div class="row mt-5">
-	<div class="col-12">
-		{% if cart_settings.enable_checkout %}
-		<a href="/orders">
+{% else %}
+<div class="cart-empty frappe-card">
+	<div class="cart-empty-state">
+		<img src="/assets/erpnext/images/ui-states/cart-empty-state.png" alt="Empty State">
+	</div>
+	<div class="cart-empty-message mt-4">{{ _('Your cart is Empty') }}</p>
+	{% if cart_settings.enable_checkout %}
+		<a class="btn btn-outline-primary" href="/orders">
 			{{ _('See past orders') }}
 		</a>
 		{% else %}
-		<a href="/quotations">
+		<a class="btn btn-outline-primary" href="/quotations">
 			{{ _('See past quotations') }}
 		</a>
-		{% endif %}
-	</div>
+	{% endif %}
 </div>
+{% endif %}
 
 {% endblock %}