add base layout

community/index.page.tsx

@@ -15,7 +15,7 @@ const hackathon = require("../static/img/events/Hackathons.png");
 const conference = require("../static/img/events/Conference.png");
 const zone = require("../static/img/events/XRPLZone.png");
 const brazil = require("../static/img/events/event-meetup-brazil.png");
-const korea = require("../static/img/events/SouthKoreaMeetup.png")
+const korea = require("../static/img/events/SouthKoreaMeetup.png");
 const findNearestUpcomingEvent = (events) => {
   let nearestEvent = null;
   let nearestDateDiff = Infinity;
@@ -641,6 +641,63 @@ const CommunityPage: React.FC = () => {
           </div>
         </div>
       </section>
+      {/* Bottom Cards Section 2 cards */}
+      <section className="bottom-cards-section bug-bounty">
+        <div className="com-card">
+          <img className="top-right-img bug-bounty-card-bg" alt="Top Right Image" />
+          <div className="card-content">
+            <h6 className="card-title">
+              {translate("RippleX Bug Bounty Program")}
+            </h6>
+            <h6 className="card-subtitle">
+              {translate(
+                "Contribute to the XRP Ledger's"
+              )}
+              <br/>
+              Security
+            </h6>
+            <p className="card-description">
+              {translate(
+                "RippleX's Bug Bounty, part of Ripple's 1 Billion XRP pledge, strengthens XRP Ledger security and supports its ecosystem. Use this program to report bugs in RippleX/rippled. Send a detailed report of a qualifying bug to bugs@ripple.com and use the bugs@ripple.com Public Key."
+              )}
+            </p>
+            <div className="card-links">
+              <Link
+                className="com-card-link"
+                target="_blank"
+                to="https://docs.google.com/document/d/1TXAQULPBCbj6e5SZItR8ZNGTav4e4L948fGZQ1SBBWM/edit#heading=h.760ha1x1h65"
+              >
+                {translate("Learn more about the program")}
+              </Link>
+            </div>
+          </div>
+        </div>
+        <div className="com-card">
+          <img className="bottom-right-img bug-bounty-card-bg-2" alt="Bottom Right Image" />
+          <div className="card-content">
+            <h6 className="card-title">{translate("Report a Scam")}</h6>
+            <h6 className="card-subtitle">
+              {translate(
+                "Report Scams to Safeguard Our Community"
+              )}
+            </h6>
+            <p className="card-description">
+              {translate(
+                "In an evolving industry where trust and security are critical, scams continue to impede progress in crypto and blockchain. Help mitigate scammers by reporting scams."
+              )}
+            </p>
+            <div className="card-links">
+              <Link
+                target="_blank"
+                className="com-card-link"
+                to="/community/report-a-scam/"
+              >
+                {translate("Report a Scam")}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>{" "}
       {/* Bottom Cards Section */}
       <section className="bottom-cards-section">
         <div className="com-card">

styles/_contribute.scss

@@ -938,14 +938,21 @@
         /* This will push the links to the bottom */
     }
 
-
+    .bottom-cards-section.bug-bounty {
+        justify-content: space-around;
+        .com-card{
+            min-width: 559px;
+            max-width: 559px;
+            height: 442px;
+        }
+    }
     .bottom-cards-section {
         display: flex;
         flex-direction: row;
-        justify-content: center;
+        justify-content: space-around;
         gap: 48px;
         max-width: 1280px;
-        margin: 0 auto;
+        margin: 100px auto;
 
         .com-card {
             padding: 36px;
@@ -962,6 +969,12 @@
                 left: 0;
                 content: url(../img/community/card-bg-1.svg);
             }
+            .top-right-img.bug-bounty-card-bg {
+                content: url(../img/community/bug-bounty-card-bg.png)
+            }
+            .bottom-right-img.bug-bounty-card-bg-2 {
+                content: url(../img/community/bug-bounty-card-bg-2.png)
+            }
 
             .bottom-right-img {
                 position: absolute;
@@ -1080,6 +1093,14 @@
             align-items: center;
             padding: 20px;
         }
+        .bottom-cards-section.bug-bounty {
+            justify-content: space-around;
+            .com-card{
+                min-width: 352px;
+                height: fit-content;
+                max-width: 352px;
+            }
+        }
 
         .bottom-cards-section .com-card {
             margin-bottom: 20px;
@@ -1087,19 +1108,6 @@
             display: block;
             width: 100%;
         }
-
-        /* Reset the image positions for mobile */
-        .com-card .top-left-img,
-        .com-card .bottom-right-img,
-        .com-card .top-right-img {
-            position: static;
-            /* This removes the absolute positioning */
-            display: block;
-            width: 100%;
-            /* Adjust this if you want the image to take up less width */
-            margin-bottom: 15px;
-            /* Add some space between the image and the card content */
-        }
     }
 
     .num-separator {