affiliate banner

docs/assets/extra.css

@@ -1,4 +1,4 @@
-products-offers {
+.products-offers {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
@@ -34,16 +34,13 @@ products-offers {
 
 .grantor-tile .offer {
     background-color: #f8f8f8;
-    /* Match the see-more bar background color */
     padding: 10px;
     font-size: 1em;
     color: #333;
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
-    /* Add border to match the see-more bar */
     position: absolute;
     bottom: 40px;
-    /* Adjust to position above the see-more bar */
     left: 0;
     width: 100%;
     text-align: center;
@@ -64,4 +61,28 @@ products-offers {
     text-decoration: none;
     color: #007bff;
     font-weight: bold;
+}
+
+.heart {
+    color: red;
+    margin-right: 5px;
+    font-size: 1.2em;
+    animation: heart 1000ms infinite;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+@keyframes heart {
+
+    0%,
+    40%,
+    80%,
+    100% {
+        transform: scale(1);
+    }
+
+    20%,
+    60% {
+        transform: scale(1.15);
+    }
 }

docs/certifications.md

@@ -1,6 +1,7 @@
 <div>
   <h2>Certification Discounts Directory</h2>
   <p>Explore exclusive offers to support your growth.</p>
+    <p>Offers marked with a heart icon ❤️ are affiliate links, meaning we earn a commission if you make a purchase through them. Thank you for your support!</p>
 </div>
 <select id="filter">
   <option value="All">All</option>

docs/grantors.json

@@ -5,7 +5,8 @@
         "description": "Pipedrive is a cloud-based SaaS company that develops a CRM tool for sales management available as a web and mobile app",
         "category": "Marketing and Sales",
         "url": "https://aff.trypipedrive.com/ka0h9dob91lz",
-        "promotion": "30 days free"
+        "promotion": "30 days free",
+        "affiliate": true
     },
     {
         "name": "Mixpanel for Startups",

docs/javascripts/programs.js

@@ -28,6 +28,15 @@ document$.subscribe(function () {
 
                     const seeMore = document.createElement("div");
                     seeMore.className = "see-more";
+
+                    // Create heart icon if the grantor is an affiliate
+                    if (grantor.affiliate) {
+                        const heartIcon = document.createElement("span");
+                        heartIcon.className = "heart";
+                        heartIcon.innerHTML = `❤️`; // Use an emoji or a heart icon
+                        seeMore.appendChild(heartIcon);
+                    }
+
                     const seeMoreLink = document.createElement("a");
                     seeMoreLink.href = grantor.url;
                     seeMoreLink.textContent = "See more";
@@ -53,4 +62,4 @@ document$.subscribe(function () {
             displaygrantors(grantors);
         })
         .catch(error => console.error("Error fetching grantors:", error));
-});
+});

docs/startup-programs.md

@@ -1,6 +1,7 @@
 <div>
   <h2>Startup Programs Directory</h2>
-  <p>Explore exclusive offers to support your startup's growth. If you'd like to contribute, please update  <a href="https://github.com/kubeflex-io/kubeflex/blob/main/docs/grantors.json" target="_blank">this file</a> and submit a pull request.</p>
+  <p>Explore exclusive offers to support your startup's growth.</p> 
+  <p>Offers marked with a heart icon ❤️ are affiliate links, meaning we earn a commission if you make a purchase through them. Thank you for your support!</p>
 </div>
 <select id="filter">
   <option value="All">All</option>
@@ -20,4 +21,4 @@
   <option value="3D Modeling">3D Modeling</option>
 </select>
 
-<div id="offers-container"></div>
+<div id="offers-container"></div>

docs/trainings.md

@@ -1,6 +1,7 @@
 <div>
   <h2>Training Discounts Directory</h2>
   <p>Explore exclusive offers to support your growth.</p>
+    <p>Offers marked with a heart icon ❤️ are affiliate links, meaning we earn a commission if you make a purchase through them. Thank you for your support!</p>
 </div>
 <select id="filter">
   <option value="All">All</option>

mkdocs.yml

@@ -47,6 +47,9 @@ extra:
 repo_url: 'https://github.com/kubeflex-io/kubeflex'
 
 markdown_extensions:
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
   - pymdownx.superfences
   - pymdownx.tabbed:
       alternate_style: true