Ecosystem highlights

src/constants/blog.ts

@@ -20,6 +20,10 @@ export const getBlogCategoryList = lang => [
     label: LANGUAGE_MAP[lang].technical,
     key: "Technical",
   },
+  {
+    label: LANGUAGE_MAP[lang].ecosystem_highlights,
+    key: "Ecosystem highlights",
+  },
 ]
 
 export const getBlogSortList = lang => [
@@ -42,6 +46,7 @@ export const LANGUAGE_MAP = {
     announcement: "Announcement",
     general: "General",
     technical: "Technical",
+    ecosystem_highlights: "Ecosystem highlights",
     sort: "Order by",
     newest: "Newest",
     oldest: "Oldest",
@@ -56,6 +61,7 @@ export const LANGUAGE_MAP = {
     announcement: "Duyuru",
     general: "Genel",
     technical: "Teknik",
+    ecosystem_highlights: "Ekosistem vurguları",
     sort: "Şuna göre sırala",
     newest: "En yeni",
     oldest: "En eski",

src/pages/blog/index.tsx

@@ -1,5 +1,6 @@
 import { orderBy } from "lodash"
 import { useEffect, useMemo, useState } from "react"
+import { useLocation } from "react-router-dom"
 import useStorage from "squirrel-gill"
 
 import { Tune as TuneIcon } from "@mui/icons-material"
@@ -162,6 +163,7 @@ const BlogList = styled("ul")(({ theme }) => ({
 }))
 
 const Blog = () => {
+  const location = useLocation()
   const { isDesktop } = useCheckViewport()
   const [language] = useStorage(localStorage, BLOG_LANGUAGE, "en")
   const BLOG_CATEGORY_LIST = useMemo(() => getBlogCategoryList(language), [language])
@@ -171,10 +173,12 @@ const Blog = () => {
   const handleFilterOpen = () => setFilterOpen(true)
   const handleFilterClose = () => setFilterOpen(false)
 
+  const category = location.state?.category ?? "All"
+
   const [blogs, setBlogs] = useState(blogSource)
   const [queryForm, setQueryForm] = useState({
     sort: "Newest",
-    category: "All",
+    category,
   })
 
   const blogsWithLang = useMemo(() => filterBlogsByLanguage(blogSource, language), [blogSource, language])

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,76 @@
+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 }) => {
+  const navigate = useNavigate()
+  const handleClick = () => {
+    navigate("/blog/" + blog.slug)
+  }
+
+  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,65 @@
+import { Autoplay, Pagination } from "swiper/modules"
+import { Swiper, SwiperSlide } from "swiper/react"
+
+import { styled } from "@mui/system"
+
+import useCheckViewport from "@/hooks/useCheckViewport"
+import Data from "@/pages/blog/data.json"
+
+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 Carousel = props => {
+  const { isPortrait, isTabletLandscape } = useCheckViewport()
+  let slidesPerView = 3
+  if (isTabletLandscape) {
+    slidesPerView = 2
+  } else if (isPortrait) {
+    slidesPerView = 1
+  }
+
+  const filteredData = Data.filter(blog => blog.type === "Ecosystem highlights" && blog.language === "en")
+
+  return (
+    <StyledSwiper
+      slidesPerView={slidesPerView}
+      spaceBetween={"30"}
+      // slidesPerGroup={slidesPerView}
+      centeredSlides={isPortrait}
+      pagination={{
+        clickable: true,
+      }}
+      // loop={isPortrait}
+      autoplay={{
+        delay: 2500,
+        disableOnInteraction: false,
+      }}
+      modules={[Pagination, Autoplay]}
+    >
+      {filteredData.map(blog => (
+        <SwiperSlide key={blog.title}>
+          <BlogCard blog={blog} />
+        </SwiperSlide>
+      ))}
+    </StyledSwiper>
+  )
+}
+
+export default Carousel

src/pages/ecosystem/Highlights/index.tsx

@@ -0,0 +1,54 @@
+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 HighlightList from "./HighlightList"
+
+const Highlights = () => {
+  const { isMobile, isTablet } = useCheckViewport()
+  const { hash } = useLocation()
+  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}-highlights`} 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>
+        {isMobile ? null : (
+          <Button
+            width={isTablet ? "21.5rem" : "25rem"}
+            onClick={() => navigate("/blog", { state: { category: "Ecosystem highlights" } })}
+            color="primary"
+          >
+            Read more
+          </Button>
+        )}
+      </Stack>
+      <HighlightList />
+    </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>
     </>