update various design issues (#368)

* update various design issues from figma file: https://www.figma.com/design/8xRcNNztnzJ1TnGBTsSdk9/World-Website-%5BQ1-2025%5D?node-id=16372-59851&t=Ajd8bCLuLLFGWNym-1

* updated colors + spacing

* updated images

* max width update

* updated typescript

src/components/Header.tsx

@@ -3,8 +3,8 @@ import Image from 'next/image'
 import { Button } from './Button'
 import { useRouter } from 'next/router'
 import { Link } from '@/components/Link'
-import GitHubIcon from './icons/GitHubIcon'
 import logo from 'public/world-logo.svg'
+import GitHubIcon from './icons/GitHubIcon'
 import { MobileSearch, Search } from './Search'
 import { useMobileNavigationStore } from '@/components/MobileNavigation'
 import { motion, MotionStyle, useScroll, useTransform } from 'framer-motion'
@@ -57,11 +57,11 @@ export const Header: ForwardRefExoticComponent<{ className?: string }> = forward
 				} as MotionStyle
 			}
 		>
-			<div className="flex h-14 items-center justify-between gap-12 border px-4 sm:px-6 ">
+			<div className="flex h-14 items-center justify-between gap-12 border-x px-4 sm:px-6 border-t">
 				<div
 					className={clsx(
 						'absolute inset-x-0 top-full h-px transition',
-						(isInsideMobileNavigation || !mobileNavIsOpen) && 'bg-zinc-900/7.5 dark:bg-white/7.5'
+						(isInsideMobileNavigation || !mobileNavIsOpen) && 'bg-gray-A7 dark:bg-white/7.5'
 					)}
 				/>
 				<div className="hidden lg:flex justify-self-start">
@@ -80,12 +80,12 @@ export const Header: ForwardRefExoticComponent<{ className?: string }> = forward
 					<nav className="hidden md:block">
 						<ul role="list" className="flex items-center gap-4">
 							<TopLevelNavItem
-								className="bg-gray-100 hover:bg-gray-100/50 py-[7px] px-4 border rounded-lg border-gray-200"
+								className="bg-gray-A9 hover:bg-gray-100/50 py-[7px] px-4 border rounded-lg border-gray-A7"
 								href="/apps"
 							>
 								Explore Apps
 							</TopLevelNavItem>
-							<Button href="https://developer.worldcoin.org" target="_blank">
+							<Button href="https://developer.worldcoin.org" target="_blank" className="bg-gray-A1">
 								Developer Portal
 							</Button>
 						</ul>
