fix: Added baseUrl to the image import and link button styling

index.html

@@ -24,6 +24,7 @@
           { accessStyles: true, baseUrl }
         ),
         onRamps: true,
+        baseUrl
       });
     </script>
   </body>

src/main.jsx

@@ -128,15 +128,15 @@ export function publicationsSelect({ target, routes }) {
   );
 }
 
-export function onRampsResourceCatalog({ target, catalogSources, onRamps }) {
+export function onRampsResourceCatalog({ target, catalogSources, onRamps, baseUrl }) {
   const store = configureStore({
     reducer: {
       resourceCatalog: onRampsCatalogSlice,
     },
   });
   ReactDOM.createRoot(target).render(
     <Provider store={store}>
-      <OnRampsResourceCatalog catalogSources={catalogSources} onRamps={onRamps} />
+      <OnRampsResourceCatalog catalogSources={catalogSources} onRamps={onRamps} baseUrl={baseUrl} />
     </Provider>
   );
 }

src/onramps-resource-catalog/AccessHeader.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styles from "./ResourceCatalog.module.scss";
+
+const AccessHeader = ({ baseUrl }) => {
+  return (
+    <>
+      <div className="row">
+        <div className="col d-flex">
+          <img alt="Access Logo" style={{ height: "75px" }} src={`${baseUrl}/access_logo.png`} />
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <h3 className="border-bottom">The ACCESS On-Ramps Program</h3>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <p>
+            Need more advanced computing and storage options for your work?
+            The On-Ramps program offers your institution cost-free entry to the nation's
+            cyberinfrastructure resources. Simply select a resource from the catalog below to
+            get started. On-Ramps expands your cyberinfrastructure with many powerful resource options.
+          </p>
+          <p>
+            <a href="https://allocations.access-ci.org" target="_blank">Learn more on our About On-Ramps page</a>
+          </p>
+          <h4 className="border-bottom">About ACCESS</h4>
+          <p>
+            ACCESS is a program established and funded by the National Science Foundation to
+            help researchers and educators, with or without supporting grants,
+            to utilize the nation's advanced computing systems and services — at no cost.
+          </p>
+          <p>
+            <a
+              href="https://access-ci.org"
+              target="_blank"
+              className="btn btn-info me-2 fw-bold"
+            >Learn more about ACCESS <i className='bi bi-box-arrow-up-right'></i></a>
+            <a
+              href="https://allocations.access-ci.org/get-your-first-project"
+              target="_blank"
+              className={`btn btn-secondary fw-bold ${styles.btnSecondary}`}
+            >Get Your First Project <i className='bi bi-box-arrow-up-right'></i></a>
+          </p>
+        </div>
+      </div>
+
+    </>
+  )
+}
+
+export default AccessHeader;

src/onramps-resource-catalog/ResourceCatalog.jsx

@@ -6,14 +6,16 @@ import {
   selectHasErrors,
   selectResourcesLoaded,
 } from "./helpers/catalogSlice";
-import { accessText } from "./helpers/accessText";
+
 import ResourceList from "./ResourceList";
 import LoadingSpinner from "../shared/LoadingSpinner";
+import AccessHeader from "./AccessHeader";
 import styles from "./ResourceCatalog.module.scss";
 
 const ResourceCatalog = ({
   catalogSources = [],
-  onRamps = false
+  onRamps = false,
+  baseUrl
 }) => {
   const dispatch = useDispatch();
   const resourcesLoaded = useSelector(selectResourcesLoaded);
@@ -66,7 +68,7 @@ const ResourceCatalog = ({
 
   return (
     <div className={`container mt-3 ${styles.access}`}>
-      { onRamps ? accessText : ''}
+      { onRamps ? <AccessHeader baseUrl={baseUrl} /> : ''}
       { renderCatalogDescriptions() }
       <div className="row">
         <div className="col">

src/onramps-resource-catalog/ResourceCatalog.module.scss

@@ -43,4 +43,15 @@ $warning: #ef7537;
   color: #069;
   padding: 0;
   cursor: pointer;
+}
+
+.btnSecondary {
+	color: #000 !important;
+	background-color: #fec42d !important;
+	border-color: #fec42d !important;
+}
+
+.btnSecondary:hover{
+  background-color: #fecd4d !important;
+	border-color: #feca42 !important;
 }