From b1fd8667609d05d7f65707c507dff5b2fe698281 Mon Sep 17 00:00:00 2001
From: Ashman Malik <ashman@basiq.io>
Date: Fri, 3 Jan 2025 05:23:13 +0000
Subject: [PATCH] Update doc `best-practices`

---
 .../api-integration/best-practices/index.md   | 254 +++++++++---------
 1 file changed, 128 insertions(+), 126 deletions(-)

diff --git a/docs/PLatform/api-integration/best-practices/index.md b/docs/PLatform/api-integration/best-practices/index.md
index 448ffb9..d8cbdcc 100644
--- a/docs/PLatform/api-integration/best-practices/index.md
+++ b/docs/PLatform/api-integration/best-practices/index.md
@@ -59,44 +59,44 @@ When integrating with the Basiq API, there are some best practices that play a c
 
 <style jsx>
   {`
-                                                        .doc-section {
-                                                          padding: 20px;
-                                                          background: #f9f9f9;
-                                                          border-radius: 8px;
-                                                          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                                                          margin: 10px 0;
-                                                        }
-
-                                                        .doc-highlight {
-                                                          font-size: 1.1em;
-                                                          color: #333;
-                                                          background: #eef7fe;
-                                                          padding: 10px;
-                                                          border-radius: 6px;
-                                                          margin-bottom: 16px;
-                                                        }
-
-                                                        .doc-list {
-                                                          list-style: none;
-                                                          padding-left: 0;
-                                                          margin: 0;
-                                                        }
-
-                                                        .doc-list li {
-                                                          font-size: 1em;
-                                                          color: #555;
-                                                          padding: 8px 0;
-                                                          border-bottom: 1px solid #eee;
-                                                        }
-
-                                                        .doc-list li:last-child {
-                                                          border-bottom: none;
-                                                        }
-
-                                                        .doc-list strong {
-                                                          color: #0073e6;
-                                                        }
-                                                      `}
+                                                            .doc-section {
+                                                              padding: 20px;
+                                                              background: #f9f9f9;
+                                                              border-radius: 8px;
+                                                              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                                                              margin: 10px 0;
+                                                            }
+
+                                                            .doc-highlight {
+                                                              font-size: 1.1em;
+                                                              color: #333;
+                                                              background: #eef7fe;
+                                                              padding: 10px;
+                                                              border-radius: 6px;
+                                                              margin-bottom: 16px;
+                                                            }
+
+                                                            .doc-list {
+                                                              list-style: none;
+                                                              padding-left: 0;
+                                                              margin: 0;
+                                                            }
+
+                                                            .doc-list li {
+                                                              font-size: 1em;
+                                                              color: #555;
+                                                              padding: 8px 0;
+                                                              border-bottom: 1px solid #eee;
+                                                            }
+
+                                                            .doc-list li:last-child {
+                                                              border-bottom: none;
+                                                            }
+
+                                                            .doc-list strong {
+                                                              color: #0073e6;
+                                                            }
+                                                          `}
 </style>
 
 <Columns layout="auto" className="documentation-columns">
@@ -175,41 +175,43 @@ When integrating with the Basiq API, there are some best practices that play a c
 
 <style jsx>
   {`
-                                                      .documentation-columns {
-                                                        gap: 20px;
-                                                      }
-
-                                                      .highlight {
-                                                        color: #0073e6;
-                                                        font-weight: bold;
-                                                      }
-
-                                                      .warning {
-                                                        background: #ffefef;
-                                                        border-left: 5px solid #f44336;
-                                                        padding: 10px;
-                                                        margin: 10px 0;
-                                                      }
-
-                                                      h3, h4 {
-                                                        margin-top: 0;
-                                                      }
-
-                                                      ul {
-                                                        list-style: disc;
-                                                        padding-left: 20px;
-                                                      }
-
-                                                      p {
-                                                        margin: 0 0 10px;
-                                                      }
-                                                    `}
+                                                          .documentation-columns {
+                                                            gap: 20px;
+                                                          }
+
+                                                          .highlight {
+                                                            color: #0073e6;
+                                                            font-weight: bold;
+                                                          }
+
+                                                          .warning {
+                                                            background: #ffefef;
+                                                            border-left: 5px solid #f44336;
+                                                            padding: 10px;
+                                                            margin: 10px 0;
+                                                          }
+
+                                                          h3, h4 {
+                                                            margin-top: 0;
+                                                          }
+
+                                                          ul {
+                                                            list-style: disc;
+                                                            padding-left: 20px;
+                                                          }
+
+                                                          p {
+                                                            margin: 0 0 10px;
+                                                          }
+                                                        `}
 </style>
 
 <blockquote className="warning">
   🚧 <strong>Important:</strong> Purging is irreversible. Proceed with caution. The Dashboard feature adheres to the same permissions and security protocols as the API endpoint.
 </blockquote>
 
