Solid re-design of home / about / profile / press pages

Author: MartinBraquet

android/app/build.gradle

@@ -11,7 +11,7 @@ android {
         applicationId "com.compassconnections.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 134
+        versionCode 135
         versionName "1.32.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {

backend/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compass/api",
-  "version": "1.51.0",
+  "version": "1.52.0",
   "private": true,
   "description": "Backend API endpoints",
   "main": "src/serve.ts",

common/messages/de.json

@@ -21,6 +21,26 @@ export const formLink = 'https://forms.gle/tKnXUMAbEreMK6FC6'
 export const ANDROID_APP_URL =
   'https://play.google.com/store/apps/details?id=com.compassconnections.app'
 
+/**
+ * What Compass has cost and what it has been given, in USD, since launch.
+ *
+ * Lives here rather than in either page because the home strip and the about page both state it, and two
+ * copies of a number that is the whole point of the transparency argument would be the one place it must
+ * not drift. The authoritative breakdown is `web/public/md/financials.md` and the spreadsheet it links;
+ * update all of them together.
+ *
+ * Not queried live: unlike the member count there is no endpoint behind it, and inventing one to avoid a
+ * constant would put a bookkeeping figure on a page-load path.
+ */
+export const FINANCIALS = {
+  spent: 457,
+  donated: 145,
+  /** Covered out of pocket by the founder — kept derived so it can never disagree with the two above. */
+  get deficit() {
+    return this.spent - this.donated
+  },
+}
+
 export const IS_MAINTENANCE = false // set to true to enable the maintenance mode banner
 
 export const MIN_BIO_LENGTH = 250

common/messages/fr.json

@@ -58,7 +58,7 @@ const DEFAULT_AVATAR = '/images/default-avatar.png'
  * Missing portraits are not fatal: the profile still seeds, it just wears the default avatar.
  *
  * `pinned_url` and `photo_urls` are disjoint: the pinned photo must NOT also appear in `photo_urls`.
- * `ProfileCarousel` renders `buildArray(pinned_url, photo_urls)` without deduping, so a shared entry
+ * `ProfileGallery` renders `buildArray(pinned_url, photo_urls)` without deduping, so a shared entry
  * shows up twice. (The photo editor wraps the same call in `uniq`, which masks it while editing.)
  */
 function resolvePhotos(profile: ShowcaseProfile) {

common/src/constants.ts

@@ -88,8 +88,10 @@ export class ProfilePage {
     this.ethnicityAboutSection = page.getByTestId('profile-content')
     this.dietAboutSection = page.getByTestId('profile-content')
     this.languagesAboutSection = page.getByTestId('profile-content')
-    this.seekingAboutSection = page.getByTestId('profile-content')
-    this.relationshipStatusAboutSection = page.getByTestId('profile-content')
+    // Connection goals moved out of the Details rail into the hero callout: they decide whether the
+    // rest of the profile is relevant at all, so they sit above the fold.
+    this.seekingAboutSection = page.getByTestId('profile-connection-goals')
+    this.relationshipStatusAboutSection = page.getByTestId('profile-connection-goals')
     this.educationAboutSection = page.getByTestId('profile-content')
     this.occupationAboutSection = page.getByTestId('profile-content')
     this.workAreaAboutSection = page.getByTestId('profile-content')

docs/marketing-copy.md

@@ -136,9 +136,14 @@ export function StatBand() {
     return () => observer.disconnect()
   }, [armed, node, run])
 
-  const showCountries = !!data && data.countryCount > 1
+  // Countries used to be the second stat here and is now gone. Fifty-five countries across ~700 members is
+  // *dispersion*, not reach — it is the figure that quietly says "nobody near you" while presenting itself
+  // as an achievement, and it was the second thing on the page. Messages sits beside conversations instead
+  // and answers the question a visitor is actually asking of a small platform: does anyone reply. The full
+  // country breakdown still lives on /stats, where someone came to read numbers.
   const showConversations = !!data && data.conversations > 0
-  const lastDelay = STAGGER_MS * ((showCountries ? 1 : 0) + (showConversations ? 1 : 0))
+  const showMessages = !!data && data.messages > 0
+  const lastDelay = STAGGER_MS * ((showConversations ? 1 : 0) + (showMessages ? 1 : 0))
 
   useEffect(() => {
     if (!run) return
@@ -163,18 +168,18 @@ export function StatBand() {
         delay={0}
         run={run}
       />
-      {showCountries && (
+      {showConversations && (
         <CountingStat
-          target={data.countryCount}
-          label={t('about.stat.countries', 'Countries')}
+          target={data.conversations}
+          label={t('about.stat.conversations', 'Conversations')}
           delay={next()}
           run={run}
         />
       )}
-      {showConversations && (
+      {showMessages && (
         <CountingStat
-          target={data.conversations}
-          label={t('about.stat.conversations', 'Conversations')}
+          target={data.messages}
+          label={t('about.stat.messages', 'Messages')}
           delay={next()}
           run={run}
         />
@@ -198,6 +203,13 @@ export function StatBand() {
           </span>
         }
       />
+      {/* One line, and only one. An earlier draft added a sentence here about how thinly the membership is
+          spread; it was cut because this is the page's second element and the reader has not yet been given
+          a single reason to want in — self-criticism before value is just discouragement. The same point is
+          made properly on the home page, attached to something to do about it. */}
+      <p className="w-full text-sm text-ink-500">
+        {t('about.stat.caption', 'Read live from the database, not from a press kit.')}
+      </p>
     </div>
   )
 }

tests/e2e/utils/seed-showcase.ts

@@ -53,7 +53,10 @@ export function AnswerCompatibilityQuestionButton(props: {
       ) : (
         <button
           onClick={() => setOpen(true)}
-          className="bg-ink-100 dark:bg-ink-300 text-ink-1000 hover:bg-ink-200 hover:dark:bg-ink-400 w-28 rounded-full px-2 py-0.5 text-xs transition-colors"
+          // Matches the outlined importance/compatibility pills it sits beside in a prompt. It was the
+          // only solid one of the three, which read as the loudest thing in a block it is not about.
+          className="font-dm-sans border-canvas-300 text-ink-600 hover:border-primary-400 hover:bg-primary-50 h-fit whitespace-nowrap rounded-full border px-2.5 py-1 uppercase transition-colors"
+          style={{fontSize: '10px', letterSpacing: '0.12em'}}
         >
           {t('answers.answer.answer_yourself', 'Answer yourself')}
         </button>