feat(APP-3648): Improve Explore page hero section + layout

index.html

@@ -27,6 +27,10 @@
     <meta name="app-version" content="%VITE_REACT_APP_DEPLOY_VERSION%" />
 
     <link href="./styles.css" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Sora:wght@400&display=swap"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap"
       rel="stylesheet"

src/assets/locales/en/common.json

@@ -32,7 +32,7 @@
     "subtitle": "Go back to explorer page"
   },
   "navButtons": {
-    "connectWallet": "Connect wallet",
+    "connectWallet": "Connect",
     "giveFeedback": "Give feedback"
   },
   "labels": {
@@ -1010,8 +1010,8 @@
   },
   "explore": {
     "hero": {
-      "title": "Explore the DAO World",
-      "subtitle1": "Build your DAO, explore communities, and find inspiration for your project all in one place."
+      "title": "Governed on Aragon",
+      "subtitle1": "Explore the organizations using our modular governance stack to secure their onchain governance."
     },
     "explorer": {
       "title": "Explore DAOs",
@@ -1038,6 +1038,10 @@
       "linkLabel": "Learn about DAOs",
       "linkURL": "https://aragon.org/education-portal"
     },
+    "build": {
+      "linkLabel": "Build faster",
+      "linkURL": "https://docs.aragon.org"
+    },
     "toggleFilter": {
       "Favourites": "Following",
       "allDAOs": "All DAOs ",
@@ -1128,19 +1132,19 @@
   },
   "cta": {
     "create": {
-      "title": "Create your DAO",
-      "description": "Mint tokens, set governance parameters, and deploy your DAO on-chain in minutes with our no-code setup process.",
+      "title": "Create",
+      "description": "Easily deploy a new DAO on Aragon OSx in minutes with our simple, no-code deployment wizard.",
       "actionLabel": "Create a DAO"
     },
     "learn": {
-      "title": "Learn about DAOs",
-      "description": "Find inspiration and learn about DAOs in our education portal designed for builders at every stage of the journey.",
+      "title": "Learn",
+      "description": "Master onchain governance with our Resource Library's case studies, guides, and expert insights into Aragon OSx.",
       "actionLabel": "Learn about DAOs"
     },
     "build": {
-      "title": "Build faster",
-      "description": "Use our governance plugins to build a DAO, dApp, or anything you can imagine on the Aragon OSx protocol.",
-      "actionLabel": "Coming soon"
+      "title": "Build",
+      "description": "Take the DIY approach: build Aragon OSx plugins or your own application using our Governance UI Kit and App Template.",
+      "actionLabel": "Build a custom DAO"
     },
     "404": {
       "titleLine1": "Oh no,",

src/components/ctaCard/data.ts

@@ -14,6 +14,7 @@ const CTACards = [
     imgSrc: createDaoImg,
     subtitle: i18n.t('cta.create.description'),
     title: i18n.t('cta.create.title'),
+    isPrimary: true,
   },
   {
     actionAvailable: true,
@@ -22,14 +23,16 @@ const CTACards = [
     imgSrc: learnImg,
     subtitle: i18n.t('cta.learn.description'),
     title: i18n.t('cta.learn.title'),
+    isPrimary: false,
   },
   {
-    actionAvailable: false,
+    actionAvailable: true,
     actionLabel: i18n.t('cta.build.actionLabel'),
-    path: '',
+    path: i18n.t('explore.build.linkURL'),
     imgSrc: buildFaster,
     subtitle: i18n.t('cta.build.description'),
     title: i18n.t('cta.build.title'),
+    isPrimary: false,
   },
 ];
 

src/components/ctaCard/index.tsx

@@ -13,6 +13,7 @@ type Props = {
   onClick: (path: string) => void;
   subtitle: string;
   title: string;
+  isPrimary: boolean;
 };
 
 const CTACard: React.FC<Props> = props => {
@@ -27,10 +28,10 @@ const CTACard: React.FC<Props> = props => {
       </Content>
 
       <Button
-        variant={props.actionAvailable ? 'primary' : 'tertiary'}
-        size="lg"
+        variant={props.isPrimary ? 'primary' : 'secondary'}
+        size="md"
         disabled={!props.actionAvailable}
-        onClick={() => props.onClick(props.path)}
+        href={props.path}
         className={`${!isDesktop && 'w-full'}`}
       >
         {props.actionLabel}
@@ -43,11 +44,8 @@ export default CTACard;
 
 const CTACardWrapper = styled.div.attrs({
   className:
-    'flex flex-col xl:items-start items-center p-6 space-y-6 rounded-xl relative xl:m-0 mb-6 mx-2' as string,
-})`
-  background: rgba(255, 255, 255, 0.68);
-  backdrop-filter: blur(50px);
-`;
+    'bg-neutral-0 flex flex-col xl:items-start items-center p-6 space-y-6 rounded-xl relative xl:m-0 mb-6 mx-2 shadow-neutral',
+})``;
 
 const Content = styled.div.attrs({
   className: 'flex xl:items-start items-center flex-col xl:m-0 mb-6',