wip

app/plugins/bookmarks/controllers/bookmarks.php

@@ -70,6 +70,22 @@ class Bookmarks extends Controller {
         $this->setPrefToggles();
     }
 
+    public function tutorials( $browser = '', $tutorial = '' ) {
+        self::$title = 'Tutorials - {SITENAME}';
+        if ( empty( $browser ) && empty( $tutorial ) ) {
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        if ( ! in_array( $browser, ['chrome','brave','firefox','edge','safari','opera'] ) ) {
+            Issues::add( 'error', 'Unknown browser' );
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        if ( ! in_array( $tutorial, ['pin','settings','import','export'] ) ) {
+            Issues::add( 'error', 'Unknown tutorial' );
+            return Views::view( 'bookmarks.tutorials.list' );
+        }
+        return Views::view( 'bookmarks.tutorials.' . $browser . '.' . $tutorial );
+    }
+
     public function index() {
         self::$title = 'Manage Bookmarks - {SITENAME}';
         if ( Input::exists('submit') ) {
@@ -95,8 +111,11 @@ class Bookmarks extends Controller {
                 $panelArray[] = $folderObject;
             }
         }
-        Components::set( 'folderPanels', Views::simpleView( 'bookmarks.components.bookmarkListPanel', $panelArray ) );
-        return Views::view( 'bookmarks.dash' );
+        if ( ! empty( $folders ) ) {
+            Components::set( 'folderPanels', Views::simpleView( 'bookmarks.components.bookmarkListPanel', $panelArray ) );
+            return Views::view( 'bookmarks.dash' );
+        }
+        return Views::view( 'bookmarks.indexExplainer' );
     }
 
     /**
@@ -564,9 +583,10 @@ class Bookmarks extends Controller {
 
     public function dashboards() {
         self::$title = 'Bookmark Dashboards - {SITENAME}';
+        
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to manage dashboards.' );
-            return $this->index();
+            Issues::add( 'notice', 'You will need an active subscription to start creating dashboards. You can check our <a href="/member/join">Pricing</a> page for more details.' );
+            return Views::view( 'bookmarks.dashboardExplainer' );
         }
         $dashboards = self::$dashboards->byUser();
         return Views::view( 'bookmarks.dashboards.list', $dashboards );
@@ -687,8 +707,8 @@ class Bookmarks extends Controller {
     public function import() {
         self::$title = 'Bookmark Import - {SITENAME}';
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to import bookmarks.' );
-            return $this->index();
+            Issues::add( 'notice', 'You will need an active subscription to start importing bookmarks. You can check our <a href="/member/join">Pricing</a> page for more details.' );
+            return Views::view( 'bookmarks.importExplainer' );
         }
 
         if ( ! Input::exists('submit') ) {
@@ -739,8 +759,8 @@ class Bookmarks extends Controller {
     public function export() {
         self::$title = 'Bookmark Export - {SITENAME}';
         if ( !App::$isMember ) {
-            Issues::add( 'notice', 'You must have an active membership to export bookmarks.' );
-            return $this->index();
+            Issues::add( 'notice', 'You will need an active subscription to start exporting bookmarks. You can check our <a href="/member/join">Pricing</a> page for more details.' );
+            return Views::view( 'bookmarks.exportExplainer' );
         }
 
         $folders = self::$folders->byUser();
@@ -806,7 +826,7 @@ class Bookmarks extends Controller {
         $panelArray = [];
         $folders = self::$folders->byUser();
         if ( empty( $folders ) ) {
-            return Views::view( 'bookmarks.share' );
+            return Views::view( 'bookmarks.shareExplainer' );
         }
         foreach ( $folders as $key => $folder ) {
             $panel = new \stdClass();
@@ -924,13 +944,17 @@ class Bookmarks extends Controller {
             }
             $options = $assocOptions;
         }
-        foreach ( $options as $fieldname => $value ) {
-            if ( $folderID == $value ) {
-                $selected = ' selected';
-            } else {
-                $selected = '';
+        if ( ! empty( $options ) ) {
+            foreach ( $options as $fieldname => $value ) {
+                if ( $folderID == $value ) {
+                    $selected = ' selected';
+                } else {
+                    $selected = '';
+                }
+                $out .= '<option value="' . $value . '"' . $selected . '>' . $fieldname . '</option>';
             }
-            $out .= '<option value="' . $value . '"' . $selected . '>' . $fieldname . '</option>';
+        } else {
+            $out .= '<option value="0" selected>No Folder</option>';
         }
         $out .= '</select>';
         $out .= '</div>';

app/plugins/bookmarks/plugin.php

@@ -18,6 +18,7 @@ use TheTempusProject\Models\Bookmarks as Bookmark;
 use TheTempusProject\Models\Folders;
 use TheTempusProject\Houdini\Classes\Components;
 use TheTempusProject\Houdini\Classes\Template;
+use TheTempusProject\TheTempusProject as App;
 
 class Bookmarks extends Plugin {
     public $pluginName = 'TP Bookmarks';
@@ -43,11 +44,22 @@ class Bookmarks extends Plugin {
             'url' => '{ROOT_URL}bookmarks/index',
             'filter' => 'loggedin',
         ],
+        [
+            'text' => 'Tutorials',
+            'url' => '{ROOT_URL}bookmarks/tutorials',
+            'filter' => 'bkmtuts',
+        ],
         [
             'text' => 'Extensions',
             'url' => '{ROOT_URL}extensions/index',
         ],
     ];
+    public $info_footer_links = [
+        [
+            'text' => 'Tutorials',
+            'url' => '{ROOT_URL}bookmarks/tutorials',
+        ],
+    ];
     public $configMatrix = [
         'enabled' => [
             'type' => 'radio',
@@ -96,9 +108,12 @@ class Bookmarks extends Plugin {
             'type' => 'checkbox',
             'default' => 'true',
         ],
+        'bookmarkTutorials' => [
+            'pretty' => 'Show tutorials for the bookmark feature',
+            'type' => 'checkbox',
+            'default' => 'true',
+        ],
     ];
-
-
     public $resourceMatrix = [
         'routes' => [
             [
@@ -134,17 +149,32 @@ class Bookmarks extends Plugin {
         ]
     ];
 
-
-
-
-
-
     public $bookmarks;
     public $folders;
+    protected static $loaded = false;
     
     public function __construct( $load = false ) {
         $this->bookmarks = new Bookmark;
         $this->folders = new Folders;
+
+        if ( ! self::$loaded && $load ) {
+            $tutpref = true;
+            if ( App::$isLoggedIn ) {
+                if ( empty( App::$activeUser->prefs['bookmarkTutorials'] ) ) {
+                    $tutpref = false;
+                }
+            }
+            $this->filters[] = [
+                'name' => 'bkmtuts',
+                'find' => '#{BKMTUTS}(.*?){/BKMTUTS}#is',
+                'replace' => ( $tutpref ? '$1' : '' ),
+                'enabled' => true,
+            ];
+        }
+
         parent::__construct( $load );
+        if ( ! self::$loaded && $load ) {
+            self::$loaded = true;
+        }
     }
 }

app/plugins/bookmarks/views/bookmarks/unsorted.html

@@ -2,6 +2,13 @@
     <div class="offset-md-2 col-8 mr-2 py-3 context-main-bg p-3">
         <legend class="text-center">Unsorted Bookmarks</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-2">
+            When you add bookmarks without a folder, they will be considered "Unsorted". There is nothing wrong with these bookmarks, 
+            but much of the application relies on folder for organizing and displaying bookmarks. You may find that these bookmarks do not regularly appear in other sections of the application.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <table class="table table-striped context-main1">
             <thead>
                 <tr>

app/plugins/bookmarks/views/dash.html

@@ -1,7 +1,18 @@
 <div class="mb-4 mt-4">
     <div class="offset-md-1 col-10 py-3 context-main-bg">
-        <legend class="text-center">MAnage</legend>
+        <legend class="text-center">Manage Bookmarks</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-4">
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-4">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+        <hr>
+        {/BKMTUTS}
         {VIEW_OPTIONS}
         <hr>
         <div class="row g-3" data-masonry='{ "percentPosition": false }' id="bookmarkSort">

app/plugins/bookmarks/views/dashboardExplainer.html

@@ -0,0 +1,14 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Dashboards</legend>
+        <hr>
+        <p class="px-2">
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-2">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+    </div>
+</div>

app/plugins/bookmarks/views/dashboards/list.html

@@ -2,10 +2,17 @@
     <div class="offset-2 col-8 p-3 context-main-bg">
         <legend class="text-center">Dashboards</legend>
         <hr>
-        <div class="offset-3 col-lg-6 my-4">
-            <p>From here you can easily create, update, or remove any bookmark dashboards you have created.</p>
-            <p>Dashboards are a feature that allow you to build customized bookmark pages that you can easily save and open la</p>
-        </div>
+        {BKMTUTS}
+        <p class="px-2">
+            Dashboards are one of our most powerful and useful features of AllTheBookmarks. With dashboards, you're able to create, edit, share, and use pages built dynamically from your bookmark folders.
+            When you create a dashboard, you select any number of your organized folders, select a few display options, and you gain access to a new page just for those folders.
+        </p>
+        <p class="px-2">
+            Sometimes, there just isn't enough room on the toolbar. Instead of having 6 folders you always use, have 1, short link called "Games" that opens 1 page. I use this to group small sections of 
+            my bookmarks together like games. I have PalWorld, WoW, Satisfactory, and Diablo links in a "Games" dashboard. I can just quickly go to that dash, find the folder I need and go.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <div class="row g-3 text-center p-2">
             <table class="table context-main">
                 <thead>

app/plugins/bookmarks/views/export.html

@@ -2,6 +2,20 @@
     <div class="offset-2 col-8 p-3 context-main-bg">
         <legend class="text-center">Bookmark Export</legend>
         <hr>
+        {BKMTUTS}
+        <p class="px-2">
+            Our export tool allows you to select bookmarks and folders from your AllTheBookmarks account and generate a file that you can then import into any browser. 
+            Giving you access to all your bookmarks right inside your browser.
+        </p>
+        <p class="px-2">
+            You can simply select the folders you want to bring into your browser on this page and click generate. A notification will pop-up showing you where you can 
+            find your file for download. You take that newly saved file an import it into your browser of choice.
+        </p>
+        <p class="px-2">
+            If you need help importing your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <h3 class="text-center">Select which folders to include in the export</h3>
         <form action="" method="post">
             <div class="row g-3 col-4 offset-4">

app/plugins/bookmarks/views/exportExplainer.html

@@ -0,0 +1,17 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Export</legend>
+        <hr>
+        <p class="px-2">
+            Our export tool allows you to select bookmarks and folders from your AllTheBookmarks account and generate a file that you can then import into any browser. 
+            Giving you access to all your bookmarks right inside your browser.
+        </p>
+        <p class="px-2">
+            You can simply select the folders you want to bring into your browser on this page and click generate. A notification will pop-up showing you where you can 
+            find your file for download. You take that newly saved file an import it into your browser of choice.
+        </p>
+        <p class="px-2">
+            If you need help importing your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+    </div>
+</div>

app/plugins/bookmarks/views/folders/listPage.html

@@ -1,5 +1,11 @@
 <div class="offset-2 col-8 p-3 context-main-bg my-4">
     <legend class="text-center">Folders List</legend>
     <hr>
+    {BKMTUTS}
+    <p class="ps-2">
+        Just like the folders you have in your web browser, you can add, edit, or remove folders for organizing your bookmarks here.
+    </p>
+    <hr>
+    {/BKMTUTS}
     {foldersList}
 </div>

app/plugins/bookmarks/views/import.html

@@ -1,7 +1,20 @@
 <div class="my-4">
     <div class="offset-2 col-8 p-3 context-main-bg">
-        <legend class="text-center">Import Bookmarks</legend>
+        <legend class="text-center">Bookmark Import</legend>
         <hr>
+        {BKMTUTS}
+        <p class="ps-2">
+            Our import tool allows you to upload a file from you browser (Chrome, Firefox, etc) that will add all of your bookmarks and folders to your allthebookmarks.com dashboard.
+        </p>
+        <p class="ps-2">
+            The tool has been tested with all major browsers except safari. This includes Firefox, Chrome, Opera, Brave, and Edge. 
+            You will need to browse your computer and select the <strong>.html</strong> file where you exported your bookmarks from your browser.
+        </p>
+        <p class="ps-2">
+            If you need help exporting your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+        <hr>
+        {/BKMTUTS}
         <form method="post" enctype="multipart/form-data">
             <div class="offset-3 col-lg-6 my-4 text-center">
                 <label for="bookmark_file" class="col-lg-3 control-label">Import file (.html):</label>

app/plugins/bookmarks/views/importExplainer.html

@@ -0,0 +1,16 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Bookmark Import</legend>
+        <hr>
+        <p class="ps-2">
+            Our import tool allows you to upload a file from you browser (Chrome, Firefox, etc) that will add all of your bookmarks and folders to your allthebookmarks.com dashboard.
+        </p>
+        <p class="ps-2">
+            The tool has been tested with all major browsers except safari. This includes Firefox, Chrome, Opera, Brave, and Edge. 
+            You will need to browse your computer and select the <strong>.html</strong> file where you exported your bookmarks from your browser.
+        </p>
+        <p class="ps-2">
+            If you need help exporting your bookmarks, we have <a href="/bookmarks/tutorials" class="text-decoration-none atb-green">tutorials</a> available for every major browser that can help.
+        </p>
+    </div>
+</div>

app/plugins/bookmarks/views/indexExplainer.html

@@ -0,0 +1,19 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Manage Bookmarks</legend>
+        <hr>
+        <p class="ps-2">
+            This is one of the main pages you'll be using to manage your bookmarks. Here you will find a list of all of your folders and the bookmarks they contain. 
+            Hidden, archived, private, and public bookmarks can all be reviewed on this page using the filter options below. Some controls may be hidden by default, 
+            so you're encouraged to toggle them to better understand your options for managing your bookmarks.
+        </p>
+        <p class="ps-2">
+            Once you start collecting hundreds and thousands of bookmarks, this page can get a bit overwhelming. We encourage you to check out our <a href="/bookmarks/dashboards" class="text-decoration-none atb-green">Dashboards</a> feature 
+            for a more robust way to interact with all your saved bookmarks. Make use of the ability to hide and archive bookmarks to keep organized as well.
+        </p>
+        <div class="text-center mt-4 pb-4">
+            <a href="/bookmarks/createBookmark" class="btn btn-outline-secondary btn-lg px-5 ms-3 atb-green-bg">Add Bookmarks</a>
+            <a href="/bookmarks/createFolder" class="btn btn-outline-secondary btn-lg px-5 ms-3 atb-green-bg">Add Folders</a>
+        </div>
+    </div>
+</div>

app/plugins/bookmarks/views/introduction.html

@@ -0,0 +1,60 @@
+<div class="container py-5">
+    <!-- Hero Section -->
+    <div class="text-center mb-5">
+      <h1 class="display-4">Welcome to <span class="text-primary">All The Bookmarks</span></h1>
+      <p class="lead">Your ultimate tool for organizing, sharing, and managing website bookmarks effortlessly.</p>
+      <img src="path/to/hero-image.jpg" alt="Illustration of bookmark organization" class="img-fluid my-4">
+      <a href="#" class="btn btn-primary btn-lg">Get Started</a>
+    </div>
+  
+    <!-- Features Section -->
+    <div class="row text-center mb-5">
+      <div class="col-md-4">
+        <i class="fas fa-folder fa-3x text-primary mb-3"></i>
+        <h5>Organize Your Bookmarks</h5>
+        <p>Create folders to keep your bookmarks tidy and easy to find.</p>
+      </div>
+      <div class="col-md-4">
+        <i class="fas fa-share-alt fa-3x text-primary mb-3"></i>
+        <h5>Share Collections</h5>
+        <p>Share dashboards with groups of folders to collaborate seamlessly.</p>
+      </div>
+      <div class="col-md-4">
+        <i class="fas fa-sync-alt fa-3x text-primary mb-3"></i>
+        <h5>Import & Export</h5>
+        <p>Sync your bookmarks across major browsers with our easy import/export tools.</p>
+      </div>
+    </div>
+  
+    <!-- Browser Extensions Section -->
+    <div class="row align-items-center mb-5">
+      <div class="col-md-6">
+        <h3>Bookmark Anytime, Anywhere</h3>
+        <p>Our browser extension works with Chrome, Firefox, Brave, Edge, and Opera, making it simple to save and manage bookmarks directly from your browser.</p>
+        <a href="#" class="btn btn-outline-primary">Install Extension</a>
+      </div>
+      <div class="col-md-6 text-center">
+        <img src="path/to/extension-image.jpg" alt="Illustration of browser extensions" class="img-fluid">
+      </div>
+    </div>
+  
+    <!-- Dashboards Section -->
+    <div class="row align-items-center mb-5">
+      <div class="col-md-6 text-center">
+        <img src="path/to/dashboard-image.jpg" alt="Illustration of dashboards" class="img-fluid">
+      </div>
+      <div class="col-md-6">
+        <h3>Dynamic Dashboards</h3>
+        <p>Group folders into dashboards and share them to keep everyone updated on the latest changes.</p>
+        <a href="#" class="btn btn-outline-primary">Learn More About Dashboards</a>
+      </div>
+    </div>
+  
+    <!-- Call to Action -->
+    <div class="text-center">
+      <h4>Ready to Get Started?</h4>
+      <p>Start organizing, sharing, and syncing your bookmarks today!</p>
+      <a href="#" class="btn btn-success btn-lg">Create Your First Folder</a>
+    </div>
+  </div>
+  

app/plugins/bookmarks/views/share.html

@@ -2,9 +2,17 @@
     <div class="offset-md-1 col-10 py-3 context-main-bg">
         <legend class="text-center">Share</legend>
         <hr>
+        {BKMTUTS}
         <div class="offset-3 col-lg-6 my-4">
-            <p>Any link or folder can be shared. By default, the extensions and app both default to <strong>private</strong>. On this page, you can quickly see a list of any public links and folders. These "public" items can be shared with anyone who has the link.</p>
+            <p class="px-2">
+                This is the share page, designed to very quickly show you what folders and urls you have set to public and have the ability to share with anyone.
+            </p>
+            <p class="px-2">
+                Any link or folder can be shared and by default, the extensions and app default to <strong>private</strong>. These "public" items can be viewed by anyone with the link provided from this page.
+            </p>
+            <hr>
         </div>
+        {/BKMTUTS}
         <div class="row g-3"  data-masonry='{ "percentPosition": false }' id="bookmarkSort">
             {LOOP}
                 {panel}

app/plugins/bookmarks/views/shareExplainer.html

@@ -0,0 +1,12 @@
+<div class="my-4">
+    <div class="offset-2 col-8 p-3 context-main-bg">
+        <legend class="text-center">Share</legend>
+        <hr>
+        <p class="px-2">
+            This is the share page, designed to very quickly show you what folders and urls you have set to public and have the ability to share with anyone.
+        </p>
+        <p class="px-2">
+            Any link or folder can be shared and by default, the extensions and app default to <strong>private</strong>. These "public" items can be viewed by anyone with the link provided from this page.
+        </p>
+    </div>
+</div>

app/plugins/bookmarks/views/tutorials/brave/export.html

@@ -0,0 +1,42 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Export bookmarks from Brave</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of brave.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Export Menu</h5>
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/brave/import.html

@@ -0,0 +1,44 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Import bookmarks in Brave</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of brave.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Import Menu</h5>
+
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/brave/pin.html

@@ -0,0 +1,35 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Brave</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Brave extension, you can find it in the 
+                <a href="/brave" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your brave toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/brave/settings.html

@@ -0,0 +1,33 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Access Extension Settings in Brave</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Brave extension, you can find it in the 
+                <a href="/brave" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                With Brave, accessing the extension settings couldn't be easier.
+            </p>
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/brave/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/bookmarks/tutorials/brave/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/chrome/export.html

@@ -0,0 +1,42 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Export bookmarks from Chrome</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of chrome.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Export Menu</h5>
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/chrome/import.html

@@ -0,0 +1,44 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Import bookmarks in Chrome</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of chrome.
+            </p>
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three dots on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, hover over <strong>Bookmarks and Lists</strong> then select <strong>Bookmark Manager</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-manager.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <h5>Step 2: Open the Import Menu</h5>
+
+            <p class="card-text">
+                On this page, in the top right, you should see another set of three dots, click these.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/bookmark-menu.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/chrome/pin.html

@@ -0,0 +1,35 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Chrome</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the 
+                <a href="/chrome" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your chrome toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/chrome/settings.html

@@ -0,0 +1,33 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Access Extension Settings in Chrome</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Chrome extension, you can find it in the 
+                <a href="/chrome" class="text-decoration-none text-primary" target="_blank">Chrome Web Store</a>.
+            </div>
+            <p class="card-text">
+                With Chrome, accessing the extension settings couldn't be easier.
+            </p>
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/chrome/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/bookmarks/tutorials/chrome/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/firefox/export.html

@@ -0,0 +1,54 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Export bookmarks in Firefox</h2>
+            <hr>
+            <p class="card-text">
+                Exporting your bookmarks is lightning fast and simple inside of firefox.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, select <strong>Bookmarks</strong> and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, select <strong>Manage Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Import Menu</h5>
+            <p class="card-text">
+                On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import-export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Export Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, save the <strong>.html</strong> file somewhere easy to access when you use the <a href="/bookmarks/import" class="text-decoration-none atb-green">imports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/firefox/import.html

@@ -0,0 +1,54 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Import bookmarks in Firefox</h2>
+            <hr>
+            <p class="card-text">
+                Importing your bookmarks from AllTheBookmarks is lightning fast and simple inside of firefox.
+            </p>
+
+            <h5 class="mt-4">Step 1: open the main application menu </h5>
+            <p class="card-text">
+                Simply left-click these three lines on the right side of your main toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/settings.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+
+            <h5>Step 2: Open the Bookmark Menu</h5>
+            <p class="card-text">
+                In the list, select <strong>Bookmarks</strong> and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Bookmark Manager</h5>
+            <p class="card-text">
+                In the list, select <strong>Manage Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/manage-bookmarks.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <h5>Step 3: Open the Import Menu</h5>
+            <p class="card-text">
+                On this page, near the top left, you should see a button that says <strong>Import and Backup</strong>. Click this button and another menu should appear.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import-export.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            
+            <p class="card-text">
+                From this list, select <strong>Import Bookmarks</strong>.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/import.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+
+            <p class="card-text">
+                Finally, select the <strong>.html</strong> file you saved when using the <a href="/bookmarks/export" class="text-decoration-none atb-green">exports</a> feature.
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/firefox/pin.html

@@ -0,0 +1,35 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to pin the extension to your toolbar in Firefox</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the 
+                <a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
+            </div>
+            <p class="card-text">
+                Once installed, you can add the extension to your firefox toolbar with just a few easy steps.
+            </p>
+            <h5 class="mt-4">Step 1: Find the extensions icon on your toolbar.</h5>
+            <p class="card-text">
+                It should look like this:
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/extensions-icon.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Left click this icon and a list of your currently installed extensions should show.</h5>
+            <p class="card-text">
+                Next to AllTheBookmarks, on the right you should see a pin icon, click this.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/pin.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                Once pinned, you should see the AllTheBookmarks icon on the toolbar.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/pinned.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/firefox/settings.html

@@ -0,0 +1,33 @@
+<section class="container my-5">
+    <div class="card shadow-sm">
+        <div class="card-body context-main-bg">
+            <h2 class="card-title text-center mb-4">How to Access Extension Settings in Firefox</h2>
+            <hr>
+            <div class="alert alert-success w-100 text-center" role="alert">
+                If you have not already installed the AllTheBookmarks Firefox add-on, you can find it in the 
+                <a href="/firefox" class="text-decoration-none text-primary" target="_blank">Firefox Store</a>.
+            </div>
+            <p class="card-text">
+                With Firefox, accessing the extension settings couldn't be easier.
+            </p>
+            <h5 class="mt-4">Step 1: Locate the Extension Icon</h5>
+            <p class="card-text">
+                Simply locate the AllTheBookmarks icon on your toolbar and right-click the icon.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/options.png" class="img-fluid rounded mb-4" alt="Right-clicking on the extension icon">
+            </div>
+            <h5>Step 2: Open the Options</h5>
+            <p class="card-text">
+                From the dropdown menu that appears, select <strong>Options</strong>. You should be greeted by a settings page very similar to the one below.
+            </p>
+            <div class="text-center">
+                <img src="/app/plugins/bookmarks/images/firefox/settings-page.png" class="img-fluid rounded mb-4" alt="Extension settings page">
+            </div>
+            <p class="card-text">
+                (If you need help pinning the extension to your toolbar for easy access, we have a separate 
+                <a href="/bookmarks/tutorials/firefox/pin" class="text-decoration-none atb-green">tutorial</a> for that.)
+            </p>
+        </div>
+    </div>
+</section>

app/plugins/bookmarks/views/tutorials/list.html

@@ -0,0 +1,202 @@
+<section class="container my-5">
+    <h1 class="text-center mb-4">Browser Tutorials</h1>
+    <div class="row g-4">
+        <!-- Opera Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-opera fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title text-center">Opera</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush rounded">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/opera/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/opera/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/opera/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/opera/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    
+        <!-- Firefox Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-firefox fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Firefox</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/firefox/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Chrome Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-chrome fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Chrome</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/chrome/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Brave Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-brave fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Brave</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/brave/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/brave/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/brave/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/brave/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Edge Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-edge fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Edge</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/edge/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/edge/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/edge/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/edge/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <!-- Safari Section -->
+        <div class="col-md-4">
+            <div class="card h-100 shadow-sm context-main-bg">
+                <div class="card-body text-center">
+                    <i class="fab fa-safari fa-3x mb-3 atb-green"></i>
+                    <h5 class="card-title">Safari</h5>
+                    <hr>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/safari/pin" class="text-decoration-none atb-green">
+                                How to pin the extension to your toolbar
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/safari/settings" class="text-decoration-none atb-green">
+                                How to Open the extension settings page
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/safari/import" class="text-decoration-none atb-green">
+                                How to Import Bookmarks into the browser
+                            </a>
+                        </li>
+                        <li class="list-group-item context-second-bg mb-1">
+                            <a href="{ROOT_URL}bookmarks/tutorials/safari/export" class="text-decoration-none atb-green">
+                                How to export Bookmarks from the browser
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>