fix: scroll open blog

scroll-tech · Jan 23, 2025 · d72d327 · d72d327
1 parent 737699c
commit d72d327
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 33 deletions.
diff --git a/public/imgs/homepage/landing-blog-1.webp b/public/imgs/homepage/landing-blog-1.webp
diff --git a/public/imgs/homepage/landing-blog-2.webp b/public/imgs/homepage/landing-blog-2.webp
diff --git a/src/app/_components/Blog/Card.tsx b/src/app/_components/Blog/Card.tsx
@@ -6,7 +6,6 @@ import { Box, Card, CardContent, CardMedia, SvgIcon, Typography } from "@mui/mat
 
 import ExternaLinkIcon from "@/assets/svgs/common/external-link.svg"
 import Link from "@/components/Link"
-import ScrollLogo from "@/components/ScrollLogo"
 import useCheckViewport from "@/hooks/useCheckViewport"
 
 const useStyles = makeStyles<any>()((theme, { cover }) => ({
@@ -25,11 +24,12 @@ const useStyles = makeStyles<any>()((theme, { cover }) => ({
 
   cardMediaTitle: {
     position: "absolute",
-    top: "2.4rem",
-    left: "3rem",
+    top: "50%",
+    left: "2rem",
+    transform: "translateY(-50%)",
     color: (theme as any).vars.palette.primary.contrastText,
     fontWeight: 600,
-    fontSize: "5rem",
+    fontSize: "4rem",
     lineHeight: 1,
     [theme.breakpoints.down("sm")]: {
       fontSize: "3.2rem",
@@ -52,9 +52,7 @@ const useStyles = makeStyles<any>()((theme, { cover }) => ({
     borderRadius: "2.5rem",
     backgroundColor: (theme as any).vars.palette.text.primary,
     position: "relative",
-    [theme.breakpoints.between("md", "lg")]: {
-      backgroundPosition: "right",
-    },
+    backgroundPosition: "left",
   },
   cardContent: {
     height: cover ? "calc(100% - 23rem)" : "100%",
@@ -107,7 +105,7 @@ const useStyles = makeStyles<any>()((theme, { cover }) => ({
 }))
 
 const StoryCard = props => {
-  const { title, imageTitle, cover, content, href, ...restProps } = props
+  const { title, cover, content, href, ...restProps } = props
 
   const { classes, cx } = useStyles({ cover })
 
@@ -119,8 +117,7 @@ const StoryCard = props => {
         {cover && (
           <Box className={classes.cardMediaWrapper}>
             <CardMedia sx={{ height: ["13rem", "23rem"] }} classes={{ root: classes.cardMedia }} image={cover} />
-            <Typography className={classes.cardMediaTitle}>{imageTitle}</Typography>
-            <ScrollLogo light className={classes.cardMediaLogo}></ScrollLogo>
+            {/* <Typography className={classes.cardMediaTitle}>{imageTitle}</Typography> */}
           </Box>
         )}
 

diff --git a/src/app/_components/Blog/index.tsx b/src/app/_components/Blog/index.tsx
@@ -60,29 +60,9 @@ const STORIES = [
   },
   {
     cover: "/imgs/homepage/landing-blog-2.webp",
-    title: "Build Your Onchain Story",
-    content:
-      "Create your unique on-chain identity on Scroll Canvas, where you can collect and display badges that celebrate your achievements and contributions within the Scroll ecosystem.",
-    href: "/canvas-and-badges",
-    imageTitle: (
-      <>
-        <Typography sx={{ fontSize: ["2.4rem", "4rem"], lineHeight: ["2.4rem", "4rem"], fontWeight: 600, color: "primary.contrastText" }}>
-          Scroll Canvas
-        </Typography>
-        <Typography
-          sx={{
-            fontSize: ["2rem", "3.2rem"],
-            lineHeight: ["2.4rem", "4rem"],
-            fontWeight: 600,
-            color: "primary.contrastText",
-            mt: ["0.6rem", "1.2rem"],
-          }}
-        >
-          Build Your <br></br>
-          Onchain Story
-        </Typography>
-      </>
-    ),
+    title: "Scroll Open: Forge the Open Economy",
+    content: "A six-week program empowering builders to create impactful dApps and shape the future of the Open Economy",
+    href: "https://open.scroll.io/",
   },
 ]