GNXSOFT.COM

gnx-react/components/shared/layout/CookieConsent.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useCookieConsent, CookiePreferences } from './CookieConsentContext';
+
+// Cookie type definitions
+interface CookieType {
+  id: keyof CookiePreferences;
+  name: string;
+  description: string;
+  required: boolean;
+  icon: string;
+}
+
+const cookieTypes: CookieType[] = [
+  {
+    id: 'necessary',
+    name: 'Necessary Cookies',
+    description: 'Essential cookies required for the website to function properly. These cannot be disabled.',
+    required: true,
+    icon: 'fas fa-shield-alt',
+  },
+  {
+    id: 'functional',
+    name: 'Functional Cookies',
+    description: 'These cookies enable enhanced functionality and personalization, such as remembering your preferences.',
+    required: false,
+    icon: 'fas fa-cogs',
+  },
+];
+
+// Main Cookie Consent Banner Component
+export const CookieConsentBanner: React.FC = () => {
+  const { state, config, acceptAll, acceptNecessary, showSettings } = useCookieConsent();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (state.showBanner) {
+      // Small delay to ensure smooth animation
+      const timer = setTimeout(() => setIsVisible(true), 100);
+      return () => clearTimeout(timer);
+    } else {
+      setIsVisible(false);
+    }
+  }, [state.showBanner]);
+
+  if (!state.showBanner || !isVisible) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ y: 100, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        exit={{ y: 100, opacity: 0 }}
+        transition={{ duration: 0.3, ease: 'easeOut' }}
+        className="cookie-consent-banner"
+      >
+        <div className="cookie-consent-banner__container">
+          <div className="cookie-consent-banner__content">
+            <div className="cookie-consent-banner__icon">
+              <i className="fas fa-cookie-bite"></i>
+            </div>
+            <div className="cookie-consent-banner__text">
+              <h3>Cookie Preferences</h3>
+              <p>
+                We use only essential functional cookies to ensure our website works properly. 
+                We do not collect personal data or use tracking cookies. Your privacy is important to us.
+              </p>
+              {config.showPrivacyNotice && (
+                <div className="cookie-consent-banner__links">
+                  <a href={config.privacyPolicyUrl} target="_blank" rel="noopener noreferrer">
+                    Privacy Policy
+                  </a>
+                  <a href={config.cookiePolicyUrl} target="_blank" rel="noopener noreferrer">
+                    Cookie Policy
+                  </a>
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="cookie-consent-banner__actions">
+            <button
+              type="button"
+              className="cookie-consent-banner__btn cookie-consent-banner__btn--secondary"
+              onClick={showSettings}
+            >
+              <i className="fas fa-cog"></i>
+              Settings
+            </button>
+            <button
+              type="button"
+              className="cookie-consent-banner__btn cookie-consent-banner__btn--primary"
+              onClick={acceptNecessary}
+            >
+              <i className="fas fa-check"></i>
+              Accept Functional Only
+            </button>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+// Cookie Settings Modal Component
+export const CookieSettingsModal: React.FC = () => {
+  const { state, config, hideSettings, acceptSelected, updatePreferences, withdrawConsent, exportConsentData } = useCookieConsent();
+  const [tempPreferences, setTempPreferences] = useState<CookiePreferences>(state.preferences);
+
+  useEffect(() => {
+    setTempPreferences(state.preferences);
+  }, [state.preferences]);
+
+  const handlePreferenceChange = (type: keyof CookiePreferences, value: boolean) => {
+    if (type === 'necessary') return; // Cannot change necessary cookies
+    
+    setTempPreferences(prev => ({
+      ...prev,
+      [type]: value,
+    }));
+  };
+
+  const handleSavePreferences = () => {
+    acceptSelected(tempPreferences);
+  };
+
+  const handleAcceptAll = () => {
+    const allAccepted: CookiePreferences = {
+      necessary: true,
+      functional: true,
+    };
+    acceptSelected(allAccepted);
+  };
+
+  if (!state.showSettings) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.2 }}
+        className="cookie-settings-overlay"
+        onClick={hideSettings}
+      >
+        <motion.div
+          initial={{ scale: 0.9, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          exit={{ scale: 0.9, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          className="cookie-settings-modal"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="cookie-settings-modal__header">
+            <div className="cookie-settings-modal__header-content">
+              <h2>Cookie Preferences</h2>
+              <p className="cookie-settings-modal__version">v{config.version}</p>
+            </div>
+            <button
+              type="button"
+              className="cookie-settings-modal__close"
+              onClick={hideSettings}
+              aria-label="Close settings"
+            >
+              <i className="fas fa-times"></i>
+            </button>
+          </div>
+
+          <div className="cookie-settings-modal__content">
+            <div className="cookie-settings-modal__description">
+              <p>
+                We respect your privacy and only use essential functional cookies. 
+                You can choose which types of cookies to allow below.
+              </p>
+            </div>
+
+            <div className="cookie-settings-modal__types">
+              {cookieTypes.map((cookieType) => (
+                <div
+                  key={cookieType.id}
+                  className={`cookie-settings-modal__type ${
+                    cookieType.required ? 'cookie-settings-modal__type--required' : ''
+                  }`}
+                >
+                  <div className="cookie-settings-modal__type-header">
+                    <div className="cookie-settings-modal__type-info">
+                      <i className={cookieType.icon}></i>
+                      <div>
+                        <h4>{cookieType.name}</h4>
+                        <p>{cookieType.description}</p>
+                      </div>
+                    </div>
+                    <div className="cookie-settings-modal__type-toggle">
+                      <label className="cookie-toggle">
+                        <input
+                          type="checkbox"
+                          checked={tempPreferences[cookieType.id]}
+                          onChange={(e) => handlePreferenceChange(cookieType.id, e.target.checked)}
+                          disabled={cookieType.required}
+                        />
+                        <span className="cookie-toggle__slider"></span>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="cookie-settings-modal__privacy">
+              <h4>Privacy Information</h4>
+              <ul>
+                <li>We do not collect personal data without your explicit consent</li>
+                <li>Functional cookies are used only to maintain website functionality</li>
+                <li>We do not use tracking, analytics, or marketing cookies</li>
+                <li>You can change your preferences at any time</li>
+                <li>Data retention period: {config.retentionPeriod} days</li>
+                <li>Contact: <a href={`mailto:${config.dataControllerEmail}`}>{config.dataControllerEmail}</a></li>
+              </ul>
+            </div>
+
+            {config.enableDetailedSettings && (
+              <div className="cookie-settings-modal__enterprise">
+                <h4>Enterprise Features</h4>
+                <div className="cookie-settings-modal__enterprise-actions">
+                  <button
+                    type="button"
+                    className="cookie-settings-modal__btn cookie-settings-modal__btn--outline"
+                    onClick={() => {
+                      const data = exportConsentData();
+                      const blob = new Blob([data], { type: 'application/json' });
+                      const url = URL.createObjectURL(blob);
+                      const a = document.createElement('a');
+                      a.href = url;
+                      a.download = `cookie-consent-data-${new Date().toISOString().split('T')[0]}.json`;
+                      a.click();
+                      URL.revokeObjectURL(url);
+                    }}
+                  >
+                    <i className="fas fa-download"></i>
+                    Export Data
+                  </button>
+                  <button
+                    type="button"
+                    className="cookie-settings-modal__btn cookie-settings-modal__btn--danger"
+                    onClick={() => {
+                      if (confirm('Are you sure you want to withdraw your consent? This will reset all preferences.')) {
+                        withdrawConsent();
+                      }
+                    }}
+                  >
+                    <i className="fas fa-user-times"></i>
+                    Withdraw Consent
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="cookie-settings-modal__footer">
+            <button
+              type="button"
+              className="cookie-settings-modal__btn cookie-settings-modal__btn--secondary"
+              onClick={hideSettings}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="cookie-settings-modal__btn cookie-settings-modal__btn--primary"
+              onClick={handleSavePreferences}
+            >
+              Save Preferences
+            </button>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+// Main Cookie Consent Component that combines both banner and modal
+export const CookieConsent: React.FC = () => {
+  return (
+    <>
+      <CookieConsentBanner />
+      <CookieSettingsModal />
+    </>
+  );
+};
+
+// Cookie Preferences Display Component (for footer or privacy page)
+export const CookiePreferencesDisplay: React.FC = () => {
+  const { state, showSettings, resetConsent } = useCookieConsent();
+
+  return (
+    <div className="cookie-preferences-display">
+      <h3>Cookie Preferences</h3>
+      <div className="cookie-preferences-display__status">
+        <p>
+          <strong>Status:</strong> {state.hasConsented ? 'Consent Given' : 'No Consent'}
+        </p>
+        <p>
+          <strong>Functional Cookies:</strong> {state.preferences.functional ? 'Enabled' : 'Disabled'}
+        </p>
+      </div>
+      <div className="cookie-preferences-display__actions">
+        <button
+          type="button"
+          className="cookie-preferences-display__btn"
+          onClick={showSettings}
+        >
+          Update Preferences
+        </button>
+        <button
+          type="button"
+          className="cookie-preferences-display__btn cookie-preferences-display__btn--reset"
+          onClick={resetConsent}
+        >
+          Reset Consent
+        </button>
+      </div>
+    </div>
+  );
+};

gnx-react/components/shared/layout/CookieConsentContext.tsx

@@ -0,0 +1,420 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+// Types for cookie consent
+export interface CookiePreferences {
+  necessary: boolean;
+  functional: boolean;
+}
+
+export interface ConsentAuditLog {
+  timestamp: string;
+  action: 'consent_given' | 'consent_updated' | 'consent_withdrawn' | 'settings_opened';
+  preferences: CookiePreferences;
+  userAgent: string;
+  ipAddress?: string;
+  sessionId: string;
+}
+
+export interface CookieConsentConfig {
+  version: string;
+  companyName: string;
+  privacyPolicyUrl: string;
+  cookiePolicyUrl: string;
+  dataControllerEmail: string;
+  retentionPeriod: number; // days
+  enableAuditLog: boolean;
+  enableDetailedSettings: boolean;
+  showPrivacyNotice: boolean;
+}
+
+export interface CookieConsentState {
+  hasConsented: boolean;
+  preferences: CookiePreferences;
+  showBanner: boolean;
+  showSettings: boolean;
+  consentDate?: string;
+  lastUpdated?: string;
+  auditLog: ConsentAuditLog[];
+}
+
+export interface CookieConsentContextType {
+  state: CookieConsentState;
+  config: CookieConsentConfig;
+  acceptAll: () => void;
+  acceptNecessary: () => void;
+  acceptSelected: (preferences: Partial<CookiePreferences>) => void;
+  showSettings: () => void;
+  hideSettings: () => void;
+  updatePreferences: (preferences: Partial<CookiePreferences>) => void;
+  resetConsent: () => void;
+  withdrawConsent: () => void;
+  exportConsentData: () => string;
+  getConsentSummary: () => any;
+}
+
+// Default cookie preferences
+const defaultPreferences: CookiePreferences = {
+  necessary: true, // Always true, cannot be disabled
+  functional: false,
+};
+
+// Enterprise configuration
+const defaultConfig: CookieConsentConfig = {
+  version: '2.0',
+  companyName: 'Your Company Name',
+  privacyPolicyUrl: '/privacy-policy',
+  cookiePolicyUrl: '/cookie-policy',
+  dataControllerEmail: 'privacy@yourcompany.com',
+  retentionPeriod: 365, // 1 year
+  enableAuditLog: true,
+  enableDetailedSettings: true,
+  showPrivacyNotice: true,
+};
+
+// Default state
+const defaultState: CookieConsentState = {
+  hasConsented: false,
+  preferences: defaultPreferences,
+  showBanner: false,
+  showSettings: false,
+  auditLog: [],
+};
+
+// Create context
+const CookieConsentContext = createContext<CookieConsentContextType | undefined>(undefined);
+
+// Storage keys
+const CONSENT_STORAGE_KEY = 'cookie-consent-preferences';
+const CONSENT_VERSION = '2.0';
+
+// Utility functions
+const generateSessionId = (): string => {
+  return Math.random().toString(36).substring(2) + Date.now().toString(36);
+};
+
+const createAuditLogEntry = (
+  action: ConsentAuditLog['action'],
+  preferences: CookiePreferences
+): ConsentAuditLog => {
+  return {
+    timestamp: new Date().toISOString(),
+    action,
+    preferences,
+    userAgent: typeof window !== 'undefined' ? window.navigator.userAgent : '',
+    sessionId: generateSessionId(),
+  };
+};
+
+// Provider component
+export const CookieConsentProvider: React.FC<{ 
+  children: ReactNode;
+  config?: Partial<CookieConsentConfig>;
+}> = ({ children, config: customConfig }) => {
+  const [state, setState] = useState<CookieConsentState>(defaultState);
+  const config = { ...defaultConfig, ...customConfig };
+
+  // Load saved preferences on mount
+  useEffect(() => {
+    const loadSavedPreferences = () => {
+      try {
+        const saved = localStorage.getItem(CONSENT_STORAGE_KEY);
+        if (saved) {
+          const parsed = JSON.parse(saved);
+          // Check if saved version matches current version
+          if (parsed.version === CONSENT_VERSION) {
+            setState({
+              hasConsented: true,
+              preferences: parsed.preferences,
+              showBanner: false,
+              showSettings: false,
+              consentDate: parsed.consentDate,
+              lastUpdated: parsed.lastUpdated,
+              auditLog: parsed.auditLog || [],
+            });
+            return;
+          }
+        }
+      } catch (error) {
+        console.warn('Failed to load cookie preferences:', error);
+      }
+      
+      // Show banner if no valid consent found
+      setState(prev => ({ ...prev, showBanner: true }));
+    };
+
+    loadSavedPreferences();
+  }, []);
+
+  // Save preferences to localStorage with audit logging
+  const savePreferences = (preferences: CookiePreferences, action: ConsentAuditLog['action'] = 'consent_given') => {
+    try {
+      const auditEntry = config.enableAuditLog ? createAuditLogEntry(action, preferences) : null;
+      
+      const data = {
+        version: CONSENT_VERSION,
+        preferences,
+        timestamp: new Date().toISOString(),
+        consentDate: state.consentDate || new Date().toISOString(),
+        lastUpdated: new Date().toISOString(),
+        auditLog: auditEntry ? [...state.auditLog, auditEntry] : state.auditLog,
+      };
+      
+      localStorage.setItem(CONSENT_STORAGE_KEY, JSON.stringify(data));
+      
+      // Update state with audit log
+      if (auditEntry) {
+        setState(prev => ({
+          ...prev,
+          auditLog: [...prev.auditLog, auditEntry],
+        }));
+      }
+    } catch (error) {
+      console.warn('Failed to save cookie preferences:', error);
+    }
+  };
+
+  // Accept all cookies
+  const acceptAll = () => {
+    const allAccepted: CookiePreferences = {
+      necessary: true,
+      functional: true,
+    };
+    
+    setState(prev => ({
+      ...prev,
+      hasConsented: true,
+      preferences: allAccepted,
+      showBanner: false,
+      showSettings: false,
+      consentDate: prev.consentDate || new Date().toISOString(),
+      lastUpdated: new Date().toISOString(),
+    }));
+    
+    savePreferences(allAccepted, 'consent_given');
+  };
+
+  // Accept only necessary cookies
+  const acceptNecessary = () => {
+    const necessaryOnly: CookiePreferences = {
+      necessary: true,
+      functional: false,
+    };
+    
+    setState(prev => ({
+      ...prev,
+      hasConsented: true,
+      preferences: necessaryOnly,
+      showBanner: false,
+      showSettings: false,
+      consentDate: prev.consentDate || new Date().toISOString(),
+      lastUpdated: new Date().toISOString(),
+    }));
+    
+    savePreferences(necessaryOnly, 'consent_given');
+  };
+
+  // Accept selected cookies
+  const acceptSelected = (preferences: Partial<CookiePreferences>) => {
+    const newPreferences: CookiePreferences = {
+      necessary: true, // Always true
+      functional: preferences.functional ?? false,
+    };
+    
+    setState(prev => ({
+      ...prev,
+      hasConsented: true,
+      preferences: newPreferences,
+      showBanner: false,
+      showSettings: false,
+      consentDate: prev.consentDate || new Date().toISOString(),
+      lastUpdated: new Date().toISOString(),
+    }));
+    
+    savePreferences(newPreferences, 'consent_updated');
+  };
+
+  // Show settings modal
+  const showSettings = () => {
+    setState(prev => ({ ...prev, showSettings: true }));
+    
+    // Log settings opened
+    if (config.enableAuditLog) {
+      const auditEntry = createAuditLogEntry('settings_opened', state.preferences);
+      setState(prev => ({
+        ...prev,
+        auditLog: [...prev.auditLog, auditEntry],
+      }));
+    }
+  };
+
+  // Hide settings modal
+  const hideSettings = () => {
+    setState(prev => ({ ...prev, showSettings: false }));
+  };
+
+  // Update preferences (for settings modal)
+  const updatePreferences = (preferences: Partial<CookiePreferences>) => {
+    setState(prev => ({
+      ...prev,
+      preferences: {
+        ...prev.preferences,
+        ...preferences,
+        necessary: true, // Always keep necessary as true
+      },
+    }));
+  };
+
+  // Reset consent (for testing or user request)
+  const resetConsent = () => {
+    try {
+      localStorage.removeItem(CONSENT_STORAGE_KEY);
+    } catch (error) {
+      console.warn('Failed to reset cookie preferences:', error);
+    }
+    
+    setState({
+      hasConsented: false,
+      preferences: defaultPreferences,
+      showBanner: true,
+      showSettings: false,
+      auditLog: [],
+    });
+  };
+
+  // Withdraw consent (GDPR compliance)
+  const withdrawConsent = () => {
+    try {
+      localStorage.removeItem(CONSENT_STORAGE_KEY);
+    } catch (error) {
+      console.warn('Failed to withdraw consent:', error);
+    }
+    
+    const auditEntry = config.enableAuditLog ? createAuditLogEntry('consent_withdrawn', defaultPreferences) : null;
+    
+    setState({
+      hasConsented: false,
+      preferences: defaultPreferences,
+      showBanner: true,
+      showSettings: false,
+      auditLog: auditEntry ? [...state.auditLog, auditEntry] : state.auditLog,
+    });
+  };
+
+  // Export consent data (GDPR compliance)
+  const exportConsentData = (): string => {
+    const exportData = {
+      consentData: {
+        hasConsented: state.hasConsented,
+        preferences: state.preferences,
+        consentDate: state.consentDate,
+        lastUpdated: state.lastUpdated,
+        auditLog: state.auditLog,
+      },
+      config: {
+        version: config.version,
+        companyName: config.companyName,
+        retentionPeriod: config.retentionPeriod,
+      },
+      exportDate: new Date().toISOString(),
+    };
+    
+    return JSON.stringify(exportData, null, 2);
+  };
+
+  // Get consent summary
+  const getConsentSummary = () => {
+    return {
+      hasConsented: state.hasConsented,
+      preferences: state.preferences,
+      consentDate: state.consentDate,
+      lastUpdated: state.lastUpdated,
+      auditLogCount: state.auditLog.length,
+      config: {
+        version: config.version,
+        companyName: config.companyName,
+        retentionPeriod: config.retentionPeriod,
+      },
+    };
+  };
+
+  const contextValue: CookieConsentContextType = {
+    state,
+    config,
+    acceptAll,
+    acceptNecessary,
+    acceptSelected,
+    showSettings,
+    hideSettings,
+    updatePreferences,
+    resetConsent,
+    withdrawConsent,
+    exportConsentData,
+    getConsentSummary,
+  };
+
+  return (
+    <CookieConsentContext.Provider value={contextValue}>
+      {children}
+    </CookieConsentContext.Provider>
+  );
+};
+
+// Hook to use cookie consent context
+export const useCookieConsent = (): CookieConsentContextType => {
+  const context = useContext(CookieConsentContext);
+  if (context === undefined) {
+    throw new Error('useCookieConsent must be used within a CookieConsentProvider');
+  }
+  return context;
+};
+
+// Hook to check if specific cookie type is allowed
+export const useCookiePermission = (type: keyof CookiePreferences): boolean => {
+  const { state } = useCookieConsent();
+  return state.preferences[type];
+};
+
+// Hook for functional features (only runs if functional cookies are allowed)
+export const useFunctional = () => {
+  const { state } = useCookieConsent();
+  const isEnabled = state.preferences.functional && state.hasConsented;
+
+  const saveUserPreference = (key: string, value: any) => {
+    if (isEnabled && typeof window !== 'undefined') {
+      try {
+        localStorage.setItem(`user-preference-${key}`, JSON.stringify(value));
+      } catch (error) {
+        console.warn('Failed to save user preference:', error);
+      }
+    }
+  };
+
+  const loadUserPreference = (key: string, defaultValue?: any) => {
+    if (isEnabled && typeof window !== 'undefined') {
+      try {
+        const saved = localStorage.getItem(`user-preference-${key}`);
+        return saved ? JSON.parse(saved) : defaultValue;
+      } catch (error) {
+        console.warn('Failed to load user preference:', error);
+        return defaultValue;
+      }
+    }
+    return defaultValue;
+  };
+
+  const rememberUserAction = (action: string, data?: any) => {
+    if (isEnabled) {
+      console.log('User Action Remembered:', action, data);
+      // Implement your user action tracking logic here
+    }
+  };
+
+  return {
+    saveUserPreference,
+    loadUserPreference,
+    rememberUserAction,
+    isEnabled,
+  };
+};

gnx-react/components/shared/layout/CookieConsentUtils.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { useCookieConsent, useCookiePermission } from './CookieConsentContext';
+
+// Utility hook for conditional rendering based on cookie permissions
+export const useConditionalFeature = (featureType: 'functional') => {
+  const isAllowed = useCookiePermission(featureType);
+  const { state } = useCookieConsent();
+
+  return {
+    isAllowed,
+    hasConsented: state.hasConsented,
+    canShow: isAllowed && state.hasConsented,
+  };
+};
+
+// Note: Analytics and marketing hooks removed as we don't collect this data
+
+// Hook for functional features (only runs if functional cookies are allowed)
+export const useFunctional = () => {
+  const { canShow } = useConditionalFeature('functional');
+
+  const saveUserPreference = (key: string, value: any) => {
+    if (canShow && typeof window !== 'undefined') {
+      try {
+        localStorage.setItem(`user-preference-${key}`, JSON.stringify(value));
+      } catch (error) {
+        console.warn('Failed to save user preference:', error);
+      }
+    }
+  };
+
+  const loadUserPreference = (key: string, defaultValue?: any) => {
+    if (canShow && typeof window !== 'undefined') {
+      try {
+        const saved = localStorage.getItem(`user-preference-${key}`);
+        return saved ? JSON.parse(saved) : defaultValue;
+      } catch (error) {
+        console.warn('Failed to load user preference:', error);
+        return defaultValue;
+      }
+    }
+    return defaultValue;
+  };
+
+  const rememberUserAction = (action: string, data?: any) => {
+    if (canShow) {
+      console.log('User Action Remembered:', action, data);
+      // Implement your user action tracking logic here
+    }
+  };
+
+  return {
+    saveUserPreference,
+    loadUserPreference,
+    rememberUserAction,
+    isEnabled: canShow,
+  };
+};
+
+// Component wrapper for conditional rendering
+interface ConditionalFeatureProps {
+  feature: 'functional';
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export const ConditionalFeature: React.FC<ConditionalFeatureProps> = ({
+  feature,
+  children,
+  fallback = null,
+}) => {
+  const { canShow } = useConditionalFeature(feature);
+  
+  return canShow ? <>{children}</> : <>{fallback}</>;
+};
+
+// Example usage components (analytics and marketing removed)
+
+export const UserPreferenceManager: React.FC<{ 
+  preferenceKey: string; 
+  defaultValue?: any;
+  children: (value: any, setValue: (value: any) => void) => React.ReactNode;
+}> = ({ preferenceKey, defaultValue, children }) => {
+  const { saveUserPreference, loadUserPreference } = useFunctional();
+  const [value, setValue] = React.useState(defaultValue);
+
+  useEffect(() => {
+    const saved = loadUserPreference(preferenceKey, defaultValue);
+    setValue(saved);
+  }, [preferenceKey, defaultValue, loadUserPreference]);
+
+  const handleSetValue = (newValue: any) => {
+    setValue(newValue);
+    saveUserPreference(preferenceKey, newValue);
+  };
+
+  return <>{children(value, handleSetValue)}</>;
+};

gnx-react/components/shared/layout/animations/AppearDown.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+
+const AppearDown = () => {
+  useEffect(() => {
+    if (window.innerWidth >= 992) {
+      gsap.registerPlugin(ScrollTrigger);
+      const appearDownSections = document.querySelectorAll(".appear-down");
+      appearDownSections.forEach((section) => {
+        gsap.fromTo(
+          section,
+          {
+            scale: 0.8,
+            opacity: 0,
+          },
+          {
+            scale: 1,
+            opacity: 1,
+            duration: 1.5,
+            scrollTrigger: {
+              trigger: section,
+              scrub: 1,
+              start: "top bottom",
+              end: "bottom center",
+              markers: false,
+            },
+          }
+        );
+      });
+    }
+  }, []);
+  return null;
+};
+
+export default AppearDown;

gnx-react/components/shared/layout/animations/ButtonHoverAnimation.tsx

@@ -0,0 +1,45 @@
+"use client";
+import { useEffect } from "react";
+
+const ButtonHoverAnimation = () => {
+  useEffect(() => {
+    const btnAnim = document.querySelectorAll(".btn-anim");
+    if (btnAnim.length > 0) {
+      btnAnim.forEach((element) => {
+        element.addEventListener("mouseenter", handleMouseEnter);
+        element.addEventListener("mouseleave", handleMouseLeave);
+      });
+
+      return () => {
+        btnAnim.forEach((element) => {
+          element.removeEventListener("mouseenter", handleMouseEnter);
+          element.removeEventListener("mouseleave", handleMouseLeave);
+        });
+      };
+    }
+  }, []);
+
+  const handleMouseEnter = (e: any) => {
+    const element = e.currentTarget as any;
+    const span = element.querySelector("span");
+    if (span) {
+      const rect = element.getBoundingClientRect();
+      span.style.left = `${e.clientX - rect.left}px`;
+      span.style.top = `${e.clientY - rect.top}px`;
+    }
+  };
+
+  const handleMouseLeave = (e: any) => {
+    const element = e.currentTarget as HTMLElement;
+    const span = element.querySelector("span");
+    if (span) {
+      const rect = element.getBoundingClientRect();
+      span.style.left = `${e.clientX - rect.left}px`;
+      span.style.top = `${e.clientY - rect.top}px`;
+    }
+  };
+
+  return null;
+};
+
+export default ButtonHoverAnimation;

gnx-react/components/shared/layout/animations/FadeAnimations.tsx

@@ -0,0 +1,122 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+
+const FadeAnimations = () => {
+  useEffect(() => {
+    if (window.innerWidth >= 992) {
+      gsap.registerPlugin(ScrollTrigger);
+      const fadeWrapperRefs = document.querySelectorAll(".fade-wrapper");
+      fadeWrapperRefs.forEach((fadeWrapperRef) => {
+        const fadeItems = fadeWrapperRef.querySelectorAll(".fade-top");
+        const fadeItemsBottom = fadeWrapperRef.querySelectorAll(".fade-bottom");
+        const fadeItemsLeft = fadeWrapperRef.querySelectorAll(".fade-left");
+        const fadeItemsRight = fadeWrapperRef.querySelectorAll(".fade-right");
+
+        // from top
+        fadeItems.forEach((element, index) => {
+          const delay = index * 0.15;
+          gsap.set(element, {
+            opacity: 0,
+            y: 100,
+          });
+
+          ScrollTrigger.create({
+            trigger: element,
+            start: "top 100%",
+            end: "bottom 20%",
+            scrub: 0.5,
+            onEnter: () => {
+              gsap.to(element, {
+                opacity: 1,
+                y: 0,
+                duration: 1,
+                delay: delay,
+              });
+            },
+            once: true,
+          });
+        });
+
+        // from bottom
+        fadeItemsBottom.forEach((element, index) => {
+          const delay = index * 0.15;
+          gsap.set(element, {
+            opacity: 0,
+            y: -100,
+          });
+
+          ScrollTrigger.create({
+            trigger: element,
+            start: "top 100%",
+            end: "bottom 20%",
+            scrub: 0.5,
+            onEnter: () => {
+              gsap.to(element, {
+                opacity: 1,
+                y: 0,
+                duration: 1,
+                delay: delay,
+              });
+            },
+            once: true,
+          });
+        });
+
+        // from left
+        fadeItemsLeft.forEach((element, index) => {
+          const delay = index * 0.15;
+          gsap.set(element, {
+            opacity: 0,
+            x: 100,
+          });
+
+          ScrollTrigger.create({
+            trigger: element,
+            start: "top 100%",
+            end: "bottom 20%",
+            scrub: 0.5,
+            onEnter: () => {
+              gsap.to(element, {
+                opacity: 1,
+                x: 0,
+                duration: 1,
+                delay: delay,
+              });
+            },
+            once: true,
+          });
+        });
+
+        // from right
+        fadeItemsRight.forEach((element, index) => {
+          const delay = index * 0.15;
+          gsap.set(element, {
+            opacity: 0,
+            x: -100,
+          });
+
+          ScrollTrigger.create({
+            trigger: element,
+            start: "top 100%",
+            end: "bottom 20%",
+            scrub: 0.5,
+            onEnter: () => {
+              gsap.to(element, {
+                opacity: 1,
+                x: 0,
+                duration: 1,
+                delay: delay,
+              });
+            },
+            once: true,
+          });
+        });
+      });
+    }
+  }, []);
+  return null;
+};
+
+export default FadeAnimations;

gnx-react/components/shared/layout/animations/FadeImageBottom.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+
+const FadeImageBottom = () => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const deviceWidth = window.innerWidth;
+
+    if (
+      document.querySelectorAll(".fade-img").length > 0 &&
+      deviceWidth >= 992
+    ) {
+      gsap.utils.toArray(".fade-img").forEach((el: any) => {
+        const tl = gsap.timeline({
+          scrollTrigger: {
+            trigger: el,
+            start: "center center",
+            end: "+=40%",
+            scrub: 1,
+            pin: false,
+            invalidateOnRefresh: true,
+          },
+        });
+
+        tl.to(el, {
+          y: "120px",
+          zIndex: "-1",
+          duration: 1,
+        });
+      });
+    }
+  }, []);
+  return null;
+};
+
+export default FadeImageBottom;

gnx-react/components/shared/layout/animations/ParallaxImage.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+
+const ParallaxImage = () => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    const imageParallax = document.querySelectorAll(".parallax-image");
+
+    if (imageParallax.length > 0) {
+      imageParallax.forEach((element) => {
+        const animImageParallax = element as HTMLElement;
+        const aipWrap = animImageParallax.closest(
+          ".parallax-image-wrap"
+        ) as HTMLElement;
+        const aipInner = aipWrap?.querySelector(".parallax-image-inner");
+
+        if (aipWrap && aipInner) {
+          let tl_ImageParallax = gsap.timeline({
+            scrollTrigger: {
+              trigger: aipWrap,
+              start: "top bottom",
+              end: "bottom top",
+              scrub: true,
+            },
+          });
+
+          tl_ImageParallax.to(animImageParallax, {
+            yPercent: 30,
+            ease: "none",
+          });
+          gsap.fromTo(
+            aipInner,
+            {
+              scale: 1.2,
+              opacity: 0,
+            },
+            {
+              scale: 1,
+              opacity: 1,
+              duration: 1.5,
+              scrollTrigger: {
+                trigger: aipWrap,
+                start: "top 99%",
+                markers: false,
+              },
+            }
+          );
+          ScrollTrigger.refresh();
+        }
+      });
+    }
+  }, []);
+
+  return null;
+};
+
+export default ParallaxImage;

gnx-react/components/shared/layout/animations/ScrollToElement.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import { ScrollToPlugin } from "gsap/dist/ScrollToPlugin";
+
+const ScrollToElement = () => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
+    const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      e.preventDefault();
+      const target = e.currentTarget.getAttribute("href");
+      if (target) {
+        gsap.to(window, {
+          scrollTo: {
+            y: target,
+            offsetY: 200,
+          },
+          duration: 1.5,
+          ease: "power3.inOut",
+        });
+      }
+    };
+
+    const links = document.querySelectorAll('a[href^="#"]');
+    links.forEach((anchor: any) => {
+      anchor.addEventListener("click", handleLinkClick);
+    });
+
+    return () => {
+      links.forEach((anchor: any) => {
+        anchor.removeEventListener("click", handleLinkClick);
+      });
+    };
+  }, []);
+  return null;
+};
+
+export default ScrollToElement;

gnx-react/components/shared/layout/animations/SmoothScroll.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import Lenis from "lenis";
+
+const SmoothScroll = () => {
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    const lenis = new Lenis();
+    gsap.ticker.add((time) => {
+      lenis.raf(time * 350);
+    });
+    gsap.ticker.lagSmoothing(0);
+    ScrollTrigger.update();
+  }, []);
+  return null;
+};
+
+export default SmoothScroll;

