progress

app/__init__.py

@@ -12,7 +12,7 @@ login_manager.login_message = 'Please log in to access this page.'
 login_manager.login_message_category = 'warning'
 
 def create_app(config_name='default'):
-    app = Flask(__name__)
+    app = Flask(__name__, static_folder='static', static_url_path='/static')
     app.config.from_object(config[config_name])
     
     # Initialize extensions

app/templates/partials/destination_folders_section.html

@@ -1,12 +1,14 @@
 <div class="destination-folders-section mb-8 fade-in-htmx" id="destination-folders">
     <div class="section-header bg-base-200 p-4 rounded-t-lg border-b border-base-300">
         <div class="flex flex-col md:flex-row md:items-center md:justify-between">
-            <div>
-                <h2 class="text-2xl font-bold text-base-content">
-
-                    <i class="fas fa-archive mr-3"></i>
-                    Destination Folders</h2>
-                <p class="text-base-content/70 mt-1">Folders where emails are organized and stored</p>
+            <div class="flex flex-col md:flex-row md:items-start md:space-y-0 md:space-x-4">
+                <img src="/static/organized.png" class="w-16 h-16 object-contain flex-shrink-0" alt="Organized emails" />
+                <div>
+                    <h2 class="text-2xl font-bold text-base-content">
+                        Destination Folders
+                    </h2>
+                    <p class="text-base-content/70 mt-1">Folders where emails are organized and stored</p>
+                </div>
             </div>
             <div data-loading-states>
                 <button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"

app/templates/partials/folders_to_tidy_section.html

@@ -1,14 +1,16 @@
 <div class="folders-to-tidy-section mb-8 " id="folders-to-tidy">
     <div class="section-header bg-base-200 p-4 rounded-t-lg border-b border-base-300 fade-in-htmx" >
         <div class="flex flex-col md:flex-row md:items-center md:justify-between">
-            <div>
-                <h2 class="text-2xl font-bold text-base-content flex items-center">
-                    <i class="fas fa-folder-open mr-3"></i>
-                    Emails to organize
-                </h2>
-                <p class="text-base-content/70 mt-1">
-                    Folders that need a little Marie Kondo
-                </p>
+            <div class="flex flex-col md:flex-row md:items-start md:space-y-0 md:space-x-4">
+                <img src="/static/cluttered.png" class="w-16 h-16 object-contain flex-shrink-0" alt="Cluttered emails" />
+                <div>
+                    <h2 class="text-2xl font-bold text-base-content">
+                        Emails to organize
+                    </h2>
+                    <p class="text-base-content/70 mt-1">
+                        Folders that need a little Marie Kondo
+                    </p>
+                </div>
             </div>
         </div>
     </div>