|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WithDogJoint - The Paw-some Crypto</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #FF9F1C; |
|
|
--secondary: #2EC4B6; |
|
|
--dark: #011627; |
|
|
--light: #FDFFFC; |
|
|
--accent: #E71D36; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: var(--light); |
|
|
color: var(--dark); |
|
|
} |
|
|
|
|
|
.dog-paw { |
|
|
position: relative; |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
} |
|
|
|
|
|
.dog-paw::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
background-color: var(--primary); |
|
|
border-radius: 50%; |
|
|
top: 0; |
|
|
left: 5px; |
|
|
} |
|
|
|
|
|
.dog-paw::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
background-color: var(--primary); |
|
|
border-radius: 50%; |
|
|
bottom: 0; |
|
|
} |
|
|
|
|
|
.dog-paw::after:nth-child(1) { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.dog-paw::after:nth-child(2) { |
|
|
left: 11px; |
|
|
} |
|
|
|
|
|
.dog-paw::after:nth-child(3) { |
|
|
right: 0; |
|
|
} |
|
|
|
|
|
.coin-spin { |
|
|
animation: spin 5s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotateY(0deg); } |
|
|
100% { transform: rotateY(360deg); } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.btn-glow:hover { |
|
|
box-shadow: 0 0 15px var(--primary); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<div class="dog-paw mr-2"></div> |
|
|
<span class="text-xl font-bold text-gray-900">With<span class="text-orange-500">Dog</span>Joint</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#home" class="text-gray-900 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium">Home</a> |
|
|
<a href="#about" class="text-gray-900 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium">About</a> |
|
|
<a href="#tokenomics" class="text-gray-900 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium">Tokenomics</a> |
|
|
<a href="#roadmap" class="text-gray-900 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium">Roadmap</a> |
|
|
<a href="#community" class="text-gray-900 hover:text-orange-500 px-3 py-2 rounded-md text-sm font-medium">Community</a> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300 btn-glow"> |
|
|
Buy Now |
|
|
</button> |
|
|
<button class="md:hidden ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-white to-orange-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="lg:flex lg:items-center lg:justify-between"> |
|
|
<div class="lg:w-1/2"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6"> |
|
|
The <span class="text-orange-500">Paw-some</span> Crypto for Dog Lovers |
|
|
</h1> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
WithDogJoint is more than just a meme coin - it's a movement bringing together crypto enthusiasts and dog lovers worldwide. Join our pack today! |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<button class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-full font-medium transition duration-300 btn-glow flex items-center justify-center"> |
|
|
<i class="fas fa-bone mr-2"></i> Buy $WDJ |
|
|
</button> |
|
|
<button class="border-2 border-orange-500 text-orange-500 hover:bg-orange-50 px-6 py-3 rounded-full font-medium transition duration-300 flex items-center justify-center"> |
|
|
<i class="fas fa-paw mr-2"></i> Learn More |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-10 flex items-center space-x-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt=""> |
|
|
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/22.jpg" alt=""> |
|
|
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/33.jpg" alt=""> |
|
|
</div> |
|
|
<span class="ml-3 text-sm text-gray-600">10K+ Holders</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-dog text-orange-500 mr-2"></i> |
|
|
<span class="text-sm text-gray-600">50+ Dog Charities Supported</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 mt-10 lg:mt-0 flex justify-center"> |
|
|
<div class="relative w-64 h-64 sm:w-80 sm:h-80"> |
|
|
<img src="https://img.icons8.com/color/96/000000/dog.png" alt="WithDogJoint Coin" class="w-full h-full object-contain coin-spin floating"> |
|
|
<div class="absolute -bottom-6 -right-6 bg-orange-500 text-white rounded-full p-4 shadow-xl"> |
|
|
<i class="fas fa-bone text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> |
|
|
<span class="text-orange-500">Woof!</span> What's WithDogJoint? |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
WithDogJoint is a community-driven cryptocurrency that combines the fun of meme coins with real utility for dog lovers and their furry friends. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-3 gap-10"> |
|
|
<div class="bg-orange-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-donate text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Charity Focused</h3> |
|
|
<p class="text-gray-600"> |
|
|
5% of all transactions go directly to dog shelters and animal welfare organizations worldwide. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-orange-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-users text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Community Powered</h3> |
|
|
<p class="text-gray-600"> |
|
|
Our holders decide which charities to support through monthly community votes. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-orange-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-shield-alt text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Safe & Secure</h3> |
|
|
<p class="text-gray-600"> |
|
|
Fully audited smart contract with locked liquidity and renounced ownership. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-16 bg-gradient-to-r from-orange-500 to-orange-400 rounded-2xl p-10 text-white"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-2/3 mb-8 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold mb-4">Join Our Pack Today!</h3> |
|
|
<p class="mb-6"> |
|
|
Every WithDogJoint holder becomes part of our growing community of dog lovers making a difference in the lives of our furry friends. |
|
|
</p> |
|
|
<button class="bg-white text-orange-500 hover:bg-gray-100 px-6 py-3 rounded-full font-medium transition duration-300"> |
|
|
<i class="fas fa-dog mr-2"></i> Become a Holder |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/3 flex justify-center"> |
|
|
<img src="https://img.icons8.com/color/96/000000/dog-heart.png" alt="Dog Love" class="w-32 h-32 floating"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="tokenomics" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> |
|
|
<span class="text-orange-500">Bone-a-fide</span> Tokenomics |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Our carefully designed tokenomics ensure sustainability and growth while supporting our mission. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-10 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-6">Token Distribution</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700 font-medium">Charity Wallet</span> |
|
|
<span class="text-gray-700">5%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-orange-500 h-2.5 rounded-full" style="width: 5%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700 font-medium">Marketing</span> |
|
|
<span class="text-gray-700">4%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-orange-400 h-2.5 rounded-full" style="width: 4%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700 font-medium">Liquidity</span> |
|
|
<span class="text-gray-700">3%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-orange-300 h-2.5 rounded-full" style="width: 3%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700 font-medium">Holders Rewards</span> |
|
|
<span class="text-gray-700">2%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-orange-200 h-2.5 rounded-full" style="width: 2%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-gray-700 font-medium">Burn</span> |
|
|
<span class="text-gray-700">1%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-orange-100 h-2.5 rounded-full" style="width: 1%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-8 rounded-xl shadow-sm"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-6">Transaction Taxes</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-paw text-orange-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Buy Tax: 5%</h4> |
|
|
<p class="text-gray-600 text-sm">3% Charity, 1% Marketing, 1% Liquidity</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-bone text-orange-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Sell Tax: 10%</h4> |
|
|
<p class="text-gray-600 text-sm">5% Charity, 2% Marketing, 2% Liquidity, 1% Burn</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-exchange-alt text-orange-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Max Wallet: 2%</h4> |
|
|
<p class="text-gray-600 text-sm">Prevents whale manipulation</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-16 bg-white rounded-2xl p-10 shadow-md"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Contract Address</h3> |
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<code class="text-gray-800 font-mono text-sm truncate">0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7</code> |
|
|
<button class="ml-2 text-orange-500 hover:text-orange-600"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<button class="flex items-center bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full text-sm font-medium"> |
|
|
<i class="fab fa-ethereum mr-2"></i> Etherscan |
|
|
</button> |
|
|
<button class="flex items-center bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full text-sm font-medium"> |
|
|
<i class="fas fa-file-contract mr-2"></i> Audit |
|
|
</button> |
|
|
<button class="flex items-center bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full text-sm font-medium"> |
|
|
<i class="fas fa-lock mr-2"></i> Locked LP |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="bg-orange-100 p-6 rounded-xl"> |
|
|
<div class="text-center"> |
|
|
<div class="text-orange-500 text-5xl font-bold mb-2">1B</div> |
|
|
<div class="text-gray-700 font-medium">Total Supply</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="roadmap" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> |
|
|
Our <span class="text-orange-500">Tail</span> of Progress |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
From humble beginnings to changing the world, one dog at a time. |
|
|
</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
|
|
|
<div class="hidden md:block absolute left-1/2 h-full w-1 bg-orange-200 transform -translate-x-1/2"></div> |
|
|
|
|
|
|
|
|
<div class="space-y-8 md:space-y-16"> |
|
|
|
|
|
<div class="relative md:flex justify-center"> |
|
|
<div class="md:w-1/2 md:pr-16 md:text-right mb-4 md:mb-0"> |
|
|
<div class="bg-orange-500 text-white p-4 rounded-xl shadow-lg inline-block"> |
|
|
<h3 class="text-xl font-bold">Phase 1: Puppy Steps</h3> |
|
|
<p class="text-orange-100">Q1 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block absolute left-1/2 w-6 h-6 bg-orange-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> |
|
|
<div class="md:w-1/2 md:pl-16"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm"> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Token creation & smart contract deployment</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Website launch & social media setup</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>First charity donation to local dog shelter</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative md:flex justify-center"> |
|
|
<div class="md:w-1/2 md:pr-16 md:text-right mb-4 md:mb-0 order-2"> |
|
|
<div class="bg-orange-500 text-white p-4 rounded-xl shadow-lg inline-block"> |
|
|
<h3 class="text-xl font-bold">Phase 2: Growing Paws</h3> |
|
|
<p class="text-orange-100">Q2 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block absolute left-1/2 w-6 h-6 bg-orange-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> |
|
|
<div class="md:w-1/2 md:pl-16 order-1"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm"> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>CEX listings & marketing campaigns</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Community voting system implementation</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
|
|
<span>Partnership with 5+ animal charities</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative md:flex justify-center"> |
|
|
<div class="md:w-1/2 md:pr-16 md:text-right mb-4 md:mb-0"> |
|
|
<div class="bg-orange-500 text-white p-4 rounded-xl shadow-lg inline-block"> |
|
|
<h3 class="text-xl font-bold">Phase 3: Barking Loud</h3> |
|
|
<p class="text-orange-100">Q3 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block absolute left-1/2 w-6 h-6 bg-orange-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> |
|
|
<div class="md:w-1/2 md:pl-16"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm"> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-spinner text-orange-500 mt-1 mr-2"></i> |
|
|
<span>NFT collection launch (Dog-themed)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-spinner text-orange-500 mt-1 mr-2"></i> |
|
|
<span>Merchandise store with 20% to charity</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-spinner text-orange-500 mt-1 mr-2"></i> |
|
|
<span>Mobile app development start</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative md:flex justify-center"> |
|
|
<div class="md:w-1/2 md:pr-16 md:text-right mb-4 md:mb-0 order-2"> |
|
|
<div class="bg-orange-500 text-white p-4 rounded-xl shadow-lg inline-block"> |
|
|
<h3 class="text-xl font-bold">Phase 4: Alpha Dog</h3> |
|
|
<p class="text-orange-100">Q4 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block absolute left-1/2 w-6 h-6 bg-orange-500 rounded-full border-4 border-white transform -translate-x-1/2"></div> |
|
|
<div class="md:w-1/2 md:pl-16 order-1"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-sm"> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li class="flex items-start"> |
|
|
<i class="far fa-circle text-gray-400 mt-1 mr-2"></i> |
|
|
<span>Mobile app launch with wallet integration</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="far fa-circle text-gray-400 mt-1 mr-2"></i> |
|
|
<span>Top 10 CEX listing</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="far fa-circle text-gray-400 mt-1 mr-2"></i> |
|
|
<span>$1M+ donated to dog charities</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="community" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> |
|
|
Join Our <span class="text-orange-500">Pack</span> |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Our community is the heart and soul of WithDogJoint. Come bark with us! |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16"> |
|
|
<a href="#" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 text-center"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fab fa-telegram text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2">Telegram</h3> |
|
|
<p class="text-gray-600 text-sm">Join our active community chat</p> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 text-center"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fab fa-twitter text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2">Twitter</h3> |
|
|
<p class="text-gray-600 text-sm">Follow for updates and memes</p> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 text-center"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fab fa-discord text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2">Discord</h3> |
|
|
<p class="text-gray-600 text-sm">Voice chats and events</p> |
|
|
</a> |
|
|
<a href="#" class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300 text-center"> |
|
|
<div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fab fa-instagram text-orange-500 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2">Instagram</h3> |
|
|
<p class="text-gray-600 text-sm">Dog pics and charity updates</p> |
|
|
</a> |
|
|
</div> |
|
|
<div class="bg-white rounded-2xl p-10 shadow-md"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Charity Spotlight</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Each month, our community votes on which dog charity to support. Here's our current featured charity: |
|
|
</p> |
|
|
<div class="bg-orange-50 p-6 rounded-lg"> |
|
|
<div class="flex items-start"> |
|
|
<img src="https://img.icons8.com/color/96/000000/dog-house.png" alt="Dog Shelter" class="w-16 h-16 mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Paws for Hope Foundation</h4> |
|
|
<p class="text-gray-600 text-sm mb-2">Rescuing and rehabilitating abandoned dogs since 2010</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-orange-500 h-2.5 rounded-full" style="width: 75%"></div> |
|
|
</div> |
|
|
<p class="text-orange-500 text-sm mt-1">$7,500 of $10,000 raised</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-6 bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-full font-medium transition duration-300"> |
|
|
<i class="fas fa-heart mr-2"></i> Donate Now |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-gray-100 p-6 rounded-xl"> |
|
|
<h4 class="font-bold text-gray-900 mb-4 text-center">Recent Donations</h4> |
|
|
<div class="space-y-4 max-h-64 overflow-y-auto pr-2"> |
|
|
<div class="flex items-center bg-white p-3 rounded-lg shadow-sm"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Donor" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<p class="font-medium text-gray-900">Sarah J.</p> |
|
|
<p class="text-gray-600 text-sm">Donated $250</p> |
|
|
</div> |
|
|
<div class="ml-auto text-orange-500"> |
|
|
<i class="fas fa-dog"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center bg-white p-3 rounded-lg shadow-sm"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Donor" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<p class="font-medium text-gray-900">Michael T.</p> |
|
|
<p class="text-gray-600 text-sm">Donated $100</p> |
|
|
</div> |
|
|
<div class="ml-auto text-orange-500"> |
|
|
<i class="fas fa-dog"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center bg-white p-3 rounded-lg shadow-sm"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Donor" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<p class="font-medium text-gray-900">Emma L.</p> |
|
|
<p class="text-gray-600 text-sm">Donated $500</p> |
|
|
</div> |
|
|
<div class="ml-auto text-orange-500"> |
|
|
<i class="fas fa-dog"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center bg-white p-3 rounded-lg shadow-sm"> |
|
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Donor" class="w-10 h-10 rounded-full mr-3"> |
|
|
<div> |
|
|
<p class="font-medium text-gray-900">David K.</p> |
|
|
<p class="text-gray-600 text-sm">Donated $150</p> |
|
|
</div> |
|
|
<div class="ml-auto text-orange-500"> |
|
|
<i class="fas fa-dog"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4"> |
|
|
<span class="text-orange-500">Frequently</span> Asked Questions |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Got questions? We've got answers. If you can't find what you're looking for, join our community and ask! |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> |
|
|
<i class="fas fa-paw text-orange-500 mr-3"></i> What is WithDogJoint? |
|
|
</h3> |
|
|
<p class="text-gray-600"> |
|
|
WithDogJoint is a community-driven cryptocurrency token that combines the fun of meme coins with real utility by supporting dog charities worldwide. We're more than just a token - we're a movement for dog lovers. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> |
|
|
<i class="fas fa-bone text-orange-500 mr-3"></i> How do I buy WithDogJoint? |
|
|
</h3> |
|
|
<p class="text-gray-600"> |
|
|
You can purchase WDJ tokens on PancakeSwap (or other DEXs we're listed on). Connect your wallet, swap BNB/ETH for WDJ, and you're part of the pack! Always ensure you're using the correct contract address. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> |
|
|
<i class="fas fa-hand-holding-heart text-orange-500 mr-3"></i> How are charities selected? |
|
|
</h3> |
|
|
<p class="text-gray-600"> |
|
|
Our community votes monthly on which dog charities to support. We focus on organizations with transparent operations that directly help dogs in need. Suggestions can be submitted through our Discord. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-6 rounded-xl"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center"> |
|
|
<i class="fas fa-chart-line text-orange-500 mr-3"></i> What's the tokenomics? |
|
|
</h3> |
|
|
<p class="text-gray-600"> |
|
|
WithDogJoint has a 5% buy tax and 10% sell tax that funds charity, marketing, liquidity, and burns. Total supply is 1 billion tokens with anti-whale mechanisms to prevent manipulation. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid md:grid-cols-4 gap-10"> |
|
|
<div> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="dog-paw mr-2"></div> |
|
|
<span class="text-xl font-bold">With<span class="text-orange-500">Dog</span>Joint</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
The paw-some cryptocurrency for dog lovers making a difference in the world. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-orange-500"> |
|
|
<i class="fab fa-telegram text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-orange-500"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-orange-500"> |
|
|
<i class="fab fa-discord text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-orange-500"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Quick Links</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-orange-500 transition duration-300">Home</a></li> |
|
|
<li><a href="#about" class="text-gray-400 hover:text-orange-500 transition duration-300">About</a></li> |
|
|
<li><a href="#tokenomics" class="text-gray-400 hover:text-orange-500 transition duration-300">Tokenomics</a></li> |
|
|
<li><a href="#roadmap" class="text-gray-400 hover:text-orange-500 transition duration-300">Roadmap</a></li> |
|
|
<li><a href="#community" class="text-gray-400 hover:text-orange-500 transition duration-300">Community</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Resources</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">Whitepaper</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">Audit Report</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">How to Buy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">Charity Partners</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-orange-500 transition duration-300">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Newsletter</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Stay updated with the latest WithDogJoint news and charity initiatives. |
|
|
</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> |
|
|
<button class="bg-orange-500 hover:bg-orange-600 px-4 py-2 rounded-r-lg transition duration-300"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 text-sm mb-4 md:mb-0"> |
|
|
© 2023 WithDogJoint. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-orange-500 text-sm">Terms of Service</a> |
|
|
<a href="#" class="text-gray-500 hover:text-orange-500 text-sm">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-500 hover:text-orange-500 text-sm">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="backToTop" class="fixed bottom-8 right-8 bg-orange-500 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition duration-300 opacity-0 invisible hover:bg-orange-600"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const backToTopButton = document.getElementById('backToTop'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('opacity-0', 'invisible'); |
|
|
backToTopButton.classList.add('opacity-100', 'visible'); |
|
|
} else { |
|
|
backToTopButton.classList.remove('opacity-100', 'visible'); |
|
|
backToTopButton.classList.add('opacity-0', 'invisible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contractAddress = document.querySelector('code'); |
|
|
const copyButton = document.querySelector('.fa-copy').parentElement; |
|
|
|
|
|
copyButton.addEventListener('click', () => { |
|
|
navigator.clipboard.writeText(contractAddress.textContent); |
|
|
|
|
|
|
|
|
const icon = copyButton.querySelector('i'); |
|
|
icon.classList.remove('fa-copy'); |
|
|
icon.classList.add('fa-check'); |
|
|
|
|
|
setTimeout(() => { |
|
|
icon.classList.remove('fa-check'); |
|
|
icon.classList.add('fa-copy'); |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('.md\\:hidden button'); |
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
alert('Mobile menu would open here in a full implementation'); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=FriedsU/doogy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
