ud

src/components/Banner.module.css

@@ -14,7 +14,7 @@
   /* width: 10rem; */
   height: 10rem;
   object-fit: cover;
-  margin-bottom: -2.5rem;
+  /* margin-bottom: -2.5rem; */
 }
 
 .bgSwiper {
@@ -53,12 +53,10 @@
   inset: 0;
   z-index: 1;
   pointer-events: none;
-  background: linear-gradient(
+  background: linear-gradient(to right,
-    to right,
+      rgba(0, 0, 0, 0.5) 0%,
-    rgba(0, 0, 0, 0.5) 0%,
+      rgba(0, 0, 0, 0.2) 60%,
-    rgba(0, 0, 0, 0.2) 60%,
+      transparent 100%);
-    transparent 100%
-  );
   display: none;
 }
 
@@ -96,6 +94,8 @@
   color: rgba(255, 255, 255, 0.95);
   margin: 0;
   letter-spacing: 0.02em;
+  font-weight: 500;
+  line-height: 44px;
 }
 
 .heroLargeDesc {
@@ -182,4 +182,3 @@
     font-size: 0.875rem;
   }
 }
-

src/components/Banner.tsx

@@ -53,7 +53,7 @@ function BannerSlideVideo({
 export type { BannerConfig } from "@/type";
 
 type Props = {
-    title: string;
+    title?: string;
     subtitle?: string;
     desc?: string | React.ReactNode;
     content?: string;
@@ -101,7 +101,7 @@ export default function Banner({
                 if (child) return child.label;
             }
             const last = path.split("/").pop() ?? path;
-            return title;
+            return title ?? "";
         };
         const items = paths.map((path) => ({
             label: getLabelByPath(path),
@@ -117,7 +117,7 @@ export default function Banner({
     const heroContent = (
         <div className={styles.heroContent} style={{ gap: "1.875rem" }}>
             <ScrollReveal preset="slideUp">
-                {icon ? <img src={icon} alt="" className={styles.heroIcon} />
+                {icon ? icon
                     :
                     <h1 className={`${styles.heroTitle} ${titleSize === "medium" ? styles.heroTitleMedium : ""}`}>{title}</h1>
                 }

src/pages/About/History.tsx

@@ -54,7 +54,7 @@ export default function AboutHistory() {
         <div>
             <Banner
                 title={banner?.title ?? ""}
-                desc={banner?.content}
+                largedesc={banner?.content}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
             />
 

src/pages/Business/BaseGroup.tsx

@@ -33,7 +33,7 @@ export default function BaseGroup() {
         <div>
             <Banner
                 title={banner?.title ?? ""}
-                desc={banner?.content}
+                largedesc={banner?.content}
                 titleSize={banner?.titleSize as "medium" | "large" | undefined ?? "medium"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
             />

src/pages/Business/CommercialGroup.tsx

@@ -90,7 +90,7 @@ export default function BusinessCommercialGroup() {
         <div>
             <Banner
                 title={banner?.title ?? ""}
-                desc={banner?.content}
+                largedesc={banner?.content}
                 titleSize={banner?.titleSize as "medium" | "large" | undefined ?? "medium"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-commercial-group.png"}
             />

src/pages/Business/CommercialGroupDetail.tsx

@@ -18,7 +18,7 @@ export default function BusinessCommercialGroupDetail() {
         <div>
             <Banner
                 title={banner?.title ?? ""}
-                icon={banner?.icon ?? ""}
+                icon={banner?.icon && <img src={banner?.icon} alt="" style={{  height: '10rem' }} />}
                 largedesc={(banner as BannerConfig)?.largeContent}
                 titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-commercial-group.png"}

src/pages/Business/InvestGroup.tsx

@@ -22,7 +22,7 @@ export default function InvestGroup() {
         <div>
             <Banner
                 title={banner?.title ?? ""}
-                desc={banner?.content}
+                largedesc={banner?.content}
                 titleSize={banner?.titleSize as "medium" | "large" | undefined ?? "medium"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
             />

src/pages/Business/RealtyGroup.tsx

@@ -36,7 +36,7 @@ export default function RealtyGroup() {
         <div>
             <Banner
                 title={banner?.title ?? ""}
-                desc={banner?.content}
+                largedesc={banner?.content}
                 titleSize={banner?.titleSize as "medium" | "large" | undefined ?? "medium"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
             />

src/pages/Business/RuijingGroup.tsx

@@ -27,7 +27,7 @@ export default function RuijingGroup() {
         <div>
             <Banner
                 title={banner?.title ?? ""}
-                desc={banner?.content}
+                largedesc={banner?.content}
                 titleSize={banner?.titleSize as "medium" | "large" | undefined ?? "medium"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
             />

src/pages/Social/Foundation.tsx

@@ -71,7 +71,8 @@ export default function Foundation() {
     return (
         <div>
             <Banner
-                title={banner?.title ?? ""}
+                icon={banner?.icon && <img src={banner?.icon} alt="" style={{ width: '26rem', height: '8.375rem' }} />}
+                subtitle={banner?.title ?? ""}
                 content={(banner as BannerConfig)?.content}
                 titleSize={(banner as BannerConfig)?.titleSize ?? "medium"}
                 backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}