feat: experiment with new design language on home hero

Author: kevinjosethomas

src/components/Board/BoardController.tsx

@@ -67,7 +67,7 @@ export const BoardController: React.FC<Props> = ({
 
   const getLast = useCallback(() => {
     if (!currentNode) return
-    
+
     let lastNode = currentNode
     while (lastNode?.mainChild) {
       lastNode = lastNode.mainChild

src/components/Home/HomeHero.tsx

@@ -97,20 +97,17 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
 
   return (
     <CardWrapper>
-      <motion.div
-        className="flex h-full cursor-pointer select-none flex-row items-center justify-start gap-4 rounded-md border-none bg-background-2 p-4 text-center hover:bg-human-4/20 md:min-h-[140px] md:flex-col md:justify-center md:gap-3"
-        whileHover={{
-          scale: 1.03,
-          boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
-          transition: { duration: 0.2 },
-        }}
-      >
-        <motion.div className="w-10">{icon}</motion.div>
+      <div className="group relative flex h-full cursor-pointer select-none flex-row items-center justify-start gap-4 overflow-hidden rounded-xl border border-white/10 bg-black/20 p-4 text-center backdrop-blur-sm transition-all duration-200 hover:border-white/15 hover:bg-black/30 md:min-h-[140px] md:flex-col md:justify-center md:gap-3">
+        <div className="w-10 text-white/90 group-hover:text-white">{icon}</div>
         <div className="flex flex-col items-start md:items-center">
-          <motion.h2 className="text-lg font-bold">{title}</motion.h2>
-          <motion.p className="text-xs">{description}</motion.p>
+          <h2 className="text-lg font-bold text-white/95 group-hover:text-white">
+            {title}
+          </h2>
+          <p className="text-xs text-white/70 group-hover:text-white/80">
+            {description}
+          </p>
         </div>
-      </motion.div>
+      </div>
     </CardWrapper>
   )
 }
@@ -166,33 +163,40 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
 
   return (
     <Fragment>
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+        }}
+      />
       <BetaBlurb />
       <div className="relative flex flex-col items-center justify-center gap-4 overflow-hidden pb-12 pt-4 md:gap-14 md:pb-16 md:pt-20">
         <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-[45%] md:gap-8">
             <div className="flex flex-col gap-3 md:gap-4">
-              <motion.h1 className="whitespace-nowrap text-4xl font-bold leading-tight md:text-5xl">
+              <motion.h1 className="whitespace-nowrap text-4xl font-bold leading-tight text-white md:text-5xl">
                 The human chess AI
               </motion.h1>
-              <motion.p className="text-xl text-primary/80 md:text-2xl">
+              <motion.p className="text-xl text-white/80 md:text-2xl">
                 Maia is a neural network chess model that captures human style.
                 Enjoy realistic games, insightful analysis, and a new way of
                 seeing chess.
               </motion.p>
             </div>
             <motion.div className="flex flex-col gap-4 sm:flex-row">
               <motion.button
-                className="flex items-center justify-center gap-2 rounded-md border border-human-4 bg-human-4/80 px-6 py-3 text-white transition duration-200 hover:bg-human-4"
+                className="flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-black/30 px-6 py-3 text-white backdrop-blur-sm transition-all duration-200 hover:border-white/25 hover:bg-black/40"
                 onClick={scrollHandler}
               >
                 <p>Learn More</p>
-                <span className="material-symbols-outlined text-base text-primary">
+                <span className="material-symbols-outlined text-base text-white">
                   keyboard_double_arrow_down
                 </span>
               </motion.button>
               {!user?.lichessId && (
                 <motion.button
-                  className="flex items-center justify-center gap-2 rounded-md border border-background-2 bg-background-1/60 px-6 py-3 transition duration-200 hover:bg-background-1"
+                  className="flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/5 px-6 py-3 text-white/90 backdrop-blur-sm transition-all duration-200 hover:border-white/15 hover:bg-white/10 hover:text-white"
                   onClick={() => {
                     trackLichessConnectionInitiated('homepage')
                     connectLichess()
@@ -256,35 +260,35 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
         </div>
         <motion.div className="grid grid-cols-2 gap-6 px-2 md:flex md:gap-6">
           {activeUsers > 0 ? (
-            <p className="text-center text-base text-primary/80">
+            <p className="text-center text-base text-white/80">
               <AnimatedNumber
                 value={activeUsers}
-                className="font-bold text-human-2"
+                className="font-bold text-white"
               />{' '}
               recent users
             </p>
           ) : (
             <></>
           )}
-          <p className="text-center text-base text-primary/80">
+          <p className="text-center text-base text-white/80">
             <AnimatedNumber
               value={globalStats?.play_moves_total || 0}
-              className="font-bold text-human-2"
+              className="font-bold text-white"
             />{' '}
             moves played
           </p>
-          <p className="text-center text-base text-primary/80">
+          <p className="text-center text-base text-white/80">
             <AnimatedNumber
               value={globalStats?.puzzle_games_total || 0}
-              className="font-bold text-human-2"
+              className="font-bold text-white"
             />{' '}
             puzzles solved
           </p>
           {activeUsers <= 0 ? (
-            <p className="text-center text-base text-primary/80">
+            <p className="text-center text-base text-white/80">
               <AnimatedNumber
                 value={globalStats?.turing_games_total || 0}
-                className="font-bold text-human-2"
+                className="font-bold text-white"
               />{' '}
               turing games played
             </p>
@@ -301,14 +305,17 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
 function BetaBlurb() {
   return (
     <div className="mt-2 flex items-center justify-center md:mt-8">
-      <motion.div className="flex flex-row items-center gap-3 bg-engine-3 p-2 px-6 transition md:mt-0 md:rounded-full">
-        <span className="material-symbols-outlined material-symbols-filled text-lg">
-          favorite
-        </span>
-        <p>
-          Maia Chess is in open beta. You now have full access to the platform!
-        </p>
-      </motion.div>
+      <div className="rounded-full border border-white/10 bg-black/20 px-6 py-3 backdrop-blur-sm transition-all duration-200 hover:border-white/15">
+        <div className="flex flex-row items-center gap-3">
+          <span className="material-symbols-outlined material-symbols-filled text-lg text-white/90">
+            favorite
+          </span>
+          <p className="text-white/90">
+            Maia Chess is in open beta. You now have full access to the
+            platform!
+          </p>
+        </div>
+      </div>
     </div>
   )
 }

src/hooks/useTreeController/useTreeController.ts

@@ -6,7 +6,7 @@ export const useTreeController = (
   initialOrientation: Color = 'white',
 ) => {
   const [currentNode, setCurrentNode] = useState<GameNode | null>(
-    gameTree?.getRoot() || null
+    gameTree?.getRoot() || null,
   )
   const [orientation, setOrientation] = useState<Color>(initialOrientation)
 

src/pages/turing.tsx

@@ -189,9 +189,9 @@ const Turing: React.FC<Props> = (props: Props) => {
             id="turing-page"
             className="relative flex aspect-square w-full max-w-[75vh] flex-shrink-0"
           >
-            <GameBoard 
-              game={game} 
-              currentNode={controller.currentNode} 
+            <GameBoard
+              game={game}
+              currentNode={controller.currentNode}
               orientation={controller.orientation}
             />
           </motion.div>
@@ -248,9 +248,9 @@ const Turing: React.FC<Props> = (props: Props) => {
             id="turing-page"
             className="relative flex aspect-square h-[100vw] w-screen"
           >
-            <GameBoard 
-              game={game} 
-              currentNode={controller.currentNode} 
+            <GameBoard
+              game={game}
+              currentNode={controller.currentNode}
               orientation={controller.orientation}
             />
           </div>

src/styles/tailwind.css

@@ -48,7 +48,7 @@ h5 {
   flex-direction: column;
   width: 100%;
   min-height: 100vh;
-  background-color: rgb(var(--color-backdrop));
+  background: linear-gradient(135deg, rgb(18, 17, 21) 0%, rgb(22, 21, 25) 50%, rgb(18, 17, 21) 100%);
   color: rgb(var(--color-text-primary));
 }
 

tailwind.config.js

@@ -39,6 +39,9 @@ module.exports = {
       fontSize: {
         xxs: ['0.625rem', { lineHeight: '0.875rem' }],
       },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+      },
     },
   },
   plugins: [require('@tailwindcss/typography')],