changes

layouts/partials/UI/article-card.html

@@ -0,0 +1,48 @@
+    <article class="story__card">
+      <img
+        src="{{.Params.image}}"
+        alt="{{ .Title }}"
+        data-pagefind-index-attrs="title,alt"
+        class="story__coverImg"
+        loading="lazy"
+      />
+      <div class="story__card__details">
+        <a data-story-url="{{.RelPermalink}}" class="open-modal">
+          <h4 class="card__title">{{ .Title }}</h4>
+        </a>
+        <p class="card__description">{{.Params.description}}</p>
+
+        <div class="card__tags_categories">
+          {{ range .Params.categories }}
+          <a href="{{ "/categories/" | relLangURL}}{{ . | urlize }}/" class="category__chip">
+            {{.}}
+          </a>
+          {{ end }} {{ range .Params.tags }}
+          <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}/" class="tag__chip">
+            <span class="hastag">#</span>{{.}}
+          </a>
+          {{ end }}
+        </div>
+
+        <div class="publish__date__timeToRead">
+          <!-- publish date -->
+          <div class="publish__date">
+            <img src="/icons/calender.svg" class="story__card__icon" alt="" />
+            <time datetime=""
+              >{{ .PublishDate |time.Format ":date_medium" }}</time
+            >
+          </div>
+
+          <!-- time to read -->
+          <div class="publish__date">
+            <img src="/icons/hourglass.svg" class="story__card__icon" alt="" />
+            <time datetime="">{{ .ReadingTime }} {{T "minutesToRead"}} </time>
+          </div>
+        </div>
+        <!-- author -->
+        <div class="publish__date">
+          <img src="/icons/person.svg" class="story__card__icon" alt="" />
+          <time datetime="">{{ .Params.author }}</time>
+        </div>
+      </div>
+    </article>

layouts/partials/UI/modal.html

@@ -0,0 +1,4 @@
+<div id="story-modal">
+  <button id="close-modal">✕</button>
+  <div id="modal-content">Loading...</div>
+</div>

layouts/partials/UI/navbar.html

@@ -1,45 +1,45 @@
-<nav>
-  <h2>ODOO Community Success Stories sponsored by </h2>
-
-
-
-<a href="http://ODOO4projects.com" style="
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 12px;
-    background-color: white;
-    color: orange;
-    border: 2px solid orange;
-    text-decoration: none;
-    padding: 16px 24px;
-    border-radius: 10px;
-    font-size: 18px;
-    font-weight: bold;
-    text-align: left;
-    line-height: 1.3;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-    transition: all 0.3s ease;
-  " onmouseover="this.style.backgroundColor='#fef6e4'; this.style.color='orange'" onmouseout="this.style.backgroundColor='white'; this.style.color='orange'">
-
-    <img src="/images/logo.svg" alt="Logo" style="width: 32px; height: 32px;">
-    <span style="display: inline-block;">
-      Launch your ODOO Project now!
-    </span>
-
-  </a>
-
-
-  <div class="search-bar-container" id="search"></div>
-
-  <div class="dropdown">
-    <button class="dropbtn">{{.Language.LanguageCode}}</button>
-    <div class="dropdown-content">
-      {{ range $.Site.Home.AllTranslations }}
-      <a href="{{.Permalink | relURL }}" class="">
-        {{.Language.LanguageName}}
-      </a>
-      {{end}}
-    </div>
-  </div>
-</nav>
+<nav>
+  <h2>ODOO Community Success Stories sponsored by </h2>
+
+
+
+<a href="http://ODOO4projects.com" style="
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    background-color: white;
+    color: orange;
+    border: 2px solid orange;
+    text-decoration: none;
+    padding: 16px 24px;
+    border-radius: 10px;
+    font-size: 18px;
+    font-weight: bold;
+    text-align: left;
+    line-height: 1.3;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
+  " onmouseover="this.style.backgroundColor='#fef6e4'; this.style.color='orange'" onmouseout="this.style.backgroundColor='white'; this.style.color='orange'">
+
+    <img src="/images/logo.svg" alt="Logo" style="width: 32px; height: 32px;">
+    <span style="display: inline-block;">
+      Launch your ODOO Project now!
+    </span>
+
+  </a>
+
+
+  <div class="search-bar-container" id="search"></div>
+
+  <div class="dropdown">
+    <button class="dropbtn">{{.Language.LanguageCode}}</button>
+    <div class="dropdown-content">
+      {{ range $.Site.Home.AllTranslations }}
+      <a href="{{.Permalink | relURL }}" class="">
+        {{.Language.LanguageName}}
+      </a>
+      {{end}}
+    </div>
+  </div>
+</nav>