diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index 19a6e8c..2765c6b 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.json @@ -20,6 +20,7 @@ "react/jsx-no-target-blank": "off", "no-extra-boolean-cast": "off", "prefer-const": "warn", + "@next/next/no-img-element": "off", "no-restricted-imports": ["warn", { "patterns": ["process"] }] } } diff --git a/frontend/package.json b/frontend/package.json index ae704f9..bbdc82d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "dependencies": { "@azns/resolver-core": "^1.6.0", "@azns/resolver-react": "^1.6.0", + "@heroicons/react": "^2.1.1", "@hookform/resolvers": "^3.3.2", "@inkathon/contracts": "workspace:*", "@polkadot/api": "^10.11.2", diff --git a/frontend/public/vectors/arrow.svg b/frontend/public/vectors/arrow.svg new file mode 100644 index 0000000..eeefbcb --- /dev/null +++ b/frontend/public/vectors/arrow.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/frontend/public/vectors/bg.svg b/frontend/public/vectors/bg.svg new file mode 100644 index 0000000..8b5781b --- /dev/null +++ b/frontend/public/vectors/bg.svg @@ -0,0 +1,1552 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/vectors/confirm.svg b/frontend/public/vectors/confirm.svg new file mode 100644 index 0000000..860febd --- /dev/null +++ b/frontend/public/vectors/confirm.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/vectors/logo.svg b/frontend/public/vectors/logo.svg new file mode 100644 index 0000000..3f96292 --- /dev/null +++ b/frontend/public/vectors/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/frontend/public/vectors/pay.svg b/frontend/public/vectors/pay.svg new file mode 100644 index 0000000..64a1d52 --- /dev/null +++ b/frontend/public/vectors/pay.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/vectors/receive.svg b/frontend/public/vectors/receive.svg new file mode 100644 index 0000000..589ac35 --- /dev/null +++ b/frontend/public/vectors/receive.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/vectors/select.svg b/frontend/public/vectors/select.svg new file mode 100644 index 0000000..e7e1ac4 --- /dev/null +++ b/frontend/public/vectors/select.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/components/background.tsx b/frontend/src/app/components/background.tsx new file mode 100644 index 0000000..9bbcaf5 --- /dev/null +++ b/frontend/src/app/components/background.tsx @@ -0,0 +1,15 @@ +import { FC } from 'react' + +export const Background: FC = () => { + return ( +
+ ) +} diff --git a/frontend/src/app/components/hero-hexagons.tsx b/frontend/src/app/components/hero-hexagons.tsx new file mode 100644 index 0000000..6f7e2b9 --- /dev/null +++ b/frontend/src/app/components/hero-hexagons.tsx @@ -0,0 +1,72 @@ +import { FC } from 'react' + +const HEXAGONS = [ + { + icon: 'select.svg', + title: 'Select an order', + text: 'Select the order that suits you best.', + }, + { + icon: 'pay.svg', + title: 'Pay the order', + text: 'You can block the order for one hour to pay.', + }, + { + icon: 'confirm.svg', + title: 'Confirm Payment', + text: 'Prove payment by uploading the email sent by Wise', + }, + { + icon: 'receive.svg', + title: 'Receive your crypto', + text: 'There is nothing else to be done. AZERO is in your wallet', + }, +] + +export const HeroHexagons: FC = () => { + //text-center text-zinc-100 text-xs font-normal font-['Azeret Mono'] uppercase leading-tight + + const Hexagon = ({ + icon, + title, + step, + text, + }: { + icon: string + title: string + step: number + text: string + }) => { + return ( +
+ {icon} +
+ + Step {step} + + {title} +

+ {text} +

+
+
+ ) + } + + return ( +
+ {HEXAGONS.map((hexagon, i) => ( + <> + + {i !== HEXAGONS.length - 1 && ( + arrow + )} + + ))} +
+ ) +} diff --git a/frontend/src/app/components/home-page-title.tsx b/frontend/src/app/components/home-page-title.tsx deleted file mode 100644 index 3d8639e..0000000 --- a/frontend/src/app/components/home-page-title.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import Image from 'next/image' -import Link from 'next/link' -import { AnchorHTMLAttributes, FC } from 'react' - -import githubIcon from 'public/icons/github-button.svg' -import telegramIcon from 'public/icons/telegram-button.svg' -import vercelIcon from 'public/icons/vercel-button.svg' -import inkathonLogo from 'public/images/inkathon-logo.png' - -import { cn } from '@/utils/cn' - -interface StyledIconLinkProps extends AnchorHTMLAttributes { - href: string - className?: string -} - -const StyledIconLink: React.FC = ({ className, children, ...rest }) => ( - - {children} - -) - -export const HomePageTitle: FC = () => { - const title = 'ink!athon' - const desc = 'Full-Stack DApp Boilerplate for ink! Smart Contracts' - const githubHref = 'https://github.com/scio-labs/inkathon' - const deployHref = 'https://github.com/scio-labs/inkathon#deployment-' - const telegramHref = 'https://t.me/inkathon' - - return ( - <> -
- {/* Logo & Title */} - - ink!athon Logo -

{title}

- - - {/* Tagline & Lincks */} -

{desc}

-

- Built by{' '} - - Dennis Zoma - {' '} - &{' '} - - Scio Labs - - . Supported by{' '} - - Aleph Zero - - . -

- - {/* Github & Vercel Buttons */} -
- - Github Repository - - - Deploy with Vercel - - - Telegram Group - -
- -
-
- - ) -} diff --git a/frontend/src/app/components/home-top-bar.tsx b/frontend/src/app/components/home-top-bar.tsx index 52afee5..1dc80d6 100644 --- a/frontend/src/app/components/home-top-bar.tsx +++ b/frontend/src/app/components/home-top-bar.tsx @@ -3,24 +3,36 @@ import Link from 'next/link' import { FC } from 'react' +import { Bars3Icon } from '@heroicons/react/24/outline' import { HiOutlineExternalLink } from 'react-icons/hi' +import { Button } from '../../components/ui/button' + +const navigation = [ + { name: 'Liquidity', href: '/liquidity' }, + { name: 'Deposits', href: '/about' }, + { name: 'Receipts', href: '/contact' }, +] + export const HomeTopBar: FC = () => { return ( - <> - -
- VIDEO▶ -
-
- Watch the sub0 ink!athon workshop (45 min) - sub0 ink!athon workshop -
- - - +
+
+ + logo + +
+
+ +
+
) } diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 11053e9..ebbbe9d 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -1,6 +1,8 @@ @tailwind base; @tailwind components; @tailwind utilities; +@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono&display=swap'); @layer base { :root { @@ -74,7 +76,7 @@ @apply scroll-smooth antialiased; } body { - @apply bg-background font-sans text-foreground; + @apply bg-gradient font-manrope text-foreground; @apply flex h-screen min-h-screen flex-col; } } diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index 2a53a9c..522cf04 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -5,36 +5,56 @@ import { useEffect } from 'react' import { useInkathon } from '@scio-labs/use-inkathon' import { toast } from 'react-hot-toast' -import { HomePageTitle } from '@/app/components/home-page-title' import { ChainInfo } from '@/components/web3/chain-info' import { ConnectButton } from '@/components/web3/connect-button' import { ZKDexContractInteractions } from '@/components/web3/zkdex-contract-interactions' +import { Button } from '../components/ui/button' +import { Background } from './components/background' +import { HeroHexagons } from './components/hero-hexagons' +import { HomeTopBar } from './components/home-top-bar' + export default function HomePage() { - // Display `useInkathon` error messages (optional) const { error } = useInkathon() useEffect(() => { if (!error) return toast.error(error.message) }, [error]) + const HeroText = () => { + return ( +
+

