Fixes/landing page

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "i18n-ally.localesPaths": [
+        "public/locales"
+    ]
+}

app/components/Dialog.tsx

@@ -9,11 +9,10 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 
 const DialogPortal = ({
-  className,
   children,
   ...props
 }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
+  <DialogPrimitive.Portal {...props}>
     <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
       {children}
     </div>

app/components/NewNavigation.tsx

@@ -150,12 +150,12 @@ const NewNavigation = () => {
   return (
     <div
       className={twMerge(
-        "fixed top-0 left-1/2 z-[999] mx-auto flex max-h-screen w-screen max-w-9xl -translate-x-1/2 flex-col items-center justify-center p-0 p-3 opacity-100 transition-opacity lg:p-6",
+        "fixed top-0 left-1/2 z-[999] mx-auto flex max-h-screen w-screen max-w-9xl -translate-x-1/2 flex-col items-center justify-center p-3 opacity-100 transition-opacity lg:p-6",
         openHamburger && "bg-new-night-1200 lg:bg-transparent",
         !visible && "pointer-events-none opacity-0"
       )}
     >
-      <div className="relative z-[900] flex h-16 w-full items-center justify-between rounded-2xl border border-white/5 bg-new-night-1200/25 bg-new-night-1200/25 px-6 px-6 backdrop-blur-lg md:px-4 lg:h-20">
+      <div className="relative z-[900] flex h-16 w-full items-center justify-between rounded-2xl border border-white/5 bg-new-night-1200/25 px-6 backdrop-blur-lg md:px-4 lg:h-20">
         <div className="flex items-center gap-0 sm:gap-9">
           <Link to="/">
             <Logo className="w-[148px] xl:w-[160px]" />
@@ -284,7 +284,7 @@ const NewNavigation = () => {
             className="z-[800] flex h-[calc(100vh-64px)] w-full flex-col bg-new-night-1200 py-6 backdrop-blur-2xl 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">
+              <div className="scrollbar-hide max-h-full w-full overflow-scroll">
                 {dropdownItems.map((item, index) => (
                   <>
                     {item.items ? (

app/components/new-landing/sections/Ctas.tsx

@@ -16,7 +16,7 @@ const Ctas = () => {
       <CtasCutOff className="absolute top-[1px] left-0 hidden w-[144px] -translate-y-[100%] 2xl:block" />
       <div className="container grid grid-cols-1 grid-rows-[auto_1px] gap-y-10 gap-x-16 md:grid-cols-[1fr_1px_1fr] 2xl:grid-cols-[1fr_1px_1fr_1px_1fr_1px_1fr] 2xl:gap-y-0">
         <div className="space-y-4 md:h-60 2xl:space-y-6">
-          <h1 className="text-xl font-bold text-new-night-100 2xl:text-3xl">
+          <h1 className="text-xl font-bold text-new-night-100 lg:text-3xl">
             For Studios <br className="hidden xl:block" /> and Developers
           </h1>
           <p className="pb-4 md:pb-0">
@@ -29,7 +29,7 @@ const Ctas = () => {
         </div>
         <div className="bg-new-night-100/40" />
         <div className="relative space-y-4 md:h-60 2xl:space-y-6">
-          <h1 className="text-xl font-bold text-new-night-100 2xl:text-3xl">
+          <h1 className="text-xl font-bold text-new-night-100 lg:text-3xl">
             For Content Creators
           </h1>
           <p className="">
@@ -47,7 +47,7 @@ const Ctas = () => {
         </div>
         <div className="h-[1px] w-full bg-new-night-100/40 md:col-span-3  md:h-auto  2xl:col-span-1 2xl:w-auto" />
         <div className="relative space-y-6 md:h-60">
-          <h1 className="max-w-[300px] text-xl font-bold text-new-night-100 md:max-w-none 2xl:text-3xl">
+          <h1 className="max-w-[300px] text-xl font-bold text-new-night-100 md:max-w-none lg:text-3xl">
             Get the latest Treasure news
           </h1>
 
@@ -60,7 +60,7 @@ const Ctas = () => {
         </div>
         <div className="h-[1px] w-full bg-new-night-100/40 md:h-auto md:w-auto" />
         <div className="relative space-y-6 md:h-60">
-          <h1 className="text-xl font-bold text-new-night-100 2xl:text-3xl">
+          <h1 className="text-xl font-bold text-new-night-100 lg:text-3xl">
             Join an unmatched community
           </h1>
 
@@ -71,31 +71,31 @@ const Ctas = () => {
               rel="noreferrer"
               className="text-new-night-100"
             >
-              <DiscordIcon className="w-6 2xl:w-10" />
+              <DiscordIcon className="w-10" />
             </a>
             <a
               href={SOCIAL.TWITTER}
               target="_blank"
               rel="noreferrer"
               className="text-new-night-100"
             >
-              <TwitterIcon className="w-6 2xl:w-10" />
+              <TwitterIcon className="w-10" />
             </a>
             <a
               href={SOCIAL.YOUTUBE}
               target="_blank"
               rel="noreferrer"
               className="text-new-night-100"
             >
-              <YoutubeIcon className="w-6 2xl:w-10" />
+              <YoutubeIcon className="w-10" />
             </a>
             <a
               href={SOCIAL.TWITCH}
               target="_blank"
               rel="noreferrer"
               className="text-new-night-100"
             >
-              <TwitchIcon className="w-6 2xl:w-10" />
+              <TwitchIcon className="w-10" />
             </a>
           </div>
         </div>

app/components/new-landing/sections/Intro.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react";
 import PLACEHOLDER_IMAGE from "~/../public/img/new-landing/PLR_enSG_1920x1080_SOCIAL_MAHmovieposter3.webp";
-import VIDEO from "~/../public/img/new-landing/trailer.mp4";
+import VIDEO from "~/../public/img/new-landing/Treasure_Mini_Game_Trailer_No_Intro_LR_1080p.mp4";
 
 import { ChevronRightIcon } from "../misc/Icons";
 import { VideoCutOff } from "../misc/Svgs";
@@ -37,7 +37,7 @@ const Intro = () => {
           playsInline
           src={VIDEO}
           loop
-          className="aspect-video w-full"
+          className=" aspect-video w-full bg-red-50"
         />
       </div>
       <div className="container flex flex-col items-center gap-10 py-12 sm:py-14 md:gap-32 xl:flex-row  xl:py-0 ">
@@ -48,6 +48,7 @@ const Intro = () => {
             muted
             src={VIDEO}
             loop
+            playsInline
             className="aspect-video w-full min-w-[560px]"
           />
         </div>

app/routes/create.tsx

@@ -61,7 +61,7 @@ const ApplyNowButton = () => (
     href={FORM_URL}
     target="_blank"
     rel="noreferrer"
-    className="text-md mt-6 flex h-10 w-max items-center rounded-md border border-ruby-900 bg-ruby-900 px-4 font-medium transition-colors hover:bg-transparent hover:text-ruby-900 md:mt-14 md:h-14 md:rounded-lg md:px-8 md:text-lg"
+    className="text-md mt-6 flex h-10 w-max items-center rounded-md border border-ruby-900 bg-ruby-900 px-4 font-semibold transition-colors hover:bg-transparent hover:text-ruby-900 md:mt-14 md:h-14 md:rounded-lg md:px-8 md:text-lg"
   >
     Apply Now
   </a>
@@ -230,7 +230,7 @@ const Partner = () => {
               <div className="border-t-6 absolute top-0 left-0 h-0 w-0 border-l-2 border-r-2 bg-red-500"></div>
             </div>
             {/* This width here */}
-            <div className="flex-items-center absolute top-[24.5%] left-[5%] z-20 h-[52%] w-[67%] justify-center rounded-xl border-2 border-[red] bg-gradient-partner-hero sm:border-[green] md:w-[58%] md:rounded-[16px] md:border-[yellow] lg:left-[11%] lg:h-[50%] lg:border-[pink]">
+            <div className="flex-items-center absolute top-[24.5%] left-[5%] z-20 h-[52%] w-[67%] justify-center rounded-xl bg-gradient-partner-hero md:w-[58%] md:rounded-[16px] lg:left-[11%] lg:h-[50%]">
               <img
                 src={red_diamond_gif}
                 alt=""
@@ -302,7 +302,7 @@ const Partner = () => {
                     <TestimonialCard testimonial={testimonial} key={i} />
                   ))}
                 </div>
-                <div className="group-hover:pause animate-[marquee2_20s_linear_infinite absolute] top-0 ml-4 flex gap-5 sm:animate-[marquee2_20s_linear_infinite]">
+                <div className="group-hover:pause absolute top-0 ml-4 flex animate-[marquee2_20s_linear_infinite] gap-5 sm:animate-[marquee2_20s_linear_infinite]">
                   {Testimonials.map((testimonial, i) => (
                     <TestimonialCard testimonial={testimonial} key={i} />
                   ))}

app/styles/new-landing.css

@@ -24,3 +24,12 @@
 .swiper-slide a {
   display: block;
 }
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

app/utils/parse.server.ts

@@ -1,8 +1,7 @@
 import type { RenderNode } from "@contentful/rich-text-html-renderer";
 import { documentToHtmlString } from "@contentful/rich-text-html-renderer";
 import type { Block, Inline } from "@contentful/rich-text-types";
-import { INLINES } from "@contentful/rich-text-types";
-import { BLOCKS } from "@contentful/rich-text-types";
+import { INLINES, BLOCKS } from "@contentful/rich-text-types";
 import type { GetBlogPostQuery } from "~/graphql/app.generated";
 import { slugify, toWebp } from "./lib";
 import highlightjs from "highlight.js";