Externalize contact details in the web contact page

- Load phone and email from SITE_ env vars
- Update contact copy and location details
- Extend Vite env loading and test coverage

Author: HusseinBaraja

.env.example

@@ -23,6 +23,8 @@ API_RATE_LIMIT_WINDOW_MS=60000
 # ── Convex ───────────────────────────────────────────
 CONVEX_ADMIN_KEY=
 CONVEX_URL=
+SITE_CONTACT_PHONE_NUMBER=
+SITE_CONTACT_EMAIL_ADDRESS=
 
 # ── AI Providers ─────────────────────────────────────
 AI_HEALTHCHECK_TIMEOUT_MS=5000

apps/web/src/pages/ContactPage.tsx

@@ -7,6 +7,8 @@ import { Link } from '../components/router/HonoRouter';
 export function ContactPage() {
   const container = useRef<HTMLDivElement>(null);
   const [formData, setFormData] = useState({ name: '', phone: '', company: '', message: '' });
+  const contactPhoneNumber = import.meta.env.SITE_CONTACT_PHONE_NUMBER || '[PHONE_NUMBER]';
+  const contactEmailAddress = import.meta.env.SITE_CONTACT_EMAIL_ADDRESS || '[EMAIL_ADDRESS]';
 
   useGSAP(() => {
     const tl = gsap.timeline();
@@ -61,7 +63,7 @@ export function ContactPage() {
             <span className="text-secondary italic font-light">ونرتب معك البداية</span>
           </h1>
           <p className="contact-left-anim text-lg text-white/60 mb-12 max-w-md font-light leading-relaxed">
-            مخصص للأعمال في اليمن التي تريد خدمة عملاء أسرع على واتساب بدون تعقيد.
+            مخصص للشركات في اليمن التي تحتاج خدمة عملاء أسرع على واتساب بدون تعقيد.
           </p>
 
           <div className="contact-left-anim space-y-8">
@@ -71,7 +73,7 @@ export function ContactPage() {
               </div>
               <div>
                 <h3 className="text-white/50 text-sm mb-1">واتساب للتواصل</h3>
-                <p className="font-medium text-lg text-white group-hover:text-secondary transition-colors">+967 77 000 0000</p>
+                <p className="font-medium text-lg text-white group-hover:text-secondary transition-colors" dir="ltr">{contactPhoneNumber}</p>
               </div>
             </div>
 
@@ -81,7 +83,7 @@ export function ContactPage() {
               </div>
               <div>
                 <h3 className="text-white/50 text-sm mb-1">البريد الإلكتروني</h3>
-                <p className="font-medium text-lg text-white group-hover:text-secondary transition-colors" style={{ direction: 'ltr' }}>hello@cscb.com</p>
+                <p className="font-medium text-lg text-white group-hover:text-secondary transition-colors" style={{ direction: 'ltr' }}>{contactEmailAddress}</p>
               </div>
             </div>
 
@@ -91,7 +93,7 @@ export function ContactPage() {
               </div>
               <div>
                 <h3 className="text-white/50 text-sm mb-1">المقر الرئيسي</h3>
-                <p className="font-medium text-lg text-white group-hover:text-secondary transition-colors">صنعاء، اليمن</p>
+                <p className="font-medium text-lg text-white group-hover:text-secondary transition-colors">سيئون، حضرموت، اليمن</p>
               </div>
             </div>
           </div>

apps/web/src/pages/ContactPage.vitest.tsx

@@ -12,20 +12,25 @@ vi.mock('../components/router/HonoRouter', () => ({
 
 describe('ContactPage', () => {
   afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.resetModules();
     vi.clearAllMocks();
   });
 
-  it('renders Yemeni-focused contact copy and resets the form after submit', async () => {
+  it('renders env-backed contact details and resets the form after submit', async () => {
     setupGsapMocks();
+    vi.stubEnv('SITE_CONTACT_PHONE_NUMBER', '+967 784 338 919');
+    vi.stubEnv('SITE_CONTACT_EMAIL_ADDRESS', 'hello@reda.chat');
     const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});
 
     const { ContactPage } = await import('./ContactPage');
     render(<ContactPage />);
 
     expect(screen.getByRole('heading', { name: 'جاهزين نسمع منك ونرتب معك البداية' })).toBeDefined();
     expect(screen.getByText('مخصص للأعمال في اليمن التي تريد خدمة عملاء أسرع على واتساب بدون تعقيد.')).toBeDefined();
-    expect(screen.getByText('+967 77 000 0000')).toBeDefined();
-    expect(screen.getByText('صنعاء، اليمن')).toBeDefined();
+    expect(screen.getByText('+967 784 338 919')).toBeDefined();
+    expect(screen.getByText('hello@reda.chat')).toBeDefined();
+    expect(screen.getByText('المقر الرئيسي')).toBeDefined();
 
     const nameInput = screen.getByPlaceholderText('مثال: محمد الآنسي');
     const phoneInput = screen.getByPlaceholderText('+967 7xx xxx xxx');

apps/web/vite.config.ts

@@ -1,10 +1,16 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  envDir: resolve(__dirname, '../..'),
+  envPrefix: ['VITE_', 'SITE_'],
   server: {
     host: '0.0.0.0',
     port: 5173,