Merge pull request #14 from oxen-io/fix/web-191/hero_header_layout

Improved landing page hero and header responsiveness #10 Continued
oxen-io · Jul 9, 2024 · 2ff242a · 2ff242a
2 parents 99051cf + 8998740
commit 2ff242a
Show file tree

Hide file tree

Showing 27 changed files with 707 additions and 122 deletions.
diff --git a/apps/staking/.vscode/snippets.code-snippets b/apps/staking/.vscode/snippets.code-snippets
@@ -0,0 +1,20 @@
+{
+  // Place your session-website workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+  // Placeholders with the same ids are connected.
+  "cn Class Definition": {
+    "scope": "typescriptreact",
+    "prefix": ["cl", "class"],
+    "body": ["className={cn('$0')}"],
+    "description": "Define classes using cn package",
+  },
+  "cn to existing Class Definition": {
+    "scope": "typescriptreact",
+    "prefix": ["cn"],
+    "body": ["cn($0'')"],
+    "description": "Define classes using cn package when className is already defined",
+  },
+}
diff --git a/apps/staking/app/page.tsx b/apps/staking/app/page.tsx
@@ -1,5 +1,7 @@
+import { Footer } from '@/components/Footer';
 import { URL } from '@/lib/constants';
 import { ButtonDataTestId } from '@/testing/data-test-ids';
+import { cn } from '@session/ui/lib/utils';
 import { Button } from '@session/ui/ui/button';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
@@ -8,55 +10,78 @@ import Link from 'next/link';
 export default function LandingPage() {
   const dictionary = useTranslations('home');
   return (
-    <div className="-mt-header-displacement max-w-screen-3xl mx-auto flex h-dvh w-screen flex-col-reverse items-center justify-around py-16 align-middle lg:grid lg:grid-cols-2 lg:p-32 lg:py-0">
-      <div className="flex flex-col gap-10 align-middle">
-        <h1 className="max-w-[700px] px-10 text-center text-5xl font-medium lg:px-0 lg:text-left lg:text-7xl 2xl:text-8xl">
-          {dictionary.rich('title')}
-        </h1>
-        <div className="hidden gap-4 lg:flex lg:flex-row lg:justify-start">
-          <Link href="/stake" prefetch>
-            <Button size="lg" data-testid={ButtonDataTestId.Home_Run_Node} className="uppercase">
-              {dictionary('buttons.primary')}
-            </Button>
-          </Link>
-          <Link href={URL.SESSION_NODE_DOCS} target="_blank">
-            <Button
-              size="lg"
-              variant="outline"
-              data-testid={ButtonDataTestId.Home_Run_Node}
-              className="uppercase"
-            >
-              {dictionary('buttons.secondary')}
-            </Button>
-          </Link>
+    <div className={cn('mx-auto flex flex-col items-center justify-center overflow-hidden')}>
+      <div
+        className={cn(
+          'max-w-screen-3xl flex h-dvh w-screen flex-col-reverse items-center justify-around py-16 align-middle',
+          'md:-mt-header-displacement',
+          'lg:grid lg:grid-cols-2 lg:p-8 lg:py-0',
+          'xl:p-32'
+        )}
+      >
+        <div
+          className={cn(
+            'flex flex-col gap-10 align-middle',
+            'md:-mt-header-displacement',
+            'lg:mt-0'
+          )}
+        >
+          <h1
+            className={cn(
+              'w-full max-w-[700px] px-8 text-center text-4xl font-medium',
+              'sm:text-5xl',
+              'md:px-10 md:text-5xl',
+              'lg:px-0 lg:text-start lg:text-7xl',
+              'xl:pe-10 xl:ps-0',
+              '2xl:text-8xl'
+            )}
+          >
+            {dictionary.rich('title')}
+          </h1>
+          <div className="flex flex-row flex-wrap items-center justify-center gap-4 lg:flex-nowrap lg:justify-start">
+            <Link href="/stake" prefetch className="lg:hidden">
+              <Button size="sm" data-testid={ButtonDataTestId.Home_Run_Node} className="uppercase">
+                {dictionary('buttons.primary')}
+              </Button>
+            </Link>
+            <Link href={URL.SESSION_NODE_DOCS} target="_blank" className="lg:hidden">
+              <Button
+                size="sm"
+                variant="outline"
+                data-testid={ButtonDataTestId.Home_Run_Node}
+                className="uppercase"
+              >
+                {dictionary('buttons.secondary')}
+              </Button>
+            </Link>
+            <Link href="/stake" prefetch className="hidden lg:inline">
+              <Button size="lg" data-testid={ButtonDataTestId.Home_Run_Node} className="uppercase">
+                {dictionary('buttons.primary')}
+              </Button>
+            </Link>
+            <Link href={URL.SESSION_NODE_DOCS} target="_blank" className="hidden lg:inline">
+              <Button
+                size="lg"
+                variant="outline"
+                data-testid={ButtonDataTestId.Home_Run_Node}
+                className="uppercase"
+              >
+                {dictionary('buttons.secondary')}
+              </Button>
+            </Link>
+          </div>
         </div>
-        <div className="flex flex-col-reverse items-center justify-center gap-4 lg:hidden">
-          <Link href="/stake" prefetch>
-            <Button size="sm" data-testid={ButtonDataTestId.Home_Run_Node} className="uppercase">
-              {dictionary('buttons.primary')}
-            </Button>
-          </Link>
-          <Link href={URL.SESSION_NODE_DOCS} target="_blank">
-            <Button
-              size="sm"
-              variant="outline"
-              data-testid={ButtonDataTestId.Home_Run_Node}
-              className="uppercase"
-            >
-              {dictionary('buttons.secondary')}
-            </Button>
-          </Link>
+        <div className="flex max-w-[50vh] items-center justify-center align-middle lg:max-w-full">
+          <Image
+            src="/images/cube.png"
+            alt={dictionary('heroImageAlt')}
+            height={1024}
+            width={1024}
+            priority
+          />
         </div>
       </div>
-      <div className="flex max-w-[50vh] items-center justify-center align-middle lg:max-w-full">
-        <Image
-          src="/images/cube.png"
-          alt={dictionary('heroImageAlt')}
-          height={1024}
-          width={1024}
-          priority
-        />
-      </div>
+      <Footer />
     </div>
   );
 }
