Site updates

content/en/playground.md

@@ -0,0 +1,10 @@
+---
+title: "Discover the MemMachine Playground"
+date: 2024-08-21T12:00:00-07:00
+draft: false
+layout: "playground"
+---
+
+Experience MemMachine in our playground for free.
+
+Explore our tools, learn how they work, and see what's possible.

data/examples.yaml

@@ -1,19 +1,19 @@
 - title: Your CRM Assistant
   icon: "fa-solid fa-user"
   text: "Your agent can recall a client's entire history and deal stage, proactively helping your sales team build relationships and close deals faster."
-  url: "#"
+  url: "https://github.com/MemMachine/MemMachine/tree/main/docs"
 
 - title: A Healthcare Navigator
   icon: "fa-solid fa-heart"
   text: "Offer continuous patient support with an agent that remembers medical history and tracks treatment progress to provide a seamless healthcare journey."
-  url: "#"
+  url: "https://github.com/MemMachine/MemMachine/tree/main/docs"
 
 - title: A Personal Finance Advisor
   icon: "fa-solid fa-comment-dollar"
   text: "Your agent will remember a user's portfolio and risk tolerance, delivering personalized financial insights based on their complete history."
-  url: "#"
+  url: "https://github.com/MemMachine/MemMachine/tree/main/docs"
 
-- title: A Technical Writer
+- title: A Content Writer
   icon: "fa-solid fa-pen-to-square"
   text: "Build an assistant that remembers your unique style guide and terminology, ensuring perfect consistency across all documentation."
-  url: "#"
+  url: "https://github.com/MemMachine/MemMachine/tree/main/docs"

hugo.toml

@@ -68,7 +68,27 @@ tags = 'tags'
   [[menus.main]]
     name = 'Blog'
     pageRef = '/blog'
-    weight = 50
+    weight = 60
+
+  [[menus.main]]
+    name = 'Docs'
+    url = 'http://docs.memmachine.ai'
+    weight = 70
+
+  # Social media links for the top nav
+  [[menus.social]]
+    name = "Discord"
+    url = "https://discord.gg/usydANvKqD"
+    weight = 10
+    [menus.social.params]
+      icon = "discord"
+
+  [[menus.social]]
+    name = "GitHub"
+    url = "https://github.com/MemMachine/MemMachine"
+    weight = 20
+    [menus.social.params]
+      icon = "github"
 
   # Footer Product menu
   [[menus.footerProduct]]
@@ -86,6 +106,11 @@ tags = 'tags'
     pageRef = '/blog'
     weight = 30
 
+  [[menus.footerProduct]]
+    name = 'Docs'
+    url = 'http://docs.memmachine.ai'
+    weight = 40  
+
   # Footer Company menu
   [[menus.footerCompany]]
     name = 'Home'

themes/memmachine/assets/css/styles.css

