style: improve mobile UI for hero and project cards

Author: cuongdcdev

app/layout.tsx

@@ -8,7 +8,7 @@ import Dragon from "@/components/ui/dragon/dragon";
 import Navbar from "@/components/ui/navbar";
 import site from "@/config/site";
 import SearchModal from "@/components/modals/search";
-import Banner from "@/components/ui/banner/banner";
+// import Banner from "@/components/ui/banner/banner";
 
 // const manrope = Manrope({ subsets: ["latin"] });
 
@@ -34,7 +34,7 @@ export const metadata: Metadata = {
     "NEAR dApps",
     "NEAR DeFi",
     "NEAR AI",
-    "NEAR Intents"
+    "NEAR Intents",
     "NEAR Chain Abstraction",
     "blockchain directory",
     "crypto projects",
@@ -124,7 +124,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <Footer />
           <Dragon/>
         </div>
-        <Banner/>
+        {/* <Banner/> */}
       </body>
     </html>
   );

components/home/hero.tsx

@@ -9,8 +9,8 @@ export default function HomeHero() {
     <>
       <section id="home-hero" className="container relative z-[5] mx-auto mt-16 mb-0 flex flex-col items-center justify-center gap-6 sm:my-8">
         <HomeImages />
-        <h1 className="z-[5] text-balance text-center text-[2.5rem] font-bold leading-tight text-white sm:text-7xl">
-          Discover NEAR <br/> Ecosystem
+        <h1 className="z-[5] text-balance text-center text-4xl sm:text-5xl lg:text-7xl font-bold leading-tight text-white">
+          Discover NEAR Ecosystem
         </h1>
         {/* <HomeStats /> */}
         <GradientButton

components/ui/project-card.tsx

@@ -42,7 +42,7 @@ export default function ProjectCard({ project, maxWidth }: ProjectCardProps) {
       href={`/project/${project.slug}`}
       onClick={()=>{        
       }}
-      className={`project-card grow-1 min-h-92 flex w-full ${maxWidth ? "" : "max-w-[20rem]"} gap- shrink-0 cursor-pointer flex-col items-start justify-start gap-3 overflow-hidden rounded-lg bg-[#11141B] px-5 py-4 transition-all duration-300 ease-in-out hover:bg-[#2b2d3a] md:justify-normal md:px-8 md:py-7`}
+      className={`project-card snap-start grow-1 min-h-92 flex w-[85vw] ${maxWidth ? "" : "max-w-[20rem]"} shrink-0 cursor-pointer flex-col items-start justify-start gap-3 overflow-hidden rounded-lg bg-[#11141B] px-5 py-4 transition-all duration-300 ease-in-out hover:bg-[#2b2d3a] md:justify-normal md:px-8 md:py-7 md:w-full`}
     >
       <div className="flex w-full items-center gap-2 overflow-hidden md:h-auto md:flex-col md:items-start">
         <ImageWithFallback