landing-page-2
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grandekor Landing Page - Mobile Preview</title>
<!-- TikTok Pixel Base Code -->
<!-- TikTok Pixel Code Start -->
<script>
!function (w, d, t) {
w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(
var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js",o=n&&n.partner;ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script")
;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};
ttq.load('D5PFJCJC77UDCU1J2P9G');
ttq.page();
}(window, document, 'ttq');
</script>
<!-- TikTok Pixel Code End -->
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');
body { font-family: 'Inter', sans-serif; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.pb-safe {
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
@keyframes pulse-orange {
0% { box-shadow: 0 0 0 0 rgba(255,153,0,.7); }
70% { box-shadow: 0 0 0 10px rgba(255,153,0,0); }
100% { box-shadow: 0 0 0 0 rgba(255,153,0,0); }
}
.animate-pulse-btn { animation: pulse-orange 2s infinite; }
</style>
<div class="relative w-full max-w-[400px] bg-white min-h-screen rounded-[30px] shadow-2xl overflow-hidden border-[8px] border-gray-900 flex flex-col">
<!-- Top Banner -->
<div class="bg-red-700 text-white text-xs font-bold py-2 text-center">
🔥 Limited Time: Free Delivery + Fast Shipping
</div>
<!-- Scroll Area -->
<div class="flex-1 overflow-y-auto no-scrollbar pb-32">
<!-- Navbar -->
<nav class="px-5 py-4 border-b">
<div class="text-xl font-black">GRANDEKOR</div>
</nav>
<!-- Hero -->
<header class="px-5 pt-4 pb-6 text-center">
<h1 class="text-3xl font-extrabold leading-tight mb-2">
Easy Install in 20s<br>
<span class="text-red-600">No Drill & No Tools</span>
</h1>
<p class="text-gray-500 text-sm mb-4">
🇺🇸 US Patented Design | Renters Friendly
</p>
<!-- ✅ REAL VIDEO -->
<div class="relative w-full aspect-video rounded-xl overflow-hidden shadow-inner border mb-6">
<iframe ="" class="w-full h-full" src="https://www.youtube.com/embed/Xr80dnwtfko" frameborder="0" allowfullscreen=""></iframe>
</div>
<!-- CTA -->
<a href="https://www.amazon.com/dp/B0DK4X7CF2" ="" target="_blank" id="btnTopAmazon" class="block w-full bg-[#FF9900] text-gray-900 font-bold text-lg py-4 rounded-full shadow-lg animate-pulse-btn">
👉 Check Price on Amazon
</a>
<div class="mt-3 flex items-center justify-center gap-1 text-xs text-gray-500">
<svg class="w-3 h-3 text-blue-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></svg>
Secure Checkout via Amazon Prime
</div>
</header>
<!-- Reviews -->
<section class="bg-gray-50 py-6 px-5 border-t border-b border-gray-100">
<div class="flex justify-center mb-3 text-[#FFB400] text-xl tracking-widest">★★★★★</div>
<blockquote class="text-center text-gray-600 italic text-sm mb-4 leading-relaxed">
"I was skeptical about the 'no tools' claim, but wow! It literally took me 20 seconds. The blackout quality is amazing."
</blockquote>
<div class="flex items-center justify-center gap-3">
<img src="20260122-163139.jpg" alt="Reviewer" class="w-10 h-10 rounded-full border-2 border-white shadow-sm">
<div class="text-xs text-left">
<div class="font-bold text-gray-900">Emily R.</div>
<div class="text-green-600 font-medium text-[10px] flex items-center gap-1">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Verified Purchase
</div>
</div>
</div>
</section>
<!-- Detailed Comparison Section (VS) -->
<section class="px-4 py-8 bg-white">
<h2 class="text-center font-extrabold text-xl text-gray-900 mb-6">Why Choose Grandekor?</h2>
<div class="flex gap-2">
<!-- Bad Option (Old Style) - With Loser Label -->
<div class="flex-1 bg-red-50/50 border border-red-100 rounded-xl p-3 relative flex flex-col transform">
<!-- Loser Label -->
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-gray-500 text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider shadow-sm z-10">
Loser
</div>
<div class="text-center mb-4 border-b border-red-100 pb-2 mt-2">
<div class="text-2xl font-bold text-red-500">×</div>
<h3 class="font-bold text-gray-800 text-sm">Old Style</h3>
</div>
<!-- List Container -->
<ul class="space-y-4">
<li class="flex items-center gap-1 h-6">
<span class="text-red-500 text-xs shrink-0">❌</span>
<span class="text-[10px] text-gray-600 leading-tight">Hard to Install</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-red-500 text-xs shrink-0">❌</span>
<span class="text-[10px] text-gray-600 leading-tight">Drilling Needed</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-red-500 text-xs shrink-0">❌</span>
<span class="text-[10px] text-gray-600 leading-tight">Damages Walls</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-red-500 text-xs shrink-0">❌</span>
<span class="text-[10px] text-gray-600 leading-tight">Light Leaks</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-red-500 text-xs shrink-0">❌</span>
<span class="text-[10px] text-gray-600 leading-tight">Poor Privacy</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-red-500 text-xs shrink-0">❌</span>
<span class="text-[10px] text-gray-600 leading-tight">Expensive</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-red-500 text-xs shrink-0">❌</span>
<span class="text-[10px] text-gray-600 leading-tight">No noise reduction</span>
</li>
</ul>
</div>
<!-- Good Option (Grandekor) - With Winner Label -->
<div class="flex-1 bg-green-50/80 border-2 border-green-500 rounded-xl p-3 relative shadow-xl shadow-green-100 flex flex-col transform scale-[1.02]">
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-green-600 text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider shadow-sm z-10">
Winner
</div>
<div class="text-center mb-4 border-b border-green-200 pb-2 mt-2">
<div class="text-2xl font-bold text-green-600">✔</div>
<h3 class="font-bold text-gray-900 text-sm">Grandekor</h3>
</div>
<!-- List Container -->
<ul class="space-y-4">
<li class="flex items-center gap-1 h-6">
<span class="text-green-600 text-xs shrink-0 font-bold">✅</span>
<span class="text-[10px] font-bold text-gray-800 leading-tight">Easy Install</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-green-600 text-xs shrink-0 font-bold">✅</span>
<span class="text-[10px] font-bold text-gray-800 leading-tight">No Drilling</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-green-600 text-xs shrink-0 font-bold">✅</span>
<span class="text-[10px] font-bold text-gray-800 leading-tight">Damage Free</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-green-600 text-xs shrink-0 font-bold">✅</span>
<span class="text-[10px] font-bold text-gray-800 leading-tight">100% Blackout</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-green-600 text-xs shrink-0 font-bold">✅</span>
<span class="text-[10px] font-bold text-gray-800 leading-tight">Privacy Protect</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-green-600 text-xs shrink-0 font-bold">✅</span>
<span class="text-[10px] font-bold text-green-700 leading-tight bg-green-100 px-1 rounded">Affordable</span>
</li>
<li class="flex items-center gap-1 h-6">
<span class="text-green-600 text-xs shrink-0 font-bold">✅</span>
<span class="text-[10px] font-bold text-green-700 leading-tight">Reduce noise</span>
</li>
</ul>
</div>
</div>
</section>
<!-- Usage Scenarios Section (RESTORED with Text Overlays) -->
<section class="px-5 pb-8">
<h2 class="text-center font-bold text-lg text-gray-900 mb-6">Perfect for Every Space</h2>
<div class="flex flex-col gap-6">
<!-- Scene 1: Bedroom -->
<div class="relative w-full rounded-2xl overflow-hidden shadow-md group">
<img src="https://cdn.shopify.com/s/files/1/0126/0244/1792/files/bed-room.jpg" alt="Bedroom Blinds" class="w-full h-auto object-cover aspect-[4/3]">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 pt-10">
<span class="text-white text-lg font-bold flex items-center gap-2">
🛏️ Bedroom
</span>
<span class="text-gray-200 text-xs block mt-1">Total blackout for better sleep</span>
</div>
</div>
<!-- Scene 2: Living Room -->
<div class="relative w-full rounded-2xl overflow-hidden shadow-md group">
<img src="https://cdn.shopify.com/s/files/1/0126/0244/1792/files/living-room.jpg" alt="Living Room Blinds" class="w-full h-auto object-cover aspect-[4/3]">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 pt-10">
<span class="text-white text-lg font-bold flex items-center gap-2">
🛋️ Living Room
</span>
<span class="text-gray-200 text-xs block mt-1">Privacy & Light Control</span>
</div>
</div>
<!-- Scene 3: Kids Room -->
<div class="relative w-full rounded-2xl overflow-hidden shadow-md group">
<img src="https://cdn.shopify.com/s/files/1/0126/0244/1792/files/kids-room.jpg" alt="Kids Room Blinds" class="w-full h-auto object-cover aspect-[4/3]">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 pt-10">
<span class="text-white text-lg font-bold flex items-center gap-2">
🧸 Kids Room
</span>
<span class="text-gray-200 text-xs block mt-1">Cordless Safety Design</span>
</div>
</div>
<!-- Scene 4: Bathroom -->
<div class="relative w-full rounded-2xl overflow-hidden shadow-md group">
<img src="https://cdn.shopify.com/s/files/1/0126/0244/1792/files/bath-room.jpg" alt="Bathroom Blinds" class="w-full h-auto object-cover aspect-[4/3]">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 pt-10">
<span class="text-white text-lg font-bold flex items-center gap-2">
🚿 Bathroom
</span>
<span class="text-gray-200 text-xs block mt-1">Moisture Resistant & Privacy</span>
</div>
</div>
</div>
</section>
<!-- Bottom Spacer -->
<div class="h-10"></div>
</div>
<!-- Footer -->
<div class="fixed bottom-0 left-0 right-0 bg-white border-t px-5 py-4 pb-safe z-50">
<div class="flex justify-between items-center">
<div>
<div class="text-sm font-bold">Free Delivery</div>
<div class="text-[10px] text-green-600">In Stock</div>
</div>
<a href="https://www.amazon.com/dp/B0DK4X7CF2" ="" target="_blank" id="btnBottomAmazon" class="bg-[#FF9900] font-bold px-6 py-3 rounded-full">
Buy Now →
</a>
</div>
</div>
</div>
<script>
// 顶部 CTA
document.getElementById('btnTopAmazon')?.addEventListener('click', function () {
ttq.track('ViewContent', {
content_id: 'B0DK4X7CF2',
content_name: 'Grandekor No Drill Blackout Blinds',
page: 'landing',
value: 39.99,
currency: 'USD'
});
});
// 底部 CTA
document.getElementById('btnBottomAmazon')?.addEventListener('click', function () {
ttq.track('ViewContent', {
content_id: 'B0DK4X7CF2',
content_name: 'Grandekor No Drill Blackout Blinds',
page: 'landing',
value: 39.99,
currency: 'USD'
});
});
function playVideo() {
const video = document.getElementById('demoVideo');
const btn = document.getElementById('playBtn');
video.play();
btn.style.display = 'none';
}
</script>