From 4429e30c39d3c56eeb20dc7d9851e4c4ad6c31b2 Mon Sep 17 00:00:00 2001 From: NixReaper Date: Sat, 29 Aug 2026 21:59:07 -0500 Subject: [PATCH] Update theme styles, scripts, and front page template --- assets/css/main.css | 200 +++++++++++++++++++++++++++++++++++++++++++- assets/js/main.js | 22 +++++ front-page.php | 131 ++++++++++++++++++++++++----- 3 files changed, 333 insertions(+), 20 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index e4a270a..cb5a8df 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -47,7 +47,19 @@ /* Header / nav -------------------------------------------------------- */ .site-header { - padding: 20px 0; + position: sticky; + top: 0; + z-index: 50; + padding: 16px 0; + /* Stronger tint + blur than a typical "just barely visible" sticky nav — + borrowed from uiXpress's header treatment (90% opacity, 24px blur), + but tinted with Aurora's own card color rather than a neutral black, so + it still reads as part of the vivid gradient brand, not a generic dark + SaaS chrome bar. */ + background: color-mix(in srgb, var(--aurora-card-bg-deep) 92%, transparent); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid var(--aurora-border); } .site-header-inner { @@ -62,6 +74,7 @@ display: block; height: 48px; width: auto; + filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45)); } .footer-logo img { @@ -153,6 +166,182 @@ flex-wrap: wrap; } +.hero-eyebrow { + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 13px; + font-weight: 700; + color: var(--aurora-accent); + margin: 0 0 16px; +} + +.hero-trust { + margin: 20px 0 0; + font-size: 14px; + color: var(--aurora-text-muted); +} + +.hero-stats { + display: flex; + justify-content: center; + gap: 48px; + margin-top: 56px; + flex-wrap: wrap; +} + +.stat { + display: flex; + flex-direction: column; + align-items: center; +} + +.stat-value { + font-size: 32px; + font-weight: 700; + color: var(--aurora-text); +} + +.stat-label { + font-size: 13px; + color: var(--aurora-text-muted); + margin-top: 4px; +} + +/* Section eyebrows (shared by showcase + capabilities) ------------------- */ +.section-eyebrow { + text-transform: uppercase; + letter-spacing: 0.08em; + font-size: 13px; + font-weight: 700; + color: var(--aurora-accent); + margin: 0 0 8px; + text-align: center; +} + +.showcase h2, +.capabilities h2 { + text-align: center; + font-size: 32px; + margin: 0 0 12px; +} + +.section-sub { + text-align: center; + color: var(--aurora-text-muted); + max-width: 560px; + margin: 0 auto 40px; +} + +/* Showcase tabs ------------------------------------------------------------ */ +.showcase { + padding: 80px 0; +} + +.showcase-tabs { + display: flex; + justify-content: center; + gap: 8px; + flex-wrap: wrap; + margin: 40px 0 40px; +} + +.showcase-tab { + padding: 10px 20px; + border-radius: var(--aurora-radius-md); + border: 1px solid var(--aurora-border); + background: transparent; + color: var(--aurora-text-muted); + font-weight: 600; + font-size: 15px; + cursor: pointer; +} + +.showcase-tab.is-active { + background: var(--aurora-accent); + border-color: var(--aurora-accent); + color: #fff; +} + +.showcase-panel { + display: none; +} + +.showcase-panel.is-active { + display: block; +} + +.showcase-panel-inner { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 48px; + align-items: center; + background: var(--aurora-card-bg); + border: 1px solid var(--aurora-card-border); + border-radius: var(--aurora-radius-xl); + box-shadow: var(--aurora-card-shadow); + padding: 40px; +} + +.showcase-copy h3 { + font-size: 24px; + margin: 0 0 12px; +} + +.showcase-copy p { + color: var(--aurora-text-muted); + line-height: 1.6; + margin: 0 0 20px; +} + +.showcase-bullets { + list-style: none; + margin: 0; + padding: 0; +} + +.showcase-bullets li { + padding-left: 24px; + position: relative; + margin-bottom: 12px; + color: var(--aurora-text); + line-height: 1.5; +} + +.showcase-bullets li::before { + content: ''; + position: absolute; + left: 0; + top: 8px; + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--aurora-accent); +} + +.showcase-image img { + border-radius: var(--aurora-radius-lg); + border: 1px solid var(--aurora-card-border); +} + +/* Capabilities grid --------------------------------------------------------- */ +.capabilities { + padding: 80px 0; +} + +.capability-grid { + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); +} + +.capabilities-more { + text-align: center; + margin-top: 32px; +} + +.link-arrow { + color: var(--aurora-accent); + font-weight: 600; +} + /* Feature cards ---------------------------------------------------------- */ .feature-teaser, .feature-section { @@ -465,4 +654,13 @@ .nav-menu li:last-child { border-bottom: none; } + + .showcase-panel-inner { + grid-template-columns: 1fr; + padding: 24px; + } + + .hero-stats { + gap: 32px; + } } diff --git a/assets/js/main.js b/assets/js/main.js index a0a86ed..33af06c 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -9,3 +9,25 @@ toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); }); })(); + +(function () { + var tabs = document.querySelectorAll('.showcase-tab'); + if (!tabs.length) return; + + tabs.forEach(function (tab) { + tab.addEventListener('click', function () { + var targetId = tab.getAttribute('data-tab-target'); + + tabs.forEach(function (t) { + t.classList.remove('is-active'); + t.setAttribute('aria-selected', 'false'); + }); + tab.classList.add('is-active'); + tab.setAttribute('aria-selected', 'true'); + + document.querySelectorAll('.showcase-panel').forEach(function (panel) { + panel.classList.toggle('is-active', panel.id === 'tab-' + targetId); + }); + }); + }); +})(); diff --git a/front-page.php b/front-page.php index e947645..d48ed20 100644 --- a/front-page.php +++ b/front-page.php @@ -2,16 +2,61 @@ defined('ABSPATH') || exit; get_header(); -$highlight_features = [ +$showcase_tabs = [ + [ + 'id' => 'dashboard', + 'label' => 'Dashboard', + 'heading' => 'A dashboard that actually tells you something.', + 'desc' => "Replaces the default WordPress dashboard with real analytics cards, activity summaries, and quick actions — the same data WordPress already has, just laid out like a modern admin.", + 'bullets' => [ + 'Page views, users, and media analytics as real cards, not widgets bolted onto a 2005 layout.', + 'Recent content, scheduled posts, and comments surfaced up front.', + 'Server health and quick actions without digging through menus.', + ], + 'image' => 'screenshot-1.png', + 'alt' => 'The Aurora dashboard', + ], + [ + 'id' => 'role-editor', + 'label' => 'Role Editor', + 'heading' => "Know what every capability actually does.", + 'desc' => 'A visual editor for every WordPress role, with plain-English tooltips explaining what each capability actually controls — no more guessing what "edit_others_posts" means.', + 'bullets' => [ + 'Every built-in and custom role, editable from one screen.', + 'Plain-English descriptions for every capability, not raw slugs.', + 'Changes apply immediately — no page builder, no bloat.', + ], + 'image' => 'screenshot-2.png', + 'alt' => 'Role Editor with capability tooltips', + ], + [ + 'id' => 'dark-mode', + 'label' => 'Dark Mode', + 'heading' => 'A dark mode that covers the whole admin.', + 'desc' => "Not just a few screens — the entire admin, including native WordPress screens Aurora frames rather than rebuilds, plus a real Media Library with folders.", + 'bullets' => [ + '10 color presets plus 2 flat neutrals, applied consistently everywhere.', + 'Rounded, framed cards with theme-tinted scrollbars.', + 'Media Library folders with drag-and-drop organizing.', + ], + 'image' => 'screenshot-3.png', + 'alt' => 'Media Library with folders, dark mode across the admin', + ], +]; + +$capability_cards = [ ['icon' => '🖥️', 'title' => 'Real replacement screens', 'desc' => 'Posts, Pages, Media, Users, Comments, Plugins, Nav Menus, Widgets, Themes, Settings, Tools, Export, and Import — rebuilt, not reskinned.'], - ['icon' => '🌓', 'title' => 'A real dark mode', 'desc' => 'Covers the entire admin, including native screens Aurora frames rather than rebuilds. 10 color presets plus 2 flat neutrals.'], - ['icon' => '🧰', 'title' => 'Power tools', 'desc' => 'Role Editor, Activity Log with Admin/User tabs, Menu Creator with drag-and-drop, Media Folders, White Label, Login Redirect, and more.'], - ['icon' => '🧩', 'title' => 'Disable Gutenberg', 'desc' => 'One toggle switches every post type back to the classic editor, for anyone who prefers it.'], + ['icon' => '🌓', 'title' => 'A real dark mode', 'desc' => 'Covers the entire admin, including native screens Aurora frames rather than rebuilds.'], + ['icon' => '📜', 'title' => 'Activity Log', 'desc' => 'A filterable table with separate Admin and User tabs, plus IP tracking.'], + ['icon' => '📋', 'title' => 'Menu Creator', 'desc' => 'Build and reorder your own wp-admin sidebar menu, drag-and-drop included.'], + ['icon' => '🧩', 'title' => 'Modules', 'desc' => "A one-click marketplace for Aurora's standalone companion plugins."], + ['icon' => '✏️', 'title' => 'Disable Gutenberg', 'desc' => 'One toggle switches every post type back to the classic editor.'], ]; ?>
-

+

+

@@ -23,16 +68,75 @@ $highlight_features = [
+

+ +
+
+ 100% + +
+
+ 15+ + +
+
+ 12 + +
+
-
+
-
- +

+

+
+ $tab) : ?> + + +
+ + $tab) : ?> +
+
+
+

+

+
    + +
    • + +
+
+
+ <?php echo esc_attr($tab['alt']); ?> +
+
+
+ +
+
+ +
+
+

+

+

+
+
+
+ → +
@@ -42,16 +146,5 @@ $highlight_features = [

- -
-
-

-
- <?php esc_attr_e('The Aurora dashboard', 'aurora-admin-theme'); ?> - <?php esc_attr_e('Role Editor with capability tooltips', 'aurora-admin-theme'); ?> - <?php esc_attr_e('Media Library with folders, dark mode across the admin', 'aurora-admin-theme'); ?> -
-
-