From 2ead93dbd5d532496622121cc87c89c4f1abd6c3 Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Tue, 17 May 2022 21:57:13 +0100
Subject: [PATCH 1/2] aspect ratio of images corrected, badges added

---
 learn.db              | Bin 20480 -> 20480 bytes
 src/ItemDetail.svelte | 104 +++++++++++++++---------------------------
 templates/index.html  |   2 +-
 3 files changed, 39 insertions(+), 67 deletions(-)

diff --git a/learn.db b/learn.db
index 9e94015876647de3c8180cf20ef3adf9f94a0207..5cdbd9ca6aa9f5592caf5bb3a4ae90d94896d1ac 100644
GIT binary patch
delta 256
zcmZozz}T>WaRZBj7$@Ir2L4z4r}@|LPvFnu_v1I>=jMC8Sy132U%ebBo1r8xFK<Cn
zetJ=2Zf<5?x?XyIPGVlVJD61EV6znDl}3@zN-Rq(PA<wUDDeu;$Sf|&FRGMcXVVo$
zGp4AtxFiUOrP#2^B~=EMCRI+((sySD>YKbp-&z@@KcliZGr2ebLh&*%FtBnzVc`46
zSHPRc^Njn+#>PwB%#HP|n_t>6GBUDEer?;%$h;WHVd7?*Tx#D9lw+Ly(&qmn2LS+!
C6;k;C

delta 110
zcmZozz}T>WaRZA2A1i+r1OF@j)BJ1rC-7%&78Ho!pPZ%d&dk8TFnNo<wIYx%$fzvN
zOfC+9P`p497M^De{6%~Pyf1j3ZEU>8!`xWUvbfNek%^Ug@=Kd`MyAa`4iHQ(w(DNx
GAOHaN#2|VA

diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 59a9569..74c92c7 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -6,7 +6,6 @@
         .then(r => r.json())
         .then(data => {
             item = data[itemid];
-            console.log(item)
         });
 
 </script>
@@ -16,55 +15,28 @@
     <div class="mb-10 flex h-64">
       <!-- book image  -->
       <div>
-        <img class="float-left mr-6 mb-6 h-64 w-44 transform rounded-md border border-purple-200 shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
+        <img class="float-left mr-6 mb-6 aspect-auto transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
       </div>
       <!-- book details  -->
       <div class="ml-6 flex w-full flex-col justify-between">
-        
         <!-- title, sub title, author  -->
-        <div>
-          <section>
-            <h1 class="text-2xl">{item.name}</h1>
-            <p class="font text-gray-500">Into Several Rmote Regions of the World</p>
-            <span class="text-sm">{item.creator}</span>
-          </section>
-          <!-- ratings and upload buttons -->
-          <div class="mt-2 mb-6 flex justify-between">
-            <div>
-              <span>★★★★★</span>
-              <br />
-              <span class="text-sm text-gray-500">333 Ratings</span>
-            </div>
-            <div class="flex items-center justify-center gap-3 text-gray-500">
-              <!-- upload svg  -->
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-              </svg>
-              <!-- verticle dots  -->
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-              </svg>
-            </div>
+        <section>
+          <h1 class="text-2xl">{item.name}</h1>
+          <p class="font text-gray-500">Into Several Rmote Regions of the World</p>
+          <span class="text-sm">{item.creator}</span>
+        </section>
+        <!-- ratings and upload buttons -->
+        <div class="mt-2 mb-6 flex justify-between">
+          <div>
+            <span class="text-yellow-500">★★★★★</span>
+            <br />
+            <span class="text-sm text-gray-500">333 Ratings</span>
+          </div>
+          <div class="flex items-center justify-center gap-3 text-gray-500">
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> Book </span>
+
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-gray-800"> Video </span>
           </div>
-  
-          <hr />
-        </div>
-  
-        <!-- action buttons  -->
-        <div class="mt-10 grid grid-cols-3 place-items-center gap-1 text-gray-800">
-          <button class="w-full rounded-md border border-gray-300 py-0.5 text-sm shadow">Get</button>
-          <button class="flex w-full items-center justify-center gap-1 rounded-md border border-gray-300 py-0.5 text-sm shadow">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            Want to Read
-          </button>
-          <button class="flex w-full items-center justify-center gap-1 rounded-md border border-gray-300 py-0.5 text-sm shadow">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-            </svg>
-            Sample
-          </button>
         </div>
       </div>
     </div>
@@ -76,8 +48,8 @@
     </section>
     <hr />
     <!-- details  -->
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 divide-x-2 py-5">
-      <div class="flex flex-col justify-between items-center gap-1">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
+      <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
         <div class="flex flex-col items-center">
           <h3 class="uppercase text-xs text-gray-400">genre</h3>
           <!-- book svg  -->
@@ -90,7 +62,7 @@
         <span class="text-xs">Fiction</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
         <div class="flex flex-col items-center">
           <h3 class="uppercase text-xs text-gray-400">released</h3>
           <span>1729</span>
@@ -98,7 +70,7 @@
         <span class="text-xs">December 31</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
         <div class="flex flex-col items-center">
           <h3 class="uppercase text-xs text-gray-400">language</h3>
           <span>EN</span>
@@ -106,7 +78,7 @@
         <span class="text-xs">English</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
         <div class="flex flex-col items-center">
           <h3 class="uppercase text-xs text-gray-400">Length</h3>
           <span>209</span>
@@ -114,14 +86,14 @@
         <span class="text-xs">Pages</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
         <h3 class="uppercase text-xs text-gray-400">Publisher</h3>
         <span></span>
         <br />
         <span class="text-xs">Public Domain</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
         <div class="flex flex-col items-center">
           <h3 class="uppercase text-xs text-gray-400">Size</h3>
           <span>310.4</span>
@@ -170,7 +142,7 @@
       <div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -181,7 +153,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -192,7 +164,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -203,7 +175,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -214,7 +186,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -225,7 +197,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -236,7 +208,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -257,49 +229,49 @@
         <div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
diff --git a/templates/index.html b/templates/index.html
index 51e84e9..6317b7f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full bg-gray-100">
+<html lang="en" class="">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

From 1b25390996c2843966cec18721d22a7566524e4a Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Thu, 19 May 2022 09:53:05 +0100
Subject: [PATCH 2/2] action button added

---
 db/items.csv                 |  10 ++++
 learn.db                     | Bin 20480 -> 20480 bytes
 src/Button.svelte            |   9 ++++
 src/Explore.svelte           |   5 --
 src/Home.svelte              |   6 +--
 src/ItemCard.svelte          |  10 ++--
 src/ItemDetail.svelte        |  92 +++++++++++++++++++++++++----------
 src/TopicDetail.svelte       |   2 +-
 src/TopicMasonryGrid.svelte  |   2 +-
 src/WantToLearnButton.svelte |  18 +++++++
 10 files changed, 115 insertions(+), 39 deletions(-)
 create mode 100644 src/Button.svelte
 create mode 100644 src/WantToLearnButton.svelte

diff --git a/db/items.csv b/db/items.csv
index 73163f5..1387d42 100644
--- a/db/items.csv
+++ b/db/items.csv
@@ -4,3 +4,13 @@ sapiens no image,,,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3
 sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
 sapiens video image,,https://img.youtube.com/vi/p5PvHlk3yig/0.jpg,video|https://www.youtube.com/watch?v=p5PvHlk3yig,history;physics
 sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens no image,,,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind,history
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens video image,,https://img.youtube.com/vi/p5PvHlk3yig/0.jpg,video|https://www.youtube.com/watch?v=p5PvHlk3yig,history;physics
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens no image,,,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind,history
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
+sapiens video image,,https://img.youtube.com/vi/p5PvHlk3yig/0.jpg,video|https://www.youtube.com/watch?v=p5PvHlk3yig,history;physics
+sapiens book image,,https://learn-awesome.github.io/assets/book_covers/23692271.jpg,book|https://learnawesome.org/items/6c2ef4c8-a018-430a-9173-3868310a03ea-sapiens-a-brief-history-of-humankind;video|https://www.youtube.com/watch?v=p5PvHlk3yig,history
diff --git a/learn.db b/learn.db
index 5cdbd9ca6aa9f5592caf5bb3a4ae90d94896d1ac..336f0a5a28fd328ae2c8b655bde042bcec6fdaae 100644
GIT binary patch
delta 127
zcmZozz}T>WaRZBi5<l}A2EKoM1-yAY&$yp(J>m-C4B|M&euC{7n+2;G%R1&Y8ynl0
znH%f*7Z=(xGO_YaereOr$h#THVPxc)Tx{3N$PJdM=YlBU1S{ZxC}0OGV1p=N1yP%y
I+eiun0Iwe<od5s;

delta 41
xcmZozz}T>WaRZA1A1n702EKoM1-yAY&$yp#Y`nzH+*r@LxX_ky^K%<XVE`$Q4tf9p

diff --git a/src/Button.svelte b/src/Button.svelte
new file mode 100644
index 0000000..8185fe1
--- /dev/null
+++ b/src/Button.svelte
@@ -0,0 +1,9 @@
+<script>
+
+</script>
+
+<span class="relative z-0 inline-flex rounded-md mt-5 flex-nowrap">
+  <button type="button" class="relative inline-flex flex-nowrap items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 ">Want to Learn</button>
+  
+  <button type="button" class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Finished</button>
+</span>
\ No newline at end of file
diff --git a/src/Explore.svelte b/src/Explore.svelte
index 0dc6bc5..e69de29 100644
--- a/src/Explore.svelte
+++ b/src/Explore.svelte
@@ -1,5 +0,0 @@
-<script>
-
-</script>
-
-<h1 class="text-3xl font-bold">Explore</h1>
\ No newline at end of file
diff --git a/src/Home.svelte b/src/Home.svelte
index ddee5b8..eca76a9 100644
--- a/src/Home.svelte
+++ b/src/Home.svelte
@@ -4,11 +4,11 @@
         <h1>
           <span class="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base">Coming soon</span>
           <span class="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
-            <span class="block text-gray-900">Data to enrich your</span>
-            <span class="block text-indigo-600">online business</span>
+            <span class="block text-gray-900">LearnAwesome</span>
+            <span class="block text-indigo-600">Humanity's learning map</span>
           </span>
         </h1>
-        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua ad ad non deserunt sunt.</p>
+        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">Today's learning platforms are not actually learner-centric. They want the students to be locked within their apps & websites, learn ONLY from their own content and their own preferred formats. But the way we learn in 21st century is far too rich. We learn from blogs, podcasts, videos, tweetstorms, livestreams, games, newsletters, infographics, Q&A sites, forums and much more. Discovering the right kind of learning material for YOU at the right time is still too hard.</p>
       </div>
       <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
         <svg class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden" width="640" height="784" fill="none" viewBox="0 0 640 784" aria-hidden="true">
diff --git a/src/ItemCard.svelte b/src/ItemCard.svelte
index 9603887..ca74582 100644
--- a/src/ItemCard.svelte
+++ b/src/ItemCard.svelte
@@ -2,10 +2,12 @@
     export let item;
 </script>
 
-<a class="flex flex-col mb-8" href="#/item/{item.rowid}">
-    <img class="h-64 w-44 mr-6 mb-6 float-left border border-purple-200 rounded-md shadow-md md:shadow-xl transform transition ease-out duration-300 hover:scale-105" 
-      src={item.image} alt="">
-    <div class="flex-1 text-base font-semibold text-yellow-400">★ ★ ★ ★ ★</div>
+<a class="flex flex-col mb-8 bg-indigo-700 justify-center overflow-hidden" href="#/item/{item.rowid}">
+  <div class="flex justify-center">
+    <img class="h-64 max-w-sm object-contain py-2 mb-6 float-left rounded-md transform transition ease-out duration-300 hover:scale-105" 
+      src={item.image} alt="{item.name}">
+  </div>
+    <span class="flex-1 text-base font-semibold text-yellow-400">★ ★ ★ ★ ★</span>
 </a>
 
 
diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 74c92c7..121fc34 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -1,4 +1,6 @@
 <script>
+    import WantToLearnButton from './WantToLearnButton.svelte';
+    import Button from "./Button.svelte";
     export let itemid;
     let item;
 
@@ -12,13 +14,13 @@
 
 {#if item}
   <main class="px-12 py-10">
-    <div class="mb-10 flex h-64">
+    <div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
       <!-- book image  -->
-      <div>
-        <img class="float-left mr-6 mb-6 aspect-auto transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
+      <div class="flex-nowrap">
+        <img class=" mr-6 mb-6 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
       </div>
       <!-- book details  -->
-      <div class="ml-6 flex w-full flex-col justify-between">
+      <div class="sm:ml-6 md:ml-0 lg:ml-6 flex w-full flex-col justify-between">
         <!-- title, sub title, author  -->
         <section>
           <h1 class="text-2xl">{item.name}</h1>
@@ -26,21 +28,28 @@
           <span class="text-sm">{item.creator}</span>
         </section>
         <!-- ratings and upload buttons -->
-        <div class="mt-2 mb-6 flex justify-between">
-          <div>
-            <span class="text-yellow-500">★★★★★</span>
-            <br />
-            <span class="text-sm text-gray-500">333 Ratings</span>
+        <div class="mt-2 mb-6 flex flex-col justify-between">
+          <div class="flex justify-between items-center">
+            <div>
+              <span class="text-yellow-500">★★★★★</span>
+              <br />
+              <span class="text-xs text-gray-500">333 Ratings</span>
+            </div>
+            
+            <Button />
           </div>
-          <div class="flex items-center justify-center gap-3 text-gray-500">
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> Book </span>
+          
 
-            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-gray-800"> Video </span>
+          <div class="flex items-center justify-start gap-3 text-gray-500 mt-5">
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-400 text-gray-800"> Book </span>
+
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-400 text-gray-800"> Video </span>
           </div>
         </div>
       </div>
     </div>
     <hr />
+    
     <!-- Description  -->
     <section class="my-8">
       <h2 class="text-base font-bold">Description</h2>
@@ -103,28 +112,57 @@
 
     </div>
     <hr />
-    <!-- Customer review  -->
+    <!-- review  -->
     <section class="my-8">
       <div class="flex justify-between items-center">
-        <h2 class="text-base font-bold">Customer Reviews</h2>
-        <button class="text-xs">See All</button>
+        <h2 class="text-base font-bold">Reviews</h2>
       </div>
       
-      <div class="grid grid-cols-1 md:grid-cols-2 mt-3 gap-2">
-        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs">
+      <div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2">
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
           <h3 class="font-semibold">About the book</h3>
           <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
-          <div>
+          <div class="mt-3">
             <span>★★★★★</span>
             <span class="ml-2">Sep 22, 2021</span>
             <span class="ml-2">Priyanka Trivedi</span>
           </div>
         </article>
   
-        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs">
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
           <h3 class="font-semibold">About the book</h3>
           <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
-          <div>
+          <div class="mt-3">
+            <span>★★★★★</span>
+            <span class="ml-2">Sep 22, 2021</span>
+            <span class="ml-2">Priyanka Trivedi</span>
+          </div>
+        </article>
+
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
+          <h3 class="font-semibold">About the book</h3>
+          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
+          <div class="mt-3">
+            <span>★★★★★</span>
+            <span class="ml-2">Sep 22, 2021</span>
+            <span class="ml-2">Priyanka Trivedi</span>
+          </div>
+        </article>
+
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
+          <h3 class="font-semibold">About the book</h3>
+          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
+          <div class="mt-3">
+            <span>★★★★★</span>
+            <span class="ml-2">Sep 22, 2021</span>
+            <span class="ml-2">Priyanka Trivedi</span>
+          </div>
+        </article>
+
+        <article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
+          <h3 class="font-semibold">About the book</h3>
+          <p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
+          <div class="mt-3">
             <span>★★★★★</span>
             <span class="ml-2">Sep 22, 2021</span>
             <span class="ml-2">Priyanka Trivedi</span>
@@ -134,12 +172,13 @@
     </section>
     <hr />
     <!-- more books by same author  -->
-    <section class="my-8 overflow-hidden">
+
+    <!-- <section class="my-8 overflow-hidden">
       <div class="flex justify-between items-center">
         <h2 class="text-base font-bold">More Books by Priyanka Trivedi</h2>
         <button class="float-right text-xs hover:underline">See All</button>
       </div>
-      <div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
+      <div class="flex pb-5 mt-3 gap-2 w-full overflow-x-auto">
         <div class="shrink-0">
           <div class="" >
             <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
@@ -217,10 +256,13 @@
           </div>
         </div>
       </div>  
+    
     </section>
-    <hr />
+    <hr /> -->
+
     <!-- Also bought  -->
-    <section class="my-8 overflow-hidden">
+
+    <!-- <section class="my-8 overflow-hidden">
       <div class="flex justify-between items-center">
         <h2 class="text-base font-bold">Other items on the same topics</h2>
         <button class="text-xs hover:underline">See All</button>
@@ -276,7 +318,7 @@
           
         </div>
       </div>
-    </section>
+    </section> -->
   </main>
 {:else}
 	<p class="loading">loading...</p>
diff --git a/src/TopicDetail.svelte b/src/TopicDetail.svelte
index c07e239..ce3a131 100644
--- a/src/TopicDetail.svelte
+++ b/src/TopicDetail.svelte
@@ -15,7 +15,7 @@
 
 <TopicMasonryGrid {topicid}/>
 
-<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
     {#each items as item}
         <ItemCard {item}/>
     {/each}
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index 6346ec1..591e0f5 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -38,7 +38,7 @@
 {#if [...tree.keys()].length > 0}
 <Masonry gridGap={'0.75rem'}>
   {#each [...tree.keys()] as parent}
-  <div class="bg-white rounded-lg px-4 py-4 shadow-lg focus:outline-none">
+  <div class=" rounded-lg px-4 py-4 shadow focus:outline-none">
     <a href={"#/topic/" + parent.id}><span class="mt-1 p-1 text-gray-900 font-semibold text-lg">{ parent.display_name }</span></a>
   
       <div class="mt-2 flex flex-wrap text-sm text-gray-900">
diff --git a/src/WantToLearnButton.svelte b/src/WantToLearnButton.svelte
new file mode 100644
index 0000000..63f051b
--- /dev/null
+++ b/src/WantToLearnButton.svelte
@@ -0,0 +1,18 @@
+<script>
+  
+</script>
+
+
+<button class="inline-flex shrink-0 justify-center items-center bg-purple-200 text-purple-900 border border-purple-300 rounded-md divide-x divide-purple-300 w-56">
+  <div class="flex px-3 py-2" >
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+    </svg>
+    <span class="ml-1">Want to Learn</span>
+  </div>
+  <div class="px-3 py-2">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+    </svg>
+  </div>
+</button>