import { Head, Link, usePage } from '@inertiajs/react'; import { motion, AnimatePresence } from 'framer-motion'; import { TrendingUp, Layers, ShieldCheck, Cpu, Coins, Users, ArrowRight, Sparkles, AlertCircle, CheckCircle2, LineChart, Sun, Moon, Monitor, Menu, } from 'lucide-react'; import { useState } from 'react'; import AppLogoIcon from '@/components/app-logo-icon'; import { LanguageSwitcher } from '@/components/language-switcher'; import { Button } from '@/components/ui/button'; import { Sheet, SheetContent, SheetTitle, SheetTrigger, } from '@/components/ui/sheet'; import { Toaster } from '@/components/ui/sonner'; import { useAppearance } from '@/hooks/use-appearance'; import { useTranslation } from '@/hooks/use-translation'; import { dashboard, login } from '@/routes'; export default function Welcome() { const { auth } = usePage().props; const { t } = useTranslation(); const [activeSandboxTab, setActiveSandboxTab] = useState< 'profit' | 'vendors' | 'products' >('profit'); const { appearance, updateAppearance } = useAppearance(); const toLocalDigits = (val: string | number) => { const str = String(val); if (t('common.locale') !== 'bn') { return str; } const bnDigits = ['০', '১', '২', '৩', '৪', '৫', '৬', '৭', '৮', '৯']; return str.replace(/[0-9]/g, (w) => bnDigits[parseInt(w)]); }; const scrollToSection = ( e: React.MouseEvent, id: string, ) => { e.preventDefault(); const element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } }; // Dashboard Mockup Data const mockVendors = [ { name: 'Apex Electronics', dues: '৳1,240.00', status: 'Pending', color: 'text-amber-400 bg-amber-500/10 border-amber-500/20', }, { name: 'Sleek Wear Ltd', dues: '৳450.00', status: 'Pending', color: 'text-amber-400 bg-amber-500/10 border-amber-500/20', }, { name: 'Prime Goods', dues: '৳0.00', status: 'Settled', color: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20', }, ]; const mockProducts = [ { name: 'Smartwatch Series X', margin: '42%', revenue: '৳8,420.00', stock: 124, }, { name: 'Audio Pods Pro', margin: '51%', revenue: '৳12,050.00', stock: 89, }, { name: 'MagSafe Dock Max', margin: '38%', revenue: '৳4,100.00', stock: 15, }, ]; return (
{/* Background elements */}
{/* Navigation Header */}
Profit ly {t('welcome.tagline')}
{/* Nav Links - Desktop */} {/* CTA Actions - Desktop */}
{/* One-click Theme Switcher */} {auth.user ? ( {t('welcome.admin_panel')} ) : ( {t('welcome.access_platform')} )}
{/* Mobile Menu Trigger & Actions */}
{/* Theme switcher */} Navigation Menu
Profitly
{auth.user ? ( {t('welcome.admin_panel')} ) : ( {t('welcome.access_platform')} )}
{/* Hero Section */}
{t('welcome.next_gen_bi')}

{t('welcome.hero_title_1')}
{t('welcome.hero_title_2')}

{t('welcome.hero_desc')}

{t('welcome.get_started_free')}
{/* Social proof metric pills */}
{t('welcome.tx_tracked', { amount: t('common.locale') === 'bn' ? '৳৪.২ কোটি+' : '$42M+', })}
{t('welcome.uptime')}
{t('welcome.vendors_integrated')}
{/* Interactive Mockup Sandbox */}

{t('welcome.cockpit_title')}

{t('welcome.cockpit_desc')}

