Landing page CSS

@theme/plugins/blog-posts.js

@@ -12,9 +12,9 @@ export function blogPosts() {
     processContent: async (contentProvider, actions) => {
       try {
         const posts = [];
-        const allBlogPosts = Array.from(contentProvider.fsFilesList.values());
+        const allBlogFiles = Array.from(contentProvider.fsFilesList.values());
 
-        const markdownFiles = allBlogPosts.filter(file => file.match(/blog[\/\\]([^\\\/]*)[\/\\].*\.md$/));
+        const markdownFiles = allBlogFiles.filter(file => file.match(/blog[\/\\]([^\\\/]*)[\/\\].*\.md$/));
 
         for (const relativePath of markdownFiles) {
           const record = contentProvider.loadContent(relativePath, 'frontmatter');
@@ -34,8 +34,8 @@ export function blogPosts() {
             date: record.parsed.data.date
                     ? moment(record.parsed.data.date).format("YYYY-MM-DD")
                     : moment(year).format("YYYY-MM-DD"),
-            category: category || "none",
+            category: category || "General",
-            category_id: category ? category.toLowerCase().replace(/ /g, "_") : "none",
+            category_id: category ? category.toLowerCase().replace(/ /g, "_") : "general",
             link: `${relativePath.replace('blog/', '').replace(".md", "")}`,
           });
         }

blog/index.page.tsx

@@ -22,22 +22,21 @@ const categories = {
   gateway_bulletins: "Gateway Bulletins",
   features: "Features",
   security: "Security",
-  none: "Other",
 };
 
 export default function Index() {
   const { translate } = useTranslate();
-  const { blogPosts } = usePageSharedData<any>('blog-posts');
+  const { blogPosts } = usePageSharedData<any>("blog-posts");
-  for (const blog of blogPosts) {
+
-    console.log(blog)
+  const heroPost = blogPosts[0];
-  }
+  const otherPosts = blogPosts.slice(1);
 
   const defaultSelectedCategories = new Set(Object.keys(categories));
 
   const [selectedCategories, setSelectedCategories] = useState(
     defaultSelectedCategories
   );
-  const [cards, setCards] = useState(blogPosts);
+  const [cards, setCards] = useState(otherPosts);
 
   const toggleCategory = (category) => {
     const newSelectedCategories = new Set(selectedCategories);
@@ -55,7 +54,7 @@ export default function Index() {
 
   return (
     <div className="landing dev-blog">
-      <div className="mt-20">
+      <div className="justify-content-center align-items-lg-center">
         <div className="position-relative d-none-sm">
           <img
             alt="background purple waves"
@@ -67,24 +66,25 @@ export default function Index() {
           <div className="mx-auto text-center col-lg-5">
             <div className="d-flex flex-column">
               <h6 className="eyebrow mb-3">{translate("XRPL Community")}</h6>
-              <h1 className="mb-0">{translate("XRPL Blog")}</h1>
+              <h1 className="mb-3">{translate("XRPL Blog")}</h1>
             </div>
           </div>
         </section>
-        {/* Latest Blog Post */}
+
-        <section className="container-new py-16">
+        {/* Banner */}
-          <div className="d-flex flex-column flex-lg-row align-items-lg-center mt-20">
+        <section className="container-new">
+          <div className="row justify-content-center align-items-lg-center">
             {/* Banner Image */}
-            <div className="mb-2-sm">
+            <div className="image-container">
               <img
                 alt="default-alt-text"
                 src={require("../static/img/blog/blog-hero.svg")}
-                className="w-100 d-none-sm"
+                className="w-100"
               />
             </div>
             {/* Text */}
-            <div className="col justify-content-center px-lg-5 w-100">
+            <div className="col">
-              <div className="d-flex flex-column">
+              <div className="text-bg">
                 <h4 className="mb-3 eyebrow text-uppercase font-weight-light">
                   <span
                     style={{
@@ -92,34 +92,30 @@ export default function Index() {
                       paddingBottom: "4px",
                     }}
                   >
-                    {translate(`${moment(blogPosts[0].date).format("MMM")}`)}
+                    {translate(`${moment(heroPost.date).format("MMM")}`)}
                   </span>
-                  {translate(` ${moment(blogPosts[0].date).format("DD YYYY")}`)}
+                  {translate(` ${moment(heroPost.date).format("DD YYYY")}`)}
                 </h4>
                 <div className="pb-8">
                   <p
-                    className="badge badge-success w-full rounded-pill py-1 px-4 border"
+                    id={`${heroPost.category_id}-badge`}
-                    style={{
+                    className="category-badge"
-                      background: "#145C35",
-                      color: "#32E685",
-                      borderColor: "#32E685 !important",
-                    }}
                   >
-                    {translate(`${blogPosts[0].category}`)}
+                    {translate(`${heroPost.category}`)}
                   </p>
                 </div>
-                <h2 className="mb-8 h4 h2-sm font-weight-bold">
+                <h4 className="mb-8 h2-sm font-weight-bold">
-                  {translate(`${blogPosts[0].title}`)}
+                  {translate(`${heroPost.title}`)}
-                </h2>
+                </h4>
-              </div>
+                <p className="mb-4">{translate(`${heroPost.description}`)}</p>
-              <p className="mb-4">{translate(`${blogPosts[0].description}`)}</p>
+                <div className="d-lg-block">
-              <div className="d-lg-block">
+                  <a
-                <a
+                    className="btn btn-primary btn-arrow"
-                  className="btn btn-primary btn-arrow"
+                    href={`${heroPost.link}`}
-                  href={`${blogPosts[0].link}`}
+                  >
-                >
+                    {translate("Read More")}
-                  {translate("Read More")}
+                  </a>
-                </a>
+                </div>
               </div>
             </div>
           </div>
@@ -128,59 +124,75 @@ export default function Index() {
         {/* Other Blog Posts*/}
         <section className="container-new py-26">
           <div className="row col-12 m-0 p-0 mt-4 pt-2">
-            {/* Filters  */}
+            <div className="left col-3 m-0 p-0 mt-2 d-none d-lg-block">
-            <div className="p-3 category_sidebar">
+              {/* Filters Desktop*/}
-              <p className="mb-3 category-header">Filter by Category:</p>
+              <div className="p-3 category_sidebar">
-              <div className="d-flex flex-column p-3">
+                <p className="mb-3 category-header">Filter by Category:</p>
-                {Object.keys(categories).map((item) => (
+                <div className="d-flex flex-column p-3">
-                  <div
+                  {Object.keys(categories).map((item) => (
-                    key={item}
+                    <div
-                    className="cat_checkbox category-checkbox pb-2"
+                      key={item}
-                  >
+                      className="cat_checkbox category-checkbox pb-2"
-                    <input
-                      className={`blog-filter input_${item}`}
-                      type="checkbox"
-                      name="categories"
-                      id={`input_${item}`}
-                      defaultValue={`${item}`}
-                      onChange={() => toggleCategory(item)}
-                      defaultChecked
-                    />
-                    <label
-                      className="font-weight-bold"
-                      htmlFor={`input_${item}`}
                     >
-                      {categories[item]}
+                      <input
-                    </label>
+                        className={`blog-filter input_${item}`}
-                  </div>
+                        type="checkbox"
-                ))}
+                        name="categories"
+                        id={`input_${item}`}
+                        defaultValue={`${item}`}
+                        onChange={() => toggleCategory(item)}
+                        defaultChecked
+                      />
+                      <label
+                        className="font-weight-bold"
+                        htmlFor={`input_${item}`}
+                      >
+                        {translate(categories[item])}
+                      </label>
+                    </div>
+                  ))}
+                </div>
               </div>
             </div>
             {/* Cards */}
-            <div className="row col row-cols-lg-2 m-0 p-0">
+            <div className="right row col row-cols-lg-2 m-0 p-0">
-              <div></div>
               {filteredCards.map((card, i) => (
-                <a
+                <div
                   key={card.title + i}
-                  className={`event-card ${card.category_id}`}
+                  className={`${card.category_id} col-sm pb-5 px-lg-4`}
-                  href={card.link}
                   id={card.title + i}
                 >
-                  <div
+                  <div className="mb-4" id="category-list">
-                    className="event-card-header"
+                    <img
-                    style={{
+                      alt="default-alt-text"
-                      background: require("../static/img/events/Hackathons.png"),
+                      id={`${card.category_id}`}
-                    }}
+                      className="w-100 mb-4"
-                  >
+                    />
-                    <div className="event-card-title">{translate(card.title)}</div>
+                    <p
+                      id={`${card.category_id}-badge`}
+                      className="category-badge mb-5"
+                    >
+                      {translate(card.category)}
+                    </p>
                   </div>
-                  <div className="event-card-body">
+                  <div className="mb-4">
-                    <p>{translate(card.description)}</p>
+                    <p id="card-date" className="mb-0">
+                      {moment(translate(card.date)).format("MMM DD, YYYY")}
+                    </p>
+                    <h5 className="mb-2-sm h3-sm">{translate(card.title)}</h5>
                   </div>
-                  <div className="mt-lg-auto event-card-footer d-flex flex-column">
+                  <div className="d-lg-block">
-                    <span className="d-flex icon icon-date">{translate(card.date.toString())}</span>
+                    <p className="line-clamp">{translate(card.description)}</p>
                   </div>
-                </a>
+                  <div className="d-lg-block">
+                    <a
+                      className="btn btn-primary btn-arrow"
+                      href={`${card.link}`}
+                    >
+                      {translate("Read More")}
+                    </a>
+                  </div>
+                </div>
               ))}
             </div>
           </div>

package.json

@@ -21,7 +21,6 @@
     "@xrplf/isomorphic": "^1.0.0-beta.1",
     "axios": "^1.6.2",
     "clsx": "^2.0.0",
-    "gray-matter": "^4.0.3",
     "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "react": "^18.2.0",

static/img/blog/blog-check.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1663_35630)">
+<path d="M12 5.75L7 10.75L4 7.75" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1663_35630">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

static/img/blog/blog-hero-background.svg

@@ -1,3 +0,0 @@
-<svg width="1048" height="496" viewBox="0 0 1048 496" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 20C0 8.95432 8.9543 0 20 0H1048V496H20C8.95431 496 0 487.046 0 476V20Z" fill="#232325" />
-</svg>

static/img/blog/blog-hero.svg

@@ -1,85 +1,144 @@
-<svg width="450" height="308" viewBox="0 0 450 308" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="468" height="308" viewBox="0 0 468 308" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d_140_42)">
+    <g filter="url(#filter0_d_172_65)">
-<path d="M0 17H412C423.046 17 432 25.9543 432 37V269C432 280.046 423.046 289 412 289H0V17Z" fill="url(#paint0_linear_140_42)"/>
+        <path
-</g>
+            d="M18 37C18 25.9543 26.9543 17 38 17H430C441.046 17 450 25.9543 450 37V269C450 280.046 441.046 289 430 289H38C26.9543 289 18 280.046 18 269V37Z"
-<path d="M16 53C16 41.9543 24.9543 33 36 33H396C407.046 33 416 41.9543 416 53V253C416 264.046 407.046 273 396 273H36C24.9543 273 16 264.046 16 253V53Z" fill="url(#paint1_linear_140_42)"/>
+            fill="url(#paint0_linear_172_65)" />
-<path d="M129.355 135.329C129.355 133.931 130.337 133.364 131.548 134.063L137.425 137.457V226.34L131.548 222.947C130.337 222.247 129.355 220.547 129.355 219.149V135.329Z" fill="#181818"/>
+    </g>
-<path d="M257.176 60.3819L130.193 133.696C128.982 134.395 128.982 135.529 130.193 136.228L135.264 139.156C136.475 139.855 138.438 139.855 139.649 139.156L266.633 65.8416C267.844 65.1425 267.844 64.009 266.633 63.3099L261.562 60.3819C260.351 59.6828 258.387 59.6828 257.176 60.3819Z" fill="#454549"/>
+    <path
-<g filter="url(#filter1_d_140_42)">
+        d="M34.0001 53C34.0001 41.9543 42.9544 33 54.0001 33L414 33C425.046 33 434 41.9543 434 53V253C434 264.046 425.046 273 414 273H54.0001C42.9544 273 34.0001 264.046 34.0001 253L34.0001 53Z"
-<path d="M266.354 65.004L139.144 138.449C138.187 139.001 137.412 140.344 137.412 141.449L137.412 225.81C137.412 226.914 138.187 227.362 139.144 226.81L266.354 153.365C267.311 152.813 268.087 151.469 268.087 150.365L268.087 66.004C268.087 64.8994 267.311 64.4517 266.354 65.004Z" fill="#232325"/>
+        fill="url(#paint1_linear_172_65)" />
-<path d="M260.216 94.8596L177.683 142.51C176.385 143.26 175.333 145.082 175.333 146.58L175.333 149.987C175.333 151.486 176.385 152.093 177.683 151.344L260.216 103.693C261.514 102.944 262.566 101.122 262.566 99.6235L262.566 96.2162C262.566 94.7178 261.514 94.1104 260.216 94.8596Z" fill="#454549"/>
+    <path
-<path d="M157.255 164.375C163.712 160.647 168.946 151.58 168.946 144.124C168.946 136.668 163.712 133.646 157.255 137.374C150.798 141.102 145.563 150.168 145.563 157.624C145.563 165.08 150.798 168.103 157.255 164.375Z" fill="#7919FF"/>
+        d="M147.355 135.33C147.355 133.931 148.337 133.364 149.548 134.064L155.425 137.457L155.425 226.34L149.548 222.947C148.337 222.248 147.355 220.547 147.355 219.149L147.355 135.33Z"
-<path d="M229.298 139.028L146.765 186.678C145.467 187.428 144.415 189.25 144.415 190.748L144.415 194.155C144.415 195.654 145.467 196.261 146.765 195.512L229.298 147.861C230.596 147.112 231.648 145.29 231.648 143.791L231.648 140.384C231.648 138.886 230.596 138.278 229.298 139.028Z" fill="#454549"/>
+        fill="#181818" />
-<path d="M229.298 153.383L146.765 201.033C145.467 201.783 144.415 203.605 144.415 205.103L144.415 208.51C144.415 210.009 145.467 210.616 146.765 209.867L229.298 162.216C230.596 161.467 231.648 159.645 231.648 158.146L231.648 154.739C231.648 153.241 230.596 152.633 229.298 153.383Z" fill="#454549"/>
+    <rect width="151.692" height="10.9195" rx="2.53178" transform="matrix(0.866025 -0.5 0.866025 0.5 146 134.963)"
-<path d="M249.965 150.829C256.422 147.101 261.656 138.034 261.656 130.578C261.656 123.122 256.422 120.1 249.965 123.828C243.508 127.556 238.273 136.622 238.273 144.078C238.273 151.534 243.508 154.557 249.965 150.829Z" fill="#2DCF78"/>
+        fill="#454549" />
-<path d="M244.539 146.219C244.473 144.6 245.523 142.544 246.872 141.648L249.326 140.02C250.675 139.125 251.833 139.716 251.899 141.334" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+    <g filter="url(#filter1_d_172_65)">
-<path d="M249.362 133.197C250.262 133.657 250.329 135.275 249.509 136.801C248.689 138.327 247.343 139.296 246.503 138.795C245.664 138.295 245.54 136.791 246.295 135.232C247.05 133.673 248.464 132.811 249.362 133.197Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+        <rect width="150.89" height="88.3608" rx="2" transform="matrix(0.866025 -0.5 2.20305e-08 1 155.411 139.45)"
-<path d="M252.976 136.842L254.816 135.621C255.858 134.929 256.695 135.356 256.746 136.607" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+            fill="#232325" />
-<path d="M254.78 130.13C255.424 130.458 255.472 131.635 254.886 132.704C254.299 133.773 253.321 134.498 252.739 134.129C252.157 133.76 252.047 132.623 252.634 131.554C253.159 130.526 254.14 129.875 254.78 130.13Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+        <rect width="100.728" height="8.83369" rx="2.71323"
-</g>
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 193.333 143.867)" fill="#454549" />
-<path d="M150.106 149.472C150.106 148.074 151.088 147.507 152.299 148.206L158.637 151.865V245.82L152.299 242.161C151.088 241.462 150.106 239.762 150.106 238.363V149.472Z" fill="#181818"/>
+        <circle cx="13.5004" cy="13.5004" r="13.5004" transform="matrix(0.866025 -0.5 2.20305e-08 1 163.563 144.124)"
-<path d="M285.346 70.3199L150.866 147.962C149.655 148.661 149.655 149.795 150.866 150.494L156.477 153.733C157.688 154.433 159.651 154.433 160.862 153.733L295.342 76.0912C296.553 75.3921 296.553 74.2585 295.342 73.5594L289.731 70.3199C288.52 69.6208 286.557 69.6208 285.346 70.3199Z" fill="#454549"/>
+            fill="#7919FF" />
-<g filter="url(#filter2_d_140_42)">
+        <rect width="100.728" height="8.83369" rx="2.71323"
-<path d="M295.021 75.221L160.354 152.971C159.397 153.523 158.622 154.866 158.622 155.971L158.622 245.374C158.622 246.479 159.397 246.926 160.354 246.374L295.021 168.624C295.978 168.072 296.753 166.729 296.753 165.624L296.753 76.221C296.753 75.1164 295.978 74.6687 295.021 75.221Z" fill="#232325"/>
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 162.415 188.035)" fill="#454549" />
-<path d="M288.568 92.7526L201.057 143.277C199.759 144.027 198.707 145.849 198.707 147.347L198.707 151.259C198.707 152.757 199.759 153.364 201.057 152.615L288.568 102.09C289.866 101.341 290.918 99.519 290.918 98.0205L290.918 94.1092C290.918 92.6108 289.866 92.0034 288.568 92.7526Z" fill="#454549"/>
+        <rect width="100.728" height="8.83369" rx="2.71323"
-<path d="M288.568 106.76L201.057 157.284C199.759 158.034 198.707 159.856 198.707 161.354L198.707 165.266C198.707 166.764 199.759 167.371 201.057 166.622L288.568 116.097C289.866 115.348 290.918 113.526 290.918 112.028L290.918 108.116C290.918 106.618 289.866 106.01 288.568 106.76Z" fill="#454549"/>
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 162.415 202.39)" fill="#454549" />
-<path d="M179.597 180.319C186.422 176.378 191.956 166.795 191.956 158.913C191.956 151.031 186.422 147.837 179.597 151.778C172.771 155.718 167.238 165.302 167.238 173.184C167.238 181.065 172.771 184.26 179.597 180.319Z" fill="#7919FF"/>
+        <circle cx="13.5004" cy="13.5004" r="13.5004" transform="matrix(0.866025 -0.5 2.20305e-08 1 256.272 130.578)"
-<path fill-rule="evenodd" clip-rule="evenodd" d="M173.862 175.446C173.792 173.736 174.902 171.562 176.329 170.615L178.922 168.894C180.348 167.948 181.573 168.573 181.643 170.283" fill="#7919FF"/>
+            fill="#2DCF78" />
-<path d="M173.862 175.446C173.792 173.736 174.902 171.562 176.329 170.615L178.922 168.894C180.348 167.948 181.573 168.573 181.643 170.283" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+        <path
-<path fill-rule="evenodd" clip-rule="evenodd" d="M178.96 161.682C179.913 162.168 179.982 163.878 179.116 165.491C178.25 167.105 176.826 168.129 175.939 167.6C175.052 167.071 174.92 165.481 175.719 163.833C176.517 162.185 178.011 161.273 178.96 161.682Z" fill="#7919FF"/>
+            d="M262.539 146.219C262.473 144.601 263.523 142.544 264.872 141.648L267.325 140.02C268.675 139.125 269.833 139.716 269.899 141.334"
-<path d="M178.96 161.682C179.913 162.168 179.982 163.878 179.116 165.491C178.25 167.105 176.826 168.129 175.939 167.6C175.052 167.071 174.92 165.481 175.719 163.833C176.517 162.185 178.011 161.273 178.96 161.682Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M182.78 165.535L184.726 164.244C185.828 163.513 186.712 163.964 186.766 165.286" fill="#7919FF"/>
+        <path
-<path d="M182.78 165.535L184.726 164.244C185.828 163.513 186.712 163.964 186.766 165.286" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+            d="M267.362 133.197C268.262 133.657 268.328 135.275 267.509 136.801C266.689 138.327 265.343 139.296 264.503 138.796C263.664 138.295 263.539 136.791 264.295 135.232C265.05 133.673 266.464 132.811 267.362 133.197"
-<path fill-rule="evenodd" clip-rule="evenodd" d="M184.688 158.439C185.368 158.787 185.419 160.031 184.799 161.161C184.18 162.291 183.145 163.057 182.53 162.667C181.915 162.276 181.799 161.076 182.419 159.945C182.974 158.858 184.011 158.17 184.688 158.439Z" fill="#7919FF"/>
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
-<path d="M184.688 158.439C185.368 158.787 185.419 160.031 184.799 161.161C184.18 162.291 183.145 163.057 182.53 162.667C181.915 162.276 181.799 161.076 182.419 159.945C182.974 158.858 184.011 158.17 184.688 158.439Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M270.975 136.842L272.816 135.621C273.858 134.929 274.695 135.356 274.746 136.607" stroke="white"
-<path d="M255.886 153.449L168.375 203.973C167.077 204.723 166.025 206.545 166.025 208.043L166.025 211.955C166.025 213.453 167.077 214.06 168.375 213.311L255.886 162.786C257.184 162.037 258.236 160.215 258.236 158.717L258.236 154.805C258.236 153.307 257.184 152.699 255.886 153.449Z" fill="#454549"/>
+            stroke-linecap="round" stroke-linejoin="round" />
-<path d="M255.886 168.623L168.375 219.147C167.077 219.897 166.025 221.719 166.025 223.217L166.025 227.129C166.025 228.627 167.077 229.234 168.375 228.485L255.886 177.96C257.184 177.211 258.236 175.389 258.236 173.891L258.236 169.979C258.236 168.481 257.184 167.873 255.886 168.623Z" fill="#454549"/>
+        <path
-<path d="M277.598 166C284.423 162.059 289.957 152.476 289.957 144.594C289.957 136.712 284.423 133.518 277.598 137.459C270.772 141.399 265.239 150.983 265.239 158.865C265.239 166.746 270.772 169.941 277.598 166Z" fill="#2DCF78"/>
+            d="M272.78 130.13C273.424 130.458 273.472 131.635 272.885 132.704C272.299 133.773 271.321 134.498 270.739 134.129C270.157 133.76 270.047 132.623 270.633 131.554C271.158 130.526 272.14 129.875 272.78 130.13"
-<path d="M271.862 161.127C271.793 159.417 272.902 157.243 274.329 156.296L276.922 154.575C278.349 153.628 279.573 154.253 279.643 155.964" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
-<path d="M276.96 147.362C277.913 147.848 277.983 149.559 277.116 151.172C276.25 152.785 274.827 153.809 273.939 153.28C273.052 152.751 272.92 151.161 273.719 149.514C274.517 147.866 276.011 146.954 276.96 147.362Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
-<path d="M280.781 151.216L282.726 149.925C283.828 149.193 284.712 149.645 284.766 150.966" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+    <path
-<path d="M282.688 144.12C283.368 144.467 283.419 145.711 282.799 146.841C282.18 147.971 281.146 148.737 280.53 148.347C279.915 147.957 279.799 146.756 280.419 145.626C280.974 144.539 282.011 143.851 282.688 144.12Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+        d="M168.106 149.472C168.106 148.074 169.087 147.507 170.298 148.206L176.637 151.865L176.637 245.821L170.298 242.161C169.087 241.462 168.106 239.762 168.106 238.363L168.106 149.472Z"
-</g>
+        fill="#181818" />
-<defs>
+    <rect width="160.348" height="11.5426" rx="2.53178" transform="matrix(0.866025 -0.5 0.866025 0.5 166.673 149.228)"
-<filter id="filter0_d_140_42" x="-18" y="0" width="468" height="308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        fill="#454549" />
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <g filter="url(#filter2_d_172_65)">
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+        <rect width="159.5" height="93.403" rx="2" transform="matrix(0.866025 -0.5 2.20305e-08 1 176.622 153.972)"
-<feOffset dy="1"/>
+            fill="#232325" />
-<feGaussianBlur stdDeviation="9"/>
+        <rect width="106.476" height="9.33777" rx="2.71323"
-<feComposite in2="hardAlpha" operator="out"/>
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 216.707 144.634)" fill="#454549" />
-<feColorMatrix type="matrix" values="0 0 0 0 0.094043 0 0 0 0 0.094043 0 0 0 0 0.094043 0 0 0 0.5 0"/>
+        <rect width="106.476" height="9.33777" rx="2.71323"
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_140_42"/>
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 216.707 158.641)" fill="#454549" />
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_140_42" result="shape"/>
+        <circle cx="14.2708" cy="14.2708" r="14.2708" transform="matrix(0.866025 -0.5 2.20305e-08 1 185.238 158.913)"
-</filter>
+            fill="#7919FF" />
-<filter id="filter1_d_140_42" x="109.748" y="40.5635" width="186.003" height="217.607" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+        <path fill-rule="evenodd" clip-rule="evenodd"
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            d="M191.862 175.447C191.792 173.736 192.902 171.562 194.329 170.615L196.922 168.894C198.348 167.948 199.573 168.573 199.643 170.283"
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            fill="#7919FF" />
-<feOffset dy="3.4601"/>
+        <path
-<feGaussianBlur stdDeviation="13.832"/>
+            d="M191.862 175.447C191.792 173.736 192.902 171.562 194.329 170.615L196.922 168.894C198.348 167.948 199.573 168.573 199.643 170.283"
-<feComposite in2="hardAlpha" operator="out"/>
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
-<feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 1 0"/>
+        <path fill-rule="evenodd" clip-rule="evenodd"
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_140_42"/>
+            d="M196.96 161.682C197.912 162.168 197.982 163.878 197.116 165.492C196.25 167.105 194.826 168.129 193.939 167.6C193.052 167.071 192.92 165.481 193.718 163.833C194.517 162.185 196.011 161.273 196.96 161.682"
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_140_42" result="shape"/>
+            fill="#7919FF" />
-</filter>
+        <path
-<filter id="filter2_d_140_42" x="130.958" y="50.7805" width="193.459" height="226.954" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            d="M196.96 161.682C197.912 162.168 197.982 163.878 197.116 165.492C196.25 167.105 194.826 168.129 193.939 167.6C193.052 167.071 192.92 165.481 193.718 163.833C194.517 162.185 196.011 161.273 196.96 161.682"
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+        <path fill-rule="evenodd" clip-rule="evenodd"
-<feOffset dy="3.4601"/>
+            d="M200.78 165.535L202.725 164.244C203.828 163.513 204.712 163.964 204.766 165.286" fill="#7919FF" />
-<feGaussianBlur stdDeviation="13.832"/>
+        <path d="M200.78 165.535L202.725 164.244C203.828 163.513 204.712 163.964 204.766 165.286" stroke="white"
-<feComposite in2="hardAlpha" operator="out"/>
+            stroke-linecap="round" stroke-linejoin="round" />
-<feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 1 0"/>
+        <path fill-rule="evenodd" clip-rule="evenodd"
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_140_42"/>
+            d="M202.688 158.44C203.368 158.787 203.419 160.031 202.799 161.161C202.179 162.291 201.145 163.057 200.53 162.667C199.915 162.277 199.799 161.076 200.419 159.946C200.974 158.859 202.011 158.17 202.688 158.44"
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_140_42" result="shape"/>
+            fill="#7919FF" />
-</filter>
+        <path
-<linearGradient id="paint0_linear_140_42" x1="-68.0276" y1="342.55" x2="472.123" y2="230.057" gradientUnits="userSpaceOnUse">
+            d="M202.688 158.44C203.368 158.787 203.419 160.031 202.799 161.161C202.179 162.291 201.145 163.057 200.53 162.667C199.915 162.277 199.799 161.076 200.419 159.946C200.974 158.859 202.011 158.17 202.688 158.44"
-<stop stop-color="#FEFF01"/>
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
-<stop offset="0.352722" stop-color="#FF2D9A"/>
+        <rect width="106.476" height="9.33777" rx="2.71323"
-<stop offset="0.635235" stop-color="#E24CFF"/>
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 184.025 205.33)" fill="#454549" />
-<stop offset="1" stop-color="#9A52FF"/>
+        <rect width="106.476" height="9.33777" rx="2.71323"
-</linearGradient>
+            transform="matrix(0.866025 -0.5 2.20305e-08 1 184.025 220.504)" fill="#454549" />
-<linearGradient id="paint1_linear_140_42" x1="16" y1="206.488" x2="440.715" y2="100.387" gradientUnits="userSpaceOnUse">
+        <circle cx="14.2708" cy="14.2708" r="14.2708" transform="matrix(0.866025 -0.5 2.20305e-08 1 283.238 144.594)"
-<stop offset="0.048982"/>
+            fill="#2DCF78" />
-<stop offset="0.998963" stop-color="#343437"/>
+        <path
-</linearGradient>
+            d="M289.862 161.127C289.792 159.417 290.902 157.243 292.329 156.296L294.922 154.575C296.349 153.628 297.573 154.253 297.643 155.964"
-</defs>
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <path
+            d="M294.96 147.362C295.913 147.848 295.982 149.559 295.116 151.172C294.25 152.785 292.826 153.81 291.939 153.28C291.052 152.751 290.92 151.162 291.719 149.514C292.517 147.866 294.011 146.954 294.96 147.362"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M298.781 151.216L300.726 149.925C301.828 149.193 302.712 149.645 302.766 150.966" stroke="white"
+            stroke-linecap="round" stroke-linejoin="round" />
+        <path
+            d="M300.688 144.12C301.368 144.467 301.419 145.711 300.799 146.841C300.18 147.971 299.145 148.737 298.53 148.347C297.915 147.957 297.799 146.756 298.419 145.626C298.974 144.539 300.011 143.851 300.688 144.12"
+            stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+    <defs>
+        <filter id="filter0_d_172_65" x="0" y="0" width="468" height="308" filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="1" />
+            <feGaussianBlur stdDeviation="9" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.094043 0 0 0 0 0.094043 0 0 0 0 0.094043 0 0 0 0.5 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_172_65" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_172_65" result="shape" />
+        </filter>
+        <filter id="filter1_d_172_65" x="127.748" y="39.8007" width="186.003" height="219.134"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="3.4601" />
+            <feGaussianBlur stdDeviation="13.832" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 1 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_172_65" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_172_65" result="shape" />
+        </filter>
+        <filter id="filter2_d_172_65" x="148.958" y="50.0175" width="193.459" height="228.481"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha" />
+            <feOffset dy="3.4601" />
+            <feGaussianBlur stdDeviation="13.832" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0.0666667 0 0 0 0 0.0666667 0 0 0 0 0.0705882 0 0 0 1 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_172_65" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_172_65" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_172_65" x1="-50.0276" y1="342.55" x2="490.123" y2="230.057"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#FEFF01" />
+            <stop offset="0.352722" stop-color="#FF2D9A" />
+            <stop offset="0.635235" stop-color="#E24CFF" />
+            <stop offset="1" stop-color="#9A52FF" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_172_65" x1="34.0001" y1="206.488" x2="458.715" y2="100.387"
+            gradientUnits="userSpaceOnUse">
+            <stop offset="0.048982" />
+            <stop offset="0.998963" stop-color="#343437" />
+        </linearGradient>
+    </defs>
 </svg>

styles/_blog.scss

@@ -1,15 +1,33 @@
 // These styles are used by the dev-blog pages, which are in another repo.
 
 .dev-blog {
-  .labels-wrap {
+  .image-container {
-    display: inline-block;
+    transform: translateY(15%);
+    z-index: 1;
   }
 
-  a.badge-primary {
+  .text-bg {
-    text-decoration: none;
+    background-color: #232325;
-    &:hover {
+    padding: 60px 40px;
-      text-decoration: none;
+    width: 100%;
+    border-radius: 30px;
+  }
+
+  @media (min-width: 992px) {
+    .image-container {
+      transform: translateX(15%);
     }
+
+    .text-bg {
+      padding: 50px 60px;
+    }
+  }
+
+  .line-clamp {
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 
   #blog-purple {
@@ -18,11 +36,82 @@
     left: 0px;
   }
 
+  #card-date {
+    color: $gray-400;
+  }
+
+  .category-badge {
+    max-width: 180px;
+    border-radius: 30px;
+    border: solid 1px;
+    padding: 1px;
+    text-align: center;
+    word-wrap: break-word;
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  #general-badge {
+    background-color: #343437;
+    color: #FFFFFF;
+  }
+
+  #release_notes-badge {
+    background-color: #145C35;
+    color: #32E685;
+  }
+
+  #advisories-badge {
+    background-color: #4C1A00;
+    color: #FF6719;
+  }
+
+  #amendments-badge {
+    background-color: #4B4C00;
+    color: #FAFF19;
+  }
+
+  #development-badge {
+    background-color: #20004C;
+    color: #7919FF;
+  }
+
+  #developer_reflections-badge {
+    background-color: #002E4C;
+    color: #19A3FF;
+  }
+
+  #gateway_bulletins-badge {
+    background-color: #40004C;
+    color: #D919FF;
+  }
+
+  #features-badge {
+    background-color: #145C35;
+    color: #32E685;
+  }
+
+  #security-badge {
+    background-color: #4C0026;
+    color: #FF198B;
+  }
+
+  #category-list {
+    @each $category in "general", "developer_reflections", "amendments",
+    "advisories", "release_notes", "development", "gateway_bulletins", "features", "security"
+
+      {
+      ##{$category} {
+        content: url("../img/blog/#{$category}.png");
+      }
+    }
+  }
+
   .category_sidebar {
     position: sticky;
     top: 10px;
   }
