fix: ui font and banner grid size

consolelabs · Dec 14, 2023 · 14d3076 · 14d3076
1 parent de459ca
commit 14d3076
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 70 deletions.
diff --git a/components/LandingPage/About.tsx b/components/LandingPage/About.tsx
@@ -32,11 +32,18 @@ const products = [
 
 export default function About() {
   return (
-    <div id="about" className="relative bg-white px-5 py-12">
+    <div id="about" className="relative bg-white px-5 lg:px-20 py-12">
       <div className="relative z-0 max-w-7xl mx-auto space-y-5">
         <div className="justify-between items-center gap-3 inline-flex w-full">
-          <img alt="icon info" src="images/info.svg" className="h-8 w-8" />
-          <Typography level="h4" className="flex-1 !text-zinc-900 !font-medium">
+          <img
+            alt="icon info"
+            src="images/info.svg"
+            className="h-6 w-6 lg:h-8 lg:w-8"
+          />
+          <Typography
+            level="h4"
+            className="flex-1 !text-zinc-900 !font-medium !text-2xl lg:text-4xl"
+          >
             More about Neko
           </Typography>
           <a
@@ -55,7 +62,7 @@ export default function About() {
         </div>
         <Typography
           level="p5"
-          className="!font-light !text-base !text-zinc-800"
+          className="!font-normal !text-base !text-zinc-800"
         >
           <span className="font-bold">Cyber Neko</span>
           <span>, also known as </span>

diff --git a/components/LandingPage/Banner.tsx b/components/LandingPage/Banner.tsx
@@ -4,9 +4,9 @@ import { Button, Typography } from '@mochi-ui/core'
 
 export default function Banner() {
   return (
-    <div id="neko-emoji-banner" className="bg-stone-50 px-5 py-12">
+    <div id="neko-emoji-banner" className="bg-stone-50 px-5 lg:px-20 py-20">
       <div className="max-w-7xl mx-auto flex flex-wrap items-center justify-center">
-        <div className="w-full lg:w-1/3 order-2 lg:order-1 space-y-4">
+        <div className="w-full lg:w-5/12 order-2 lg:order-1 space-y-4">
           <Typography
             level="h1"
             className="text-zinc-900 !text-2xl lg:!text-7xl"
@@ -55,7 +55,7 @@ export default function Banner() {
             </Button>
           </div>
         </div>
-        <div className="w-full lg:w-2/3 order-1 lg:order-2">
+        <div className="w-full lg:w-7/12 order-1 lg:order-2">
           <img
             src="images/neko-pack.png"
             alt=""

diff --git a/components/LandingPage/CTA.tsx b/components/LandingPage/CTA.tsx
@@ -2,7 +2,7 @@ import { Typography } from '@mochi-ui/core'
 
 export default function CTA() {
   return (
-    <div className="max-w-7xl mx-auto py-16 px-5">
+    <div className="max-w-7xl mx-auto py-20 px-5 lg:px-20">
       <div className="flex-col justify-center items-center gap-6 flex">
         <img className="w-24 h-24" src="images/neko-cup.png" alt="" />
         <div className="flex-col justify-start items-center gap-2 flex">

diff --git a/components/LandingPage/Gallery.tsx b/components/LandingPage/Gallery.tsx
@@ -69,7 +69,10 @@ export default function Gallery() {
   const [showAll, setShowAll] = useState(false)
 
   return (
-    <div id="gallery" className="relative bg-white px-5 py-12 overflow-hidden">
+    <div
+      id="gallery"
+      className="relative bg-white px-5 lg:px-20 py-8 lg:py-28 overflow-hidden"
+    >
       <div
         className={clsx(
           'relative z-0 max-w-7xl mx-auto grid grid-cols-5 lg:grid-cols-8 gap-5 lg:gap-10 transition-all overflow-hidden',

diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
@@ -14,7 +14,7 @@ import {
 export default function Footer() {
   return (
     <MochiFooter
-      className="!items-start"
+      className="!items-start lg:!px-20"
       copyrightText="Copyright © 2023 Console Labs, All rights reserved"
       logo={<img className="h-14 w-14" alt="" src="images/logo-grid.png" />}
       nav={[

diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
@@ -11,6 +11,7 @@ import {
   TopBar,
   Typography,
 } from '@mochi-ui/core'
+import Link from 'next/link'
 
 const shareItems = [
   <Button
@@ -101,14 +102,17 @@ export default function Navbar() {
         <TopBar
           className="border-none"
           leftSlot={
-            <div className="h-10 justify-start items-center gap-3 inline-flex">
+            <Link
+              href=""
+              className="h-10 justify-start items-center gap-3 inline-flex"
+            >
               <div className="w-10 h-10 justify-center items-center flex">
                 <img className="w-10 h-10" src="images/logo.png" alt="" />
               </div>
               <Typography className="text-base font-black uppercase leading-normal">
                 cyber neko
               </Typography>
-            </div>
+            </Link>
           }
           rightSlot={
             <>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,8 @@
 import '@styles/globals.css'
-// import 'nprogress/nprogress.css'
-// import '@styles/nprogress.css'
+import clsx from 'clsx'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
 
 import type { AppProps } from 'next/app'
 
@@ -9,7 +11,7 @@ import Footer from '@components/layout/Footer'
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <main className="relative pt-14 lg:pt-0">
+    <main className={clsx(inter.className, 'relative pt-14 lg:pt-0')}>
       <Navbar />
       <Component {...pageProps} />
       <Footer />

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml