"use client"; import React, { useState, useEffect, useMemo, useRef, useCallback } from "react"; import { ArrowUpRight, ArrowRight, ArrowDownRight, Shield, Zap, BarChart3, Globe, Users, Award, CheckCircle, Sparkles, Target, DollarSign, LineChart, Lock, TrendingUp, Wallet, Clock, ChevronRight, Play, Star, Layers, Activity, PieChart, Rocket, Copy, Gift, Image as ImageIcon, ShoppingBag, Brain, Percent, ArrowLeftRight, Flame, Package, ShoppingCart, Folder, Tag, Database, LayoutGrid, Coins, Eye, EyeOff, RefreshCw, Crosshair, Cpu, Network, Gem, Trophy, Banknote, CircleDollarSign, Landmark, Timer, CandlestickChart, Boxes, Hexagon, Orbit, BadgePercent, HandCoins, UserCheck, Store, Gavel, TrendingDown, Scale, } from "lucide-react"; // Image import removed - using native img tags to prevent Next.js image optimization re-requests import { motion, useScroll, useTransform, useInView, useSpring, useReducedMotion, MotionValue, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; import { tickersWs } from "@/services/tickers-ws"; import { Link } from "@/i18n/routing"; import { useUserStore } from "@/store/user"; import { useWalletStore } from "@/store/finance/wallet-store"; import { useTranslations } from "next-intl"; import { MobileAppSection } from "./components/mobile-app-section"; import { getCryptoImageUrl } from "@/utils/image-fallback"; import { useConfigStore } from "@/store/config"; import { $fetch } from "@/lib/api"; import { buildMarketLink } from "@/utils/market-links"; import InteractivePattern, { FloatingShapes } from "@/components/sections/shared/InteractivePattern"; // Icon mapping const iconMap: Record = { Zap, Shield, BarChart3, Users, Target, DollarSign, Award, Globe, LineChart, Lock, TrendingUp, Wallet, Clock, Star, Layers, Activity, PieChart, CheckCircle, Rocket, Copy, Gift, Image: ImageIcon, ShoppingBag, Brain, Percent, ArrowLeftRight, Flame, Package, ShoppingCart, Folder, Tag, Database, LayoutGrid, Coins, Sparkles, Crosshair, Cpu, Network, Gem, Trophy, Banknote, CircleDollarSign, Landmark, Timer, CandlestickChart, Boxes, Hexagon, Orbit, BadgePercent, HandCoins, UserCheck, Store, Gavel, TrendingDown, Scale, }; // Type definitions interface PageContent { id: string; pageId: string; pageSource: string; type: string; title: string; variables: Record; content: string; meta: string; status: string; lastModified: string; } interface LandingStats { platform: { users: number; activeUsers: number; verified: number; }; extensions: Record; features: Array<{ id: string; title: string; description: string; icon: string; gradient: string; stats: Array<{ label: string; value: string; icon: string }>; link: string; data?: Record; }>; settings: { spotEnabled: boolean; }; } // Helper function to get text from database variables const getContent = (pageContent: PageContent | null, path: string, defaultValue: string = "") => { if (!pageContent?.variables) return defaultValue; const pathParts = path.split('.'); let value = pageContent.variables; for (const part of pathParts) { if (value && typeof value === 'object' && part in value) { value = value[part]; } else { return defaultValue; } } const result = value || defaultValue; return result != null ? String(result) : defaultValue; }; // Animated noise texture overlay function NoiseOverlay() { return (
); } // Mesh gradient background - using CSS animations for better performance function MeshBackground() { return (
{/* Use CSS animations instead of framer-motion for background blobs */}
); } // Premium glass card with scroll reveal function GlassCard({ children, className, delay = 0, hover = true }: { children: React.ReactNode; className?: string; delay?: number; hover?: boolean; }) { return (
{children}
); } // Custom hook for section scroll animations - optimized with Intersection Observer function useSectionScroll(ref: React.RefObject) { const [isVisible, setIsVisible] = useState(false); useEffect(() => { const element = ref.current; if (!element) return; // Use Intersection Observer instead of scroll events for better performance const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { setIsVisible(entry.isIntersecting); }); }, { threshold: 0.1, // Trigger when 10% of element is visible rootMargin: '50px 0px', // Start animation slightly before element enters viewport } ); observer.observe(element); return () => { observer.disconnect(); }; }, [ref]); // Return simple visible/hidden states - let CSS handle the transition return { opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 40, scale: 1, // Remove scale animation to reduce GPU load }; } // Section wrapper with scroll animations function Section({ children, className, id }: { children: React.ReactNode; className?: string; id?: string }) { const sectionRef = useRef(null); const { opacity, y } = useSectionScroll(sectionRef); return (
{children}
); } // Premium ticker - memoized to prevent re-renders from WebSocket updates const PremiumTicker = React.memo(function PremiumTicker({ assets }: { assets: any[] }) { const tickerRef = useRef(null); const isInView = useInView(tickerRef, { margin: "-100px" }); const [isPageVisible, setIsPageVisible] = useState(true); const prefersReducedMotion = useReducedMotion(); // Pause animation when tab is not visible to save CPU useEffect(() => { const handleVisibilityChange = () => { setIsPageVisible(!document.hidden); }; document.addEventListener("visibilitychange", handleVisibilityChange); return () => document.removeEventListener("visibilitychange", handleVisibilityChange); }, []); if (!assets.length) return null; const tickerAssets = useMemo(() => [...assets, ...assets, ...assets], [assets]); // Only animate when visible and page is active const shouldAnimate = isInView && isPageVisible && !prefersReducedMotion; return (
{tickerAssets.map((asset, index) => (
{asset.name { const target = e.currentTarget; if (!target.dataset.fallbackAttempted) { target.dataset.fallbackAttempted = 'true'; target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIgZmlsbD0iIzMzMyIvPjwvc3ZnPg=='; } }} />
{asset.name || asset.currency} {asset.price?.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 8 }) || "0.00"}
= 0 ? "text-emerald-400 bg-emerald-500/15" : "text-red-400 bg-red-500/15" )}> {asset.change24h >= 0 ? "+" : ""}{asset.change24h?.toFixed(2) || "0.00"}%
))}
); }); // Live Markets Grid for Spot/Ecosystem sections - memoized to prevent re-renders const LiveMarketsGrid = React.memo(function LiveMarketsGrid({ assets, gradient, linkBase, settings, isEco = false }: { assets: any[]; gradient: string; linkBase: string; settings: any; isEco?: boolean; }) { const formatPrice = (price: number) => { if (price >= 1000) return price.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); if (price >= 1) return price.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 4 }); return price.toLocaleString("en-US", { minimumFractionDigits: 4, maximumFractionDigits: 8 }); }; if (!assets || assets.length === 0) { return (
{[...Array(4)].map((_, i) => (
))}
); } return (
{assets.slice(0, 4).map((asset, index) => (
{asset.currency { const target = e.currentTarget; if (!target.dataset.fallbackAttempted) { target.dataset.fallbackAttempted = 'true'; target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyMCIgZmlsbD0iIzMzMyIvPjwvc3ZnPg=='; } }} />
{asset.currency || asset.name}
{asset.pair ? `/${asset.pair}` : ''}
{formatPrice(asset.price || 0)} = 0 ? "text-emerald-400 bg-emerald-500/15" : "text-red-400 bg-red-500/15" )}> {(asset.change24h || 0) >= 0 ? "+" : ""}{(asset.change24h || 0).toFixed(2)}%
))}
); }); // Format helpers function formatNumber(num: number): string { if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`; if (num >= 1000) return `${(num / 1000).toFixed(1)}K`; return num.toLocaleString(); } function formatValue(value: number): string { if (value >= 1000000000) return `$${(value / 1000000000).toFixed(2)}B`; if (value >= 1000000) return `$${(value / 1000000).toFixed(2)}M`; if (value >= 1000) return `$${(value / 1000).toFixed(2)}K`; return `$${value.toFixed(2)}`; } // ===== UNIQUE EXTENSION SECTIONS WITH REAL DATA ===== // Spot Trading Section function SpotTradingSection({ feature, topAssets, settings }: { feature: any; topAssets: any[]; settings: any }) { const t = useTranslations("common"); const sectionRef = useRef(null); const { opacity, y, scale } = useSectionScroll(sectionRef); const hasItems = topAssets && topAssets.length > 0; return (
{/* Floating shapes background */}
{/* Content */} {/* Feature icon for no-items view */} {!hasItems && ( )} {t("spot_trading")}

