fix: grid layout fix on mobile, hero banner on header

cardano-foundation · Aug 19, 2024 · 573ddc3 · 573ddc3
1 parent c441aff
commit 573ddc3
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/public/assets/hero-banner.svg b/public/assets/hero-banner.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -154,7 +154,7 @@ const CardanoExplorer = () => {
             </Alert>
           )}
         </Typography>
-        <Grid container spacing={3}>
+        <Grid container spacing={2} sx={{display: { xs: 'grid', sm: 'flex' }, justifyContent: 'center', alignItems: 'center'}}>
           {selectedExplorer ? (
             <Grid item xs={12}>
               <CardLink

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -18,7 +18,7 @@ function Footer() {
         bottom: 0
       }}
     >
-        <Grid container spacing={2} style={{color: "white", marginTop: "1px", fontSize: "small"}}>
+        <Grid container spacing={1} style={{color: "#ebedf0", marginTop: "1px", fontSize: "14px", cursor: 'pointer'}}>
             <Grid item xs={3}/>
             <Grid item xs={2} style={{textAlign: "center"}}>
                 <div style={{fontWeight: "bold"}}>Support</div>
@@ -35,7 +35,7 @@ function Footer() {
                 <div onClick={() => location.href = 'https://cardanofoundation.org'}>News</div>
                 <div onClick={() => location.href = 'https://developers.cardano.org/docs/portal-contribute/'}>Contribute</div>
             </Grid>
-            <Grid item xs={3}/>
+
             <Grid item xs={12} style={{textAlign: "center", color: "white", fontSize: "small"}}>
                 ® Cardano
             </Grid>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,9 +1,29 @@
 // src/components/Header.jsx
 import React from "react";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, styled } from "@mui/material";
 import cardanoLogo from "/assets/logo.svg";
 import githubLogo from "/assets/github.svg";
+
+export const HeaderSection = styled("header")`
+    width: 100%;
+    height: 280px;
+    overflow: hidden;
+    background: url('/assets/hero-banner.svg');
+    
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 66%;
+        background-image: linear-gradient(248deg, #305bbd, #0035ad);
+        z-index: -1;
+    }
+`;
+
 function Header() {
+
   return (
     <>
         <Box
@@ -20,15 +40,8 @@ function Header() {
                 <img src={githubLogo} style={{float: "right", margin: '1rem 1.05rem 0 0'}}/>
             </a>
         </Box>
-        <Box
-            component="header"
-            sx={{
-                width: "100%",
-                overflow: "hidden",
-                background: "#0538AF",
-        }}
-      >
-            <Box sx={{marginLeft: 4, padding: 3}}>
+        <HeaderSection>
+            <Box sx={{margin: '0 auto', padding: '83px'}}>
                 <Typography variant="h1" gutterBottom
                             sx={{margin: '1rem 0 0 1.05rem', color: "#fff", fontSize: '3rem', fontWeight: '700'}}>
                     Explorers
@@ -37,7 +50,7 @@ function Header() {
                     List of Cardano Explorers from our Community and Foundation.
                 </Typography>
             </Box>
-        </Box>
+        </HeaderSection>
     </>
   );
 }