feat(Products Page): First pass gray dev box

Sefaria · May 22, 2024 · 765ac0a · 765ac0a
1 parent 16ac39b
commit 765ac0a
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/static/css/s2.css b/static/css/s2.css
@@ -12839,11 +12839,44 @@ span.ref-link-color-3 {color: blue}
   color: #666666;
 }
 
-.productsCTA::after{
+.productsCTA::after {
   content: " >";
   color: #4B71B7;
 }
 
+.productsDevBox {
+    background: #EDEDEC;
+    color: #666666;
+    border: red;
+    font-family: Roboto;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 18.75px;
+    text-align: left;
+    padding: 3%;
+}
+
+.productsDevBox .productsDevHeader {
+  font-family: Roboto;
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 25.78px;
+  text-align: left;
+  padding-bottom: 2%;
+
+}
+
+.productsDevBox a {
+  color: #4B71B7 !important; 
+
+}
+
+.productsDevBox a::after {
+  content: " >";
+  color: #4B71B7;
+}
+
+
 .image-in-text-title {
     margin: auto; /* English System Small */
     margin-top: 15px;

diff --git a/static/js/StaticPages.jsx b/static/js/StaticPages.jsx
@@ -3318,11 +3318,21 @@ const ProductsPage = memo(() => {
     }, []);
 
     console.log("products: ", products)
-    // TODO - Will need to use InterfaceText for language switching!!
+
+
+    const DevBox = () => {
+        return (
+          <div className='productsDevBox'>
+            <p className='productsDevHeader'>Sefaria Developers</p>
+            <p>Check out the products our developer friends from around the world have been building for you! <a href="www.example.com">Explore</a></p>
+          </div>
+        );
+      };
 
 
     return (
         <div>
+            <DevBox />
             {products ? (
                 products.map((product) => (
                     <div key={product.id}>