(wip) apply new branded layout + refactor code to re-use React compon…

…ents

package.json

@@ -39,6 +39,7 @@
     "prism-react-renderer": "^2.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-material-ui-carousel": "^3.4.2",
     "sass": "^1.77.8",
     "url-loader": "^4.1.1"
   },

src/components/Accordion/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -23,6 +23,13 @@ const CustomAccordion: React.FC<AccordionData> = ({
   details,
   index,
 }) => {
+  // const [expanded, setExpanded] = useState<string | false>(false);
+
+  // const handleChange =
+  //   (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+  //     setExpanded(isExpanded ? panel : false);
+  //   };
+
   return (
     <Accordion key={index}>
       <AccordionSummary
@@ -43,11 +50,12 @@ const CustomAccordion: React.FC<AccordionData> = ({
         {details.length > 0 &&
           details.map(({ question, answer }, index) => {
             return (
-              <Accordion key={index}>
+              <Accordion key={index} style={{ textAlign: 'left' }}>
                 <AccordionSummary
                   expandIcon={<ExpandMoreIcon />}
                   aria-controls={'panel' + index + '-content'}
                   id={'panel' + index + '-header'}
+                  style={{ fontWeight: '500' }}
                 >
                   {question}
                 </AccordionSummary>

src/components/Box/Box.module.scss

@@ -12,28 +12,20 @@
 
   transition: all 200ms ease-out 10ms;
 
+  .title {
+    font-weight: 'bold';
+  }
+
   p {
     margin-bottom: 0;
     line-height: 1.25rem;
   }
 
-  a {
-    max-width: 100%;
-  }
-
-  h3 {
-    margin-top: -40px;
-  }
+  // a {
+  //   max-width: 100%;
+  // }
 
   &:hover {
     transform: scale(1.05);
   }
 }
-
-.img {
-  width: 100%;
-  padding-bottom: 100%;
-  margin-left: 25px;
-  background-size: contain;
-  background-repeat: no-repeat;
-}

src/components/Box/index.js

@@ -2,21 +2,23 @@ import React from 'react';
 import Link from '@docusaurus/Link';
 import styles from './Box.module.scss';
 
-export default function Box({ icon, link, title, content, className }) {
+export default function Box({ icon, link, title, content }) {
   return (
-    // <Link style={{ textDecoration: 'none', textAlign: 'left' }} to={link}>
-    <div style={{ overflow: 'auto' }}>
-      <div style={{ float: 'left' }}>
-        <img
-          style={{ display: 'block' }}
-          src={icon}
-          // className={`${styles.img} img`}
-          // style={{ backgroundImage: 'url(' + icon + ')' }}
-        />
+    <div
+      style={{
+        overflow: 'auto',
+        textAlign: 'left',
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Link to={link}>
+        <img src={icon} />
+      </Link>
+      <div style={{ justifyContent: 'center' }}>
+        <h2 className={styles.title}>{title}</h2>
+        <p>{content}</p>
       </div>
-      <h3>{title}</h3>
-      <p>{content}</p>
     </div>
-    // </Link>
   );
 }

src/components/CallToActionButton/CallToActionButton.module.scss

@@ -3,7 +3,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  text-align: center;
 }
 
 .ctaButton {
@@ -18,7 +17,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  text-align: center;
 
   transition: all 200ms ease-out 10ms;
 

src/components/Carousel/Carousel.module.scss

@@ -0,0 +1,123 @@
+.Example {
+  margin-bottom: 3rem;
+}
+
+.Banner {
+  height: 200px;
+  position: relative;
+
+  .Media {
+    background-color: white;
+    height: 100%;
+    overflow: hidden;
+
+    position: relative;
+
+    .MediaCaption {
+      text-overflow: ellipsis;
+
+      position: absolute;
+      bottom: 0;
+
+      padding: 15px;
+
+      background-color: black;
+      color: white;
+      opacity: 0.6;
+
+      width: 100%;
+      height: 10%;
+
+      font: {
+        size: 16px;
+        weight: 200;
+      }
+
+      transition: 300ms;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    transition: 300ms;
+    cursor: pointer;
+    &:hover {
+      filter: brightness(115%);
+    }
+  }
+
+  .BannerGrid {
+    height: 100%;
+    display: flex; /* Ensures grid items align properly */
+    align-items: stretch; /* Stretches items to match height */
+  }
+
+  .Content {
+    color: white;
+    background-color: darkred;
+    height: 100%;
+
+    position: relative;
+
+    cursor: pointer;
+
+    padding: 30px;
+
+    transition: 300ms;
+
+    &:hover,
+    &:active {
+      background-color: darkgoldenrod;
+
+      .ViewButton {
+        background-color: whitesmoke;
+        color: darkred;
+      }
+    }
+
+    .Title {
+      font-size: 18px;
+      font-weight: 500;
+      color: white;
+    }
+
+    .Caption {
+      margin-top: 10px;
+      font-size: 14px;
+      color: white;
+    }
+
+    .ViewButton {
+      color: white;
+
+      font-size: 16px;
+      border: 3px solid white;
+      text-transform: capitalize;
+
+      transition: 200ms;
+    }
+  }
+}
+
+.dappCard {
+  margin: 1rem 0;
+  height: 200px; /* Set a fixed height */
+  box-sizing: border-box;
+  filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.12));
+  overflow: hidden;
+  border-radius: 20px;
+  -webkit-border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.dappCardImage {
+  transition: all 300ms ease-out;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+}
+
+.dappCard:hover .dappCardImage {
+  transform: scale(1.04);
+}