feat: replace icons and obfuscate email

app/privacy/page.tsx

@@ -2,8 +2,21 @@
 
 import { CustomCard } from '@components/CustomCard';
 import { SchemaOrg } from '@components/SchemaOrg';
+import { useState, useEffect } from 'react';
+
+const useObfuscatedEmail = () => {
+  const [email, setEmail] = useState<string | null>(null);
+
+  useEffect(() => {
+    setEmail(process.env.NEXT_PUBLIC_BRAND_EMAIL || null);
+  }, []);
+
+  return email;
+};
 
 const Privacy = () => {
+  const email = useObfuscatedEmail();
+
   const schema = {
     '@context': 'https://schema.org',
     '@type': 'WebSite',
@@ -431,12 +444,16 @@ const Privacy = () => {
       <p className='leading-relaxed'>
         If you have any questions about this Privacy Policy, You can contact us
         by writing to{' '}
+        {email ? (
           <a
-          href={`mailto:${process.env.NEXT_PUBLIC_BRAND_EMAIL}`}
+            href={`mailto:${email}`}
             className='text-purple-600 hover:text-purple-700'
           >
-          {process.env.NEXT_PUBLIC_BRAND_EMAIL}
+            {email}
           </a>
+        ) : (
+          <span className='text-gray-400'>loading...</span>
+        )}
         .
       </p>
     </div>

components/email/components/Footer.tsx

@@ -1,12 +1,17 @@
-import {
-  User,
-  Building2,
-  Mail,
-  LogOut,
-  LayoutGrid,
-  Shield,
-  Home
-} from 'lucide-react';
+const iconStyle = {
+  display: 'inline-block',
+  verticalAlign: 'middle'
+};
+
+const Icon = ({ name, size = 16 }: { name: string; size?: number }) => (
+  <img
+    src={`${process.env.HOME_URL}/email-icons/${name}.png`}
+    width={size}
+    height={size}
+    alt=""
+    style={iconStyle}
+  />
+);
 
 export const Footer = () => {
   return (
@@ -44,7 +49,7 @@ export const Footer = () => {
               letterSpacing: '0.05em'
             }}
           >
-            <User size={16} color='#386FA4' />
+            <Icon name="user" size={16} />
             Contact Us
           </h4>
           <p
@@ -57,7 +62,7 @@ export const Footer = () => {
               color: '#4A5568'
             }}
           >
-            <Building2 size={14} color='#386FA4' />
+            <Icon name="building-2" size={14} />
             {process.env.NEXT_PUBLIC_BRAND_NAME}
           </p>
           <p
@@ -70,7 +75,7 @@ export const Footer = () => {
               color: '#4A5568'
             }}
           >
-            <Mail size={14} color='#386FA4' />
+            <Icon name="mail" size={14} />
             <a
               href={`mailto:${process.env.NEXT_PUBLIC_BRAND_EMAIL}`}
               style={{ color: '#386FA4', textDecoration: 'none' }}
@@ -88,7 +93,7 @@ export const Footer = () => {
               color: '#4A5568'
             }}
           >
-            <LogOut size={14} color='#386FA4' />
+            <Icon name="log-out" size={14} />
             <span>
               Click{' '}
               <a
@@ -124,7 +129,7 @@ export const Footer = () => {
               letterSpacing: '0.05em'
             }}
           >
-            <LayoutGrid size={16} color='#386FA4' />
+            <Icon name="layout-grid" size={16} />
             Quick Links
           </h4>
           <p
@@ -137,7 +142,7 @@ export const Footer = () => {
               color: '#4A5568'
             }}
           >
-            <Shield size={14} color='#386FA4' />
+            <Icon name="shield" size={14} />
             <a
               href={`${process.env.HOME_URL}/privacy`}
               style={{ color: '#386FA4', textDecoration: 'none' }}
@@ -155,7 +160,7 @@ export const Footer = () => {
               color: '#4A5568'
             }}
           >
-            <Home size={14} color='#386FA4' />
+            <Icon name="house" size={14} />
             <a
               href={process.env.HOME_URL}
               style={{ color: '#386FA4', textDecoration: 'none' }}