small fixes to header and about us page

3 files changed, 121 insertions, 41 deletions

diff --git a/src/app/Header.tsx b/src/app/Header.tsx
index ce526b0..dc9dac7 100644
--- a/src/app/Header.tsx
+++ b/src/app/Header.tsx
@@ -8,6 +8,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { motion } from "motion/react";
+import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 
@@ -79,10 +80,12 @@ export default function Header() {
             </button>
             <a href="#" className="-m-1.5 p-1.5">
               <span className="sr-only">Your Company</span>
-              <img
+              <Image
                 alt="Sensible Scholars Logo"
-                src="favicon.png"
-                className="h-8 w-auto"
+                src="/favicon.png"
+                width={36}
+                height={36}
+                className="rounded-md"
               />
             </a>
           </div>
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index ccbe4d4..e2fad42 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -7,21 +7,26 @@ import Form from "next/form";
 import Image from "next/image";
 
 export default function AboutUs() {
-  // Founder data structure
-  const founders = [
+  const tutors = [
     {
-      id: 1,
-      name: "Marcos Foiani",
-      role: "Co-Founder & Lead Tutor",
-      email: "mfoiani@mfoi.dev",
-      imageUrl: "/founders/marcos-foiani.jpg", // Replace with your actual image path
+      name: "Michael",
+      degree: "M.S. in CS & B.S. in Physics @ BrownU",
+      subjects: "AP Computer Science, Physics, Math, & ACT Prep",
+      image: "/michael.jpg",
+      bio: "At Brown, Michael served as the head teaching assistant for two 400+ student courses, in which he designed course materials, lectures, assignments, exams, and grading structures. He also mentored and tutored many students directly through his other roles as a residential and research assistant. Academically he earned magnum cum laude for his GPA, departmental honors for his bachelors thesis, then went on to complete a masters with a specialty in computational physics. In high school, he tutored AP Stats, led review sessions, ranked top 5 state-wide for algebra and geometry, and even taught AP computer science.",
     },
     {
-      id: 2,
-      name: "Joseph G.",
-      role: "Co-Founder & Education Specialist",
-      email: "joseph@google.com",
-      imageUrl: "/founders/joseph.jpg", // Replace with your actual image path
+      name: "Madison",
+      degree: "Ph.D. Candidate in BioChem @ EmoryU",
+      subjects: "AP Biology & Chemistry",
+      image: "/madison.jpg",
+      bio: "Madison is a Biochemistry Ph.D. student at Emory University. She attended The Ohio State University where she completed a BS in Biochemistry and received an Honors Research Distinction. Madison has completed extensive coursework in STEM including basic and advanced biology, chemistry, biochemistry, physics, and calculus, and has over 3 years of wet lab Biochemistry research experience. During her undergraduate experience, she also worked for 3 years as a Teaching Assistant for General Chemistry and Organic Chemistry Lab. Currently, Madison supervises multiple undergraduate students in her graduate school lab and has a strong passion for mentorship and tutoring.",
+    },
+    {
+      name: "Jino",
+      degree: "PreMed @ CornellU",
+      subjects: "Undergraduate Biochemistry & Nutrition",
+      image: "/jino.jpg",
     },
   ];
 
@@ -40,7 +45,7 @@ export default function AboutUs() {
               clipPath:
                 "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
             }}
-            className="relative left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-30 bg-linear-to-br from-indigo-600 to-red-300 opacity-50 sm:left-[calc(50%-40rem)] sm:w-288.75"
+            className="relative left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-30 bg-linear-to-br from-indigo-600 to-red-300 opacity-80 sm:left-[calc(50%-40rem)] sm:w-288.75"
           />
         </div>
         <div className="mx-auto max-w-5xl outline outline-gray-700/20 rounded-xl p-6 shadow-lg shadow-gray-700/10 backdrop-blur-lg sm:p-10 bg-white/30">
@@ -53,32 +58,69 @@ export default function AboutUs() {
             <h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
               About the <span className="text-gradient">Founder</span>
             </h2>
-            <p className="mt-6 text-lg text-gray-600 text-left tracking-tight">
-              After working with a large national tutoring provider, I saw
-              firsthand what works — and what could be better. Sensible Scholars
-              was created to make the changes I always knew were necessary but
-              never had the authority to implement. Here, sessions are fully
-              personalized to meet the needs of each student and their family,
-              with an approach designed to promote critical thinking and a
-              deeper grasp of the material that can sometimes be difficult to
-              achieve in a traditional classroom setting.
-            </p>
-            <p className="mt-6 text-lg text-gray-600 text-left tracking-tight">
-              At Sensible Scholars, we believe tutoring should go beyond
-              homework help — it should inspire curiosity, build confidence, and
-              foster true understanding. Our team is made up of successful
-              students and experienced teaching assistants with years of
-              tutoring under their belts, all united by a passion for helping
-              the next generation excel and reach their academic goals.
-            </p>
-            <p className="mt-6 text-lg text-gray-600 text-left tracking-tight">
+            <div className="flex gap-8 justify-center items-center flex-col mt-12 lg:flex-row lg:mt-0">
+              <Image
+                src="/joseph.jpg"
+                alt="Founder, Joseph Ceferatti, Image"
+                width={600}
+                height={600}
+                className="mx-auto rounded-md
+                white/80 object-cover w-48
+                h-48"
+              />
+              <div>
+                <p className="mt-6 text-lg text-gray-700 text-left tracking-tight">
+                  After working with a large national tutoring provider, I saw
+                  firsthand what works — and what could be better. Sensible
+                  Scholars was created to make the changes I always knew were
+                  necessary but never had the authority to implement. Here,
+                  sessions are fully personalized to meet the needs of each
+                  student and their family, with an approach designed to promote
+                  critical thinking and a deeper grasp of the material that can
+                  sometimes be difficult to achieve in a traditional classroom
+                  setting.
+                </p>
+                <p className="mt-6 text-lg text-gray-700 text-left tracking-tight">
+                  At Sensible Scholars, we believe tutoring should go beyond
+                  homework help — it should inspire curiosity, build confidence,
+                  and foster true understanding. Our team is made up of
+                  successful students and experienced teaching assistants with
+                  years of tutoring under their belts, all united by a passion
+                  for helping the next generation excel and reach their academic
+                  goals.
+                </p>
+              </div>
+            </div>
+
+            <p className="mt-6 text-lg text-gray-700 text-left tracking-tight">
               We're not just preparing students to pass tests — we're equipping
               them to think, adapt, and thrive, drawing on personal tips and
               proven strategies honed through years of academic success.
             </p>
+
+            <p className="text-md text-gray-500 mt-4 text-left italic">
+              Sincerely,
+              <br />
+              <span className="pl-4">
+                Joseph Ceferatti, founder of Sensible Scholars Tutoring LLC
+              </span>
+            </p>
           </motion.div>
         </div>
 
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 top-245 -z-10 transform-gpu overflow-hidden blur-3xl sm:top-150 sm:left-50"
+        >
+          <div
+            style={{
+              clipPath:
+                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+            }}
+            className="relative left-1/2 -z-10 aspect-1155/678 w-144.5 max-w-none -translate-x-1/2 rotate-210 bg-linear-to-br from-indigo-600 to-red-300 opacity-80 sm:left-[calc(50%-40rem)] sm:w-288.75"
+          />
+        </div>
+
         <div className="mx-auto max-w-5xl outline outline-gray-700/20 rounded-xl p-6 shadow-lg shadow-gray-700/10 backdrop-blur-lg sm:p-10 bg-white/30 px-4 py-6 sm:py-12 xl:py-16 mt-16">
           <motion.div
             className="mx-auto max-w-4xl text-center"
@@ -89,10 +131,42 @@ export default function AboutUs() {
             <h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
               About the <span className="text-gradient">Tutors</span>
             </h2>
-            <p className="mt-6 text-lg text-gray-600 text-left tracking-tight">
-              The tutors at Sensible Scholars have been overacheiving students
-              who love being apart of a like-minded group to help others.
+            <p className="mt-6 text-lg text-gray-600 text-center tracking-tight">
+              The tutors at Sensible Scholars have been overachieving students
+              who joined a like-minded group to help others.
             </p>
+
+            <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              <motion.div
+                className="bg-white rounded-xl shadow-lg overflow-hidden
+                border border-gray-200 hover:shadow
+                transition-shadow duration-300"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 1 * 0.1 }}
+                whileHover={{ y: -5 }}
+              >
+                <div className="p-6">
+                  <h3
+                    className="text-xl font-bold text-gray
+                          -900"
+                  >
+                    Michael
+                  </h3>
+                  <p className="text-gray-600 mt-2">Math</p>
+                  <p
+                    className="mt-4 text-gray-7
+                          00"
+                  >
+                    Bio
+                  </p>
+                  <div
+                    className="mt-6 flex space-x-
+                          2"
+                  ></div>{" "}
+                </div>
+              </motion.div>
+            </div>
           </motion.div>
         </div>
       </main>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0a17ad2..abb6dd0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -7,6 +7,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/24/outline";
 import { motion } from "motion/react";
+import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 
@@ -71,10 +72,12 @@ export default function Header() {
             </button>
             <a href="#" className="-m-1.5 p-1.5">
               <span className="sr-only">Your Company</span>
-              <img
+              <Image
                 alt="Sensible Scholars Logo"
-                src="favicon.png"
-                className="h-8 w-auto"
+                src="/favicon.png"
+                width={36}
+                height={36}
+                className="rounded-md"
               />
             </a>
           </div>