refactor: improve profile card styling and functionality

pkg/blocks/cards/profile.templ

@@ -1,20 +1,27 @@
 package cards
 
-templ SonrProfile(address string, handle string, name string, chainID string, creationBlock string) {
-	<div class="profile-card">
-		<div class="text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-cyan-900 to-cyan-500 p-4 py-5 px-5 rounded-xl">
+type SonrProfileData struct {
+	Address       string
+	Handle        string
+	Name          string
+	ChainID       string
+	CreationBlock string
+}
+
+templ SonrProfile(addr string, name string, handle string, creationBlock string) {
+	<div class="profile-card min-w-[320px]">
+		<div class="text-white max-w-xs my-auto mx-auto bg-gradient-to-r from-purple-800 to-purple-400 p-4 py-5 px-5 rounded-xl">
 			<div class="flex justify-between">
 				<div>
-					<h2>{ chainID }</h2>
+					<h3>sonr-testnet-1</h3>
 					<p class="text-2xl font-bold">{ handle }</p>
 				</div>
-				<div class="flex items-center ">
-					<div class="p-5 bg-gray-200 bg-opacity-40 rounded-full"></div>
-					<div class="p-5 bg-gray-200 bg-opacity-30 rounded-full -ml-4"></div>
+				<div class="flex items-center opacity-60">
+					<sl-icon style="font-size: 52px;" library="sonr" name="sonr-fill"></sl-icon>
 				</div>
 			</div>
 			<div class="mt-5 flex justify-between items-center w-52">
-				<span class="text-lg">{ address }</span>
+				<span class="text-lg font-mono">{ shortenAddress(addr) }</span>
 			</div>
 			<div class="flex justify-between mt-5 w-48 ">
 				<div>
@@ -29,3 +36,11 @@ templ SonrProfile(address string, handle string, name string, chainID string, cr
 		</div>
 	</div>
 }
+
+// Helper function to shorten address
+func shortenAddress(address string) string {
+	if len(address) <= 20 {
+		return address
+	}
+	return address[:16] + "..." + address[len(address)-4:]
+}