{t("trade_with")}{" "} precision

{t("execute_trades_instantly_with_our_advanced")}

{/* Stats from API */}
{feature.stats?.map((stat: any, i: number) => { const StatIcon = iconMap[stat.icon] || Activity; return (
{stat.value}
{stat.label}
 ); })}
{t("start_trading")} {/* Trading Card Visual - Only show when has items */} {hasItems && (
{t("live_spot_markets")}
{t("real_time_prices")}
Live
{t("view_all_markets")}
)}
); } // Binary Options Section with real data function BinaryOptionsSection({ feature }: { feature: any }) { const t = useTranslations("common"); const sectionRef = useRef(null); const { opacity, y, scale } = useSectionScroll(sectionRef); return (
{/* Floating shapes */}
{/* Visual - Prediction UI */}
{t("select_duration")}

{t("predict_market_movement")}

{t("will_the_price_go_up_or_down")}
UP DOWN
{/* Content */} {t("binary_options")}

Predict &{" "} profit

{t("simple_yes_or_no_predictions_on_market_movements")}

{/* Stats from API */}
{feature.stats?.map((stat: any, i: number) => { const StatIcon = iconMap[stat.icon] || Activity; return (
{stat.value}
{stat.label}
 ); })}
{t("start_predicting")}
); } // Futures Trading Section function FuturesTradingSection({ feature }: { feature: any }) { const t = useTranslations("common"); const sectionRef = useRef(null); const { opacity, y, scale } = useSectionScroll(sectionRef); const leverageOptions = [5, 10, 25, 50, 75, 100, 125, 150]; const [selectedLeverage, setSelectedLeverage] = useState(100); const baseAmount = 1000; return (
{/* Floating shapes */}
{/* Leverage Visual */}

