Merge pull request #212 from replayio/nacho/home-hero-bg-color-change

Home hero bg changes
replayio · Apr 25, 2024 · b7e0b55 · b7e0b55
2 parents de21d8a + 745d2b0
commit b7e0b55
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/src/app/components/hero/index.tsx b/src/app/components/hero/index.tsx
@@ -13,7 +13,7 @@ export function Hero({ hero }: LandingPageFragment) {
   const { h1, h2 } = hero.heroVariants.items[0]
 
   return (
-    <section className="relative flex overflow-hidden">
+    <section className="relative flex overflow-hidden bg-[#FCFCFC]">
       <div className="absolute -top-[30%] left-0 h-[130%] w-full animate-fadeIn lg:-left-[35%] lg:top-0 lg:h-full lg:w-[135%]">
         <Hyperspace className="opacity-10" />
       </div>
@@ -59,7 +59,7 @@ export function Hero({ hero }: LandingPageFragment) {
             <div className="flex min-h-[40px] items-center text-[#8B8B8B]">
               <p className="hidden whitespace-nowrap xl:inline-block">{hero.logosTitle}</p>
               <div className="max-w-full flex-1">
-                <HomeHeroMarquee />
+                <HomeHeroMarquee gradientColor="#FCFCFC" />
               </div>
             </div>
           </div>

diff --git a/src/app/components/hero/marquee.tsx b/src/app/components/hero/marquee.tsx
@@ -10,11 +10,21 @@ import logoVercel from '~/images/hero-logos/vercel.svg'
 import logoWeightsAndBiases from '~/images/hero-logos/weights-and-biases.svg'
 import Marquee from 'react-fast-marquee'
 import { useMinTabletBreakpoint } from '~/hooks/use-media'
+import { PropsWithChildren } from 'react'
 
-export const HomeHeroMarquee = () => {
+type MarqueeProps = {
+  style?: React.CSSProperties
+  className?: string
+  play?: boolean
+  pauseOnHover?: boolean
+  pauseOnClick?: boolean
+  gradientColor?: string
+}
+
+export const HomeHeroMarquee = (props: MarqueeProps) => {
   const isMinTablet = useMinTabletBreakpoint()
   return (
-    <Marquee gradient gradientWidth={isMinTablet ? 200 : 60} speed={20}>
+    <Marquee gradient gradientWidth={isMinTablet ? 200 : 60} speed={20} {...props}>
       {[
         { name: 'React', logo: logoReact },
         { name: 'WeightsBiases', logo: logoWeightsAndBiases },

diff --git a/src/lib/basehub-queries.ts b/src/lib/basehub-queries.ts
@@ -10,9 +10,6 @@ export const linkFragment = fragmentOn('LinkComponent', {
 
 export const landingPageFragment = fragmentOn('LandingPage', {
   hero: {
-    subtitle: {
-      json: { content: true }
-    },
     getStartedLink: linkFragment,
     installationLink: linkFragment,
     contactUsLink: linkFragment,