fix: cards now have equal heights with action links aligned at bottom

Author: bokhtachekhawla

src/content/docs/index.mdx

@@ -26,23 +26,23 @@ This documentation represents a curated collection of industry-proven practices,
 
 <CardGrid stagger>
 	<Card title="React Development" icon="seti:react">
-		Complete guides for React applications: project structure, state management, performance optimization, and authentication patterns.
-		[Explore React →](react/project-structure/)
+		<div>Complete guides for React applications: project structure, state management, performance optimization, and authentication patterns.</div>
+		<p>[Explore React →](react/project-structure/)</p>
 	</Card>
 	<Card title="Express Backend" icon="node">
-		Backend development with Express.js: API design, security, testing, performance, and deployment strategies.
-		[Explore Express →](express/project-structure/)
+		<div>Backend development with Express.js: API design, security, testing, performance, and deployment strategies.</div>
+		<p>[Explore Express →](express/project-structure/)</p>
 	</Card>
 	<Card title="Flutter Mobile" icon="seti:dart">
-		Mobile app development: Flutter architecture, state management, navigation, and cross-platform best practices.
-		[Explore Flutter →](flutter/project-structure/)
+		<div>Mobile app development: Flutter architecture, state management, navigation, and cross-platform best practices.</div>
+		<p>[Explore Flutter →](flutter/project-structure/)</p>
 	</Card>
 	<Card title="Code Standards" icon="document">
-		Coding conventions, linting rules, and best practices to maintain clean, consistent, and maintainable codebases.
-		[Check Guidelines →](code-guidelines/general/)
+		<div>Coding conventions, linting rules, and best practices to maintain clean, consistent, and maintainable codebases.</div>
+		<p>[Check Guidelines →](code-guidelines/general/)</p>
 	</Card>
 	<Card title="Quick Start" icon="rocket">
-		New to the team? Start here for essential onboarding information and contribution guidelines.
-		[Get Started →](overview/what-is-gdg-docs/)
+		<div>New to the team? Start here for essential onboarding information and contribution guidelines.</div>
+		<p>[Get Started →](overview/what-is-gdg-docs/)</p>
 	</Card>
 </CardGrid>

src/tailwind.css

@@ -31,3 +31,28 @@
   --sl-color-gray-7: #f5f6f8;
   --sl-color-black: #ffffff;
 }
+
+/* EQUAL HEIGHT CARDS WITH BOTTOM ALIGNED LINKS */
+.card {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.card .body {
+  display: flex !important;
+  flex-direction: column !important;
+  flex: 1 !important;
+  gap: 0 !important;
+}
+
+.card .body > div:first-child {
+  flex: 1 !important;
+  margin: 0 !important;
+}
+
+.card .body > p:last-child {
+  margin: 0 !important;
+  margin-top: 1rem !important;
+  padding: 0 !important;
+}