butter-kanglam-content-pack/index-backup/index.html

63 lines
25 KiB
HTML
Raw Normal View History

2026-02-09 14:34:15 +00:00
<!DOCTYPE html><html lang="en" class="scroll-smooth"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro"><title>Butterbox - App Distribution Platform</title><meta name="description" content="Discover and download amazing apps and games. Your trusted app distribution platform with curated collections and top-rated applications."><meta name="keywords" content="apps, games, mobile apps, app store, download apps, app distribution"><meta property="og:title" content="Butterbox - App Distribution Platform"><meta property="og:description" content="Discover and download amazing apps and games. Your trusted app distribution platform."><meta property="og:type" content="website"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Butterbox - App Distribution Platform"><meta name="twitter:description" content="Discover and download amazing apps and games. Your trusted app distribution platform."><link rel="stylesheet" href="/_astro/index-backup.Bg9JHEqh.css"></head> <body class="bg-gray-50 min-h-screen"> <!-- <Navbar/> --> <main class="bg-gradient-to-b from-blue-950 to-blue-900"> <!-- <section class="bg-blue-500 bg-[url('border.svg')] bg-cover bg-center bg-blend-multiply w-full bg-fixed" > --><section class=" bg-gradient-to-br from-blue-950 to-blue-400 bg-blend-multiply mb-5"> <div class="container mx-auto px-6 pt-10 md:pt-12 lg:p-12 "> <div class="rounded-lg flex items-center justify-center my-5"> <div class="flex items-center space-x-4"> <div class="flex-shrink-0"> <a href="#" class="flex items-center space-x-2"> <div class="w-12 h-12 rounded-lg flex items-center justify-center"> <!-- <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 178.3 167.9" >
<polygon class="st0 " points="11.5 8.9 109 159.9 171.5 159.9 74 8.9 11.5 8.9"/>
<polygon class="st0" points="169.5 8.9 116.5 8.9 169.5 90.9 169.5 8.9"/>
<path class="st0" d="M13,77.9c-1.4.2.5,1.3.5,1.5.9,26.8-.7,53.7,0,80.5h52L14.5,77.9h-1.5Z"/>
</svg> --> <img src="graphics/logo.svg" alt=""> </div> <span class="text-4xl text-white font-monlam">མཉེན་མཛོད།</span> </a> </div> </div> </div> <div class="text-center mb-12"> <!-- <h1 class="text-2xl md:text-4xl text-blue-100 mb-4 font-monlam">
ཡར་རྒྱས་ལྡན་པའི་ཉེར་མཁོ་བརྙན་རིས་རྙེད་པ།
</h1> --> <!-- <p class="text-xl text-blue-300 mb-8 max-w-2xl mx-auto">
Find the perfect Apps for your device. Download from our curated collection.
</p> --> </div> <div class="flex justify-center "> <!-- <a href="#menu" class="text-xl font-bold text-blue-500 bg-white px-10 py-3 rounded-full shadow-md border-2 border-blue-400">EXPLORE</a> --> </div> </div> <div class="relative mx-auto w-full items-baseline h-10" style="background-image:url(graphics/border.svg)"></div> </section> <section class="py-8 bg-white border-b border-gray-200"> <div class="container mx-auto px-6"> <div class="flex flex-wrap gap-2 justify-center md:justify-start text-md"> <button class="tab-btn px-4 py-2 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 transition-colors" data-tab="all">
All
</button> <button class="tab-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition-colors" data-tab="games">
Communication
</button> <button class="tab-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition-colors" data-tab="apps">
VPN
</button> <button class="tab-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition-colors" data-tab="movies">
Browsers
</button> <button class="tab-btn px-4 py-2 bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition-colors" data-tab="books">
Others
</button> </div> </div> </section> <section class="py-16 bg-gray-50"> <div class="container mx-auto px-6"> <div class="flex items-center justify-between mb-8"> <h2 class="text-3xl font-bold text-gray-900" id="tab-title">All Apps</h2> <a href="#" class="text-blue-600 hover:text-blue-700 font-medium">See all</a> </div> <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-6" id="tab-content"> <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 p-4"> <div class="flex items-center"> <div class="w-20 h-20 bg-gray-200 rounded-lg flex items-center justify-center mr-4"> <img src="icons/dhung.jpg" alt="WhatsApp" class="w-20 h-20 rounded-lg object-cover"> </div> <div class="flex-1"> <h3 class="font-semibold text-gray-900">WhatsApp</h3> <p class="text-sm text-gray-600">WhatsApp Inc.</p> <p class="text-xs text-blue-600">Communication</p> <div class="flex items-center mt-1"> <div class="flex text-yellow-400"> <svg key="0" class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg><svg key="1" class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg><svg key="2" class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg><svg key="3" class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg><svg key="4" class="w-3 h-3 text-gray-300" fill="currentColor" viewBox="0 0 20 20"> <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path> </svg> </div> <span class="ml-1 text-xs text-gray-600">4.3</span> </div> </div> <div class="text-right"> <span class="text-xs text-gray-500">5B+</span> <button class="block mt-1 text-blue-600 hover:text-blue-700 text-sm font-medium">Install</button> </div> </div> </div><div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 p-4"> <div class="flex items-center"> <div class="w-20 h-20 bg-gray-200 rounded-lg flex items-center justify-center mr-4"> <img src="icons/book.png" alt="Instagram" class="w-20 h-20 rounded-lg object-cover"> </div> <div class="flex-1"> <h3 class="font-semibold text-gray-900">Instagram</h3> <p class="text-sm text-gray-600">Meta</p> <p class="text-xs text-blue-600">Social</p> <div class="flex items-center mt-1"> <div class="flex text-yellow-400"> <svg key="0" class="w-3 h-3 text-yellow-400" fill="currentColor
"This app has revolutionized how we manage our daily tasks. The intuitive interface and powerful features make it a must-have for productivity enthusiasts."
</p> <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition font-medium">
Install Now
</button> </div> <div class="md:w-1/2 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center"> <div class="text-center text-white p-8"> <div class="w-32 h-32 bg-white bg-opacity-20 rounded-3xl flex items-center justify-center mx-auto mb-4"> <img src="icons/dhung.jpg" alt="App Preview" class="w-24 h-24 rounded-2xl object-cover"> </div> <h4 class="text-xl font-bold mb-2">Featured App</h4> <p class="text-blue-100">Download now and experience the difference</p> </div> </div> </div> </div> </div> </div> </section> </main> <footer class="bg-gray-900 text-white"> <div class="container mx-auto px-6 py-12"> <div class="grid grid-cols-1 md:grid-cols-1 gap-8"> <!-- Brand Section --> <div class="col-span-1 md:col-span-2 mx-auto "> <div class="flex items-center justify-center space-x-2 mb-4 w-full"> <div class="w-10 h-10 rounded-lg flex items-center justify-center"> <!-- <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 178.3 167.9">
<defs>
<style>
.st0 {
fill: #ededed;
}
</style>
</defs>
<polygon class="st0" points="11.5 8.9 109 159.9 171.5 159.9 74 8.9 11.5 8.9"/>
<polygon class="st0" points="169.5 8.9 116.5 8.9 169.5 90.9 169.5 8.9"/>
<path class="st0" d="M13,77.9c-1.4.2.5,1.3.5,1.5.9,26.8-.7,53.7,0,80.5h52L14.5,77.9h-1.5Z"/>
</svg> --> <!-- <img src="graphics/logo.svg" alt=""> --> </div> <!-- <span class="text-xl text-white font-monlam">མཉེན་མཛོད།</span> --> </div> <p class="text-gray-400 mb-6 max-w-md text-center font-monlam">གསང་རྒྱར་དམིགས་པའི་མཉེན་ཆས་དང་ལག་ཆ་གཞན་དག་དྲ་རྒྱ་མེད་རུང་ཕབ་ལེན་བྱེད་ཐུབ།</p> <!-- <div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-white transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001.012.001z"/>
</svg>
</a>
</div> --> </div> <!-- Quick Links --> <!-- <div>
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
</ul>
</div> --> <!-- Legal --> <!-- <div>
<h3 class="text-lg font-semibold mb-4">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
</ul>
</div> --> </div> </div> </footer> <script type="module">document.addEventListener("DOMContentLoaded",function(){const t=document.getElementById("menu-btn"),n=document.getElementById("mobile-menu"),e=document.getElementById("menu-icon");t&&n&&e&&t.addEventListener("click",function(){n.classList.toggle("hidden"),n.classList.contains("hidden")?e.innerHTML='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>':e.innerHTML='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>'})});</script> </body> </html> <script type="module" src="/_astro/index-backup.astro_astro_type_script_index_0_lang.DnGEx4yE.js"></script>