feat: clean up landing page further

Author: kevinjosethomas

src/components/Home/AboutMaia.tsx

@@ -99,72 +99,11 @@ export const AboutMaia = () => {
 
   return (
     <div className="font-helvetica [&_a]:text-human-3">
-      <motion.div
-        className="sticky top-0 z-20 flex flex-row items-center justify-center gap-10 bg-background-2 py-5 text-sm uppercase tracking-wider backdrop-blur-md"
-        initial={{ opacity: 0, y: -10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-      >
-        <motion.a
-          href="#main_info"
-          className="relative !text-primary"
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-        >
-          Project
-          <motion.div
-            className="absolute -bottom-1 left-0 h-0.5 w-0 bg-human-3"
-            whileHover={{ width: '100%' }}
-            transition={{ duration: 0.2 }}
-          />
-        </motion.a>
-        <motion.a
-          href="#team_info"
-          className="relative !text-primary"
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-        >
-          Team
-          <motion.div
-            className="absolute -bottom-1 left-0 h-0.5 w-0 bg-human-3"
-            whileHover={{ width: '100%' }}
-            transition={{ duration: 0.2 }}
-          />
-        </motion.a>
-      </motion.div>
-
       <section
         id="main_info"
-        className="relative flex items-center justify-center overflow-hidden bg-background-1 py-20 text-center"
+        className="relative flex items-center justify-center bg-background-1 py-20 text-center"
         ref={projectRef}
       >
-        {/* Background decorative elements */}
-        <motion.div
-          className="absolute -top-40 right-0 h-80 w-80 rounded-full bg-human-4/5"
-          animate={{
-            y: projectInView ? [0, 30, 0] : 0,
-            scale: projectInView ? [1, 1.05, 1] : 1,
-          }}
-          transition={{
-            repeat: Infinity,
-            duration: 6,
-            times: [0, 0.5, 1],
-          }}
-        />
-        <motion.div
-          className="absolute -left-20 bottom-0 h-60 w-60 rounded-full bg-engine-4/5"
-          animate={{
-            y: projectInView ? [0, -20, 0] : 0,
-            scale: projectInView ? [1, 1.03, 1] : 1,
-          }}
-          transition={{
-            repeat: Infinity,
-            duration: 5,
-            times: [0, 0.5, 1],
-            delay: 0.5,
-          }}
-        />
-
         <div className="z-10 mx-auto my-0 max-w-[1170px]">
           <div className="m-auto box-border w-auto px-4 md:w-2/3">
             <motion.h3
@@ -273,31 +212,6 @@ export const AboutMaia = () => {
         className="relative overflow-hidden bg-background-2 py-20"
         ref={teamRef}
       >
-        {/* Background decorative elements */}
-        <motion.div
-          className="absolute right-20 top-20 h-40 w-40 rounded-full bg-human-4/5"
-          animate={{
-            y: teamInView ? [0, 20, 0] : 0,
-          }}
-          transition={{
-            repeat: Infinity,
-            duration: 4,
-            times: [0, 0.5, 1],
-          }}
-        />
-        <motion.div
-          className="absolute bottom-20 left-20 h-60 w-60 rounded-full bg-engine-4/5"
-          animate={{
-            y: teamInView ? [0, -20, 0] : 0,
-          }}
-          transition={{
-            repeat: Infinity,
-            duration: 5,
-            times: [0, 0.5, 1],
-            delay: 0.5,
-          }}
-        />
-
         <div className="relative z-10 mx-auto my-0 max-w-[1170px]">
           <div className="m-auto box-border w-auto px-4 md:w-2/3">
             <motion.h3
@@ -334,19 +248,6 @@ export const AboutMaia = () => {
         className="relative flex flex-col justify-evenly overflow-hidden bg-background-1 py-20"
         ref={acknowledgementsRef}
       >
-        {/* Background decorative elements */}
-        <motion.div
-          className="absolute -top-10 right-10 h-40 w-40 rounded-full bg-human-4/5"
-          animate={{
-            scale: acknowledgementsInView ? [1, 1.1, 1] : 1,
-          }}
-          transition={{
-            repeat: Infinity,
-            duration: 6,
-            times: [0, 0.5, 1],
-          }}
-        />
-
         <div className="z-10 mx-auto my-0 max-w-[1170px]">
           <div className="m-auto box-border w-auto px-4 md:w-2/3">
             <motion.h3

src/components/Home/HomeHero.tsx

@@ -129,32 +129,6 @@ 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">
-      {/* Decorative elements */}
-      <motion.div
-        className="absolute -top-20 right-10 h-40 w-40 rounded-full bg-human-4/5"
-        animate={{
-          y: [0, 20, 0],
-        }}
-        transition={{
-          repeat: Infinity,
-          duration: 4,
-          times: [0, 0.5, 1],
-        }}
-      />
-      <motion.div
-        className="absolute bottom-10 left-10 h-60 w-60 rounded-full bg-engine-4/5"
-        animate={{
-          y: [0, -20, 0],
-        }}
-        transition={{
-          repeat: Infinity,
-          duration: 5,
-          times: [0, 0.5, 1],
-          delay: 0.5,
-        }}
-      />
-
-      {/* <BetaBlurb /> */}
       <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">

src/components/Home/PageNavigation.tsx

@@ -0,0 +1,37 @@
+import { motion } from 'framer-motion'
+
+export const PageNavigation = () => {
+  return (
+    <motion.div
+      className="sticky top-0 z-20 flex flex-row items-center justify-center gap-6 border-y border-background-3/20 bg-background-2 py-4 text-sm uppercase tracking-wider backdrop-blur-md"
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <NavLink href="#play-section" label="Play" />
+      <NavLink href="#analysis-section" label="Analysis" />
+      <NavLink href="#train-section" label="Train" />
+      <NavLink href="#more-features" label="Features" />
+      <NavLink href="#main_info" label="Project" />
+      <NavLink href="#team_info" label="Team" />
+    </motion.div>
+  )
+}
+
+const NavLink = ({ href, label }: { href: string; label: string }) => {
+  return (
+    <motion.a
+      href={href}
+      className="relative px-2 !text-primary"
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+    >
+      {label}
+      <motion.div
+        className="absolute -bottom-1 left-0 h-0.5 w-0 bg-human-3"
+        whileHover={{ width: '100%' }}
+        transition={{ duration: 0.2 }}
+      />
+    </motion.a>
+  )
+}

src/components/Home/Sections/AdditionalFeaturesSection.tsx

@@ -30,146 +30,134 @@ export const AdditionalFeaturesSection = ({
     visible: {
       opacity: 1,
       transition: {
-        staggerChildren: 0.2,
+        staggerChildren: 0.1,
       },
     },
   }
 
   const itemVariants = {
-    hidden: { y: 50, opacity: 0 },
+    hidden: { y: 30, opacity: 0 },
     visible: {
       y: 0,
       opacity: 1,
-      transition: { duration: 0.6, ease: 'easeOut' },
+      transition: { duration: 0.3, ease: 'easeOut' },
     },
   }
 
   return (
     <section
       id={id}
-      className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-background-1 py-16"
+      className="relative w-full flex-col items-center overflow-hidden bg-background-1 py-16"
       ref={ref}
     >
       <div className="container mx-auto px-4">
-        <div className="mb-16 text-center">
+        <div className="mb-14 max-w-3xl text-left">
           <motion.div
-            initial={{ opacity: 0, y: -20 }}
-            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: -20 }}
-            transition={{ duration: 0.6 }}
-            className="mb-4 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3"
+            initial={{ opacity: 0, y: -10 }}
+            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: -10 }}
+            transition={{ duration: 0.3 }}
+            className="mb-2 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3"
           >
             More Features
           </motion.div>
           <motion.h2
-            className="mb-6 text-3xl font-bold md:text-4xl lg:text-5xl"
-            initial={{ opacity: 0, y: -20 }}
-            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: -20 }}
-            transition={{ duration: 0.6, delay: 0.1 }}
+            className="mb-4 text-3xl font-bold md:text-4xl lg:text-5xl"
+            initial={{ opacity: 0, y: -10 }}
+            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: -10 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
           >
             Explore other ways to use Maia
           </motion.h2>
           <motion.p
-            className="mx-auto max-w-2xl text-lg text-primary/80"
-            initial={{ opacity: 0, y: -20 }}
-            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: -20 }}
-            transition={{ duration: 0.6, delay: 0.2 }}
+            className="max-w-2xl text-lg text-primary/80"
+            initial={{ opacity: 0, y: -10 }}
+            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: -10 }}
+            transition={{ duration: 0.3, delay: 0.2 }}
           >
             Maia offers a range of innovative tools to help you understand human
             chess and improve your skills
           </motion.p>
         </div>
 
         <motion.div
