fix logos slider, button, link dvc download

iterative · Aug 1, 2023 · 2d11d83 · 2d11d83
1 parent f58865c
commit 2d11d83
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git a/src/components/HeroContainer/index.tsx b/src/components/HeroContainer/index.tsx
@@ -6,13 +6,15 @@ import LayoutWidthContainer from '@dvcorg/gatsby-theme-iterative/src/components/
 interface IHeroContainerProps {
   className?: string
   children: React.ReactNode
+  id?: HTMLDivElement['id']
 }
 
 const HeroContainer: React.FC<IHeroContainerProps> = ({
   className,
-  children
+  children,
+  id
 }) => (
-  <div className={cn('w-full', className)}>
+  <div className={cn('w-full', className)} id={id}>
     <LayoutWidthContainer>{children}</LayoutWidthContainer>
   </div>
 )

diff --git a/src/components/Home/Hero/GetStarted/GetStartedWithDvc.tsx b/src/components/Home/Hero/GetStarted/GetStartedWithDvc.tsx
@@ -75,7 +75,7 @@ const HeroButtons = () => (
 
 const GetStartedWithDvc = () => {
   return (
-    <HeroContainer className="py-10 px-6">
+    <HeroContainer className="py-10 px-6" id="get-started-dvc">
       <div className="flex items-center gap-4 md:justify-center">
         <h1 className={cn('text-2xl font-medium')}>Get Started with</h1>
         <StaticImage

diff --git a/src/components/Home/Hero/HeroSection.tsx b/src/components/Home/Hero/HeroSection.tsx
@@ -9,6 +9,7 @@ import * as styles from './styles.module.css'
 import shortenNumber from '../../../utils/format'
 import useStars from '../../../gatsby/hooks/stars'
 import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
+import { navigate } from 'gatsby'
 
 interface ISectionProps {
   className?: string
@@ -47,7 +48,13 @@ const Badge = ({ className, children }: ISectionProps) => (
   </div>
 )
 
-export const CTAButton = ({ className, children }: ISectionProps) => (
+export const CTAButton = ({
+  className,
+  children,
+  onClick
+}: ISectionProps & {
+  onClick?: () => void
+}) => (
   <button
     className={cn(
       'rounded-lg',
@@ -58,6 +65,7 @@ export const CTAButton = ({ className, children }: ISectionProps) => (
       'flex items-center',
       className
     )}
+    onClick={onClick}
   >
     {children}
   </button>
@@ -131,7 +139,12 @@ const HeroSection = () => {
           </CTAButton>
         </Section>
         <Section className="bg-light text-dark pt-1">
-          <CTAButton className="bg-dark text-light">
+          <CTAButton
+            className="bg-dark text-light"
+            onClick={() => {
+              navigate('#get-started-dvc')
+            }}
+          >
             Download it now
             <ArrowDown className="ml-4" />
           </CTAButton>

diff --git a/src/components/Home/LogosSlider/styles.module.css b/src/components/Home/LogosSlider/styles.module.css
@@ -14,7 +14,7 @@
     z-index: 1;
     width: 50px;
     height: 100%;
-    background: linear-gradient(to left, var(--color-light-blue), transparent);
+    background: linear-gradient(to left, #ecdeff, transparent);
 
     @media screen(sm) {
       width: 100px;
@@ -29,7 +29,7 @@
     z-index: 1;
     width: 50px;
     height: 100%;
-    background: linear-gradient(to right, var(--color-light-blue), transparent);
+    background: linear-gradient(to right, #ecdeff, transparent);
 
     @media screen(sm) {
       width: 100px;

diff --git a/src/components/TwoRowsButton/styles.module.css b/src/components/TwoRowsButton/styles.module.css
@@ -48,13 +48,14 @@
   }
 
   &.outline {
-    border-color: rgb(176 184 197 / 47%);
+    @apply border-light;
+
     color: var(--color-gray-hover);
-    background-color: var(--color-light-blue);
+    background-color: transparent;
 
     &.active,
     &:hover {
-      background-color: var(--color-light-blue-hover);
+      @apply bg-light;
     }
   }