diff --git a/apps/staking/components/Footer.tsx b/apps/staking/components/Footer.tsx
@@ -0,0 +1,28 @@
+import { EXTERNAL_ROUTES, ROUTES, SOCIALS } from '@/lib/constants';
+import { Footer as FooterComp } from '@session/ui/components/Footer';
+import { cn } from '@session/ui/lib/utils';
+
+import { useTranslations } from 'next-intl';
+export function Footer() {
+  const dictionary = useTranslations('navigation');
+
+  const menuItems = [...ROUTES, ...EXTERNAL_ROUTES].map(
+    ({ dictionaryKey, href, linkType = 'internal' }) => ({
+      title: dictionary(dictionaryKey),
+      href: href,
+      linkType,
+    })
+  );
+
+  const socialLinks = Object.values(SOCIALS);
+
+  return (
+    <FooterComp
+      logo={{ src: '/images/logo.png', alt: 'Session Token Logo' }}
+      menuItems={menuItems}
+      socialLinks={socialLinks}
+      footerManagedBy={dictionary('managedBy')}
+      className={cn('max-w-screen-3xl my-16 w-full px-8')}
+    />
+  );
+}
diff --git a/apps/staking/components/Header.tsx b/apps/staking/components/Header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { LocaleKey } from '@/lib/locale-util';
+import { EXTERNAL_ROUTES, ROUTES } from '@/lib/constants';
 import { ButtonDataTestId } from '@/testing/data-test-ids';
 import { HamburgerIcon } from '@session/ui/icons/HamburgerIcon';
 import { cn } from '@session/ui/lib/utils';
@@ -19,16 +19,6 @@ import { usePathname } from 'next/navigation';
 import { WalletModalButtonWithLocales } from './WalletModalButtonWithLocales';
 import { WalletNetworkDropdownWithLocales } from './WalletNetworkDropdownWithLocales';
 
