Consistent PyCon 2026 themed headers across all pages

src/app/app.component.ts

@@ -21,6 +21,7 @@ export class AppComponent implements OnInit {
   schedulePages = [
     { title: 'Schedule',  url: '/app/tabs/schedule',         icon: 'calendar-outline' },
     { title: 'Speakers',  url: '/app/tabs/speakers',         icon: 'people-outline' },
+    { title: 'Keynote Speakers', url: '/app/tabs/keynote-speakers', icon: 'star-outline' },
   ]
   presentationPages = [
     { title: 'Talks',     group: 'presentations', url: '/app/tabs/tracks/talks',     icon: 'mic-outline'},

src/app/pages/about-psf/about-psf.page.html

@@ -1,19 +1,18 @@
 <ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-menu-button [color]="liveUpdateService.needsUpdate ? 'primary' : 'medium'"></ion-menu-button>
+      <ion-menu-button></ion-menu-button>
       <ion-badge *ngIf="liveUpdateService.needsUpdate" size=sm>1</ion-badge>
     </ion-buttons>
-    <ion-title>Python Software Foundation</ion-title>
+    <ion-title [class.title-visible]="showTitle">Python Software Foundation</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-
-  <div class="ion-padding">
-    <p class="psf-intro">
-      The Python Software Foundation is the charitable organization behind the Python programming language.
-    </p>
+<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+  <div class="page-hero">
+    <ion-icon name="logo-python" class="page-hero-icon"></ion-icon>
+    <h1>Python Software Foundation</h1>
+    <p>The organization behind the Python language</p>
   </div>
 
   <ion-card>

src/app/pages/about-psf/about-psf.page.scss

@@ -1,17 +1,52 @@
-.psf-hero {
-  padding-top: 24px;
-  padding-bottom: 8px;
-
-  .psf-logo {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 12px;
+ion-header {
+  background: linear-gradient(180deg, #3B3EA9 0%, #3B3EA9 100%);
+  &::after { display: none; }
+}
+
+ion-toolbar {
+  --background: transparent;
+  --border-color: transparent;
+  --color: #ffffff;
+}
+
+ion-toolbar ion-menu-button {
+  --color: #ffffff;
+}
+
+ion-title {
+  opacity: 0;
+  transition: opacity 0.25s ease;
+
+  &.title-visible {
+    opacity: 1;
+  }
+}
+
+.page-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 24px 32px;
+  background: linear-gradient(180deg, #3B3EA9 23.5%, #101136 53.29%);
+  color: #fff;
+  text-align: center;
+
+  .page-hero-icon {
+    font-size: 40px;
+    color: #FFD779;
+    margin-bottom: 10px;
   }
 
   h1 {
-    font-size: 1.5rem;
-    font-weight: 700;
     margin: 0;
+    font-size: 1.6rem;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 6px 0 0;
+    font-size: 0.9rem;
+    opacity: 0.8;
   }
 }
 

src/app/pages/about-psf/about-psf.page.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
-import { LoadingController } from '@ionic/angular';
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { IonContent, LoadingController } from '@ionic/angular';
 
 import { ConferenceData } from '../../providers/conference-data';
 import { LiveUpdateService } from '../../providers/live-update.service';
@@ -10,7 +10,9 @@ import { LiveUpdateService } from '../../providers/live-update.service';
   styleUrls: ['./about-psf.page.scss'],
 })
 export class AboutPsfPage implements OnInit {
+  @ViewChild(IonContent) ionContent: IonContent;
   content: any = "";
+  showTitle = false;
 
   constructor(
     private loadingCtrl: LoadingController,
@@ -33,6 +35,10 @@ export class AboutPsfPage implements OnInit {
     });
   }
 
+  onScroll(event: any) {
+    this.showTitle = event.detail.scrollTop > 100;
+  }
+
   openUrl(url: string) {
     window.open(url, '_system', 'location=yes');
   }

src/app/pages/about-pycon/about-pycon.page.html

@@ -1,30 +1,29 @@
 <ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-menu-button [color]="liveUpdateService.needsUpdate? 'primary' : 'medium'"></ion-menu-button>
+      <ion-menu-button></ion-menu-button>
       <ion-badge *ngIf="liveUpdateService.needsUpdate" size=sm>1</ion-badge>
     </ion-buttons>
-    <ion-title>About PyCon US</ion-title>
+    <ion-title [class.title-visible]="showTitle">About PyCon US</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+  <div class="about-hero">
+    <ion-icon name="information-circle" class="about-hero-icon"></ion-icon>
+    <h1>PyCon US 2026</h1>
+    <p>Long Beach, CA &bull; May 14-18</p>
+  </div>
 
-  <ion-grid>
-    <ion-row>
-     <ion-col>
-      <ion-row *ngIf="liveUpdateService.needsUpdate">
-        <ion-col>
-        <ion-button (click)="performAutomaticUpdate()" *ngIf="liveUpdateService.needsUpdate">Fetch latest update</ion-button>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <ion-col [innerHtml]="content.about">
-        </ion-col>
-      </ion-row>
-    </ion-col>
-    </ion-row>
-  </ion-grid>
+  <ion-button *ngIf="liveUpdateService.needsUpdate" expand="block" class="update-btn" (click)="performAutomaticUpdate()">
+    <ion-icon slot="start" name="download-outline"></ion-icon>
+    Fetch latest update
+  </ion-button>
+
+  <ion-card class="about-card">
+    <ion-card-content [innerHtml]="content.about">
+    </ion-card-content>
+  </ion-card>
 
   <ion-accordion-group class="dev-accordion">
     <ion-accordion value="dev-info">

src/app/pages/about-pycon/about-pycon.page.scss

@@ -1,5 +1,82 @@
+ion-header {
+  background: linear-gradient(180deg, #3B3EA9 0%, #3B3EA9 100%);
+  &::after { display: none; }
+}
+
+ion-toolbar {
+  --background: transparent;
+  --border-color: transparent;
+  --color: #ffffff;
+}
+
+ion-toolbar ion-menu-button {
+  --color: #ffffff;
+}
+
+ion-title {
+  opacity: 0;
+  transition: opacity 0.25s ease;
+
+  &.title-visible {
+    opacity: 1;
+  }
+}
+
+.about-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 24px 40px;
+  background: linear-gradient(180deg, #3B3EA9 23.5%, #101136 53.29%);
+  color: #fff;
+  text-align: center;
+
+  .about-hero-icon {
+    font-size: 40px;
+    color: #FFD779;
+    margin-bottom: 10px;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 6px 0 0;
+    font-size: 0.9rem;
+    opacity: 0.8;
+  }
+}
+
+.update-btn {
+  margin: -16px 20px 0;
+  position: relative;
+  z-index: 2;
+}
+
+.about-card {
+  margin: -20px 16px 16px;
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(16, 17, 54, 0.1);
+  position: relative;
+  z-index: 1;
+
+  ion-card-content {
+    padding: 20px;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    color: var(--ion-text-color);
+  }
+}
+
+:host-context(.dark-theme) .about-card {
+  --background: #1e1e1e;
+}
+
 .dev-accordion {
-  margin-top: 16px;
+  margin: 0 16px 16px;
 }
 
 .dev-content {

src/app/pages/about-pycon/about-pycon.page.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
-import { LoadingController } from '@ionic/angular';
+import { Component, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
+import { IonContent, LoadingController } from '@ionic/angular';
 import { Directory, Filesystem } from '@capacitor/filesystem';
 import { Storage } from '@ionic/storage-angular';
 import { Share } from '@capacitor/share';
@@ -17,7 +17,9 @@ import { environment } from '../../../environments/environment';
   styleUrls: ['./about-pycon.page.scss'],
 })
 export class AboutPyconPage implements OnInit {
+  @ViewChild(IonContent) ionContent: IonContent;
   content: any = "";
+  showTitle = false;
   loggedIn: boolean = false;
   environmentUrl: string = environment.baseUrl;
 
@@ -30,6 +32,10 @@ export class AboutPyconPage implements OnInit {
     public liveUpdateService: LiveUpdateService,
   ) {}
 
+  onScroll(event: any) {
+    this.showTitle = event.detail.scrollTop > 100;
+  }
+
   reloadContent() {
     this.loadingCtrl.create({
       message: 'Fetching latest...',

src/app/pages/account/account.html

@@ -1,47 +1,51 @@
-<ion-header>
+<ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-menu-button [color]="liveUpdateService.needsUpdate ? 'primary' : 'medium'"></ion-menu-button>
+      <ion-menu-button></ion-menu-button>
       <ion-badge *ngIf="liveUpdateService.needsUpdate" size=sm>1</ion-badge>
     </ion-buttons>
-    <ion-title>Account</ion-title>
+    <ion-title [class.title-visible]="showTitle">Account</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <div *ngIf="nickname" class="ion-padding-top ion-text-center">
-    <img src="https://www.gravatar.com/avatar?d=mp&s=140" alt="avatar">
-    <h2>Signed in as {{nickname}}</h2>
+<ion-content scrollEvents="true" (ionScroll)="onScroll($event)">
+  <div *ngIf="nickname" class="account-hero">
+    <ion-icon name="person-circle" class="account-hero-icon"></ion-icon>
+    <h1>{{nickname}}</h1>
     <p><code>{{email}}</code></p>
+  </div>
 
-    <ion-button *ngIf="isSpeaker" color="tertiary" (click)="openSpeakerDiscord()">
+  <div *ngIf="nickname" class="account-actions">
+    <ion-button *ngIf="isSpeaker" expand="block" color="tertiary" (click)="openSpeakerDiscord()">
       <ion-icon slot="start" name="logo-discord"></ion-icon>
       Speaker Discord
     </ion-button>
 
-    <br>
-
-    <ion-button (click)="logout()">Logout</ion-button>
-
+    <ion-button expand="block" fill="outline" color="danger" (click)="logout()">
+      <ion-icon slot="start" name="log-out-outline"></ion-icon>
+      Logout
+    </ion-button>
   </div>
 
-  <ion-list class="ion-margin-top">
+  <ion-list lines="full">
     <ion-list-header>
       <ion-label>Report an Issue</ion-label>
     </ion-list-header>
     <ion-item button="true" (click)="openUrl('https://github.com/PyCon/pycon-us-mobile/issues/new')" detail="true">
-      <ion-icon slot="start" name="phone-portrait-outline"></ion-icon>
+      <ion-icon slot="start" name="phone-portrait-outline" color="primary"></ion-icon>
       <ion-label>
-        <h3>Mobile App Issue</h3>
+        <h2>Mobile App Issue</h2>
         <p>Report a bug or suggest a feature for the app</p>
       </ion-label>
     </ion-item>
     <ion-item button="true" (click)="openUrl('https://github.com/PyCon/pycon-site-public/issues/new')" detail="true">
-      <ion-icon slot="start" name="globe-outline"></ion-icon>
+      <ion-icon slot="start" name="globe-outline" color="primary"></ion-icon>
       <ion-label>
-        <h3>Website Issue</h3>
+        <h2>Website Issue</h2>
         <p>Report an issue with us.pycon.org</p>
       </ion-label>
     </ion-item>
   </ion-list>
+
+  <div style="height: 80px"></div>
 </ion-content>