add fonts , bg, header

frontend/components/Layout.tsx

@@ -2,9 +2,6 @@ import Image from 'next/image'
 import { usePathname } from 'next/navigation'
 import { ReactNode } from 'react'
 
-import bg from '../images/bg.svg'
-import sphere from '../images/sphere.png'
-
 import { useRouter } from 'next/router'
 import { WELCOME_METADATA } from 'pages'
 import { NEXT_STEPS } from 'pages/next-steps'
@@ -14,8 +11,6 @@ import { LOGIN_SOLANA_METADATA } from 'pages/login-solana'
 import { CLAIM_TOKENS_METADATA } from 'pages/claim-tokens'
 import { classNames } from 'utils/classNames'
 
-import statue from '@images/bg-statue.png'
-import statueWithCoins from '@images/bg-statue-with-coins.png'
 import Link from 'next/link'
 
 type LayoutProps = {
@@ -41,20 +36,25 @@ export const Layout = ({ children }: LayoutProps) => {
   return (
     <>
       <header className="absolute left-0 top-0 z-40 w-full px-1 transition-all lg:px-10">
-        <div className="before:gradient-border relative flex items-center justify-between px-4 py-3 lg:py-6 lg:px-10">
-          <Image
-            src="/pyth-logo-white.svg"
-            className="h-30 mr-3"
-            alt="pyth logo"
-            layout="intrinsic"
-            width={26}
-            height={33}
-          />
-
-          <span className="text-right">
-            Please verify that the site URL is:{' '}
-            <strong>https://airdrop.pyth.network/</strong>
-          </span>
+        <div className=" relative flex items-center justify-between  gap-2 px-4 py-3 lg:py-6 lg:px-10">
+          <Link
+            href="/"
+            className="border-white flex h-12 items-center justify-center border-opacity-60 outline-none sm:border sm:px-4 md:px-[29px]"
+          >
+            <Image
+              src="/wormhole-white.svg"
+              alt="wormhole logo"
+              layout="intrinsic"
+              width={130}
+              height={24}
+            />
+          </Link>
+          <div className="border-white flex h-12 flex-1 items-center justify-end border-opacity-60 sm:border sm:px-4 md:px-[29px] ">
+            <span className="text-right">
+              Please verify that the site URL is:{' '}
+              <strong> https://airdrop.wormhole.com</strong>
+            </span>
+          </div>
         </div>
       </header>
       <div className="relative px-4 pt-20 pb-32 sm:pt-28 lg:pt-40">
@@ -92,7 +92,7 @@ export const Layout = ({ children }: LayoutProps) => {
               <p className="font-body text-[15px] ">
                 Useful links:{' '}
                 <Link
-                  href="https://pyth.network/airdrop/faq"
+                  href="https://wormhole.com/airdrop/faq"
                   className="ml-5 inline-block underline"
                 >
                   FAQ
@@ -102,45 +102,6 @@ export const Layout = ({ children }: LayoutProps) => {
           </div>
         </div>
       </div>
-      <span
-        className="pointer-events-none fixed top-0 bottom-0 left-0 right-0 z-[-1]"
-        style={{
-          background:
-            'radial-gradient(circle, rgba(70,43,120,1) 0%, rgba(8,6,17,1) 100%)',
-        }}
-      >
-        <Image
-          src={bg}
-          alt=""
-          layout="fill"
-          objectFit="cover"
-          objectPosition="left bottom"
-        />
-        <Image
-          src={sphere}
-          alt=""
-          objectFit="cover"
-          objectPosition="left bottom"
-          style={{
-            width: '50%',
-            position: 'absolute',
-            bottom: '-4%',
-            left: '-5%',
-            opacity: 0.6,
-          }}
-        />
-        <span className="absolute -left-[430px] -bottom-24 max-h-[100vh] max-w-[1200px]">
-          <Image src={statue} alt="" priority />
-        </span>
-        <span
-          className={classNames(
-            'absolute -left-[430px] -bottom-24 max-h-[100vh] max-w-[1200px] opacity-0 transition duration-1000 ease-out',
-            pathname === NEXT_STEPS.url ? 'opacity-100' : ''
-          )}
-        >
-          <Image src={statueWithCoins} alt="" priority />
-        </span>
-      </span>
     </>
   )
 }

frontend/pages/_document.tsx

@@ -7,11 +7,7 @@ class CustomDocument extends Document {
       <Html>
         <Head>
           <link
-            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600;700&family=Urbanist:wght@400;600;700&display=swap"
-            rel="stylesheet"
-          />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;600&family=Red+Hat+Mono&family=Red+Hat+Text&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&family=IBM+Plex+Mono:wght@300;400;700&family=IBM+Plex+Sans:wght@300;400;700&display=swap"
             rel="stylesheet"
           />
           <link href="favicon.png" rel="icon" id="faviconTag" />

frontend/styles/globals.css

@@ -142,3 +142,11 @@ html::-webkit-scrollbar-thumb {
   background-color: #e6dafe;
   border-radius: 3px;
 }
+
+body {
+  background-image: url('../images/bg.webp'), url('../images/bg-svg.svg');
+  background-position: center bottom, center bottom;
+  background-repeat: no-repeat, no-repeat;
+  background-size: cover, contain;
+  min-height: 100vh;
+}

frontend/tailwind.config.js

@@ -79,9 +79,9 @@ module.exports = {
       robotoMono: 'roboto-mono, monospace',
       inter: 'inter, sans-serif',
       poppins: 'poppins, sans-serif',
-      body: 'Urbanist, sans-serif',
+      body: 'IBM Plex Sans, sans-serif',
       mono: 'IBM Plex Mono, monospace',
-      header: ["'Red Hat Display'", 'sans-serif'],
+      header: ["'Chakra Petch'", 'sans-serif'],
       body: ["'Red Hat Text'", 'sans-serif'],
     },