Skip to content

Commit

Permalink
UI updates
Browse files Browse the repository at this point in the history
  • Loading branch information
BasVanDeGroep committed Jan 25, 2024
1 parent 774009d commit 014be4c
Show file tree
Hide file tree
Showing 6 changed files with 238 additions and 214 deletions.
179 changes: 99 additions & 80 deletions app/components/NewNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { Logo } from "./new-landing/misc/Logo";
import {
ChevronDownIcon,
ExternalIcon,
HamburgerIcon,
DiscordIcon,
TwitterIcon,
TwitchIcon,
Expand All @@ -15,6 +14,7 @@ import { twMerge } from "tailwind-merge";
import Button from "./new-landing/Button";
import { Link } from "@remix-run/react";
import { SOCIAL } from "./new-landing/misc/const";
import { AnimatePresence, motion } from "framer-motion";

type DropDownItems = {
label: string;
Expand Down Expand Up @@ -141,17 +141,13 @@ const NewNavigation = () => {
"bg-transparent h-9 w-9 justify-center hover:bg-new-night-100/5 text-new-night-100 flex cursor-pointer items-center rounded-md transition-colors ";
const MOBILE_ITEM_CLASS =
"hover:bg-new-night-100/10 h-10 w-full cursor-pointer rounded-lg px-4 text-start font-bold text-white transition-colors";
const GENERIC_HAMBURGER_LINE = `h-[3px] w-5 my-[2px] rounded-full bg-new-night-100 transition ease transform duration-300`;

const [openHamburger, setOpenHamburger] = useState(false);

return (
<div
className={twMerge(
"justify-centerp-0 fixed top-0 left-1/2 z-40 mx-auto flex max-h-screen w-screen max-w-9xl -translate-x-1/2 flex-col items-center lg:p-6",
openHamburger && "fixed h-screen max-h-screen lg:absolute lg:h-auto"
)}
>
<div className="relative flex h-16 w-full items-center justify-between border-white/5 bg-new-night-1200/25 px-6 backdrop-blur-lg md:px-4 lg:h-20 lg:rounded-2xl lg:border lg:px-6">
<div className="justify-centerp-0 fixed top-0 left-1/2 z-40 mx-auto flex max-h-screen w-screen max-w-9xl -translate-x-1/2 flex-col items-center lg:p-6">
<div className="relative z-[900] flex h-16 w-full items-center justify-between border-white/5 bg-new-night-1200/25 px-6 backdrop-blur-lg md:px-4 lg:h-20 lg:rounded-2xl lg:border lg:px-6">
<div className="flex items-center gap-0 sm:gap-9">
<Link to="/">
<Logo className="w-[148px] xl:w-[160px]" />
Expand Down Expand Up @@ -238,83 +234,106 @@ const NewNavigation = () => {
<Button color="ruby">Start Playing</Button>
</div>
<button
className="flex h-11 w-11 cursor-pointer items-center justify-center rounded-lg bg-new-night-1200/20 lg:hidden"
className="group flex h-11 w-11 cursor-pointer flex-col items-center justify-center rounded-lg bg-new-night-1200/20 lg:hidden"
onClick={() => setOpenHamburger(!openHamburger)}
>
<HamburgerIcon className="w-6" />
<div
className={`${GENERIC_HAMBURGER_LINE} ${
!openHamburger && "translate-y-[7px] rotate-45"
}`}
/>
<div
className={`${GENERIC_HAMBURGER_LINE} ${
!openHamburger && "opacity-0"
}`}
/>
<div
className={`${GENERIC_HAMBURGER_LINE} ${
!openHamburger && "-translate-y-[7px] -rotate-45"
}`}
/>
</button>
</div>
<div
className={twMerge(
"flex h-full w-full flex-col bg-new-night-1200/25 py-6 backdrop-blur-lg lg:hidden",
!openHamburger && "hidden "
<AnimatePresence>
{!openHamburger && (
<motion.div
initial={{ opacity: 0, y: -100 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -100 }}
transition={{
type: "linear",
duration: 0.3,
ease: "easeInOut",
}}
className="z-[800] flex h-[calc(100vh-64px)] w-full flex-col bg-new-night-1200/25 py-6 backdrop-blur-lg lg:hidden"
>
<div className=" flex-1 space-y-6 overflow-hidden px-3 pb-3 sm:px-8">
<div className="max-h-full w-full overflow-scroll">
{dropdownItems.map((item, index) => (
<>
{item.items ? (
<RA.Root
type="single"
key={index}
defaultValue="item-1"
collapsible
>
<RA.Item value={item.label}>
<RA.Header className={MOBILE_ITEM_CLASS}>
<RA.Trigger className="group flex h-full w-full items-center justify-between">
{item.label}
<ChevronDownIcon className="w-4 text-new-night-400 transition-transform group-data-[state=open]:-rotate-180" />
</RA.Trigger>
</RA.Header>
<RA.Content className="space-y-1 overflow-hidden pt-2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
{item.items.map((item, index) => (
<div
key={index}
className={twMerge(
MOBILE_ITEM_CLASS,
"flex items-center gap-2 font-medium text-new-night-100/80"
)}
>
{item.label}
{item.type === "external" && (
<ExternalIcon className="w-4 text-new-night-400" />
)}
</div>
))}
</RA.Content>
</RA.Item>
</RA.Root>
) : (
<button className={MOBILE_ITEM_CLASS} key={index}>
{item.label}
</button>
)}
</>
))}
</div>
</div>
<div className="space-y-2 border-t border-white/5 p-6 pb-0 sm:p-8">
<Button color="ruby">Start Building</Button>
<Button color="ruby">Start Playing</Button>
<Button color="honey">Read Litepaper</Button>
<div className="flex items-center gap-4 pt-2 text-new-night-100">
<a href={SOCIAL.DISCORD} target="_blank" rel="noreferrer">
<DiscordIcon className="w-6" />
</a>
<a href={SOCIAL.TWITTER} target="_blank" rel="noreferrer">
<TwitterIcon className="w-6" />
</a>
<a href={SOCIAL.YOUTUBE} target="_blank" rel="noreferrer">
<YoutubeIcon className="w-6" />
</a>
<a href={SOCIAL.TWITCH} target="_blank" rel="noreferrer">
<TwitchIcon className="w-6" />
</a>
</div>
</div>
</motion.div>
)}
>
<div className=" flex-1 space-y-6 px-3 pb-3 sm:px-8">
<div className="h-full max-h-full w-full overflow-hidden">
{dropdownItems.map((item, index) => (
<>
{item.items ? (
<RA.Root
type="single"
key={index}
defaultValue="item-1"
collapsible
>
<RA.Item value={item.label}>
<RA.Header className={MOBILE_ITEM_CLASS}>
<RA.Trigger className="group flex h-full w-full items-center justify-between">
{item.label}
<ChevronDownIcon className="w-4 text-new-night-400 transition-transform group-data-[state=open]:-rotate-180" />
</RA.Trigger>
</RA.Header>
<RA.Content className="space-y-1 overflow-hidden pt-2 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
{item.items.map((item, index) => (
<div
key={index}
className={twMerge(
MOBILE_ITEM_CLASS,
"flex items-center gap-2 font-medium"
)}
>
{item.label}
{item.type === "external" && (
<ExternalIcon className="w-4 text-new-night-400" />
)}
</div>
))}
</RA.Content>
</RA.Item>
</RA.Root>
) : (
<button className={MOBILE_ITEM_CLASS} key={index}>
{item.label}
</button>
)}
</>
))}
</div>
</div>
<div className="space-y-2 border-t border-white/5 p-6 pb-0 sm:p-8">
<Button color="ruby">Start Building</Button>
<Button color="ruby">Start Playing</Button>
<Button color="honey">Read Litepaper</Button>
<div className="flex items-center gap-4 pt-2 text-new-night-100">
<a href={SOCIAL.DISCORD} target="_blank" rel="noreferrer">
<DiscordIcon className="w-6" />
</a>
<a href={SOCIAL.TWITTER} target="_blank" rel="noreferrer">
<TwitterIcon className="w-6" />
</a>
<a href={SOCIAL.YOUTUBE} target="_blank" rel="noreferrer">
<YoutubeIcon className="w-6" />
</a>
<a href={SOCIAL.TWITCH} target="_blank" rel="noreferrer">
<TwitchIcon className="w-6" />
</a>
</div>
</div>
</div>
</AnimatePresence>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion app/components/new-landing/NewLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from "react";
import NewNavigation from "../NewNavigation";
import Footer from "./Footer";

const DEV = true;
const DEV = false;

export const NewLayout = ({ children }: { children: React.ReactNode }) => {
return (
Expand Down
2 changes: 1 addition & 1 deletion app/components/new-landing/misc/Icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export const SteamIcon = ({ className }: IconProps) => (
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.32178 13.9196C5.28108 17.0683 8.21035 19.361 11.6746 19.361C15.9191 19.361 19.3599 15.9223 19.3599 11.6805C19.3599 7.43869 15.9191 4 11.6746 4C7.60187 4 4.26908 7.16652 4.00586 11.1702C4.0072 11.1725 4.00854 11.1747 4.00988 11.1769C4.01 11.1749 4.01006 11.1739 4.01006 11.1739L8.13972 12.8749C8.25261 12.7986 8.37319 12.7342 8.49949 12.6829C8.78961 12.5636 9.0951 12.5101 9.39963 12.524L11.2801 9.79385L11.2794 9.75593H11.277C11.277 8.14447 12.5866 6.83398 14.1962 6.83398C15.809 6.83734 17.1155 8.14447 17.1155 9.75593C17.1155 11.3674 15.8066 12.6793 14.1962 12.6793L14.1302 12.6781L11.442 14.5994C11.4498 14.9002 11.3938 15.1993 11.2777 15.4769C11.0602 15.9982 10.6445 16.4118 10.122 16.627C9.59955 16.8422 9.01295 16.8414 8.49108 16.6247C7.82774 16.3487 7.37623 15.7745 7.23213 15.1198L4.32178 13.9196ZM8.67769 16.1749C9.51515 16.5236 10.4787 16.1283 10.8279 15.2883H10.826C10.9946 14.8836 10.9955 14.4355 10.8284 14.0291C10.6612 13.6228 10.349 13.305 9.94073 13.1363C9.53773 12.969 9.10687 12.9738 8.72789 13.1178L9.71257 13.5246C10.0091 13.6485 10.2444 13.8849 10.3667 14.182C10.4889 14.479 10.4882 14.8124 10.3646 15.109C10.3036 15.2557 10.2142 15.389 10.1017 15.5013C9.98907 15.6135 9.85546 15.7024 9.70845 15.763C9.56145 15.8237 9.40394 15.8547 9.24492 15.8545C9.0859 15.8542 8.92849 15.8226 8.78168 15.7616L7.83134 15.368C8.00483 15.7316 8.30606 16.0188 8.67769 16.1749ZM12.8239 11.1316C13.1885 11.4965 13.6829 11.7022 14.1989 11.7036C14.715 11.7024 15.2095 11.4967 15.5741 11.1317C15.9388 10.7667 16.1438 10.2722 16.1442 9.7564C16.1437 9.24072 15.9386 8.74629 15.574 8.3814C15.2094 8.01651 14.7149 7.81091 14.1989 7.80964C13.683 7.81104 13.1886 8.01669 12.8241 8.38157C12.4596 8.74644 12.2546 9.24081 12.254 9.7564C12.2545 10.2721 12.4594 10.7666 12.8239 11.1316ZM13.1687 8.71979C12.8949 8.9941 12.7412 9.36583 12.7415 9.75328C12.7414 10.1407 12.8948 10.5123 13.1687 10.7866C13.4425 11.0608 13.8141 11.2151 14.2018 11.2157C14.5895 11.2153 14.9613 11.061 15.2353 10.7868C15.5093 10.5126 15.6631 10.1408 15.6629 9.75328C15.6629 8.94564 15.0075 8.29039 14.2018 8.29039C13.8141 8.29103 13.4425 8.44548 13.1687 8.71979Z"
fill="white"
fill="currentColor"
/>
</svg>
);
Expand Down
Loading

0 comments on commit 014be4c

Please sign in to comment.