{/* Interactive Tab Switchers */}
{[ { id: 'profit', label: t('welcome.profit_analytics'), shortLabel: t('welcome.profit_short'), icon: LineChart, }, { id: 'vendors', label: t('welcome.vendor_dues'), shortLabel: t('welcome.vendor_short'), icon: Coins, }, { id: 'products', label: t('welcome.product_margin'), shortLabel: t('welcome.product_short'), icon: Layers, }, ].map((tab) => { const Icon = tab.icon; return ( ); })}
{/* Cockpit Card Wrapper */}
{/* Windows controls layout */}
dashboard_preview.vdx
{t('welcome.live_demo')}
{/* Interactive Sandbox Cards */} {activeSandboxTab === 'profit' && ( {/* Stat 1 */}
{t( 'welcome.monthly_gross_profit', )} +18.2%
{t('common.locale') === 'bn' ? '৳১৪,৮২০.০০' : '৳14,820.00'}
{t('welcome.calculated_orders', { count: t('common.locale') === 'bn' ? '৩৪০' : '340', })}
{/* Stat 2 */}
{t('welcome.avg_order_value')} +4.6%
{t('common.locale') === 'bn' ? '৳৮৪.৫০' : '৳84.50'}
{t('welcome.aov_desc')}
{/* Stat 3 */}
{t('welcome.net_profit_margin')} {t('welcome.optimal')}
{t('common.locale') === 'bn' ? '৪২.৮%' : '42.8%'}
{t('welcome.npm_desc')}
{/* Profit Vector Graph Mockup */}
{t('welcome.sales_yield')}
{t('welcome.earnings_path')}
{/* SVG Chart with drawing line */}
)} {activeSandboxTab === 'vendors' && (
{t('welcome.accumulated_dues')}
{t('common.locale') === 'bn' ? '৳১,৬৯০.০০' : '৳1,690.00'}

{t( 'welcome.dues_action_needed', { count: t( 'common.locale', ) === 'bn' ? '২' : '2', }, )}

{t( 'welcome.total_vendors_linked', )}
{t('welcome.active_count', { count: t('common.locale') === 'bn' ? '১২' : '12', })}

{t( 'welcome.all_pipelines_syncing', )}

{/* Mock Vendor List */}
{t('welcome.priority_settlements')}
{mockVendors.map((vendor, i) => (
{vendor.name}
{t( 'welcome.updated_ago', { time: t( 'common.locale', ) === 'bn' ? '৪ ঘণ্টা' : '4 hours', }, )}
{t( 'common.locale', ) === 'bn' ? vendor.dues === '৳1,240.00' ? '৳১,২৪০.০০' : vendor.dues === '৳450.00' ? '৳৪৫০.০০' : '৳০.০০' : vendor.dues === '৳1,240.00' ? '৳1,240.00' : vendor.dues === '৳450.00' ? '৳450.00' : '৳0.00'} {vendor.status === 'Pending' ? t( 'common.locale', ) === 'bn' ? 'বকেয়া' : 'Pending' : t( 'common.locale', ) === 'bn' ? 'পরিশোধিত' : 'Settled'}
))}
)} {activeSandboxTab === 'products' && (
{t( 'welcome.top_margin_product', )}
{t('welcome.locale') === 'bn' ? 'অডিও পডস প্রো' : 'Audio Pods Pro'}
{toLocalDigits('51%')}{' '} {t('welcome.net_yield_margin')}
{t('welcome.low_stock_warning')}
{t('welcome.locale') === 'bn' ? 'ম্যাগসেফ ডক ম্যাক্স' : 'MagSafe Dock Max'}
{t('welcome.items_remaining', { count: toLocalDigits(15), })}
{/* Products Catalog ledger */}
{t( 'welcome.highest_revenue_inventory', )}
{mockProducts.map((prod, i) => (
{t( 'welcome.locale', ) === 'bn' ? prod.name === 'Smartwatch Series X' ? 'স্মার্টওয়াচ সিরিজ এক্স' : prod.name === 'Audio Pods Pro' ? 'অডিও পডস প্রো' : 'ম্যাগসেফ ডক ম্যাক্স' : prod.name}
{t( 'welcome.stock_level', { count: toLocalDigits( prod.stock, ), }, )}
{t( 'welcome.yield', )}
{toLocalDigits( prod.margin, )}
{t( 'welcome.gross_sales', )}
{t( 'common.locale', ) === 'bn' ? prod.revenue === '৳8,420.00' ? '৳৮,৪২০.০০' : prod.revenue === '৳12,050.00' ? '৳১২,০৫০.০০' : '৳৪,১০০.০০' : prod.revenue}
))}
)}
{/* Core Features Grid */}
{t('welcome.features_sub')}

{t('welcome.built_for_resellers')}

{t('welcome.built_for_resellers_desc')}

{/* Features Matrix */}
{[ { icon: TrendingUp, title: t('welcome.net_profit_engine'), desc: t('welcome.net_profit_engine_desc'), color: 'from-violet-500/5 dark:from-violet-500/10 to-transparent hover:border-violet-500/30', }, { icon: Coins, title: t('welcome.vendor_settlements'), desc: t('welcome.vendor_settlements_desc'), color: 'from-indigo-500/5 dark:from-indigo-500/10 to-transparent hover:border-indigo-500/30', }, { icon: Layers, title: t('welcome.inventory_analytics'), desc: t('welcome.inventory_analytics_desc'), color: 'from-cyan-500/5 dark:from-cyan-500/10 to-transparent hover:border-cyan-500/30', }, { icon: Cpu, title: t('welcome.unified_data_sync'), desc: t('welcome.unified_data_sync_desc'), color: 'from-purple-500/5 dark:from-purple-500/10 to-transparent hover:border-purple-500/30', }, { icon: ShieldCheck, title: t('welcome.granular_security'), desc: t('welcome.granular_security_desc'), color: 'from-emerald-500/5 dark:from-emerald-500/10 to-transparent hover:border-emerald-500/30', }, { icon: Users, title: t('welcome.customer_crm'), desc: t('welcome.customer_crm_desc'), color: 'from-pink-500/5 dark:from-pink-500/10 to-transparent hover:border-pink-500/30', }, ].map((feat, i) => { const Icon = feat.icon; return (

{feat.title}

{feat.desc}

); })}
{/* Premium CTA Panel */}

{t('welcome.maximize_limits')}

{t('welcome.maximize_limits_desc')}

{t('welcome.access_cockpit_now')}
{/* Footer */}
{/* Brand info */}
Profitly

{t('welcome.footer_desc')}

{/* Links col 1 */}

{t('welcome.platform')}

  • {t('welcome.login_portal')}
{/* Links col 2 */} {/* Links col 3 */}

{t('welcome.security')}

  • {t('welcome.rbac_config')}
  • {t('welcome.action_logs_audit')}
  • {t('welcome.data_cryptography')}

© {toLocalDigits(new Date().getFullYear())}{' '} {t('welcome.all_rights_reserved')}

{t('welcome.privacy_policy')} {t('welcome.terms_of_service')}
); }