{t("leverage_calculator")}

Interactive
{leverageOptions.map((lev) => ( setSelectedLeverage(lev)} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className={cn( "py-3 rounded-xl font-bold text-sm transition-all duration-200", selectedLeverage === lev ? "bg-gradient-to-br from-orange-500 to-red-500 text-white shadow-lg shadow-orange-500/30" : "bg-white/5 hover:bg-white/10 text-muted-foreground hover:text-foreground" )} > {lev}x ))}
{t("your_margin")} ${baseAmount.toLocaleString()}
{t("position_size")} ${(baseAmount * selectedLeverage).toLocaleString()}
with {selectedLeverage}{t("x_leverage")}
+1% move = +{selectedLeverage}% profit
{/* Content */} {t("futures_trading")}

{t("amplify_your")}{" "} trades

{t("trade_perpetual_futures_with_up_to_150x_leverage")}

{/* Stats from API */}
{feature.stats?.map((stat: any, i: number) => { const StatIcon = iconMap[stat.icon] || Activity; return (
{stat.value}
{stat.label}
 ); })}
{t("trade_futures")}
); } // Ecosystem Section with eco markets function EcosystemSection({ feature, ecoMarkets, settings }: { feature: any; ecoMarkets: any[]; settings: any }) { const t = useTranslations("common"); const sectionRef = useRef(null); const { opacity, y, scale } = useSectionScroll(sectionRef); const hasItems = ecoMarkets && ecoMarkets.length > 0; return (
{/* Floating shapes */}
{/* Content */} {/* Feature icon for no-items view */} {!hasItems && ( )} {t("native_tokens")}

On-chain{" "} trading

{t('trade_native_blockchain_tokens_with_direct')}