-  
+
   .category-checkbox {
     display: flex;
     align-items: center;
@@ -37,112 +126,7 @@
 
   .category-header {
     font-weight: bold;
-    color: $gray-300;
-  }
-
-  .event-hero {
     color: $gray-100;
-
-    p {
-      font-weight: 500;
-      font-size: 24px;
-      line-height: 32px;
-    }
-  }
-
-  .event-save-date {
-    color: $white;
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 26px;
-  }
-
-  .event-small-gray {
-    color: $gray-200;
-  }
-
-  .event-card {
-    max-width: 311px;
-    margin: 32px auto;
-    transition: all 0.35s ease-out;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    word-wrap: break-word;
-    background-clip: border-box;
-
-    background-color: $card-bg;
-    box-shadow: 0px 5px 40px $black;
-
-    border: 1px solid rgba(0, 0, 0, 0.125);
-    border-radius: 8px;
-
-    font-size: 16px;
-    line-height: 24px;
-    color: $gray-200;
-
-    .event-card-header {
-      position: relative;
-      height: 176px;
-      background-size: contain !important;
-      width: 100%;
-      border-radius: 8px 8px 0 0;
-    }
-
-    .event-card-title {
-      position: absolute;
-      bottom: 32px;
-      padding: 0 32px;
-      color: $gray-100;
-
-      font-weight: bold;
-      font-size: 20px;
-      line-height: 28px;
-    }
-
-    .event-card-body {
-      padding: 32px;
-    }
-
-    .event-card-footer {
-      padding: 0 32px 32px;
-    }
-
-    .event-card-footer .icon::before {
-      height: 24px;
-      width: 24px;
-      content: "";
-      margin-right: 8px;
-      background-size: contain;
-      background-repeat: no-repeat;
-    }
-
-    .icon-date::before {
-      background: url(../img/events/event-date.svg);
-    }
-
-    .icon-location::before {
-      background: url(../img/events/event-location.svg);
-    }
-  }
-
-  //end event card
-
-  @media (min-width: 992px) {
-    .event-card {
-      max-width: 347px;
-      margin: 32px;
-    }
-
-    .event-card-header {
-      height: 197px !important;
-    }
-  }
-
-  a.event-card:hover {
-    transform: translateY(-16px);
-    text-decoration: none;
   }
 
   label {
@@ -195,7 +179,7 @@
   }
 
   .blog-filter[type="checkbox"]:checked::after {
-    background-image: url(../img/events/event-check.svg);
+    background-image: url(../img/blog/blog-check.svg);
     background-repeat: no-repeat;
     background-position: center;
     background-color: $blue-purple-500;
@@ -206,7 +190,7 @@
   }
 
   .blog-filter[type="checkbox"]:not(:disabled):checked:hover::after {
-    background-image: url(../img/events/event-check.svg);
+    background-image: url(../img/blog/blog-check.svg);
     background-repeat: no-repeat;
     background-position: center;
     border-width: 2px;