mrgnlabs · chambaz · Nov 11, 2024 · Oct 26, 2024 · Oct 26, 2024 · Oct 26, 2024
@@ -27,8 +27,8 @@
     "@mrgnlabs/marginfi-client-v2": "*",
     "@mrgnlabs/marginfi-v2-ui-state": "*",
     "@mrgnlabs/mrgn-common": "*",
-    "@mrgnlabs/mrgn-utils": "*",
     "@mrgnlabs/mrgn-ui": "*",
+    "@mrgnlabs/mrgn-utils": "*",
     "@mui/material": "^5.15.11",
     "@next/bundle-analyzer": "^13.4.19",
     "@next/font": "13.1.1",

@@ -5,25 +5,29 @@ type MrgnProps = {
 };
 
 export const Meta = ({ path }: MrgnProps) => {
-  const title = `marginfi ${path !== "/" ? ` - ${path.substring(1)}` : ""}`;
+  const customPages: Record<string, { title: string; description: string }> = {
+    "/": {
+      title: "High-Yield DeFi Staking, Borrowing & Lending | Earn More with marginfi",
+      description:
+        "Earn high yields with marginfi&apos;s DeFi staking and lending using SOL, USDC, USDT, and more. Borrow assets, compound returns, and access instant liquidity in just a few clicks.",
+    },
+    "/stake": {
+      title: "Self-Custody DeFi Staking for SOL, USDC & More | Hedge Against Inflation with marginfi",
+      description:
+        "Unlock high-yield staking with DeFi on marginfi. Stake your assets, hedge against inflation, and earn yield safely and securely.",
+    },
+  };
+  const title = customPages[path]
+    ? customPages[path].title
+    : `marginfi ${path !== "/" ? ` - ${path.substring(1)}` : ""}`;
+  const description = customPages[path] ? customPages[path].description : null;
   return (
     <Head>
       <title>{title}</title>
-
-      {path === "/" && (
-        <>
-          <meta name="description" content="marginfi is a decentralized lending and borrowing protocol on Solana." />
-          <meta
-            property="og:description"
-            content="marginfi is a decentralized lending and borrowing protocol on Solana."
-          />
-          <meta
-            name="twitter:description"
-            content="marginfi is a decentralized lending and borrowing protocol on Solana."
-          />
-        </>
-      )}
       <meta property="og:title" content={title} />
+      {description && <meta name="description" content={description} />}
+      {description && <meta property="og:description" content={description} />}
+      {description && <meta name="twitter:description" content={description} />}
       <meta property="og:url" content="https://app.marginfi.com" />
       <meta property="og:type" content="website" />
       <meta property="og:image" content="https://app.marginfi.com/marginfi-cover-1200x630.jpg" />

@@ -1,7 +1,9 @@
 import Link from "next/link";
+import { cn } from "@mrgnlabs/mrgn-utils";
 
 interface PageHeadingProps {
   heading: string | JSX.Element;
+  size?: "md" | "lg";
   body?: JSX.Element;
   links?: {
     href: string;
@@ -10,11 +12,16 @@ interface PageHeadingProps {
   button?: JSX.Element;
 }
 
-export const PageHeading = ({ heading, body, links, button }: PageHeadingProps) => {
+export const PageHeading = ({ heading, body, links, button, size = "md" }: PageHeadingProps) => {
   return (
-    <div className="text-muted-foreground text-base md:text-lg text-center px-2 pt-4 pb-12 md:pt-0 md:px-0 space-y-3">
-      <h1 className="text-4xl font-medium text-primary">{heading}</h1>
-      <div className="max-w-2xl w-full mx-auto">{body}</div>
+    <div
+      className={cn(
+        "text-muted-foreground text-center px-8 pt-4 pb-6 text-base space-y-4 md:pb-12 md:pt-0 md:px-0",
+        size === "lg" ? "md:text-xl md:space-y-6" : "md:text-lg"
+      )}
+    >
+      <h1 className={cn("font-medium text-primary text-4xl", size === "lg" && "md:text-5xl")}>{heading}</h1>
+      <div className={cn("w-full mx-auto leading-relaxed", size === "lg" ? "max-w-[51rem]" : "max-w-2xl")}>{body}</div>
 
       {links && links.length > 0 && (
         <ul className="flex items-center gap-4 justify-center pt-2">