UI redesign: Add compass branding, improve navigation, & simplify content

app/learn-more/page.tsx → app/About/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import {aColor} from "@/lib/client/constants";
 import {useEffect, useState} from "react";
 
-export default function LearnMorePage() {
+export default function About() {
 
   const [totalUsers, setTotalUsers] = useState<number>(0);
   useEffect(() => {
@@ -36,24 +36,23 @@ export default function LearnMorePage() {
           <div className="mt-8 flex space-x-4 justify-center">
             <Link
               href="/manifesto"
-              className="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white text-lg rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition"
+              className="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white text-lg rounded-full hover:bg-gray-300 dark:hover:bg-gray-500 transition"
             >
               The Deeper Why
             </Link>
           </div>
           <h3 id="how-to-help">How to Help</h3>
           <h5 id="give-suggestions-or-contribute">Give Suggestions or Contribute</h5>
-          <p>Give suggestions or show your inclination to contribute through this <a
+          <p>Give suggestions or let us know you want to help through this <a
             href="https://forms.gle/tKnXUMAbEreMK6FC6">form</a>!</p>
           <h5 id="join-chats">Join Chats</h5>
-          <p>You can join the community on <a
-            href="https://discord.gg/8Vd7jzqjun">Discord</a> to shape and test the product—or just to chat with
+          <p>Join the community on <a
+            href="https://discord.gg/8Vd7jzqjun">Discord</a> to shape and test the product—or just chat with
             like-minded people.</p>
           <h5 id="share">Share</h5>
-          <p>Share the idea and article with people who identify with the community values and may benefit from the
-            product.</p>
+          <p>Share the app and article with people who may benefit from the product.</p>
           <h5 id="donate">Donate</h5>
-          <p>You can already donate to support the initial infrastructure via <a
+          <p>Donate to support the initial infrastructure via <a
             href="https://www.paypal.com/paypalme/MartinBraquet">PayPal</a> or <a
             href="https://github.com/sponsors/MartinBraquet">GitHub</a> (GitHub has increased transparency, but requires
             an account).</p>

app/Header.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { FaHome } from "react-icons/fa";
 import ThemeToggle from "@/lib/client/theme";
+import Image from "next/image";
 
 export default function Header() {
   const { data: session } = useSession();
@@ -30,25 +31,30 @@ export default function Header() {
   return (
     <header className="w-full
     {/*shadow-md*/}
-     py-4 px-8 xs:px-4">
+     py-5 px-8 xs:px-4">
       <nav className="flex justify-between items-center">
         <Link 
           href="/" 
-          className="text-xl font-bold hover:text-blue-600 transition-colors flex items-center"
+          className="text-4xl font-bold hover:text-blue-600 transition-colors flex items-center"
           aria-label={isSmallScreen ? "Home" : "Compass"}
         >
-          {isSmallScreen ? <FaHome className="w-5 h-5" /> : 'Compass'}
+          {isSmallScreen ? <FaHome className="w-5 h-5" /> : (
+            <span className="flex items-center gap-2">
+              <Image src="/favicon.ico" alt="Compass logo" className="w-12 h-12 dark:invert"/>
+              Compass
+            </span>
+          )}
         </Link>
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-3">
 
           <ThemeToggle/>
 
           <div className="flex items-center space-x-2">
             <Link
-              href="/learn-more"
-              className={`${fontStyle} bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500`}
+              href="/About"
+              className={`${fontStyle} bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-full hover:bg-gray-300 dark:hover:bg-gray-500`}
             >
-              Learn More
+              About
             </Link>
           </div>
           {session ? (
@@ -62,27 +68,27 @@ export default function Header() {
                 </Link>
                 {/*<Link*/}
                 {/*  href="/profiles"*/}
-                {/*  className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition"*/}
+                {/*  className="bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition"*/}
                 {/*>*/}
                 {/*  Dashboard*/}
                 {/*</Link>*/}
                 <button
                   onClick={() => signOut({callbackUrl: "/"})}
-                  className={`${fontStyle} bg-red-500 text-white rounded-lg hover:bg-red-600`}
+                  className={`${fontStyle} bg-red-500 text-white rounded-full hover:bg-red-600`}
                 >
                   Sign Out
                 </button>
               </div>
             </>
           ) : (
             <>
-              <Link href="/login" className={`${fontStyle} bg-blue-500 text-white rounded-lg hover:bg-blue-600 `}>
+              <Link href="/login" className={`${fontStyle} bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-full hover:bg-gray-300 dark:hover:bg-gray-500`}>
                 Sign In
               </Link>
-              <Link href="/register"
-                    className={`${fontStyle} bg-blue-500 text-white rounded-lg hover:bg-blue-600`}>
+              {/*<Link href="/register"
+                    className={`${fontStyle} bg-blue-500 text-white rounded-full hover:bg-blue-600`}>
                 Sign Up
-              </Link>
+              </Link> */}
             </>
           )}
         </div>

app/complete-profile/page.tsx

@@ -380,7 +380,7 @@ function RegisterComponent() {
 
   const dropdownConfig: DropdownConfig[] = [
     {
-      id: 'connections', title: 'Type of Connection', allowAdd: false,
+      id: 'connections', title: 'Connection Type', allowAdd: false,
       content: null
     },
     {

app/login/page.tsx

@@ -5,6 +5,7 @@ import {useRouter, useSearchParams} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
 import Link from "next/link";
 import {FcGoogle} from "react-icons/fc";
+import Image from "next/image";
 
 export default function LoginPage() {
   return (
@@ -70,6 +71,9 @@ function RegisterComponent() {
     <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">
         <div>
+          <div className="flex justify-center mb-6">
+            <Image src="/favicon.ico" alt="Compass logo" className="w-24 h-24 dark:invert" />
+          </div>
           <h2 className="mt-6 text-center text-3xl font-extrabold ">
             Sign in to your account
           </h2>
@@ -78,15 +82,15 @@ function RegisterComponent() {
           <div className="rounded-md shadow-sm -space-y-px">
             <div>
               <label htmlFor="email" className="sr-only">
-                Email address
+                Email
               </label>
               <input
                 id="email"
                 name="email"
                 type="email"
                 required
                 className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500  rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                placeholder="Email address"
+                placeholder="Email"
               />
             </div>
             <div>
@@ -112,7 +116,7 @@ function RegisterComponent() {
             <button
               type="submit"
               disabled={isLoading}
-              className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
+              className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
             >
               {isLoading ? 'Signing in...' : 'Sign in with Email'}
             </button>
@@ -130,7 +134,7 @@ function RegisterComponent() {
               type="button"
               onClick={handleGoogleSignIn}
               disabled={isLoading}
-              className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700  hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 disabled:cursor-not-allowed"
+              className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700  hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 disabled:cursor-not-allowed"
             >
               <FcGoogle className="w-5 h-5"/>
               Sign in with Google

app/page.tsx

@@ -2,6 +2,7 @@
 
 import ProfilePage from "@/app/profiles/page";
 import Link from "next/link";
+import React from 'react';  // ← Add this line here
 
 export const dynamic = "force-dynamic"; // This disables SSG and ISR
 
@@ -14,8 +15,43 @@ export default function HomePage() {
       </main>
     )
   }
-  const fontStyle = "transition px-6 py-4 text-4xl font-medium xs:text-xs"
+  const fontStyle = "transition px-5 py-3 text-3xl font-medium xs:text-sm"
 
+
+React.useEffect(() => {
+  const text = "Search.";
+  const typewriter = document.getElementById("typewriter");
+  let i = 0;
+  let timeoutId: any;
+  let intervalId;
+
+  // Clear any existing content
+  if (typewriter) {
+    typewriter.textContent = "";
+  }
+
+  function typeWriter() {
+    if (i < text.length && typewriter) {
+      typewriter.textContent = text.substring(0, i + 1);
+      i++;
+      timeoutId = setTimeout(typeWriter, 150);
+    }
+  }
+
+  // Start typing after delay
+  intervalId = setTimeout(() => {
+    typeWriter();
+  }, 500);
+
+  // Cleanup function - this runs when component unmounts
+  return () => {
+    clearTimeout(timeoutId);
+    clearTimeout(intervalId);
+    if (typewriter) {
+      typewriter.textContent = "Search."; // Just show the full text
+    }
+  };
+}, []);
   return (
     <main className="min-h-screen flex flex-col">
       {/* Header */}
@@ -33,21 +69,54 @@ export default function HomePage() {
       {/*</header>*/}
 
       {/* Hero Section */}
-      <section className="flex flex-col items-center justify-center flex-1 text-center px-4">
-        <h1 className="py-4 text-5xl md:text-6xl xs:text-4xl font-extrabold max-w-3xl leading-tight xl:whitespace-nowrap md:whitespace-nowrap ">
-          Don't swipe. Just search.
+      <section className="flex flex-col items-center justify-start flex-1 text-center px-4">
+        <div className="h-20"></div>
+        <h1 className="pt-48 pb-2 text-7xl md:text-8xl xs:text-6xl font-extrabold max-w-4xl leading-tight xl:whitespace-nowrap md:whitespace-nowrap ">
+          Don't Swipe. <span id="typewriter"></span><span id="cursor" className="animate-pulse">|</span>
         </h1>
         {/*<p className="mt-6 text-lg md:text-xl text-gray-400 max-w-2xl">*/}
         {/*  {"Tired of swiping? Search what you're looking for!"}*/}
         {/*</p>*/}
-
-        <div className="py-8">
-          <Link href="/login" className={`${fontStyle} bg-blue-500 text-white rounded-lg hover:bg-blue-600`}>
-            Sign In
+        {/* Spacer */}
+        <div className="h-10"></div>
+        <div className="py-18">
+          <Link href="/register" className={`${fontStyle} bg-gradient-to-r from-red-600 to-red-800 text-white rounded-full hover:from-red-700 hover:to-red-900`}>
+            Join Compass
+
           </Link>
-
+        {/* Spacer */}
+        <div className="h-52"></div>
+        </div>
+        {/* Why Compass Bar */}
+        <div className="w-full bg-gray-50 dark:bg-gray-900 py-16 mt-20">
+          <div className="max-w-6xl mx-auto px-4">
+            <div className="grid md:grid-cols-3 gap-8 text-center">
+              <div className="space-y-2">
+                <h3 className="text-lg font-bold">Radically Transparent</h3>
+                <p className="text-gray-600 dark:text-gray-400">
+                  No algorithms. Every profile searchable.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <h3 className="text-lg font-bold">Built for Depth</h3>
+                <p className="text-gray-600 dark:text-gray-400">
+                  Filter by any keyword and what matters most.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <h3 className="text-lg font-bold">Community Owned</h3>
+                <p className="text-gray-600 dark:text-gray-400">
+                  Free forever. Built by users, for users.
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
-        <div className=" w-full py-4">
+        {/* Spacer */}
+        <div className="h-20"></div>
+        <div className=" w-full py-18">
           {profilePage()}
         </div>
       </section>

app/profiles/ProfileFilters.tsx

@@ -28,7 +28,7 @@ interface FilterProps {
 }
 
 export const dropdownConfig: { id: DropdownKey, name: string }[] = [
-  {id: "connections", name: "Type of Connection"},
+  {id: "connections", name: "Connection Type"},
   {id: "coreValues", name: "Values"},
   {id: "interests", name: "Interests"},
   // {id: "causeAreas", name: "Cause Areas"},

app/register/page.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import {signIn} from "next-auth/react";
 import {FcGoogle} from "react-icons/fc";
 import {useSearchParams} from "next/navigation";
+import Image from "next/image";
+
 
 export default function RegisterPage() {
   return (
@@ -144,12 +146,13 @@ function RegisterComponent() {
           <div>
             <div>
               {/*<h2 className="mt-6 text-center text-xl font-extrabold text-red-700">*/}
-              {/*  The project is still in development. You can sign up if you want to test it, but your account*/}
-              {/*  may be deleted at any time. To get release updates, fill in this <a*/}
-              {/*  href='https://forms.gle/tKnXUMAbEreMK6FC6'>form</a>.*/}
+              {/*  The project is still in development...*/}
               {/*</h2>*/}
-              <h2 className="mt-6 text-center text-3xl font-extrabold ">
-                Create your account
+              <div className="flex justify-center mb-6">
+                <Image src="/favicon.ico" alt="Compass logo" className="w-24 h-24 dark:invert" />
+              </div>
+              <h2 className="text-center text-3xl font-extrabold ">
+                Get Started
               </h2>
             </div>
             <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
@@ -165,20 +168,20 @@ function RegisterComponent() {
                     maxLength={100}
                     required
                     className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500  rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                    placeholder="Full name"
+                    placeholder="Full Name"
                   />
                 </div>
                 <div>
                   <label htmlFor="email" className="sr-only">
-                    Email address
+                    Email
                   </label>
                   <input
                     id="email"
                     name="email"
                     type="email"
                     required
                     className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500  focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
-                    placeholder="Email address"
+                    placeholder="Email"
                   />
                 </div>
                 <div>
@@ -217,7 +220,7 @@ function RegisterComponent() {
                 <button
                   type="submit"
                   disabled={isLoading}
-                  className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
+                  className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
                 >
                   {isLoading ? 'Creating account...' : 'Sign up with Email'}
                 </button>
@@ -235,7 +238,7 @@ function RegisterComponent() {
                   type="button"
                   onClick={handleGoogleSignUp}
                   disabled={isLoading}
-                  className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700  hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 disabled:cursor-not-allowed"
+                  className="w-full flex items-center justify-center gap-2 py-2 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700  hover: focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 disabled:cursor-not-allowed"
                 >
                   <FcGoogle className="w-5 h-5"/>
                   Continue with Google

lib/client/profile.tsx

@@ -120,7 +120,7 @@ export function Profile(url: string, header: any = null) {
   }
 
   const tagsConfig: Tags[] = [
-    {profileAttribute: 'desiredConnections', attribute: 'connection', title: 'Type of Connection'},
+    {profileAttribute: 'desiredConnections', attribute: 'connection', title: 'Connection Type'},
     {profileAttribute: 'coreValues', attribute: 'value', title: 'Values'},
     {profileAttribute: 'intellectualInterests', attribute: 'interest', title: 'Interests'},
     // {profileAttribute: 'causeAreas', attribute: 'causeArea', title: 'Cause Areas'},

prisma/seed.ts

@@ -108,7 +108,8 @@ async function main() {
     data: [
       {name: 'Debate Partner'},
       {name: 'Friendship'},
-      {name: 'Relationship'},
+      {name: 'Short-Term Relationship'},
+      {name: 'Long-Term Relationship'},
     ],
     skipDuplicates: true,
   });