{/* Stats from API */}
{feature.stats?.map((stat: any, i: number) => { const StatIcon = iconMap[stat.icon] || Activity; return (
{stat.value}
{stat.label}
 ); })}
{t("start_trading")} {/* Eco Markets Card - Only show when has items */} {hasItems && (
{t("native_token_markets")}
{t("decentralized_trading")}
Live
{t("start_trading")}
)}
); } // Staking Section with real data function StakingSection({ feature, data }: { feature: any; data: any }) { const t = useTranslations("common"); const sectionRef = useRef(null); const { opacity, y, scale } = useSectionScroll(sectionRef); const featuredPools = data?.featuredPools || []; const highestApr = data?.highestApr || 0; const hasItems = featuredPools.length > 0; return (
{/* Floating shapes */}
{/* Visual - Real Pool Data - Only show when has items */} {hasItems && (
{t("highest_apr")}
{highestApr?.toFixed?.(1) || highestApr || "0"}%
{featuredPools.slice(0, 3).map((pool: any, i: number) => (
{pool.symbol || pool.name}
{pool.apr?.toFixed(1)}% APR ))}
)} {/* Content */} {/* Feature icon for no-items view */} {!hasItems && ( )} {t("staking_pools")}

Earn{" "} passively

{t("stake_your_assets_and_earn_competitive_yields")}

{/* Stats from API */}
{feature.stats?.map((stat: any, i: number) => { const StatIcon = iconMap[stat.icon] || Activity; return (
{stat.value}
{stat.label}
 ); })}
{t("start_staking")}
); } // Generic Extension Section for other extensions function GenericExtensionSection({ feature, index }: { feature: any; index: number }) { const t = useTranslations("common"); const sectionRef = useRef(null); const { opacity, y, scale } = useSectionScroll(sectionRef); const isEven = index % 2 === 0; const IconComponent = iconMap[feature.icon] || Zap; // Theme mapping for extensions const themeMap: Record = { ico: { primary: "amber", secondary: "orange" }, ai: { primary: "violet", secondary: "purple" }, forex: { primary: "emerald", secondary: "teal" }, copyTrading: { primary: "cyan", secondary: "blue" }, affiliate: { primary: "rose", secondary: "pink" }, ecommerce: { primary: "amber", secondary: "emerald" }, }; const theme = themeMap[feature.id] || { primary: "blue", secondary: "purple" }; return (
{/* Floating shapes */}
{/* Content */} {feature.title}

{feature.title}

{feature.description}

{/* Stats from API */}
{feature.stats?.map((stat: any, i: number) => { const StatIcon = iconMap[stat.icon] || Activity; return (
{stat.value}
{stat.label}
 ); })}
{t("learn_more")} {/* Visual Card */}

{feature.title}

{feature.description}
); } // User Portfolio Summary component function UserPortfolioSummary() { const t = useTranslations("common"); const { user } = useUserStore(); const { totalBalance, totalChange, totalChangePercent, fetchStats, } = useWalletStore(); const [showBalance, setShowBalance] = useState(true); useEffect(() => { if (user) { fetchStats(); } }, [user, fetchStats]); const formatBalance = (amount: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount); }; const formatChange = (amount: number) => { const prefix = amount >= 0 ? '+' : ''; return prefix + new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount); }; return (
{/* Header */}

{t("welcome_back")} {user?.firstName || 'Trader'}!

{t("your_portfolio_overview")}

