app.jsx import { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Star, Zap, Shield, Globe, ArrowRight, Menu, X } from 'lucide-react';
const App = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [activeSection, setActiveSection] = useState('home'); const [isVisible, setIsVisible] = useState({});
useEffect(() => { const handleScroll = () => { const sections = ['home', 'about', 'rarity', 'mint', 'community']; sections.forEach(section => { const element = document.getElementById(section); if (element) { const rect = element.getBoundingClientRect(); if (rect.top < window.innerHeight * 0.8 && rect.bottom > 0) { setIsVisible(prev => ({ ...prev, [section]: true })); } } }); };
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const scrollToSection = (sectionId) => { document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth' }); setActiveSection(sectionId); setIsMenuOpen(false); };
const sections = [ { id: 'home', title: 'Home' }, { id: 'about', title: 'About' }, { id: 'rarity', title: 'Rarity' }, { id: 'mint', title: 'Mint' }, { id: 'community', title: 'Community' } ];
const features = [ { icon: Star, title: "Cosmic Design", desc: "A vortex of celestial energy representing the birth of Web3 consciousness" }, { icon: Zap, title: "Zero Gas Fees", desc: "Minted on Polygon for zero cost to collectors" }, { icon: Shield, title: "True Rarity", desc: "Only one exists — no copies, no clones, ever" }, { icon: Globe, title: "Global Legacy", desc: "Designed to be collected by visionaries across the digital universe" } ];
const steps = [ { step: 1, title: "Enhance Your Art", desc: "We used Photopea to add glow effects and signature" }, { step: 2, title: "Connect Wallet", desc: "MetaMask wallet connected for secure transactions" }, { step: 3, title: "Mint for Free", desc: "Created on Zora.co with Polygon network" }, { step: 4, title: "List & Sell", desc: "Available on OpenSea with 10% royalty" } ];
return (
{/* Navigation */}
<div className="hidden md:flex space-x-8">
{sections.map((section) => (
<button
key={section.id}
onClick={() => scrollToSection(section.id)}
className={`font-medium transition-colors duration-300 ${
activeSection === section.id
? 'text-purple-400 border-b-2 border-purple-400'
: 'text-gray-300 hover:text-white'
}`}
>
{section.title}
</button>
))}
</div>
<button
className="md:hidden text-white"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
</div>
{/* Mobile Menu */}
<AnimatePresence>
{isMenuOpen && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="md:hidden bg-black/95 border-t border-purple-500/20"
>
<div className="container mx-auto px-6 py-4 space-y-4">
{sections.map((section) => (
<button
key={section.id}
onClick={() => scrollToSection(section.id)}
className={`block w-full text-left px-4 py-2 rounded-lg transition-colors duration-300 ${
activeSection === section.id
? 'bg-purple-500/20 text-purple-400'
: 'text-gray-300 hover:bg-gray-800'
}`}
>
{section.title}
</button>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</nav>
{/* Hero Section */}
<section id="home" className="pt-24 pb-16 px-6 relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-blue-900/20"></div>
<div className="absolute top-10 right-10 w-64 h-64 bg-purple-500 rounded-full filter blur-3xl opacity-20 animate-blob"></div>
<div className="absolute bottom-10 left-10 w-64 h-64 bg-blue-500 rounded-full filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-indigo-500 rounded-full filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
<div className="container mx-auto relative z-10">
<div className="flex flex-col lg:flex-row items-center gap-12">
<div className="lg:w-1/2 space-y-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="space-y-4"
>
<div className="inline-block px-4 py-2 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full text-sm font-semibold">
$NOVA — One of One God of NFTs
</div>
<h1 className="text-4xl md:text-6xl font-bold leading-tight">
<span className="bg-gradient-to-r from-purple-400 via-blue-400 to-cyan-400 bg-clip-text text-transparent">
Ethereum Nova
</span>
</h1>
<p className="text-xl text-gray-300">
The cosmic singularity that will redefine digital ownership. Only one exists.
Will you claim your place in NFT history?
</p>
</motion.div>
<div className="flex flex-col sm:flex-row gap-4">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => scrollToSection('mint')}
className="px-8 py-4 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full font-semibold text-lg transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"
>
Mint Now (FREE)
</motion.button>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => scrollToSection('about')}
className="px-8 py-4 border border-purple-400 rounded-full font-semibold text-lg transition-all duration-300 hover:bg-purple-500/10"
>
Learn More
</motion.button>
</div>
</div>
<div className="lg:w-1/2 relative">
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="relative"
>
<div className="absolute inset-0 bg-gradient-to-br from-purple-500 to-blue-500 rounded-2xl blur-xl opacity-30 animate-pulse"></div>
<div className="rounded-2xl shadow-2xl w-full max-w-md mx-auto relative z-10 bg-gradient-to-br from-gray-900 to-black p-8">
<svg width="100%" height="300" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stopColor="#FFD700" stopOpacity="0.8"/>
<stop offset="100%" stopColor="#000000" stopOpacity="0"/>
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="#000000"/>
<circle cx="300" cy="300" r="100" fill="url(#glow)" />
<path d="M300,200 L350,300 L250,300 Z" fill="#FFD700" stroke="#FFFFFF" strokeWidth="2"/>
<path d="M300,400 L350,300 L250,300 Z" fill="#FFD700" stroke="#FFFFFF" strokeWidth="2"/>
<path d="M200,300 L300,350 L300,250 Z" fill="#FFD700" stroke="#FFFFFF" strokeWidth="2"/>
<path d="M400,300 L300,350 L300,250 Z" fill="#FFD700" stroke="#FFFFFF" strokeWidth="2"/>
<circle cx="300" cy="300" r="120" fill="none" stroke="#FFFFFF" strokeWidth="1" strokeDasharray="5,5"/>
<text x="300" y="300" textAnchor="middle" dominantBaseline="middle" fontSize="24" fontWeight="bold" fill="#FFFFFF">
ETHEREUM NOVA
</text>
</svg>
</div>
<div className="absolute -bottom-4 -right-4 w-24 h-24 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
1/1
</div>
</motion.div>
</div>
</div>
</div>
</section>
{/* About Section */}
<section id="about" className={`py-20 px-6 ${isVisible.about ? 'opacity-100' : 'opacity-0'} transition-opacity duration-1000`}>
<div className="container mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold mb-4">
<span className="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
The Genesis of Ethereum Nova
</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Created during a solar eclipse while meditating on Ethereum's future, this is not art — it is prophecy.
A cosmic mandala forged in the heart of digital ether, representing the birth of Web3 consciousness.
</p>
</div>
<div className="grid md:grid-cols-2 gap-12 items-center">
<div>
<div className="rounded-xl shadow-xl w-full bg-gradient-to-br from-gray-900 to-black p-8">
<svg width="100%" height="300" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#000000"/>
<circle cx="300" cy="200" r="80" fill="url(#glow)" />
<path d="M300,120 L350,200 L250,200 Z" fill="#FFD700" stroke="#FFFFFF" strokeWidth="2"/>
<path d="M300,280 L350,200 L250,200 Z" fill="#FFD700" stroke="#FFFFFF" strokeWidth="2"/>
<path d="M220,200 L300,250 L300,150 Z" fill="#FFD700" stroke="#FFFFFF" strokeWidth="2"/>
<path d="M380,200 L300,250 L300,150 Z" fill="#FFD700" stroke="#FFFFFF" strokeWidth="2"/>
<circle cx="300" cy="200" r="90" fill="none" stroke="#FFFFFF" strokeWidth="1" strokeDasharray="5,5"/>
<text x="300" y="200" textAnchor="middle" dominantBaseline="middle" fontSize="20" fontWeight="bold" fill="#FFFFFF">
CREATION PROCESS
</text>
</svg>
</div>
</div>
<div className="space-y-6">
<h3 className="text-2xl font-bold">The Divine Manifestation</h3>
<p className="text-gray-300">
Ethereum Nova was born from the convergence of cosmic energy and blockchain technology.
The central vortex represents the infinite potential of decentralized systems, while the geometric patterns
symbolize the interconnectedness of all digital assets.
</p>
<p className="text-gray-300">
Each element was meticulously crafted using Photopea, with subtle glow effects enhancing the celestial nature of the piece.
The original file has been permanently burned — only the blockchain holds its truth.
</p>
<div className="flex items-center space-x-4 pt-4">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
<Star size={20} className="text-white" />
</div>
<div>
<p className="font-semibold">Creator Signature</p>
<p className="text-sm text-gray-400">© Visionary Creator 2025</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Rarity Section */}
<section id="rarity" className={`py-20 px-6 bg-black/50 ${isVisible.rarity ? 'opacity-100' : 'opacity-0'} transition-opacity duration-1000`}>
<div className="container mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold mb-4">
<span className="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
Ultimate Rarity
</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
In a world of copies and derivatives, Ethereum Nova stands alone as a true one-of-one artifact.
Its scarcity is not just numerical — it's metaphysical.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{features.map((feature, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="bg-gradient-to-br from-gray-900 to-black p-6 rounded-xl border border-purple-500/20 hover:border-purple-500/50 transition-all duration-300"
>
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center mb-4">
<feature.icon size={24} className="text-white" />
</div>
<h3 className="text-xl font-bold mb-2">{feature.title}</h3>
<p className="text-gray-300">{feature.desc}</p>
</motion.div>
))}
</div>
<div className="mt-16 p-8 bg-gradient-to-br from-purple-900/20 to-blue-900/20 rounded-xl border border-purple-500/30">
<div className="grid md:grid-cols-2 gap-8">
<div>
<h3 className="text-2xl font-bold mb-4">Technical Specifications</h3>
<div className="space-y-3">
<div className="flex justify-between">
<span className="text-gray-300">Ticker Symbol:</span>
<span className="font-semibold text-purple-400">$NOVA</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Total Supply:</span>
<span className="font-semibold text-purple-400">1</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Blockchain:</span>
<span className="font-semibold text-purple-400">Polygon</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Royalties:</span>
<span className="font-semibold text-purple-400">10%</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Mint Price:</span>
<span className="font-semibold text-green-400">FREE</span>
</div>
</div>
</div>
<div>
<h3 className="text-2xl font-bold mb-4">Why It's Valuable</h3>
<ul className="space-y-2 text-gray-300">
<li>• True one-of-one creation</li>
<li>• Mythological narrative</li>
<li>• Zero gas fees for minting</li>
<li>• Built-in royalty system</li>
<li>• Community-driven appreciation</li>
</ul>
</div>
</div>
</div>
</div>
</section>
{/* Mint Section */}
<section id="mint" className={`py-20 px-6 ${isVisible.mint ? 'opacity-100' : 'opacity-0'} transition-opacity duration-1000`}>
<div className="container mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold mb-4">
<span className="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
How to Own Ethereum Nova
</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Follow these simple steps to claim your place in NFT history. No technical knowledge required.
Minting is completely free on the Polygon network.
</p>
</div>
<div className="max-w-4xl mx-auto">
<div className="space-y-8">
{steps.map((step, index) => (
<motion.div
key={step.step}
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="flex items-start gap-6 p-6 bg-gradient-to-br from-gray-900 to-black rounded-xl border border-purple-500/20"
>
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
{step.step}
</div>
<div>
<h3 className="text-xl font-bold mb-2">{step.title}</h3>
<p className="text-gray-300">{step.desc}</p>
</div>
</motion.div>
))}
</div>
<div className="mt-12 p-8 bg-gradient-to-br from-purple-900/20 to-blue-900/20 rounded-xl border border-purple-500/30">
<div className="text-center">
<h3 className="text-2xl font-bold mb-4">Ready to Mint?</h3>
<p className="text-gray-300 mb-6">
Connect your MetaMask wallet and mint Ethereum Nova for free on Zora.co or OpenSea.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="px-8 py-4 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full font-semibold text-lg transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"
>
Mint on Zora.co
</motion.button>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="px-8 py-4 border border-purple-400 rounded-full font-semibold text-lg transition-all duration-300 hover:bg-purple-500/10"
>
View on OpenSea
</motion.button>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Community Section */}
<section id="community" className={`py-20 px-6 bg-black/50 ${isVisible.community ? 'opacity-100' : 'opacity-0'} transition-opacity duration-1000`}>
<div className="container mx-auto">
<div className="text-center mb-16">
<h2 className="text-4xl font-bold mb-4">
<span className="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
Join the Guardians of Nova
</span>
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
Become part of an exclusive community of visionaries who recognize the true value of Ethereum Nova.
Share insights, track value, and participate in the legacy of this cosmic artifact.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<div className="bg-gradient-to-br from-gray-900 to-black p-6 rounded-xl border border-purple-500/20 hover:border-purple-500/50 transition-all duration-300">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center mb-4">
<Star size={24} className="text-white" />
</div>
<h3 className="text-xl font-bold mb-2">Discord Community</h3>
<p className="text-gray-300 mb-4">
Join our exclusive Discord server where holders discuss the future of Ethereum Nova and share rare insights.
</p>
<button className="text-purple-400 font-semibold hover:text-purple-300 transition-colors duration-300">
Join Discord →
</button>
</div>
<div className="bg-gradient-to-br from-gray-900 to-black p-6 rounded-xl border border-purple-500/20 hover:border-purple-500/50 transition-all duration-300">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center mb-4">
<Star size={24} className="text-white" />
</div>
<h3 className="text-xl font-bold mb-2">Twitter Updates</h3>
<p className="text-gray-300 mb-4">
Follow us for real-time updates, community announcements, and special events related to Ethereum Nova.
</p>
<button className="text-purple-400 font-semibold hover:text-purple-300 transition-colors duration-300">
Follow on Twitter →
</button>
</div>
<div className="bg-gradient-to-br from-gray-900 to-black p-6 rounded-xl border border-purple-500/20 hover:border-purple-500/50 transition-all duration-300">
<div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center mb-4">
<Star size={24} className="text-white" />
</div>
<h3 className="text-xl font-bold mb-2">Instagram Gallery</h3>
<p className="text-gray-300 mb-4">
Explore high-resolution images, behind-the-scenes content, and collector stories from the Ethereum Nova universe.
</p>
<button className="text-purple-400 font-semibold hover:text-purple-300 transition-colors duration-300">
Follow on Instagram →
</button>
</div>
</div>
<div className="mt-16 text-center">
<h3 className="text-2xl font-bold mb-4">Become a Guardian</h3>
<p className="text-gray-300 mb-8 max-w-2xl mx-auto">
Owners of Ethereum Nova automatically become members of the Guardians of Nova — an elite group with exclusive benefits,
early access to future projects, and recognition as pioneers in the NFT revolution.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="px-8 py-4 bg-gradient-to-r from-purple-500 to-blue-500 rounded-full font-semibold text-lg transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20"
>
Claim Your Guardian Status
</motion.button>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="py-12 px-6 bg-black border-t border-purple-500/20">
<div className="container mx-auto">
<div className="flex flex-col md:flex-row justify-between items-center">
<div className="flex items-center space-x-2 mb-4 md:mb-0">
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-blue-500 rounded-full flex items-center justify-center">
<Star size={20} className="text-white" />
</div>
<h1 className="text-xl font-bold bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">
Ethereum Nova
</h1>
</div>
<div className="flex space-x-6 mb-4 md:mb-0">
<a href="#" className="text-gray-300 hover:text-white transition-colors duration-300">
<Star size={24} />
</a>
<a href="#" className="text-gray-300 hover:text-white transition-colors duration-300">
<Star size={24} />
</a>
<a href="#" className="text-gray-300 hover:text-white transition-colors duration-300">
<Star size={24} />
</a>
<a href="#" className="text-gray-300 hover:text-white transition-colors duration-300">
<Star size={24} />
</a>
</div>
<div className="text-sm text-gray-400">
© 2025 Ethereum Nova. All rights reserved. One of One — God of NFTs.
</div>
</div>
</div>
</footer>
{/* CSS Animations */}
<style jsx>{`
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -40px) scale(1.1);
}
66% {
transform: translate(-20px, 40px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
`}</style>
</div>
); };
export default App;