fix: update home

sanctuarycomputer · Nov 1, 2024 · 34c5ab6 · 34c5ab6
1 parent f4edb93
commit 34c5ab6
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 70 deletions.
diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -186,16 +186,17 @@ export type ConnectBlock = {
 export type ColoredCardsColor = 'pink' | 'green' | 'blue' | 'orange';
 
 export type HomepageData = {
-  hero: {
+  heros: {
     headerLine1: string;
     headerLine2: string;
-  };
+  }[];
   coloredCardsBlock: {
     cards: {
       icon: ColoredCardsIcon;
       title: string;
       description: string;
       color: ColoredCardsColor;
+      url: string;
     }[];
   };
   faqBlock: {

diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx
@@ -29,25 +29,30 @@ const Homepage: FC<Props> = ({ homepageData }) => {
     }
     return 'pink-vibrant';
   };
+  const heros = homepageData.heros || [];
+  const hero = heros[Math.floor(Math.random() * heros.length)];
 
   return (
     <div className="page-wrapper">
-      <div className="Hero rounded-large py-[4.84375rem] sm:py-[3.75rem] bg-light-surface-2 dark:bg-dark-surface-2">
-        <h2 className="flex flex-col items-center text-light-neutral-1 dark:text-dark-neutral-1">
-          <span className="heading-0-mobile sm:heading-0">{homepageData.hero.headerLine1}</span>
-          <span className="serif-heading-0-mobile sm:serif-heading-0 italic">
-            {homepageData.hero.headerLine2}
-          </span>
-        </h2>
-      </div>
+      {hero && (
+        <div className="Hero rounded-large py-[4.84375rem] sm:py-[3.75rem] bg-light-surface-2 dark:bg-dark-surface-2">
+          <h2 className="flex flex-col items-center text-light-neutral-1 dark:text-dark-neutral-1">
+            <span className="heading-0-mobile sm:heading-0">{hero.headerLine1}</span>
+            <span className="serif-heading-0-mobile sm:serif-heading-0 italic">
+              {hero.headerLine2}
+            </span>
+          </h2>
+        </div>
+      )}
       {homepageData.coloredCardsBlock && homepageData.coloredCardsBlock.cards.length > 0 ? (
         <div className="ColoredCardBlock default-grid py-padding-x-large">
           {homepageData.coloredCardsBlock.cards.map((card) => {
             const textColorName = getColorName(card.color);
 
             return (
-              <div
+              <a
                 key={card.title}
+                href={card.url}
                 className={cn(
                   'ColoredCard rounded-large p-padding-medium col-span-4 md:col-span-2',
                   {
@@ -78,7 +83,7 @@ const Homepage: FC<Props> = ({ homepageData }) => {
                     {card.description}
                   </p>
                 </div>
-              </div>
+              </a>
             );
           })}
         </div>
@@ -162,16 +167,18 @@ const ArticleLinkCard: FC<{ title: string; description: string; url: string }> =
   return (
     <a
       href={url}
-      className="col-span-4 group relative transition rounded-medium py-padding-small px-padding-medium bg-light-surface-2 dark:bg-dark-surface-2 hover:bg-light-accent-2 hover:dark:bg-dark-accent-2"
+      className="col-span-4 group flex flex-row transition rounded-medium py-padding-small px-padding-medium bg-light-surface-2 dark:bg-dark-surface-2 hover:bg-light-accent-2 hover:dark:bg-dark-accent-2"
       target="_self"
     >
-      <div className="absolute top-0 right-0 transition z-10 py-padding-small px-padding-medium opacity-0 group-hover:opacity-100">
+      <div className="flex flex-col">
+        <h4 className="transition subheading-2 text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-pink-vibrant dark:group-hover:text-dark-pink-vibrant">
+          {title}
+        </h4>
+        <p className="body-3 text-light-neutral-2 dark:text-dark-neutral-2">{description}</p>
+      </div>
+      <div className="transition opacity-0 group-hover:opacity-100">
         <ArrowRight className="my-1 w-5 h-5" />
       </div>
-      <h4 className="transition subheading-2 text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-pink-vibrant dark:group-hover:text-dark-pink-vibrant">
-        {title}
-      </h4>
-      <p className="body-3 text-light-neutral-2 dark:text-dark-neutral-2">{description}</p>
     </a>
   );
 };

diff --git a/styles/main.css b/styles/main.css
@@ -92,8 +92,6 @@
   }
 
   .article-info-bottom {
-    @apply flex flex-row justify-between items-center pt-margin-mobile sm:pt-padding-x-large;
-
     .article-votes,
     .article-votes-controls {
       @apply flex flex-row items-center;

diff --git a/templates/article_page.hbs b/templates/article_page.hbs
@@ -12,7 +12,7 @@
         </h1>
         <div id='article-body-element' class="article-body my-5">{{article.body}}</div>
       </div>
-      <div class="article-info-bottom py-8">
+      <div class="article-info-bottom space-y-4 sm:space-y-0 py-8 flex flex-col sm:flex-row sm:justify-between items-start sm:items-center pt-margin-mobile sm:pt-padding-x-large">
         {{#with article}}
           <div class="article-votes">
             <h2 class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</h2>

diff --git a/templates/home_page.hbs b/templates/home_page.hbs
@@ -12,35 +12,42 @@
 
   // Handles data for the homepage. If you would like to update any data within homepage, adjust it here.
   const homepageData = {
-    hero: {
+    heros: [{
       headerLine1: 'Need help?',
       headerLine2: 'We got you.',
-    },
+    }, {
+      headerLine1: 'No problem too big.',
+      headerLine2: 'We’re here to help.',
+    }],
     coloredCardsBlock: {
       cards: [
         {
           icon: 'graduationCap', 
           title: 'Read FAQs',
           description: 'Get more information on basic terms and how the Uniswap app works',
           color: 'pink',
+          url: '/hc/en-us/requests/new',
         },
         {
           icon: 'lightbulb', 
           title: 'How to use Uniswap',
           description: 'Get more information on basic terms and how the Uniswap web app works',
           color: 'green',
+          url: '/hc/en-us/requests/new',
         },
         {
           icon: 'helpCircle', 
           title: 'Troubleshoot an issue',
           description: 'Explore our guides for help troubleshooting issues',
           color: 'blue',
+          url: '/hc/en-us/requests/new',
         },
         {
           icon: 'messageQuestion', 
           title: 'Submit a Request',
           description: 'If you’re having trouble you can contact our helpful team',
           color: 'orange',
+          url: '/hc/en-us/requests/new',
         }
       ],
     },