Update src/app/styles/base.css

Merge version_1 into main

src/app/page.tsx

@@ -2,9 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
@@ -32,14 +32,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "Services", id: "services" },
-        {
+        { name: "Price", id: "price" },
-          name: "Services",          id: "services"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "Price",          id: "price"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="Siang Heng"
     />
@@ -47,53 +43,28 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Affordable Gold Jewelry in Johor"
       description="Trusted by generations for quality gold, transparent pricing, and personalized service."
       kpis={[
-        {
+        { value: "40+", label: "Years Trusted" },
-          value: "40+",          label: "Years Trusted"},
+        { value: "99.9%", label: "Gold Purity" },
-        {
+        { value: "100%", label: "Transparent Pricing" },
-          value: "99.9%",          label: "Gold Purity"},
-        {
-          value: "100%",          label: "Transparent Pricing"},
       ]}
       enableKpiAnimation={true}
       buttons={[
-        {
+        { text: "WhatsApp Now", href: "https://wa.me/60123456789" },
-          text: "WhatsApp Now",          href: "https://wa.me/60123456789"},
+        { text: "Get Directions", href: "https://maps.google.com" },
-        {
-          text: "Get Directions",          href: "https://maps.google.com"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-rock-concrete-tray_23-2150329703.jpg"
       imageAlt="Luxury gold jewelry boutique"
       mediaAnimation="slide-up"
       avatars={[
-        {
+        { src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-rock-concrete-tray_23-2150329670.jpg", alt: "Customer 1" },
-          src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-rock-concrete-tray_23-2150329670.jpg",          alt: "Customer 1"},
+        { src: "http://img.b2bpic.net/free-photo/jewelry-box_1339-388.jpg", alt: "Customer 2" },
-        {
+        { src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-felt-jewelry-display_23-2150329655.jpg", alt: "Customer 3" },
-          src: "http://img.b2bpic.net/free-photo/jewelry-box_1339-388.jpg",          alt: "Customer 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-felt-jewelry-display_23-2150329655.jpg",          alt: "Customer 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-with-marble_23-2150329646.jpg",          alt: "Customer 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-rock-concrete-tray_23-2150329711.jpg",          alt: "Customer 5"},
       ]}
       avatarText="Trusted by 10,000+ customers"
-      marqueeItems={[
-        {
-          type: "text",          text: "Daily Gold Updates"},
-        {
-          type: "text",          text: "Lowest Labor Charge"},
-        {
-          type: "text",          text: "Lifetime Buyback"},
-        {
-          type: "text",          text: "Authentic Gold"},
-        {
-          type: "text",          text: "Expert Repairs"},
-      ]}
     />
   </div>
 
@@ -103,10 +74,8 @@ export default function LandingPage() {
       title="Trusted Local Jeweler"
       description="Kedai Emas Siang Heng has been a staple in Johor, offering honest gold rates and exquisite craftsmanship for all our valued members."
       metrics={[
-        {
+        { value: "10k+", title: "Happy Customers" },
-          value: "10k+",          title: "Happy Customers"},
+        { value: "5k+", title: "Custom Designs" },
-        {
-          value: "5k+",          title: "Custom Designs"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/sales-man-jewelry-shop-demonstrating-jewellery_1303-30668.jpg"
       imageAlt="Our jewelry store experts"
@@ -121,33 +90,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Gold Trading", description: "Buy and sell gold at market-leading rates.", icon: TrendingUp, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/expensive-golden-ring-with-white-powder-background_23-2150347038.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/dark-wall-backdrop-frame_53876-90122.jpg" }] },
-          title: "Gold Trading",          description: "Buy and sell gold at market-leading rates.",          icon: TrendingUp,
+        { title: "Custom Design", description: "Create your perfect piece with our master artisans.", icon: Sparkles, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-beautiful-golden-necklace-bracelet-earing-white-surface_181624-58013.jpg" }, { imageSrc: "http://img.b2bpic.net/free-vector/golden-collection-luxury-banners-different-shapes_1017-10042.jpg" }] },
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/expensive-golden-ring-with-white-powder-background_23-2150347038.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/dark-wall-backdrop-frame_53876-90122.jpg"},
-          ],
-        },
-        {
-          title: "Custom Design",          description: "Create your perfect piece with our master artisans.",          icon: Sparkles,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-beautiful-golden-necklace-bracelet-earing-white-surface_181624-58013.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-vector/golden-collection-luxury-banners-different-shapes_1017-10042.jpg"},
-          ],
-        },
-        {
-          title: "Gold Repair",          description: "Restore your favorite treasures to perfection.",          icon: Wrench,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-rock-concrete-tray_23-2150329677.jpg"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-metallic-items-second-hand-market_23-2149338419.jpg"},
-          ],
-        },
       ]}
       title="Our Professional Services"
       description="Comprehensive jewelry care and trading services under one roof."
@@ -160,12 +104,9 @@ export default function LandingPage() {
       title="Why Choose Siang Heng?"
       tag="Advantages"
       metrics={[
-        {
+        { id: "1", value: "Daily", description: "Gold price updates" },
-          id: "1",          value: "Daily",          description: "Gold price updates"},
+        { id: "2", value: "RM10", description: "1 Member Point" },
-        {
+        { id: "3", value: "Fair", description: "Transparent gold rates" },
-          id: "2",          value: "RM10",          description: "1 Member Point"},
-        {
-          id: "3",          value: "Fair",          description: "Transparent gold rates"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -177,14 +118,7 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       plans={[
-        {
+        { id: "gold-999", badge: "Gold", price: "RM 355/g", subtitle: "Current 999 Gold Price", buttons: [{ text: "Check Daily Price" }], features: ["Transparent", "Fair", "Updated Hourly"] },
-          id: "gold-999",          badge: "Gold",          price: "RM 355/g",          subtitle: "Current 999 Gold Price",          buttons: [
-            {
-              text: "Check Daily Price"},
-          ],
-          features: [
-            "Transparent",            "Fair",            "Updated Hourly"],
-        },
       ]}
       title="Today's Gold Price"
       description="Rates updated daily for your convenience."
@@ -195,8 +129,7 @@ export default function LandingPage() {
       <SocialProofOne
       textboxLayout="default"
       useInvertedBackground={false}
-      names={[
+      names={["Exclusive Rewards", "Member Discounts", "Birthday Bonuses"]}
-        "Earn 1 Point for every RM10",        "Redeem special vouchers",        "Exclusive membership discounts",        "Member appreciation events",        "VIP birthday rewards"]}
       title="Member Rewards"
       description="Join our program today. Earn 1 point for every RM10 spent."
     />
@@ -209,18 +142,8 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "1", name: "Gold Ring", price: "RM 899", variant: "24K", imageSrc: "http://img.b2bpic.net/free-photo/fashion-chain-glass-jewelry-engagement-wedding_1400-21.jpg" },
-          id: "1",          name: "Gold Ring",          price: "RM 899",          variant: "24K",          imageSrc: "http://img.b2bpic.net/free-photo/fashion-chain-glass-jewelry-engagement-wedding_1400-21.jpg"},
+        { id: "2", name: "Classic Chain", price: "RM 2500", variant: "22K", imageSrc: "http://img.b2bpic.net/free-photo/black-gold-easter-egg-pattern-made-trendy-style-egg_559531-11096.jpg" },
-        {
-          id: "2",          name: "Classic Chain",          price: "RM 2500",          variant: "22K",          imageSrc: "http://img.b2bpic.net/free-photo/black-gold-easter-egg-pattern-made-trendy-style-egg_559531-11096.jpg"},
-        {
-          id: "3",          name: "Gold Earrings",          price: "RM 450",          variant: "24K",          imageSrc: "http://img.b2bpic.net/free-photo/girl-with-polka-doy-skirt_1162-14.jpg"},
-        {
-          id: "4",          name: "Luxury Bangle",          price: "RM 3200",          variant: "22K",          imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-rock-concrete-tray_23-2150329710.jpg"},
-        {
-          id: "5",          name: "Modern Pendant",          price: "RM 1200",          variant: "24K",          imageSrc: "http://img.b2bpic.net/free-photo/women-shopping-buying-consumer-products-customer-day-celebration_23-2151623481.jpg"},
-        {
-          id: "6",          name: "Custom Bracelet",          price: "RM 5500",          variant: "22K",          imageSrc: "http://img.b2bpic.net/free-photo/high-fashion-look-glamor-closeup-portrait-beautiful-sexy-stylish-blond-caucasian-young-woman-model-with-bright-makeup_158538-3054.jpg"},
       ]}
       title="Jewelry Collection"
       description="Explore our elegant gold jewelry selections."
@@ -228,30 +151,27 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCenter
-      useInvertedBackground={false}
+        title="Get in Touch"
-      background={{
+        description="We are available in multiple languages to assist you with your gold jewelry needs."
-        variant: "sparkles-gradient"}}
+        tag="Multilingual Support"
-      text="Visit us at our Johor location or chat with us on WhatsApp for inquiries."
+        background={{ variant: "sparkles-gradient" }}
-      buttons={[
+        useInvertedBackground={false}
-        {
+      />
-          text: "WhatsApp Now",          href: "https://wa.me/60123456789"},
-        {
-          text: "Open in Google Maps",          href: "https://maps.google.com"},
-      ]}
-    />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterMedia
-      logoText="Kedai Emas Siang Heng"
+        logoText="Kedai Emas Siang Heng"
-      leftLink={{
+        videoSrc="http://img.b2bpic.net/free-video/gold-sparkles.mp4"
-        text: "Privacy Policy",        href: "#"}}
+        columns={[
-      rightLink={{
+          { title: "Services", items: [{ label: "Gold Trading", href: "#" }, { label: "Repairs", href: "#" }] },
-        text: "Terms of Service",        href: "#"}}
+          { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Privacy", href: "#" }] }
-    />
+        ]}
+        copyrightText="© 2025 | Siang Heng | Multi-Language Global Support"
+      />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-archivo), sans-serif;
+  font-family: var(--font-playfair), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-archivo), sans-serif;
+  font-family: var(--font-playfair), sans-serif;
 }