Added Docker in docs

docs/Docker/intro.md

@@ -0,0 +1,136 @@
+<div align="center">
+
+# 🐳 Introduction to Docker
+</div>
+
+Welcome! Docker helps you package and run applications in containers—think of them as lightweight, portable boxes that contain everything your app needs to run.
+
+## What is Docker?
+
+Docker is a platform that lets you build, ship, and run applications inside containers. Instead of worrying about "it works on my machine" problems, Docker ensures your app runs the same way everywhere.
+
+**Simple analogy:** Just like shipping containers standardized global trade, Docker containers standardize software deployment. Your application + its dependencies = one portable package.
+
+## Why Use Docker?
+
+- **Consistency** - Same behavior on your laptop, your teammate's computer, and production servers
+- **Fast setup** - New developers can start working in minutes instead of days
+- **Isolation** - Each app runs in its own environment without conflicts
+- **Efficiency** - Containers are lightweight and start in seconds
+- **Portability** - Build once, run anywhere
+
+## Core Concepts
+
+### Image
+A blueprint for your application. Contains your code, runtime, libraries, and configuration. Images are built from a **Dockerfile** and never change once created.
+
+### Container
+A running instance of an image. Lightweight, isolated, and disposable. You can run multiple containers from the same image.
+
+### Dockerfile
+A simple text file with instructions to build an image:
+```dockerfile
+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+CMD ["node", "app.js"]
+```
+
+### Registry
+A storage service for Docker images. **Docker Hub** is the most popular—like GitHub for Docker images.
+
+### Volume
+Persistent storage that survives when containers are deleted. Use for databases, logs, and user files.
+
+### Network
+Allows containers to communicate with each other securely.
+
+## Quick Start Workflow
+
+**1. Create a Dockerfile**
+```dockerfile
+FROM python:3.11-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+COPY . .
+CMD ["python", "app.py"]
+```
+
+**2. Build your image**
+```bash
+docker build -t my-app:1.0 .
+```
+
+**3. Run a container**
+```bash
+docker run -d --name my-app -p 8000:8000 my-app:1.0
+```
+
+**4. Check it's running**
+```bash
+docker ps
+docker logs my-app
+```
+
+That's it! Your app is now running in a container.
+
+## Essential Commands
+
+```bash
+# Build an image
+docker build -t myapp:1.0 .
+
+# Run a container
+docker run -d --name myapp -p 8080:80 myapp:1.0
+
+# List running containers
+docker ps
+
+# View logs
+docker logs myapp
+
+# Stop a container
+docker stop myapp
+
+# Remove a container
+docker rm myapp
+
+# List images
+docker images
+
+# Remove an image
+docker rmi myapp:1.0
+```
+
+
+## Best Practices
+
+✅ **Use official base images** - `node:18-alpine`, `python:3.11-slim`  
+✅ **Use specific tags** - Avoid `:latest` in production  
+✅ **Keep images small** - Use Alpine or slim variants  
+✅ **Add .dockerignore** - Exclude `node_modules`, `.git`, logs  
+✅ **Don't run as root** - Create a non-privileged user  
+✅ **Use volumes for data** - Never store important data in containers  
+✅ **One process per container** - Keep it simple and focused  
+
+
+## Next Steps
+
+1. **Install Docker** - Get Docker Desktop (Mac/Windows) or Docker Engine (Linux)
+2. **Try the examples** - Build and run the sample Dockerfiles above
+3. **Learn Docker Compose** - Manage multi-container apps easily
+4. **Explore Docker Hub** - Find pre-built images for databases, web servers, etc.
+5. **Read the docs** - https://docs.docker.com/
+
+## Key Takeaways
+
+- **Containers** package your app with everything it needs
+- **Images** are blueprints, containers are running instances
+- **Dockerfiles** define how to build images
+- **Docker Compose** manages multiple containers together
+- Docker makes development, testing, and deployment much easier
+
+Ready to containerize your first app? Start with a simple Dockerfile and experiment! 🚀

