From 868911dfa6beee13648392110c09e7ebe7609438 Mon Sep 17 00:00:00 2001
From: David Keane <david.keane.1974@gmail.com>
Date: Mon, 25 May 2026 07:41:09 +0100
Subject: [PATCH] ux: move banner from Create-Note page to About page
 (side-by-side intro)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The banner image was the first thing under the page title on the
Create-Note page — taking significant vertical space before the user
saw the textarea. The Create-Note page is for *doing*, not for
*reading-about*.

CHANGES
- Banner removed from wp_notes_page_callback() — Create-Note page
  now opens straight into the form.
- Banner added to the top of the About page in a new side-by-side
  row: image on the left capped at 320px wide (not full-bleed), and
  a short intro paragraph + "Go to WP Notes →" CTA on the right.
  Stacks vertically on narrow screens via flex-wrap.
- The side-by-side block lives in its own .wp-notes-about-intro
  container so it doesn't tangle with the rest of the About page's
  pre-existing nested toggles (those are still on the Tier 2 list).
- .wp-notes-header-banner / .wp-notes-banner-img CSS removed from
  wp-notes-styles.php — no longer referenced anywhere.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md            | 15 +++++++++++++
 inc/wp-notes-about.php  | 50 ++++++++++++++++++++++++++++++++++++++++-
 inc/wp-notes-styles.php | 12 ----------
 wp-notes.php            |  6 -----
 4 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f47ce2a..4e40416 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,21 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ## [Unreleased]
 
+### Changed — Banner moved to About page (side-by-side intro)
+- **Banner image removed from the Create-Note page.** It was the
+  first thing under the page title and took up significant vertical
+  space before the user even saw the textarea. The Create-Note page
+  is for *doing*, not for *reading-about*.
+- **Banner added to the top of the About page** in a new
+  side-by-side row: banner image on the left (capped at 320px wide,
+  not full-bleed), and a short intro paragraph + "Go to WP Notes →"
+  CTA on the right. Stacks vertically on narrow screens via
+  `flex-wrap`. Lives inside its own `.wp-notes-about-intro` block so
+  it doesn't interact with the rest of the About page's nested
+  toggles.
+- **`.wp-notes-header-banner` / `.wp-notes-banner-img` CSS removed**
+  from `wp-notes-styles.php` — no longer used.
+
 ### Changed — Tier 1 UX cleanup
 Single pass through `wp_notes_page_callback()` to remove the layout
 debt that had built up over previous releases. Functionality is
diff --git a/inc/wp-notes-about.php b/inc/wp-notes-about.php
index 21128f5..c0088df 100644
--- a/inc/wp-notes-about.php
+++ b/inc/wp-notes-about.php
@@ -6,10 +6,58 @@
  */
 function wp_notes_about_page() {
     ?>
+    <style>
+        /* Banner + intro side-by-side row at the top of the About page.
+           Stacks vertically on narrower screens. */
+        .wp-notes-about-intro {
+            display: flex;
+            gap: 24px;
+            align-items: center;
+            flex-wrap: wrap;
+            margin: 16px 0 28px;
+            padding: 18px;
+            background: #fff;
+            border: 1px solid #ccd0d4;
+            border-radius: 4px;
+        }
+        .wp-notes-about-intro__img {
+            flex: 0 0 320px;
+            max-width: 320px;
+        }
+        .wp-notes-about-intro__img img {
+            display: block;
+            width: 100%;
+            height: auto;
+            border-radius: 4px;
+        }
+        .wp-notes-about-intro__body {
+            flex: 1 1 320px;
+            min-width: 0;
+        }
+        .wp-notes-about-intro__body h2 {
+            margin-top: 0;
+        }
+    </style>
+
     <div class="wrap" style="display: flex; gap: 20px;">
         <!-- Left Section: About Content (70%) -->
         <div style="flex: 0 0 70%;">
-            
+
+            <!-- Banner + intro, side by side -->
+            <div class="wp-notes-about-intro">
+                <div class="wp-notes-about-intro__img">
+                    <img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg"
+                         alt="WP Notes banner">
+                </div>
+                <div class="wp-notes-about-intro__body">
+                    <h2>WP Notes <span style="color:#646970; font-weight:400;">v<?php echo esc_html(WP_NOTES_VERSION); ?></span></h2>
+                    <p>WP Notes is a lightweight task &amp; logbook plugin for WordPress. Log your daily work, mark tasks as done, and keep a tidy history right inside the dashboard &mdash; perfect for freelancers showing clients what's been delivered.</p>
+                    <p style="margin-bottom:0;">
+                        <a href="<?php echo esc_url(admin_url('admin.php?page=wp-notes')); ?>" class="button button-primary">Go to WP Notes →</a>
+                    </p>
+                </div>
+            </div>
+
             <h1>Welcome to WP Notes About Page v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
             <div class="wp-notes-welcome" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
             <p>WP Notes is your task management solution for WordPress. Keep track of your todos, collaborate with team members, and never lose important notes.</p>
diff --git a/inc/wp-notes-styles.php b/inc/wp-notes-styles.php
index 734eb64..0b2f2fb 100644
--- a/inc/wp-notes-styles.php
+++ b/inc/wp-notes-styles.php
@@ -11,18 +11,6 @@ if (!defined('ABSPATH')) {
 function wp_notes_admin_styles() {
     ?>
     <style>
-        /* Header banner image */
-        .wp-notes-header-banner {
-            margin: 16px 0 24px;
-        }
-        .wp-notes-banner-img {
-            display: block;
-            max-width: 1200px;
-            width: 100%;
-            height: auto;
-            border-radius: 4px;
-        }
-
         /* Footer "buy me a coffee" — lives at the BOTTOM of the page */
         .wp-notes-footer-support {
             text-align: center;
diff --git a/wp-notes.php b/wp-notes.php
index 9f3f8ac..ee08088 100644
--- a/wp-notes.php
+++ b/wp-notes.php
@@ -740,12 +740,6 @@ function wp_notes_page_callback() {
             <a href="<?php echo esc_url(admin_url('admin.php?page=wp-notes-about')); ?>">Read more on the About page →</a>
         </p>
 
-        <div class="wp-notes-header-banner">
-            <img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg"
-                 alt="WP Notes Banner"
-                 class="wp-notes-banner-img">
-        </div>
-
         <!-- Note Creation Form with WordPress Admin Styling -->
         <div class="postbox">
             <div class="postbox-header">