feat: make landing page more responsive + clean up code

kevinjosethomas · kevinjosethomas · commit a08d024bb009 · 2025-03-11T19:10:12.000-07:00
diff --git a/src/components/Home/AboutMaia.tsx b/src/components/Home/AboutMaia.tsx
@@ -100,7 +100,7 @@ export const AboutMaia = () => {
         className="relative flex flex-col items-center justify-center bg-background-1 py-20 text-center"
         ref={projectRef}
       >
-        <div className="flex max-w-3xl flex-col items-center justify-center">
+        <div className="flex max-w-3xl flex-col items-center justify-center px-4 md:px-0">
           <h3 className="text-xs font-bold uppercase tracking-wide">
             Human-AI Collaboration for Chess
           </h3>
@@ -161,7 +161,7 @@ export const AboutMaia = () => {
           <div className="m-auto box-border w-auto px-4 md:w-2/3">
             <h3 className="text-center text-xl font-bold uppercase">Team</h3>
           </div>
-          <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-x-2 gap-y-12 px-4 text-center sm:grid-cols-2 md:grid-cols-4">
+          <div className="mx-auto grid max-w-[1200px] grid-cols-2 gap-x-2 gap-y-8 px-4 text-center sm:grid-cols-2 md:grid-cols-4 md:gap-y-12">
             {teamMembers.map((member, index) => (
               <TeamMember key={member.name} {...member} index={index} />
             ))}
@@ -176,7 +176,7 @@ export const AboutMaia = () => {
         <h3 className="text-center text-xl font-bold uppercase">
           Acknowledgments
         </h3>
-        <p className="max-w-4xl text-center text-primary/90">
+        <p className="max-w-4xl px-4 text-center text-primary/90">
           Many thanks to Lichess.org for providing the human games that we
           trained on and hosting our Maia models that you can play against.
           Ashton Anderson was supported in part by an NSERC grant, a Microsoft
diff --git a/src/components/Home/HomeHero.tsx b/src/components/Home/HomeHero.tsx
@@ -100,7 +100,7 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
             {title}
           </motion.h2>
           <motion.p
-            className="h-10 text-xs"
+            className="text-xs"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{
@@ -128,10 +128,10 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
   )
 
   return (
-    <div className="relative flex flex-col items-center justify-center overflow-hidden pb-16 pt-24 md:pb-28 md:pt-36">
-      <div className="z-10 flex w-full max-w-[1200px] flex-col items-center justify-center gap-16 p-4 text-left md:flex-row md:gap-20">
-        <div className="flex w-full flex-col items-start justify-center gap-8 md:w-[40%]">
-          <div className="flex flex-col gap-4">
+    <div className="relative flex flex-col items-center justify-center overflow-hidden pb-12 pt-16 md:pb-28 md:pt-36">
+      <div className="z-10 flex w-full max-w-[1200px] flex-col items-center justify-center gap-10 p-4 text-left md:flex-row md:gap-20">
+        <div className="flex w-full flex-col items-start justify-center gap-6 md:w-[40%] md:gap-8">
+          <div className="flex flex-col gap-3 md:gap-4">
             <motion.h1
               className="text-4xl font-bold leading-tight md:text-5xl"
               initial={{ opacity: 0, y: -20 }}
diff --git a/src/components/Home/Sections/AdditionalFeaturesSection.tsx b/src/components/Home/Sections/AdditionalFeaturesSection.tsx
@@ -97,14 +97,14 @@ const FeatureCard = ({
 
 const SectionHeader = () => {
   return (
-    <div className="mb-14 max-w-3xl text-left">
+    <div className="mb-8 max-w-3xl text-left md:mb-14">
       <div className="mb-2 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3">
         More Features
       </div>
-      <h2 className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl">
+      <h2 className="mb-3 text-2xl font-bold md:mb-4 md:text-3xl md:text-4xl lg:text-5xl">
         Explore other ways to use Maia
       </h2>
-      <p className="max-w-2xl text-lg text-primary/80">
+      <p className="max-w-2xl text-base text-primary/80 md:text-lg">
         Maia offers a range of innovative tools to help you understand human
         chess and improve your skills
       </p>
@@ -162,13 +162,13 @@ export const AdditionalFeaturesSection = ({
   return (
     <section
       id={id}
-      className="relative w-full flex-col items-center overflow-hidden bg-background-1 py-16"
+      className="relative w-full flex-col items-center overflow-hidden bg-background-1 py-10 md:py-16"
       ref={ref}
     >
-      <div className="mx-auto flex w-full max-w-[90%] flex-col px-4">
+      <div className="mx-auto flex w-full max-w-[95%] flex-col px-2 md:max-w-[90%] md:px-4">
         <SectionHeader />
         <motion.div
-          className="grid gap-6 md:grid-cols-3"
+          className="grid gap-4 md:grid-cols-3 md:gap-6"
           variants={animationVariants.container}
           initial="hidden"
           animate={inView ? 'visible' : 'hidden'}
diff --git a/src/components/Home/Sections/AnalysisSection.tsx b/src/components/Home/Sections/AnalysisSection.tsx
@@ -63,12 +63,12 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
   return (
     <section
       id={id}
-      className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-8"
+      className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-6 md:py-8"
       ref={ref}
     >
-      <div className="mx-auto flex w-full max-w-[90%] flex-col-reverse items-center px-4 md:flex-row md:gap-8 lg:gap-12">
+      <div className="mx-auto flex w-full max-w-[95%] flex-col-reverse items-center px-2 md:max-w-[90%] md:flex-row md:gap-8 md:px-4 lg:gap-12">
         <motion.div
-          className="relative mt-6 w-full md:mt-0 md:w-1/2"
+          className="relative mt-4 w-full md:mt-0 md:mt-6 md:w-1/2"
           initial={{ opacity: 0, y: 20 }}
           animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
           transition={{ duration: 0.4, ease: 'easeOut' }}
diff --git a/src/components/Home/Sections/PlaySection.tsx b/src/components/Home/Sections/PlaySection.tsx
@@ -47,23 +47,23 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
   return (
     <section
       id={id}
-      className="relative flex min-h-[80vh] w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-16"
+      className="relative flex min-h-[80vh] w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-10 md:py-16"
       ref={ref}
     >
-      <div className="mx-auto flex w-full max-w-[90%] flex-col items-center px-4 md:flex-row md:gap-12 lg:gap-16">
-        <div className="mb-10 w-full md:mb-0 md:w-1/2">
-          <div className="mb-4 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3">
+      <div className="mx-auto flex w-full max-w-[95%] flex-col items-center px-2 md:max-w-[90%] md:flex-row md:gap-12 md:px-4 lg:gap-16">
+        <div className="mb-6 w-full md:mb-0 md:mb-10 md:w-1/2">
+          <div className="mb-3 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3 md:mb-4">
             Play Against Maia
           </div>
-          <h2 className="mb-6 max-w-2xl text-3xl font-bold md:text-4xl lg:text-5xl">
+          <h2 className="mb-4 max-w-2xl text-2xl font-bold md:mb-6 md:text-3xl md:text-4xl lg:text-5xl">
             Experience human-like chess AI
           </h2>
-          <p className="mb-4 max-w-2xl text-lg text-primary/80">
+          <p className="mb-3 max-w-2xl text-base text-primary/80 md:mb-4 md:text-lg">
             Challenge Maia, a neural network trained to play like humans of
             different ratings. Unlike traditional engines that play the best
             moves, Maia predicts and plays what a human would do.
           </p>
-          <p className="mb-4 max-w-2xl text-lg text-primary/80">
+          <p className="mb-3 max-w-2xl text-base text-primary/80 md:mb-4 md:text-lg">
             By learning from thousands of human games, Maia understands and
             replicates human chess patterns and decision-making styles.
           </p>
diff --git a/src/components/Home/Sections/TrainSection.tsx b/src/components/Home/Sections/TrainSection.tsx
@@ -11,15 +11,13 @@ interface TrainSectionProps {
   id: string
 }
 
-// Mock move data by rating for visualization
 interface MovesByRatingData {
   rating: number
   bestMove: number
   commonMistake: number
   otherMistake: number
 }
 
-// Define the structure of a puzzle
 interface ChessPuzzle {
   id: string
   fen: string
@@ -29,7 +27,6 @@ interface ChessPuzzle {
   difficulty: 'Beginner' | 'Intermediate' | 'Advanced'
   skill: string
   theme: string
-  // Moves data for visualization
   ratingData: MovesByRatingData[]
   movesMapping: {
     bestMove: string
@@ -39,7 +36,6 @@ interface ChessPuzzle {
   explanation: string
 }
 
-// Sample puzzle positions with detailed data
 const PUZZLES: ChessPuzzle[] = [
   {
     id: 'puzzle1',
@@ -172,10 +168,8 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
   const [currentPuzzle, setCurrentPuzzle] = useState(0)
   const [shapes, setShapes] = useState<DrawShape[]>([])
 
-  // State for tracking resizing
   const [windowSize, setWindowSize] = useState({ width: 0, height: 0 })
 
-  // Handle window resize
   useEffect(() => {
     const handleResize = () => {
       setWindowSize({
@@ -184,20 +178,16 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
       })
     }
 
-    // Set initial size
     handleResize()
 
     window.addEventListener('resize', handleResize)
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
-  // Reset states when puzzle changes
   useEffect(() => {
-    // Show the best move for each puzzle automatically
     setShapes([PUZZLES[currentPuzzle].bestMove])
   }, [currentPuzzle])
 
-  // Auto-rotate puzzles every 8 seconds
   useEffect(() => {
     if (!inView) return
 
@@ -210,10 +200,8 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
     }
   }, [inView])
 
-  // Add an animated indicator when changing puzzles
   useEffect(() => {
-    // Force updates to the chessboard when puzzle changes
-    const timeouts = [100, 200, 300, 500, 700, 1000] // staggered timeouts for multiple redraws
+    const timeouts = [100, 200, 300, 500, 700, 1000]
     const timeoutIds = timeouts.map((timeout) =>
       setTimeout(() => {
         setShapes([PUZZLES[currentPuzzle].bestMove])
@@ -227,30 +215,29 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
 
   const puzzle = PUZZLES[currentPuzzle]
 
-  // Create a stable key that changes only when necessary
   const stableKey = `board-${currentPuzzle}-${windowSize.width}-${windowSize.height}`
 
   return (
     <section
       id={id}
-      className="relative w-full flex-col items-center overflow-hidden py-16"
+      className="relative w-full flex-col items-center overflow-hidden py-10 md:py-16"
       ref={ref}
     >
-      <div className="z-10 mx-auto flex w-full max-w-[90%] flex-col items-center px-4 md:flex-row md:gap-12 lg:gap-16">
-        <div className="mb-10 w-full md:mb-0 md:w-2/5">
-          <div className="mb-4 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3">
+      <div className="z-10 mx-auto flex w-full max-w-[95%] flex-col items-center px-2 md:max-w-[90%] md:flex-row md:gap-12 md:px-4 lg:gap-16">
+        <div className="mb-6 w-full md:mb-0 md:mb-10 md:w-2/5">
+          <div className="mb-3 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3 md:mb-4">
             Human-Centered Puzzles
           </div>
-          <h2 className="mb-6 text-3xl font-bold md:text-4xl lg:text-5xl">
+          <h2 className="mb-4 text-2xl font-bold md:mb-6 md:text-3xl md:text-4xl lg:text-5xl">
             Learn from real player tendencies
           </h2>
-          <p className="mb-4 text-lg text-primary/80">
+          <p className="mb-3 text-base text-primary/80 md:mb-4 md:text-lg">
             Unlike traditional puzzles based on computer analysis, our puzzles
             highlight positions where human players typically struggle. We
             identify tactical opportunities that are commonly missed at
             different rating levels.
           </p>
-          <p className="mb-4 text-lg text-primary/80">
+          <p className="mb-3 text-base text-primary/80 md:mb-4 md:text-lg">
             Each puzzle includes data showing how players of different ratings
             approach the position, making your training more targeted and
             effective.
@@ -363,14 +350,12 @@ export const TrainSection = ({ id }: TrainSectionProps) => {
                         check: true,
                       },
                       animation: {
-                        duration: 0, // Disable piece animations to prevent positioning issues
+                        duration: 0,
                       },
                     }}
                   />
 
-                  {/* Add CSS to fix positioning */}
                   <style jsx global>{`
-                    /* Make container full size */
                     .cg-wrap {
                       width: 100% !important;
                       height: 100% !important;
diff --git a/src/components/Home/TeamMember.tsx b/src/components/Home/TeamMember.tsx
@@ -42,7 +42,7 @@ export const TeamMember = ({
     >
       <Image
         src={image}
-        className="h-40 w-40 rounded-full"
+        className="h-32 w-32 rounded-full md:h-40 md:w-40"
         alt={`Picture of ${name}`}
       />
       <div className="flex flex-col">
@@ -51,16 +51,18 @@ export const TeamMember = ({
             target="_blank"
             rel="noreferrer"
             href={website}
-            className="text-xl text-human-3 transition duration-200 hover:text-human-4"
+            className="text-lg text-human-3 transition duration-200 hover:text-human-4 md:text-xl"
           >
             {name}
           </a>
         ) : (
-          <span className="text-xl text-primary">{name}</span>
+          <span className="text-base text-primary md:text-xl">{name}</span>
         )}
-        <p className="text-base text-primary">{institution}</p>
+        <p className="text-sm text-primary md:text-base">{institution}</p>
         <div className="mt-1 flex flex-col gap-2">
-          <p className="text-sm font-semibold text-primary">{role}</p>
+          <p className="text-xs font-semibold text-primary md:text-sm">
+            {role}
+          </p>
           <div className="flex items-center justify-center space-x-2">
             {website && (
               <a
diff --git a/src/components/Home/people/russell.jpg b/src/components/Home/people/russell.jpg
