wip

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>
+