+<p> </p>
+
 <Columns layout="auto" className="documentation-columns">
   <Column>
     <div className="interactive-card">
@@ -264,65 +266,65 @@ When integrating with the Basiq API, there are some best practices that play a c
 
 <style jsx>
   {`
-                                                .documentation-columns {
-                                                  gap: 20px;
-                                                  margin-top: 30px;
-                                                }
-
-                                                .interactive-card {
-                                                  max-width: 360px;
-                                                  margin: 0 auto;
-                                                  padding: 20px;
-                                                  background-color: #ffffff;
-                                                  border-radius: 12px;
-                                                  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-                                                  transition: transform 0.3s ease;
-                                                  cursor: pointer;
-                                                }
-
-                                                .interactive-card:hover {
-                                                  transform: translateY(-10px);
-                                                }
-
-                                                .card-content {
-                                                  text-align: center;
-                                                }
-
-                                                .card-icon {
-                                                  font-size: 48px;
-                                                  color: #0073e6;
-                                                  margin-bottom: 20px;
-                                                }
-
-                                                .card-title {
-                                                  font-size: 1.4em;
-                                                  color: #333;
-                                                  margin-bottom: 16px;
-                                                  font-weight: bold;
-                                                }
-
-                                                .card-description {
-                                                  font-size: 1em;
-                                                  color: #666;
-                                                  line-height: 1.5;
-                                                  margin-bottom: 20px;
-                                                }
-
-                                                .learn-more-button {
-                                                  padding: 10px 20px;
-                                                  background-color: #0073e6;
-                                                  color: white;
-                                                  font-size: 1em;
-                                                  border: none;
-                                                  border-radius: 30px;
-                                                  cursor: pointer;
-                                                  transition: background-color 0.3s ease;
-                                                }
-
-                                                .learn-more-button:hover {
-                                                  background-color: #005bb5;
-                                                }
-                                              `}
+                                                    .documentation-columns {
+                                                      gap: 20px;
+                                                      margin-top: 30px;
+                                                    }
+
+                                                    .interactive-card {
+                                                      max-width: 360px;
+                                                      margin: 0 auto;
+                                                      padding: 20px;
+                                                      background-color: #ffffff;
+                                                      border-radius: 12px;
+                                                      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+                                                      transition: transform 0.3s ease;
+                                                      cursor: pointer;
+                                                    }
+
+                                                    .interactive-card:hover {
+                                                      transform: translateY(-10px);
+                                                    }
+
+                                                    .card-content {
+                                                      text-align: center;
+                                                    }
+
+                                                    .card-icon {
+                                                      font-size: 48px;
+                                                      color: #0073e6;
+                                                      margin-bottom: 20px;
+                                                    }
+
+                                                    .card-title {
+                                                      font-size: 1.4em;
+                                                      color: #333;
+                                                      margin-bottom: 16px;
+                                                      font-weight: bold;
+                                                    }
+
+                                                    .card-description {
+                                                      font-size: 1em;
+                                                      color: #666;
+                                                      line-height: 1.5;
+                                                      margin-bottom: 20px;
+                                                    }
+
+                                                    .learn-more-button {
+                                                      padding: 10px 20px;
+                                                      background-color: #0073e6;
+                                                      color: white;
+                                                      font-size: 1em;
+                                                      border: none;
+                                                      border-radius: 30px;
+                                                      cursor: pointer;
+                                                      transition: background-color 0.3s ease;
+                                                    }
+
+                                                    .learn-more-button:hover {
+                                                      background-color: #005bb5;
+                                                    }
+                                                  `}
 </style>
 
 <br />