@@ -111,11 +111,12 @@ const SectionTab = (props: { className?: string; text: string; isActive: boolean
 	const { className, text, isActive, href } = props
 	return (
 		<div
-			className={clsx('h-full flex items-center text-center justify-center', {
-				'text-gray-900 border-black border-b': isActive,
+			className={clsx('h-full flex items-center text-center justify-center relative', {
+				'text-gray-900 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-black after:-mb-px':
+					isActive,
 			})}
 		>
-			<a href={href} className={clsx('text-gray-400 text-sm', { 'text-gray-900': isActive }, className)}>
+			<a href={href} className={clsx('text-gray-AG2 text-sm', { 'text-gray-A1': isActive }, className)}>
 				{text}
 			</a>
 		</div>

src/components/Layout.tsx

@@ -41,46 +41,49 @@ export const Layout: FC<
 	const basePath = router.pathname.split('/')[1]
 	return (
 		<SectionProvider sections={sections}>
-			<Header />
-			<div
-				className={clsx('lg:ml-72 xl:ml-80 mt-14 overflow-x-hidden', {
-					'!ml-0 justify-center items-center sm:flex mt-24': basePath === '',
-				})}
-			>
-				<motion.header
-					layoutScroll
-					className={clsx(
-						'contents lg:pointer-events-none lg:fixed lg:inset-0 lg:top-14 lg:z-[8] lg:flex mt-14',
-						{
-							invisible: basePath === '',
-						}
-					)}
+			<div className="min-h-screen bg-gray-A10">
+				<Header />
+				<div
+					className={clsx('lg:ml-72 xl:ml-80 mt-24', {
+						'max-w-[1600px] mx-auto': basePath === '',
+						'overflow-x-hidden': basePath !== '',
+					})}
 				>
-					<ScrollArea.Root asChild>
-						<div className="contents lg:pointer-events-auto lg:overflow-hidden lg:flex lg:flex-col lg:w-72 xl:w-80">
-							<ScrollArea.Viewport className="contents pt-4 lg:block lg:px-6 lg:pb-8">
-								<Navigation className="hidden lg:block" />
-							</ScrollArea.Viewport>
-							<ScrollArea.Scrollbar
-								className="flex my-1 w-1 bg-gray-100 rounded-sm"
-								orientation="vertical"
-							>
-								<ScrollArea.Thumb className="relative flex-1 bg-gray-500/25 rounded-sm" />
-							</ScrollArea.Scrollbar>
-						</div>
-					</ScrollArea.Root>
-				</motion.header>
+					<motion.header
+						layoutScroll
+						className={clsx(
+							'contents lg:pointer-events-none lg:fixed lg:inset-0 lg:top-14 lg:z-[8] lg:flex mt-24',
+							{
+								invisible: basePath === '',
+							}
+						)}
+					>
+						<ScrollArea.Root asChild>
+							<div className="contents lg:pointer-events-auto lg:overflow-hidden lg:flex lg:flex-col lg:w-72 xl:w-80">
+								<ScrollArea.Viewport className="contents pt-4 lg:block lg:px-6 lg:pb-8">
+									<Navigation className="hidden lg:block" />
+								</ScrollArea.Viewport>
+								<ScrollArea.Scrollbar
+									className="flex my-1 w-1 bg-gray-100 rounded-sm"
+									orientation="vertical"
+								>
+									<ScrollArea.Thumb className="relative flex-1 bg-gray-500/25 rounded-sm" />
+								</ScrollArea.Scrollbar>
+							</div>
+						</ScrollArea.Root>
+					</motion.header>
 
-				<div className="relative px-4 pt-14 sm:px-6 lg:px-8">
-					<main className="pb-16">
-						<Prose as="article">
-							{currentSection && (
-								<p className="uppercase tracking-wide text-neutral-400 mb-1">{currentSection.title}</p>
-							)}
-							{children}
-						</Prose>
-					</main>
-					<Footer />
+					<div className="relative px-4 pt-24 sm:px-6 lg:px-8 max-w-[1400px] mx-auto">
+						<main className="pb-16">
+							<Prose as="article">
+								{currentSection && (
+									<p className="uppercase tracking-wide text-gray-AG2 mb-1">{currentSection.title}</p>
+								)}
+								{children}
+							</Prose>
+						</main>
+						<Footer />
+					</div>
 				</div>
 			</div>
 		</SectionProvider>

src/components/Link.tsx

@@ -16,7 +16,7 @@ export const Link: FC<PropsWithChildren<Omit<HTMLProps<HTMLAnchorElement>, 'ref'
 			)}
 
 			{!external && (
-				<NextLink href={props.href ?? '!#'} {...props}>
+				<NextLink href={props.href ?? '!#'} className="text-purple-H2" {...props}>
 					{props.children}
 				</NextLink>
 			)}

src/components/Navigation.tsx

@@ -31,7 +31,7 @@ const NavLink: FC<
 				isAnchorLink ? 'pl-7' : 'pl-4',
 				active
 					? 'text-zinc-900 dark:text-white font-medium'
-					: 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
+					: 'text-gray-A5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
 			)}
 		>
 			<span className="truncate">{children}</span>
@@ -68,7 +68,7 @@ const VisibleSectionHighlight: FC<{
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1, transition: { delay: 0.2 } }}
 			exit={{ opacity: 0 }}
-			className="bg-zinc-800/2.5 dark:bg-white/2.5 absolute inset-x-0 top-0 will-change-transform"
+			className="bg-gray-A10 dark:bg-white/2.5 absolute inset-x-0 top-0 will-change-transform"
 			style={{ borderRadius: 8, height, top }}
 		/>
 	)
@@ -86,7 +86,7 @@ const ActivePageMarker: FC<{
 	return (
 		<motion.div
 			layout
-			className="absolute left-2 h-6 w-px bg-primary"
+			className="absolute left-2 h-6 w-px bg-gray-A1"
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1, transition: { delay: 0.2 } }}
 			exit={{ opacity: 0 }}
@@ -117,7 +117,7 @@ const NavigationGroup: FC<{
 				<AnimatePresence initial={!isInsideMobileNavigation}>
 					{isActiveGroup && <VisibleSectionHighlight group={group} pathname={pathname} />}
 				</AnimatePresence>
-				<motion.div layout className="bg-zinc-900/10 dark:bg-white/5 absolute inset-y-0 left-2 w-px" />
+				<motion.div layout className="bg-gray-A7 dark:bg-white/5 absolute inset-y-0 left-2 w-px" />
 				<AnimatePresence initial={false}>
 					{isActiveGroup && <ActivePageMarker group={group} pathname={pathname} />}
 				</AnimatePresence>

src/components/Search.tsx

@@ -131,13 +131,13 @@ export const Search: FC<{ className?: string; buttonClassName?: string; placehol
 				type="button"
 				{...buttonProps}
 				className={clsx(
-					'hidden h-8 w-full items-center gap-2 rounded-lg bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 lg:flex focus:[&:not(:focus-visible)]:outline-none',
+					'hidden h-8 w-full items-center gap-2 rounded-lg bg-white pl-2 pr-3 text-sm text-gray-AG1 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20 lg:flex focus:[&:not(:focus-visible)]:outline-none',
 					buttonClassName
 				)}
 			>
 				<SearchIcon className="h-5 w-5 stroke-current" />
 				{placeholder ?? 'Find something...'}
-				<kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
+				<kbd className="ml-auto text-2xs text-gray-AG2 dark:text-zinc-500">
 					<kbd className="font-sans">{modifierKey}</kbd>
 					<kbd className="font-sans">K</kbd>
 				</kbd>

src/pages/mini-apps/index.mdx

@@ -2,13 +2,13 @@ import { Link } from '@/components/Link'
 
 # Mini Apps {{ className: 'text-5xl' }}
 
-![Mini Apps](/images/docs/mini-apps/mini-apps.png)
+![Mini Apps](/images/docs/mini-apps-cover.png)
 
-Mini apps enable third-party developers to create native-like applications within World App. 
-Building a mini app will provide access to our rapidly growing user network and monetization opportunities via WLD and USDC. 
+Mini apps enable third-party developers to create native-like applications within World App.
+Building a mini app will provide access to our rapidly growing user network and monetization opportunities via WLD and USDC.
 In addition, mini apps introduce smart contract support natively inside of World App.<br/>
 
 # How it Works
 
 Mini apps are simply web applications opened via webview inside of World App. Using the MiniKit SDK, these applications can become
-native-like and interact with the World ecosystem.
+native-like and interact with the World ecosystem.

src/pages/world-chain/index.mdx

@@ -2,21 +2,24 @@ import { Link } from '@/components/Link'
 
 # World Chain {{ className: 'text-5xl' }}
 
-![World Chain](/images/docs/world-chain/worldchain-cover.png)
+![World Chain](/images/docs/worldchain-cover.png)
 
-World Chain is a blockchain for humans. World chain offers several unique primitives: 
+World Chain is a blockchain for humans. World chain offers several unique primitives:
 
-- Free gas fees for all verified humans 
-- Native mobile distribution to all World App users through [mini-apps](/mini-apps)
-- Simplified crypto transactions [through mini apps](/mini-apps/commands/verify) 
-- Sybil resistance for developers via [World ID](/world-id)
-- Airdrop of WLD tokens to all verified humans
+-   Free gas fees for all verified humans
+-   Native mobile distribution to all World App users through [mini-apps](/mini-apps)
+-   Simplified crypto transactions [through mini apps](/mini-apps/commands/verify)
+-   Sybil resistance for developers via [World ID](/world-id)
+-   Airdrop of WLD tokens to all verified humans
 
-These  primitives enable World Chain builders to build never before possible applications and reach a global audience. 
+These primitives enable World Chain builders to build never before possible applications and reach a global audience.
 
-World Chain is built on the [Superchain](https://docs.optimism.io/stack/explainer). 
+World Chain is built on the [Superchain](https://docs.optimism.io/stack/explainer).
 
 To learn more about what is World Chain, watch our presentation from the [A New World](https://www.youtube.com/watch?v=_RWvsCZ17x8&ab_channel=World) event: <br />
 [A New World: World Chain and Priority Blockspace for Humans ft. Liam Horne](https://www.youtube.com/watch?v=NSxyKsSwjsc&ab_channel=World) on our [YouTube channel](https://www.youtube.com/@worldnetworkofficial).
 
-<Note> Is anything missing in the documentation? Please reach out on our [Telegram for World Chain developers](https://t.me/worldcoindevelopers) </Note>
+<Note>
+	{' '}
+	Is anything missing in the documentation? Please reach out on our [Telegram for World Chain developers](https://t.me/worldcoindevelopers){' '}
+</Note>

src/pages/world-id/index.mdx

@@ -1,12 +1,11 @@
 
-
 # World ID {{ className: 'text-5xl' }}
 
 Building the world's largest identity and financial network as a public utility, giving ownership to everyone. {{ className: 'text-2xl' }}
 
 <hr className="my-10" />
 
-![World App](/images/docs/introduction/world-app.png)
+![World App](/images/docs/world-id-cover.png)
 
 <span className="grid lg:grid-flow-col gap-8">
 <Col>

tailwind.config.js

@@ -51,6 +51,13 @@ module.exports = {
 					},
 				},
 				gray: {
+					A1: '#2D2C2C',
+					A5: '#575654',
+					A7: '#E7E5E2',
+					A9: '#F3F2F0',
+					A10: '#F9F9F8',
+					AG1: '#75726F',
+					AG2: '#9D9B96',
 					25: '#FBFBFC',
 					50: '#F9FAFB',
 					100: '#F3F4F5',
@@ -62,6 +69,8 @@ module.exports = {
 					900: '#191C20',
 				},
 
+				'purple-H2': '#454EBA',
+
 				accents: {
 					info: {
 						700: '#506DFF',