Web: CSS improvements

Author: Sadanand Pai

README.md

@@ -2,9 +2,12 @@
 	<h1>JavaScript Modern Interview Code Challenges</h1>
 	<h3>Collection of modern interview code challenges on JavaScript suitable for</h3>
     	<h4>Interviewees | Interviewers | Knowledge test | Practice</h4>
-    	<a href="#javascript-modern-interview-code-challenges-by-topic"><img src="web/public/hero.png" alt="banner" width="500px"/></a>
+		<br/><br/>
+    	<a href="#javascript-modern-interview-code-challenges-by-topic"><img src="web/public/hero.svg" alt="hero" width="350px"/></a>
 </div>
 
+<br/><br/>
+
 <div align="center">
     <p>
 	    <a name="stars"><img src="https://img.shields.io/github/stars/sadanandpai/javascript-code-challenges?style=for-the-badge"></a>

web/public/hero.png

@@ -8,15 +8,15 @@ Collection of modern interview code challenges on JavaScript suitable for <br />
 **Interviewees | Interviewers | Knowledge test | Practice**
 
 <Image
-  src="/hero.png"
+  src="/hero.svg"
   alt="hero banner"
   width={400}
   height={350}
-  className="m-auto"
+  className="m-auto my-16"
 />
 </div>
 
-<Cards style={{ gridTemplateColumns: "1fr 1fr" }}>
+<Cards num={2} className="cards">
   <Card title="Concepts" href="/concepts/primitives" />
   <Card title="Challenges" href="/challenges/primitives" />
 </Cards>

web/public/hero.svg

@@ -1 +1,17 @@
-@tailwind utilities; 
+@tailwind utilities;
+
+.cards.cards {
+   gap: 2rem;
+}
+
+.cards span {
+  margin: auto;
+}
+
+.dark .cards.cards a {
+  border-color: rgb(150, 150, 150);
+}
+
+.dark .cards.cards a:hover {
+  border-color: white;
+}