gnx-react/components/shared/layout/animations/SplitTextAnimations.tsx

@@ -0,0 +1,65 @@
+"use client";
+import { useEffect } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
+import SplitType from "split-type";
+
+const SplitTextAnimations = () => {
+  useEffect(() => {
+    if (window.innerWidth >= 992) {
+      gsap.registerPlugin(ScrollTrigger);
+
+      new SplitType(".title-anim", {
+        types: ["chars", "words"],
+      });
+
+      const titleAnims = document.querySelectorAll(".title-anim");
+      titleAnims.forEach((titleAnim) => {
+        const charElements = titleAnim.querySelectorAll(".char");
+
+        charElements.forEach((char, index) => {
+          const tl2 = gsap.timeline({
+            scrollTrigger: {
+              trigger: char,
+              start: "top 90%",
+              end: "bottom 60%",
+              scrub: false,
+              markers: false,
+              toggleActions: "play none none none",
+            },
+          });
+
+          const charDelay = index * 0.03;
+
+          tl2.from(char, {
+            duration: 0.8,
+            x: 70,
+            delay: charDelay,
+            autoAlpha: 0,
+          });
+        });
+      });
+
+      const titleElements = document.querySelectorAll(".title-anim");
+
+      titleElements.forEach((el) => {
+        const triggerEl = el as gsap.DOMTarget;
+        gsap.to(triggerEl, {
+          scrollTrigger: {
+            trigger: triggerEl,
+            start: "top 100%",
+            markers: false,
+            onEnter: () => {
+              if (el instanceof Element) {
+                el.classList.add("title-anim-active");
+              }
+            },
+          },
+        });
+      });
+    }
+  }, []);
+  return null;
+};
+
+export default SplitTextAnimations;

