Update readme

Signed-off-by: Jay Wang <[email protected]>

README.md

@@ -10,7 +10,16 @@
 
 Recommender for recommendation letter writers 👍
 
-<a href="https://xiaohk.github.io/recrec"><img width="100%" src='https://i.imgur.com/QaWYWni.png'></a>
+<table>
+  <tr>
+    <td colspan="2"><a href="https://xiaohk.github.io/recrec"><img width="100%" src='https://github.com/xiaohk/gifs/blob/main/recrec-600.gif?raw=true'></a></td>
+  </tr>
+  <tr></tr>
+  <tr align="center">
+    <td><a href="https://xiaohk.github.io/recrec">🚀 RecRec Demo</a></td>
+    <td><a href="https://youtu.be/p1mI650PjPc">📺 Demo Video</a></td>
+  </tr>
+</table>
 
 ## What is RecRec?
 
@@ -19,6 +28,13 @@ Whether you are preparing for your tenure package, job application, or green car
 RecRec highlights connections between you and potential recommenders and lets you filter by citations, awards, and other criteria.
 Save time and get the most impactful recommendations with RecRec!
 
+### Demo Video
+
+<details>
+  <summary>Click to see the high-resolution demo video!</summary>
+  <video src="https://github.com/xiaohk/recrec/assets/15007159/7de298a0-6bf0-41ce-bb24-6dbd1ce84c5a"></video>
+</details>
+
 ## How Does RecRec Work?
 
 RecRec uses [Semantic Scholar's](https://www.semanticscholar.org) citation database to analyze and identify all researchers who have cited your papers.

src/components/recrec/recrec.css

@@ -9,7 +9,7 @@
   /* overflow: hidden; */
   border: 1px solid var(--gray-300);
   overflow: hidden;
-  border-radius: var(--border-radius);
+  /* border-radius: var(--border-radius); */
   background: white;
   /* box-shadow:
     0 0 2px hsla(0, 0%, 0%, 0.1),