-          className="grid gap-8 md:grid-cols-3"
+          className="grid gap-6 md:grid-cols-3"
           variants={containerVariants}
           initial="hidden"
           animate={inView ? 'visible' : 'hidden'}
         >
           {/* Openings Feature */}
           <motion.div
-            className="flex flex-col rounded-lg bg-background-2 p-6 shadow-lg transition-transform duration-300 hover:scale-105"
+            className="hover:scale-102 flex flex-col rounded-lg bg-background-2 p-5 shadow-lg transition-transform duration-200"
             variants={itemVariants}
           >
-            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-human-3/10 p-3">
-              <div className="h-6 w-6 text-human-3">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-human-3/10 p-2">
+              <div className="h-7 w-7 text-human-3">
                 <StarIcon />
               </div>
             </div>
             <h3 className="mb-3 text-xl font-bold">Openings Practice</h3>
-            <p className="mb-6 flex-grow text-primary/80">
+            <p className="mb-5 flex-grow text-primary/80">
               Drill chess openings against Maia models calibrated to specific
               rating levels, allowing you to practice against opponents similar
               to those you&apos;ll face.
             </p>
             <Link
               href="/openings"
-              className="mt-auto inline-flex items-center justify-center rounded-md bg-background-3 px-4 py-2 font-medium transition duration-200 hover:bg-background-4"
+              className="mt-auto inline-flex items-center justify-center rounded-md bg-background-3 px-5 py-3 font-medium transition duration-200 hover:bg-background-4"
             >
               Practice Openings
             </Link>
           </motion.div>
 
           {/* Hand & Brain Feature */}
           <motion.div
