feat: fix main page style

client/components/layouts/common.tsx

@@ -1,13 +1,35 @@
+"use client"
+
 import React, { PropsWithChildren } from "react"
+import { usePathname } from "next/navigation"
+
+import { cn } from "@/lib/utils"
 
 interface CommonPageLayout {
   title?: string
 }
 const CommonPageLayout: React.FunctionComponent<
   PropsWithChildren<CommonPageLayout>
 > = ({ title, children }) => {
+  const pathname = usePathname()
+  const isMainPage = () => {
+    const localePrefixes = ["/zh-hk", "/ca-en"]
+
+    const pathWithoutLocale = localePrefixes.reduce(
+      (path, prefix) => path.replace(prefix, ""),
+      pathname
+    )
+
+    return pathWithoutLocale === "/" || pathWithoutLocale === ""
+  }
+
   return (
-    <div className="container mt-4 h-full w-full">
+    <div
+      className={cn(
+        "mt-4 h-full w-full ",
+        isMainPage() ? "md:container" : "container"
+      )}
+    >
       {title && <h1 className="mb-2 text-left text-3xl font-bold">{title}</h1>}
 
       <>{children}</>

client/components/site-header.tsx

@@ -12,7 +12,8 @@ import LocaleDropDownMenu from "@/components/customized-ui/drop-down-menu/locale
 import { BaseNavigationMenu } from "@/components/customized-ui/navigation-menu/base"
 import { MobileNavigationMenu } from "@/components/customized-ui/navigation-menu/mobile"
 import { MainNav } from "@/components/main-nav"
-import { ThemeToggle } from "@/components/theme-toggle"
+
+// import { ThemeToggle } from "@/components/theme-toggle"
 
 export function SiteHeader() {
   const t = useI18n()

client/modules/main/components/carousels/contact-request.tsx

@@ -47,7 +47,7 @@ const ContactRequestCarousel: React.FunctionComponent<
   IContactRequestCarouselProps
 > = ({ list }) => {
   return (
-    <div className="relative flex h-32  w-full flex-row items-center justify-center overflow-hidden bg-slate-50 ">
+    <div className="relative flex h-32 w-full flex-row items-center justify-center overflow-hidden  bg-slate-50 ">
       <Marquee vertical className="text-xs [--duration:60s]">
         {list.map((data) => {
           if (data.type === "post") return <PostRow {...data} />

client/modules/main/components/carousels/post.tsx

@@ -55,8 +55,8 @@ const PostCarousel: React.FunctionComponent<IPostCarouselProps> = ({
           )
         })}
       </Marquee>
-      <div className="pointer-events-none absolute inset-y-0 left-0  w-2/12 bg-gradient-to-r from-white dark:from-background md:w-1/5"></div>
-      <div className="pointer-events-none absolute inset-y-0 right-0 w-2/12 bg-gradient-to-l from-white dark:from-background md:w-1/5"></div>
+      <div className="pointer-events-none inset-y-0 left-0 hidden w-2/12 bg-gradient-to-r  from-white dark:from-background md:absolute md:block md:w-1/5"></div>
+      <div className="pointer-events-none inset-y-0 right-0 hidden w-2/12 bg-gradient-to-l from-white dark:from-background md:absolute md:block md:w-1/5"></div>
     </div>
   )
 }

client/modules/main/template.tsx

@@ -29,8 +29,8 @@ const MainPageTemplate = ({
   const scopedT = useScopedI18n("index")
 
   return (
-    <div className="relative mt-72 flex h-screen w-full flex-row items-center justify-center md:mt-16 md:h-auto ">
-      <div className="relative z-30 mx-auto h-fit w-full max-w-7xl overflow-hidden  p-4 ">
+    <div className="relative mt-20 flex w-full flex-row items-center justify-center md:mt-16 md:h-screen ">
+      <div className="relative z-30 h-fit w-full overflow-hidden md:mx-auto md:max-w-7xl  md:p-4 ">
         <motion.div
           initial={{
             opacity: 0,
@@ -99,7 +99,7 @@ const MainPageTemplate = ({
             <PostCarousel list={posts} />
           </div>
 
-          <div className="mt-12 p-4">
+          <div className="mt-12 ">
             <ContactRequestCarousel list={contactList} />
           </div>
         </motion.div>