feat: add hero section to api pricing page

See: FE-108

Author: enzo-bitfly

frontend/i18n/locales/en.json

@@ -1136,7 +1136,13 @@
         "yearly": "Yearly"
     },
     "products": {
-        "api": "API",
+        "api": {
+            "hero": {
+                "subtitle": "Power your apps with unified blockchain data—access real-time and historical insights across execution and consensus layers.",
+                "title": "Simple, Transparent Pricing"
+            },
+            "name": "API"
+        },
         "explorer": "Explorer",
         "landing_page": {
             "api": {

frontend/layers/base/app/assets/css/main.css

@@ -127,7 +127,8 @@
 
   --text-4xl: 2rem; /* 32px */
   --text-4xl--line-height: 3rem; /* 48px */
-
+  --text-5xl: 2.5rem; /* 40px */
+  --text-5xl--line-height: 3.75rem; /* 44px */
   --text-6xl: 3rem; /* 48px */
   --text-6xl--line-height: 3.5rem; /* 56px */
 }

frontend/layers/base/app/components/BaseHeading.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-export type BaseHeadings = 'h2' | 'h3' | 'h4'
-
+export type BaseHeadings = 'h1' | 'h2' | 'h3' | 'h4'
 defineProps<{
   is: BaseHeadings,
   size:
     | '2xl'
     | 'lg'
     | 'md'
+    | 'xl'
     | 'xs'
     | 'xxs',
 }>()
@@ -18,6 +18,7 @@ defineProps<{
     class="font-bold text-balance"
     :class="[
       size === '2xl' && 'text-6xl tracking-[-.09rem]',
+      size === 'xl' && 'text-5xl tracking-[-.075rem]',
       size === 'lg' && 'text-4xl tracking-[-.05rem]',
       size === 'xs' && 'text-xl tracking-[-0.0063rem]',
       size === 'xxs' && 'text-md',

frontend/layers/base/app/components/BaseText.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 const {
+  fontWeight = 'normal',
   is = 'span',
   size = 'md',
 } = defineProps<{
+  fontWeight?: 'bold' | 'normal',
   is?:
     | 'div'
     | 'p'
     | 'span',
   size?:
     | '2xl'
+    | 'md'
     | 'sm',
   variant?: 'secondary',
 }>()
@@ -20,8 +23,10 @@ const {
     class=""
     :class="[
       size === 'sm' && 'text-sm',
+      size === 'md' && 'text-md',
       size === '2xl' && 'text-2xl',
       variant === 'secondary' && 'dark:text-gray-400 text-gray-600',
+      fontWeight === 'bold' && 'font-bold',
     ]"
   >
     <slot />

frontend/layers/base/app/components/TheFooter.vue

@@ -11,7 +11,7 @@ const { t: $t } = useTranslation()
 
 const productLinks: Link[] = [
   {
-    href: '/products/api/docs', icon: 'file-code', text: $t('products.api'),
+    href: '/products/api/docs', icon: 'file-code', text: $t('products.api.name'),
   },
   {
     href: '/dashboard', icon: 'coins', text: $t('products.staking_hub'),

frontend/layers/products/app/pages/products/index.vue

@@ -12,7 +12,7 @@ const id = {
 const items: BaseNavigationItem[] = [
   {
     icon: 'file-code-2',
-    label: $t('products.api'),
+    label: $t('products.api.name'),
     to: `#${id.api}`,
   },
   {

frontend/layers/products/app/pages/products/pricing.vue

@@ -8,7 +8,7 @@ const isOpen = ref(false)
 const items: BaseNavigationItem[] = [
   {
     icon: 'file-code-2',
-    label: $t('products.api'),
+    label: $t('products.api.name'),
     to: '/product#api',
   },
   {
@@ -47,7 +47,27 @@ const faqItems = tm('items') ?? []
           @close="isOpen = false"
         />
       </template>
-      <ProductLandingpageSection v-if="faqItems.length">
+      <ProductLandingpageSection class="mt-11xl">
+        <BaseHeading
+          is="h1"
+          size="xl"
+          class="text-center"
+        >
+          {{ $t('products.api.hero.title') }}
+        </BaseHeading>
+        <BaseText
+          is="p"
+          size="2xl"
+          font-weight="bold"
+          class="container text-center sm:text-balance"
+        >
+          {{ $t('products.api.hero.subtitle') }}
+        </BaseText>
+      </ProductLandingpageSection>
+      <ProductLandingpageSection
+        v-if="faqItems.length"
+        class="mt-11xl"
+      >
         <LazyProductPricingSectionFAQ
           :items="faqItems"
         />