fix card layout

boxyhq · Jan 27, 2024 · 24bbcac · 24bbcac
1 parent f579e59
commit 24bbcac
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/src/components/OurInvestors/index.js b/src/components/OurInvestors/index.js
@@ -8,24 +8,28 @@ const OurInvestors = () => {
     {
       bio: 'OSS Capital is the first and only early-stage VC exclusively dedicated to backing leading COSS (commercial open source) startup founders on a global basis since 2018.',
       cardImg: 'ossc',
+      ctaCopy: 'Learn more about OSS Capital',
       investorName: 'OSS Capital',
       url: 'https://oss.capital/',
     },
     {
       bio: 'We support visionary founders across Europe as they build the next generation of B2B software companies.',
       cardImg: 'nauta',
+      ctaCopy: 'Learn more about Nauta Capital',
       investorName: 'Nauta Capital',
       url: 'https://www.nautacapital.com/',
     },
     {
       bio: 'Building a transformative business is a hard and lonely challenge. We pride ourselves on providing genuine, long-term support and also knowing when to step back.',
       cardImg: 'mmc',
+      ctaCopy: 'Learn more about MMC',
       investorName: 'MMC',
       url: 'https://mmc.vc/',
     },
     {
       bio: 'Telefónica’s initiative designed to scale, invest in startups, and bring innovation everywhere in the world.',
       cardImg: 'wayra',
+      ctaCopy: 'Learn more about Wayra',
       investorName: 'Wayra',
       url: 'https://www.wayra.com/',
     },
@@ -44,16 +48,12 @@ const OurInvestors = () => {
             <BaseCard
               cardImage={`/images/investors/${investor.cardImg}`}
               centered={true}
+              ctaCopy={investor.ctaCopy}
+              ctaURL={investor.url}
               height="100"
               width="250"
             >
               <p>{investor.bio}</p>
-              <a
-                class="button button-secondary"
-                href={investor.url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >{`Learn more about ${investor.investorName}`}</a>
             </BaseCard>
           </li>
         ))}

diff --git a/src/components/PanelDiscussions/index.js b/src/components/PanelDiscussions/index.js
@@ -92,7 +92,10 @@ const PanelDiscussions = () => {
             className="panel-dicsussions-list-entry"
             key={panelDiscussion.dateTime}
           >
-            <BaseCard>
+            <BaseCard
+              ctaCopy="Watch On YouTube"
+              ctaURL={panelDiscussion.videoURL}
+            >
               <h2 className="base-card-title">{panelDiscussion.title}</h2>
               <p className="datetime">
                 <time datetime={panelDiscussion.dateTime}>
@@ -106,13 +109,6 @@ const PanelDiscussions = () => {
                   <li key={speaker}>{speaker}</li>
                 ))}
               </ul>
-              <a
-                className="button button-secondary with-icon base-icon-pseudo icon-youtube"
-                href={panelDiscussion.videoURL}
-                target="_blank"
-              >
-                Watch On YouTube
-              </a>
             </BaseCard>
           </li>
         ))}

diff --git a/src/components/cards/BaseCard/index.js b/src/components/cards/BaseCard/index.js
@@ -8,7 +8,11 @@ const BaseCard = ({
   children,
   cardImage,
   centered,
+  ctaCopy,
+  ctaURL,
   height = '250',
+  showCTA = true,
+  targetNewWindow = false,
   width = '250',
 }) => {
   return (
@@ -19,6 +23,15 @@ const BaseCard = ({
         )}
         {children}
       </div>
+      {showCTA && (
+        <a
+          class="button button-secondary"
+          href={ctaURL}
+          target={targetNewWindow ? '_blank' : '_self'}
+        >
+          {ctaCopy}
+        </a>
+      )}
     </div>
   );
 };

diff --git a/src/pages/enterprise-sso/index.js b/src/pages/enterprise-sso/index.js
@@ -86,7 +86,11 @@ const EnterpriseSSO = () => {
           <ul class="reset-list enterprise-sso-advantages-list">
             {ssoAdvantages.map((advantage) => (
               <li key={advantage.title}>
-                <BaseCard cardImage={advantage.cardImage} centered={true}>
+                <BaseCard
+                  cardImage={advantage.cardImage}
+                  centered={true}
+                  showCTA={false}
+                >
                   <h3 className="card-title">{advantage.title}</h3>
                   <p>{advantage.copy}</p>
                 </BaseCard>