gnx-react/components/shared/layout/animations/VanillaTiltHover.tsx

@@ -0,0 +1,33 @@
+"use client";
+import VanillaTilt from "vanilla-tilt";
+
+const VanillaTiltHover = () => {
+  const tiltSelectors = [".btn-anim", ".topy-tilt"];
+  const tiltElements = document.querySelectorAll(tiltSelectors.join(", "));
+
+  tiltElements.forEach((element) => {
+    const tiltElement = element as HTMLElement;
+    let tiltConfig: any = {
+      speed: 3000,
+    };
+
+    if (tiltElement.classList.contains("btn-anim")) {
+      tiltConfig = {
+        ...tiltConfig,
+        max: 15,
+        perspective: 400,
+      };
+    } else if (tiltElement.classList.contains("topy-tilt")) {
+      tiltConfig = {
+        ...tiltConfig,
+        max: 5,
+      };
+    }
+
+    VanillaTilt.init(tiltElement, tiltConfig);
+  });
+
+  return null;
+};
+
+export default VanillaTiltHover;

gnx-react/components/shared/layout/footer/Footer.tsx

@@ -0,0 +1,290 @@
+"use client";
+import { useEffect } from "react";
+import Link from "next/link";
+import Image from "next/legacy/image";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/dist/ScrollTrigger";
+import location from "@/public/images/footer/location.png";
+import phone from "@/public/images/footer/phone.png";
+import gmail from "@/public/images/footer/gmail.png";
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+  
+  // Static header data
+  const headerData = {
+    title: "GNX Soft Ltd.",
+    logoUrl: "/images/logo.png",
+    logoLightUrl: "/images/logo-light.png",
+    navigationType: "both",
+    headerClass: "tp-header",
+    scrolledClass: "navbar-active",
+    buttonText: "Let's Talk",
+    buttonUrl: "/contact-us",
+    buttonClass: "btn btn-primary d-none d-sm-flex",
+    isActive: true,
+    displayOrder: 1,
+    metaData: JSON.stringify({
+      mobileBreakpoint: 992,
+      scrollThreshold: 50,
+      hideOnMobile: false,
+      mobileFirst: true,
+      hamburgerMenu: true
+    })
+  };
+
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.set(".foot-fade", {
+      x: -100,
+      opacity: 0,
+    });
+
+    ScrollTrigger.batch(".foot-fade", {
+      start: "-100px bottom",
+      onEnter: (elements) =>
+        gsap.to(elements, {
+          x: 0,
+          opacity: 1,
+          stagger: 0.3,
+        }),
+    });
+  }, []);
+
+  // Get logo URL from static data
+  const logoSrc = headerData.logoUrl;
+
+  return (
+    <footer className="footer position-relative overflow-x-clip">
+      <div className="container">
+        {/* Enterprise Footer Logo Section */}
+        <div className="row">
+          <div className="col-12">
+            <div className="footer-logo-section text-center pt-40 pb-30">
+              <div className="enterprise-logo-container">
+                <div className="enterprise-security-badges">
+                  {/* Left Badge */}
+                  <div className="security-badges-left">
+                    <div className="security-badge">
+                      <i className="fa-solid fa-building"></i>
+                      <span>Enterprise Solutions</span>
+                    </div>
+                  </div>
+                  
+                  {/* Center Logo */}
+                  <div className="logo-center">
+                    <Link href="/" aria-label="go to home" className="footer-logo">
+                      <Image 
+                        src={logoSrc} 
+                        alt="Logo" 
+                        width={160}
+                        height={120}
+                        style={{ 
+                          height: 'auto', 
+                          maxHeight: '120px'
+                        }} 
+                      />
+                    </Link>
+                  </div>
+                  
+                  {/* Right Badge */}
+                  <div className="security-badges-right">
+                    <div className="security-badge">
+                      <i className="fa-solid fa-shield-halved"></i>
+                      <span>Incident Management</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row vertical-column-gap-lg">
+          <div className="col-12">
+            <div className="pt-40">
+            </div>
+          </div>
+        </div>
+        <div className="row vertical-column-gap-lg pt-40">
+          <div className="col-12 col-lg-2 col-md-6">
+            <div className="footer-section">
+              <h6 className="text-white fm fw-6 mb-24">Company</h6>
+              <ul className="footer-links">
+                <li><Link href="about-us">About Us</Link></li>
+                <li><Link href="career">Careers</Link></li>
+                <li><Link href="case-study">Success Stories</Link></li>
+                <li><Link href="contact-us">Contact Us</Link></li>
+              </ul>
+            </div>
+          </div>
+          <div className="col-12 col-lg-2 col-md-6">
+            <div className="footer-section">
+              <h6 className="text-white fm fw-6 mb-24">Solutions</h6>
+              <ul className="footer-links">
+                <li><Link href="services">Incident Management Software</Link></li>
+                <li><Link href="services">Custom Software Development</Link></li>
+                <li><Link href="services">System Integrations & APIs</Link></li>
+                <li><Link href="services">Data Replication</Link></li>
+              </ul>
+            </div>
+          </div>
+          <div className="col-12 col-lg-2 col-md-6">
+            <div className="footer-section">
+              <h6 className="text-white fm fw-6 mb-24">Resources</h6>
+              <ul className="footer-links">
+                <li><Link href="blog">Software Blog</Link></li>
+                <li><Link href="case-study">Development Resources</Link></li>
+                <li><Link href="services">API Documentation</Link></li>
+                <li><Link href="contact-us">Technical Support</Link></li>
+              </ul>
+            </div>
+          </div>
+          <div className="col-12 col-lg-2 col-md-6">
+            <div className="footer-section">
+              <h6 className="text-white fm fw-6 mb-24">Services</h6>
+              <ul className="footer-links">
+                <li><Link href="services">Software Consulting</Link></li>
+                <li><Link href="contact-us">Custom Development</Link></li>
+                <li><Link href="case-study">API & Integration Services</Link></li>
+                <li><Link href="contact-us">Data Solutions</Link></li>
+              </ul>
+            </div>
+          </div>
+          <div className="col-12 col-lg-4 col-md-12">
+            <div className="footer-cta-section">
+              <div className="cta-content">
+                <h6 className="text-white fm fw-6 mb-24">Ready to Transform?</h6>
+                <p className="text-white mb-30">Start your software journey with our incident management and custom development solutions.</p>
+                <Link href="contact-us" className="btn-anim">
+                  Start Your Software Journey
+                  <i className="fa-solid fa-arrow-trend-up"></i>
+                  <span></span>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-12">
+            <div className="footer__inner pt-60">
+              <div className="row vertical-column-gap-lg">
+                <div className="col-12 col-md-6 col-lg-4">
+                  <div className="footer__inner-single">
+                    <div className="thumb">
+                      <Image src={location} alt="Image" width={24} height={24} />
+                    </div>
+                    <div className="content">
+                      <h5 className="mt-8 fm fw-6 text-white mb-24">
+                        Location
+                      </h5>
+                      <p className="text-quinary">
+                        <Link
+                          href="https://maps.google.com/?q=42.496781103070504,27.4758968970689"
+                          target="_blank"
+                         >
+                          GNX Soft Ltd.<br />
+                          Tsar Simeon I, 56<br />
+                          Burgas, Burgas 8000<br />
+                          Bulgaria
+                        </Link>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-12 col-md-6 col-lg-4">
+                  <div className="footer__inner-single">
+                    <div className="thumb">
+                      <Image src={phone} alt="Image" width={24} height={24} />
+                    </div>
+                    <div className="content">
+                      <h5 className="mt-8 fm fw-6 text-white mb-24">Phone</h5>
+                      <p className="text-quinary mb-12">
+                        <Link href="tel:+359897338147">+359 897 338 147</Link>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-12 col-md-6 col-lg-4">
+                  <div className="footer__inner-single">
+                    <div className="thumb">
+                      <Image src={gmail} alt="Image" width={24} height={24} />
+                    </div>
+                    <div className="content">
+                      <h5 className="mt-8 fm fw-6 text-white mb-24">Email</h5>
+                      <p className="text-quinary mb-12 text-lowercase">
+                        <Link href="mailto:info@gnxsoft.com">
+                          info@gnxsoft.com
+                        </Link>
+                      </p>
+               
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-12">
+            <div className="footer-copyright">
+              <div className="row align-items-center vertical-column-gap">
+                <div className="col-12 col-lg-6">
+                  <div className="footer__copyright-text text-center text-lg-start">
+                    <p className="text-quinary mt-8">
+                      &copy; <span id="copyrightYear">{currentYear}</span>{" "}
+                      <Link href="/" className="fw-6">
+                        GNX
+                      </Link>
+                      . All rights reserved. GNX Software Solutions.
+                    </p>
+                  </div>
+                </div>
+                <div className="col-12 col-lg-6">
+                  <div className="social justify-content-center justify-content-lg-end">
+                    <Link
+                      href="https://www.linkedin.com/company/itify"
+                      target="_blank"
+                      title="LinkedIn"
+                     >
+                      <i className="fa-brands fa-linkedin"></i>
+                    </Link>
+                    <Link
+                      href="https://github.com/itify"
+                      target="_blank"
+                      title="GitHub"
+                     >
+                      <i className="fa-brands fa-github"></i>
+                    </Link>
+                    <Link
+                      href="https://www.twitter.com/itify"
+                      target="_blank"
+                      title="Twitter"
+                     >
+                      <i className="fa-brands fa-twitter"></i>
+                    </Link>
+                    <Link
+                      href="https://www.youtube.com/c/itify"
+                      target="_blank"
+                      title="YouTube"
+                     >
+                      <i className="fa-brands fa-youtube"></i>
+                    </Link>
+                    <Link
+                      href="https://stackoverflow.com/teams/itify"
+                      target="_blank"
+                      title="Stack Overflow"
+                     >
+                      <i className="fa-brands fa-stack-overflow"></i>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

gnx-react/components/shared/layout/header/Header.tsx

@@ -0,0 +1,267 @@
+"use client";
+import { useState, useEffect, useMemo } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import OffcanvasMenu from "./OffcanvasMenu";
+import { OffcanvasData } from "@/public/data/offcanvas-data";
+import { useNavigationServices } from "@/lib/hooks/useServices";
+
+const Header = () => {
+  const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const [isActive, setIsActive] = useState(true);
+  const [openDropdown, setOpenDropdown] = useState<number | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
+  
+  // Fetch services from API
+  const { services: apiServices, loading: servicesLoading, error: servicesError } = useNavigationServices();
+  
+  // Create dynamic navigation data with services from API
+  const navigationData = useMemo(() => {
+    const baseNavigation = [...OffcanvasData];
+    
+    // Find the Services menu item and update its submenu with API data
+    const servicesIndex = baseNavigation.findIndex(item => item.title === "Services");
+    if (servicesIndex !== -1 && apiServices.length > 0) {
+      console.log('Replacing services with API data:', apiServices);
+      baseNavigation[servicesIndex] = {
+        ...baseNavigation[servicesIndex],
+        submenu: apiServices.map(service => ({
+          id: service.id + 1000, // Offset to avoid conflicts with existing IDs
+          title: service.title,
+          path: `/services/${service.slug}`,
+          parent_id: baseNavigation[servicesIndex].id,
+          display_order: service.display_order,
+          created_at: service.created_at,
+          updated_at: service.updated_at
+        }))
+      };
+    } else {
+      console.log('Using static services data. API services:', apiServices.length, 'Services index:', servicesIndex);
+    }
+    
+    return baseNavigation;
+  }, [apiServices]);
+
+  // Static header data
+  const headerData = {
+    title: "EnterpriseSoft Solutions",
+    logoUrl: "/images/logo.png",
+    logoLightUrl: "/images/logo-light.png",
+    navigationType: "both",
+    headerClass: "tp-header",
+    scrolledClass: "navbar-active",
+    buttonText: "Get Started",
+    buttonUrl: "/contact-us",
+    buttonClass: "btn btn-primary d-none d-sm-flex",
+    isActive: true,
+    displayOrder: 1,
+    metaData: JSON.stringify({
+      mobileBreakpoint: 992,
+      scrollThreshold: 50,
+      hideOnMobile: false,
+      mobileFirst: true,
+      hamburgerMenu: true
+    })
+  };
+
+  const handleClick = () => {
+    setTimeout(() => {
+      setIsOffcanvasOpen(false);
+    }, 900);
+    setIsActive(false);
+  };
+
+  const handleDropdownToggle = (index: number) => {
+    setOpenDropdown(openDropdown === index ? null : index);
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      if (scrollPosition > 50) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    handleScroll();
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [scrolled]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 992);
+      setTimeout(() => {
+        setIsOffcanvasOpen(false);
+      }, 900);
+      setIsActive(false);
+    };
+
+    handleResize(); // Check on mount
+    window.addEventListener("resize", handleResize);
+    
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+
+  // Use static data
+  let logoSrc: string = headerData.logoUrl;
+  let headerClass = headerData.headerClass;
+  let buttonText = headerData.buttonText;
+  let buttonUrl = headerData.buttonUrl;
+  let buttonClass = headerData.buttonClass;
+
+  const pathname = usePathname();
+
+  // Override logo based on pathname if needed (maintain existing behavior)
+  if (
+    pathname === "/career" ||
+    pathname === "/" ||
+    pathname === "/index" ||
+    pathname === "/services" ||
+    pathname === "/service-single"
+  ) {
+    logoSrc = headerData.logoLightUrl;
+  }
+
+  const handleOffCanvas = () => {
+    setIsOffcanvasOpen(true);
+    setIsActive(true);
+  };
+
+
+  return (
+    <>
+      <header className={headerClass}>
+        <div className={"primary-navbar" + (scrolled ? " navbar-active" : " ")}>
+          <div className="container">
+            <div className="row">
+              <div className="col-12">
+                <nav className="navbar p-0">
+                  <div className="navbar__logo">
+                    <Link href="/" aria-label="go to home" className="logo-img">
+                      <Image 
+                        src={logoSrc} 
+                        alt="Logo" 
+                        width={160}
+                        height={120}
+                        style={{ 
+                          height: 'auto'
+                        }} 
+                      />
+                    </Link>
+                  </div>
+                  
+                  {/* Desktop Navigation Menu */}
+                  <div className="navbar__menu d-none d-lg-flex">
+                    <ul>
+                      {navigationData.map((item, index) =>
+                        item.submenu ? (
+                          <li
+                            className="navbar__item navbar__item--has-children"
+                            key={index}
+                            onMouseEnter={() => !isMobile && setOpenDropdown(index)}
+                            onMouseLeave={() => !isMobile && setOpenDropdown(null)}
+                          >
+                            <button
+                              aria-label="dropdown menu"
+                              className={
+                                "navbar__dropdown-label" +
+                                (openDropdown === index
+                                  ? " navbar__item-active"
+                                  : " ")
+                              }
+                              onClick={() => isMobile && handleDropdownToggle(index)}
+                            >
+                              {item.title}
+                              {item.title === "Services" && servicesLoading && (
+                                <span className="loading-indicator">⏳</span>
+                              )}
+                            </button>
+                            <ul className={`navbar__sub-menu ${openDropdown === index ? 'show' : ''}`}>
+                              {item.title === "Services" && servicesLoading ? (
+                                <li>
+                                  <span className="text-muted">Loading services...</span>
+                                </li>
+                              ) : item.title === "Services" && servicesError ? (
+                                <li>
+                                  <span className="text-danger">Failed to load services</span>
+                                </li>
+                              ) : (
+                                item.submenu.map((subItem, subIndex) => (
+                                  <li key={subIndex}>
+                                    <Link
+                                      href={subItem.path || "#"}
+                                      className={
+                                        pathname === subItem.path
+                                          ? " active-current-sub"
+                                          : " "
+                                      }
+                                     >
+                                      {subItem.title}
+                                    </Link>
+                                  </li>
+                                ))
+                              )}
+                            </ul>
+                          </li>
+                        ) : (
+                          <li className="navbar__item" key={index}>
+                            <Link
+                              href={item.path || "#"}
+                              className={
+                                pathname === item.path ? " active-current-link" : " "
+                              }
+                             >
+                              {item.title}
+                            </Link>
+                          </li>
+                        )
+                      )}
+                    </ul>
+                  </div>
+
+                  <div className="navbar__options">
+                    <Link href={buttonUrl} className={buttonClass}>
+                      {buttonText}
+                    </Link>
+                    <button
+                      className="open-offcanvas-nav d-lg-none"
+                      aria-label="toggle mobile menu"
+                      title="open offcanvas menu"
+                      onClick={handleOffCanvas}
+                    >
+                      <span className="icon-bar top-bar"></span>
+                      <span className="icon-bar middle-bar"></span>
+                      <span className="icon-bar bottom-bar"></span>
+                    </button>
+                  </div>
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <OffcanvasMenu
+        isOffcanvasOpen={isOffcanvasOpen}
+        handleClick={handleClick}
+        isActive={isActive}
+        navigationData={navigationData}
+        servicesLoading={servicesLoading}
+        servicesError={servicesError}
+      />
+    </>
+  );
+};
+
+export default Header;

