diff --git a/package.json b/package.json index 7644d40..d99fda8 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}'" }, "dependencies": { + "@headlessui/react": "^1.7.18", "next": "14.1.0", "react": "^18", "react-dom": "^18", diff --git a/src/app/(routes)/layout.tsx b/src/app/(routes)/layout.tsx index 27b2db7..ccf3634 100644 --- a/src/app/(routes)/layout.tsx +++ b/src/app/(routes)/layout.tsx @@ -2,7 +2,7 @@ import type { Metadata } from "next"; import { twMerge } from "tailwind-merge"; import { Barlow } from "next/font/google"; -import HeaderNav from "@/app/_components/header-nav"; +import { HeaderNav } from "@/app/_components/header-nav"; import "./globals.css"; @@ -23,8 +23,10 @@ export default function RootLayout({ return ( - - {children} +
+ + {children} +
); diff --git a/src/app/_components/button.tsx b/src/app/_components/button.tsx new file mode 100644 index 0000000..aedc0bd --- /dev/null +++ b/src/app/_components/button.tsx @@ -0,0 +1,18 @@ +import { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; + +type ButtonProps = ComponentProps<"button">; + +export function Button({ className, children, ...props }: ButtonProps) { + return ( + + ); +} diff --git a/src/app/_components/header-nav.tsx b/src/app/_components/header-nav.tsx deleted file mode 100644 index 5039acd..0000000 --- a/src/app/_components/header-nav.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Link from "next/link"; - -import { AcrossIcon } from "./icons/across"; - -export default function HeaderNav() { - return ( -
- - - - -
- ); -} diff --git a/src/app/_components/header-nav/flyout-menu.tsx b/src/app/_components/header-nav/flyout-menu.tsx new file mode 100644 index 0000000..26c2e98 --- /dev/null +++ b/src/app/_components/header-nav/flyout-menu.tsx @@ -0,0 +1,76 @@ +import { Fragment } from "react"; +import { Popover, Transition } from "@headlessui/react"; +import Link from "next/link"; +import { twMerge } from "tailwind-merge"; + +import { ChevronDownIcon } from "../icons"; +import { IconBox } from "../icon-box"; + +import { NavItem } from "./types"; + +type Props = { + buttonLabel: string; + menuItems: NavItem[]; + className?: string; + useExternalLinks?: boolean; +}; + +export function FlyoutMenu({ + useExternalLinks, + buttonLabel, + menuItems, + className, +}: Props) { + return ( + + + {buttonLabel} + + + + +
+
+ {menuItems.map((item) => ( + + + + + +
+
{item.label}
+
+ {item.description} +
+
+ + + ))} +
+
+ + + + ); +} diff --git a/src/app/_components/header-nav/index.tsx b/src/app/_components/header-nav/index.tsx new file mode 100644 index 0000000..5f68062 --- /dev/null +++ b/src/app/_components/header-nav/index.tsx @@ -0,0 +1,158 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { useState } from "react"; +import { twMerge } from "tailwind-merge"; + +import { + AcrossIcon, + MenuIcon, + MinusIcon, + BridgeIcon, + PlusIcon, + CheckmarkSimpleIcon, + DiscordIcon, + TwitterIcon, + MediumIcon, +} from "../icons"; +import { Button } from "../button"; + +import { FlyoutMenu } from "./flyout-menu"; +import { MobileMenu } from "./mobile-menu"; +import { ProductsSubNav } from "./products-sub-nav"; + +const productsNavigationItems = [ + { + label: "Across Bridge", + description: "Bridge Without Compromise", + href: "/across-bridge", + Icon: BridgeIcon, + iconClassName: "group-hover:drop-shadow-aqua h-4 w-4", + iconContainerClassName: "bg-aqua-100/[.05]", + containerClassName: "group-hover:bg-aqua-100/[.05]", + }, + { + label: "Across+", + description: "Cross-chain Bridge hooks to Fullfill User intents", + href: "/across-plus", + Icon: PlusIcon, + iconClassName: "group-hover:drop-shadow-teal h-5 w-5", + iconContainerClassName: "bg-teal-100/[.05]", + containerClassName: "group-hover:bg-teal-100/[.05]", + }, + { + label: "Across Settlement", + description: "Cross-chain Intents Settlement Layer", + href: "/across-settlement", + Icon: CheckmarkSimpleIcon, + iconClassName: "group-hover:drop-shadow-purple h-4 w-5", + iconContainerClassName: "bg-purple-100/[.05]", + containerClassName: "group-hover:bg-purple-100/[.05]", + }, +]; + +const communityNavigationItems = [ + { + label: "Discord", + description: "Access support and chat with community members", + href: "https://discord.com/invite/sKSkhTtu8s", + Icon: DiscordIcon, + iconClassName: "h-4 w-5", + iconContainerClassName: "bg-light-100/[.05]", + containerClassName: "group-hover:bg-light-100/[.05]", + }, + { + label: "Twitter", + description: "Follow for the latest updates on Across", + href: "https://twitter.com/AcrossProtocol", + Icon: TwitterIcon, + iconClassName: "h-4 w-4", + iconContainerClassName: "bg-light-100/[.05]", + containerClassName: "group-hover:bg-light-100/[.05]", + }, + { + label: "Medium", + description: "Read deep dives on Across infra and campaigns", + href: "https://medium.com/across-protocol", + Icon: MediumIcon, + iconClassName: "h-3 w-5", + iconContainerClassName: "bg-light-100/[.05]", + containerClassName: "group-hover:bg-light-100/[.05]", + }, +]; + +export function HeaderNav() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const pathname = usePathname(); + const isProductsPath = productsNavigationItems.some((item) => + pathname.startsWith(item.href), + ); + + return ( +
+ + {/* Only show sub-menu when in products-related path */} + {isProductsPath && !isMenuOpen && ( + + )} +
+ setIsMenuOpen(false)} + productsNavItems={productsNavigationItems} + communityNavItems={communityNavigationItems} + pathname={pathname} + /> +
+
+ ); +} diff --git a/src/app/_components/header-nav/mobile-menu.tsx b/src/app/_components/header-nav/mobile-menu.tsx new file mode 100644 index 0000000..4811602 --- /dev/null +++ b/src/app/_components/header-nav/mobile-menu.tsx @@ -0,0 +1,82 @@ +import Link from "next/link"; +import { Fragment } from "react"; +import { twMerge } from "tailwind-merge"; +import { Transition } from "@headlessui/react"; + +import { UmaIcon } from "../icons"; +import { Button } from "../button"; +import { IconBox } from "../icon-box"; + +import { NavItem } from "./types"; + +export function MobileMenu(props: { + productsNavItems: NavItem[]; + communityNavItems: NavItem[]; + isMenuOpen: boolean; + onClickItem: () => void; + pathname: string; +}) { + return ( + +
+ + {props.productsNavItems.map((item) => ( + + + + + +
+
{item.label}
+
+ {item.description} +
+
+ + + ))} +
+
+ {props.communityNavItems.map((item) => ( + + + + + + ))} +
+
+
Powered by
+ +
+
+ + ); +} diff --git a/src/app/_components/header-nav/products-sub-nav.tsx b/src/app/_components/header-nav/products-sub-nav.tsx new file mode 100644 index 0000000..b32dc8b --- /dev/null +++ b/src/app/_components/header-nav/products-sub-nav.tsx @@ -0,0 +1,78 @@ +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { twMerge } from "tailwind-merge"; + +import { IconBox } from "../icon-box"; + +import { NavItem } from "./types"; + +const classNameOverrides: Record< + string, + { + iconClassName: string; + currentPathIconClassName: string; + } +> & {} = { + "/across-bridge": { + iconClassName: "h-2 w-2 sm:h-4 sm:w-4", + currentPathIconClassName: "drop-shadow-aqua-sm sm:drop-shadow-aqua", + }, + "/across-plus": { + iconClassName: "h-3 w-3 sm:h-4 sm:w-4", + currentPathIconClassName: "drop-shadow-teal-sm sm:drop-shadow-teal", + }, + "/across-settlement": { + iconClassName: "h-2 w-3 sm:h-4 sm:w-4", + currentPathIconClassName: "drop-shadow-purple-sm sm:drop-shadow-purple", + }, +}; + +export function ProductsSubNav(props: { navItems: NavItem[] }) { + const pathname = usePathname(); + const isCurrentPath = (href: string) => pathname.startsWith(href); + + return ( +
+
+ {props.navItems.map((item) => ( + + + + + +
+ {item.label} +
+ + + ))} +
+
+ ); +} diff --git a/src/app/_components/header-nav/types.ts b/src/app/_components/header-nav/types.ts new file mode 100644 index 0000000..92f92d2 --- /dev/null +++ b/src/app/_components/header-nav/types.ts @@ -0,0 +1,11 @@ +import { SVGProps } from "react"; + +export type NavItem = { + label: string; + description: string; + href: string; + Icon: (props: SVGProps) => React.ReactNode; + iconClassName: string; + iconContainerClassName: string; + containerClassName: string; +}; diff --git a/src/app/_components/icon-box.tsx b/src/app/_components/icon-box.tsx new file mode 100644 index 0000000..34527b2 --- /dev/null +++ b/src/app/_components/icon-box.tsx @@ -0,0 +1,16 @@ +import { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; + +type Props = ComponentProps<"div">; + +export function IconBox({ className, ...props }: Props) { + return ( +
+ ); +} diff --git a/src/app/_components/icons/across.tsx b/src/app/_components/icons/across.tsx index f30e08d..239d6cf 100644 --- a/src/app/_components/icons/across.tsx +++ b/src/app/_components/icons/across.tsx @@ -14,8 +14,8 @@ export function AcrossIcon({ className, ...props }: SVGProps) { > diff --git a/src/app/_components/icons/chevron-down.tsx b/src/app/_components/icons/chevron-down.tsx new file mode 100644 index 0000000..89b7de1 --- /dev/null +++ b/src/app/_components/icons/chevron-down.tsx @@ -0,0 +1,21 @@ +import { SVGProps } from "react"; + +export function ChevronDownIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/icons/discord.tsx b/src/app/_components/icons/discord.tsx new file mode 100644 index 0000000..79825fb --- /dev/null +++ b/src/app/_components/icons/discord.tsx @@ -0,0 +1,19 @@ +import { SVGProps } from "react"; + +export function DiscordIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/icons/gradient/arrow-up.tsx b/src/app/_components/icons/gradient/arrow-up.tsx index dd02336..2d402e4 100644 --- a/src/app/_components/icons/gradient/arrow-up.tsx +++ b/src/app/_components/icons/gradient/arrow-up.tsx @@ -10,7 +10,7 @@ export function ArrowUpIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.7143" rx="6" fill="#44D2FF" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.7143" rx="6" fill="#44D2FF" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { ) { y2="57.7152" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="57.7152" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="70.7153" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="70.7153" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/blocks-connected.tsx b/src/app/_components/icons/gradient/blocks-connected.tsx index a506132..4d04998 100644 --- a/src/app/_components/icons/gradient/blocks-connected.tsx +++ b/src/app/_components/icons/gradient/blocks-connected.tsx @@ -10,7 +10,7 @@ export function BlocksConnectedIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.7143" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.7143" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { fill="url(#paint0_linear_564_7341)" /> @@ -67,13 +67,13 @@ export function BlocksConnectedIcon(props: SVGProps) { y2="41.7141" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="67.4272" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="78.8557" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/blocks-diagonal.tsx b/src/app/_components/icons/gradient/blocks-diagonal.tsx index f90a0ba..9b2dd2e 100644 --- a/src/app/_components/icons/gradient/blocks-diagonal.tsx +++ b/src/app/_components/icons/gradient/blocks-diagonal.tsx @@ -16,7 +16,7 @@ export function BlocksDiagonalIcon(props: SVGProps) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { y2="96" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="96" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="60.75" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="60.75" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="25.5" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="25.5" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/bridge.tsx b/src/app/_components/icons/gradient/bridge.tsx index a32e625..a3c151a 100644 --- a/src/app/_components/icons/gradient/bridge.tsx +++ b/src/app/_components/icons/gradient/bridge.tsx @@ -2,18 +2,11 @@ import { SVGProps } from "react"; export function BridgeIcon(props: SVGProps) { return ( - - + + @@ -27,13 +20,13 @@ export function BridgeIcon(props: SVGProps) { y2="50.1865" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/chat.tsx b/src/app/_components/icons/gradient/chat.tsx index 1e36cac..daee084 100644 --- a/src/app/_components/icons/gradient/chat.tsx +++ b/src/app/_components/icons/gradient/chat.tsx @@ -26,24 +26,17 @@ export function ChatIcon({ variant = "aqua", className, ...props }: Props) { )} {...props} > - + - - + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/checklist.tsx b/src/app/_components/icons/gradient/checklist.tsx index f4efdf8..deebd3f 100644 --- a/src/app/_components/icons/gradient/checklist.tsx +++ b/src/app/_components/icons/gradient/checklist.tsx @@ -10,7 +10,7 @@ export function ChecklistIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" - /> - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { y2="53.1452" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="19.1442" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="87.7155" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/checkmark-simple.tsx b/src/app/_components/icons/gradient/checkmark-simple.tsx index 84a21b0..e7e18e3 100644 --- a/src/app/_components/icons/gradient/checkmark-simple.tsx +++ b/src/app/_components/icons/gradient/checkmark-simple.tsx @@ -2,18 +2,11 @@ import { SVGProps } from "react"; export function CheckmarkSimpleIcon(props: SVGProps) { return ( - - + + @@ -27,13 +20,13 @@ export function CheckmarkSimpleIcon(props: SVGProps) { y2="22.9333" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/checkmark.tsx b/src/app/_components/icons/gradient/checkmark.tsx index 37cfe97..3aa7239 100644 --- a/src/app/_components/icons/gradient/checkmark.tsx +++ b/src/app/_components/icons/gradient/checkmark.tsx @@ -15,11 +15,11 @@ export function CheckmarkIcon(props: SVGProps) { height="96" rx="48" fill="url(#paint0_linear_564_7350)" - fill-opacity="0.2" + fillOpacity="0.2" /> @@ -32,8 +32,8 @@ export function CheckmarkIcon(props: SVGProps) { y2="96" gradientUnits="userSpaceOnUse" > - - + + ) { y2="82.2859" gradientUnits="userSpaceOnUse" > - - - - - - + + + + + + diff --git a/src/app/_components/icons/gradient/code.tsx b/src/app/_components/icons/gradient/code.tsx index a5b02e5..b1e1410 100644 --- a/src/app/_components/icons/gradient/code.tsx +++ b/src/app/_components/icons/gradient/code.tsx @@ -16,7 +16,7 @@ export function CodeIcon(props: SVGProps) { height="25.7143" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="24" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.7143" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> @@ -66,9 +66,9 @@ export function CodeIcon(props: SVGProps) { width="101.08" height="88.2525" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ) { y2="77.3025" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/cross-chain.tsx b/src/app/_components/icons/gradient/cross-chain.tsx index c74c331..c83bc77 100644 --- a/src/app/_components/icons/gradient/cross-chain.tsx +++ b/src/app/_components/icons/gradient/cross-chain.tsx @@ -9,7 +9,7 @@ export function CrossChainIcon(props: SVGProps) { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" - /> - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> - + ) { height="25.5" rx="6" fill="#AA81FF" - fill-opacity="0.2" + fillOpacity="0.2" /> ) { y2="60.75" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="82.2859" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/dollar.tsx b/src/app/_components/icons/gradient/dollar.tsx index f840eff..86513a0 100644 --- a/src/app/_components/icons/gradient/dollar.tsx +++ b/src/app/_components/icons/gradient/dollar.tsx @@ -10,7 +10,7 @@ export function DollarIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.7143" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> @@ -60,13 +60,13 @@ export function DollarIcon(props: SVGProps) { y2="81.4292" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/double-chevron-right.tsx b/src/app/_components/icons/gradient/double-chevron-right.tsx index 9b759cc..b06e54f 100644 --- a/src/app/_components/icons/gradient/double-chevron-right.tsx +++ b/src/app/_components/icons/gradient/double-chevron-right.tsx @@ -16,7 +16,7 @@ export function DoubleChevronRightIcon(props: SVGProps) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { height="25.5" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { y2="48.001" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="48.001" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/feather.tsx b/src/app/_components/icons/gradient/feather.tsx index 0002218..1839ac2 100644 --- a/src/app/_components/icons/gradient/feather.tsx +++ b/src/app/_components/icons/gradient/feather.tsx @@ -13,10 +13,10 @@ export function FeatherIcon(props: SVGProps) { ) { fill="url(#paint2_linear_564_7302)" /> ) { y2="90.8574" gradientUnits="userSpaceOnUse" > - - + + ) { y2="66.0018" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="66.0018" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="90.8574" gradientUnits="userSpaceOnUse" > - - + + diff --git a/src/app/_components/icons/gradient/logos/arbitrum.tsx b/src/app/_components/icons/gradient/logos/arbitrum.tsx index 73748c4..71c375e 100644 --- a/src/app/_components/icons/gradient/logos/arbitrum.tsx +++ b/src/app/_components/icons/gradient/logos/arbitrum.tsx @@ -13,8 +13,8 @@ export function ArbitrumIcon({ variant = "aqua", ...props }: LogoIconProps) { > @@ -27,9 +27,9 @@ export function ArbitrumIcon({ variant = "aqua", ...props }: LogoIconProps) { width="70" height="75" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/base.tsx b/src/app/_components/icons/gradient/logos/base.tsx index fb09f1c..d197625 100644 --- a/src/app/_components/icons/gradient/logos/base.tsx +++ b/src/app/_components/icons/gradient/logos/base.tsx @@ -11,7 +11,7 @@ export function BaseIcon({ variant = "aqua", ...props }: LogoIconProps) { fill="none" {...props} > - + - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/ethereum.tsx b/src/app/_components/icons/gradient/logos/ethereum.tsx index b78c959..7876867 100644 --- a/src/app/_components/icons/gradient/logos/ethereum.tsx +++ b/src/app/_components/icons/gradient/logos/ethereum.tsx @@ -45,9 +45,9 @@ export function EthereumIcon({ variant = "aqua", ...props }: LogoIconProps) { width="58" height="80" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/optimism.tsx b/src/app/_components/icons/gradient/logos/optimism.tsx index 326a013..5caf079 100644 --- a/src/app/_components/icons/gradient/logos/optimism.tsx +++ b/src/app/_components/icons/gradient/logos/optimism.tsx @@ -29,9 +29,9 @@ export function OptimismIcon({ variant = "aqua", ...props }: LogoIconProps) { width="88" height="58" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/polygon.tsx b/src/app/_components/icons/gradient/logos/polygon.tsx index 07e9c0f..2b0d685 100644 --- a/src/app/_components/icons/gradient/logos/polygon.tsx +++ b/src/app/_components/icons/gradient/logos/polygon.tsx @@ -25,9 +25,9 @@ export function PolygonIcon({ variant = "aqua", ...props }: LogoIconProps) { width="76" height="71" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/logos/zksync.tsx b/src/app/_components/icons/gradient/logos/zksync.tsx index 0da0e1b..efc8c32 100644 --- a/src/app/_components/icons/gradient/logos/zksync.tsx +++ b/src/app/_components/icons/gradient/logos/zksync.tsx @@ -11,26 +11,26 @@ export function ZkSyncIcon({ variant = "aqua", ...props }: LogoIconProps) { fill="none" {...props} > - + @@ -43,9 +43,9 @@ export function ZkSyncIcon({ variant = "aqua", ...props }: LogoIconProps) { width="72" height="73" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/plus.tsx b/src/app/_components/icons/gradient/plus.tsx index af0ea13..9da1d4f 100644 --- a/src/app/_components/icons/gradient/plus.tsx +++ b/src/app/_components/icons/gradient/plus.tsx @@ -2,24 +2,17 @@ import { SVGProps } from "react"; export function PlusIcon(props: SVGProps) { return ( - - + + @@ -32,9 +25,9 @@ export function PlusIcon(props: SVGProps) { width="65" height="64" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ) { y2="39.8076" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="40" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/shield-large.tsx b/src/app/_components/icons/gradient/shield-large.tsx index d5a56ca..024f2ab 100644 --- a/src/app/_components/icons/gradient/shield-large.tsx +++ b/src/app/_components/icons/gradient/shield-large.tsx @@ -10,14 +10,14 @@ export function ShieldLargeIcon(props: SVGProps) { xmlns="http://www.w3.org/2000/svg" {...props} > - + ) { height="25.7143" rx="6" fill="#6CF9D8" - fill-opacity="0.15" + fillOpacity="0.15" /> ) { width="76.8659" height="89.7819" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + ) { y2="81.2573" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + ) { y2="81.2573" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/gradient/shield-small.tsx b/src/app/_components/icons/gradient/shield-small.tsx index da4bacd..c757dd0 100644 --- a/src/app/_components/icons/gradient/shield-small.tsx +++ b/src/app/_components/icons/gradient/shield-small.tsx @@ -16,11 +16,11 @@ export function ShieldIcon(props: SVGProps) { height="87.4286" rx="43.7143" stroke="url(#paint0_linear_564_7328)" - stroke-opacity="0.15" - stroke-width="8.57143" - stroke-linecap="round" - stroke-linejoin="round" - stroke-dasharray="44.57 44.57" + strokeOpacity="0.15" + strokeWidth="8.57143" + strokeLinecap="round" + strokeLinejoin="round" + strokeDasharray="44.57 44.57" /> ) { y2="96" gradientUnits="userSpaceOnUse" > - - + + ) { y2="73.7144" gradientUnits="userSpaceOnUse" > - - - - - - - + + + + + + + diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx index 7671471..016a27a 100644 --- a/src/app/_components/icons/index.tsx +++ b/src/app/_components/icons/index.tsx @@ -1,4 +1,11 @@ export { AcrossIcon } from "./across"; +export { UmaIcon } from "./uma"; +export { MenuIcon } from "./menu"; +export { MinusIcon } from "./minus"; +export { DiscordIcon } from "./discord"; +export { MediumIcon } from "./medium"; +export { TwitterIcon } from "./twitter"; +export { ChevronDownIcon } from "./chevron-down"; // Gradient icons export { ArrowUpIcon } from "./gradient/arrow-up"; diff --git a/src/app/_components/icons/medium.tsx b/src/app/_components/icons/medium.tsx new file mode 100644 index 0000000..4e8ef75 --- /dev/null +++ b/src/app/_components/icons/medium.tsx @@ -0,0 +1,19 @@ +import { SVGProps } from "react"; + +export function MediumIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/icons/menu.tsx b/src/app/_components/icons/menu.tsx new file mode 100644 index 0000000..c1ffb8a --- /dev/null +++ b/src/app/_components/icons/menu.tsx @@ -0,0 +1,18 @@ +import { SVGProps } from "react"; + +export function MenuIcon(props: SVGProps) { + return ( + + + + + + ); +} diff --git a/src/app/_components/icons/minus.tsx b/src/app/_components/icons/minus.tsx new file mode 100644 index 0000000..d316b25 --- /dev/null +++ b/src/app/_components/icons/minus.tsx @@ -0,0 +1,16 @@ +import { SVGProps } from "react"; + +export function MinusIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/icons/twitter.tsx b/src/app/_components/icons/twitter.tsx new file mode 100644 index 0000000..b073d48 --- /dev/null +++ b/src/app/_components/icons/twitter.tsx @@ -0,0 +1,26 @@ +import { SVGProps } from "react"; + +export function TwitterIcon(props: SVGProps) { + return ( + + + + + + + + + + + ); +} diff --git a/src/app/_components/icons/uma.tsx b/src/app/_components/icons/uma.tsx new file mode 100644 index 0000000..67828eb --- /dev/null +++ b/src/app/_components/icons/uma.tsx @@ -0,0 +1,51 @@ +import { SVGProps } from "react"; + +export function UmaIcon(props: SVGProps) { + return ( + + + + + + + + + + + + + + ); +} diff --git a/tailwind.config.ts b/tailwind.config.ts index bddb2f4..1debaef 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -14,8 +14,10 @@ const config: Config = { 300: "#C5D5E0", }, grey: { + light: "#313237", dark: "#2D2E33", 400: "#9DAAB3", + 600: "#3E4047", }, aqua: { 100: "#6CF9D8", @@ -47,12 +49,40 @@ const config: Config = { "tight-4": "-0.12rem", // -1.92px "tight-5": "-0.04rem", // -0.64px "tight-6": "-0.03rem", // -0.48px + "wide-4": "0.12rem", // 1.92px }, extend: { - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + dropShadow: { + "aqua-sm": [ + "0px 0px 8.286px #6CF9D8", + "0px 0px 5.919px #00A27C", + "0px 0px 1.578px rgba(0, 0, 0, 0.25)", + ], + aqua: [ + "0px 0px 13.811px #6CF9D8", + "0px 0px 9.865px #00A27C", + "0px 0px 2.631px rgba(0, 0, 0, 0.25)", + ], + "teal-sm": [ + "0px 0px 8.286px #7FE9E1", + "0px 0px 5.919px #7FBCE9", + "0px 0px 1.578px rgba(0, 0, 0, 0.25)", + ], + teal: [ + "0px 0px 13.811px #7FE9E1", + "0px 0px 9.865px #7FBCE9", + "0px 0px 2.631px rgba(0, 0, 0, 0.25)", + ], + "purple-sm": [ + "0px 0px 8.286px #E66DFA", + "0px 0px 5.919px #974AE4", + "0px 0px 1.578px rgba(0, 0, 0, 0.25)", + ], + purple: [ + "0px 0px 13.811px #E66DFA", + "0px 0px 9.865px #974AE4", + "0px 0px 2.631px rgba(0, 0, 0, 0.25)", + ], }, }, }, diff --git a/yarn.lock b/yarn.lock index 1e26e44..327a6c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -51,6 +51,14 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b" integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A== +"@headlessui/react@^1.7.18": + version "1.7.18" + resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.18.tgz#30af4634d2215b2ca1aa29d07f33d02bea82d9d7" + integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ== + dependencies: + "@tanstack/react-virtual" "^3.0.0-beta.60" + client-only "^0.0.1" + "@humanwhocodes/config-array@^0.11.13": version "0.11.14" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b" @@ -209,6 +217,18 @@ dependencies: tslib "^2.4.0" +"@tanstack/react-virtual@^3.0.0-beta.60": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.4.tgz#32a90aa6faa2eeebb5f4ca561d26bae9f3435e45" + integrity sha512-tiqKW/e2MJVCr7/pRUXulpkyxllaOclkHNfhKTo4pmHjJIqnhMfwIjc1Q1R0Un3PI3kQywywu/791c8z9u0qeA== + dependencies: + "@tanstack/virtual-core" "3.0.0" + +"@tanstack/virtual-core@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz#637bee36f0cabf96a1d436887c90f138a7e9378b" + integrity sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -586,7 +606,7 @@ chokidar@^3.5.3: optionalDependencies: fsevents "~2.3.2" -client-only@0.0.1: +client-only@0.0.1, client-only@^0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==