ipadhyay/undefined
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>FundFiesta - Gift Investments That Grow</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://checkout.razorpay.com/v1/checkout.js"></script>12 <script>13 tailwind.config = {14 theme: {15 extend: {16 colors: {17 primary: '#6366f1',18 secondary: '#8b5cf6',19 }20 }21 }22 }23 </script>24 <style>25 .scratch-card {26 background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);27 border-radius: 16px;28 position: relative;29 overflow: hidden;30 }31 .confetti {32 position: absolute;33 width: 10px;34 height: 10px;35 background-color: #f0f;36 opacity: 0;37 }38 @keyframes float {39 0% { transform: translateY(0px); }40 50% { transform: translateY(-20px); }41 100% { transform: translateY(0px); }42 }43 .floating {44 animation: float 3s ease-in-out infinite;45 }46 </style>47</head>48<body class="bg-gray-50 font-sans">49 <!-- Navigation -->50 <nav class="bg-white shadow-sm py-4">51 <div class="container mx-auto px-4 flex justify-between items-center">52 <div class="flex items-center space-x-2">53 <i data-feather="gift" class="text-primary-500"></i>54 <span class="text-xl font-bold text-gray-800">FundFiesta</span>55 </div>56 <div class="hidden md:flex space-x-6">57 <a href="#" class="text-primary-500 font-medium">How It Works</a>58 <a href="#" class="text-gray-600 hover:text-primary-500">Fund Catalog</a>59 <a href="#" class="text-gray-600 hover:text-primary-500">FAQs</a>60 <a href="api.html" class="text-gray-600 hover:text-primary-500">API</a>61</div>62 <button class="md:hidden">63 <i data-feather="menu"></i>64 </button>65 </div>66 </nav>67 68 <!-- Hero Section -->69 <section class="py-16 px-4">70 <div class="container mx-auto flex flex-col md:flex-row items-center">71 <div class="md:w-1/2 mb-10 md:mb-0">72 <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">73 Give the Gift of <span class="text-primary-500">Financial Freedom</span>74 </h1>75 <p class="text-lg text-gray-600 mb-8">76 Surprise your loved ones with an investment that grows over time. Perfect for birthdays, graduations, or just because!77 </p>78 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">79 <button class="bg-primary-500 hover:bg-primary-600 text-white px-8 py-3 rounded-lg font-medium shadow-md transition duration-300 flex items-center justify-center">80 <i data-feather="gift" class="mr-2"></i> Send a Gift81 </button>82 <button class="border-2 border-primary-500 text-primary-500 hover:bg-primary-50 px-8 py-3 rounded-lg font-medium transition duration-300 flex items-center justify-center">83 <i data-feather="dollar-sign" class="mr-2"></i> Redeem Gift84 </button>85 </div>86 </div>87 <div class="md:w-1/2 flex justify-center">88 <div class="relative">89 <img src="http://static.photos/finance/640x360/42" alt="Financial gift" class="rounded-2xl shadow-xl w-full max-w-md">90 <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-md">91 <div class="flex items-center">92 <div class="bg-green-100 p-2 rounded-full mr-3">93 <i data-feather="trending-up" class="text-green-600"></i>94 </div>95 <div>96 <p class="text-xs text-gray-500">Average return</p>97 <p class="font-bold text-green-600">12.5% CAGR</p>98 </div>99 </div>100 </div>101 </div>102 </div>103 </div>104 </section>105 106 <!-- How It Works -->107 <section class="py-16 bg-gray-100 px-4">108 <div class="container mx-auto">109 <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">How FundFiesta Works</h2>110 <div class="grid md:grid-cols-3 gap-8">111 <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">112 <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">113 <span class="text-primary-500 font-bold text-xl">1</span>114 </div>115 <h3 class="text-xl font-semibold mb-3">Select & Personalize</h3>116 <p class="text-gray-600">Choose from top-performing mutual funds and ETFs. Add a personal message and select a delivery date.</p>117 </div>118 <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">119 <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">120 <span class="text-primary-500 font-bold text-xl">2</span>121 </div>122 <h3 class="text-xl font-semibold mb-3">Secure Payment</h3>123 <p class="text-gray-600">Complete your KYC and pay securely via Razorpay. Your investment is processed immediately.</p>124 </div>125 <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">126 <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">127 <span class="text-primary-500 font-bold text-xl">3</span>128 </div>129 <h3 class="text-xl font-semibold mb-3">Delight & Track</h3>130 <p class="text-gray-600">Recipient gets a beautiful notification. Track the gift's performance over time.</p>131 </div>132 </div>133 </div>134 </section>135 136 <!-- Popular Funds -->137 <section class="py-16 px-4">138 <div class="container mx-auto">139 <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Popular Investment Gifts</h2>140 <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">141 <!-- Fund Card 1 -->142 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">143 <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6 text-white">144 <div class="flex justify-between items-start">145 <div>146 <h3 class="font-bold text-xl">BlueChip Growth</h3>147 <p class="text-blue-100">Large Cap Equity Fund</p>148 </div>149 <div class="bg-white bg-opacity-20 p-2 rounded-lg">150 <i data-feather="star" class="text-yellow-300"></i>151 </div>152 </div>153 <div class="mt-6 flex justify-between items-center">154 <div>155 <p class="text-sm text-blue-100">1Y Returns</p>156 <p class="text-2xl font-bold">18.7%</p>157 </div>158 <div>159 <p class="text-sm text-blue-100">Min. Investment</p>160 <p class="text-2xl font-bold">₹500</p>161 </div>162 </div>163 </div>164 <div class="p-6">165 <div class="flex items-center mb-4">166 <div class="w-full bg-gray-200 rounded-full h-2.5">167 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div>168 </div>169 <span class="ml-3 text-sm text-gray-600">85% equity</span>170 </div>171 <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-lg font-medium transition duration-300">172 Gift This Fund173 </button>174 </div>175 </div>176 177 <!-- Fund Card 2 -->178 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">179 <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-6 text-white">180 <div class="flex justify-between items-start">181 <div>182 <h3 class="font-bold text-xl">FutureBuilder</h3>183 <p class="text-purple-100">Child Education Plan</p>184 </div>185 <div class="bg-white bg-opacity-20 p-2 rounded-lg">186 <i data-feather="book" class="text-yellow-300"></i>187 </div>188 </div>189 <div class="mt-6 flex justify-between items-center">190 <div>191 <p class="text-sm text-purple-100">3Y CAGR</p>192 <p class="text-2xl font-bold">14.2%</p>193 </div>194 <div>195 <p class="text-sm text-purple-100">Min. Investment</p>196 <p class="text-2xl font-bold">₹1,000</p>197 </div>198 </div>199 </div>200 <div class="p-6">201 <div class="flex items-center mb-4">202 <div class="w-full bg-gray-200 rounded-full h-2.5">203 <div class="bg-purple-600 h-2.5 rounded-full" style="width: 70%"></div>204 </div>205 <span class="ml-3 text-sm text-gray-600">70% equity</span>206 </div>207 <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-lg font-medium transition duration-300">208 Gift This Fund209 </button>210 </div>211 </div>212 213 <!-- Fund Card 3 -->214 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">215 <div class="bg-gradient-to-r from-green-500 to-green-600 p-6 text-white">216 <div class="flex justify-between items-start">217 <div>218 <h3 class="font-bold text-xl">GoldenYears</h3>219 <p class="text-green-100">Retirement Fund</p>220 </div>221 <div class="bg-white bg-opacity-20 p-2 rounded-lg">222 <i data-feather="sun" class="text-yellow-300"></i>223 </div>224 </div>225 <div class="mt-6 flex justify-between items-center">226 <div>227 <p class="text-sm text-green-100">5Y CAGR</p>228 <p class="text-2xl font-bold">11.9%</p>229 </div>230 <div>231 <p class="text-sm text-green-100">Min. Investment</p>232 <p class="text-2xl font-bold">₹2,000</p>233 </div>234 </div>235 </div>236 <div class="p-6">237 <div class="flex items-center mb-4">238 <div class="w-full bg-gray-200 rounded-full h-2.5">239 <div class="bg-green-600 h-2.5 rounded-full" style="width: 60%"></div>240 </div>241 <span class="ml-3 text-sm text-gray-600">60% equity</span>242 </div>243 <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-lg font-medium transition duration-300">244 Gift This Fund245 </button>246 </div>247 </div>248 </div>249 <div class="text-center mt-10">250 <button class="border-2 border-primary-500 text-primary-500 hover:bg-primary-50 px-8 py-3 rounded-lg font-medium transition duration-300">251 View All 50+ Funds252 </button>253 </div>254 </div>255 </section>256 257 <!-- Testimonials -->258 <section class="py-16 bg-gray-100 px-4">259 <div class="container mx-auto">260 <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">What People Are Saying</h2>261 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">262 <div class="bg-white p-6 rounded-xl shadow-sm">263 <div class="flex items-center mb-4">264 <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">265 <div>266 <h4 class="font-semibold">Rahul Sharma</h4>267 <div class="flex text-yellow-400">268 <i data-feather="star" class="w-4 h-4 fill-current"></i>269 <i data-feather="star" class="w-4 h-4 fill-current"></i>270 <i data-feather="star" class="w-4 h-4 fill-current"></i>271 <i data-feather="star" class="w-4 h-4 fill-current"></i>272 <i data-feather="star" class="w-4 h-4 fill-current"></i>273 </div>274 </div>275 </div>276 <p class="text-gray-600">"Gave my niece an investment for her birthday instead of cash. She loved watching it grow and learned about finances!"</p>277 </div>278 <div class="bg-white p-6 rounded-xl shadow-sm">279 <div class="flex items-center mb-4">280 <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4">281 <div>282 <h4 class="font-semibold">Priya Patel</h4>283 <div class="flex text-yellow-400">284 <i data-feather="star" class="w-4 h-4 fill-current"></i>285 <i data-feather="star" class="w-4 h-4 fill-current"></i>286 <i data-feather="star" class="w-4 h-4 fill-current"></i>287 <i data-feather="star" class="w-4 h-4 fill-current"></i>288 <i data-feather="star" class="w-4 h-4 fill-current"></i>289 </div>290 </div>291 </div>292 <p class="text-gray-600">"Perfect graduation gift! The process was so easy and my daughter was thrilled to start her investment journey."</p>293 </div>294 <div class="bg-white p-6 rounded-xl shadow-sm">295 <div class="flex items-center mb-4">296 <img src="http://static.photos/people/200x200/3" alt="User" class="w-12 h-12 rounded-full mr-4">297 <div>298 <h4 class="font-semibold">Amit Joshi</h4>299 <div class="flex text-yellow-400">300 <i data-feather="star" class="w-4 h-4 fill-current"></i>301 <i data-feather="star" class="w-4 h-4 fill-current"></i>302 <i data-feather="star" class="w-4 h-4 fill-current"></i>303 <i data-feather="star" class="w-4 h-4 fill-current"></i>304 <i data-feather="star" class="w-4 h-4 fill-current"></i>305 </div>306 </div>307 </div>308 <p class="text-gray-600">"As a financial advisor, I recommend FundFiesta to all my clients who want meaningful gifts for their kids."</p>309 </div>310 </div>311 </div>312 </section>313 314 <!-- CTA Section -->315 <section class="py-16 px-4 bg-gradient-to-r from-primary-500 to-secondary-500 text-white">316 <div class="container mx-auto text-center">317 <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Give a Gift That Grows?</h2>318 <p class="text-lg mb-8 max-w-2xl mx-auto opacity-90">Start with as little as ₹500 and create lasting financial impact.</p>319 <button class="bg-white text-primary-500 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold shadow-lg transition duration-300 flex items-center justify-center mx-auto">320 <i data-feather="gift" class="mr-2"></i> Send Your First Gift321 </button>322 </div>323 </section>324 325 <!-- Footer -->326 <footer class="bg-gray-900 text-white py-12 px-4">327 <div class="container mx-auto">328 <div class="grid md:grid-cols-4 gap-8">329 <div>330 <div class="flex items-center space-x-2 mb-4">331 <i data-feather="gift" class="text-primary-500"></i>332 <span class="text-xl font-bold">FundFiesta</span>333 </div>334 <p class="text-gray-400 mb-4">Making financial gifting simple, secure, and special.</p>335 <div class="flex space-x-4">336 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>337 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>338 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>339 <a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>340 </div>341 </div>342 <div>343 <h4 class="font-bold text-lg mb-4">Quick Links</h4>344 <ul class="space-y-2">345 <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li>346 <li><a href="#" class="text-gray-400 hover:text-white">Fund Catalog</a></li>347 <li><a href="#" class="text-gray-400 hover:text-white">Redeem Gift</a></li>348 <li><a href="tracking.html" class="text-gray-400 hover:text-white">Track Gift</a></li>349</ul>350 </div>351 <div>352 <h4 class="font-bold text-lg mb-4">Company</h4>353 <ul class="space-y-2">354 <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>355 <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>356 <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>357 <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>358 </ul>359 </div>360 <div>361 <h4 class="font-bold text-lg mb-4">Legal</h4>362 <ul class="space-y-2">363 <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>364 <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>365 <li><a href="#" class="text-gray-400 hover:text-white">KYC & Compliance</a></li>366 <li><a href="#" class="text-gray-400 hover:text-white">Disclosures</a></li>367 </ul>368 </div>369 </div>370 <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">371 <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 FundFiesta. All rights reserved.</p>372 <p class="text-gray-500 text-sm">373 <em>Orders executed by licensed AMC partners. Platform does not hold investor funds.</em>374 </p>375 </div>376 </div>377 </footer>378 <script>379 feather.replace();380 381 // Gift Code Redemption Flow382 async function redeemGift() {383 const giftCode = document.getElementById('gift-code').value;384 const dob = document.getElementById('dob').value;385 386 try {387 const response = await fetch('/api/redeem-gift', {388 method: 'POST',389 headers: { 'Content-Type': 'application/json' },390 body: JSON.stringify({ 391 giftCode,392 recipientDob: dob,393 ipAddress: '' // Would be populated from request394 })395 });396 397 const data = await response.json();398 399 if (data.error) {400 alert(data.error);401 return;402 }403 404 if (data.requiresGuardian) {405 showGuardianForm();406 } else {407 startKycFlow(false);408 }409 } catch (err) {410 console.error(err);411 alert('Redemption failed. Please try again.');412 }413 }414 415 function showGuardianForm() {416 document.getElementById('guardian-section').classList.remove('hidden');417 }418 419 function startKycFlow(isGuardian) {420 // Initialize Digio/Signzy iframe421 const kycIframe = document.createElement('iframe');422 kycIframe.src = `https://kyc.provider.com?clientId=${process.env.KYC_CLIENT_ID}&flow=${isGuardian ? 'guardian' : 'individual'}`;423 document.getElementById('kyc-container').appendChild(kycIframe);424 425 // Listen for KYC completion message426 window.addEventListener('message', handleKycComplete);427 }428 429 function handleKycComplete(event) {430 if (event.origin !== process.env.KYC_PROVIDER_URL) return;431 432 if (event.data.status === 'success') {433 document.getElementById('kyc-success').classList.remove('hidden');434 setTimeout(() => {435 window.location.href = '/gift-success';436 }, 2000);437 }438 }439 440 // Create confetti effect441 function createConfetti() {442 const container = document.querySelector('.confetti-container');443 for (let i = 0; i < 50; i++) {444 const confetti = document.createElement('div');445 confetti.classList.add('confetti');446 confetti.style.left = Math.random() * 100 + 'vw';447 confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;448 container.appendChild(confetti);449 450 anime({451 targets: confetti,452 translateY: [0, -window.innerHeight],453 translateX: [0, Math.random() * 200 - 100],454 rotate: [0, Math.random() * 360],455 opacity: [1, 0],456 duration: 3000 + Math.random() * 2000,457 easing: 'easeOutQuint',458 complete: function() {459 confetti.remove();460 }461 });462 }463 }464 465 // Initialize Razorpay466 function initRazorpay() {467 const options = {468 key: process.env.RAZORPAY_KEY,469 amount: 1000, // 1000 = ₹10470 currency: 'INR',471 name: 'FundFiesta',472 description: 'Investment Gift',473 image: '/static/logo.png',474 handler: async function(response) {475 // Call backend to generate gift476 const res = await fetch('/api/generate-gift', {477 method: 'POST',478 headers: { 'Content-Type': 'application/json' },479 body: JSON.stringify({480 fundId: selectedFundId,481 amount: selectedAmount,482 buyerId: currentUserId,483 kycStatus: 'completed',484 recipientPhone: recipientPhone485 })486 });487 488 const data = await res.json();489 if (data.giftCode) {490 alert(`Gift created! Code: ${data.giftCode}`);491 createConfetti();492 }493 },494 prefill: {495 name: '',496 email: '',497 contact: ''498 },499 theme: {500 color: '#6366f1'501 }502 };503 const rzp = new Razorpay(options);504 document.querySelector('.pay-btn').onclick = function(e) {505 rzp.open();506 e.preventDefault();507 };508 }509 510 document.addEventListener('DOMContentLoaded', function() {511 initRazorpay();512 513 // Animate elements on scroll514 anime({515 targets: '.floating',516 translateY: [-10, 10],517 duration: 3000,518 direction: 'alternate',519 loop: true,520 easing: 'easeInOutSine'521 });522 });523 </script>524</body>525</html>526