cppro11225544/bamboo-bites-crypto-revolution
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CryptoPanda.pro | $CPPRO Memecoin</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 'panda-blue': '#1a237e',17 'panda-gray': '#263238',18 'bamboo-green': '#2e7d32',19 }20 }21 }22 }23 </script>24</head>25<body class="bg-panda-gray text-white font-sans antialiased">26 <!-- Navigation Component -->27 <script src="components/navigation.js"></script>28 <custom-navigation></custom-navigation>29 30 <!-- Hero Section -->31 <section id="home" class="relative h-screen flex items-center justify-center bg-gradient-to-b from-gray-700 to-panda-blue overflow-hidden">32 <div class="absolute inset-0 bg-[url('https://static.photos/nature/1200x630/42?text=BambooForest')] opacity-20 bg-cover bg-center hover:opacity-30 transition-opacity duration-300"></div>33<div class="container mx-auto px-6 relative z-10 text-center">34 <img src="https://static.photos/nature/300x100/42?text=CryptoPanda.pro" alt="CryptoPanda Logo" class="mx-auto mb-8">35<h1 class="text-5xl md:text-7xl font-bold mb-6">Join the CryptoPanda Revolution!</h1>36 <p class="text-xl md:text-2xl mb-8">Eating bamboo, stacking gains - one block at a time!</p>37 <a href="#how-to-buy" class="bg-bamboo-green hover:bg-green-700 text-white font-bold py-4 px-8 rounded-full text-lg transition duration-300 inline-block">Buy on Pamp.Fun</a>38 </div>39 </section>40 41 <!-- About Section -->42 <section id="about" class="py-20 bg-panda-blue">43 <div class="container mx-auto px-6">44 <h2 class="text-4xl font-bold mb-12 text-center">About $CPPRO</h2>45 <div class="max-w-3xl mx-auto text-lg text-center">46 <p class="mb-6">In the wild jungle of cryptocurrency, a new legend emerges - CryptoPanda ($CPPRO)!</p>47 <p class="mb-6">While some say the memecoin era is over, we believe the party is just getting started. $CPPRO isn't just another meme - it's a movement, a community, and a ticket to the bamboo-filled future of decentralized fun.</p>48 <p class="mb-6">Our cuddly panda isn't hibernating - it's coding, building, and creating a universe where humor meets utility. The CryptoPanda ecosystem will grow just like bamboo - fast, strong, and ever-expanding.</p>49 <p class="mb-8">Join our bamboo grove of holders and let's prove that memecoins still have bite!</p>50 <a href="#how-to-buy" class="bg-bamboo-green hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300 inline-block">Buy $CPPRO</a>51 </div>52 </div>53 </section>54 55 <!-- Wallets Section -->56 <section id="wallets" class="py-20 bg-panda-gray">57 <div class="container mx-auto px-6">58 <h2 class="text-4xl font-bold mb-12 text-center">Store Your $CPPRO</h2>59 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">60 <!-- Wallet 1 -->61 <div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">62 <div class="flex justify-center mb-6">63 <img src="https://via.placeholder.com/100x100?text=MetaMask" alt="MetaMask" class="h-24 w-24">64 </div>65 <h3 class="text-2xl font-bold mb-4 text-center">MetaMask</h3>66 <p class="text-gray-300 text-center">Browser & Mobile Wallet for EVM chains. The perfect bamboo basket for your $CPPRO.</p>67 </div>68 69 <!-- Wallet 2 -->70 <div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">71 <div class="flex justify-center mb-6">72 <img src="https://via.placeholder.com/100x100?text=Phantom" alt="Phantom" class="h-24 w-24">73 </div>74 <h3 class="text-2xl font-bold mb-4 text-center">Phantom</h3>75 <p class="text-gray-300 text-center">Solana's favorite wallet. Now with extra bamboo storage for your $CPPRO.</p>76 </div>77 78 <!-- Wallet 3 -->79 <div class="bg-gray-800 rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">80 <div class="flex justify-center mb-6">81 <img src="https://via.placeholder.com/100x100?text=Trust" alt="Trust Wallet" class="h-24 w-24">82 </div>83 <h3 class="text-2xl font-bold mb-4 text-center">Trust Wallet</h3>84 <p class="text-gray-300 text-center">Mobile-first wallet for all your crypto needs, including delicious $CPPRO.</p>85 </div>86 </div>87 </div>88 </section>89 90 <!-- How to Buy Section -->91 <section id="how-to-buy" class="py-20 bg-panda-blue">92 <div class="container mx-auto px-6">93 <h2 class="text-4xl font-bold mb-12 text-center">How to Buy $CPPRO</h2>94 <div class="max-w-2xl mx-auto bg-gray-800 rounded-xl p-8 shadow-lg">95 <ol class="space-y-6">96 <li class="flex items-start">97 <span class="flex items-center justify-center bg-bamboo-green text-white rounded-full h-8 w-8 flex-shrink-0 mr-4">1</span>98 <p class="text-lg">Set up a compatible wallet (like MetaMask or Phantom) and ensure you have SOL or other required currency for gas fees.</p>99 </li>100 <li class="flex items-start">101 <span class="flex items-center justify-center bg-bamboo-green text-white rounded-full h-8 w-8 flex-shrink-0 mr-4">2</span>102 <p class="text-lg">Visit <a href="https://pamp.fun" class="text-bamboo-green hover:underline" target="_blank">Pamp.Fun</a> and connect your wallet.</p>103 </li>104 <li class="flex items-start">105 <span class="flex items-center justify-center bg-bamboo-green text-white rounded-full h-8 w-8 flex-shrink-0 mr-4">3</span>106 <p class="text-lg">Search for $CPPRO (CryptoPanda.pro) in the token list.</p>107 </li>108 <li class="flex items-start">109 <span class="flex items-center justify-center bg-bamboo-green text-white rounded-full h-8 w-8 flex-shrink-0 mr-4">4</span>110 <p class="text-lg">Enter the amount you want to purchase and confirm the transaction in your wallet.</p>111 </li>112 <li class="flex items-start">113 <span class="flex items-center justify-center bg-bamboo-green text-white rounded-full h-8 w-8 flex-shrink-0 mr-4">5</span>114 <p class="text-lg">Wait for confirmation and enjoy being part of the CryptoPanda family!</p>115 </li>116 </ol>117 <div class="mt-10 text-center">118 <a href="#" class="bg-bamboo-green hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300 inline-block">Buy Now on Pamp.Fun</a>119 </div>120 </div>121 </div>122 </section>123 124 <!-- Roadmap Section -->125 <section id="roadmap" class="py-20 bg-panda-gray">126 <div class="container mx-auto px-6">127 <h2 class="text-4xl font-bold mb-12 text-center">The Panda's Path</h2>128 <div class="max-w-4xl mx-auto">129 <!-- Roadmap Timeline -->130 <div class="space-y-8">131 <!-- Completed Items -->132 <div class="flex items-start">133 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-bamboo-green flex items-center justify-center mr-4 mt-1">134 <i data-feather="check"></i>135 </div>136 <div class="bg-gray-800 rounded-lg p-6 flex-1">137 <h3 class="text-xl font-bold mb-2">Website Creation</h3>138 <p class="text-gray-300">Completed</p>139 </div>140 </div>141 142 <div class="flex items-start">143 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-bamboo-green flex items-center justify-center mr-4 mt-1">144 <i data-feather="check"></i>145 </div>146 <div class="bg-gray-800 rounded-lg p-6 flex-1">147 <h3 class="text-xl font-bold mb-2">Social Media Accounts</h3>148 <p class="text-gray-300">Completed</p>149 </div>150 </div>151 152 <div class="flex items-start">153 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-bamboo-green flex items-center justify-center mr-4 mt-1">154 <i data-feather="check"></i>155 </div>156 <div class="bg-gray-800 rounded-lg p-6 flex-1">157 <h3 class="text-xl font-bold mb-2">Memecoin Launch</h3>158 <p class="text-gray-300">Completed</p>159 </div>160 </div>161 162 <!-- Not Completed -->163 <div class="flex items-start">164 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-600 flex items-center justify-center mr-4 mt-1">165 <i data-feather="x"></i>166 </div>167 <div class="bg-gray-800 rounded-lg p-6 flex-1">168 <h3 class="text-xl font-bold mb-2">Market Research</h3>169 <p class="text-gray-300">Not Completed</p>170 </div>171 </div>172 173 <div class="flex items-start">174 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-600 flex items-center justify-center mr-4 mt-1">175 <i data-feather="x"></i>176 </div>177 <div class="bg-gray-800 rounded-lg p-6 flex-1">178 <h3 class="text-xl font-bold mb-2">Project Scalability Preparation</h3>179 <p class="text-gray-300">Not Completed</p>180 </div>181 </div>182 183 <!-- Upcoming -->184 <div class="flex items-start opacity-70">185 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-500 flex items-center justify-center mr-4 mt-1">186 <i data-feather="clock"></i>187 </div>188 <div class="bg-gray-800 rounded-lg p-6 flex-1">189 <h3 class="text-xl font-bold mb-2">Creation of the CryptoPanda Comic Universe</h3>190 <p class="text-gray-300">Upcoming</p>191 </div>192 </div>193 194 <div class="flex items-start opacity-70">195 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-500 flex items-center justify-center mr-4 mt-1">196 <i data-feather="clock"></i>197 </div>198 <div class="bg-gray-800 rounded-lg p-6 flex-1">199 <h3 class="text-xl font-bold mb-2">Realization of the CryptoPanda Universe</h3>200 <p class="text-gray-300">Upcoming</p>201 </div>202 </div>203 204 <div class="flex items-start opacity-70">205 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-500 flex items-center justify-center mr-4 mt-1">206 <i data-feather="clock"></i>207 </div>208 <div class="bg-gray-800 rounded-lg p-6 flex-1">209 <h3 class="text-xl font-bold mb-2">Marketing Research for Crypto-Comics</h3>210 <p class="text-gray-300">Upcoming</p>211 </div>212 </div>213 214 <div class="flex items-start opacity-70">215 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-500 flex items-center justify-center mr-4 mt-1">216 <i data-feather="clock"></i>217 </div>218 <div class="bg-gray-800 rounded-lg p-6 flex-1">219 <h3 class="text-xl font-bold mb-2">Public Release of Crypto-Comics</h3>220 <p class="text-gray-300">Upcoming</p>221 </div>222 </div>223 224 <!-- Moon -->225 <div class="flex items-start opacity-70">226 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-yellow-400 flex items-center justify-center mr-4 mt-1">227 <i data-feather="moon"></i>228 </div>229 <div class="bg-gray-800 rounded-lg p-6 flex-1">230 <h3 class="text-xl font-bold mb-2">Achieve Market Cap > $10B USDT</h3>231 <p class="text-gray-300">The Moon</p>232 </div>233 </div>234 </div>235 236 <div class="mt-16 text-center">237 <p class="text-2xl font-bold mb-8">"Let's Make It Happen Together!"</p>238 <a href="#how-to-buy" class="bg-bamboo-green hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300 inline-block">Buy $CPPRO Token</a>239 </div>240 </div>241 </div>242 </section>243 244 <!-- Tokenomics Section -->245 <section id="tokenomics" class="py-20 bg-panda-blue">246 <div class="container mx-auto px-6">247 <h2 class="text-4xl font-bold mb-12 text-center">$CPPRO Tokenomics</h2>248 <div class="max-w-3xl mx-auto bg-gray-800 rounded-xl p-8 shadow-lg">249 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">250 <div>251 <h3 class="text-2xl font-bold mb-4">Fair Distribution</h3>252 <p class="mb-4">$CPPRO was launched with a fair distribution model, ensuring no single entity holds too much control over the token's future.</p>253 <p class="mb-4">The developers' initial token allocation will be sold according to the project's development principles: no more than 5% of the total pool and not more frequently than once every 2-3 weeks.</p>254 </div>255 <div>256 <h3 class="text-2xl font-bold mb-4">Token Details</h3>257 <ul class="space-y-3">258 <li class="flex items-center">259 <i data-feather="hash" class="mr-2"></i>260 <span>Total Supply: 1,000,000,000 $CPPRO</span>261 </li>262 <li class="flex items-center">263 <i data-feather="lock" class="mr-2"></i>264 <span>Liquidity Locked: 100%</span>265 </li>266 <li class="flex items-center">267 <i data-feather="percent" class="mr-2"></i>268 <span>Transaction Tax: 0%</span>269 </li>270 <li class="flex items-center">271 <i data-feather="pie-chart" class="mr-2"></i>272 <span>Community Allocation: 90%+</span>273 </li>274 </ul>275 </div>276 </div>277 </div>278 </div>279 </section>280 281 <!-- Socials Section -->282 <section id="socials" class="py-20 bg-panda-gray">283 <div class="container mx-auto px-6">284 <h2 class="text-4xl font-bold mb-12 text-center">Join the Bamboo Grove</h2>285 <div class="flex flex-wrap justify-center gap-8">286 <a href="https://t.me/cryptopandapro" target="_blank" class="bg-gray-800 hover:bg-gray-700 rounded-full p-6 transition duration-300">287 <i data-feather="message-circle" class="w-8 h-8"></i>288 </a>289 <a href="https://instagram.com/cryptopandapro" target="_blank" class="bg-gray-800 hover:bg-gray-700 rounded-full p-6 transition duration-300">290 <i data-feather="instagram" class="w-8 h-8"></i>291 </a>292 <a href="https://discord.gg/cryptopanda" target="_blank" class="bg-gray-800 hover:bg-gray-700 rounded-full p-6 transition duration-300">293 <i data-feather="users" class="w-8 h-8"></i>294 </a>295 <a href="https://twitter.com/cryptopandapro" target="_blank" class="bg-gray-800 hover:bg-gray-700 rounded-full p-6 transition duration-300">296 <i data-feather="twitter" class="w-8 h-8"></i>297 </a>298 <a href="https://facebook.com/cryptopandapro" target="_blank" class="bg-gray-800 hover:bg-gray-700 rounded-full p-6 transition duration-300">299 <i data-feather="facebook" class="w-8 h-8"></i>300 </a>301 <a href="https://reddit.com/r/cryptopanda" target="_blank" class="bg-gray-800 hover:bg-gray-700 rounded-full p-6 transition duration-300">302 <i data-feather="message-square" class="w-8 h-8"></i>303 </a>304</div>305 </div>306 </section>307 308 <!-- Contact Section -->309 <section id="contact" class="py-20 bg-panda-blue">310 <div class="container mx-auto px-6">311 <h2 class="text-4xl font-bold mb-12 text-center">Get In Touch</h2>312 <div class="max-w-2xl mx-auto bg-gray-800 rounded-xl p-8 shadow-lg">313 <form class="space-y-6">314 <div>315 <label for="name" class="block text-lg mb-2">Name</label>316 <input type="text" id="name" class="w-full bg-gray-700 border border-gray-600 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-bamboo-green">317 </div>318 <div>319 <label for="email" class="block text-lg mb-2">Email Address</label>320 <input type="email" id="email" class="w-full bg-gray-700 border border-gray-600 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-bamboo-green">321 </div>322 <div>323 <label for="message" class="block text-lg mb-2">Message</label>324 <textarea id="message" rows="5" class="w-full bg-gray-700 border border-gray-600 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-bamboo-green"></textarea>325 </div>326 <div class="text-center">327 <button type="submit" class="bg-bamboo-green hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300">Send Message</button>328 </div>329 </form>330 </div>331 </div>332 </section>333 334 <!-- Footer Component -->335 <script src="components/footer.js"></script>336 <custom-footer></custom-footer>337 338 <!-- Scripts -->339 <script src="script.js"></script>340 <script>341 feather.replace();342 </script>343<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>344</body>345</html>