#52 Add video, pitch, and photo sections to documentation

README.md

@@ -5,9 +5,12 @@
 
 1. [📘Table of Contents](#📘table-of-contents)
 2. [🖖Introduction](#🖖introduction)
-    1. [👉Key Features:](#👉key-features)
+    1. [👉Key Features](#👉key-features)
 3. [🎨Color Scheme](#🎨color-scheme)
-4. [📚How to Deploy](#📚how-to-deploy)
+4. [🎥Video](#🎥video)
+5. [✒️Pitch](#✒️pitch)
+6. [📷Photos](#📷photos)
+7. [📚How to Deploy](#📚how-to-deploy)
 
 ---
 
@@ -17,7 +20,7 @@
 
 > If you find this project helpful or interesting, feel free to ⭐️ **star this repository** on GitHub. Your support helps us grow and reach more users in the community!
 
-### 👉Key Features:  
+### 👉Key Features
 - Visualize the full hierarchy of your Kubernetes ecosystem, from superclusters to individual pools, nodes and pods...
 - Gain real-time insights into cluster performance and management.
 - Simplify complex Kubernetes structures into an understandable format for developers and administrators alike.
@@ -28,6 +31,22 @@ To ensure proper use and contribution, please refer to the following documentati
 - 🤝 [CONTRIBUTING](/CONTRIBUTING.md): Instructions for contributing to the project and submitting pull requests.
 - 📝 [CODE OF CONDUCT](/CODE-OF-CONDUCT.md): Guidelines for participating in the community and maintaining a respectful environment.
 
+## 🎥Video
+
+<video controls>
+    <source src="/Assets/video.mp4" type="video/mp4">
+</video>
+
+## ✒️Pitch
+
+- 💜K10s is your go-to tool for effortlessly exploring the hierarchy and structure of a Kubernetes clusters.🤍 By harnessing the power of the Kubernetes API, K10s delivers an intuitive and detailed overview of your cluster architecture.🩵
+
+## 📷Photos
+
+![photo 1](/Assets/photo1.png)
+
+![photo 2](/Assets/photo2.png)
+
 ## 🎨Color Scheme
 
 The project's visual identity is defined by the following colors:

docs/css/index.css

@@ -83,13 +83,41 @@
     color: var(--primary);
     text-decoration: none;
 }
+
+.index-main-section video {
+    display: block;
+    border: 5px solid var(--primary);
+    border-radius: var(--radius);
+    box-shadow: 2px 2px 10px var(--shadow);
+    max-width: calc(40% - 8px);
+    height: auto;
+    margin-bottom: 16px;
+}
+
+.index-main-section img {
+    display: block;
+    border: 5px solid var(--primary);
+    border-radius: var(--radius);
+    box-shadow: 2px 2px 10px var(--shadow);
+    max-width: calc(40% - 8px);
+    height: auto;
+    margin-bottom: 16px;
+}
 /* Main */
 
 /* Media Queries */
 @media screen and (max-width: 1024px) {
     .index-body {
         grid-template-rows: 1fr 9fr 0.5fr;
     }
+
+    .index-main-section video {
+        max-width: calc(100% - 8px);
+    }
+
+    .index-main-section img {
+        max-width: calc(100% - 8px);
+    }
 }
 
 @media screen and (max-width: 768px) {

docs/index.html

@@ -41,6 +41,25 @@ <h3>Key Features</h3>
                     <li>Simplify complex Kubernetes structures into an understandable format for developers and administrators alike.</li>
                 </ul>
             </section>
+            <section class="index-main-section">
+                <h2>VIDEO</h2>
+                <h3>Watch Our Video</h3>
+                <video controls>
+                    <source src="/videos/video.mp4" type="video/mp4">
+                </video>
+            </section>
+            <section class="index-main-section">
+                <h2>PITCH</h2>
+                <h3>Our Pitch</h3>
+                <p>💜K10s is your go-to tool for effortlessly exploring the hierarchy and structure of a Kubernetes cluster.🤍 By harnessing the power of the Kubernetes API, K10s delivers an intuitive and detailed overview of your cluster architecture.🩵</p>
+            </section>
+            <section class="index-main-section">
+                <h2>PHOTOS</h2>
+                <h3>View Our Photos</h3>
+                <img src="/images/photo1.png" alt="K10s Photo 1">
+                <img src="/images/photo2.png" alt="K10s Photo 2">
+
+            </section>
             <section class="index-main-section">
                 <h2>CONTRIBUTING</h2>
                 <h3>Contributing Guidelines</h3>