save

src/pages/ecosystem/Header/index.tsx

@@ -48,7 +48,8 @@ const Header = () => {
       <SectionWrapper sx={{ pt: "6.4rem" }}>
         <Stack direction="column" alignItems="center">
           <Typography sx={{ fontSize: ["4rem", "7.8rem"], lineHeight: ["5rem", "8.8rem"], fontWeight: 600, maxWidth: "66rem", textAlign: "center" }}>
-            Scroll Ecosystem
+            An Ecosystem <br />
+            Forever in Motion
           </Typography>
           <Stack direction="row" gap="2.4rem" sx={{ width: "94.8rem", maxWidth: "100%", mt: "4rem", mb: "5.2rem" }}>
             <Statistic label="Total value locked" loading={isTVLLoading}>

src/pages/ecosystem/Highlights/HighlightList/Card.tsx

@@ -0,0 +1,80 @@
+import { useNavigate } from "react-router-dom"
+
+import { Box, Button, SvgIcon, Typography } from "@mui/material"
+import { styled } from "@mui/system"
+
+import { ReactComponent as ArrowSvg } from "@/assets/svgs/ecosystem/arrow.svg"
+import WebpImage from "@/components/WebpImage"
+
+const Card = styled(Box)(({ theme }) => ({
+  backgroundColor: "#FFF8F3",
+  borderRadius: "2rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: "2rem",
+  padding: "16px 16px 24px 16px",
+  cursor: "pointer",
+  color: theme.palette.text.primary,
+  [theme.breakpoints.down("lg")]: {
+    gap: "2rem",
+  },
+}))
+
+const BlogTitle = styled(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  fontSize: "2.4rem",
+  lineHeight: "3.6rem",
+  textAlign: "center",
+  verticalAlign: "bottom",
+  marginBottom: "0.6rem",
+}))
+
+const BlogPoster = styled(WebpImage)(({ theme }) => ({
+  width: "100%",
+  maxHeight: "23rem",
+  borderRadius: "1rem",
+  overflow: "hidden",
+  [theme.breakpoints.down("md")]: {
+    gridRow: 1,
+    borderRadius: "1.5rem",
+  },
+}))
+
+const ReadButton = styled(Button)(({ theme }) => ({
+  gridArea: "action",
+  alignSelf: "center",
+  borderRadius: "0.8rem",
+  padding: "0.8rem 2.4rem",
+  fontSize: "1.8rem",
+  height: "4rem",
+  width: "10.6rem",
+  fontWeight: 600,
+  [theme.breakpoints.down("sm")]: {
+    justifySelf: "flex-start",
+    fontSize: "1.6rem",
+    width: "9.6rem",
+  },
+}))
+
+const BlogCard = ({ blog, small = false }) => {
+  const navigate = useNavigate()
+  const handleClick = () => {
+    if (blog.externalLink) {
+      window.location.href = blog.externalLink
+    } else {
+      navigate("/blog/" + blog.id)
+    }
+  }
+
+  return (
+    <Card onClick={handleClick}>
+      <BlogPoster src={blog.posterImg}></BlogPoster>
+      <BlogTitle>{blog.title}</BlogTitle>
+      <ReadButton endIcon={<SvgIcon sx={{ fontSize: ["1.2rem !important", "1.4rem !important"] }} component={ArrowSvg} inheritViewBox></SvgIcon>}>
+        Read
+      </ReadButton>
+    </Card>
+  )
+}
+
+export default BlogCard

src/pages/ecosystem/Highlights/HighlightList/index.tsx

