ATABSC Token Sale - Moves with XLM on the Stellar Blockchain<\/title>\r\n <meta name=\"description\" content=\"ATABSC - Another Totally Awesome But Speculative Coin. Built on Stellar. Enterprise-ready blockchain infrastructure. Low fees, fast transactions.\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"..\/dist\/tailwind.min.css\">\r\n \r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/stellar-sdk\/11.2.2\/stellar-sdk.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n \r\n .lucide {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect } = React;\r\n const StellarSdk = window.StellarSdk;\r\n \r\n \/\/ Lucide Icon Components\r\n const ArrowRight = () => <i data-lucide=\"arrow-right\" className=\"w-5 h-5\"><\/i>;\r\n const Coins = ({ className }) => <i data-lucide=\"coins\" className={className}><\/i>;\r\n const Shield = ({ className }) => <i data-lucide=\"shield\" className={className}><\/i>;\r\n const Users = ({ className }) => <i data-lucide=\"users\" className={className}><\/i>;\r\n const Zap = ({ className }) => <i data-lucide=\"zap\" className={className}><\/i>;\r\n const Globe = ({ className }) => <i data-lucide=\"globe\" className={className}><\/i>;\r\n const Menu = () => <i data-lucide=\"menu\" className=\"w-6 h-6\"><\/i>;\r\n const X = ({ className }) => <i data-lucide=\"x\" className={className || \"w-6 h-6\"}><\/i>;\r\n const Check = ({ className }) => <i data-lucide=\"check\" className={className}><\/i>;\r\n const Wallet = ({ className }) => <i data-lucide=\"wallet\" className={className}><\/i>;\r\n const ExternalLink = ({ className }) => <i data-lucide=\"external-link\" className={className}><\/i>;\r\n const AlertCircle = ({ className }) => <i data-lucide=\"alert-circle\" className={className}><\/i>;\r\n const DollarSign = ({ className }) => <i data-lucide=\"dollar-sign\" className={className}><\/i>;\r\n\r\n function ATABSCLanding() {\r\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n const [activeTab, setActiveTab] = useState('individual');\r\n const [showBuyModal, setShowBuyModal] = useState(false);\r\n const [walletConnected, setWalletConnected] = useState(false);\r\n const [walletAddress, setWalletAddress] = useState('');\r\n const [purchaseAmount, setPurchaseAmount] = useState('');\r\n const [selectedToken, setSelectedToken] = useState('XLM');\r\n const [isProcessing, setIsProcessing] = useState(false);\r\n const [txHash, setTxHash] = useState('');\r\n const [xlmPrice, setXlmPrice] = useState(0.14); \/\/ Will be updated from CoinGecko\r\n\r\n \/\/ Set your actual ICO start date here (UTC-5)\r\n const ICO_START_DATE = new Date('2026-01-17T00:00:00Z'); \/\/ Change this to your actual date\r\n\r\n \/\/ Countdown timer\r\n const [timeLeft, setTimeLeft] = useState({\r\n days: 0,\r\n hours: 0,\r\n minutes: 0,\r\n seconds: 0\r\n });\r\n\r\n \/\/ Token configuration\r\n const XLM_MULTIPLIER = 23; \/\/ ATABSC = XLM * 23\r\n const TOKEN_PRICE = xlmPrice * XLM_MULTIPLIER; \/\/ Dynamic pricing pegged to XLM\r\n const ICO_PUBLIC_KEY = 'GXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; \/\/ Replace with your ICO wallet\r\n const ATABSC_ASSET_CODE = 'ATABSC';\r\n const ATABSC_ISSUER = 'GDCIYZ7HU3ALQGWO26EXVM2DMMUQEFZMLGGWHFG77LMQ52MRQJHLLAUA'; \/\/ Replace with your issuer account\r\n \r\n \/\/ Stellar USDC\r\n const USDC_ASSET_CODE = 'USDC';\r\n const USDC_ISSUER = 'GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN'; \/\/ Circle's USDC on Stellar\r\n\r\n \/\/ Fetch XLM price from CoinGecko\r\n useEffect(() => {\r\n const fetchXLMPrice = async () => {\r\n try {\r\n const response = await fetch('https:\/\/api.coingecko.com\/api\/v3\/simple\/price?ids=stellar&vs_currencies=usd');\r\n const data = await response.json();\r\n if (data.stellar && data.stellar.usd) {\r\n setXlmPrice(data.stellar.usd);\r\n console.log('XLM Price updated:', data.stellar.usd);\r\n }\r\n } catch (error) {\r\n console.error('Failed to fetch XLM price from CoinGecko:', error);\r\n \/\/ Keep default price if fetch fails\r\n }\r\n };\r\n\r\n \/\/ Fetch immediately\r\n fetchXLMPrice();\r\n\r\n \/\/ Refresh price every 60 seconds\r\n const priceInterval = setInterval(fetchXLMPrice, 60000);\r\n\r\n return () => clearInterval(priceInterval);\r\n }, []);\r\n\r\n \/\/ Calculate actual countdown\r\n useEffect(() => {\r\n const calculateTimeLeft = () => {\r\n const now = new Date();\r\n const difference = ICO_START_DATE - now;\r\n\r\n if (difference > 0) {\r\n const days = Math.floor(difference \/ (1000 * 60 * 60 * 24));\r\n const hours = Math.floor((difference \/ (1000 * 60 * 60)) % 24);\r\n const minutes = Math.floor((difference \/ 1000 \/ 60) % 60);\r\n const seconds = Math.floor((difference \/ 1000) % 60);\r\n\r\n setTimeLeft({ days, hours, minutes, seconds });\r\n } else {\r\n \/\/ ICO has started\r\n setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });\r\n }\r\n };\r\n\r\n \/\/ Calculate immediately\r\n calculateTimeLeft();\r\n\r\n \/\/ Update every second\r\n const timer = setInterval(calculateTimeLeft, 1000);\r\n\r\n if (window.lucide) {\r\n window.lucide.createIcons();\r\n }\r\n\r\n return () => clearInterval(timer);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (window.lucide) {\r\n window.lucide.createIcons();\r\n }\r\n });\r\n\r\n \/\/ Check if Freighter is installed - polls briefly since extensions inject asynchronously\r\n const isFreighterInstalled = (maxWait = 1500) => {\r\n if (window.freighter !== undefined) return Promise.resolve(true);\r\n return new Promise(resolve => {\r\n const start = Date.now();\r\n const poll = () => {\r\n if (window.freighter !== undefined) return resolve(true);\r\n if (Date.now() - start >= maxWait) return resolve(false);\r\n setTimeout(poll, 50);\r\n };\r\n setTimeout(poll, 50);\r\n });\r\n };\r\n\r\n \/\/ Connect Freighter Wallet\r\n const connectFreighter = async () => {\r\n const installed = await isFreighterInstalled();\r\n if (!installed) {\r\n alert('Please install Freighter wallet to continue');\r\n window.open('https:\/\/www.freighter.app\/', '_blank');\r\n return;\r\n }\r\n\r\n try {\r\n const publicKey = await window.freighter.getPublicKey();\r\n const network = await window.freighter.getNetwork();\r\n \r\n if (network !== 'PUBLIC') {\r\n alert('Please switch Freighter to Mainnet (PUBLIC network)');\r\n return;\r\n }\r\n\r\n setWalletAddress(publicKey);\r\n setWalletConnected(true);\r\n\r\n } catch (error) {\r\n console.error('Error connecting to Freighter:', error);\r\n if (error.message === 'User declined access') {\r\n alert('Please approve the connection in Freighter');\r\n } else {\r\n alert('Failed to connect wallet. Please try again.');\r\n }\r\n }\r\n };\r\n\r\n \/\/ Calculate token amount\r\n const calculateTokenAmount = () => {\r\n if (!purchaseAmount || isNaN(purchaseAmount)) return { baseTokens: 0, bonusTokens: 0, totalTokens: 0 };\r\n \r\n let usdAmount = 0;\r\n if (selectedToken === 'XLM') {\r\n usdAmount = parseFloat(purchaseAmount) * xlmPrice;\r\n\t\t\t\t\t\r\n } else {\r\n usdAmount = parseFloat(purchaseAmount); \/\/ USDC is 1:1 with USD\r\n }\r\n \r\n const tokenAmount = usdAmount \/ TOKEN_PRICE;\r\n\t\t\t\tconst bonusAmount = tokenAmount * 0.10; \/\/ 10% seed round bonus\r\n \r\n return {\r\n baseTokens: Math.floor(tokenAmount),\r\n bonusTokens: Math.floor(bonusAmount),\r\n totalTokens: Math.floor(tokenAmount + bonusAmount)\r\n };\r\n };\r\n\r\n \/\/ Purchase with XLM\r\n const purchaseWithXLM = async () => {\r\n if (!walletConnected) {\r\n alert('Please connect your wallet first');\r\n return;\r\n }\r\n\r\n if (!purchaseAmount || parseFloat(purchaseAmount) <= 0) {\r\n alert('Please enter a valid amount');\r\n return;\r\n }\r\n\r\n setIsProcessing(true);\r\n\r\n try {\r\n \/\/ Load account to get sequence number\r\n const server = new StellarSdk.Horizon.Server('https:\/\/horizon.stellar.org');\r\n const sourceAccount = await server.loadAccount(walletAddress);\r\n\r\n \/\/ Build payment transaction\r\n const transaction = new StellarSdk.TransactionBuilder(sourceAccount, {\r\n fee: StellarSdk.BASE_FEE,\r\n networkPassphrase: StellarSdk.Networks.PUBLIC\r\n })\r\n .addOperation(StellarSdk.Operation.payment({\r\n destination: ICO_PUBLIC_KEY,\r\n asset: StellarSdk.Asset.native(),\r\n amount: purchaseAmount.toString()\r\n }))\r\n .addMemo(StellarSdk.Memo.text('ATABSC ICO'))\r\n .setTimeout(180)\r\n .build();\r\n\r\n \/\/ Sign with Freighter\r\n const signedTx = await window.freighter.signTransaction(transaction.toXDR(), {\r\n network: 'PUBLIC',\r\n networkPassphrase: StellarSdk.Networks.PUBLIC\r\n });\r\n\r\n \/\/ Submit transaction\r\n const txResponse = await server.submitTransaction(\r\n StellarSdk.TransactionBuilder.fromXDR(signedTx, StellarSdk.Networks.PUBLIC)\r\n );\r\n\r\n setTxHash(txResponse.hash);\r\n alert(`Transaction successful! Hash: ${txResponse.hash}`);\r\n setPurchaseAmount('');\r\n \r\n } catch (error) {\r\n console.error('Transaction error:', error);\r\n alert(`Transaction failed: ${error.message}`);\r\n } finally {\r\n setIsProcessing(false);\r\n }\r\n };\r\n\r\n \/\/ Purchase with USDC\r\n const purchaseWithUSDC = async () => {\r\n if (!walletConnected) {\r\n alert('Please connect your wallet first');\r\n return;\r\n }\r\n\r\n if (!purchaseAmount || parseFloat(purchaseAmount) <= 0) {\r\n alert('Please enter a valid amount');\r\n return;\r\n }\r\n\r\n setIsProcessing(true);\r\n\r\n try {\r\n const server = new StellarSdk.Horizon.Server('https:\/\/horizon.stellar.org');\r\n const sourceAccount = await server.loadAccount(walletAddress);\r\n\r\n \/\/ Create USDC asset\r\n const usdcAsset = new StellarSdk.Asset(USDC_ASSET_CODE, USDC_ISSUER);\r\n\r\n \/\/ Build payment transaction\r\n const transaction = new StellarSdk.TransactionBuilder(sourceAccount, {\r\n fee: StellarSdk.BASE_FEE,\r\n networkPassphrase: StellarSdk.Networks.PUBLIC\r\n })\r\n .addOperation(StellarSdk.Operation.payment({\r\n destination: ICO_PUBLIC_KEY,\r\n asset: usdcAsset,\r\n amount: purchaseAmount.toString()\r\n }))\r\n .addMemo(StellarSdk.Memo.text('ATABSC ICO'))\r\n .setTimeout(180)\r\n .build();\r\n\r\n \/\/ Sign with Freighter\r\n const signedTx = await window.freighter.signTransaction(transaction.toXDR(), {\r\n network: 'PUBLIC',\r\n networkPassphrase: StellarSdk.Networks.PUBLIC\r\n });\r\n\r\n \/\/ Submit transaction\r\n const txResponse = await server.submitTransaction(\r\n StellarSdk.TransactionBuilder.fromXDR(signedTx, StellarSdk.Networks.PUBLIC)\r\n );\r\n\r\n setTxHash(txResponse.hash);\r\n alert(`Transaction successful! Hash: ${txResponse.hash}`);\r\n setPurchaseAmount('');\r\n \r\n } catch (error) {\r\n console.error('Transaction error:', error);\r\n if (error.message && error.message.includes('op_no_trust')) {\r\n alert('Please add a trustline for USDC in your wallet first');\r\n } else {\r\n alert(`Transaction failed: ${error.message}`);\r\n }\r\n } finally {\r\n setIsProcessing(false);\r\n }\r\n };\r\n\r\n const handlePurchase = () => {\r\n if (selectedToken === 'XLM') {\r\n purchaseWithXLM();\r\n } else {\r\n purchaseWithUSDC();\r\n }\r\n };\r\n\r\n const scrollToSection = (id) => {\r\n document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });\r\n setMobileMenuOpen(false);\r\n };\r\n\r\n const formatAddress = (address) => {\r\n return `${address.slice(0, 6)}...${address.slice(-4)}`;\r\n };\r\n\r\n const tokens = calculateTokenAmount();\r\n\r\n return (\r\n <div className=\"min-h-screen bg-gradient-to-b from-slate-900 via-purple-900 to-slate-900\">\r\n {\/* Navigation *\/}\r\n <nav className=\"fixed top-0 w-full bg-slate-900\/95 backdrop-blur-sm z-50 border-b border-purple-500\/20\">\r\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div className=\"flex justify-between items-center h-16\">\r\n <div className=\"flex items-center space-x-2\">\r\n <Coins className=\"w-8 h-8 text-purple-400\" \/>\r\n <span className=\"text-2xl font-bold text-white\">ATABSC<\/span>\r\n <span className=\"text-xs bg-blue-500 text-white px-2 py-1 rounded\">Stellar<\/span>\r\n <\/div>\r\n \r\n <div className=\"hidden md:flex space-x-8\">\r\n <button onClick={() => scrollToSection('home')} className=\"text-gray-300 hover:text-purple-400 transition\">Home<\/button>\r\n <button onClick={() => scrollToSection('tokenomics')} className=\"text-gray-300 hover:text-purple-400 transition\">Tokenomics<\/button>\r\n <button onClick={() => scrollToSection('why-stellar')} className=\"text-gray-300 hover:text-purple-400 transition\">Why Stellar<\/button>\r\n <button onClick={() => scrollToSection('roadmap')} className=\"text-gray-300 hover:text-purple-400 transition\">Roadmap<\/button>\r\n <\/div>\r\n\r\n <div className=\"hidden md:flex items-center space-x-4\">\r\n {walletConnected ? (\r\n <div className=\"flex items-center space-x-2 bg-slate-800 px-4 py-2 rounded-lg border border-purple-500\/20\">\r\n <div className=\"w-2 h-2 bg-green-400 rounded-full\"><\/div>\r\n <span className=\"text-white text-sm\">{formatAddress(walletAddress)}<\/span>\r\n <span className=\"text-blue-400 text-xs\">Stellar<\/span>\r\n <\/div>\r\n ) : (\r\n <button \r\n onClick={connectFreighter}\r\n className=\"bg-slate-800 text-white px-4 py-2 rounded-lg hover:bg-slate-700 transition border border-purple-500\/20 flex items-center space-x-2\"\r\n >\r\n <Wallet className=\"w-4 h-4\" \/>\r\n <span>Connect Freighter<\/span>\r\n <\/button>\r\n )}\r\n \r\n <button \r\n onClick={() => setShowBuyModal(true)}\r\n className=\"bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-2 rounded-lg hover:from-purple-700 hover:to-pink-700 transition\"\r\n >\r\n Buy ATABSC\r\n <\/button>\r\n <\/div>\r\n\r\n <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className=\"md:hidden text-white\">\r\n {mobileMenuOpen ? <X \/> : <Menu \/>}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n {mobileMenuOpen && (\r\n <div className=\"md:hidden bg-slate-800 border-t border-purple-500\/20\">\r\n <div className=\"px-4 py-4 space-y-3\">\r\n <button onClick={() => scrollToSection('home')} className=\"block text-gray-300 hover:text-purple-400\">Home<\/button>\r\n <button onClick={() => scrollToSection('tokenomics')} className=\"block text-gray-300 hover:text-purple-400\">Tokenomics<\/button>\r\n <button onClick={() => scrollToSection('why-stellar')} className=\"block text-gray-300 hover:text-purple-400\">Why Stellar<\/button>\r\n <button onClick={() => scrollToSection('roadmap')} className=\"block text-gray-300 hover:text-purple-400\">Roadmap<\/button>\r\n {!walletConnected && (\r\n <button \r\n onClick={connectFreighter}\r\n className=\"w-full bg-slate-700 text-white px-6 py-2 rounded-lg flex items-center justify-center space-x-2\"\r\n >\r\n <Wallet className=\"w-4 h-4\" \/>\r\n <span>Connect Freighter<\/span>\r\n <\/button>\r\n )}\r\n <button \r\n onClick={() => setShowBuyModal(true)}\r\n className=\"w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-2 rounded-lg\"\r\n >\r\n Buy ATABSC\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/nav>\r\n\r\n {\/* Buy Modal *\/}\r\n {showBuyModal && (\r\n <div className=\"fixed inset-0 bg-black\/80 backdrop-blur-sm z-50 flex items-center justify-center p-4\">\r\n <div className=\"bg-slate-800 rounded-lg max-w-md w-full border border-purple-500\/20 max-h-[90vh] overflow-y-auto\">\r\n <div className=\"p-6\">\r\n <div className=\"flex justify-between items-center mb-6\">\r\n <div>\r\n <h3 className=\"text-2xl font-bold text-white\">Purchase ATABSC<\/h3>\r\n <p className=\"text-sm text-blue-400\">On Stellar Network<\/p>\r\n <\/div>\r\n <button \r\n onClick={() => setShowBuyModal(false)}\r\n className=\"text-gray-400 hover:text-white\"\r\n >\r\n <X className=\"w-6 h-6\" \/>\r\n <\/button>\r\n <\/div>\r\n\r\n {!walletConnected ? (\r\n <div className=\"mb-6 p-4 bg-yellow-500\/10 border border-yellow-500\/20 rounded-lg\">\r\n <div className=\"flex items-start space-x-3\">\r\n <AlertCircle className=\"w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5\" \/>\r\n <div>\r\n <p className=\"text-yellow-500 font-semibold mb-2\">Wallet Not Connected<\/p>\r\n <button \r\n onClick={connectFreighter}\r\n className=\"bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold transition flex items-center space-x-2\"\r\n >\r\n <Wallet className=\"w-4 h-4\" \/>\r\n <span>Connect Freighter<\/span>\r\n <\/button>\r\n <p className=\"text-gray-400 text-xs mt-2\">\r\n Don't have Freighter? <a href=\"https:\/\/www.freighter.app\/\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-blue-400 hover:underline\">Install here<\/a>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ) : (\r\n <div className=\"mb-6 p-4 bg-green-500\/10 border border-green-500\/20 rounded-lg\">\r\n <div className=\"flex items-center space-x-3\">\r\n <div className=\"w-3 h-3 bg-green-400 rounded-full\"><\/div>\r\n <div>\r\n <p className=\"text-green-400 font-semibold\">Freighter Connected<\/p>\r\n <p className=\"text-gray-400 text-sm\">{formatAddress(walletAddress)}<\/p>\r\n <p className=\"text-gray-500 text-xs\">Stellar Mainnet<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n {\/* Current Sale Info *\/}\r\n <div className=\"mb-6 p-4 bg-purple-500\/10 border border-purple-500\/20 rounded-lg\">\r\n <div className=\"mb-3 p-3 bg-blue-500\/10 border border-blue-500\/20 rounded\">\r\n <p className=\"text-blue-400 text-xs font-semibold mb-1\">\ud83d\udd04 DYNAMIC PRICING<\/p>\r\n <p className=\"text-white font-bold text-lg\">\r\n 1 ATABSC = {XLM_MULTIPLIER} XLM\r\n <span className=\"text-xs text-gray-400 ml-2\">(Fixed Ratio)<\/span>\r\n <\/p>\r\n <p className=\"text-blue-300 text-sm\">\r\n = ${xlmPrice > 0 ? TOKEN_PRICE.toFixed(4) : '...'} USD\r\n <span className=\"text-gray-500 ml-1\">\ud83d\udd34 Live<\/span>\r\n <\/p>\r\n <\/div>\r\n <div className=\"grid grid-cols-2 gap-4\">\r\n <div>\r\n <p className=\"text-gray-400 text-sm\">XLM\/USD Rate<\/p>\r\n <p className=\"text-green-400 font-bold text-sm\">\r\n ${xlmPrice > 0 ? xlmPrice.toFixed(4) : '...'}\r\n <\/p>\r\n <\/div>\r\n <div>\r\n <p className=\"text-gray-400 text-sm\">Seed Bonus<\/p>\r\n <p className=\"text-purple-400 font-bold\">+10%<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Payment Method Selection *\/}\r\n <div className=\"mb-4\">\r\n <label className=\"text-gray-400 text-sm mb-2 block\">Payment Method<\/label>\r\n <div className=\"grid grid-cols-2 gap-2\">\r\n {['XLM', 'USDC'].map((token) => (\r\n <button\r\n key={token}\r\n onClick={() => setSelectedToken(token)}\r\n className={`py-3 px-4 rounded-lg font-semibold transition ${\r\n selectedToken === token\r\n ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white'\r\n : 'bg-slate-700 text-gray-300 hover:bg-slate-600'\r\n }`}\r\n >\r\n {token} {token === 'XLM' && '\u2b50'}\r\n <\/button>\r\n ))}\r\n <\/div>\r\n <p className=\"text-gray-500 text-xs mt-1\">\r\n {selectedToken === 'USDC' && 'Make sure you have USDC trustline added in Freighter'}\r\n <\/p>\r\n <\/div>\r\n\r\n {\/* Amount Input *\/}\r\n <div className=\"mb-4\">\r\n <label className=\"text-gray-400 text-sm mb-2 block\">\r\n Amount ({selectedToken})\r\n <\/label>\r\n <input\r\n type=\"number\"\r\n value={purchaseAmount}\r\n onChange={(e) => setPurchaseAmount(e.target.value)}\r\n placeholder={selectedToken === 'XLM' ? '833.33' : '100'}\r\n className=\"w-full bg-slate-700 text-white px-4 py-3 rounded-lg border border-purple-500\/20 focus:border-purple-500 focus:outline-none\"\r\n step={selectedToken === 'XLM' ? '1' : '0.01'}\r\n \/>\r\n <p className=\"text-gray-500 text-xs mt-1\">\r\n {selectedToken === 'XLM' \r\n ? `\u2248 $${purchaseAmount ? (parseFloat(purchaseAmount) * xlmPrice).toFixed(2) : '0.00'} USD`\r\n : `Minimum $100 USD \u2022 Network fee: ~$0.0001`\r\n }\r\n <\/p>\r\n <\/div>\r\n\r\n {\/* Token Calculation *\/}\r\n {purchaseAmount && tokens.totalTokens > 0 && (\r\n <div className=\"mb-6 p-4 bg-slate-700 rounded-lg\">\r\n <div className=\"space-y-2\">\r\n <div className=\"flex justify-between\">\r\n <span className=\"text-gray-400 text-sm\">Base Tokens<\/span>\r\n <span className=\"text-white font-semibold\">{tokens.baseTokens.toLocaleString()} ATABSC<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between\">\r\n <span className=\"text-gray-400 text-sm\">Seed Bonus (10%)<\/span>\r\n <span className=\"text-purple-400 font-semibold\">+{tokens.bonusTokens.toLocaleString()} ATABSC<\/span>\r\n <\/div>\r\n <div className=\"border-t border-slate-600 pt-2 flex justify-between\">\r\n <span className=\"text-white font-bold\">Total Tokens<\/span>\r\n <span className=\"text-purple-400 font-bold\">{tokens.totalTokens.toLocaleString()} ATABSC<\/span>\r\n <\/div>\r\n <p className=\"text-gray-500 text-xs\">\r\n 25% unlocked immediately, 75% vested over 6 months\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n {\/* Purchase Button *\/}\r\n <button\r\n onClick={handlePurchase}\r\n disabled={!walletConnected || isProcessing || !purchaseAmount || parseFloat(purchaseAmount) <= 0}\r\n className={`w-full py-4 rounded-lg font-bold text-lg transition ${\r\n !walletConnected || isProcessing || !purchaseAmount || parseFloat(purchaseAmount) <= 0\r\n ? 'bg-slate-700 text-gray-500 cursor-not-allowed'\r\n : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white'\r\n }`}\r\n >\r\n {isProcessing ? 'Processing...' : `Purchase with ${selectedToken}`}\r\n <\/button>\r\n\r\n {\/* Transaction Hash *\/}\r\n {txHash && (\r\n <div className=\"mt-4 p-4 bg-green-500\/10 border border-green-500\/20 rounded-lg\">\r\n <p className=\"text-green-400 font-semibold mb-2\">Transaction Submitted!<\/p>\r\n <a \r\n href={`https:\/\/stellar.expert\/explorer\/public\/tx\/${txHash}`}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n className=\"text-purple-400 hover:text-purple-300 text-sm flex items-center space-x-1\"\r\n >\r\n <span className=\"truncate\">{txHash.slice(0, 20)}...<\/span>\r\n <ExternalLink className=\"w-4 h-4 flex-shrink-0\" \/>\r\n <\/a>\r\n <\/div>\r\n )}\r\n\r\n {\/* Important Notice *\/}\r\n <div className=\"mt-6 p-4 bg-slate-900 rounded-lg border border-purple-500\/20\">\r\n <p className=\"text-gray-400 text-xs\">\r\n <strong className=\"text-white\">LOW FEES:<\/strong> Stellar network fees are ~$0.0001 per transaction. Your tokens will be sent to your wallet within 24 hours after payment confirmation.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n {\/* Hero Section *\/}\r\n <section id=\"home\" className=\"pt-32 pb-20 px-4\">\r\n <div className=\"max-w-7xl mx-auto text-center\">\r\n <div className=\"inline-block mb-4 px-4 py-2 bg-blue-500\/10 border border-blue-500\/20 rounded-full\">\r\n <span className=\"text-blue-400 text-sm font-semibold\">Brought to you by StellarDNS<\/span>\r\n <\/div>\r\n \r\n <h1 className=\"text-5xl md:text-7xl font-bold text-white mb-6\">\r\n Another Totally Awesome\r\n <span className=\"block text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400\">\r\n But SPECULATIVE COIN\r\n <\/span>\r\n <\/h1>\r\n <p className=\"text-xl text-gray-300 mb-8 max-w-3xl mx-auto\">\r\n Own a new \"store of value\" that is \"tradeable\" for almost free. $0.0001 transaction fees. Built on Stellar for true accessibility. No high gas fees, no barriers.\r\n <\/p>\r\n\r\n {\/* Countdown Timer *\/}\r\n <div className=\"mb-12\">\r\n <p className=\"text-purple-400 text-sm uppercase tracking-wider mb-4\">Seed Round Starts In<\/p>\r\n <div className=\"flex justify-center space-x-4 md:space-x-8\">\r\n {[\r\n { label: 'Days', value: timeLeft.days },\r\n { label: 'Hours', value: timeLeft.hours },\r\n { label: 'Minutes', value: timeLeft.minutes },\r\n { label: 'Seconds', value: timeLeft.seconds }\r\n ].map((item) => (\r\n <div key={item.label} className=\"bg-slate-800\/50 backdrop-blur-sm border border-purple-500\/20 rounded-lg p-4 min-w-[80px]\">\r\n <div className=\"text-3xl md:text-4xl font-bold text-white\">{String(item.value).padStart(2, '0')}<\/div>\r\n <div className=\"text-xs text-gray-400 uppercase\">{item.label}<\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Dynamic Pricing Info *\/}\r\n <div className=\"max-w-2xl mx-auto mb-6 p-4 bg-blue-500\/10 border border-blue-500\/20 rounded-lg\">\r\n <p className=\"text-blue-400 font-semibold text-sm mb-1\">\ud83d\udd04 Dynamic Pricing Pegged to XLM<\/p>\r\n <p className=\"text-gray-300 text-sm\">\r\n ATABSC price moves with Stellar (XLM). 1 ATABSC = 23 XLM always.\r\n When XLM rises, ATABSC rises. When XLM falls, ATABSC falls.\r\n <\/p>\r\n <\/div>\r\n\r\n {\/* Sale Progress *\/}\r\n <div className=\"max-w-2xl mx-auto bg-slate-800\/50 backdrop-blur-sm border border-purple-500\/20 rounded-lg p-6 mb-8\">\r\n <div className=\"flex justify-between text-sm text-gray-300 mb-2\">\r\n <span>Raised: $125,000<\/span>\r\n <span>Goal: $700,000<\/span>\r\n <\/div>\r\n <div className=\"w-full bg-slate-700 rounded-full h-3 mb-4\">\r\n <div className=\"bg-gradient-to-r from-purple-600 to-pink-600 h-3 rounded-full\" style={{ width: '18%' }}><\/div>\r\n <\/div>\r\n <div className=\"text-2xl font-bold text-white mb-1\">\r\n 1 ATABSC = ${xlmPrice > 0 ? TOKEN_PRICE.toFixed(4) : '...'} USD\r\n <span className=\"text-xs text-gray-400 ml-2\">\ud83d\udd34 Live<\/span>\r\n <\/div>\r\n <div className=\"text-lg text-blue-400 mb-2\">\r\n = {XLM_MULTIPLIER} XLM\r\n <span className=\"text-xs text-gray-400 ml-2\">(Pegged 23:1)<\/span>\r\n <\/div>\r\n <div className=\"text-sm text-purple-400 mb-2\">Seed Round - 10% Bonus Tokens<\/div>\r\n <div className=\"text-xs text-green-400\">Network Fee: ~$0.0001 (vs $5-50 on Ethereum)<\/div>\r\n <\/div>\r\n\r\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center items-center\">\r\n <button\r\n onClick={() => setShowBuyModal(true)}\r\n className=\"bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition transform hover:scale-105 inline-flex items-center\"\r\n >\r\n Buy ATABSC Now\r\n <ArrowRight \/>\r\n <\/button>\r\n <a\r\n href=\"purchase-atabsc.html\"\r\n className=\"bg-slate-800 border border-purple-500\/40 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-slate-700 transition inline-flex items-center\"\r\n >\r\n More Payment Options \u2192\r\n <\/a>\r\n <\/div>\r\n <p className=\"text-gray-400 text-sm mt-4\">\r\n Connect Freighter, LOBSTR, xBull, Albedo, or enter your wallet address\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Why Stellar Section *\/}\r\n <section id=\"why-stellar\" className=\"py-20 px-4 bg-slate-800\/30\">\r\n <div className=\"max-w-7xl mx-auto\">\r\n <h2 className=\"text-4xl font-bold text-white text-center mb-4\">Why We Chose Stellar<\/h2>\r\n <p className=\"text-gray-400 text-center mb-16 max-w-2xl mx-auto\">\r\n We believe blockchain should be accessible to everyone, not just those who can afford high fees.\r\n <\/p>\r\n \r\n <div className=\"grid md:grid-cols-3 gap-8\">\r\n {[\r\n {\r\n icon: <DollarSign className=\"w-12 h-12 text-green-400\" \/>,\r\n title: \"Pennies, Not Dollars\",\r\n description: \"Transaction fees ~$0.0001 vs $5-50 on Ethereum. Deploy contracts for under $1. True accessibility for everyone.\",\r\n comparison: \"ETH: $50+ \u2022 Stellar: $0.0001\"\r\n },\r\n {\r\n icon: <Zap className=\"w-12 h-12 text-yellow-400\" \/>,\r\n title: \"Lightning Fast\",\r\n description: \"3-5 second transaction finality. No waiting, no uncertainty. Instant domain ownership confirmation.\",\r\n comparison: \"ETH: 12+ sec \u2022 Stellar: 3-5 sec\"\r\n },\r\n {\r\n icon: <Users className=\"w-12 h-12 text-blue-400\" \/>,\r\n title: \"Mobile-First\",\r\n description: \"Works on any device. Freighter, LOBSTR, or any Stellar wallet. No expensive desktop setup required.\",\r\n comparison: \"Built for global access\"\r\n }\r\n ].map((feature, idx) => (\r\n <div key={idx} className=\"bg-slate-800\/50 backdrop-blur-sm border border-purple-500\/20 rounded-lg p-6 hover:border-purple-500\/40 transition\">\r\n <div className=\"mb-4\">{feature.icon}<\/div>\r\n <h3 className=\"text-xl font-semibold text-white mb-2\">{feature.title}<\/h3>\r\n <p className=\"text-gray-400 mb-3\">{feature.description}<\/p>\r\n <div className=\"text-xs text-purple-400 bg-purple-500\/10 px-3 py-1 rounded inline-block\">\r\n {feature.comparison}\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n\r\n <div className=\"mt-12 p-6 bg-gradient-to-r from-blue-500\/10 to-purple-500\/10 border border-blue-500\/20 rounded-lg text-center\">\r\n <h3 className=\"text-2xl font-bold text-white mb-3\">The Math is Simple<\/h3>\r\n <p className=\"text-gray-300 mb-4\">\r\n Ethereum ICO deployment: $200-400 in gas fees. Stellar deployment: Less than $1. \r\n <\/p>\r\n <p className=\"text-xl font-semibold text-blue-400\">\r\n We'd rather spend that money building features for you.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Footer *\/}\r\n <footer className=\"bg-slate-900 border-t border-purple-500\/20 py-12 px-4\">\r\n <div className=\"max-w-7xl mx-auto text-center\">\r\n <div className=\"flex justify-center items-center space-x-2 mb-4\">\r\n <Coins className=\"w-6 h-6 text-purple-400\" \/>\r\n <span className=\"text-xl font-bold text-white\">ATABSC<\/span>\r\n <span className=\"text-xs bg-blue-500 text-white px-2 py-1 rounded\">Stellar Network<\/span>\r\n <\/div>\r\n <p className=\"text-gray-500 text-sm mb-4\">\r\n IMPORTANT: ATABSC is a utility token, not a security. Review all risk disclosures before participating.\r\n <\/p>\r\n <p className=\"text-gray-600 text-sm\">\r\n \u00a9 2025 StellarDNS Corp. All rights reserved.\r\n <\/p>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Render the app\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<ATABSCLanding \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":10,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":342,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions\/342"}],"wp:attachment":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":22,"date":"2025-11-08T21:14:46","date_gmt":"2025-11-08T21:14:46","guid":{"rendered":"https:\/\/stellardns.io\/?page_id=22"},"modified":"2026-03-28T03:36:18","modified_gmt":"2026-03-28T08:36:18","slug":"__trashed-2","status":"publish","type":"page","link":"https:\/\/stellardns.io\/?page_id=22","title":{"rendered":"ATABSC TOKEN LAUNCH"},"content":{"rendered":"\r\n\r\n\r\n \r\n \r\n ATABSC Token Sale - Moves with XLM on the Stellar Blockchain<\/title>\r\n <meta name=\"description\" content=\"ATABSC - Another Totally Awesome But Speculative Coin. Built on Stellar. Enterprise-ready blockchain infrastructure. Low fees, fast transactions.\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"..\/dist\/tailwind.min.css\">\r\n \r\n \r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/stellar-sdk\/11.2.2\/stellar-sdk.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n \r\n .lucide {\r\n display: inline-block;\r\n vertical-align: middle;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect } = React;\r\n const StellarSdk = window.StellarSdk;\r\n \r\n \/\/ Lucide Icon Components\r\n const ArrowRight = () => <i data-lucide=\"arrow-right\" className=\"w-5 h-5\"><\/i>;\r\n const Coins = ({ className }) => <i data-lucide=\"coins\" className={className}><\/i>;\r\n const Shield = ({ className }) => <i data-lucide=\"shield\" className={className}><\/i>;\r\n const Users = ({ className }) => <i data-lucide=\"users\" className={className}><\/i>;\r\n const Zap = ({ className }) => <i data-lucide=\"zap\" className={className}><\/i>;\r\n const Globe = ({ className }) => <i data-lucide=\"globe\" className={className}><\/i>;\r\n const Menu = () => <i data-lucide=\"menu\" className=\"w-6 h-6\"><\/i>;\r\n const X = ({ className }) => <i data-lucide=\"x\" className={className || \"w-6 h-6\"}><\/i>;\r\n const Check = ({ className }) => <i data-lucide=\"check\" className={className}><\/i>;\r\n const Wallet = ({ className }) => <i data-lucide=\"wallet\" className={className}><\/i>;\r\n const ExternalLink = ({ className }) => <i data-lucide=\"external-link\" className={className}><\/i>;\r\n const AlertCircle = ({ className }) => <i data-lucide=\"alert-circle\" className={className}><\/i>;\r\n const DollarSign = ({ className }) => <i data-lucide=\"dollar-sign\" className={className}><\/i>;\r\n\r\n function ATABSCLanding() {\r\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\r\n const [activeTab, setActiveTab] = useState('individual');\r\n const [showBuyModal, setShowBuyModal] = useState(false);\r\n const [walletConnected, setWalletConnected] = useState(false);\r\n const [walletAddress, setWalletAddress] = useState('');\r\n const [purchaseAmount, setPurchaseAmount] = useState('');\r\n const [selectedToken, setSelectedToken] = useState('XLM');\r\n const [isProcessing, setIsProcessing] = useState(false);\r\n const [txHash, setTxHash] = useState('');\r\n const [xlmPrice, setXlmPrice] = useState(0.14); \/\/ Will be updated from CoinGecko\r\n\r\n \/\/ Set your actual ICO start date here (UTC-5)\r\n const ICO_START_DATE = new Date('2026-01-17T00:00:00Z'); \/\/ Change this to your actual date\r\n\r\n \/\/ Countdown timer\r\n const [timeLeft, setTimeLeft] = useState({\r\n days: 0,\r\n hours: 0,\r\n minutes: 0,\r\n seconds: 0\r\n });\r\n\r\n \/\/ Token configuration\r\n const XLM_MULTIPLIER = 23; \/\/ ATABSC = XLM * 23\r\n const TOKEN_PRICE = xlmPrice * XLM_MULTIPLIER; \/\/ Dynamic pricing pegged to XLM\r\n const ICO_PUBLIC_KEY = 'GXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; \/\/ Replace with your ICO wallet\r\n const ATABSC_ASSET_CODE = 'ATABSC';\r\n const ATABSC_ISSUER = 'GDCIYZ7HU3ALQGWO26EXVM2DMMUQEFZMLGGWHFG77LMQ52MRQJHLLAUA'; \/\/ Replace with your issuer account\r\n \r\n \/\/ Stellar USDC\r\n const USDC_ASSET_CODE = 'USDC';\r\n const USDC_ISSUER = 'GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN'; \/\/ Circle's USDC on Stellar\r\n\r\n \/\/ Fetch XLM price from CoinGecko\r\n useEffect(() => {\r\n const fetchXLMPrice = async () => {\r\n try {\r\n const response = await fetch('https:\/\/api.coingecko.com\/api\/v3\/simple\/price?ids=stellar&vs_currencies=usd');\r\n const data = await response.json();\r\n if (data.stellar && data.stellar.usd) {\r\n setXlmPrice(data.stellar.usd);\r\n console.log('XLM Price updated:', data.stellar.usd);\r\n }\r\n } catch (error) {\r\n console.error('Failed to fetch XLM price from CoinGecko:', error);\r\n \/\/ Keep default price if fetch fails\r\n }\r\n };\r\n\r\n \/\/ Fetch immediately\r\n fetchXLMPrice();\r\n\r\n \/\/ Refresh price every 60 seconds\r\n const priceInterval = setInterval(fetchXLMPrice, 60000);\r\n\r\n return () => clearInterval(priceInterval);\r\n }, []);\r\n\r\n \/\/ Calculate actual countdown\r\n useEffect(() => {\r\n const calculateTimeLeft = () => {\r\n const now = new Date();\r\n const difference = ICO_START_DATE - now;\r\n\r\n if (difference > 0) {\r\n const days = Math.floor(difference \/ (1000 * 60 * 60 * 24));\r\n const hours = Math.floor((difference \/ (1000 * 60 * 60)) % 24);\r\n const minutes = Math.floor((difference \/ 1000 \/ 60) % 60);\r\n const seconds = Math.floor((difference \/ 1000) % 60);\r\n\r\n setTimeLeft({ days, hours, minutes, seconds });\r\n } else {\r\n \/\/ ICO has started\r\n setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });\r\n }\r\n };\r\n\r\n \/\/ Calculate immediately\r\n calculateTimeLeft();\r\n\r\n \/\/ Update every second\r\n const timer = setInterval(calculateTimeLeft, 1000);\r\n\r\n if (window.lucide) {\r\n window.lucide.createIcons();\r\n }\r\n\r\n return () => clearInterval(timer);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (window.lucide) {\r\n window.lucide.createIcons();\r\n }\r\n });\r\n\r\n \/\/ Check if Freighter is installed - polls briefly since extensions inject asynchronously\r\n const isFreighterInstalled = (maxWait = 1500) => {\r\n if (window.freighter !== undefined) return Promise.resolve(true);\r\n return new Promise(resolve => {\r\n const start = Date.now();\r\n const poll = () => {\r\n if (window.freighter !== undefined) return resolve(true);\r\n if (Date.now() - start >= maxWait) return resolve(false);\r\n setTimeout(poll, 50);\r\n };\r\n setTimeout(poll, 50);\r\n });\r\n };\r\n\r\n \/\/ Connect Freighter Wallet\r\n const connectFreighter = async () => {\r\n const installed = await isFreighterInstalled();\r\n if (!installed) {\r\n alert('Please install Freighter wallet to continue');\r\n window.open('https:\/\/www.freighter.app\/', '_blank');\r\n return;\r\n }\r\n\r\n try {\r\n const publicKey = await window.freighter.getPublicKey();\r\n const network = await window.freighter.getNetwork();\r\n \r\n if (network !== 'PUBLIC') {\r\n alert('Please switch Freighter to Mainnet (PUBLIC network)');\r\n return;\r\n }\r\n\r\n setWalletAddress(publicKey);\r\n setWalletConnected(true);\r\n\r\n } catch (error) {\r\n console.error('Error connecting to Freighter:', error);\r\n if (error.message === 'User declined access') {\r\n alert('Please approve the connection in Freighter');\r\n } else {\r\n alert('Failed to connect wallet. Please try again.');\r\n }\r\n }\r\n };\r\n\r\n \/\/ Calculate token amount\r\n const calculateTokenAmount = () => {\r\n if (!purchaseAmount || isNaN(purchaseAmount)) return { baseTokens: 0, bonusTokens: 0, totalTokens: 0 };\r\n \r\n let usdAmount = 0;\r\n if (selectedToken === 'XLM') {\r\n usdAmount = parseFloat(purchaseAmount) * xlmPrice;\r\n\t\t\t\t\t\r\n } else {\r\n usdAmount = parseFloat(purchaseAmount); \/\/ USDC is 1:1 with USD\r\n }\r\n \r\n const tokenAmount = usdAmount \/ TOKEN_PRICE;\r\n\t\t\t\tconst bonusAmount = tokenAmount * 0.10; \/\/ 10% seed round bonus\r\n \r\n return {\r\n baseTokens: Math.floor(tokenAmount),\r\n bonusTokens: Math.floor(bonusAmount),\r\n totalTokens: Math.floor(tokenAmount + bonusAmount)\r\n };\r\n };\r\n\r\n \/\/ Purchase with XLM\r\n const purchaseWithXLM = async () => {\r\n if (!walletConnected) {\r\n alert('Please connect your wallet first');\r\n return;\r\n }\r\n\r\n if (!purchaseAmount || parseFloat(purchaseAmount) <= 0) {\r\n alert('Please enter a valid amount');\r\n return;\r\n }\r\n\r\n setIsProcessing(true);\r\n\r\n try {\r\n \/\/ Load account to get sequence number\r\n const server = new StellarSdk.Horizon.Server('https:\/\/horizon.stellar.org');\r\n const sourceAccount = await server.loadAccount(walletAddress);\r\n\r\n \/\/ Build payment transaction\r\n const transaction = new StellarSdk.TransactionBuilder(sourceAccount, {\r\n fee: StellarSdk.BASE_FEE,\r\n networkPassphrase: StellarSdk.Networks.PUBLIC\r\n })\r\n .addOperation(StellarSdk.Operation.payment({\r\n destination: ICO_PUBLIC_KEY,\r\n asset: StellarSdk.Asset.native(),\r\n amount: purchaseAmount.toString()\r\n }))\r\n .addMemo(StellarSdk.Memo.text('ATABSC ICO'))\r\n .setTimeout(180)\r\n .build();\r\n\r\n \/\/ Sign with Freighter\r\n const signedTx = await window.freighter.signTransaction(transaction.toXDR(), {\r\n network: 'PUBLIC',\r\n networkPassphrase: StellarSdk.Networks.PUBLIC\r\n });\r\n\r\n \/\/ Submit transaction\r\n const txResponse = await server.submitTransaction(\r\n StellarSdk.TransactionBuilder.fromXDR(signedTx, StellarSdk.Networks.PUBLIC)\r\n );\r\n\r\n setTxHash(txResponse.hash);\r\n alert(`Transaction successful! Hash: ${txResponse.hash}`);\r\n setPurchaseAmount('');\r\n \r\n } catch (error) {\r\n console.error('Transaction error:', error);\r\n alert(`Transaction failed: ${error.message}`);\r\n } finally {\r\n setIsProcessing(false);\r\n }\r\n };\r\n\r\n \/\/ Purchase with USDC\r\n const purchaseWithUSDC = async () => {\r\n if (!walletConnected) {\r\n alert('Please connect your wallet first');\r\n return;\r\n }\r\n\r\n if (!purchaseAmount || parseFloat(purchaseAmount) <= 0) {\r\n alert('Please enter a valid amount');\r\n return;\r\n }\r\n\r\n setIsProcessing(true);\r\n\r\n try {\r\n const server = new StellarSdk.Horizon.Server('https:\/\/horizon.stellar.org');\r\n const sourceAccount = await server.loadAccount(walletAddress);\r\n\r\n \/\/ Create USDC asset\r\n const usdcAsset = new StellarSdk.Asset(USDC_ASSET_CODE, USDC_ISSUER);\r\n\r\n \/\/ Build payment transaction\r\n const transaction = new StellarSdk.TransactionBuilder(sourceAccount, {\r\n fee: StellarSdk.BASE_FEE,\r\n networkPassphrase: StellarSdk.Networks.PUBLIC\r\n })\r\n .addOperation(StellarSdk.Operation.payment({\r\n destination: ICO_PUBLIC_KEY,\r\n asset: usdcAsset,\r\n amount: purchaseAmount.toString()\r\n }))\r\n .addMemo(StellarSdk.Memo.text('ATABSC ICO'))\r\n .setTimeout(180)\r\n .build();\r\n\r\n \/\/ Sign with Freighter\r\n const signedTx = await window.freighter.signTransaction(transaction.toXDR(), {\r\n network: 'PUBLIC',\r\n networkPassphrase: StellarSdk.Networks.PUBLIC\r\n });\r\n\r\n \/\/ Submit transaction\r\n const txResponse = await server.submitTransaction(\r\n StellarSdk.TransactionBuilder.fromXDR(signedTx, StellarSdk.Networks.PUBLIC)\r\n );\r\n\r\n setTxHash(txResponse.hash);\r\n alert(`Transaction successful! Hash: ${txResponse.hash}`);\r\n setPurchaseAmount('');\r\n \r\n } catch (error) {\r\n console.error('Transaction error:', error);\r\n if (error.message && error.message.includes('op_no_trust')) {\r\n alert('Please add a trustline for USDC in your wallet first');\r\n } else {\r\n alert(`Transaction failed: ${error.message}`);\r\n }\r\n } finally {\r\n setIsProcessing(false);\r\n }\r\n };\r\n\r\n const handlePurchase = () => {\r\n if (selectedToken === 'XLM') {\r\n purchaseWithXLM();\r\n } else {\r\n purchaseWithUSDC();\r\n }\r\n };\r\n\r\n const scrollToSection = (id) => {\r\n document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });\r\n setMobileMenuOpen(false);\r\n };\r\n\r\n const formatAddress = (address) => {\r\n return `${address.slice(0, 6)}...${address.slice(-4)}`;\r\n };\r\n\r\n const tokens = calculateTokenAmount();\r\n\r\n return (\r\n <div className=\"min-h-screen bg-gradient-to-b from-slate-900 via-purple-900 to-slate-900\">\r\n {\/* Navigation *\/}\r\n <nav className=\"fixed top-0 w-full bg-slate-900\/95 backdrop-blur-sm z-50 border-b border-purple-500\/20\">\r\n <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div className=\"flex justify-between items-center h-16\">\r\n <div className=\"flex items-center space-x-2\">\r\n <Coins className=\"w-8 h-8 text-purple-400\" \/>\r\n <span className=\"text-2xl font-bold text-white\">ATABSC<\/span>\r\n <span className=\"text-xs bg-blue-500 text-white px-2 py-1 rounded\">Stellar<\/span>\r\n <\/div>\r\n \r\n <div className=\"hidden md:flex space-x-8\">\r\n <button onClick={() => scrollToSection('home')} className=\"text-gray-300 hover:text-purple-400 transition\">Home<\/button>\r\n <button onClick={() => scrollToSection('tokenomics')} className=\"text-gray-300 hover:text-purple-400 transition\">Tokenomics<\/button>\r\n <button onClick={() => scrollToSection('why-stellar')} className=\"text-gray-300 hover:text-purple-400 transition\">Why Stellar<\/button>\r\n <button onClick={() => scrollToSection('roadmap')} className=\"text-gray-300 hover:text-purple-400 transition\">Roadmap<\/button>\r\n <\/div>\r\n\r\n <div className=\"hidden md:flex items-center space-x-4\">\r\n {walletConnected ? (\r\n <div className=\"flex items-center space-x-2 bg-slate-800 px-4 py-2 rounded-lg border border-purple-500\/20\">\r\n <div className=\"w-2 h-2 bg-green-400 rounded-full\"><\/div>\r\n <span className=\"text-white text-sm\">{formatAddress(walletAddress)}<\/span>\r\n <span className=\"text-blue-400 text-xs\">Stellar<\/span>\r\n <\/div>\r\n ) : (\r\n <button \r\n onClick={connectFreighter}\r\n className=\"bg-slate-800 text-white px-4 py-2 rounded-lg hover:bg-slate-700 transition border border-purple-500\/20 flex items-center space-x-2\"\r\n >\r\n <Wallet className=\"w-4 h-4\" \/>\r\n <span>Connect Freighter<\/span>\r\n <\/button>\r\n )}\r\n \r\n <button \r\n onClick={() => setShowBuyModal(true)}\r\n className=\"bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-2 rounded-lg hover:from-purple-700 hover:to-pink-700 transition\"\r\n >\r\n Buy ATABSC\r\n <\/button>\r\n <\/div>\r\n\r\n <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className=\"md:hidden text-white\">\r\n {mobileMenuOpen ? <X \/> : <Menu \/>}\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n {mobileMenuOpen && (\r\n <div className=\"md:hidden bg-slate-800 border-t border-purple-500\/20\">\r\n <div className=\"px-4 py-4 space-y-3\">\r\n <button onClick={() => scrollToSection('home')} className=\"block text-gray-300 hover:text-purple-400\">Home<\/button>\r\n <button onClick={() => scrollToSection('tokenomics')} className=\"block text-gray-300 hover:text-purple-400\">Tokenomics<\/button>\r\n <button onClick={() => scrollToSection('why-stellar')} className=\"block text-gray-300 hover:text-purple-400\">Why Stellar<\/button>\r\n <button onClick={() => scrollToSection('roadmap')} className=\"block text-gray-300 hover:text-purple-400\">Roadmap<\/button>\r\n {!walletConnected && (\r\n <button \r\n onClick={connectFreighter}\r\n className=\"w-full bg-slate-700 text-white px-6 py-2 rounded-lg flex items-center justify-center space-x-2\"\r\n >\r\n <Wallet className=\"w-4 h-4\" \/>\r\n <span>Connect Freighter<\/span>\r\n <\/button>\r\n )}\r\n <button \r\n onClick={() => setShowBuyModal(true)}\r\n className=\"w-full bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-2 rounded-lg\"\r\n >\r\n Buy ATABSC\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/nav>\r\n\r\n {\/* Buy Modal *\/}\r\n {showBuyModal && (\r\n <div className=\"fixed inset-0 bg-black\/80 backdrop-blur-sm z-50 flex items-center justify-center p-4\">\r\n <div className=\"bg-slate-800 rounded-lg max-w-md w-full border border-purple-500\/20 max-h-[90vh] overflow-y-auto\">\r\n <div className=\"p-6\">\r\n <div className=\"flex justify-between items-center mb-6\">\r\n <div>\r\n <h3 className=\"text-2xl font-bold text-white\">Purchase ATABSC<\/h3>\r\n <p className=\"text-sm text-blue-400\">On Stellar Network<\/p>\r\n <\/div>\r\n <button \r\n onClick={() => setShowBuyModal(false)}\r\n className=\"text-gray-400 hover:text-white\"\r\n >\r\n <X className=\"w-6 h-6\" \/>\r\n <\/button>\r\n <\/div>\r\n\r\n {!walletConnected ? (\r\n <div className=\"mb-6 p-4 bg-yellow-500\/10 border border-yellow-500\/20 rounded-lg\">\r\n <div className=\"flex items-start space-x-3\">\r\n <AlertCircle className=\"w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5\" \/>\r\n <div>\r\n <p className=\"text-yellow-500 font-semibold mb-2\">Wallet Not Connected<\/p>\r\n <button \r\n onClick={connectFreighter}\r\n className=\"bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg font-semibold transition flex items-center space-x-2\"\r\n >\r\n <Wallet className=\"w-4 h-4\" \/>\r\n <span>Connect Freighter<\/span>\r\n <\/button>\r\n <p className=\"text-gray-400 text-xs mt-2\">\r\n Don't have Freighter? <a href=\"https:\/\/www.freighter.app\/\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"text-blue-400 hover:underline\">Install here<\/a>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ) : (\r\n <div className=\"mb-6 p-4 bg-green-500\/10 border border-green-500\/20 rounded-lg\">\r\n <div className=\"flex items-center space-x-3\">\r\n <div className=\"w-3 h-3 bg-green-400 rounded-full\"><\/div>\r\n <div>\r\n <p className=\"text-green-400 font-semibold\">Freighter Connected<\/p>\r\n <p className=\"text-gray-400 text-sm\">{formatAddress(walletAddress)}<\/p>\r\n <p className=\"text-gray-500 text-xs\">Stellar Mainnet<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n {\/* Current Sale Info *\/}\r\n <div className=\"mb-6 p-4 bg-purple-500\/10 border border-purple-500\/20 rounded-lg\">\r\n <div className=\"mb-3 p-3 bg-blue-500\/10 border border-blue-500\/20 rounded\">\r\n <p className=\"text-blue-400 text-xs font-semibold mb-1\">\ud83d\udd04 DYNAMIC PRICING<\/p>\r\n <p className=\"text-white font-bold text-lg\">\r\n 1 ATABSC = {XLM_MULTIPLIER} XLM\r\n <span className=\"text-xs text-gray-400 ml-2\">(Fixed Ratio)<\/span>\r\n <\/p>\r\n <p className=\"text-blue-300 text-sm\">\r\n = ${xlmPrice > 0 ? TOKEN_PRICE.toFixed(4) : '...'} USD\r\n <span className=\"text-gray-500 ml-1\">\ud83d\udd34 Live<\/span>\r\n <\/p>\r\n <\/div>\r\n <div className=\"grid grid-cols-2 gap-4\">\r\n <div>\r\n <p className=\"text-gray-400 text-sm\">XLM\/USD Rate<\/p>\r\n <p className=\"text-green-400 font-bold text-sm\">\r\n ${xlmPrice > 0 ? xlmPrice.toFixed(4) : '...'}\r\n <\/p>\r\n <\/div>\r\n <div>\r\n <p className=\"text-gray-400 text-sm\">Seed Bonus<\/p>\r\n <p className=\"text-purple-400 font-bold\">+10%<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Payment Method Selection *\/}\r\n <div className=\"mb-4\">\r\n <label className=\"text-gray-400 text-sm mb-2 block\">Payment Method<\/label>\r\n <div className=\"grid grid-cols-2 gap-2\">\r\n {['XLM', 'USDC'].map((token) => (\r\n <button\r\n key={token}\r\n onClick={() => setSelectedToken(token)}\r\n className={`py-3 px-4 rounded-lg font-semibold transition ${\r\n selectedToken === token\r\n ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white'\r\n : 'bg-slate-700 text-gray-300 hover:bg-slate-600'\r\n }`}\r\n >\r\n {token} {token === 'XLM' && '\u2b50'}\r\n <\/button>\r\n ))}\r\n <\/div>\r\n <p className=\"text-gray-500 text-xs mt-1\">\r\n {selectedToken === 'USDC' && 'Make sure you have USDC trustline added in Freighter'}\r\n <\/p>\r\n <\/div>\r\n\r\n {\/* Amount Input *\/}\r\n <div className=\"mb-4\">\r\n <label className=\"text-gray-400 text-sm mb-2 block\">\r\n Amount ({selectedToken})\r\n <\/label>\r\n <input\r\n type=\"number\"\r\n value={purchaseAmount}\r\n onChange={(e) => setPurchaseAmount(e.target.value)}\r\n placeholder={selectedToken === 'XLM' ? '833.33' : '100'}\r\n className=\"w-full bg-slate-700 text-white px-4 py-3 rounded-lg border border-purple-500\/20 focus:border-purple-500 focus:outline-none\"\r\n step={selectedToken === 'XLM' ? '1' : '0.01'}\r\n \/>\r\n <p className=\"text-gray-500 text-xs mt-1\">\r\n {selectedToken === 'XLM' \r\n ? `\u2248 $${purchaseAmount ? (parseFloat(purchaseAmount) * xlmPrice).toFixed(2) : '0.00'} USD`\r\n : `Minimum $100 USD \u2022 Network fee: ~$0.0001`\r\n }\r\n <\/p>\r\n <\/div>\r\n\r\n {\/* Token Calculation *\/}\r\n {purchaseAmount && tokens.totalTokens > 0 && (\r\n <div className=\"mb-6 p-4 bg-slate-700 rounded-lg\">\r\n <div className=\"space-y-2\">\r\n <div className=\"flex justify-between\">\r\n <span className=\"text-gray-400 text-sm\">Base Tokens<\/span>\r\n <span className=\"text-white font-semibold\">{tokens.baseTokens.toLocaleString()} ATABSC<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between\">\r\n <span className=\"text-gray-400 text-sm\">Seed Bonus (10%)<\/span>\r\n <span className=\"text-purple-400 font-semibold\">+{tokens.bonusTokens.toLocaleString()} ATABSC<\/span>\r\n <\/div>\r\n <div className=\"border-t border-slate-600 pt-2 flex justify-between\">\r\n <span className=\"text-white font-bold\">Total Tokens<\/span>\r\n <span className=\"text-purple-400 font-bold\">{tokens.totalTokens.toLocaleString()} ATABSC<\/span>\r\n <\/div>\r\n <p className=\"text-gray-500 text-xs\">\r\n 25% unlocked immediately, 75% vested over 6 months\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n {\/* Purchase Button *\/}\r\n <button\r\n onClick={handlePurchase}\r\n disabled={!walletConnected || isProcessing || !purchaseAmount || parseFloat(purchaseAmount) <= 0}\r\n className={`w-full py-4 rounded-lg font-bold text-lg transition ${\r\n !walletConnected || isProcessing || !purchaseAmount || parseFloat(purchaseAmount) <= 0\r\n ? 'bg-slate-700 text-gray-500 cursor-not-allowed'\r\n : 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white'\r\n }`}\r\n >\r\n {isProcessing ? 'Processing...' : `Purchase with ${selectedToken}`}\r\n <\/button>\r\n\r\n {\/* Transaction Hash *\/}\r\n {txHash && (\r\n <div className=\"mt-4 p-4 bg-green-500\/10 border border-green-500\/20 rounded-lg\">\r\n <p className=\"text-green-400 font-semibold mb-2\">Transaction Submitted!<\/p>\r\n <a \r\n href={`https:\/\/stellar.expert\/explorer\/public\/tx\/${txHash}`}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n className=\"text-purple-400 hover:text-purple-300 text-sm flex items-center space-x-1\"\r\n >\r\n <span className=\"truncate\">{txHash.slice(0, 20)}...<\/span>\r\n <ExternalLink className=\"w-4 h-4 flex-shrink-0\" \/>\r\n <\/a>\r\n <\/div>\r\n )}\r\n\r\n {\/* Important Notice *\/}\r\n <div className=\"mt-6 p-4 bg-slate-900 rounded-lg border border-purple-500\/20\">\r\n <p className=\"text-gray-400 text-xs\">\r\n <strong className=\"text-white\">LOW FEES:<\/strong> Stellar network fees are ~$0.0001 per transaction. Your tokens will be sent to your wallet within 24 hours after payment confirmation.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n {\/* Hero Section *\/}\r\n <section id=\"home\" className=\"pt-32 pb-20 px-4\">\r\n <div className=\"max-w-7xl mx-auto text-center\">\r\n <div className=\"inline-block mb-4 px-4 py-2 bg-blue-500\/10 border border-blue-500\/20 rounded-full\">\r\n <span className=\"text-blue-400 text-sm font-semibold\">Brought to you by StellarDNS<\/span>\r\n <\/div>\r\n \r\n <h1 className=\"text-5xl md:text-7xl font-bold text-white mb-6\">\r\n Another Totally Awesome\r\n <span className=\"block text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400\">\r\n But SPECULATIVE COIN\r\n <\/span>\r\n <\/h1>\r\n <p className=\"text-xl text-gray-300 mb-8 max-w-3xl mx-auto\">\r\n Own a new \"store of value\" that is \"tradeable\" for almost free. $0.0001 transaction fees. Built on Stellar for true accessibility. No high gas fees, no barriers.\r\n <\/p>\r\n\r\n {\/* Countdown Timer *\/}\r\n <div className=\"mb-12\">\r\n <p className=\"text-purple-400 text-sm uppercase tracking-wider mb-4\">Seed Round Starts In<\/p>\r\n <div className=\"flex justify-center space-x-4 md:space-x-8\">\r\n {[\r\n { label: 'Days', value: timeLeft.days },\r\n { label: 'Hours', value: timeLeft.hours },\r\n { label: 'Minutes', value: timeLeft.minutes },\r\n { label: 'Seconds', value: timeLeft.seconds }\r\n ].map((item) => (\r\n <div key={item.label} className=\"bg-slate-800\/50 backdrop-blur-sm border border-purple-500\/20 rounded-lg p-4 min-w-[80px]\">\r\n <div className=\"text-3xl md:text-4xl font-bold text-white\">{String(item.value).padStart(2, '0')}<\/div>\r\n <div className=\"text-xs text-gray-400 uppercase\">{item.label}<\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Dynamic Pricing Info *\/}\r\n <div className=\"max-w-2xl mx-auto mb-6 p-4 bg-blue-500\/10 border border-blue-500\/20 rounded-lg\">\r\n <p className=\"text-blue-400 font-semibold text-sm mb-1\">\ud83d\udd04 Dynamic Pricing Pegged to XLM<\/p>\r\n <p className=\"text-gray-300 text-sm\">\r\n ATABSC price moves with Stellar (XLM). 1 ATABSC = 23 XLM always.\r\n When XLM rises, ATABSC rises. When XLM falls, ATABSC falls.\r\n <\/p>\r\n <\/div>\r\n\r\n {\/* Sale Progress *\/}\r\n <div className=\"max-w-2xl mx-auto bg-slate-800\/50 backdrop-blur-sm border border-purple-500\/20 rounded-lg p-6 mb-8\">\r\n <div className=\"flex justify-between text-sm text-gray-300 mb-2\">\r\n <span>Raised: $125,000<\/span>\r\n <span>Goal: $700,000<\/span>\r\n <\/div>\r\n <div className=\"w-full bg-slate-700 rounded-full h-3 mb-4\">\r\n <div className=\"bg-gradient-to-r from-purple-600 to-pink-600 h-3 rounded-full\" style={{ width: '18%' }}><\/div>\r\n <\/div>\r\n <div className=\"text-2xl font-bold text-white mb-1\">\r\n 1 ATABSC = ${xlmPrice > 0 ? TOKEN_PRICE.toFixed(4) : '...'} USD\r\n <span className=\"text-xs text-gray-400 ml-2\">\ud83d\udd34 Live<\/span>\r\n <\/div>\r\n <div className=\"text-lg text-blue-400 mb-2\">\r\n = {XLM_MULTIPLIER} XLM\r\n <span className=\"text-xs text-gray-400 ml-2\">(Pegged 23:1)<\/span>\r\n <\/div>\r\n <div className=\"text-sm text-purple-400 mb-2\">Seed Round - 10% Bonus Tokens<\/div>\r\n <div className=\"text-xs text-green-400\">Network Fee: ~$0.0001 (vs $5-50 on Ethereum)<\/div>\r\n <\/div>\r\n\r\n <div className=\"flex flex-col sm:flex-row gap-4 justify-center items-center\">\r\n <button\r\n onClick={() => setShowBuyModal(true)}\r\n className=\"bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition transform hover:scale-105 inline-flex items-center\"\r\n >\r\n Buy ATABSC Now\r\n <ArrowRight \/>\r\n <\/button>\r\n <a\r\n href=\"purchase-atabsc.html\"\r\n className=\"bg-slate-800 border border-purple-500\/40 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-slate-700 transition inline-flex items-center\"\r\n >\r\n More Payment Options \u2192\r\n <\/a>\r\n <\/div>\r\n <p className=\"text-gray-400 text-sm mt-4\">\r\n Connect Freighter, LOBSTR, xBull, Albedo, or enter your wallet address\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Why Stellar Section *\/}\r\n <section id=\"why-stellar\" className=\"py-20 px-4 bg-slate-800\/30\">\r\n <div className=\"max-w-7xl mx-auto\">\r\n <h2 className=\"text-4xl font-bold text-white text-center mb-4\">Why We Chose Stellar<\/h2>\r\n <p className=\"text-gray-400 text-center mb-16 max-w-2xl mx-auto\">\r\n We believe blockchain should be accessible to everyone, not just those who can afford high fees.\r\n <\/p>\r\n \r\n <div className=\"grid md:grid-cols-3 gap-8\">\r\n {[\r\n {\r\n icon: <DollarSign className=\"w-12 h-12 text-green-400\" \/>,\r\n title: \"Pennies, Not Dollars\",\r\n description: \"Transaction fees ~$0.0001 vs $5-50 on Ethereum. Deploy contracts for under $1. True accessibility for everyone.\",\r\n comparison: \"ETH: $50+ \u2022 Stellar: $0.0001\"\r\n },\r\n {\r\n icon: <Zap className=\"w-12 h-12 text-yellow-400\" \/>,\r\n title: \"Lightning Fast\",\r\n description: \"3-5 second transaction finality. No waiting, no uncertainty. Instant domain ownership confirmation.\",\r\n comparison: \"ETH: 12+ sec \u2022 Stellar: 3-5 sec\"\r\n },\r\n {\r\n icon: <Users className=\"w-12 h-12 text-blue-400\" \/>,\r\n title: \"Mobile-First\",\r\n description: \"Works on any device. Freighter, LOBSTR, or any Stellar wallet. No expensive desktop setup required.\",\r\n comparison: \"Built for global access\"\r\n }\r\n ].map((feature, idx) => (\r\n <div key={idx} className=\"bg-slate-800\/50 backdrop-blur-sm border border-purple-500\/20 rounded-lg p-6 hover:border-purple-500\/40 transition\">\r\n <div className=\"mb-4\">{feature.icon}<\/div>\r\n <h3 className=\"text-xl font-semibold text-white mb-2\">{feature.title}<\/h3>\r\n <p className=\"text-gray-400 mb-3\">{feature.description}<\/p>\r\n <div className=\"text-xs text-purple-400 bg-purple-500\/10 px-3 py-1 rounded inline-block\">\r\n {feature.comparison}\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n\r\n <div className=\"mt-12 p-6 bg-gradient-to-r from-blue-500\/10 to-purple-500\/10 border border-blue-500\/20 rounded-lg text-center\">\r\n <h3 className=\"text-2xl font-bold text-white mb-3\">The Math is Simple<\/h3>\r\n <p className=\"text-gray-300 mb-4\">\r\n Ethereum ICO deployment: $200-400 in gas fees. Stellar deployment: Less than $1. \r\n <\/p>\r\n <p className=\"text-xl font-semibold text-blue-400\">\r\n We'd rather spend that money building features for you.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Footer *\/}\r\n <footer className=\"bg-slate-900 border-t border-purple-500\/20 py-12 px-4\">\r\n <div className=\"max-w-7xl mx-auto text-center\">\r\n <div className=\"flex justify-center items-center space-x-2 mb-4\">\r\n <Coins className=\"w-6 h-6 text-purple-400\" \/>\r\n <span className=\"text-xl font-bold text-white\">ATABSC<\/span>\r\n <span className=\"text-xs bg-blue-500 text-white px-2 py-1 rounded\">Stellar Network<\/span>\r\n <\/div>\r\n <p className=\"text-gray-500 text-sm mb-4\">\r\n IMPORTANT: ATABSC is a utility token, not a security. Review all risk disclosures before participating.\r\n <\/p>\r\n <p className=\"text-gray-600 text-sm\">\r\n \u00a9 2025 StellarDNS Corp. All rights reserved.\r\n <\/p>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n );\r\n }\r\n\r\n \/\/ Render the app\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<ATABSCLanding \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":10,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":342,"href":"https:\/\/stellardns.io\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions\/342"}],"wp:attachment":[{"href":"https:\/\/stellardns.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}