a self-contained html file that is a website for a entrepreneur network server, with GSAP animations, react, javascript, d3.js, three.js, particle.js, with mouse over elements and smooth scrolling navigation bar elements, infinite scroll, single page self contained, with impressive page animations and card lifts/tilts
5476d58 verified | <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NodeLink | Entrepreneur Network Server</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#ef4444', // red-500 | |
| secondary: '#84cc16', // lime-500 | |
| dark: '#0f172a', // slate-900 | |
| card: '#1e293b', // slate-800 | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <!-- Icons --> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <!-- Libraries: React, ReactDOM, Babel, Three.js, GSAP, D3, Particles.js --> | |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> | |
| <style> | |
| body { | |
| background-color: #0f172a; /* slate-900 */ | |
| color: #f8fafc; | |
| overflow-x: hidden; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0f172a; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #334155; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #ef4444; | |
| } | |
| /* Tilt Card Perspective */ | |
| .tilt-card { | |
| transform-style: preserve-3d; | |
| transform: perspective(1000px); | |
| } | |
| .tilt-content { | |
| transform: translateZ(30px); | |
| } | |
| /* Neon Glow Effects */ | |
| .glow-text-red { | |
| text-shadow: 0 0 10px rgba(239, 68, 68, 0.5); | |
| } | |
| .glow-text-lime { | |
| text-shadow: 0 0 10px rgba(132, 204, 22, 0.5); | |
| } | |
| /* Loader */ | |
| #loader { | |
| position: fixed; | |
| inset: 0; | |
| background: #0f172a; | |
| z-index: 9999; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-direction: column; | |
| transition: opacity 0.5s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="loader"> | |
| <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div> | |
| <h2 class="text-primary text-xl font-bold tracking-widest">INITIALIZING NODE...</h2> | |
| </div> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect, useRef, useLayoutEffect } = React; | |
| // --- Components --- | |
| // 1. Particle Background | |
| const ParticleBackground = () => { | |
| useEffect(() => { | |
| particlesJS("particles-js", { | |
| particles: { | |
| number: { value: 80, density: { enable: true, value_area: 800 } }, | |
| color: { value: "#ef4444" }, | |
| shape: { type: "circle" }, | |
| opacity: { value: 0.5, random: false }, | |
| size: { value: 3, random: true }, | |
| line_linked: { enable: true, distance: 150, color: "#84cc16", opacity: 0.4, width: 1 }, | |
| move: { enable: true, speed: 2, direction: "none", random: false, straight: false, out_mode: "out", bounce: false } | |
| }, | |
| interactivity: { | |
| detect_on: "canvas", | |
| events: { | |
| onhover: { enable: true, mode: "repulse" }, | |
| onclick: { enable: true, mode: "push" }, | |
| resize: true | |
| }, | |
| modes: { | |
| repulse: { distance: 100, duration: 0.4 } | |
| } | |
| }, | |
| retina_detect: true | |
| }); | |
| return () => window.pJSDom && window.pJSDom.length && window.pJSDom[0].pJS.fn.vendors.destroypJS(window.pJSDom[0]); | |
| }, []); | |
| return <div id="particles-js" className="absolute inset-0 z-0 pointer-events-none opacity-30"></div>; | |
| }; | |
| // 2. Three.js 3D Hero Object | |
| const ThreeHero = () => { | |
| const mountRef = useRef(null); | |
| useEffect(() => { | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| mountRef.current.appendChild(renderer.domElement); | |
| // Geometry: A complex Icosahedron (Server Cluster) | |
| const geometry = new THREE.IcosahedronGeometry(1.5, 0); | |
| const material = new THREE.MeshStandardMaterial({ | |
| color: 0xef4444, | |
| wireframe: true, | |
| emissive: 0xef4444, | |
| emissiveIntensity: 0.2 | |
| }); | |
| const sphere = new THREE.Mesh(geometry, material); | |
| scene.add(sphere); | |
| // Inner Core | |
| const coreGeo = new THREE.IcosahedronGeometry(0.8, 1); | |
| const coreMat = new THREE.MeshBasicMaterial({ color: 0x84cc16, wireframe: true }); | |
| const core = new THREE.Mesh(coreGeo, coreMat); | |
| scene.add(core); | |
| // Lights | |
| const light = new THREE.PointLight(0xffffff, 1, 100); | |
| light.position.set(10, 10, 10); | |
| scene.add(light); | |
| const ambientLight = new THREE.AmbientLight(0x404040); | |
| scene.add(ambientLight); | |
| camera.position.z = 5; | |
| // Animation | |
| const animate = () => { | |
| requestAnimationFrame(animate); | |
| sphere.rotation.x += 0.005; | |
| sphere.rotation.y += 0.005; | |
| core.rotation.x -= 0.01; | |
| core.rotation.y -= 0.01; | |
| // Mouse interaction | |
| const mouseX = (window.event?.clientX / window.innerWidth) * 2 - 1; | |
| const mouseY = -(window.event?.clientY / window.innerHeight) * 2 + 1; | |
| if(window.event) { | |
| sphere.rotation.x += mouseY * 0.02; | |
| sphere.rotation.y += mouseX * 0.02; | |
| } | |
| renderer.render(scene, camera); | |
| }; | |
| animate(); | |
| const handleResize = () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }; | |
| window.addEventListener('resize', handleResize); | |
| return () => { | |
| window.removeEventListener('resize', handleResize); | |
| if(mountRef.current) mountRef.current.innerHTML = ''; | |
| }; | |
| }, []); | |
| return <div ref={mountRef} className="absolute inset-0 z-10 pointer-events-none opacity-80 mix-blend-screen" />; | |
| }; | |
| // 3. D3 Network Graph | |
| const NetworkGraph = () => { | |
| const svgRef = useRef(null); | |
| useEffect(() => { | |
| const width = 600; | |
| const height = 400; | |
| // Dummy Data | |
| const nodes = Array.from({ length: 30 }, (_, i) => ({ id: i, group: i % 2 === 0 ? 'red' : 'lime' })); | |
| const links = []; | |
| for(let i=0; i<nodes.length; i++) { | |
| if(i > 0) links.push({ source: i, target: Math.floor(Math.random() * i) }); | |
| } | |
| const svg = d3.select(svgRef.current) | |
| .attr("viewBox", [0, 0, width, height]) | |
| .attr("class", "w-full h-full"); | |
| const simulation = d3.forceSimulation(nodes) | |
| .force("link", d3.forceLink(links).id(d => d.id).distance(60)) | |
| .force("charge", d3.forceManyBody().strength(-100)) | |
| .force("center", d3.forceCenter(width / 2, height / 2)); | |
| const link = svg.append("g") | |
| .attr("stroke", "#84cc16") | |
| .attr("stroke-opacity", 0.6) | |
| .selectAll("line") | |
| .data(links) | |
| .join("line") | |
| .attr("stroke-width", 1); | |
| const node = svg.append("g") | |
| .attr("stroke", "#fff") | |
| .attr("stroke-width", 1.5) | |
| .selectAll("circle") | |
| .data(nodes) | |
| .join("circle") | |
| .attr("r", d => d.group === 'red' ? 8 : 5) | |
| .attr("fill", d => d.group === 'red' ? '#ef4444' : '#84cc16'); | |
| // Animation Tick | |
| simulation.on("tick", () => { | |
| link | |
| .attr("x1", d => d.source.x) | |
| .attr("y1", d => d.source.y) | |
| .attr("x2", d => d.target.x) | |
| .attr("y2", d => d.target.y); | |
| node | |
| .attr("cx", d => d.x) | |
| .attr("cy", d => d.y); | |
| }); | |
| // Cleanup | |
| return () => simulation.stop(); | |
| }, []); | |
| return ( | |
| <div className="w-full h-96 bg-card/50 rounded-xl border border-gray-700 overflow-hidden relative shadow-2xl shadow-red-900/20"> | |
| <svg ref={svgRef} className="w-full h-full"></svg> | |
| <div className="absolute bottom-2 right-2 text-xs text-gray-400">Live Network Topology</div> | |
| </div> | |
| ); | |
| }; | |
| // 4. Tilt Card Component | |
| const TiltCard = ({ title, icon, desc }) => { | |
| const cardRef = useRef(null); | |
| useEffect(() => { | |
| const card = cardRef.current; | |
| if(!card) return; | |
| const handleMouseMove = (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| const xPct = (x / rect.width - 0.5) * 2; // -1 to 1 | |
| const yPct = (y / rect.height - 0.5) * 2; // -1 to 1 | |
| gsap.to(card, { | |
| rotationY: xPct * 10, | |
| rotationX: -yPct * 10, | |
| duration: 0.5, | |
| ease: "power2.out" | |
| }); | |
| }; | |
| const handleMouseLeave = () => { | |
| gsap.to(card, { | |
| rotationY: 0, | |
| rotationX: 0, | |
| duration: 0.8, | |
| ease: "elastic.out(1, 0.5)" | |
| }); | |
| }; | |
| card.addEventListener('mousemove', handleMouseMove); | |
| card.addEventListener('mouseleave', handleMouseLeave); | |
| return () => { | |
| card.removeEventListener('mousemove', handleMouseMove); | |
| card.removeEventListener('mouseleave', handleMouseLeave); | |
| }; | |
| }, []); | |
| return ( | |
| <div ref={cardRef} className="tilt-card bg-card p-6 rounded-2xl border border-gray-700 cursor-pointer transition-colors hover:border-primary/50 h-full"> | |
| <div className="tilt-content flex flex-col items-center text-center h-full justify-between"> | |
| <div className="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-lime-500 flex items-center justify-center mb-4 shadow-lg shadow-primary/20"> | |
| <i data-feather={icon} className="text-white w-8 h-8"></i> | |
| </div> | |
| <h3 className="text-xl font-bold text-white mb-2">{title}</h3> | |
| <p className="text-gray-400 text-sm">{desc}</p> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| // 5. Infinite Feed Item | |
| const FeedItem = ({ title, type }) => ( | |
| <div className="w-full md:w-1/2 lg:w-1/3 px-4 mb-8"> | |
| <div className="bg-card p-6 rounded-xl border-l-4 border-secondary hover:bg-gray-800 transition-colors group"> | |
| <div className="flex justify-between items-center mb-4"> | |
| <span className="text-xs font-bold uppercase tracking-wider text-secondary">{type}</span> | |
| <span className="text-xs text-gray-500">2m ago</span> | |
| </div> | |
| <h4 className="text-lg font-semibold text-white group-hover:text-secondary transition-colors">{title}</h4> | |
| <p className="text-gray-400 text-sm mt-2">A new node has joined the server cluster providing enhanced throughput.</p> | |
| </div> | |
| </div> | |
| ); | |
| // --- Main Application --- | |
| const App = () => { | |
| const [loaded, setLoaded] = useState(false); | |
| useEffect(() => { | |
| // Feather Icons Init | |
| feather.replace(); | |
| // GSAP Animations | |
| gsap.registerPlugin(ScrollTrigger); | |
| // Hide Loader | |
| setTimeout(() => { | |
| setLoaded(true); | |
| document.getElementById('loader').style.opacity = '0'; | |
| setTimeout(() => document.getElementById('loader').style.display = 'none', 500); | |
| // Animate Elements | |
| gsap.from(".hero-text", { y: 50, opacity: 0, duration: 1, stagger: 0.2 }); | |
| gsap.from(".nav-item", { y: -20, opacity: 0, duration: 0.8, stagger: 0.1 }); | |
| gsap.utils.toArray('.feature-card-wrap').forEach((el, i) => { | |
| gsap.from(el, { | |
| scrollTrigger: { trigger: el, start: "top 85%" }, | |
| y: 50, opacity: 0, duration: 0.8, delay: i * 0.1 | |
| }); | |
| }); | |
| }, 1000); | |
| }, []); | |
| const features = [ | |
| { title: "Decentralized Storage", icon: "database", desc: "Secure, redundant data storage across the global node network." }, | |
| { title: "High Speed Routing", icon: "fast-forward", desc: "Optimized packet switching for minimal latency connections." }, | |
| { title: "Encrypted P2P", icon: "lock", desc: "End-to-end encryption ensuring total privacy for members." }, | |
| { title: "Scalable Bandwidth", icon: "bar-chart-2", desc: "Dynamic resource allocation based on network load." } | |
| ]; | |
| return ( | |
| <div className="relative min-h-screen text-gray-100 font-sans"> | |
| {/* Navigation */} | |
| <nav className="fixed top-0 w-full z-50 bg-dark/80 backdrop-blur-md border-b border-gray-800"> | |
| <div className="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div className="flex items-center space-x-2"> | |
| <div className="w-8 h-8 bg-gradient-to-tr from-primary to-secondary rounded-full animate-pulse"></div> | |
| <span className="text-xl font-bold tracking-tight">Node<span className="text-primary">Link</span></span> | |
| </div> | |
| <div className="hidden md:flex space-x-8"> | |
| {['Home', 'Network', 'Features', 'Connect'].map((item, idx) => ( | |
| <a key={idx} href={`#${item.toLowerCase()}`} className="nav-item text-sm font-medium hover:text-secondary transition-colors uppercase tracking-widest"> | |
| {item} | |
| </a> | |
| ))} | |
| </div> | |
| <button className="bg-primary hover:bg-red-600 text-white px-5 py-2 rounded-full text-sm font-bold transition-all transform hover:scale-105 shadow-lg shadow-red-500/30"> | |
| Join Server | |
| </button> | |
| </div> | |
| </nav> | |
| {/* Hero Section */} | |
| <section id="home" className="relative h-screen flex items-center justify-center overflow-hidden"> | |
| <ParticleBackground /> | |
| <ThreeHero /> | |
| <div className="relative z-20 container mx-auto px-6 text-center"> | |
| <h1 className="hero-text text-5xl md:text-7xl font-extrabold mb-6 leading-tight"> | |
| The Future of <br /> | |
| <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary glow-text-lime"> | |
| Entrepreneurial Networking | |
| </span> | |
| </h1> | |
| <p className="hero-text text-xl text-gray-400 mb-8 max-w-2xl mx-auto"> | |
| A self-sustaining, decentralized server ecosystem designed for high-growth entrepreneurs. | |
| </p> | |
| <div className="hero-text flex justify-center gap-4"> | |
| <a href="#network" className="bg-secondary text-dark px-8 py-3 rounded-full font-bold hover:bg-lime-400 transition-colors shadow-lg shadow-lime-500/30"> | |
| Explore Network | |
| </a> | |
| <a href="#features" className="border border-gray-600 px-8 py-3 rounded-full font-bold hover:border-white hover:text-white transition-colors"> | |
| Documentation | |
| </a> | |
| </div> | |
| </div> | |
| <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i data-feather="arrow-down" className="text-gray-500"></i> | |
| </div> | |
| </section> | |
| {/* Network Stats Section (D3) */} | |
| <section id="network" className="py-20 bg-dark relative"> | |
| <div className="container mx-auto px-6"> | |
| <div className="flex flex-col md:flex-row items-center gap-12"> | |
| <div className="md:w-1/2"> | |
| <h2 className="text-4xl font-bold mb-4">Global Node <span className="text-primary">Topology</span></h2> | |
| <p className="text-gray-400 mb-6"> | |
| Visualize the live connections. Our server architecture mimics neural networks, allowing for self-healing and adaptive routing. | |
| </p> | |
| <div className="flex gap-4 mb-6"> | |
| <div className="bg-card p-4 rounded-lg border border-gray-700"> | |
| <div className="text-2xl font-bold text-secondary">12k+</div> | |
| <div className="text-xs text-gray-500 uppercase">Active Nodes</div> | |
| </div> | |
| <div className="bg-card p-4 rounded-lg border border-gray-700"> | |
| <div className="text-2xl font-bold text-primary">99.9%</div> | |
| <div className="text-xs text-gray-500 uppercase">Uptime</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="md:w-1/2 w-full"> | |
| <NetworkGraph /> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {/* Features Section (Tilt Cards) */} | |
| <section id="features" className="py-20 relative overflow-hidden"> | |
| {/* Background glow */} | |
| <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-dark to-gray-900 -z-10"></div> | |
| <div className="absolute -right-40 top-40 w-96 h-96 bg-primary/10 rounded-full blur-3xl -z-10"></div> | |
| <div className="container mx-auto px-6"> | |
| <div className="text-center mb-16"> | |
| <h2 className="text-4xl font-bold mb-4">Server <span className="text-secondary">Capabilities</span></h2> | |
| <p className="text-gray-400">Built for scale, security, and speed.</p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| {features.map((f, i) => ( | |
| <div key={i} className="feature-card-wrap h-64"> | |
| <TiltCard {...f} /> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| {/* Infinite Scroll / Feed Section */} | |
| <section id="connect" className="py-20 bg-black"> | |
| <div className="container mx-auto px-6"> | |
| <h2 className="text-4xl font-bold mb-12 text-center">Live <span className="text-primary">Transaction Feed</span></h2> | |
| <div className="flex flex-wrap justify-center -mx-4"> | |
| {Array.from({ length: 9 }).map((_, i) => ( | |
| <FeedItem | |
| key={i} | |
| title={`New Entrepreneur Onboarded: Node #${8000 + i}`} | |
| type={i % 2 === 0 ? "Server Sync" : "New Node"} | |
| /> | |
| ))} | |
| </div> | |
| <div className="text-center mt-12"> | |
| <button className="text-secondary border-b border-secondary pb-1 hover:text-white hover:border-white transition-colors"> | |
| Load More Data Stream... | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| {/* Footer */} | |
| <footer className="bg-gray-900 py-10 border-t border-gray-800"> | |
| <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center"> | |
| <div className="mb-4 md:mb-0"> | |
| <span className="text-lg font-bold">Node<span className="text-primary">Link</span></span> | |
| <p className="text-gray-500 text-sm">© 2023 Network Server. All rights reserved.</p> | |
| </div> | |
| <div className="flex space-x-6"> | |
| <a href="#" className="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a> | |
| <a href="#" className="text-gray-400 hover:text-white"><i data-feather="github"></i></a> | |
| <a href="#" className="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| ); | |
| }; | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<App />); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |