redesigned link collection page

pages/collections/[id].tsx

@@ -73,16 +73,13 @@ export default function Index() {
 
   return (
     <MainLayout>
-      <div className="p-5 flex flex-col gap-5 w-full h-full">
       <div
         style={{
-            backgroundImage: `linear-gradient(-45deg, ${
-              activeCollection?.color
-            }30 10%, ${
+          backgroundImage: `linear-gradient(${activeCollection?.color}20 10%, ${
             settings.theme === "dark" ? "#262626" : "#f3f4f6"
-            } 50%, ${settings.theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
+          } 50%, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
         }}
-          className="border border-solid border-neutral-content rounded-2xl shadow min-h-[10rem] p-5 flex gap-5 flex-col justify-between"
+        className="h-full p-5 flex gap-3 flex-col"
       >
         <div className="flex flex-col sm:flex-row gap-3 justify-between sm:items-start">
           {activeCollection && (
@@ -99,8 +96,11 @@ export default function Index() {
               </div>
             </div>
           )}
+        </div>
 
         {activeCollection ? (
+          <div className={`min-w-[15rem]`}>
+            <div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
               <div
                 className="flex items-center btn px-2 btn-ghost rounded-full w-fit"
                 onClick={() =>
@@ -141,11 +141,25 @@ export default function Index() {
                   </div>
                 ) : null}
               </div>
-            ) : undefined}
+              <p className="text-neutral text-xs">
+                By {collectionOwner.name}
+                {activeCollection.members.length > 0
+                  ? ` and ${activeCollection.members.length} others`
+                  : undefined}
+                .
+              </p>
             </div>
+          </div>
+        ) : undefined}
+
+        {activeCollection?.description ? (
+          <p>{activeCollection?.description}</p>
+        ) : undefined}
+
+        <hr className="border-1 border-neutral" />
 
         <div className="flex justify-between items-end gap-5">
-            <p>{activeCollection?.description}</p>
+          <p>Listing {activeCollection?._count?.links} Bookmarks</p>
           <div className="flex items-center gap-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <div className="relative">
@@ -235,7 +249,7 @@ export default function Index() {
             </div>
           </div>
         </div>
-        </div>
+
         {links.some((e) => e.collectionId === Number(router.query.id)) ? (
           <div className="grid grid-cols-1 2xl:grid-cols-3 xl:grid-cols-2 gap-5">
             {links