{/* Total Balance with PnL */}
{t("total_balance")}
= 0 ? "text-emerald-600 dark:text-emerald-400 bg-emerald-500/10" : "text-red-600 dark:text-red-400 bg-red-500/10" )}> {totalChangePercent >= 0 ? : } {totalChangePercent >= 0 ? '+' : ''}{totalChangePercent.toFixed(2)}%
{showBalance ? formatBalance(totalBalance) : '••••••'}
= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400" )}> {showBalance ? `24h: ${formatChange(totalChange)}` : '24h: ••••••'}
{/* Action Buttons */}
{t("my_wallets")} {t("trade_now")}
); } // ===== MAIN COMPONENT ===== export default function DefaultHomePage() { const t = useTranslations("common"); const [markets, setMarkets] = useState([]); const [ecoMarkets, setEcoMarkets] = useState([]); const [tickers, setTickers] = useState>({}); const [isLoading, setIsLoading] = useState(true); const [pageContent, setPageContent] = useState(null); const [landingStats, setLandingStats] = useState(null); // Refs to prevent duplicate fetches const hasFetchedData = useRef(false); const hasFetchedEcoMarkets = useRef(false); const hasFetchedMarkets = useRef(false); // Ref for ticker data to avoid frequent state updates const tickersRef = useRef>({}); const tickerUpdateTimeoutRef = useRef(null); const { user } = useUserStore(); const { settings, extensions } = useConfigStore(); const heroRef = useRef(null); const [isScrollReady, setIsScrollReady] = useState(false); // Track when the hero ref is attached and ready for scroll tracking // Use requestAnimationFrame to ensure DOM is painted before enabling scroll useEffect(() => { const raf = requestAnimationFrame(() => { if (heroRef.current) { setIsScrollReady(true); } }); return () => cancelAnimationFrame(raf); }, []); // Use scroll with proper client-side only handling // Only pass the target ref when the DOM element is ready const { scrollYProgress } = useScroll({ target: isScrollReady ? heroRef : undefined, offset: ["start start", "end start"], }); const heroY = useTransform(scrollYProgress, [0, 1], [0, 200]); const heroOpacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]); const isSpotEnabled = settings?.spotWallets === true || settings?.spotWallets === "true"; const isEcosystemEnabled = extensions?.includes("ecosystem"); // Load page content and landing stats useEffect(() => { if (hasFetchedData.current) return; hasFetchedData.current = true; const fetchData = async () => { try { const [contentResponse, statsResponse] = await Promise.all([ $fetch({ url: `/api/content/default-page/home`, method: "GET", params: { pageSource: 'default' }, silent: true }), $fetch({ url: `/api/content/landing-stats`, method: "GET", silent: true }) ]); if (contentResponse.data) setPageContent(contentResponse.data); if (statsResponse.data) setLandingStats(statsResponse.data); } catch (error) { console.error("Error loading data:", error); } }; fetchData(); }, []); // Extension data is now fetched via the consolidated landing-stats endpoint // Fetch ecosystem markets separately useEffect(() => { // Wait for extensions to load if (extensions === undefined) return; if (!isEcosystemEnabled || hasFetchedEcoMarkets.current) return; hasFetchedEcoMarkets.current = true; const fetchEcoMarkets = async () => { try { const res = await fetch("/api/ecosystem/market"); if (!res.ok) throw new Error(`HTTP ${res.status}`); const data = await res.json(); if (Array.isArray(data)) { setEcoMarkets(data.map((market: any) => ({ currency: market.currency, pair: market.pair, price: market.price || 0, change24h: market.change || 0, symbol: `${market.currency}/${market.pair}`, }))); } } catch (e) { console.error("Error fetching eco markets:", e); } }; fetchEcoMarkets(); }, [isEcosystemEnabled, extensions]); // Market data fetching useEffect(() => { let spotUnsubscribe: (() => void) | null = null; // isSpotEnabled will be false when settings is undefined or spotWallets is not enabled if (!isSpotEnabled) { setIsLoading(false); return () => { // Reset on cleanup even when disabled hasFetchedMarkets.current = false; }; } if (hasFetchedMarkets.current) { // Already fetched, but still need to ensure WebSocket is subscribed // This can happen after a re-mount in React Strict Mode tickersWs.initialize(); let hasReceivedData = false; spotUnsubscribe = tickersWs.subscribeToSpotData((newTickers) => { tickersRef.current = newTickers; // Immediately update on first data received if (!hasReceivedData && Object.keys(newTickers).length > 0) { hasReceivedData = true; setTickers({ ...newTickers }); return; } // Update state periodically if (!tickerUpdateTimeoutRef.current) { tickerUpdateTimeoutRef.current = setTimeout(() => { setTickers({ ...tickersRef.current }); tickerUpdateTimeoutRef.current = null; }, 3000); } }); return () => { if (spotUnsubscribe) spotUnsubscribe(); if (tickerUpdateTimeoutRef.current) { clearTimeout(tickerUpdateTimeoutRef.current); tickerUpdateTimeoutRef.current = null; } }; } hasFetchedMarkets.current = true; const fetchMarkets = async () => { try { const res = await fetch("/api/exchange/market"); if (!res.ok) throw new Error(`HTTP ${res.status}`); const data = await res.json(); setMarkets( Array.isArray(data) ? data.map((market) => ({ ...market, displaySymbol: `${market.currency}/${market.pair}`, symbol: `${market.currency}${market.pair}`, })) : [] ); } catch (e) { console.error("Error fetching markets:", e); setMarkets([]); } finally { setIsLoading(false); } }; fetchMarkets(); try { tickersWs.initialize(); let hasReceivedInitialData = false; spotUnsubscribe = tickersWs.subscribeToSpotData((newTickers) => { // Store latest tickers in ref (no re-render) tickersRef.current = newTickers; // Immediately update on first data received if (!hasReceivedInitialData && Object.keys(newTickers).length > 0) { hasReceivedInitialData = true; setTickers({ ...newTickers }); return; } // Throttle subsequent state updates to every 3 seconds to prevent excessive re-renders if (!tickerUpdateTimeoutRef.current) { tickerUpdateTimeoutRef.current = setTimeout(() => { setTickers({ ...tickersRef.current }); tickerUpdateTimeoutRef.current = null; }, 3000); } }); } catch (wsError) { console.error("WebSocket initialization error:", wsError); } return () => { if (spotUnsubscribe) spotUnsubscribe(); if (tickerUpdateTimeoutRef.current) { clearTimeout(tickerUpdateTimeoutRef.current); tickerUpdateTimeoutRef.current = null; } // Reset the ref so the effect can run again on remount (React Strict Mode) hasFetchedMarkets.current = false; }; // Note: Only depend on isSpotEnabled, not settings object, to prevent unnecessary re-runs // when settings object reference changes but values remain the same }, [isSpotEnabled]); const topAssets = useMemo(() => { if (!markets.length) return []; return markets .map((market) => { const tickerKey = `${market.currency}/${market.pair}`; const ticker = tickers[tickerKey] || {}; return { name: market.currency, symbol: market.symbol, currency: market.currency, pair: market.pair, price: Number(ticker.last) || 0, change24h: Number(ticker.change) || 0, volume: Number(ticker.quoteVolume) || 0, }; }) .sort((a, b) => b.volume - a.volume) .slice(0, 10); }, [markets, tickers]); const formatPrice = (price: number) => { if (price >= 1000) return price.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); if (price >= 1) return price.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 4 }); return price.toLocaleString("en-US", { minimumFractionDigits: 4, maximumFractionDigits: 8 }); }; // Filter and sort extension sections based on admin configuration const dynamicFeatures = useMemo(() => { const features = landingStats?.features || []; const extensionConfig = pageContent?.variables?.extensionSections || {}; // Filter out disabled extensions and sort by order return features .filter((feature) => { const config = extensionConfig[feature.id]; // If no config exists, show by default return config?.enabled !== false; }) .sort((a, b) => { const configA = extensionConfig[a.id] || { order: 999 }; const configB = extensionConfig[b.id] || { order: 999 }; return (configA.order ?? 999) - (configB.order ?? 999); }); }, [landingStats?.features, pageContent?.variables?.extensionSections]); // Render appropriate section based on feature ID with real data from consolidated endpoint const renderExtensionSection = (feature: any, index: number) => { // Data is now embedded in feature.data from the landing-stats endpoint const featureData = feature.data || {}; switch (feature.id) { case "spot": return ; case "binary": return ; case "futures": return ; case "ecosystem": return ; case "staking": return ; default: return ; } }; return (
{/* Hero Section */}
{/* Hero floating shapes */}
{/* Hero Content */}
{getContent(pageContent, "hero.badge", "#1 Crypto Trading Platform")} {getContent(pageContent, "hero.title", "Trade Crypto")} {getContent(pageContent, "hero.subtitle", "like a pro")} {getContent(pageContent, "hero.description", "Experience lightning-fast execution, institutional-grade security, and advanced trading tools designed for the modern trader.")} {user ? t("start_trading") : getContent(pageContent, "hero.cta", "Start Trading Free")} {isSpotEnabled && ( {t("explore_markets")} )} {(pageContent?.variables?.hero?.features || ["Bank-Grade Security", "24/7 Trading", "Instant Deposits"]).map((feature: string, i: number) => (
{feature}
))}
{/* Right Side Panel */} {(isSpotEnabled || user) && ( {user ? ( ) : (

{t("live_markets")}

{t("top_performing_assets")}

Live
{isLoading ? ( [...Array(5)].map((_, i) => (
)) ) : ( topAssets.slice(0, 5).map((asset, index) => (
{asset.currency { const target = e.currentTarget; if (!target.dataset.fallbackAttempted) { target.dataset.fallbackAttempted = 'true'; target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIyNCIgZmlsbD0iIzMzMyIvPjwvc3ZnPg=='; } }} />
{asset.name}
{asset.symbol}
{formatPrice(asset.price)}
= 0 ? "text-emerald-400" : "text-red-400" )}> {asset.change24h >= 0 ? : } {asset.change24h >= 0 ? "+" : ""}{asset.change24h.toFixed(2)}%
)) )}
{t("view_all_markets")}
)} )}
{/* Live Ticker */} {isSpotEnabled && topAssets.length > 0 && pageContent?.variables?.ticker?.enabled !== false && (
)} {/* Extension Sections - Each with unique design and real data */} {dynamicFeatures.map((feature, index) => renderExtensionSection(feature, index))} {/* Why Choose Us Section */}
{getContent(pageContent, "featuresSection.badge", "Why Choose Us")}

{getContent(pageContent, "featuresSection.title", "Built for")}{" "} {getContent(pageContent, "featuresSection.subtitle", "Professional Traders")}

{getContent(pageContent, "featuresSection.description", "Experience unmatched security, lightning-fast execution, and professional-grade tools designed for serious traders.")}

{(pageContent?.variables?.features || [ { icon: "Shield", title: "Bank-Grade Security", description: "Multi-layer security with cold storage and 2FA", gradient: "from-emerald-500 to-cyan-500" }, { icon: "Zap", title: "Lightning Fast", description: "Ultra-low latency trading engine", gradient: "from-yellow-500 to-orange-500" }, { icon: "Globe", title: "Global Access", description: "Trade from anywhere in the world", gradient: "from-blue-500 to-indigo-500" }, { icon: "Clock", title: "24/7 Support", description: "Round-the-clock customer support", gradient: "from-purple-500 to-pink-500" }, ]).slice(0, 4).map((feature: any, i: number) => { const Icon = iconMap[feature.icon] || Zap; return (

{feature.title}

{feature.description}

 ); })}

{getContent(pageContent, "globalSection.platformFeatures.title", "Platform Features")}

{(pageContent?.variables?.globalSection?.platformFeatures?.items || [ "Real-time market data and price feeds", "Advanced order types (Limit, Market, Stop-Loss)", "Professional TradingView charts integration", "Mobile apps for iOS and Android", "API access for algorithmic trading", "Multi-language support", ]).map((item: string, i: number) => (
{item} ))}
{/* Getting Started Section */}
{getContent(pageContent, "gettingStarted.badge", "Get Started")}

{getContent(pageContent, "gettingStarted.title", "Start Trading")}{" "} {getContent(pageContent, "gettingStarted.subtitle", "in Minutes")}

{(pageContent?.variables?.gettingStarted?.steps || [ { step: "01", title: "Create Account", description: "Sign up in seconds with just your email.", icon: "Users", gradient: "from-blue-500 to-cyan-500" }, { step: "02", title: "Fund Your Wallet", description: "Deposit funds using multiple payment methods.", icon: "Wallet", gradient: "from-purple-500 to-pink-500" }, { step: "03", title: "Start Trading", description: "Access markets and start trading instantly.", icon: "TrendingUp", gradient: "from-orange-500 to-red-500" }, ]).map((step: any, i: number) => { const Icon = iconMap[step.icon] || Users; return (
{step.step}

{step.title}

{step.description}

 ); })}
{/* Mobile App Section */} {pageContent?.variables?.mobileApp?.enabled !== false && } {/* CTA Section */}
{getContent(pageContent, "cta.badge", "Join Now")}

{user ? t("continue_trading") : getContent(pageContent, "cta.title", "Ready to Start Trading?")}

{user ? t("explore_our_markets_description") : getContent(pageContent, "cta.description", "Join thousands of traders who trust our platform. Start your journey to financial freedom today.")}

{user ? getContent(pageContent, "cta.buttonUser", t("explore_markets")) : getContent(pageContent, "cta.button", t("create_free_account"))}
{(user ? pageContent?.variables?.cta?.featuresUser || ["Real-time Data", "Secure Trading", "24/7 Access"] : pageContent?.variables?.cta?.features || ["No Credit Card Required", "Free Registration", "Instant Access"] ).map((feature: string, i: number) => (
{feature}
))}
); }