docusaurus.config.ts

@@ -107,6 +107,7 @@ const config: Config = {
                    <a href="/docs/GitHub/intro-github" class="nav__icons" > <img src="/icons/github.svg" title="GitHub" alt="GitHub" /> </a>
                    <a href="/docs/Nextjs/intro-nextjs" class="nav__icons" > <img src="/icons/nextjs.svg" title="Nextjs" alt="Nextjs" /> </a>
                    <a href="/docs" class="nav__icons"> <img src="/icons/Logo-512X512.png" title="Docs" alt="Docs" /> </a>
+                   <a href="/docs/Docker/intro" class="nav__icons"> <img src="/icons/docker.svg" title="Docker" alt="Docker" /> </a>
                  </div>
                </div>`,
             },

src/components/topmate/TopMateCard.tsx

@@ -28,9 +28,8 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
-      className={`hover:shadow-3xl relative mx-auto w-full max-w-md transform overflow-hidden rounded-3xl shadow-2xl transition-all duration-300 hover:-translate-y-1 ${
-        isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
-      }`}
+      className={`hover:shadow-3xl relative mx-auto w-full max-w-md transform overflow-hidden rounded-3xl shadow-2xl transition-all duration-300 hover:-translate-y-1 ${isDark ? "bg-[#1a1a1a] text-white" : "bg-white text-black"
+        }`}
     >
       {/* Decorative Arrows */}
       <div className="absolute -top-4 -left-4 flex gap-2">
@@ -53,27 +52,24 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
         <div className="mb-4 flex items-center justify-between">
           <div className="flex items-center gap-2">
             <span
-              className={`text-sm font-medium ${
-                isDark ? "text-gray-300" : "text-gray-600"
-              }`}
+              className={`text-sm font-medium ${isDark ? "text-gray-300" : "text-gray-600"
+                }`}
             >
               1:1 CALL
             </span>
             <div
-              className={`flex items-center gap-1 ${
-                isDark ? "text-gray-400" : "text-gray-500"
-              }`}
+              className={`flex items-center gap-1 ${isDark ? "text-gray-400" : "text-gray-500"
+                }`}
             >
               <Clock size={16} />
               <span className="text-sm">{duration}</span>
             </div>
           </div>
           <button
-            className={`text-xl font-semibold ${
-              isDark
+            className={`text-xl font-semibold ${isDark
                 ? "text-gray-500 hover:text-gray-300"
                 : "text-gray-400 hover:text-gray-600"
-            }`}
+              }`}
             onClick={() => setShowTopmate(false)}
           >
             <span className="sr-only">Close</span>×
@@ -82,9 +78,8 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
 
         {/* Title */}
         <h2
-          className={`mb-4 text-2xl font-bold ${
-            isDark ? "text-white" : "text-gray-900"
-          }`}
+          className={`mb-4 text-2xl font-bold ${isDark ? "text-white" : "text-gray-900"
+            }`}
         >
           {title}
         </h2>
@@ -104,9 +99,8 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
             />
             <div className="flex flex-col">
               <span
-                className={`text-sm ${
-                  isDark ? "text-gray-300" : "text-gray-600"
-                }`}
+                className={`text-sm ${isDark ? "text-gray-300" : "text-gray-600"
+                  }`}
               >
                 Book a slot at
               </span>
@@ -132,9 +126,8 @@ const TopMateCard: React.FC<TopMateCardProps> = ({
             </div>
             {/* Theme-aware text to ensure readability on dark backgrounds */}
             <span
-              className={`shrink-0 text-sm font-semibold ${
-                isDark ? "text-gray-200" : "text-gray-700"
-              }`}
+              className={`shrink-0 text-sm font-semibold ${isDark ? "text-gray-200" : "text-gray-700"
+                }`}
             >
               topmate
             </span>