Skip to content

Commit

Permalink
feat: added footer to landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@yougotwill
yougotwill committed Jul 5, 2024
1 parent eb60c58 commit fa2bff5
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 67 deletions.
117 changes: 65 additions & 52 deletions apps/staking/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Footer } from '@/components/Footer';
import { URL } from '@/lib/constants';
import { ButtonDataTestId } from '@/testing/data-test-ids';
import { cn } from '@session/ui/lib/utils';
Expand All @@ -9,65 +10,77 @@ import Link from 'next/link';
export default function LandingPage() {
const dictionary = useTranslations('home');
return (
<div
className={cn(
'max-w-screen-3xl mx-auto 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('mx-auto flex flex-col items-center justify-center')}>
<div
className={cn('flex flex-col gap-10 align-middle', 'md:-mt-header-displacement', 'lg:mt-0')}
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'
)}
>
<h1
<div
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'
'flex flex-col gap-10 align-middle',
'md:-mt-header-displacement',
'lg:mt-0'
)}
>
{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>
<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 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}
/>
</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} />
</div>
<Footer />
</div>
);
}
25 changes: 25 additions & 0 deletions apps/staking/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { 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.map(({ dictionaryKey, href }) => ({
title: dictionary(dictionaryKey),
href: href,
}));

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')}
/>
);
}
16 changes: 3 additions & 13 deletions apps/staking/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import type { LocaleKey } from '@/lib/locale-util';
import { 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';
Expand All @@ -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;
Expand Down Expand Up @@ -61,7 +51,7 @@ export default function Header() {
<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 }) => (
{ROUTES.map(({ dictionaryKey, href }) => (
<NavLink key={href} href={href} label={dictionary(dictionaryKey)} pathname={pathname} />
))}
</div>
Expand Down Expand Up @@ -108,7 +98,7 @@ function DropdownHamburgerMenu() {
>
{dictionary('language')}
</DropdownMenuItem>
{links.map(({ dictionaryKey, href }) => (
{ROUTES.map(({ dictionaryKey, href }) => (
<DropdownMenuItemNavLink
key={href}
href={href}
Expand Down
22 changes: 21 additions & 1 deletion apps/staking/lib/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -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/',
Expand All @@ -28,3 +29,22 @@ export enum NETWORK {
MAINNET = 'Mainnet',
TESTNET = 'Testnet',
}

type LinkItem = {
href: string;
dictionaryKey: keyof Omit<LocaleKey['navigation'], 'hamburgerDropdown'>;
};

export const ROUTES: LinkItem[] = [
{ dictionaryKey: 'stake', href: '/stake' },
{ dictionaryKey: 'myStakes', href: '/mystakes' },
] as const;

export const SOCIALS: Partial<Record<Social, SocialLink>> = {
[Social.Discord]: { name: Social.Discord, link: 'https://discord.com/invite/J5BTQdCfXN' },
[Social.Github]: { name: Social.Github, link: 'https://github.com/oxen-io/websites' },
[Social.RSS]: { name: Social.RSS, link: 'https://token.getsession.org/blog/feed' },
[Social.Session]: { name: Social.Session, link: 'https://getsession.org/' },
[Social.X]: { name: Social.X, link: 'https://x.com/session_token' },
[Social.Youtube]: { name: Social.Youtube, link: 'https://www.youtube.com/@sessiontv' },
};
3 changes: 2 additions & 1 deletion apps/staking/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
"ariaSupport": "Go to support page",
"faucet": "Faucet",
"ariaFaucet": "Go to faucet page"
}
},
"managedBy": "/ Managed by the Session Network"
},
"wallet": {
"modalButton": {
Expand Down

0 comments on commit fa2bff5

Please sign in to comment.