-type LinkItem = {
-  href: string;
-  dictionaryKey: keyof Omit<LocaleKey['navigation'], 'hamburgerDropdown'>;
-};
-
-const links: LinkItem[] = [
-  { dictionaryKey: 'stake', href: '/stake' },
-  { dictionaryKey: 'myStakes', href: '/mystakes' },
-] as const;
-
 type NavLinkProps = {
   href: string;
   pathname: string;
@@ -55,20 +45,20 @@ export default function Header() {
   const dictionary = useTranslations('navigation');
   const pathname = usePathname();
   return (
-    <nav className="flex flex-wrap items-center justify-between p-6">
-      <div className="flex flex-row gap-10">
+    <nav className="flex items-center justify-between p-6">
+      <div className={cn('flex flex-row gap-10 pr-4')}>
         <Link href="/">
           <Image src="/images/logo.png" alt="Session Token Logo" width={150} height={150} />
         </Link>
-        <div className="hidden flex-row gap-10 md:flex">
-          {links.map(({ dictionaryKey, href }) => (
+        <div className="hidden flex-row gap-10 lg:flex">
+          {ROUTES.map(({ dictionaryKey, href }) => (
             <NavLink key={href} href={href} label={dictionary(dictionaryKey)} pathname={pathname} />
           ))}
         </div>
       </div>
-      <div className="flex flex-row justify-end gap-2">
+      <div className="flex flex-row items-center justify-end gap-2">
         <WalletModalButtonWithLocales />
-        {isConnected ? <WalletNetworkDropdownWithLocales className="hidden md:flex" /> : null}
+        {isConnected ? <WalletNetworkDropdownWithLocales className="hidden lg:flex" /> : null}
         <DropdownHamburgerMenu />
       </div>
     </nav>
@@ -92,43 +82,31 @@ function DropdownHamburgerMenu() {
       <DropdownMenuTrigger asChild>
         <Button
           data-testid={ButtonDataTestId.Dropdown_Hamburger_Menu}
-          className="group px-1 py-0"
+          className="group p-0"
           aria-label={dictionary('ariaLabel')}
           variant="outline"
         >
           <HamburgerIcon className="stroke-session-green group-hover:stroke-session-black h-9 w-9" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-max">
-        <DropdownMenuItem
-          onClick={() => console.log('lang')}
-          aria-label={dictionary('ariaLanguage')}
-        >
-          {dictionary('language')}
-        </DropdownMenuItem>
-        {links.map(({ dictionaryKey, href }) => (
+        {ROUTES.map(({ dictionaryKey, href }) => (
+          <DropdownMenuItemNavLink
+            key={href}
+            href={href}
+            label={navDictionary(dictionaryKey)}
+            pathname={pathname}
+            className="block lg:hidden"
+          />
+        ))}
+        {EXTERNAL_ROUTES.map(({ dictionaryKey, href }) => (
           <DropdownMenuItemNavLink
             key={href}
             href={href}
             label={navDictionary(dictionaryKey)}
             pathname={pathname}
-            className="block md:hidden"
           />
         ))}
-        <DropdownMenuItemNavLink
-          href="/support"
-          ariaLabel={dictionary('ariaSupport')}
-          pathname={pathname}
-        >
-          {dictionary('support')}
-        </DropdownMenuItemNavLink>
-        <DropdownMenuItemNavLink
-          href="/faucet"
-          ariaLabel={dictionary('ariaFaucet')}
-          pathname={pathname}
-        >
-          {dictionary('faucet')}
-        </DropdownMenuItemNavLink>
       </DropdownMenuContent>
     </DropdownMenu>
   );

diff --git a/apps/staking/lib/constants.ts b/apps/staking/lib/constants.ts
@@ -1,14 +1,15 @@
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values */
 
 import { CHAIN } from '@session/contracts/chains';
+import { Social, SocialLink } from '@session/ui/components/SocialLinkList';
+import { LocaleKey } from './locale-util';
 
 /** TODO - Change this to MAINNET when we launch mainnet */
 export const preferredChain = CHAIN.TESTNET as const;
 
 export enum URL {
   ARB_SEP_FAUCET = 'https://faucet.quicknode.com/arbitrum/sepolia',
   SESSION_NODE_DOCS = 'https://docs.getsession.org/session-nodes',
-  DISCORD_INVITE = 'https://discord.com/invite/J5BTQdCfXN',
   INCENTIVE_PROGRAM = 'https://token.getsession.org/testnet-incentive-program',
   LEARN_MORE_DAILY_REWARDS = 'https://docs.getsession.org/',
   LEARN_MORE_TOTAL_REWARDS = 'https://docs.getsession.org/',
@@ -22,6 +23,15 @@ export enum COMMUNITY_DATE {
   OXEN_SERVICE_NODE_BONUS_PROGRAM = '2024-06-12',
 }
 
+export const SOCIALS: Partial<Record<Social, SocialLink>> = {
+  [Social.Discord]: { name: Social.Discord, link: 'https://discord.com/invite/J5BTQdCfXN' },
+  [Social.X]: { name: Social.X, link: 'https://x.com/session_token' },
+  [Social.Youtube]: { name: Social.Youtube, link: 'https://www.youtube.com/@sessiontv' },
+  [Social.Session]: { name: Social.Session, link: 'https://getsession.org/' },
+  [Social.Github]: { name: Social.Github, link: 'https://github.com/oxen-io/websites' },
+  [Social.RSS]: { name: Social.RSS, link: 'https://token.getsession.org/blog/feed' },
+};
+
 export enum FAUCET {
   MIN_ETH_BALANCE = 0.01,
   DRIP = 240,
@@ -46,3 +56,21 @@ export enum NETWORK {
   MAINNET = 'Mainnet',
   TESTNET = 'Testnet',
 }
+
+type LinkItem = {
+  href: string;
+  dictionaryKey: keyof Omit<LocaleKey['navigation'], 'hamburgerDropdown'>;
+  linkType?: 'internal' | 'external';
+};
+
+export const ROUTES: LinkItem[] = [
+  { dictionaryKey: 'stake', href: '/stake' },
+  { dictionaryKey: 'myStakes', href: '/mystakes' },
+  { dictionaryKey: 'faucet', href: '/faucet' },
+] as const;
+
+export const EXTERNAL_ROUTES: LinkItem[] = [
+  { dictionaryKey: 'tokenSite', href: 'https://token.getsession.org', linkType: 'external' },
+  { dictionaryKey: 'support', href: '/support', linkType: 'external' },
+  { dictionaryKey: 'docs', href: 'https://docs.getsession.org', linkType: 'external' },
+] as const;
diff --git a/apps/staking/locales/en.json b/apps/staking/locales/en.json
@@ -15,6 +15,7 @@
     "stake": "Stake Now",
     "myStakes": "My Stakes",
     "docs": "Docs",
+    "tokenSite": "Session Token",
     "support": "Support",
     "faucet": "Faucet",
     "hamburgerDropdown": {
@@ -25,7 +26,8 @@
       "ariaSupport": "Go to support page",
       "faucet": "Faucet",
       "ariaFaucet": "Go to faucet page"
-    }
+    },
+    "managedBy": "/ Managed by the Session Network"
   },
   "wallet": {
     "modalButton": {

diff --git a/apps/staking/next.config.mjs b/apps/staking/next.config.mjs
@@ -27,6 +27,15 @@ const nextConfig = {
     config.externals.push('pino-pretty', 'lokijs', 'encoding');
     return config;
   },
+  redirects: async () => {
+    return [
+      {
+        source: '/support',
+        destination: 'https://discord.com/invite/J5BTQdCfXN',
+        permanent: false,
+      },
+    ];
+  },
   rewrites: async () => {
     return [
       {

diff --git a/apps/staking/package.json b/apps/staking/package.json
@@ -28,6 +28,7 @@
     "react-hook-form": "^7.51.5",
     "rtl-detect": "^1.1.2",
     "server-only": "^0.0.1",
+    "sharp": "0.32.6",
     "wagmi": "2.9.10",
     "zod": "^3.23.8"
   },