style: implement single page gradient across codebase

Author: kevinjosethomas

src/components/Home/HomeHero.tsx

@@ -157,13 +157,6 @@ 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-6 pt-4 md:gap-14 md:pt-16">
         <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">

src/pages/_app.tsx

@@ -106,9 +106,17 @@ function MaiaPlatform({ Component, pageProps }: AppProps) {
             <meta name="twitter:image" content="/embed.png" />
             <meta name="twitter:image:alt" content="Maia Chess" />
           </Head>
+
           <div className={`${openSansClassName} app-container`}>
             <Header />
             <div className="content-container">
+              <div
+                className="pointer-events-none fixed inset-0"
+                style={{
+                  background:
+                    'radial-gradient(ellipse 120% 80% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 75%)',
+                }}
+              />
               <Component {...pageProps} />
             </div>
             <Footer />

src/pages/analysis/[...id].tsx

@@ -1262,14 +1262,6 @@ const Analysis: React.FC<Props> = ({
           }
         />
       </Head>
-      {/* Radial gradient backdrop to match new design language */}
-      <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%)',
-        }}
-      />
       <AnimatePresence>
         {controller.maia.status === 'no-cache' ||
         controller.maia.status === 'downloading' ? (

src/pages/analysis/stream/[gameId].tsx

@@ -170,15 +170,6 @@ const StreamAnalysisPage: NextPage = () => {
         />
       </Head>
 
-      {/* Radial gradient backdrop to match new design language */}
-      <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%)',
-        }}
-      />
-
       <AnimatePresence>
         {analysisController &&
         (analysisController.maia.status === 'no-cache' ||

src/pages/blog/[id].tsx

@@ -59,13 +59,6 @@ const BlogPost = ({ post }: BlogPostProps) => {
         <meta name="robots" content="index, follow" />
         <link rel="canonical" href={`https://maiachess.com/blog/${post.id}`} />
       </Head>
-      <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%)',
-        }}
-      />
       <div className="relative flex h-full flex-col items-center justify-center gap-5 py-[10%] md:py-[2%]">
         <div className="flex max-w-[90%] flex-col items-center justify-center overflow-x-hidden md:max-w-[80ch]">
           <div className="mb-8 flex w-full flex-col gap-2">

src/pages/blog/index.tsx

@@ -44,13 +44,6 @@ export default function Blog({ posts }: { posts: Post[] }) {
         <meta name="robots" content="index, follow" />
         <link rel="canonical" href="https://maiachess.com/blog" />
       </Head>
-      <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%)',
-        }}
-      />
       <div className="relative mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
         <h1 className="text-4xl font-bold">Blog</h1>
         <div className="flex w-full flex-col gap-6 overflow-x-hidden">

src/pages/broadcast/[broadcastId]/[roundId].tsx

@@ -246,14 +246,6 @@ const BroadcastAnalysisPage: NextPage = () => {
         <title>{pageTitle}</title>
         <meta name="description" content={pageDescription} />
       </Head>
-      {/* Radial gradient backdrop to match new design language */}
-      <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%)',
-        }}
-      />
 
       <AnimatePresence>
         {analysisController &&

src/pages/broadcast/index.tsx

@@ -125,14 +125,6 @@ const BroadcastsPage: NextPage = () => {
         />
       </Head>
 
-      <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%)',
-        }}
-      />
-
       <motion.div
         className="container relative mx-auto px-6 py-8"
         initial="initial"

src/pages/leaderboard.tsx

@@ -116,13 +116,6 @@ const Leaderboard: React.FC = () => {
       <Loading isLoading={loading}>
         <AnimatePresence mode="wait">
           <>
-            <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%)',
-              }}
-            />
             <motion.div
               key="leaderboard-content"
               variants={containerVariants}

src/pages/openings/index.tsx

@@ -811,13 +811,6 @@ const OpeningsPage: NextPage = () => {
           content="Master chess openings with interactive drills against Maia AI. Practice popular openings, learn key variations, and get performance analysis to improve your opening repertoire."
         />
       </Head>
-      <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%)',
-        }}
-      />
       <TreeControllerContext.Provider
         value={{
           gameTree: controller.gameTree,