-            className="flex flex-col rounded-lg bg-background-2 p-6 shadow-lg transition-transform duration-300 hover:scale-105"
+            className="hover:scale-102 flex flex-col rounded-lg bg-background-2 p-5 shadow-lg transition-transform duration-200"
             variants={itemVariants}
           >
-            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-engine-3/10 p-3">
-              <div className="h-6 w-6 text-engine-3">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-engine-3/10 p-2">
+              <div className="h-7 w-7 text-engine-3">
                 <TuringIcon />
               </div>
             </div>
             <h3 className="mb-3 text-xl font-bold">Hand & Brain</h3>
-            <p className="mb-6 flex-grow text-primary/80">
+            <p className="mb-5 flex-grow text-primary/80">
               Team up with Maia in this collaborative chess variant. You can be
               the &quot;Hand&quot; making moves while Maia is the
               &quot;Brain&quot; selecting pieces, or vice versa.
             </p>
             <button
               onClick={startHandBrainGame}
-              className="mt-auto inline-flex items-center justify-center rounded-md bg-background-3 px-4 py-2 font-medium transition duration-200 hover:bg-background-4"
+              className="mt-auto inline-flex items-center justify-center rounded-md bg-background-3 px-5 py-3 font-medium transition duration-200 hover:bg-background-4"
             >
               Play Hand & Brain
             </button>
           </motion.div>
 
           {/* Bot or Not Feature */}
           <motion.div
-            className="flex flex-col rounded-lg bg-background-2 p-6 shadow-lg transition-transform duration-300 hover:scale-105"
+            className="hover:scale-102 flex flex-col rounded-lg bg-background-2 p-5 shadow-lg transition-transform duration-200"
             variants={itemVariants}
           >
-            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-human-4/10 p-3">
-              <div className="h-6 w-6 text-human-4">
+            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-human-4/10 p-2">
+              <div className="h-7 w-7 text-human-4">
                 <TuringIcon />
               </div>
             </div>
             <h3 className="mb-3 text-xl font-bold">Bot or Not</h3>
-            <p className="mb-6 flex-grow text-primary/80">
+            <p className="mb-5 flex-grow text-primary/80">
               Test your ability to distinguish between human and AI chess play.
               This Turing test for chess helps you understand the differences
               between human and engine moves.
             </p>
             <Link
               href="/turing"
-              className="mt-auto inline-flex items-center justify-center rounded-md bg-background-3 px-4 py-2 font-medium transition duration-200 hover:bg-background-4"
+              className="mt-auto inline-flex items-center justify-center rounded-md bg-background-3 px-5 py-3 font-medium transition duration-200 hover:bg-background-4"
             >
               Try Bot or Not
             </Link>
           </motion.div>
         </motion.div>
       </div>
-
-      {/* Decorative elements */}
-      <motion.div
-        className="absolute -bottom-20 left-10 h-40 w-40 rounded-full bg-background-3/20"
-        animate={{ opacity: inView ? [0.2, 0.5, 0.2] : 0.2 }}
-        transition={{ repeat: Infinity, duration: 5 }}
-      />
-      <motion.div
-        className="absolute right-10 top-10 h-60 w-60 rounded-full bg-background-3/10"
-        animate={{ opacity: inView ? [0.1, 0.3, 0.1] : 0.1 }}
-        transition={{ repeat: Infinity, duration: 6, delay: 1 }}
-      />
     </section>
   )
 }