@@ -1950,4 +1950,22 @@ footer p {
 
 .social-icon {
   margin-top: 20px;
+}
+
+/* ======================================
+ * Header Social Icons
+/* ====================================== */
+.header-social-icons {
+  display: flex;
+  align-items: center;
+  gap: 15px; /* Adjust spacing as needed */
+}
+
+.header-social-icons a {
+  color: var(--light-300);
+  font-size: 20px; /* Adjust size as needed */
+}
+
+.header-social-icons a:hover {
+  color: var(--lavender);
 }

themes/memmachine/layouts/_partials/header.html

@@ -1,6 +1,3 @@
-<!--=======================================================
-                          HEADER
-=======================================================-->
 <div class="desktop-header">
   <div class="container-fluid">
     <div class="row align-items-center">
@@ -10,15 +7,16 @@
       <div class="col-md-8">
         {{- partial "menu.html" (dict "menuID" "main" "page" .) -}}
       </div>
-      <div class="col-md-2 text-end">
+      <div class="col-md-2 text-end d-flex align-items-center justify-content-end">
+        {{- partial "social-icons.html" . -}}
         <!--
-        <div class="search-icon">
+        <div class="search-icon ms-2">
           <a href="#" id="toggleSearch">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_60_3824)"><path d="M9.5 19C4.262 19 0 14.738 0 9.5C0 4.262 4.262 0 9.5 0C14.738 0 19 4.262 19 9.5C19 14.738 14.738 19 9.5 19ZM9.5 1.5C5.089 1.5 1.5 5.089 1.5 9.5C1.5 13.911 5.089 17.5 9.5 17.5C13.911 17.5 17.5 13.911 17.5 9.5C17.5 5.089 13.911 1.5 9.5 1.5Z" fill="#B3B3D0" /><path d="M23.25 24C23.1515 24.0003 23.0539 23.9809 22.9629 23.9432C22.8719 23.9054 22.7894 23.8499 22.72 23.78L15.16 16.22C15.0903 16.1503 15.0351 16.0676 14.9974 15.9766C14.9597 15.8856 14.9402 15.788 14.9402 15.6895C14.9402 15.591 14.9597 15.4934 14.9974 15.4024C15.0351 15.3114 15.0903 15.2287 15.16 15.159C15.2297 15.0893 15.3124 15.0341 15.4034 14.9964C15.4944 14.9587 15.592 14.9393 15.6905 14.9393C15.789 14.9393 15.8866 14.9587 15.9776 14.9964C16.0686 15.0341 16.1513 15.0893 16.221 15.159L23.781 22.719C23.8861 22.8239 23.9578 22.9577 23.9868 23.1033C24.0159 23.249 24.001 23.4 23.9442 23.5372C23.8873 23.6744 23.7909 23.7916 23.6674 23.874C23.5438 23.9564 23.3985 24.0003 23.25 24Z" fill="#B3B3D0" /></g><defs><clipPath id="clip0_60_3824"><rect width="24" height="24" fill="white" /></clipPath></defs></svg>
           </a>
         </div>
 
-        <a href="{{ `/contact` | relLangURL }}" class="btn btn-secondary">Get Started</a>
+        <a href="{{ `/contact` | relLangURL }}" class="btn btn-secondary ms-2">Get Started</a>
         -->
       </div>
     </div>
@@ -35,12 +33,12 @@
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"/></svg>
     </strong>
     {{- partial "menu.html" (dict "menuID" "main" "page" .) -}}
+    {{- partial "social-icons.html" . -}}
+    <!--
     <a href="{{ `/contact` | relLangURL }}" class="btn btn-secondary">Get Started</a>
+    -->
     <div class="">
-      <!--
-      <input class="mobile-search" type="text" placeholder="Search..." />
-      -->
-    </div>
+      </div>
   </div>
 </div>
 

themes/memmachine/layouts/_partials/social-icons.html

@@ -0,0 +1,11 @@
+<div class="header-social-icons d-flex">
+  {{ with site.Menus.social }}
+    {{- range . }}
+      <a class="me-2" href="{{ .URL }}" target="_blank" rel="noopener" aria-label="{{ .Name }}">
+        {{- with .Params.icon }}
+        <i class="fab fa-{{ . }}" aria-hidden="true"></i>
+        {{- end }}
+      </a>
+    {{- end }}
+  {{- end }}
+</div>

themes/memmachine/layouts/playground.html

@@ -0,0 +1,51 @@
+{{ define "main" }}
+  <!--=======================================================
+                        HERO
+  =========================================================-->
+  <div class="hero-area">
+    <div class="container">
+      <div data-aos="fade-up" data-aos-duration="1000">
+        <div class="row">
+          <div class="col-md-12">
+            <h1 class="title">
+              {{ .Title }}
+            </h1>
+            <div class="mx-850 text-center">
+              {{ .Content }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!--=======================================================
+                        PLAYGROUND
+  =========================================================-->
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12" data-aos="fade-up" data-aos-duration="1000">
+        <div class="ready-section" style="margin: 100px 0;">
+          <h2 class="title-2">We're <span>Building</span> Something <span>Amazing</span></h2>
+          <p>
+            Our Playground is getting a major upgrade to give you an even better experience.
+          </p>
+          <p>
+            We're working hard to make it worth the wait! While you're waiting, please explore these resources to start your journey.
+          </p>
+
+          <div class="hero-btn">
+            <div data-aos="fade-up" data-aos-duration="1000" class="aos-init aos-animate">
+              <a href="https://docs.memmachine.ai/getting_started" class="btn btn-primary mx-2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">Read the Docs
+              </a>
+              <a href="https://discord.gg/usydANvKqD" class="btn btn-primary mx-2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">Let's Chat on Discord
+              </a>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+{{ end }}