update about page

src/pages/informational/about/about.tsx

@@ -9,7 +9,7 @@ import { Team } from "./team";
 export function About() {
   return (
     <main className="w-full grid content-start pb-40 @container">
-      <Seo title="About us" />
+      <Seo title="About Us" />
       <div className="bg-gradient-to-br from-50% from-transparent to-peach/50">
         <Hero classes="padded-container" />
       </div>

src/pages/informational/about/hero.tsx

@@ -9,11 +9,11 @@ export function Hero({ classes = "" }) {
       <p className="text-blue-d1 text-sm md:text-lg font-heading uppercase font-bold text-center mb-5 tracking-wider">
         No nonprofit left behind
       </p>
-      <h1 className="mx-auto text-3xl md:text-4xl lg:text-5xl text-center text-pretty mb-10 mt-4 px-6">
+      <h1 className="mx-auto text-3xl/tight md:text-4xl/tight lg:text-4.5xl/tight text-center text-balance   mb-10 mt-4 px-6">
         Nonprofits deserve a more inclusive and sustainable model of
         philanthropy
       </h1>
-      <p className="px-6 text-navy max-md:block md:text-2xl text-center text-pretty sm:text-balance">
+      <p className="px-6 text-navy max-md:block md:text-2xl text-center text-balance max-w-4xl justify-self-center sm:text-balance">
         At Better Giving, we’re committed to breaking down the financial
         barriers that nonprofits face. Through free donation processing,
         savings, and investment tools, we equip nonprofits with the resources
@@ -22,7 +22,7 @@ export function Hero({ classes = "" }) {
 
       <Link
         to={appRoutes.register}
-        className="mt-8 isolate justify-self-center normal-case inline-flex items-center px-10 py-3 gap-1 rounded-full text-lg font-heading relative bg-blue-d1 group active:translate-x-1 text-white font-bold shadow-2xl"
+        className="mt-10 isolate justify-self-center normal-case inline-flex items-center px-10 py-3 gap-1 rounded-full text-lg font-heading relative bg-blue-d1 group active:translate-x-1 text-white font-bold shadow-2xl"
       >
         <span className="ml-1 text-center">
           Join the Fundraising Revolution

src/pages/informational/about/manifesto.tsx

@@ -3,7 +3,7 @@ import { ShipWheel, Sprout, Tally4 } from "lucide-react";
 export function Manifesto({ className = "" }) {
   return (
     <section className={`${className} grid pb-40`}>
-      <h2 className="col-span-full text-center text-4xl leading-snug">
+      <h2 className="col-span-full text-center text-4.5xl leading-snug">
         The Better Giving Manifesto
       </h2>
       <p className="text-navy text-center mb-8 col-span-full text-xl mt-4 max-w-3xl justify-self-center">
@@ -14,7 +14,7 @@ export function Manifesto({ className = "" }) {
       </p>
 
       <p className="text-xl font-bold text-center text-blue-d1 mb-4">
-        We believe in these fundamental rights for all nonprofits
+        We believe in these fundamental rights for all nonprofits :
       </p>
 
       <ul className="flex flex-wrap sm:justify-center gap-4 mt-4 mb-8">
@@ -26,11 +26,11 @@ export function Manifesto({ className = "" }) {
         </li>
         <li className="max-md:w-full pb-8 grid justify-items-center bg-white rounded shadow-2xl shadow-lilac gap-y-4 p-4 border-lilac border text-center font-heading font-black">
           <Tally4 size={35} className="text-navy" />
-          <span className="text-lg">The Right to equal opportunity</span>
+          <span className="text-lg">The Right to Equal Opportunity</span>
         </li>
         <li className="max-md:w-full pb-8 grid justify-items-center bg-white rounded shadow-2xl shadow-lilac gap-y-4 p-4 border-lilac border text-center font-heading font-black">
           <ShipWheel size={40} className="text-blue-d1" />
-          <span className="text-lg">The Right to organizational autonomy</span>
+          <span className="text-lg">The Right to Organizational Autonomy</span>
         </li>
       </ul>
 

src/pages/informational/about/quote.tsx

@@ -29,11 +29,10 @@ export function Quote({ className = "" }) {
       </div>
 
       <div className="self-center p-8 pb-2 mt-4 max-w-3xl relative">
-        <div className="w-2 shadow-inner h-full absolute inset-y-0 left-0 bg-lilac/50 rounded-full" />
         <img
           src={quotation}
           alt="quotation mark"
-          className="justify-self-start w-24 lg:w-36 mb-4 -mt-24"
+          className="justify-self-start w-24 lg:w-36 mb-6 -mt-24"
         />
         <blockquote className="text-xl sm:text-2xl font-medium text-navy-l3 italic mb-2 font-heading">
           Our mission is to give every nonprofit, everywhere, free access to the
@@ -43,7 +42,7 @@ export function Quote({ className = "" }) {
           scarcity and dependence but rather abundance and financial
           self-sufficiency
         </blockquote>
-        <p className="text-right text-lg text-navy mt-8">
+        <p className="text-right font-heading text-lg text-navy mt-8">
           – Chauncey St. John
           <span className="block text-sm font-medium">Founder</span>​
         </p>

src/pages/informational/about/section-2.tsx

@@ -37,10 +37,10 @@ export function Section2({ className = "" }) {
       <h4 className="mb-4 col-span-full text-lg text-blue-d1 uppercase text-center">
         WE STAND FOR NONPROFITS
       </h4>
-      <h2 className="col-span-full text-center text-4xl leading-snug">
+      <h2 className="col-span-full text-center text-4.5xl leading-snug">
         Our Mission & Values
       </h2>
-      <p className="text-navy text-center mb-16 col-span-full text-xl mt-4">
+      <p className="text-navy text-center mb-16 col-span-full text-xl mt-4 max-w-4xl justify-self-center">
         Our mission is to financially empower fellow nonprofits by providing a
         free, global one-stop solution to fundraise, save, and invest. We
         believe that making financial sustainability easy and accessible creates
@@ -65,10 +65,10 @@ function ListItem(props: TListItem) {
         width={props.image.width}
         className="mb-4"
       />
-      <h5 className="text-center font-body font-medium text-2xl text-navy">
+      <h5 className="text-center font-body font-medium text-2xl text-navy mb-2">
         {props.title1}
       </h5>
-      <h6 className="text-center self-center font-normal font-body text-lg @6xl:text-xl text-navy-l1 mb-4">
+      <h6 className="text-center self-start font-normal font-body text-lg @6xl:text-xl text-navy-l1 mb-4">
         {props.title2}
       </h6>
       <p className="pt-4 text-center @6xl:text-lg text-navy-l3 border-t-[3px] border-blue-d1 ">

src/pages/informational/about/team.tsx

@@ -1,11 +1,11 @@
 import github from "assets/icons/social/github.png";
 import linkedin from "assets/icons/social/linkedin.png";
-import chauncey from "assets/people/chauncey.jpeg";
-import justin from "assets/people/justin.jpeg";
+import chauncey from "assets/people/chauncey2.png";
+import justin from "assets/people/justin.jpg";
 import pallav from "assets/people/pallav.jpeg";
 import shaun from "assets/people/shaun.jpeg";
-import tejaswini from "assets/people/tejaswini.jpeg";
-import tim from "assets/people/tim.jpeg";
+import tejaswini from "assets/people/tejaswini.png";
+import tim from "assets/people/tim.png";
 import ExtLink from "components/ExtLink";
 import { Mail } from "lucide-react";
 
@@ -75,7 +75,7 @@ const members: IMember[] = [
 export function Team({ classes = "" }) {
   return (
     <div className={`${classes} grid pb-20`}>
-      <h2 className="mx-auto text-3xl md:text-4xl lg:text-5xl max-md:text-center text-balance mb-16 mt-4 text-blue-d1">
+      <h2 className="mx-auto text-3xl md:text-4xl lg:text-4.5xl/tight max-md:text-center text-balance mb-16 mt-4 text-blue-d1">
         Backed by a passionate team with deep nonprofit, finance, and tech
         experience
       </h2>