Merge pull request #1905 from cprussin/staking-app-landing-page

feat(staking) implement new landing page designs

Author: cprussin

apps/staking/src/components/AccountSummary/index.tsx

@@ -49,13 +49,13 @@ export const AccountSummary = ({
   availableRewards,
   expiringRewards,
 }: Props) => (
-  <section className="relative w-full overflow-hidden border border-neutral-600/50 bg-pythpurple-800">
+  <section className="relative w-full overflow-hidden sm:border sm:border-neutral-600/50 sm:bg-pythpurple-800">
     <Image
       src={background}
       alt=""
       className="absolute -right-40 hidden h-full object-cover object-right [mask-image:linear-gradient(to_right,_transparent,_black_50%)] md:block"
     />
-    <div className="relative flex flex-col items-start justify-between gap-8 px-6 py-10 sm:gap-16 sm:px-12 sm:py-20 lg:flex-row lg:items-center">
+    <div className="relative flex flex-col items-start justify-between gap-8 sm:px-6 sm:py-10 md:gap-16 md:px-12 md:py-20 xl:flex-row xl:items-center">
       <div>
         <div className="mb-2 inline-block border border-neutral-600/50 bg-neutral-900 px-4 py-1 text-xs text-neutral-400 sm:mb-4">
           Total Balance
@@ -121,7 +121,7 @@ export const AccountSummary = ({
           />
         </div>
       </div>
-      <div className="flex w-full flex-col items-stretch gap-4 lg:w-auto xl:flex-row">
+      <div className="flex w-full flex-row items-stretch gap-4 xl:w-auto">
         <BalanceCategory
           name="Unlocked & Unstaked"
           amount={availableToWithdraw}
@@ -182,7 +182,7 @@ const BalanceCategory = ({
   action,
   warning,
 }: BalanceCategoryProps) => (
-  <div className="flex w-full flex-col justify-between border border-neutral-600/50 bg-pythpurple-800/60 p-6 backdrop-blur lg:w-96">
+  <div className="flex w-full flex-col justify-between border border-neutral-600/50 bg-pythpurple-800/60 p-6 backdrop-blur xl:w-96">
     <div>
       <div className="mb-4 inline-block border border-neutral-600/50 bg-neutral-900 px-4 py-1 text-xs text-neutral-400">
         {name}

apps/staking/src/components/Button/index.tsx

@@ -53,7 +53,7 @@ export const LinkButton = ({
 
 const baseClassName = (props: VariantProps) =>
   clsx(
-    "border border-pythpurple-600 hover:bg-pythpurple-600/60 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
+    "border border-pythpurple-600 transition duration-100 hover:bg-pythpurple-600/60 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400",
     variantClassName(props.variant),
     sizeClassName(props.size),
   );
@@ -75,7 +75,7 @@ const sizeClassName = (size: VariantProps["size"]) => {
       return "text-sm px-2 sm:px-3 py-1";
     }
     case "nopad": {
-      return "px-0 py-0";
+      return "";
     }
     case "noshrink": {
       return "px-8 py-2";

apps/staking/src/components/Footer/index.tsx

@@ -7,6 +7,7 @@ import LinkedIn from "./linkedin.svg";
 import Telegram from "./telegram.svg";
 import X from "./x.svg";
 import Youtube from "./youtube.svg";
+import Logo from "../Header/logo.svg";
 import { Link } from "../Link";
 import { MaxWidth } from "../MaxWidth";
 
@@ -37,21 +38,26 @@ export const Footer = ({
 }: Omit<HTMLAttributes<HTMLElement>, "children">) => (
   <footer
     className={clsx(
-      "sticky bottom-0 mt-4 text-xs font-light text-neutral-400 sm:px-4",
+      "mt-4 text-xs font-light sm:sticky sm:bottom-0 sm:px-4",
       className,
     )}
     {...props}
   >
     <div className="border-t border-neutral-600/50 bg-pythpurple-800 sm:border-x">
-      <MaxWidth className="flex h-16 items-center justify-between sm:-mx-4">
-        <div>© 2024 Pyth Data Association</div>
-        <div className="relative -right-3 flex h-full items-center">
+      <MaxWidth className="flex flex-col items-center gap-10 py-8 sm:-mx-4 sm:h-16 sm:flex-row sm:justify-between">
+        <div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4 md:gap-8">
+          <Link href="https://www.pyth.network" target="_blank">
+            <Logo className="h-10 sm:h-8" />
+          </Link>
+          <div>© 2024 Pyth Data Association</div>
+        </div>
+        <div className="relative flex h-full items-center sm:-right-3">
           {SOCIAL_LINKS.map(({ name, icon: Icon, href }) => (
             <Link
               target="_blank"
               href={href}
               key={name}
-              className="grid h-full place-content-center px-2 hover:text-pythpurple-400 sm:px-3"
+              className="grid h-full place-content-center px-3 hover:text-pythpurple-400"
               rel="noreferrer"
             >
               <Icon className="size-4" />

apps/staking/src/components/Home/index.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useWalletModal } from "@solana/wallet-adapter-react-ui";
-import { useCallback } from "react";
 import { useIsSSR } from "react-aria";
 
 import {
@@ -13,10 +11,10 @@ import {
   StateType as DashboardDataStateType,
   useData,
 } from "../../hooks/use-data";
-import { Button } from "../Button";
 import { Dashboard } from "../Dashboard";
 import { Error as ErrorPage } from "../Error";
 import { Loading } from "../Loading";
+import { NoWalletHome } from "../NoWalletHome";
 
 export const Home = () => {
   const isSSR = useIsSSR();
@@ -45,29 +43,6 @@ const MountedHome = () => {
   }
 };
 
-const NoWalletHome = () => {
-  const modal = useWalletModal();
-  const showModal = useCallback(() => {
-    modal.setVisible(true);
-  }, [modal]);
-
-  return (
-    <main className="my-20">
-      <h1 className="mb-8 mt-16 text-center text-4xl font-semibold text-pythpurple-400">
-        Staking & Delegating
-      </h1>
-      <p className="mx-auto mb-8 max-w-prose text-center">
-        The Pyth staking program allows you to stake tokens to participate in
-        governance, or to earn yield and protect DeFi by delegating to
-        publishers.
-      </p>
-      <div className="grid w-full place-content-center">
-        <Button onPress={showModal}>Connect your wallet to participate</Button>
-      </div>
-    </main>
-  );
-};
-
 type StakeAccountLoadedHomeProps = {
   api: States[ApiStateType.Loaded] | States[ApiStateType.LoadedNoStakeAccount];
 };