feat: reimplement new homehero landing design

Author: kevinjosethomas

src/components/Home/HomeHero.tsx

@@ -18,6 +18,7 @@ import { PlayType } from 'src/types'
 import { getGlobalStats, getActiveUserCount } from 'src/api'
 import { AuthContext, ModalContext } from 'src/contexts'
 import { AnimatedNumber } from 'src/components/Common/AnimatedNumber'
+import { LiveChessBoard } from 'src/components/Home/LiveChessBoard'
 
 interface Props {
   scrollHandler: () => void
@@ -96,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>
   )
 }
@@ -165,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()
@@ -255,42 +260,43 @@ 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>
           ) : (
             <></>
           )}
         </motion.div>
+        <LiveChessBoard />
       </div>
     </Fragment>
   )
@@ -299,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/styles/tailwind.css

@@ -48,7 +48,12 @@ 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')],