+ Lightning-fast BRL to AZERO Transaction with the highest level of security +

+

+ zkDex leverages zero-knowledge proofs to ensure your transactions remain private while + providing unmatched efficiency in onramp/offramp solutions. +

+
+ ) + } + return ( <> -
- {/* Title */} - - - {/* Connect Wallet Button */} - - -
- {/* Chain Metadata Information */} - - - {/* Greeter Read/Write Contract Interactions */} + + +
+
+ +
+ + +
+ -
+
+ ) } diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx index 006acdb..11ef865 100644 --- a/frontend/src/components/ui/button.tsx +++ b/frontend/src/components/ui/button.tsx @@ -6,19 +6,19 @@ import { cn } from '@/utils/cn' import { Spinner } from './spinner' const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + 'inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', - outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', + outline: 'border border-outlineBorder text-outlineText bg-outlineBackground hover:bg-outlineBackground/90', // + hover:bg-accent hover:text-accent-foreground secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', }, size: { - default: 'h-10 px-4 py-2', + default: 'h-10 px-4 py-2 rounded', sm: 'h-9 rounded-md px-3', lg: 'h-11 rounded-md px-8', icon: 'h-10 w-10', diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index e89bd51..eb2ed3a 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -15,18 +15,24 @@ const config: Config = { }, extend: { fontFamily: { - sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans], - mono: ['var(--font-geist-mono)', ...defaultTheme.fontFamily.mono], + manrope: ['Manrope', ...defaultTheme.fontFamily.sans], + azaretMono: ['Azaret Mono', ...defaultTheme.fontFamily.mono], + }, + backgroundImage: { + gradient: + 'linear-gradient(180deg, #161616 0%, rgba(22, 22, 22, 0.00) 39.72%, rgba(22, 22, 22, 0.00) 88.69%, #161616 100%)', }, colors: { border: 'hsl(var(--border) / )', - input: 'hsl(var(--input) / )', + outlineBorder: 'white', + outlineText: 'white', + outlineBackground: '#18181B', ring: 'hsl(var(--ring) / )', background: 'hsl(var(--background) / )', foreground: 'hsl(var(--foreground) / )', primary: { - DEFAULT: 'hsl(var(--primary) / )', - foreground: 'hsl(var(--primary-foreground) / )', + DEFAULT: '#BEF264', + foreground: '#09090B', }, secondary: { DEFAULT: 'hsl(var(--secondary) / )', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c1c6dab..c880999 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,6 +92,9 @@ importers: '@azns/resolver-react': specifier: ^1.6.0 version: 1.6.0(@polkadot/api-contract@10.11.2)(@polkadot/api@10.11.2)(@polkadot/types@10.11.2)(@polkadot/util-crypto@12.6.2)(@polkadot/util@12.6.2)(react-dom@18.2.0)(react@18.2.0) + '@heroicons/react': + specifier: ^2.1.1 + version: 2.1.1(react@18.2.0) '@hookform/resolvers': specifier: ^3.3.2 version: 3.3.2(react-hook-form@7.49.2) @@ -951,6 +954,14 @@ packages: resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==} dev: false + /@heroicons/react@2.1.1(react@18.2.0): + resolution: {integrity: sha512-JyyN9Lo66kirbCMuMMRPtJxtKJoIsXKS569ebHGGRKbl8s4CtUfLnyKJxteA+vIKySocO4s1SkTkGS4xtG/yEA==} + peerDependencies: + react: '>= 16' + dependencies: + react: 18.2.0 + dev: false + /@hookform/resolvers@3.3.2(react-hook-form@7.49.2): resolution: {integrity: sha512-Tw+GGPnBp+5DOsSg4ek3LCPgkBOuOgS5DsDV7qsWNH9LZc433kgsWICjlsh2J9p04H2K66hsXPPb9qn9ILdUtA==} peerDependencies: