home

writechoiceorg · Nov 11, 2024 · 5ac3fba · 5ac3fba
1 parent ce7f421
commit 5ac3fba
Show file tree

Hide file tree

Showing 6 changed files with 473 additions and 1 deletion.
diff --git a/config.json b/config.json
@@ -22,7 +22,7 @@
   "apiFiles": [
     "merchant.json"
   ],
-  "homepage": "/introduction",
+  "homepage": "homepage.html",
   "changelog": false,
   "navbar": [
     {

diff --git a/custom.css b/custom.css
@@ -0,0 +1,21 @@
+:root {
+    /* Define your custom table header background color here */
+    --table-header-background-color: #; /* Replace #yourColorCode with the desired color */
+}
+
+.table-header {
+    background: var(--table-header-background-color) !important;
+}
+
+/* custom.css */
+
+:root {
+    /* Define your custom table header background and text colors here */
+    --table-header-background-color: #F9FAFB; /* Replace with the desired background color */
+    --table-header-text-color: #000000; /* Replace with the desired text color */
+}
+
+.table-header {
+    background: var(--table-header-background-color) !important;
+    color: var(--table-header-text-color) !important;
+}
diff --git a/homepage.html b/homepage.html
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Homepage</title>
+  <style>
+    :root {
+      --header-p-color: #808080;
+      --card-bg-color: #fff;
+      --card-p-color: var(--header-p-color);
+      --card-title-color: #343434;
+      --card-border-color: #D8D8D8;
+      --display-logo-light: block;
+      --display-logo-dark: none;
+      --hover-color: #1C5B7E;
+      --card-image-1: url('/media/home/accept-payments.svg');
+      --card-image-2: url('/media/home/card-ramp.svg');
+      --card-image-3: url('/media/home/exchange.svg');
+    }
+
+    [data-theme="dark"] {
+      --header-p-color: #d8d8d8;
+      --card-bg-color: #000000;
+      --card-title-color: #ffffff;
+      --card-border-color: #4f4f4f;
+      --display-logo-light: none;
+      --display-logo-dark: dark;
+      --hover-color: #E36F25;
+      --card-image-1: url('/media/home/accept-payments.svg');
+      --card-image-2: url('/media/home/card-ramp.svg');
+      --card-image-3: url('/media/home/exchange.svg');
+    }
+
+    .home_header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-top: 50px;
+    }
+
+    .home_header .header_logo,
+    .home_header .header_logo img {
+      width: 400px;
+      height: 60px;
+    }
+
+    .home_header .header_logo .home_logo_light {
+      display: var(--display-logo-light);
+    }
+
+    .home_header .header_logo .home_logo_dark {
+      display: var(--display-logo-dark);
+    }
+
+    .home_header p {
+      max-width: 800px;
+      color: var(--header-p-color);
+      text-align: center;
+      font-family: Inter;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 30px;
+      margin: 20px 5%;
+    }
+
+    .home_cards_container {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1rem;
+      max-width: 81.25rem;
+      margin: 3rem auto;
+    }
+
+    .home_cards_container .home_card {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      align-items: flex-start;
+      border-radius: 12px;
+      border: 1px solid var(--card-border-color);
+      background: var(--card-bg-color);
+      text-decoration: none !important;
+      justify-self: center;
+      flex-shrink: 0;
+      gap: 20px;
+      box-shadow: 0px 4px 25.6px 0px rgba(0, 0, 0, 0.05);
+      transition: all 0.3s ease;
+    }
+
+    .home_cards_container .home_card .card_image {
+      background-position: center;
+      background-size: cover;
+      border-radius: 6px;
+      height: 159px;
+      display: flex;
+      padding: 0.0625rem;
+      gap: 0.0625rem;
+      flex-shrink: 0;
+      align-self: stretch;
+      border-radius: 12px 12px 0px 0px;
+    }
+
+    .home_cards_container .home_card .image1 {
+      background-image: var(--card-image-1);
+    }
+
+    .home_cards_container .home_card .image2 {
+      background-image: var(--card-image-2);
+    }
+
+    .home_cards_container .home_card .image3 {
+      background-image: var(--card-image-3);
+    }
+
+
+    .home_cards_container .home_card .home_card_text {
+      display: flex;
+      padding: 0px 20px 20px 20px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 9px;
+      align-self: stretch;
+    }
+
+    .home_cards_container .home_card .home_card_text h3 {
+      color: var(--card-title-color);
+      font-family: Inter;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+      margin: 0;
+      transition: all 0.3s ease;
+    }
+
+    .home_cards_container .home_card .home_card_text p {
+      color: var(--card-p-color);
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 166%;
+      margin: 0;
+      transition: all 0.3s ease;
+    }
+
+    .home_cards_container .home_card:hover {
+      border-color: var(--hover-color);
+      transform: translateY(-2px);
+      box-shadow: 0px 4px 25.6px 0px rgba(0, 0, 0, 0.181);
+    }
+
+    .home_cards_container .home_card:hover .home_card_text h3 {
+      color: var(--hover-color);
+    }
+
+    @media only screen and (max-width: 1350px) {
+      .home_cards_container {
+        margin: 3rem 5%;
+      }
+    }
+
+    @media only screen and (max-width: 1000px) {
+      .home_cards_container {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .home_header .header_logo img {
+        width: 300px;
+      }
+
+      .home_header p {
+        max-width: 800px;
+      }
+
+      .home_cards_container {
+        margin-top: 2rem;
+      }
+    }
+
+    @media only screen and (max-width: 560px) {
+      .home_header {
+        margin-top: 30px;
+      }
+
+      .home_header .header_logo img {
+        width: 80%;
+        margin: auto;
+      }
+
+      .home_header p {
+        max-width: 800px;
+        font-size: 16px;
+        line-height: 20px;
+      }
+
+      .home_cards_container {
+        grid-template-columns: repeat(1, 1fr);
+        margin-top: 1rem;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <header class="home_header">
+    <div class="header_logo">
+      <img src="/media/logo_black.svg" class="home_logo_light" alt="">
+      <img src="/media/logo_white.svg" class="home_logo_dark" alt="">
+    </div>
+    <p>
+Explore our guides and examples to start accepting crypto payments, exchanging cryptocurrencies, and integrating our card ramp solution.
+    </p>
+
+  </header>
+  <main class="home_cards_container">
+
+    <a class="home_card" href="/payment-gateway/boomfi-payment-gateway">
+      <div class="card_image image1"></div>
+      <div class="home_card_text">
+        <h3 class="card_title">Accept Payments</h3>
+        <p>Learn how to start accepting crypto payments in just a few clicks.</p>
+      </div>
+    </a>
+
+    <a class="home_card" href="/card-on-ramp/boomfi-card-on-ramp">
+      <div class="card_image image2"></div>
+      <div class="home_card_text">
+        <h3 class="card_title">Card Ramp</h3>
+        <p>Seamlessly integrate our card ramp solution for purchasing cryptocurrencies.</p>
+      </div>
+    </a>
+
+    <a class="home_card" href="">
+      <div class="card_image image3"></div>
+      <div class="home_card_text">
+        <h3 class="card_title">Exchange (coming soon)</h3>
+        <p>Explore BoomFi's crypto trading feature designed to enhance your trading experience.</p>
+      </div>
+    </a>
+
+  </main>
+
+</body>
+
+
+</html>
diff --git a/media/home/accept-payments.svg b/media/home/accept-payments.svg
diff --git a/media/home/card-ramp.svg b/media/home/card-ramp.svg
diff --git a/media/home/exchange.svg b/media/home/exchange.svg