feat: centralize brand information in package data and integrate dynamically into contact and footer sections

apps/product-site/src/components/sections/Footer.tsx

@@ -1,7 +1,9 @@
-import { useTranslations } from 'next-intl';
+import { useTranslations, useLocale } from 'next-intl';
+import { brandInfo } from '@repo/brand';
 
 export function Footer() {
   const t = useTranslations();
+  const locale = useLocale() as 'id' | 'en';
 
   const footerLinks = [
     { labelKey: 'Nav.home', href: '#' },
@@ -12,9 +14,9 @@ export function Footer() {
   ];
 
   const socialLinks = [
-    { icon: 'uil-envelope-alt', href: '#' },
-    { icon: 'uil-phone', href: '#' },
-    { icon: 'uil-youtube', href: '#' },
+    { icon: 'uil-envelope-alt', href: brandInfo.socialLinks.email },
+    { icon: 'uil-phone', href: brandInfo.socialLinks.phone },
+    { icon: 'uil-youtube', href: brandInfo.socialLinks.youtube },
   ];
 
   return (
@@ -31,7 +33,7 @@ export function Footer() {
               <span className="brand-name" style={{ color: '#fff' }}></span>
             </div>
             <p>{t('Footer.desc')}</p>
-            <p className="address">{t('Contact.address')}</p>
+            <p className="address">{brandInfo.address[locale] || brandInfo.address.id}</p>
           </div>
           <div className="footer-cols">
             <div className="footer-col">
@@ -44,8 +46,8 @@ export function Footer() {
             </div>
             <div className="footer-col">
               <h5>{t('Nav.contact')}</h5>
-              <a href="mailto:hello@pintumasuk.id">hello@pintumasuk.id</a>
-              <a href="tel:+6281234567890">+62 812-3456-7890</a>
+              <a href={`mailto:${brandInfo.email}`}>{brandInfo.email}</a>
+              <a href={`tel:${brandInfo.phone.replace(/[\s-]/g, '')}`}>{brandInfo.phone}</a>
             </div>
           </div>
         </div>