From 66f7a26ac87bb4d0068225d248d209f65ae29493 Mon Sep 17 00:00:00 2001
From: AjmalCybro <ajmal@cybrosys.in>
Date: Wed, 7 Feb 2024 16:04:42 +0530
Subject: [PATCH] Feb 7 [UPDT] : Updated 'auto_database_backup'

---
 .../description/assets/icons/test-1.png       | Bin 1640 -> 1996 bytes
 .../static/description/index.html             | 242 +++++++++++++-----
 2 files changed, 178 insertions(+), 64 deletions(-)

diff --git a/auto_database_backup/static/description/assets/icons/test-1.png b/auto_database_backup/static/description/assets/icons/test-1.png
index acae3d57365d682276613e20a2d15e844da20f5a..0908add2b0c8864fd9d063b604e0cf52d696eea5 100644
GIT binary patch
literal 1996
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

literal 1640
zcmeAS@N?(olHy`uVBq!ia0vp^ia;#G!3HGXGhCAaQj#UE5hcO-X(i=}MX3yqDfvmM
z3ZA)%>8U}fi7AzZCsS=07?{;ELn2Bde0{8v^K<nQL2C3WatnaE85nHrD+&^mvr|hH
zl2X$%^K6yg@7}MZkeOnu6mIHk;9KCFnvv;IRg@ZB<rk7%m7Q#vqGWHUU{hfQG$1#%
zBvGLvHz%*ys=`(YY_1iM4HDK@QUEI{$+lI3I4Z(7K*2e`C{@8+&rmnnz`#Jk+)^(!
zCDAC!I4v<*N5ROz$WY%9h|F~j&8>`#tqd&{pg;*|VNpt&RgjAt)H)!~Rw<*Tq`*pF
zzr4I$uiRKKzbIYb(9+UU-@r)U$VeBcLbtdwuOzWTH?LS3W`av<adJ^+K}lwQo&w0k
z#H9Sv5?dvpV<EoCE%5b)8=O}R4J%-%=~pBc=o{)8=;!8wyarZXToROua0XV@#UYgi
zsro^w#rdU0$-pQ{Q-)~<1|NQlKnj7bv2w{zF3nBNEAe!(RRW6WrDUd98N0X|nz^|-
z8aunX8XCH~S{gc9IJ%g-I$4-nxLR5`!Ss6O6_+IDC8xslW+L=j;?-;AT$Gwvl3x^(
zpPvJZz<`YWlKkR~`~n3dV?9F!jquF8l>G8yO;FfEotj#dS(cjOR+OKs01h0hOl%Ht
zbT)G{H?ROYz!~It3kwrBHv<bx19L-TCldohC8*vMY#xW`1vwtOUVWfr^g%I;6w@#v
zVDbSm;Yk<BfhYddJYb410w(PVSrHEz7?^H&x;TbZ+&VHn-Xl0r=6L<=yv0+y%zT)$
z!`m-<<wUtm6xycqf`6uM%cNz^UT-uzlwN7Fa5in3wUX8Ghmfs{tEc`&?+86@jTJEq
zpM)IB)mvEa^wsuu;?-S`=k2au$~?cl`u)wl^M70KzrS<8WY)JY7yrw>)Ot4SK+*=G
zDGcl<nC2hks9=q2;Quq{olxomxi?Sv{mtx}>I!&mST-w}n`_0KXHY*VTj1i@&>M4s
zA+OOd;kwpFjxP<D72=;7oo8-$knd0O67qQ<bYr#Q^J~qk6Q)LSPE%Jupf`8YeAPnh
z6T!+Go7;oVZ)7#;^hzma{4A5h&VIm1u=DDHwNE`~-{s57U%l+sEYZ&C5leG~C$13F
zxV_|XY^Y1`@0gI7oW;L(1?|*~c2&8SA(T-t@oH9=9KWr!|F)N!?`C`pVKH+|s85cJ
zNw{F{c6YDc&XqHjCPrwOdu~b(E)KS|l=&aG?pB0{T+DA>fd%j8IdZk8*vs3yC?!sq
zedX4sX)2oSUf!QxBwc6NE6aCm`hm+aeq!El%=Rs3eD$i%=kn$FP*)>Eq2Nu+Ub-1M
ztY4te&9{Bs;zfsKR;}6aU-f{}gSSB<6KYRxd3x@aeSdlL($2|lZik<gJPSI;#GRTJ
zwc^ZFe^F@_quG~}JS|M*ggZ3c6qwFwxH_55j@v(TQL$`)MpBVlRnF$K>XT1OtZ({!
zk5Q2E(ciX5MR)way-uv3U}dFfWGHNZeA)vh7A3)lGCR~a$t3Oz_b8g&yios1dr!*w
zh2`&?FKTggt3Q;mP@P`hdG+9>d)!(x7u=Z}kt$<*Z~m#WOQ*xazGzoT$6WjQ_$xyU
zqrI!@zK?mY*7-5LdE4LEaO+&x-v<giRt7eNMk}9w7*g#s%|q_Ov0~S=GoI$g%2q7e
zdYkWKUbXdm%i|)?>Y2<dvTq#Hia!5emid9D#cBKFYw}~5);zGD!J=Pz!~Niyn7_=)
j(oOS=W6xjusd|7Ra^IeVvWrbRL1n+EtDnm{r-UW|U>|L=

diff --git a/auto_database_backup/static/description/index.html b/auto_database_backup/static/description/index.html
index 82e15d1b2..5a6ae246b 100644
--- a/auto_database_backup/static/description/index.html
+++ b/auto_database_backup/static/description/index.html
@@ -55,7 +55,7 @@
 
 <body>
 <!-- HERO -->
-<div class="container shadow" style="width:84vw">
+<div class="container" style="width:84vw">
     <!--Slide-->
     <div class="row"
          style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
@@ -110,6 +110,7 @@
              class="img-responsive">
     </div>
     <!-- END OF slide -->
+
     <!--Highlights-->
     <section class="oe_container pb-5">
         <div class="mt64 mb64">
@@ -119,9 +120,10 @@
             </h2>
             <div class="row">
                 <div class="col-md-6 col-sm-12 mt32">
-                    <div class="container shadow"
-                         style="border-radius: 5px;padding: 33px 0px;">
-                        <div class="col-md-3" style="float:left">
+                    <div class="container shadow d-flex align-items-center justify-content-center"
+                         style="border-radius: 5px;padding: 33px 0px;min-height: 180px; margin: 15px auto;">
+                        <div class="col-md-3 d-flex align-items-center justify-content-center"
+                             style="float:left">
                             <img class="img img-responsive"
                                  src="assets/icons/test-1.png">
                         </div>
@@ -130,17 +132,18 @@
                             <h3 class="mt16 mb0"
                                 style="font-family:Roboto; font-weight:500; font-size:22px; color: #781d96;">
                                 Automated Backup</h3>
-                            <p class=" mt8"
-                               style="font-family:Roboto ; color: #280135;">
+                            <p class=" mt8 mb-0"
+                               style="font-family:Roboto ; color: #280135; margin-bottom: 0px;">
                                 Generate Database Backups on regular
                                 intervals. </p>
                         </div>
                     </div>
                 </div>
                 <div class="col-md-6 col-sm-12 mt32">
-                    <div class="container shadow"
-                         style="border-radius: 5px;padding: 33px 0px;">
-                        <div class="col-md-3" style="float:left">
+                    <div class="container shadow d-flex align-items-center justify-content-center"
+                         style="border-radius: 5px;padding: 33px 0px;min-height: 180px; margin: 15px auto;">
+                        <div class="col-md-3 d-flex align-items-center justify-content-center"
+                             style="float:left">
                             <img class="img img-responsive"
                                  src="assets/icons/test-1.png">
                         </div>
@@ -149,17 +152,18 @@
                             <h3 class="mt16 mb0"
                                 style="font-family:Roboto; font-weight:500; font-size:22px; color: #781d96;">
                                 Remove Redundancy</h3>
-                            <p class=" mt8"
-                               style="font-family:Roboto ; color: #280135;">
+                            <p class=" mt8 mb-0"
+                               style="font-family:Roboto ; color: #280135; margin-bottom: 0px;">
                                 Automatically remove old backups that consumes
                                 storage space. </p>
                         </div>
                     </div>
                 </div>
                 <div class="col-md-6 col-sm-12 mt32">
-                    <div class="container shadow"
-                         style="border-radius: 5px;padding: 33px 0px;">
-                        <div class="col-md-3" style="float:left">
+                    <div class="container shadow d-flex align-items-center justify-content-center"
+                         style="border-radius: 5px;padding: 33px 0px;min-height: 180px; margin: 15px auto;">
+                        <div class="col-md-3 d-flex align-items-center justify-content-center"
+                             style="float:left">
                             <img class="img img-responsive"
                                  src="assets/icons/test-1.png">
                         </div>
@@ -168,8 +172,8 @@
                             <h3 class="mt16 mb0"
                                 style="font-family:Roboto; font-weight:500; font-size:22px; color: #781d96;">
                                 Notification</h3>
-                            <p class=" mt8"
-                               style="font-family:Roboto ; color: #280135;">
+                            <p class=" mt8 mb-0"
+                               style="font-family:Roboto ; color: #280135; margin-bottom: 0px;">
                                 Notify user on success and failure of backup
                                 generation.
                             </p>
@@ -177,9 +181,10 @@
                     </div>
                 </div>
                 <div class="col-md-6 col-sm-12 mt32">
-                    <div class="container shadow"
-                         style="border-radius: 5px;padding: 33px 0px;">
-                        <div class="col-md-3" style="float:left">
+                    <div class="container shadow d-flex align-items-center justify-content-center"
+                         style="border-radius: 5px;padding: 33px 0px;min-height: 180px; margin: 15px auto;">
+                        <div class="col-md-3 d-flex align-items-center justify-content-center"
+                             style="float:left">
                             <img class="img img-responsive"
                                  src="assets/icons/test-1.png">
                         </div>
@@ -188,8 +193,8 @@
                             <h3 class="mt16 mb0"
                                 style="font-family:Roboto; font-weight:500; font-size:22px; color: #781d96;">
                                 Flexibility of Backup</h3>
-                            <p class=" mt8"
-                               style="font-family:Roboto ; color: #280135;">
+                            <p class=" mt8 mb-0"
+                               style="font-family:Roboto ; color: #280135; margin-bottom: 0px;">
                                 Store to Remote Servers, Nextcloud, Amazon S3,
                                 Google Drive, Dropbox, Onedrive. </p>
                         </div>
@@ -199,21 +204,119 @@
         </div>
     </section>
     <!--End of Highlights-->
+
+    <!--Overview-->
+    <section class="oe_container pb-5">
+        <div class="mt64 mb64">
+
+            <div class="col-lg-12 d-flex flex-column align-items-center">
+                <h1 class="text-center text-uppercase"
+                    style="font-family:Montserrat, 'sans-serif' !important; font-size:40px !important; color:#791d97; font-weight:900 !important">
+                    <span style="color:#5154a5">Overview</span>
+                    <sup>
+                    </sup></h1>
+                <p class="my-1 text-center text-uppercase"
+                   style="letter-spacing:4px !important; color:#74788D !important">
+                    Automatic Database Backup.</p>
+            </div>
+
+            <div class="col-sm-12 py-4">
+                <h5 style="text-indent: 2em; text-align: justify;">
+                    This module helps generate backups of your databases
+                    automatically at regular intervals. The generated backups
+                    can be stored in local storage, on an FTP server, SFTP
+                    server, Dropbox, Nextcloud, Google Drive, OneDrive, and
+                    Amazon S3. Additionally, there are features for
+                    automatically deleting old backups and enabling email
+                    notifications.
+                </h5>
+
+                <div class="alert alert-primary mt-4">
+                    <hr/>
+                    This module uses an external python dependency
+                    'dropbox'. Before
+                    installing the module install the python
+                    package
+                    first. The required python package can be installed using the
+                    following command,
+                    <br/>
+                    <code class="d-block mt-2" style="background-color: #e1f1f7;">pip install dropbox</code>
+                </div>
+
+                <div class="alert alert-primary mt-4">
+                    <hr/>
+                    This module uses an external python dependency
+                    'nextcloud'. Before
+                    installing the module install the python
+                    package
+                    first. The required python package can be installed using the
+                    following command,
+                    <br/>
+                    <code class="d-block mt-2" style="background-color: #e1f1f7;">pip install pyncclient</code>
+                </div>
+
+                <div class="alert alert-primary mt-4">
+                    <hr/>
+                    This module uses an external python dependency
+                    'nextcloud-api-wrapper'. Before
+                    installing the module install the python
+                    package
+                    first. The required python package can be installed using the
+                    following command,
+                    <br/>
+                    <code class="d-block mt-2" style="background-color: #e1f1f7;">pip install
+                        nextcloud-api-wrapper</code>
+                </div>
+
+                <div class="alert alert-primary mt-4">
+                    <hr/>
+                    This module uses an external python dependency
+                    'Boto3'. Before installing
+                    the module install the python
+                    package
+                    first. The required python package can be installed using the
+                    following
+                    command,
+                    <br/>
+                    <code class="d-block mt-2" style="background-color: #e1f1f7;">pip install boto3</code>
+                </div>
+
+                <div class="alert alert-primary mt-4">
+                    <hr/>
+                    This module uses an external python dependency
+                    'paramiko'. Before
+                    installing the module install the python
+                    package
+                    first. The required python package can be installed using the
+                    following
+                    command,
+                    <br/>
+                    <code class="d-block mt-2" style="background-color: #e1f1f7;">pip install paramiko</code>
+                </div>
+
+            </div>
+
+        </div>
+    </section>
+    <!--End of Overview-->
+
 </div>
 
 <!-- New section -->
 
-<div class="container shadow" style="width:84vw">
+<div class="container" style="width:84vw">
     <div class="row"
          style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
-        <div class="col-md-12 shadow">
+        <!--    tabs    -->
+        <div class="col-md-12">
             <ul role="tablist"
                 class="nav nav-tabs justify-content-center d-flex justify-content-center"
                 data-tabs="tabs"
                 style="border:none; background-color:unset; margin:0 auto">
+
                 <li class="nav-item"
                     style="border-top-right-radius:10px; border-top-left-radius:10px; background-color:#ffe305; margin-right:10px; border:1px solid #ddd; border-bottom:0">
-                    <a href="#screenshot-1" data-toggle="tab"
+                    <a href="#Screenshot" data-toggle="tab"
                        aria-expanded="true"
                        class="show active"
                        style="font-family:Roboto; text-transform:uppercase; font-weight:600; font-size:15px; letter-spacing:1px; padding:11px 20px; border-top-left-radius:10px; border-top-right-radius:10px; color:#2b2b2b; border:1px solid transparent">
@@ -225,9 +328,10 @@
                     <span class="border-right-0"
                           style="float:right; margin-top:-4px; margin-right:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 0 5px"></span>
                 </li>
+
                 <li class="nav-item"
                     style="border-top-right-radius:10px; border-top-left-radius:10px; background-color:#ffe305; margin-right:10px; border:1px solid #ddd; border-bottom:0">
-                    <a href="#features-1" data-toggle="tab" aria-expanded="true"
+                    <a href="#Features" data-toggle="tab" aria-expanded="true"
                        class="show"
                        style="font-family:Roboto; text-transform:uppercase; font-weight:600; font-size:15px; letter-spacing:1px; padding:11px 20px; border-top-left-radius:10px; border-top-right-radius:10px; color:#2b2b2b; border:1px solid transparent">
                         <img src="assets/icons/feature.png"
@@ -238,22 +342,25 @@
                     <span class="border-right-0"
                           style="float:right; margin-top:-4px; margin-right:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 0 5px"></span>
                 </li>
+
                 <li class="nav-item"
                     style="border-top-right-radius:10px; border-top-left-radius:10px; background-color:#ffe305; margin-right:10px; border:1px solid #ddd; border-bottom:0">
-                    <a href="#faq-1" data-toggle="tab" aria-expanded="true"
+                    <a href="#FAQS" data-toggle="tab" aria-expanded="true"
                        class="show"
                        style="font-family:Roboto; text-transform:uppercase; font-weight:600; font-size:15px; letter-spacing:1px; padding:11px 20px; border-top-left-radius:10px; border-top-right-radius:10px; color:#2b2b2b; border:1px solid transparent">
                         <img src="assets/icons/faq.png"
-                             style="width: 100%; width: 25px; margin-right: 10px;">FAQs
+                             style="width: 100%; width: 25px; margin-right: 10px;">FAQ
                     </a>
                     <span class="border-left-0"
                           style="float:left; margin-top:-4px; margin-left:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 5px 0"></span>
                     <span class="border-right-0"
                           style="float:right; margin-top:-4px; margin-right:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 0 5px"></span>
                 </li>
+
                 <li class="nav-item"
                     style="border-top-right-radius:10px; border-top-left-radius:10px; background-color:#ffe305; margin-right:10px; border:1px solid #ddd; border-bottom:0">
-                    <a href="#video-1" data-toggle="tab" aria-expanded="true"
+                    <a href="#ReleaseNotes" data-toggle="tab"
+                       aria-expanded="true"
                        class="show"
                        style="font-family:Roboto; text-transform:uppercase; font-weight:600; font-size:15px; letter-spacing:1px; padding:11px 20px; border-top-left-radius:10px; border-top-right-radius:10px; color:#2b2b2b; border:1px solid transparent">
                         <img src="assets/icons/notes.png"
@@ -264,13 +371,14 @@
                     <span class="border-right-0"
                           style="float:right; margin-top:-4px; margin-right:-5px; width:5px; height:5px; border:1px solid #ddd; border-top:0; border-radius:0 0 0 5px"></span>
                 </li>
+
             </ul>
         </div>
 
-        <div class="col-md-12  tab-content ui-front shadow"
-             style="border-top-right-radius:15px;border-bottom-right-radius:15px;background-color:#fffafa;height:auto;">
+        <div class="col-md-12  tab-content ui-front"
+             style="border-top-right-radius:15px;border-bottom-right-radius:15px;height:auto;">
 
-            <div class="tab-pane fade active show" id="screenshot-1"
+            <div class="tab-pane fade active show" id="Screenshot"
                  role="tabpanel"
                  aria-labelledby="screenshot-1">
                 <div class="row"
@@ -880,8 +988,7 @@
                 </div>
             </div>
 
-
-            <div class="tab-pane fade" id="features-1" role="tabpanel"
+            <div class="tab-pane fade " id="Features" role="tabpanel"
                  aria-labelledby="features-1">
 
                 <section class="oe_container pt16 mt16 pb-5">
@@ -896,11 +1003,13 @@
                         <div class="col-lg-12 d-flex flex-column align-items-center">
                             <h1 class="text-center text-uppercase"
                                 style="font-family:Montserrat, 'sans-serif' !important; font-size:40px !important; color:#791d97; font-weight:900 !important">
-                                <span style="color:#5154a5">FEATURES </span> <sup>
-                            </sup></h1>
+                                <span style="color:#5154a5">FEATURES </span>
+                                <sup>
+                                </sup></h1>
                             <p class="my-1 text-center text-uppercase"
                                style="letter-spacing:4px !important; color:#74788D !important">
-                                Comprehensive Features of AUTOMATIC DATABASE BACKUP</p>
+                                Comprehensive Features of AUTOMATIC DATABASE
+                                BACKUP</p>
                         </div>
 
 
@@ -910,15 +1019,16 @@
                                  style="padding-bottom: 10px">
                                 <div class="bg-white shadow card"
                                      style="border-radius:10px; padding:5px; height: 100%">
-                                    <div class="text-center card-body"
+                                    <div class="text-center d-flex align-items-center card-body"
                                          style="display: flex; padding: 0px!important; min-height:110px">
-                                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                                        <div class="d-flex align-items-center justify-content-center"
+                                             style="display: flex; align-items: center; justify-content: flex-start;">
                                             <!-- Add the icon here -->
                                             <img src="assets/icons/star-1.svg"
                                                  style="height: 25px; width: 25px; margin-right: 20px; margin-left: 10px">
 
-                                            <h5 style="color:#0e1e40; text-transform:capitalize"
-                                                class="mb2 text-left">
+                                            <h5 style="margin-bottom: 0px !important; color:#0e1e40; font-size: 18px; text-transform:capitalize"
+                                                class="mb2 text-left mb-0">
                                                 Interactive User Interface.
                                             </h5>
                                         </div>
@@ -930,15 +1040,16 @@
                                  style="padding-bottom: 10px">
                                 <div class="bg-white shadow card"
                                      style="border-radius:10px; padding:5px; height: 100%">
-                                    <div class="text-center card-body"
+                                    <div class="text-center d-flex align-items-center card-body"
                                          style="display: flex; padding: 0px!important; min-height:110px">
-                                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                                        <div class="d-flex align-items-center justify-content-center"
+                                             style="display: flex; align-items: center; justify-content: flex-start;">
                                             <!-- Add the icon here -->
                                             <img src="assets/icons/star-1.svg"
                                                  style="height: 25px; width: 25px; margin-right: 20px; margin-left: 10px">
 
-                                            <h5 style="color:#0e1e40; text-transform:capitalize"
-                                                class="mb2 text-left">
+                                            <h5 style="margin-bottom: 0px !important; color:#0e1e40; font-size: 18px; text-transform:capitalize"
+                                                class="mb2 text-left mb-0">
                                                 Store Backup To Different
                                                 Locations.
                                             </h5>
@@ -951,15 +1062,16 @@
                                  style="padding-bottom: 10px">
                                 <div class="bg-white shadow card"
                                      style="border-radius:10px; padding:5px; height: 100%">
-                                    <div class="text-center card-body"
+                                    <div class="text-center d-flex align-items-center card-body"
                                          style="display: flex; padding: 0px!important; min-height:110px">
-                                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                                        <div class="d-flex align-items-center justify-content-center"
+                                             style="display: flex; align-items: center; justify-content: flex-start;">
                                             <!-- Add the icon here -->
                                             <img src="assets/icons/star-1.svg"
                                                  style="height: 25px; width: 25px; margin-right: 20px; margin-left: 10px">
 
-                                            <h5 style="color:#0e1e40; text-transform:capitalize"
-                                                class="mb2 text-left">
+                                            <h5 style="margin-bottom: 0px !important; color:#0e1e40; font-size: 18px; text-transform:capitalize"
+                                                class="mb2 text-left mb-0">
                                                 Automatically Remove Old
                                                 Backups. </h5>
                                         </div>
@@ -971,15 +1083,16 @@
                                  style="padding-bottom: 10px">
                                 <div class="bg-white shadow card"
                                      style="border-radius:10px; padding:5px; height: 100%">
-                                    <div class="text-center card-body"
+                                    <div class="text-center d-flex align-items-center card-body"
                                          style="display: flex; padding: 0px!important; min-height:110px">
-                                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                                        <div class="d-flex align-items-center justify-content-center"
+                                             style="display: flex; align-items: center; justify-content: flex-start;">
                                             <!-- Add the icon here -->
                                             <img src="assets/icons/star-1.svg"
                                                  style="height: 25px; width: 25px; margin-right: 20px; margin-left: 10px">
 
-                                            <h5 style="color:#0e1e40; text-transform:capitalize"
-                                                class="mb2 text-left">
+                                            <h5 style="margin-bottom: 0px !important; color:#0e1e40; font-size: 18px; text-transform:capitalize"
+                                                class="mb2 text-left mb-0">
                                                 Generate Database Backups on
                                                 regular intervals.
                                             </h5>
@@ -992,15 +1105,16 @@
                                  style="padding-bottom: 10px">
                                 <div class="bg-white shadow card"
                                      style="border-radius:10px; padding:5px; height: 100%">
-                                    <div class="text-center card-body"
+                                    <div class="text-center d-flex align-items-center card-body"
                                          style="display: flex; padding: 0px!important; min-height:110px">
-                                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                                        <div class="d-flex align-items-center justify-content-center"
+                                             style="display: flex; align-items: center; justify-content: flex-start;">
                                             <!-- Add the icon here -->
                                             <img src="assets/icons/star-1.svg"
                                                  style="height: 25px; width: 25px; margin-right: 20px; margin-left: 10px">
 
-                                            <h5 style="color:#0e1e40; text-transform:capitalize"
-                                                class="mb2 text-left">
+                                            <h5 style="margin-bottom: 0px !important; color:#0e1e40; font-size: 18px; text-transform:capitalize"
+                                                class="mb2 text-left mb-0">
                                                 Notify User On Success And
                                                 Failure Of Backup Generation.
                                             </h5>
@@ -1013,15 +1127,16 @@
                                  style="padding-bottom: 10px">
                                 <div class="bg-white shadow card"
                                      style="border-radius:10px; padding:5px; height: 100%">
-                                    <div class="text-center card-body"
+                                    <div class="text-center d-flex align-items-center card-body"
                                          style="display: flex; padding: 0px!important; min-height:110px">
-                                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                                        <div class="d-flex align-items-center justify-content-center"
+                                             style="display: flex; align-items: center; justify-content: flex-start;">
                                             <!-- Add the icon here -->
                                             <img src="assets/icons/star-1.svg"
                                                  style="height: 25px; width: 25px; margin-right: 20px; margin-left: 10px">
 
-                                            <h5 style="color:#0e1e40; text-transform:capitalize"
-                                                class="mb2 text-left">
+                                            <h5 style="margin-bottom: 0px !important; color:#0e1e40; font-size: 18px; text-transform:capitalize"
+                                                class="mb2 text-left mb-0">
                                                 Stores To Remote Servers,
                                                 Nextcloud, Amazon S3, Google
                                                 Drive, Dropbox, Onedrive.
@@ -1037,8 +1152,7 @@
 
             </div>
 
-
-            <div class="tab-pane fade " id="faq-1" role="tabpanel"
+            <div class="tab-pane fade " id="FAQS" role="tabpanel"
                  aria-labelledby="faq-1">
 
                 <div class="row"
@@ -1179,8 +1293,7 @@
 
             </div>
 
-
-            <div class="tab-pane fade " id="video-1" role="tabpanel"
+            <div class="tab-pane fade " id="ReleaseNotes" role="tabpanel"
                  aria-labelledby="video-1">
                 <div class="row"
                      style="padding:4rem 2.5rem 0 !important; background-color:#fff !important">
@@ -1220,6 +1333,7 @@
 
 
             </div>
+
         </div>
     </div>