feat(dash): improved frontend dashboard (#6)

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #6

src/components/pricing_card.rs

@@ -0,0 +1,46 @@
+use crate::models::PricingPlan;
+use dioxus::prelude::*;
+
+/// Renders a pricing plan card with features list and call-to-action button.
+///
+/// # Arguments
+///
+/// * `plan` - The pricing plan data to render
+/// * `on_select` - Callback fired when the CTA button is clicked
+#[component]
+pub fn PricingCard(plan: PricingPlan, on_select: EventHandler<String>) -> Element {
+    let card_class = if plan.highlighted {
+        "pricing-card pricing-card--highlighted"
+    } else {
+        "pricing-card"
+    };
+
+    let seats_label = match plan.max_seats {
+        Some(n) => format!("Up to {n} seats"),
+        None => "Unlimited seats".to_string(),
+    };
+
+    rsx! {
+        div { class: "{card_class}",
+            h3 { class: "pricing-card-name", "{plan.name}" }
+            div { class: "pricing-card-price",
+                span { class: "pricing-card-amount", "{plan.price_eur}" }
+                span { class: "pricing-card-period", " EUR / month" }
+            }
+            p { class: "pricing-card-seats", "{seats_label}" }
+            ul { class: "pricing-card-features",
+                for feature in &plan.features {
+                    li { "{feature}" }
+                }
+            }
+            button {
+                class: "pricing-card-cta",
+                onclick: {
+                    let id = plan.id.clone();
+                    move |_| on_select.call(id.clone())
+                },
+                "Get Started"
+            }
+        }
+    }
+}