|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Cramele XYZ - NFT Wine Strategy</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"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@solana/web3.js@1.73.0/lib/index.iife.min.js"></script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6b46c1 0%, #9f7aea 100%); |
|
|
} |
|
|
.wine-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.wine-card:hover { |
|
|
transform: translateY(-10px) rotateX(5deg); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.nft-preview { |
|
|
perspective: 1000px; |
|
|
} |
|
|
.nft-3d { |
|
|
transform-style: preserve-3d; |
|
|
transition: transform 0.5s; |
|
|
} |
|
|
.nft-3d:hover { |
|
|
transform: rotateY(15deg); |
|
|
} |
|
|
.timeline-item:not(:last-child):after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 7px; |
|
|
top: 24px; |
|
|
height: calc(100% - 24px); |
|
|
width: 2px; |
|
|
background: #9f7aea; |
|
|
} |
|
|
.qr-code { |
|
|
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<header class="gradient-bg text-white"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-4xl font-bold">Cramele XYZ</h1> |
|
|
<p class="text-xl mt-2">Premium Romanian Wines on Solana Blockchain</p> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<img src="https://images.unsplash.com/photo-1510812431401-41e2e6f62a6b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Wine Bottle" class="h-24 rounded-lg shadow-lg"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="flex space-x-8"> |
|
|
<a href="#strategy" class="text-purple-700 font-medium hover:text-purple-900">Strategy</a> |
|
|
<a href="#nfts" class="text-purple-700 font-medium hover:text-purple-900">Our NFTs</a> |
|
|
<a href="#roadmap" class="text-purple-700 font-medium hover:text-purple-900">Roadmap</a> |
|
|
<a href="#technology" class="text-purple-700 font-medium hover:text-purple-900">Technology</a> |
|
|
<a href="#team" class="text-purple-700 font-medium hover:text-purple-900">Team</a> |
|
|
</div> |
|
|
<button id="connectWallet" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"> |
|
|
Connect Wallet |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h2 class="text-4xl font-bold mb-4">Revolutionizing Wine Authentication with Solana NFTs</h2> |
|
|
<p class="text-xl mb-6">Experience the perfect blend of tradition and innovation with our blockchain-verified premium wines.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#nfts" class="bg-white text-purple-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold transition-colors"> |
|
|
Explore NFTs |
|
|
</a> |
|
|
<a href="#strategy" class="border-2 border-white text-white hover:bg-white hover:text-purple-700 px-6 py-3 rounded-lg font-bold transition-colors"> |
|
|
Our Strategy |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center nft-preview"> |
|
|
<div class="relative nft-3d"> |
|
|
<img src="https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Wine NFT" class="rounded-xl shadow-2xl h-64 w-64 object-cover"> |
|
|
<div class="absolute -bottom-4 -right-4 bg-white p-2 rounded-lg shadow-lg"> |
|
|
<div class="text-xs text-gray-500">Powered by</div> |
|
|
<div class="text-purple-600 font-bold">Solana</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="strategy" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Comprehensive NFT Strategy</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-md wine-card"> |
|
|
<div class="text-purple-600 text-4xl mb-4"> |
|
|
<i class="fas fa-fingerprint"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Provenance & Authenticity</h3> |
|
|
<p class="text-gray-600">Each bottle gets a unique NFT verifying its origin, production details, and ownership history on the Solana blockchain.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-md wine-card"> |
|
|
<div class="text-purple-600 text-4xl mb-4"> |
|
|
<i class="fas fa-wine-bottle"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Wine Futures</h3> |
|
|
<p class="text-gray-600">NFTs representing future vintages allow collectors to secure allocations before release, with potential for appreciation.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-md wine-card"> |
|
|
<div class="text-purple-600 text-4xl mb-4"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Membership Tokens</h3> |
|
|
<p class="text-gray-600">Exclusive access to private events, vineyard tours, and limited releases through NFT-based membership tiers.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl shadow-md wine-card"> |
|
|
<div class="text-purple-600 text-4xl mb-4"> |
|
|
<i class="fas fa-gem"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Limited Editions</h3> |
|
|
<p class="text-gray-600">Ultra-rare vintages paired with digital art NFTs, creating collectible assets that appreciate over time.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 bg-purple-50 p-8 rounded-xl border border-purple-100"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-purple-800">Implementation Phases</h3> |
|
|
|
|
|
<div class="space-y-8"> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1"> |
|
|
1 |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-2 text-gray-800">Strategy & Planning (2 Weeks)</h4> |
|
|
<p class="text-gray-600">Deep brand audit, blockchain selection, tokenomics design, and legal compliance review.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1"> |
|
|
2 |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-2 text-gray-800">NFT Creation (4-6 Weeks)</h4> |
|
|
<p class="text-gray-600">Smart contract development, NFT design, marketplace integration, and QR code implementation.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 mt-1"> |
|
|
3 |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-2 text-gray-800">Marketing & Community (Ongoing)</h4> |
|
|
<p class="text-gray-600">Content marketing, social campaigns, influencer partnerships, and community building.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="nfts" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our NFT Collections</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg wine-card"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Authenticity NFT" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold"> |
|
|
Provenance |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Bottle Authentication</h3> |
|
|
<p class="text-gray-600 mb-4">Digital certificate of authenticity for each physical bottle, with full production history.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-purple-600 font-bold">500 SOL</span> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> |
|
|
View Details |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg wine-card"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1479064555552-3ef4979f8908?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Membership NFT" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold"> |
|
|
Membership |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Vineyard Club</h3> |
|
|
<p class="text-gray-600 mb-4">Exclusive access to private events, early releases, and VIP experiences.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-purple-600 font-bold">1,200 SOL</span> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> |
|
|
View Details |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg wine-card"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1568219656418-15c329312bf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Future NFT" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-bold"> |
|
|
Futures |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">2025 Reserve</h3> |
|
|
<p class="text-gray-600 mb-4">Pre-purchase rights to our 2025 vintage before bottling, with guaranteed allocation.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-purple-600 font-bold">800 SOL</span> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"> |
|
|
View Details |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<button class="border-2 border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-6 py-3 rounded-lg font-bold transition-colors"> |
|
|
View All Collections |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1558160074-4d7d8bdf4256?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Wine Bottle" class="h-64 rounded-lg shadow-lg"> |
|
|
<div class="absolute -bottom-4 -right-4 bg-white p-3 rounded-lg shadow-xl qr-code"> |
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://cramele-xyz-nft.com/bottle/12345" alt="QR Code" class="h-24 w-24"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 md:pl-12"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-gray-800">Seamless Physical-Digital Connection</h2> |
|
|
<p class="text-gray-600 mb-6">Each bottle features a unique QR code linking to its Solana NFT, providing instant verification of authenticity and access to exclusive content about the wine's journey from vine to bottle.</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i> |
|
|
<span class="text-gray-700">Instant verification of bottle authenticity</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i> |
|
|
<span class="text-gray-700">Detailed production history and terroir data</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i> |
|
|
<span class="text-gray-700">Exclusive digital content for NFT holders</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-purple-600 mt-1 mr-2"></i> |
|
|
<span class="text-gray-700">Secure ownership transfer on secondary market</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="roadmap" class="py-16 bg-purple-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Project Roadmap</h2> |
|
|
|
|
|
<div class="relative"> |
|
|
|
|
|
<div class="relative timeline-item pl-8 pb-8"> |
|
|
<div class="absolute left-0 bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold text-purple-800">Q3 2023</h3> |
|
|
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Completed</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Strategy development and smart contract architecture finalized. First NFT designs completed.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-8 pb-8"> |
|
|
<div class="absolute left-0 bg-purple-600 text-white rounded-full w-6 h-6 flex items-center justify-center"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold text-purple-800">Q4 2023</h3> |
|
|
<span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">In Progress</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Launch of Authenticity NFTs for current vintages. Membership NFT presale begins.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-item pl-8 pb-8"> |
|
|
<div class="absolute left-0 bg-purple-100 border-2 border-purple-600 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold">3</span> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold text-purple-800">Q1 2024</h3> |
|
|
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Planned</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Wine Futures NFT launch for 2025 vintage. First exclusive members-only event.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative pl-8"> |
|
|
<div class="absolute left-0 bg-purple-100 border-2 border-purple-600 text-purple-800 rounded-full w-6 h-6 flex items-center justify-center"> |
|
|
<span class="text-xs font-bold">4</span> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold text-purple-800">Q2 2024</h3> |
|
|
<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Planned</span> |
|
|
</div> |
|
|
<p class="text-gray-600">Limited Edition artist collaboration NFTs. Expansion to international markets.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="technology" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Technology Stack</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl text-center"> |
|
|
<div class="text-purple-600 text-5xl mb-4"> |
|
|
<i class="fab fa-ethereum"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Solana Blockchain</h3> |
|
|
<p class="text-gray-600 text-sm">High-speed, low-cost transactions for seamless NFT experiences</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl text-center"> |
|
|
<div class="text-purple-600 text-5xl mb-4"> |
|
|
<i class="fas fa-file-contract"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">Smart Contracts</h3> |
|
|
<p class="text-gray-600 text-sm">Secure, transparent rules for all NFT transactions and utilities</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl text-center"> |
|
|
<div class="text-purple-600 text-5xl mb-4"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">IPFS Storage</h3> |
|
|
<p class="text-gray-600 text-sm">Decentralized storage for NFT metadata ensuring permanence</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl text-center"> |
|
|
<div class="text-purple-600 text-5xl mb-4"> |
|
|
<i class="fas fa-qrcode"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold mb-2">QR Integration</h3> |
|
|
<p class="text-gray-600 text-sm">Bridging physical bottles with their digital NFT counterparts</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-purple-50 p-8 rounded-xl"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-6 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-purple-800">Marketplace Integration</h3> |
|
|
<p class="text-gray-600 mb-4">Our NFTs will be available on leading Solana marketplaces as well as our own custom platform designed specifically for wine collectors.</p> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<span class="bg-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">Magic Eden</span> |
|
|
<span class="bg-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">Tensor</span> |
|
|
<span class="bg-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">SolSea</span> |
|
|
<span class="bg-white px-3 py-1 rounded-full text-sm font-medium shadow-sm">Custom Platform</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="NFT Marketplace" class="rounded-lg shadow-lg h-48"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="team" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Expert Team</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alexandra Popescu" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"> |
|
|
<h3 class="text-xl font-bold mb-1">Alexandra Popescu</h3> |
|
|
<p class="text-purple-600 font-medium mb-3">Blockchain Strategist</p> |
|
|
<p class="text-gray-600 text-sm">10+ years in blockchain development with focus on luxury goods authentication</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mihai Ionescu" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"> |
|
|
<h3 class="text-xl font-bold mb-1">Mihai Ionescu</h3> |
|
|
<p class="text-purple-600 font-medium mb-3">Smart Contract Developer</p> |
|
|
<p class="text-gray-600 text-sm">Solana expert specializing in NFT smart contracts with 50+ deployed projects</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Elena Dumitrescu" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"> |
|
|
<h3 class="text-xl font-bold mb-1">Elena Dumitrescu</h3> |
|
|
<p class="text-purple-600 font-medium mb-3">Wine Industry Consultant</p> |
|
|
<p class="text-gray-600 text-sm">Master Sommelier with deep connections in Romanian wine industry</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Andrei Vasilescu" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover"> |
|
|
<h3 class="text-xl font-bold mb-1">Andrei Vasilescu</h3> |
|
|
<p class="text-purple-600 font-medium mb-3">Marketing Director</p> |
|
|
<p class="text-gray-600 text-sm">Digital marketing expert specializing in NFT and crypto communities</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Ready to Elevate Your Wine Experience?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Join the future of wine collecting with Cramele XYZ's Solana NFTs.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button id="ctaConnect" class="bg-white hover:bg-gray-100 text-purple-700 px-8 py-4 rounded-lg font-bold text-lg transition-colors"> |
|
|
Connect Wallet & Explore |
|
|
</button> |
|
|
<a href="#contact" class="border-2 border-white hover:bg-white hover:text-purple-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition-colors"> |
|
|
Contact Our Team |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 gradient-bg text-white p-8"> |
|
|
<h2 class="text-2xl font-bold mb-6">Get In Touch</h2> |
|
|
<p class="mb-6">Have questions about our NFT strategy or want to discuss a custom solution for your winery? Our team is ready to help.</p> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-envelope mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-bold">Email</h4> |
|
|
<p>nft@cramele-xyz.com</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-phone mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-bold">Phone</h4> |
|
|
<p>+40 123 456 789</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-bold">Office</h4> |
|
|
<p>Bucharest, Romania</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 p-8"> |
|
|
<h3 class="text-2xl font-bold mb-6 text-gray-800">Send Us a Message</h3> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="name">Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="email">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="message">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-bold transition-colors w-full"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Cramele XYZ</h3> |
|
|
<p class="text-gray-400">Bridging Romanian wine tradition with blockchain innovation through Solana NFTs.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#strategy" class="text-gray-400 hover:text-white transition-colors">Strategy</a></li> |
|
|
<li><a href="#nfts" class="text-gray-400 hover:text-white transition-colors">NFT Collections</a></li> |
|
|
<li><a href="#roadmap" class="text-gray-400 hover:text-white transition-colors">Roadmap</a></li> |
|
|
<li><a href="#team" class="text-gray-400 hover:text-white transition-colors">Our Team</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Whitepaper</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Smart Contract</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Connect</h4> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-discord"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-telegram"></i></a> |
|
|
</div> |
|
|
<p class="text-gray-400">Subscribe to our newsletter</p> |
|
|
<div class="flex mt-2"> |
|
|
<input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 Cramele XYZ NFT Project. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="walletModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-8 max-w-md w-full"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-2xl font-bold text-gray-800">Connect Wallet</h3> |
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">Choose your preferred Solana wallet to connect and explore our NFT collections.</p> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<button class="wallet-btn flex items-center w-full p-4 border rounded-lg hover:bg-gray-50 transition-colors"> |
|
|
<img src="https://phantom.app/favicon.ico" alt="Phantom" class="w-8 h-8 mr-4"> |
|
|
<span class="font-medium">Phantom</span> |
|
|
</button> |
|
|
<button class="wallet-btn flex items-center w-full p-4 border rounded-lg hover:bg-gray-50 transition-colors"> |
|
|
<img src="https://solflare.com/favicon.ico" alt="Solflare" class="w-8 h-8 mr-4"> |
|
|
<span class="font-medium">Solflare</span> |
|
|
</button> |
|
|
<button class="wallet-btn flex items-center w-full p-4 border rounded-lg hover:bg-gray-50 transition-colors"> |
|
|
<img src="https://backpack.app/favicon.ico" alt="Backpack" class="w-8 h-8 mr-4"> |
|
|
<span class="font-medium">Backpack</span> |
|
|
</button> |
|
|
<button class="wallet-btn flex items-center w-full p-4 border rounded-lg hover:bg-gray-50 transition-colors"> |
|
|
<img src="https://getglow.app/favicon.ico" alt="Glow" class="w-8 h-8 mr-4"> |
|
|
<span class="font-medium">Glow</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 text-center text-sm text-gray-500"> |
|
|
<p>Don't have a wallet? <a href="#" class="text-purple-600 hover:underline">Learn how to set one up</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="walletConnected" class="fixed bottom-4 right-4 bg-purple-600 text-white px-4 py-2 rounded-full shadow-lg hidden items-center"> |
|
|
<i class="fas fa-wallet mr-2"></i> |
|
|
<span id="walletAddress" class="font-medium">Connected</span> |
|
|
<button id="disconnectWallet" class="ml-4 text-white hover:text-gray-200"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const connectBtn = document.getElementById('connectWallet'); |
|
|
const ctaConnect = document.getElementById('ctaConnect'); |
|
|
const walletModal = document.getElementById('walletModal'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
const walletConnected = document.getElementById('walletConnected'); |
|
|
const disconnectWallet = document.getElementById('disconnectWallet'); |
|
|
const walletAddress = document.getElementById('walletAddress'); |
|
|
const walletBtns = document.querySelectorAll('.wallet-btn'); |
|
|
|
|
|
|
|
|
if(localStorage.getItem('walletConnected') === 'true') { |
|
|
connectBtn.textContent = 'Connected'; |
|
|
connectBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700'); |
|
|
connectBtn.classList.add('bg-green-500', 'hover:bg-green-600'); |
|
|
walletConnected.classList.remove('hidden'); |
|
|
walletConnected.classList.add('flex'); |
|
|
|
|
|
|
|
|
const storedAddress = localStorage.getItem('walletAddress'); |
|
|
if(storedAddress) { |
|
|
walletAddress.textContent = `${storedAddress.substring(0, 4)}...${storedAddress.substring(storedAddress.length - 4)}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
connectBtn.addEventListener('click', () => { |
|
|
walletModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
ctaConnect.addEventListener('click', () => { |
|
|
walletModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
walletModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
walletBtns.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
|
|
|
const solana = window.solana; |
|
|
if(solana) { |
|
|
|
|
|
|
|
|
const demoAddress = 'HN3Xgf...W4e5z'; |
|
|
|
|
|
|
|
|
connectBtn.textContent = 'Connected'; |
|
|
connectBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700'); |
|
|
connectBtn.classList.add('bg-green-500', 'hover:bg-green-600'); |
|
|
walletConnected.classList.remove('hidden'); |
|
|
walletConnected.classList.add('flex'); |
|
|
walletAddress.textContent = demoAddress; |
|
|
walletModal.classList.add('hidden'); |
|
|
|
|
|
|
|
|
localStorage.setItem('walletConnected', 'true'); |
|
|
localStorage.setItem('walletAddress', demoAddress); |
|
|
} else { |
|
|
alert('Please install a Solana wallet extension like Phantom to connect.'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
disconnectWallet.addEventListener('click', () => { |
|
|
connectBtn.textContent = 'Connect Wallet'; |
|
|
connectBtn.classList.remove('bg-green-500', 'hover:bg-green-600'); |
|
|
connectBtn.classList.add('bg-purple-600', 'hover:bg-purple-700'); |
|
|
walletConnected.classList.add('hidden'); |
|
|
walletConnected.classList.remove('flex'); |
|
|
|
|
|
|
|
|
localStorage.removeItem('walletConnected'); |
|
|
localStorage.removeItem('walletAddress'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if(targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if(targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=Geoko/geoko-s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
