updated home page UI and contents

src/components/cards/CommunityBannerCard.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import styles from "./card.module.css";
+
+const CommunityBannerCard = ({ link, headerTitle, bodyText, icon }) => {
+	return (
+		<Link href={link}>
+			<div className={styles.communityBanner}>
+				<div>{icon}</div>
+				<div className={styles.communityBannerContent}>
+					<h3>{headerTitle}</h3>
+					<p>{bodyText}</p>
+				</div>
+			</div>
+		</Link>
+	);
+};
+
+export default CommunityBannerCard;

src/components/cards/ContentCard.js

@@ -1,25 +1,16 @@
-import React from 'react';
-import styles from './card.module.css';
-import Link from '@docusaurus/Link';
-
-const ContentCard = ({ icon, isExternalLink, link }) => {
-
+import React from "react";
+import styles from "./card.module.css";
+import Link from "@docusaurus/Link";
 
+const ContentCard = ({ icon, link, subText }) => {
 	return (
-		<>
-			{
-				isExternalLink ? <Link href={link}>
-					<div className={styles.contentCard}>
-						<div>{icon}</div>
-					</div>
-				</Link> :
-					<Link to={link}>
-						<div className={styles.contentCard}>
-							<div>{icon}</div>
-						</div>
-					</Link>
-			}
-		</>
+		<div className={styles.contentCardBox}>
+			<Link to={link} className={styles.contentCard}>
+				{icon}
+			</Link>
+			<br />
+			<span>{subText}</span>
+		</div>
 	);
 };
 

src/components/cards/GithubCard.js

@@ -1,20 +1,18 @@
-import React from 'react';
-import styles from './card.module.css';
-import Link from '@docusaurus/Link';
-import GithubLogo from '@site/static/img/github.svg';
+import React from "react";
+import styles from "./card.module.css";
+import Link from "@docusaurus/Link";
+import GithubLogo from "@site/static/img/github.svg";
 
 const GithubCard = ({ link, title }) => {
 	return (
-		<div className={styles.GithubLink}>
+		<div className={styles.githubLink}>
 			<div>
-				<GithubLogo className={styles.GithubLinkImg} title='github' />
+				<GithubLogo className={styles.githubLinkImg} title='github' />
 			</div>
 			<div>
-				<span className={styles.GithubLinkText}>
-					{' '}
-					<Link href={link}>
-						{title}
-					</Link>{' '}
+				<span className={styles.githubLinkText}>
+					{" "}
+					<Link href={link}>{title}</Link>{" "}
 				</span>
 			</div>
 		</div>

src/components/cards/card.module.css

@@ -1,20 +1,18 @@
-.discordBannerSvg {
+.communityBannerSvg {
     width: 100%;
     height: 100%;
 }
 
-.contentCard {
-    margin: 0.6rem 1rem;
+.contentCardBox {
+    margin: 0 0.5rem;
 }
 
-
 .contentCard:hover {
     cursor: pointer;
     box-shadow: 0px 12px 25px rgba(34, 35, 140, 0.07);
     border-radius: 12px;
 }
 
-
 .contentCardSection h4 {
     font-weight: 600;
     font-size: 1rem;
@@ -26,8 +24,7 @@
     color: #545A6C;
 }
 
-
-.discordBanner {
+.communityBanner {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -40,35 +37,30 @@
     width: 50rem;
 }
 
-.discordBanner:hover {
+.communityBanner:hover {
     cursor: pointer;
-    background: #FFFFFF;
     box-shadow: 0px 12px 25px rgba(34, 35, 140, 0.07);
 }
 
-.discordBannerContent {
+.communityBannerContent {
     margin: 1.5rem 2.5rem;
 }
 
-.discordBannerContent h4 {
+.communityBannerContent h4 {
     font-weight: 600;
     font-size: 1.5rem;
     line-height: 30px;
     margin: 1.5rem 0 0 0;
     color: var(--ifm-text-color);
 }
 
-.discordBannerContent p {
+.communityBannerContent p {
     font-size: 1rem;
     color: #545A6C;
 }
 
 
-.discordBannerLink {
-    text-decoration: none !important;
-}
-
-.GithubLink {
+.githubLink {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -82,32 +74,32 @@
     margin: 1rem 1rem;
 }
 
-.GithubLink:hover {
+.githubLink:hover {
     cursor: pointer;
     box-shadow: 0px 12px 25px rgba(34, 35, 140, 0.07);
 }
 
-.GithubLinkImg {
+.githubLinkImg {
     margin: 0 0.7rem -0.3rem 0;
 }
 
-.GithubLinkText {
+.githubLinkText {
     font-weight: 600;
     font-size: 18px;
     line-height: 23px;
     color: var(--ifm-text-color);
 }
 
 
-.GithubLinkText a {
+.githubLinkText a {
     text-decoration: none;
     color: var(--ifm-text-color);
 }
 
 
 @media screen and (max-width:768px) {
-    .discordBanner {
-        width:18rem;
+    .communityBanner {
+        width: 18rem;
         padding: 0rem;
     }
 }

src/css/custom.css

@@ -27,6 +27,10 @@
     url('/fonts/Sora-Thin.ttf') format('truetype');
 }
 
+a {
+  text-decoration: none !important;
+}
+
 body {
   font-family: 'Sora', sans-serif;
   font-size: 1rem;
@@ -74,4 +78,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 
 .web3-compare-table td:first-child {
   font-weight: bold;
-};
+}
+
+;