add new units to readme

README.md

@@ -16,17 +16,39 @@ The **Model Context Protocol (MCP) Course** is your comprehensive guide to under
 
 <div style="width: 100%; border: 1px solid #ccc; padding: 20px; margin: 20px auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); margin: 20px auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); border-radius: 8px;">
   <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
-    <a href="https://youtu.be/p4q6LI-2yZ8" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
+    <!-- New Unit 3 Boxes -->
+    <a href="https://huggingface.co/learn/mcp-course/unit3/introduction" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
       <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
         <div>
-          <h3 style="margin-top: 10; color: #000000;">📹 Unit 0 Video</h3>
+          <h3 style="margin-top: 10; color: #000000;">🚀 Unit 3 is here!</h3>
+          <p style="color: #000000;">Build a production ready MCP application with Anthropic, Slack, and Github integration. Learn to create robust, scalable MCP applications ready for real-world deployment.</p>
+        </div>
+        <img src="images/anthropic.png" alt="Production Icon" style="height: 100%; width: auto; margin-left: 10px;">
+      </div>
+    </a>
+    <a href="https://huggingface.co/learn/mcp-course/unit3_1/introduction" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
+        <div>
+          <h3 style="margin-top: 10; color: #000000;">🤖 Unit 3.1 for the Hub</h3>
+          <p style="color: #000000;">Build autonomous agents on the Hugging Face Hub. Create intelligent agents that can operate independently using MCP protocols.</p>
+        </div>
+        <img src="images/pr-agent.png" alt="Agent Icon" style="height: 100%; width: auto; margin-left: 10px;">
+      </div>
+    </a>
+    <!-- Divider -->
+    <div style="width: 100%; height: 2px; background: linear-gradient(to right, transparent, #ccc, transparent); margin: 20px 0;"></div>
+    <!-- Existing boxes with grey styling -->
+    <a href="https://youtu.be/p4q6LI-2yZ8" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #f0f0f0, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #888888; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #e8e8e8, #d8d8d8)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #e0e0e0)';">
+        <div>
+          <h3 style="margin-top: 10; color: #000000;">🎬 Unit 0 Video</h3>
           <p style="color: #000000;">Complete Introduction to The first parts of the MCP Course. This video is a must-watch for everyone who wants to start the MCP Course.</p>
         </div>
         <img src="images/video_1.png" alt="Video Icon" style="height: 100%; width: auto; margin-left: 10px;">
       </div>
     </a>
     <a href="https://youtube.com/live/aK8Jz-x5rJ8?feature=share" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
-      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #f0f0f0, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #888888; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #e8e8e8, #d8d8d8)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #e0e0e0)';">
         <div>
           <h3 style="margin-top: 10; color: #000000;">🔴 Unit 1 Live Stream</h3>
           <p style="color: #000000;">On <b style="color: #000000;">29th May 8:00 PM CEST</b> we will have a live stream where we will cover Q&A and the MCP Course Unit 1 on MCP fundamentals. </p>
@@ -35,7 +57,7 @@ The **Model Context Protocol (MCP) Course** is your comprehensive guide to under
       </div>
     </a>
     <a href="https://huggingface.co/spaces/mcp-course/unit_1_quiz" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px;">
-      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #f0f0f0, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #888888; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #e8e8e8, #d8d8d8)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #e0e0e0)';">
         <div>
           <h3 style="margin-top: 10; color: #000000;">🏆 Get Certified</h3>
           <p style="color: #000000;">If you want to get certified, you can do so by completing the MCP Course and passing the certification exam.</p>
@@ -44,7 +66,7 @@ The **Model Context Protocol (MCP) Course** is your comprehensive guide to under
       </div>
     </a>
     <a href="https://huggingface.co/learn/mcp-course/unit0/introduction" style="text-decoration: none; color: inherit; width: 100%; height: 120px; margin-bottom: 10px; margin-top: 10px; margin-bottom: 30px;">
-      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #e6f7ff, #cce5ff); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #3498db; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #d6f0ff, #b8daff)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #e6f7ff, #cce5ff)';">
+      <div style="padding: 15px; border-radius: 8px; background-image: linear-gradient(to bottom, #f0f0f0, #e0e0e0); box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 2px solid #888888; height: 100%; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='2px 2px 8px rgba(0,0,0,0.2)'; this.style.backgroundImage='linear-gradient(to bottom, #e8e8e8, #d8d8d8)';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='1px 1px 3px rgba(0,0,0,0.1)'; this.style.backgroundImage='linear-gradient(to bottom, #f0f0f0, #e0e0e0)';">
         <div>
           <h3 style="margin-top: 10; color: #000000;">📝 Written Materials</h3>
           <p style="color: #000000;">To start learning the MCP Course, you can start with the written materials.</p>