gnx-react/components/shared/layout/header/OffcanvasMenu.tsx

@@ -0,0 +1,215 @@
+"use client";
+import { useState, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import AnimateHeight from "react-animate-height";
+import Image from "next/legacy/image";
+import Link from "next/link";
+import { OffcanvasData } from "@/public/data/offcanvas-data";
+import logoLight from "@/public/images/logo-light.png";
+
+interface OffcanvasMenuProps {
+  isOffcanvasOpen: boolean;
+  isActive: boolean;
+  handleClick: () => void;
+  navigationData?: any[];
+  servicesLoading?: boolean;
+  servicesError?: string | null;
+}
+
+const OffcanvasMenu = ({ 
+  isOffcanvasOpen, 
+  isActive, 
+  handleClick, 
+  navigationData = OffcanvasData,
+  servicesLoading = false,
+  servicesError = null
+}: OffcanvasMenuProps) => {
+  const [openDropdown, setOpenDropdown] = useState(null);
+  
+  const handleDropdownToggle = (index: any) => {
+    setOpenDropdown((prev) => (prev === index ? null : index));
+  };
+
+  const pathname = usePathname();
+  useEffect(() => {
+    const parentItems = document.querySelectorAll(
+      ".navbar__item--has-children"
+    );
+
+    parentItems.forEach((parentItem) => {
+      const childItems = parentItem.querySelectorAll(".active-current-sub");
+
+      if (childItems.length > 0) {
+        parentItem.classList.add("active-current-parent");
+      }
+    });
+  }, []);
+
+  return (
+    <div className="offcanvas-nav">
+      <div
+        className={
+          "offcanvas-menu" + (isOffcanvasOpen ? " show-offcanvas-menu" : " ")
+        }
+      >
+        <nav
+          className={
+            "offcanvas-menu__wrapper" + (isActive ? " " : " nav-fade-active")
+          }
+          data-lenis-prevent
+        >
+          <div className="offcanvas-menu__header nav-fade">
+            <div className="logo">
+              <Link href="/" className="logo-img">
+                <Image src={logoLight} priority alt="Image" title="Logo" width={160} height={60} />
+              </Link>
+            </div>
+            <button
+              aria-label="close offcanvas menu"
+              className="close-offcanvas-menu"
+              onClick={handleClick}
+            >
+              <i className="fa-solid fa-xmark"></i>
+            </button>
+          </div>
+          <div className="offcanvas-menu__list">
+            <div className="navbar__menu">
+              <ul>
+                {navigationData.map((item, index) =>
+                  item.submenu ? (
+                    <li
+                      className="navbar__item navbar__item--has-children nav-fade"
+                      key={index}
+                    >
+                      <button
+                        aria-label="dropdown menu"
+                        className={
+                          "navbar__dropdown-label" +
+                          (openDropdown === index
+                            ? " navbar__item-active"
+                            : " ")
+                        }
+                        onClick={() => handleDropdownToggle(index)}
+                      >
+                        {item.title}
+                        {item.title === "Services" && servicesLoading && (
+                          <span className="loading-indicator">⏳</span>
+                        )}
+                      </button>
+                      <AnimateHeight
+                        duration={400}
+                        height={openDropdown === index ? "auto" : 0}
+                      >
+                        <ul className="navbar__sub-menu">
+                          {item.title === "Services" && servicesLoading ? (
+                            <li>
+                              <span className="text-muted">Loading services...</span>
+                            </li>
+                          ) : item.title === "Services" && servicesError ? (
+                            <li>
+                              <span className="text-danger">Failed to load services</span>
+                            </li>
+                          ) : (
+                            item.submenu.map((subItem, subIndex) => (
+                              <li key={subIndex}>
+                                <Link
+                                  href={subItem.path || "#"}
+                                  className={
+                                    pathname === subItem.path
+                                      ? " active-current-sub"
+                                      : " "
+                                  }
+                                 >
+                                  {subItem.title}
+                                </Link>
+                              </li>
+                            ))
+                          )}
+                        </ul>
+                      </AnimateHeight>
+                    </li>
+                  ) : (
+                    <li className="navbar__item nav-fade" key={index}>
+                      <Link
+                        href={item.path || "#"}
+                        className={
+                          pathname === item.path ? " active-current-link" : " "
+                        }
+                       >
+                        {item.title}
+                      </Link>
+                    </li>
+                  )
+                )}
+              </ul>
+            </div>
+          </div>
+        </nav>
+        <div className="offcanvas-menu__enterprise-info nav-fade">
+          <div className="enterprise-contact">
+            <h4>Get in Touch</h4>
+            <p>Ready to transform your business?</p>
+            <div className="contact-methods">
+              <a href="tel:+1-800-ENTERPRISE" className="contact-item">
+                <i className="fa-solid fa-phone"></i>
+                <span>+1 (800) ENTERPRISE</span>
+              </a>
+              <a href="mailto:solutions@enterprise.com" className="contact-item">
+                <i className="fa-solid fa-envelope"></i>
+                <span>solutions@enterprise.com</span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <ul className="enterprise-social nav-fade">
+          <li>
+            <Link
+              href="https://www.linkedin.com/company/enterprise"
+              target="_blank"
+              aria-label="Connect with us on LinkedIn"
+             >
+              <i className="fa-brands fa-linkedin-in"></i>
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://www.twitter.com/enterprise"
+              target="_blank"
+              aria-label="Follow us on Twitter"
+             >
+              <i className="fa-brands fa-twitter"></i>
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://www.youtube.com/enterprise"
+              target="_blank"
+              aria-label="Watch our videos on YouTube"
+             >
+              <i className="fa-brands fa-youtube"></i>
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="https://github.com/enterprise"
+              target="_blank"
+              aria-label="View our code on GitHub"
+             >
+              <i className="fa-brands fa-github"></i>
+            </Link>
+          </li>
+        </ul>
+        <div className="anime">
+          <span className="nav-fade"></span>
+          <span className="nav-fade"></span>
+          <span className="nav-fade"></span>
+          <span className="nav-fade"></span>
+          <span className="nav-fade"></span>
+          <span className="nav-fade"></span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OffcanvasMenu;