fix: button hover effects

Author: hardeeparekh

site/src/Resources.js

@@ -2,8 +2,9 @@ import React from "react";
 import Button from "./reusecore/Button";
 import styled from "styled-components";
 // import AcademyIcon from './assets/images/academy-icon.svg';
-import CatalogIcon from './assets/images/catalog-icon.svg'
-import BookIcon from './assets/images/book-icon.svg'
+import CatalogIcon from "./assets/images/catalog-icon.svg";
+import BookIcon from "./assets/images/book-icon.svg";
+
 const Container = styled.div`
   max-width: 1200px;
   margin: 0 auto;
@@ -27,19 +28,18 @@ const Subheading = styled.p`
   margin: 0 auto;
 `;
 
-
 const CardGrid = styled.div`
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
-  
+
   @media (min-width: 768px) {
     grid-template-columns: repeat(2, 1fr);
   }
 `;
 
 const Card = styled.div`
-  background-color:  ${({ theme }) => theme.body};
+  background-color: ${({ theme }) => theme.body};
   border-radius: 0.5rem;
   box-shadow: 0px 0px 2px;
   padding: 2rem;
@@ -48,9 +48,11 @@ const Card = styled.div`
   flex-direction: column;
   align-items: center;
 `;
+
 const CardImageContainer = styled.div`
   max-width: 6rem;
 `;
+
 const CardImage = styled.img`
   max-width: 6rem;
   object-fit: contain;
@@ -60,7 +62,7 @@ const CardImage = styled.img`
 const CardTitle = styled.h3`
   font-size: 1.5rem;
   font-weight: bold;
- color: ${props => props.theme.text};
+  color: ${(props) => props.theme.text};
   margin-bottom: 1rem;
 `;
 
@@ -72,25 +74,23 @@ const Spacer = styled.div`
   flex-grow: 1;
 `;
 
-
 const ResourcesSection = () => {
   return (
     <Container>
       <HeaderSection>
-        <MainHeading>
-          No setup required
-        </MainHeading>
+        <MainHeading>No setup required</MainHeading>
         <Subheading>
-        Learn by doing: explore these hands-on resources using the playground right in your browser
+          Learn by doing: explore these hands-on resources using the playground
+          right in your browser
         </Subheading>
       </HeaderSection>
 
       <CardGrid>
         <Card>
           <CardImageContainer>
-            <CardImage 
-              src={BookIcon} 
-              alt="Hands-on tutorials" 
+            <CardImage
+              src={BookIcon}
+              alt="Hands-on tutorials"
               style={{ paddingTop: "1.2rem" }}
             />
           </CardImageContainer>
@@ -99,38 +99,22 @@ const ResourcesSection = () => {
             Interactive tutorials to increase your cloud native knowledge.
           </CardDescription>
           <Spacer />
-          <Button url="https://docs.meshery.io/guides/tutorials" style={{ color: "rgb(255,255,255)" }}> Tutorials</Button>
+          {/* Use same markup as the Join button — let the Button component decide styling */}
+          <Button url="https://docs.meshery.io/guides/tutorials">
+            Tutorials
+          </Button>
         </Card>
 
-        {/* <Card>
-          <CardImageContainer>
-            <CardImage 
-              src={AcademyIcon}
-              alt="Academy Icon" 
-            />
-          </CardImageContainer>
-          <CardTitle>Academy</CardTitle>
-          <CardDescription>
-            Learn how to use various cloud native tools with Meshery.
-          </CardDescription>
-          <Spacer />
-          <Button url="https://docs.meshery.io/guides/tutorials"  style={{ color: "rgb(255,255,255)"}}>Get Started</Button>
-        </Card> */}
-
-       
         <Card>
           <CardImageContainer>
-            <CardImage 
-              src={CatalogIcon}
-              alt="Catalog Icon" 
-            />
+            <CardImage src={CatalogIcon} alt="Catalog Icon" />
           </CardImageContainer>
           <CardTitle>Catalog</CardTitle>
           <CardDescription>
-          Reusable designs and templates for Cloud Native Infrastructure.
+            Reusable designs and templates for Cloud Native Infrastructure.
           </CardDescription>
           <Spacer />
-          <Button url="https://meshery.io/catalog" style={{ color: "rgb(255,255,255)"}}>Learn More</Button>
+          <Button url="https://meshery.io/catalog">Learn More</Button>
         </Card>
       </CardGrid>
     </Container>