Feat: Build bilingual landing page

This commit is contained in:
2025-10-04 10:27:45 -07:00
parent f0bbede5e3
commit 54cf22cde1

View File

@@ -1 +1,145 @@
# bit.comu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Acquire bit.xn--tckwe (bit.コム) — a premium Japanese .com IDN domain, ideal for tech-forward brands.">
<title>bit.xn--tckwe | bit.コム — Premium Domain for Sale</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script src="https://unpkg.com/alpinejs@3.13.7/dist/cdn.min.js" defer></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>[x-cloak]{display:none!important}</style>
<script>tailwind.config={theme:{extend:{fontFamily:{sans:["Inter","system-ui","sans-serif"]}}}}</script>
</head>
<body x-data="{lang:'en'}" class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 font-sans text-slate-100 antialiased">
<div class="absolute inset-0 -z-10 opacity-40">
<div class="absolute -left-32 top-10 h-72 w-72 rounded-full bg-emerald-500 blur-3xl"></div>
<div class="absolute bottom-0 right-0 h-80 w-80 rounded-full bg-cyan-500 blur-3xl"></div>
</div>
<header class="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 py-8">
<div class="flex items-center justify-between">
<div class="space-y-1">
<span class="text-xs uppercase tracking-[0.35em] text-emerald-300">Premium Domain Offering</span>
</div>
<div class="flex items-center gap-2 text-sm font-semibold text-slate-200">
<button @click="lang='en'" :class="lang==='en'?'bg-emerald-500 text-slate-950':'bg-slate-800/70 text-slate-200 hover:bg-slate-700/70'" class="rounded-full px-3 py-1 transition" aria-label="Switch to English">EN</button>
<button @click="lang='jp'" :class="lang==='jp'?'bg-emerald-500 text-slate-950':'bg-slate-800/70 text-slate-200 hover:bg-slate-700/70'" class="rounded-full px-3 py-1 transition" aria-label="日本語に切り替え">日本語</button>
</div>
</div>
</header>
<main class="mx-auto flex w-full max-w-5xl flex-col gap-16 px-6 pb-20">
<section class="rounded-3xl bg-slate-900/70 p-10 shadow-2xl shadow-emerald-500/10 backdrop-blur-xl">
<p class="text-sm uppercase tracking-[0.4em] text-emerald-300" x-show="lang==='en'" x-cloak>bit.xn--tckwe | bit.コム</p>
<p class="text-sm uppercase tracking-[0.4em] text-emerald-300" x-show="lang==='jp'" x-cloak>bit.xn--tckwe | bit.コム</p>
<h1 class="mt-4 text-4xl font-bold leading-tight sm:text-5xl" x-show="lang==='en'" x-cloak>Future-ready Japanese .com Identity</h1>
<h1 class="mt-4 text-4xl font-bold leading-tight sm:text-5xl" x-show="lang==='jp'" x-cloak>次世代の日本語 .com ブランドを先取り</h1>
<p class="mt-6 max-w-3xl text-lg text-slate-200" x-show="lang==='en'" x-cloak>Secure <strong>bit.xn--tckwe (bit.コム)</strong>, the Japanese Internationalized Domain Name equivalent of .com, crafted for ambitious Web3, fintech, and digital innovators who want instant trust across Japanese-speaking markets.</p>
<p class="mt-6 max-w-3xl text-lg text-slate-200" x-show="lang==='jp'" x-cloak><strong>bit.xn--tckwebit.コム)</strong>は、.com の日本語表記である gTLD を用いた国際化ドメイン。日本語圏への信頼感と世界最先端の Web3・フィンテック・デジタル領域でのブランド浸透を同時に叶えます。</p>
<div class="mt-8 flex flex-wrap items-center gap-4">
<a href="mailto:planetrenox@pm.me?subject=bit.xn--tckwe%20Domain%20Inquiry" class="inline-flex items-center gap-2 rounded-full bg-emerald-500 px-6 py-3 font-semibold text-slate-950 transition hover:bg-emerald-400">
<i data-lucide="send"></i>
<span x-show="lang==='en'" x-cloak>Inquire Now</span>
<span x-show="lang==='jp'" x-cloak>今すぐ問い合わせ</span>
</a>
<div class="flex flex-col gap-1 text-sm text-slate-300">
<span x-show="lang==='en'" x-cloak>Registrar: Name.com</span>
<span x-show="lang==='jp'" x-cloak>管理レジストラName.com</span>
<span>planetrenox@pm.me</span>
</div>
</div>
</section>
<section class="grid gap-6 lg:grid-cols-3">
<article class="rounded-2xl bg-slate-900/60 p-7 shadow-lg shadow-black/20 backdrop-blur">
<div class="flex items-center gap-3 text-emerald-300">
<i data-lucide="globe-2" class="h-6 w-6"></i>
<h2 class="text-lg font-semibold" x-show="lang==='en'" x-cloak>Native Appeal, Global Reach</h2>
<h2 class="text-lg font-semibold" x-show="lang==='jp'" x-cloak>日本語の親近感と世界への発信力</h2>
</div>
<p class="mt-4 text-sm text-slate-300" x-show="lang==='en'" x-cloak>Blend localized credibility with worldwide recognition—ideal for global brands tailoring products and services to Japan.</p>
<p class="mt-4 text-sm text-slate-300" x-show="lang==='jp'" x-cloak>日本市場に合わせた信頼感と、世界基準の認知度を両立。グローバル企業の日本展開にも最適です。</p>
</article>
<article class="rounded-2xl bg-slate-900/60 p-7 shadow-lg shadow-black/20 backdrop-blur">
<div class="flex items-center gap-3 text-emerald-300">
<i data-lucide="sparkles" class="h-6 w-6"></i>
<h2 class="text-lg font-semibold" x-show="lang==='en'" x-cloak>Memorable Micro-Brand</h2>
<h2 class="text-lg font-semibold" x-show="lang==='jp'" x-cloak>記憶に残るマイクロブランド</h2>
</div>
<p class="mt-4 text-sm text-slate-300" x-show="lang==='en'" x-cloak>“bit” signals precision and innovation—perfect for blockchain, AI, gaming, or digital asset ventures seeking a concise brand anchor.</p>
<p class="mt-4 text-sm text-slate-300" x-show="lang==='jp'" x-cloak>「bit」は精度と革新性の象徴。ブロックチェーン、AI、ゲーム、デジタル資産領域の屋台骨となるショートブランドです。</p>
</article>
<article class="rounded-2xl bg-slate-900/60 p-7 shadow-lg shadow-black/20 backdrop-blur">
<div class="flex items-center gap-3 text-emerald-300">
<i data-lucide="shield-check" class="h-6 w-6"></i>
<h2 class="text-lg font-semibold" x-show="lang==='en'" x-cloak>.コム Trust & Authority</h2>
<h2 class="text-lg font-semibold" x-show="lang==='jp'" x-cloak>.コムが生む信頼と権威</h2>
</div>
<p class="mt-4 text-sm text-slate-300" x-show="lang==='en'" x-cloak>The .コム namespace mirrors .coms global authority while speaking directly to Japanese audiences—instantly recognizable and SEO friendly.</p>
<p class="mt-4 text-sm text-slate-300" x-show="lang==='jp'" x-cloak>.コムは .com の権威と同等でありながら、日本語ユーザーにダイレクトに響く TLD。認知性と SEO の両面で優位です。</p>
</article>
</section>
<section class="grid gap-6 lg:grid-cols-2">
<article class="rounded-3xl bg-slate-900/60 p-8 shadow-lg shadow-black/20 backdrop-blur">
<div class="flex items-center gap-3 text-emerald-300">
<i data-lucide="bookmark-check" class="h-6 w-6"></i>
<h2 class="text-xl font-semibold" x-show="lang==='en'" x-cloak>About the .コム TLD (.xn--tckwe)</h2>
<h2 class="text-xl font-semibold" x-show="lang==='jp'" x-cloak>.コム(.xn--tckweTLD について</h2>
</div>
<p class="mt-4 text-sm text-slate-300" x-show="lang==='en'" x-cloak>The .コム gTLD, represented in Punycode as .xn--tckwe, is the official Japanese IDN counterpart to .com. It empowers brands to deliver globally recognized credibility in localized script, enhancing trust, memorability, and search engagement among Japanese-language users.</p>
<p class="mt-4 text-sm text-slate-300" x-show="lang==='jp'" x-cloak>.コムPunycode 表記:.xn--tckweは、.com の日本語 IDN 公式カウンターパートです。世界的な信用力を日本語表記で提示できるため、信頼性・想起性・検索接点を同時に高められます。</p>
</article>
<article class="rounded-3xl bg-slate-900/60 p-8 shadow-lg shadow-black/20 backdrop-blur">
<div class="flex items-center gap-3 text-emerald-300">
<i data-lucide="line-chart" class="h-6 w-6"></i>
<h2 class="text-xl font-semibold" x-show="lang==='en'" x-cloak>Strategic Market Advantage</h2>
<h2 class="text-xl font-semibold" x-show="lang==='jp'" x-cloak>市場での戦略的優位性</h2>
</div>
<ul class="mt-4 space-y-3 text-sm text-slate-300">
<li>
<span x-show="lang==='en'" x-cloak>✔ Aligns with Japans appetite for multilingual tech brands while standing out in crowded .com listings.</span>
<span x-show="lang==='jp'" x-cloak>✔ 多言語テックブランド需要の高い日本市場で、過密化する .com と差別化できます。</span>
</li>
<li>
<span x-show="lang==='en'" x-cloak>✔ Strengthens trust for financial, crypto, and security-centric ventures where precision matters.</span>
<span x-show="lang==='jp'" x-cloak>✔ 精度が求められる金融・暗号資産・セキュリティ領域で信頼感を強化。</span>
</li>
<li>
<span x-show="lang==='en'" x-cloak>✔ Ready for brand storytelling, microsites, or flagship product launches with cross-market resonance.</span>
<span x-show="lang==='jp'" x-cloak>✔ ブランドストーリー展開、マイクロサイト、旗艦プロダクトのローンチにも最適。</span>
</li>
</ul>
</article>
</section>
<section class="rounded-3xl bg-gradient-to-r from-emerald-500/20 via-slate-900/80 to-emerald-500/10 p-10 shadow-2xl shadow-emerald-500/20 backdrop-blur">
<div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
<div>
<h2 class="text-2xl font-semibold" x-show="lang==='en'" x-cloak>Investment Range</h2>
<h2 class="text-2xl font-semibold" x-show="lang==='jp'" x-cloak>ご提案価格帯</h2>
<p class="mt-4 text-lg text-emerald-200" x-show="lang==='en'" x-cloak><span class="text-3xl font-bold text-emerald-300">$500 $10,000 USD</span> depending on usage rights, transfer speed, and partnership scope.</p>
<p class="mt-4 text-lg text-emerald-200" x-show="lang==='jp'" x-cloak><span class="text-3xl font-bold text-emerald-300">$500$10,000 USD</span>(利用範囲・移管スピード・連携内容により変動)。</p>
</div>
<div class="space-y-4 rounded-2xl bg-slate-950/70 p-6 shadow-inner shadow-emerald-500/20">
<div class="flex items-center gap-3 text-emerald-300">
<i data-lucide="inbox" class="h-6 w-6"></i>
<h3 class="text-lg font-semibold" x-show="lang==='en'" x-cloak>Start the Conversation</h3>
<h3 class="text-lg font-semibold" x-show="lang==='jp'" x-cloak>お問い合わせはこちら</h3>
</div>
<p class="text-sm text-slate-300" x-show="lang==='en'" x-cloak>Share your intended project, timeline, and acquisition preferences to receive a tailored response within 24 hours.</p>
<p class="text-sm text-slate-300" x-show="lang==='jp'" x-cloak>計画概要・希望スケジュール・取得条件をお知らせください。24 時間以内に最適なご提案を差し上げます。</p>
<a href="mailto:planetrenox@pm.me?subject=bit.xn--tckwe%20Purchase%20Proposal" class="inline-flex items-center gap-2 rounded-full bg-emerald-500 px-5 py-2 text-sm font-semibold text-slate-950 transition hover:bg-emerald-400">
<i data-lucide="mail"></i>
<span>planetrenox@pm.me</span>
</a>
</div>
</div>
</section>
</main>
<footer class="mx-auto w-full max-w-5xl px-6 pb-10 text-xs text-slate-500">
<p x-show="lang==='en'" x-cloak>© <span x-text="new Date().getFullYear()"></span> bit.xn--tckwe / bit.コム — Exclusively listed via Name.com. All rights reserved.</p>
<p x-show="lang==='jp'" x-cloak>© <span x-text="new Date().getFullYear()"></span> bit.xn--tckwe / bit.コム — Name.com にて限定リスト掲載中。無断転載禁止。</p>
</footer>
<script>document.addEventListener("DOMContentLoaded",()=>lucide.createIcons());</script>
</body>
</html>