feat: add billing usage component to cards page

preview/pages/cards.html

@@ -59,6 +59,7 @@ permalink: cards.html
 		</a>
 	</div>
 	<div class="col-md-6 col-lg-3">
+		{% include "cards/anomaly-alert.html" %}
 	</div>
 
 	<div class="col-md-6 col-lg-3">
@@ -197,6 +198,7 @@ permalink: cards.html
 	<div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements="more,>switch" %}</div>
 	<div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements=">avatars" %}</div>
 
+	<div class="col-md-6 col-lg-4">{% include "cards/billing-usage.html" %}</div>
 	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
 	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
 	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>

shared/includes/cards/anomaly-alert.html

@@ -0,0 +1,7 @@
+<div class="card">
+	<div class="card-body text-center">
+		<h3 class="card-title">Get alerted for anomalies</h3>
+		<p class="text-secondary">Automatically monitor your projects for anomalies and get notified.</p>
+		{% include "ui/button.html" text="Get 30 days for free" color="dark" %}
+	</div>
+</div>

shared/includes/cards/billing-usage.html

@@ -0,0 +1,69 @@
+<div class="card">
+	<div class="card-body">
+		<div class="d-flex justify-content-between align-items-center mb-4">
+			<div>30 days remaining in cycle</div>
+			{% include "ui/button.html" text="Billing" %}
+		</div>
+
+		<div class="row mb-4">
+			<div class="col">
+				<div class="text-secondary small mb-1">Included Credit</div>
+				<div class="mb-2">$4.22 / $20</div>
+				{% include "ui/progress.html" value="21.1" size="sm" color="primary" %}
+			</div>
+			<div class="col-auto text-end">
+				<div class="text-secondary small mb-1">On-Demand Charges</div>
+				<div>$0</div>
+			</div>
+		</div>
+
+		<div class="space-y space-y-2">
+			<div class="d-flex justify-content-between">
+				<div>Edge Function Execution Units</div>
+				<div>$2.00</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>Edge Middleware Invocations</div>
+				<div>$0.65</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>Function Invocations</div>
+				<div>$0.60</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>On-Demand Concurrent Build Minutes</div>
+				<div>$0.32</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>Fluid Active CPU</div>
+				<div>$0.19</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>Function Duration</div>
+				<div>$0.18</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>Image Optimization Transformation</div>
+				<div>$0.10</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>Fast Origin Transfer</div>
+				<div>$0.08</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>Fluid Provisioned Memory</div>
+				<div>$0.04</div>
+			</div>
+			<div class="d-flex justify-content-between">
+				<div>Image Optimization Cache Writes</div>
+				<div>$0.02</div>
+			</div>
+		</div>
+
+		<div class="text-center mt-4">
+			<button class="btn btn-icon" aria-label="Expand">
+				{% include "ui/icon.html" icon="arrow-up" %}
+			</button>
+		</div>
+	</div>
+</div>