add thank you page, download page, payment page

This commit is contained in:
2026-07-21 22:07:36 +07:00
parent 72a9b3fea1
commit e0644ce110
19 changed files with 1497 additions and 1 deletions
+137
View File
@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G9G5HP50VK"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-G9G5HP50VK');</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Thank You for Your Purchase | INDOTALENT</title>
<meta name="description" content="Thank you for purchasing an Indotalent product. Your download link will be sent to your registered email address automatically." />
<meta name="robots" content="noindex, nofollow" />
<link rel="canonical" href="https://www.indotalent.com/thank-you.html" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%23f97316'/><text x='16' y='22' font-size='18' font-weight='bold' text-anchor='middle' fill='white'>I</text></svg>" />
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>tailwind.config={theme:{extend:{colors:{brand:{50:'#fff7ed',100:'#ffedd5',200:'#fed7aa',300:'#fdba74',400:'#fb923c',500:'#f97316',600:'#ea580c',700:'#c2410c',800:'#9a3412',900:'#7c2d12'}},fontFamily:{sans:['Inter','system-ui','-apple-system','sans-serif']}}}}</script>
<style>
[x-cloak]{display:none!important} html{scroll-behavior:smooth}
.nav-blur{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gradient-text{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);color:#fff;font-weight:600;border-radius:12px;padding:12px 24px;transition:all 0.2s;box-shadow:0 4px 14px -4px rgba(249,115,22,0.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(249,115,22,0.45)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-weight:600;border-radius:12px;padding:12px 24px;border:1px solid #e5e7eb;transition:all 0.2s}
.btn-secondary:hover{border-color:#f97316;color:#f97316}
.success-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#d1fae5 0%,#a7f3d0 100%);display:flex;align-items:center;justify-content:center;margin:0 auto}
.success-icon svg{width:36px;height:36px;color:#059669}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- NAVBAR -->
<nav class="fixed top-0 left-0 right-0 z-50 nav-blur bg-white/85 border-b border-gray-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 lg:h-18">
<a href="index.html" class="flex items-center gap-2.5"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-8 w-auto" /></a>
<div class="flex items-center gap-3">
<a href="index.html" class="btn-secondary text-sm py-2.5 px-5">Back to Home</a>
</div>
</div>
</div>
</nav>
<!-- THANK YOU MAIN -->
<section class="min-h-screen flex items-center justify-center pt-20 pb-16">
<div class="absolute inset-0 opacity-[0.015]" style="background-image:radial-gradient(circle at 1px 1px,#f97316 1px,transparent 0);background-size:40px 40px"></div>
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
<div id="thankYouCard" class="bg-white border border-gray-200 rounded-3xl shadow-lg p-8 sm:p-10 lg:p-12 text-center">
<!-- Success Icon -->
<div class="success-icon mb-6">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
<!-- Heading -->
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-4 tracking-tight">
Thank You for <span class="gradient-text">Your Purchase</span>
</h1>
<p class="text-gray-500 text-base sm:text-lg mb-8 max-w-lg mx-auto">
We truly appreciate your support. You're now part of the Indotalent community.
</p>
<!-- Divider -->
<div class="w-16 h-0.5 bg-gradient-to-r from-brand-400 to-brand-600 mx-auto mb-8"></div>
<!-- Info Section 1: Download Link -->
<div class="bg-brand-50/60 border border-brand-100 rounded-2xl p-6 sm:p-8 mb-6 text-left">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-brand-100 flex items-center justify-center shrink-0 mt-0.5">
<svg class="w-5 h-5 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</div>
<div>
<h2 class="text-lg font-semibold text-gray-900 mb-2">Download Link Sent Automatically</h2>
<p class="text-sm text-gray-600 leading-relaxed">
Your download link will be sent automatically to the email address you provided during checkout.
Please ensure that your email inbox is not full and that the email address is valid
so you don't miss the delivery.
</p>
</div>
</div>
</div>
<!-- Info Section 2: Contact Support -->
<div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 sm:p-8 mb-8 text-left">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-gray-200 flex items-center justify-center shrink-0 mt-0.5">
<svg class="w-5 h-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</div>
<div>
<h2 class="text-lg font-semibold text-gray-900 mb-2">Didn't Receive the Email?</h2>
<p class="text-sm text-gray-600 leading-relaxed">
If you haven't received your download link within a few minutes, please check your spam or promotions folder.
If it's still not there, feel free to contact us at
<a href="mailto:hi@indotalent.com" class="text-brand-600 hover:text-brand-700 font-semibold underline underline-offset-2">hi@indotalent.com</a>
and we will assist you promptly.
</p>
</div>
</div>
</div>
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-3">
<a href="index.html" class="btn-primary text-sm px-8 py-3.5 w-full sm:w-auto">Return to Homepage</a>
<a href="mailto:hi@indotalent.com" class="btn-secondary text-sm px-8 py-3.5 w-full sm:w-auto">Contact Support</a>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1"><a href="index.html" class="flex items-center gap-2 mb-3"><img src="img/logo-indotalent-dark.svg" alt="Indotalent" class="h-6 w-auto" /></a><p class="text-xs text-gray-500 leading-relaxed">Enterprise .NET 10 & Blazor complete source code. Back End + Front End in one VSA monolith. Thank you for your support.</p></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Products</h5><ul class="space-y-2"><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">CRM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">CMS</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">HRM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">SCM</a></li><li><a href="index.html#products" class="text-sm text-gray-500 hover:text-brand-500">WMS</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Resources</h5><ul class="space-y-2"><li><a href="https://github.com/go2ismail" target="_blank" rel="noopener" class="text-sm text-gray-500 hover:text-brand-500">GitHub</a></li><li><a href="blog.html" class="text-sm text-gray-500 hover:text-brand-500">Blog</a></li><li><a href="support.html" class="text-sm text-gray-500 hover:text-brand-500">Support</a></li></ul></div>
<div><h5 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Company</h5><ul class="space-y-2"><li><a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-brand-500">Privacy</a></li><li><a href="no-refund-policy.html" class="text-sm text-gray-500 hover:text-brand-500">No Refund</a></li><li><a href="license.html" class="text-sm text-gray-500 hover:text-brand-500">License</a></li><li><a href="mailto:hi@indotalent.com" class="text-sm text-gray-500 hover:text-brand-500">Contact</a></li></ul></div>
</div>
<div class="border-t border-gray-200 mt-8 pt-6 flex flex-col md:flex-row items-center justify-between gap-4"><p class="text-xs text-gray-500">&copy; 2024-2026 Indotalent. All rights reserved.</p><p class="text-xs text-gray-500">Built with <span class="text-brand-500">&hearts;</span> by go2ismail</p></div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded',function(){
gsap.registerPlugin(ScrollTrigger);
gsap.fromTo('#thankYouCard',{autoAlpha:0,y:40,scale:.98},{autoAlpha:1,y:0,scale:1,duration:.7,ease:'power4.out'});
});
</script>
</body>
</html>