fix: rename contacts page and update layout; enhance styling for better UX

app/globals.css

@@ -19,3 +19,48 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.url-wrapper {
+  background: var(--main);
+  max-height: 80px;
+  width: 100%;
+}
+
+.url-item {
+  display: flex;
+  border-radius: 1.125rem;
+}
+
+.url-avatar {
+  width: 80px;
+  height: 80px;
+  background-size: cover;
+  border-radius: 0; /* rounded-none */
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.url-info {
+  flex-shrink: 1;
+  padding-left: 0.75rem; /* pl-3 */
+  padding-top: 0.5rem; /* pt-2 */
+  margin-top: 0.25rem; /* my-1 */
+  margin-bottom: 0.25rem; /* my-1 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.url-name {
+  font-size: 1.25rem; /* text-xl */
+  font-weight: 700; /* font-bold */
+  margin-top: 0.25rem; /* my-1 */
+  margin-bottom: 0.25rem; /* my-1 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.transition-shadow {
+  transition: box-shadow 0.3s ease-in-out;
+}