@@ -0,0 +1,78 @@
+import { Pagination } from "swiper/modules"
+import { Swiper, SwiperSlide } from "swiper/react"
+
+import { styled } from "@mui/system"
+
+import useCheckViewport from "@/hooks/useCheckViewport"
+
+import BlogCard from "./Card"
+
+const StyledSwiper = styled(Swiper)(({ theme }) => ({
+  marginTop: "2.4rem",
+  "&.swiper": {
+    paddingBottom: "5rem",
+  },
+  "& .swiper-pagination-bullet": {
+    backgroundColor: "transparent",
+    border: "1px solid #fff",
+    width: "1.2rem",
+    height: "1.2rem",
+    opacity: 1,
+    margin: "0 1rem !important",
+  },
+  "& .swiper-pagination-bullet-active": {
+    backgroundColor: "#fff",
+  },
+}))
+
+const data = [
+  {
+    title: "Scaling DeFi: Announcing The First zkEVM Market On Aave",
+    posterImg: "https://scroll.ghost.io/content/images/2024/08/Hero-page_Darwin-Mainnet-Upgrade-_1280-_721--1-.png",
+    link: "https://baidu.com",
+  },
+  {
+    title: "Scaling DeFi: Announcing The First zkEVM Market On Aave",
+    posterImg: "https://scroll.ghost.io/content/images/2024/08/Hero-page_Darwin-Mainnet-Upgrade-_1280-_721--1-.png",
+    link: "https://baidu.com",
+  },
+  {
+    title: "Scaling DeFi: Announcing The First zkEVM Market On Aave",
+    posterImg: "https://scroll.ghost.io/content/images/2024/08/Hero-page_Darwin-Mainnet-Upgrade-_1280-_721--1-.png",
+    link: "https://baidu.com",
+  },
+  {
+    title: "Scaling DeFi: Announcing The First zkEVM Market On Aave",
+    posterImg: "https://scroll.ghost.io/content/images/2024/08/Hero-page_Darwin-Mainnet-Upgrade-_1280-_721--1-.png",
+    link: "https://baidu.com",
+  },
+]
+
+const Carousel = props => {
+  const { isPortrait, isTabletLandscape } = useCheckViewport()
+  let slidesPerView = 3
+  if (isTabletLandscape) {
+    slidesPerView = 2
+  } else if (isPortrait) {
+    slidesPerView = 1
+  }
+  return (
+    <StyledSwiper
+      slidesPerView={slidesPerView}
+      spaceBetween={"30"}
+      centeredSlides={isPortrait}
+      pagination={{
+        clickable: true,
+      }}
+      modules={[Pagination]}
+    >
+      {data.map(blog => (
+        <SwiperSlide key={blog.title}>
+          <BlogCard small={true} blog={blog} />
+        </SwiperSlide>
+      ))}
+    </StyledSwiper>
+  )
+}
+
+export default Carousel

src/pages/ecosystem/Highlights/index.tsx

@@ -0,0 +1,73 @@
+import { useEffect } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+
+import { Stack, Typography } from "@mui/material"
+
+import Button from "@/components/Button"
+import SectionWrapper from "@/components/SectionWrapper"
+import { ECOSYSTEM_PAGE_SYMBOL } from "@/constants"
+import useCheckViewport from "@/hooks/useCheckViewport"
+
+// import useCanvasStore from "@/stores/canvasStore"
+import HighlightList from "./HighlightList"
+
+const data = [
+  {
+    title: "Scaling DeFi: Announcing The First zkEVM Market On Aave",
+    cover: "Discover Badges on Scroll Canvas",
+    link: "https://baidu.com",
+  },
+  {
+    title: "Scaling DeFi: Announcing The First zkEVM Market On Aave",
+    cover: "Discover Badges on Scroll Canvas",
+    link: "https://baidu.com",
+  },
+  {
+    title: "Scaling DeFi: Announcing The First zkEVM Market On Aave",
+    cover: "Discover Badges on Scroll Canvas",
+    link: "https://baidu.com",
+  },
+  {
+    title: "Scaling DeFi: Announcing The First zkEVM Market On Aave",
+    cover: "Discover Badges on Scroll Canvas",
+    link: "https://baidu.com",
+  },
+]
+
+const Highlights = () => {
+  const { isMobile, isTablet } = useCheckViewport()
+  const { hash } = useLocation()
+  // const { badgeList } = useCanvasStore()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (hash) {
+      const targetEl = document.getElementById(`${ECOSYSTEM_PAGE_SYMBOL}-${hash.slice(1)}`)
+      if (targetEl) {
+        targetEl.scrollIntoView({
+          behavior: "smooth",
+        })
+      }
+    }
+  }, [hash])
+
+  return (
+    <SectionWrapper id={`${ECOSYSTEM_PAGE_SYMBOL}-badges`} dark sx={{ pt: ["4rem", "5.5rem", "6rem"], pb: ["5rem"], background: "#101010" }}>
+      <Stack
+        direction={isMobile ? "column" : "row"}
+        justifyContent="space-between"
+        alignItems={isMobile ? "flex-start" : "center"}
+        gap={isMobile ? "1.6rem" : "2rem"}
+      >
+        <Typography sx={{ color: "#fff", fontSize: ["2.4rem", "4.4rem"], lineHeight: ["3.6rem", "5.6rem"], fontWeight: [600, 500], flex: 1 }}>
+          Ecosystem highlights
+        </Typography>
+        <Button width={isMobile ? "19.7rem" : isTablet ? "21.5rem" : "25rem"} onClick={() => navigate("/canvas")} color="primary">
+          Read more
+        </Button>
+      </Stack>
+      <HighlightList items={data} />
+    </SectionWrapper>
+  )
+}
+export default Highlights

src/pages/ecosystem/index.tsx

@@ -1,11 +1,13 @@
 import Contribute from "./Contribute"
 import Header from "./Header"
+import Highlights from "./Highlights"
 import Protocols from "./Protocols"
 
 const Ecosystem = () => {
   return (
     <>
       <Header></Header>
+      <Highlights />
       <Protocols></Protocols>
       <Contribute></Contribute>
     </>