Walrus blob · mainnet
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Virel Protocol</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
<style>
:root{
--color-bg:#1a000d;
--color-primary:#fb7185;
--color-accent:#f43f5e;
--color-text:#f1f5f9;
--color-text-muted:#94a3b8;
--color-surface:rgba(255,255,255,0.05);
--color-border:rgba(255,255,255,0.09);
--font-main:'Inter', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-main);line-height:1.6;overflow-x:hidden}
/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:.9rem 2rem;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.4);backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border)}
.logo{font-size:1.1rem;font-weight:800;color:var(--color-primary);text-decoration:none;letter-spacing:-.02em}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;transition:color .2s}
.nav-links a:hover{color:var(--color-text)}
.btn-wallet{padding:.5rem 1.25rem;border-radius:999px;background:var(--color-primary);color:#000;font-weight:700;font-size:.85rem;border:none;cursor:pointer;text-decoration:none;transition:opacity .2s}
.btn-wallet:hover{opacity:.85}
/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:7rem 2rem 4rem;position:relative;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.15;pointer-events:none}
.blob-a{width:700px;height:700px;background:var(--color-primary);top:-250px;left:-200px;animation:float 10s ease-in-out infinite}
.blob-b{width:600px;height:600px;background:var(--color-accent);bottom:-200px;right:-150px;animation:float 10s ease-in-out infinite 5s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-25px)}}
.hero-inner{position:relative;z-index:1;max-width:780px}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);font-size:.78rem;color:var(--color-text-muted);margin-bottom:1.25rem}
.badge em{color:var(--color-primary);font-style:normal}
h1{font-size:clamp(2.4rem,5.5vw,4.5rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:1.25rem}
h1 .accent{color:var(--color-primary)}
.hero-sub{font-size:1.1rem;color:var(--color-text-muted);max-width:560px;margin:0 auto 2.5rem}
.btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-p{padding:.85rem 2rem;border-radius:999px;background:var(--color-primary);color:#000;font-weight:700;font-size:.95rem;border:none;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.btn-s{padding:.85rem 2rem;border-radius:999px;background:transparent;color:var(--color-text);font-weight:600;font-size:.95rem;border:1px solid var(--color-border);cursor:pointer;text-decoration:none;transition:border-color .2s}
.btn-s:hover{border-color:var(--color-primary)}
/* STATS */
.stats{padding:2.5rem 2rem;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
.stats-row{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2rem;text-align:center}
.stat-val{font-size:2.2rem;font-weight:800;color:var(--color-primary);letter-spacing:-.02em}
.stat-lbl{font-size:.82rem;color:var(--color-text-muted);margin-top:.4rem}
/* FEATURES */
.features{padding:5rem 2rem}
.sec-hd{text-align:center;max-width:580px;margin:0 auto 3rem}
.sec-hd h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.6rem}
.sec-hd p{color:var(--color-text-muted)}
.cards{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem}
.card{padding:1.75rem;border-radius:1.25rem;border:1px solid var(--color-border);background:var(--color-surface);backdrop-filter:blur(10px);transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--color-primary);transform:translateY(-4px)}
.card-icon{font-size:1.875rem;margin-bottom:.875rem;line-height:1}
.card h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
.card p{font-size:.875rem;color:var(--color-text-muted);line-height:1.7}
/* TEAM */
.team{padding:5rem 2rem;background:linear-gradient(180deg,transparent,var(--color-surface),transparent)}
.team-grid{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.team-card{text-align:center;padding:2rem 1.5rem;border-radius:1.25rem;border:1px solid var(--color-border);background:var(--color-bg);transition:transform .3s,border-color .3s}
.team-card:hover{transform:translateY(-4px);border-color:var(--color-primary)}
.team-photo{width:90px;height:90px;border-radius:50%;margin:0 auto 1rem;overflow:hidden;border:2px solid var(--color-primary)}
.team-photo img{width:100%;height:100%;object-fit:cover}
.team-card h3{font-weight:700;font-size:1rem;margin-bottom:.25rem}
.team-card .role{color:var(--color-primary);font-size:.82rem;font-weight:600;margin-bottom:.75rem}
.team-card .bio{font-size:.83rem;color:var(--color-text-muted);line-height:1.6}
/* CTA */
.cta{padding:5rem 2rem;text-align:center}
.cta-box{max-width:680px;margin:0 auto;padding:3.5rem 2.5rem;border-radius:2rem;border:1px solid var(--color-border);background:var(--color-surface);backdrop-filter:blur(20px)}
.cta-box h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;margin-bottom:.75rem}
.cta-box p{color:var(--color-text-muted);margin-bottom:2rem}
/* FOOTER */
footer{padding:1.75rem 2rem;border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.foot-logo{font-weight:800;color:var(--color-primary);font-size:.95rem}
.socials{display:flex;gap:.75rem}
.socials a{width:34px;height:34px;border-radius:50%;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);text-decoration:none;font-size:.85rem;transition:all .2s}
.socials a:hover{border-color:var(--color-primary);color:var(--color-primary)}
.foot-copy{font-size:.78rem;color:var(--color-text-muted)}
@media(max-width:768px){.nav-links{display:none}.btns{flex-direction:column;align-items:center}footer{flex-direction:column;text-align:center}}
</style>
</head>
<body>
<nav>
<a class="logo" href="#hero">Virel Protocol</a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#cta">Get Started</a></li>
<li><a href="/about">About</a></li>
</ul>
<button id="sui-connect-btn" class="btn-wallet">Connect Wallet</button>
</nav>
<section id="hero" class="hero">
<div class="blob blob-a"></div>
<div class="blob blob-b"></div>
<div class="hero-inner">
<div class="badge">✦ <em>Web3 Protocol</em></div>
<h1>Virel Protocol<br><span class="accent">Lend. Trade. Stake. One Protocol.</span></h1>
<p class="hero-sub">Virel Protocol unifies lending, decentralized trading, and staking into one seamless DeFi ecosystem where your capital works harder. Say goodbye to platform hopping—manage all your yields from a single, intuitive dashboard.</p>
<div class="btns">
<a href="#cta" class="btn-p">Launch App</a>
<a href="#features" class="btn-s">Read Docs</a>
</div>
</div>
</section>
<div class="stats">
<div class="stats-row">
<div class="stat">
<div class="stat-val">$847M</div>
<div class="stat-lbl">Total Value Locked</div>
</div>
<div class="stat">
<div class="stat-val">142K</div>
<div class="stat-lbl">Active Users</div>
</div>
<div class="stat">
<div class="stat-val">$2.3B</div>
<div class="stat-lbl">Trading Volume (30d)</div>
</div>
<div class="stat">
<div class="stat-val">23.4%</div>
<div class="stat-lbl">Average APY</div>
</div></div>
</div>
<section id="features" class="features">
<div class="sec-hd">
<h2>Why Virel Protocol?</h2>
<p>Powerful tools built for the decentralized future</p>
</div>
<div class="cards">
<div class="card">
<div class="card-icon">💰</div>
<h3>Unified Lending</h3>
<p>Supply assets and earn competitive yields while maintaining full control. Our algorithmic rate engine ensures optimal returns across all market conditions.</p>
</div>
<div class="card">
<div class="card-icon">⚡</div>
<h3>Decentralized Trading</h3>
<p>Execute trades with minimal slippage and zero counterparty risk. Access deep liquidity pools powered by our native AMM mechanism.</p>
</div>
<div class="card">
<div class="card-icon">🔑</div>
<h3>Flexible Staking</h3>
<p>Stake your assets to earn governance rewards and protocol fees. Earn while you hold, with no lock-up periods required.</p>
</div>
<div class="card">
<div class="card-icon">🛡️</div>
<h3>Security First</h3>
<p>Multi-signature governance, audited smart contracts, and battle-tested infrastructure protect your assets. Full transparency with on-chain verification.</p>
</div></div>
</section>
<section id="team" class="team">
<div class="sec-hd">
<h2>Meet the Team</h2>
<p>The people building the future</p>
</div>
<div class="team-grid">
<div class="team-card">
<div class="team-photo"><img src="https://i.pravatar.cc/150?img=10" alt="Marcus Chen"></div>
<h3>Marcus Chen</h3>
<p class="role">Founder & CEO</p>
<p class="bio">Former Compound protocol architect with 8+ years in DeFi development. Led the design of multiple successful lending protocols generating $500M+ in user value.</p>
</div>
<div class="team-card">
<div class="team-photo"><img src="https://i.pravatar.cc/150?img=11" alt="Sarah Mitchell"></div>
<h3>Sarah Mitchell</h3>
<p class="role">Chief Technology Officer</p>
<p class="bio">Smart contract expert and auditor with Certora and OpenZeppelin background. Specialized in optimizing AMM mechanisms and cross-chain interoperability.</p>
</div>
<div class="team-card">
<div class="team-photo"><img src="https://i.pravatar.cc/150?img=12" alt="David Okafor"></div>
<h3>David Okafor</h3>
<p class="role">Head of Operations</p>
<p class="bio">Experienced DeFi operator who scaled two previous protocols to unicorn status. Manages partnerships, governance, and community engagement across 12 time zones.</p>
</div></div>
</section>
<section id="cta" class="cta">
<div class="cta-box">
<h2>Ready to get started?</h2>
<p>Join thousands already using Virel Protocol</p>
<div class="btns">
<a href="#" class="btn-p">Launch App</a>
<a href="#" class="btn-s">Read Docs</a>
</div>
</div>
</section>
<footer>
<span class="foot-logo">Virel Protocol</span>
<div class="socials">
<a href="https://twitter.com/virelprotocol" target="_blank"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a>
<a href="https://discord.gg/virelprotocol" target="_blank"><i class="fab fa-discord"></i></a>
<a href="https://t.me/virelprotocol" target="_blank"><i class="fab fa-telegram"></i></a>
</div>
<span class="foot-copy">© 2025 Virel Protocol. All rights reserved.</span>
</footer>
<script type="module">
import{getWallets}from'https://esm.sh/@wallet-standard/core@1.0.3';
document.addEventListener('DOMContentLoaded',()=>{
const btn=document.getElementById('sui-connect-btn');
if(!btn)return;
btn.addEventListener('click',async()=>{
try{
const wallets=getWallets().get();
const w=wallets.find(x=>x.chains&&x.chains.some(c=>c.startsWith('sui:')));
if(!w){btn.textContent='Install Sui Wallet';window.open('https://chrome.google.com/webstore/detail/sui-wallet/opcgpfmipidbgpenhmajoajpbobppdil','_blank');return;}
btn.textContent='Connecting…';
const r=await w.features['standard:connect'].connect();
const a=r.accounts[0];
if(a){btn.textContent=a.address.slice(0,6)+'…'+a.address.slice(-4);}
}catch(e){btn.textContent='Connect Wallet';}
});
});
</script>
</body></html>On-chain registration not yet visible.
The aggregator served this blob, but we couldn't locate a matching BlobRegistered event in our scan window. It may not be certified yet, or live further back than we paged.
Lifecycle data is unavailable until the blob registration is visible on-chain.