| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AnimaGraph - High-Quality 3D Anime Characters</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> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| sakura: '#ff7eb9', |
| midnight: '#150734', |
| lavender: '#c2b1fa', |
| neonblue: '#00c3ff', |
| velvet: '#a13d99', |
| }, |
| fontFamily: { |
| 'japanese': ['"Noto Sans JP"', 'sans-serif'], |
| 'anime': ['"Anime Ace"', 'sans-serif'], |
| } |
| } |
| } |
| } |
| </script> |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet"> |
| <style type="text/css"> |
| @font-face { |
| font-family: 'Anime Ace'; |
| src: url('https://raw.githubusercontent.com/AlexWarnes/fonts/master/OTF/Anime%20Ace.otf') format('opentype'); |
| } |
| |
| body { |
| background: linear-gradient(135deg, #0f0c29 0%, #150734 25%, #2a0d6e 75%, #0f0c29 100%); |
| color: #e5e7eb; |
| overflow-x: hidden; |
| font-family: 'Noto Sans JP', sans-serif; |
| } |
| |
| .character-card { |
| background: rgba(26, 16, 64, 0.8); |
| border-radius: 16px; |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| overflow: hidden; |
| border: 1px solid rgba(194, 177, 250, 0.2); |
| } |
| |
| .character-card:hover { |
| transform: translateY(-10px) scale(1.02); |
| box-shadow: 0 20px 30px rgba(178, 12, 248, 0.25); |
| border-color: rgba(194, 177, 250, 0.5); |
| } |
| |
| .model-viewer { |
| position: relative; |
| width: 100%; |
| height: 300px; |
| border-radius: 12px 12px 0 0; |
| overflow: hidden; |
| background: linear-gradient(135deg, #21005d 0%, #6750a4 100%); |
| } |
| |
| .model-placeholder { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| opacity: 0.9; |
| } |
| |
| .glowing-border { |
| border: 2px solid transparent; |
| border-image: linear-gradient(45deg, #ff7eb9, #8a2be2, #00c3ff); |
| border-image-slice: 1; |
| box-shadow: 0 0 20px rgba(138, 43, 226, 0.5); |
| } |
| |
| .nav-link { |
| position: relative; |
| padding-bottom: 5px; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: linear-gradient(90deg, #ff7eb9, #00c3ff); |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .hero-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(ellipse at center, rgba(21, 7, 52, 0.7) 0%, rgba(21, 7, 52, 0.9) 70%, rgba(21, 7, 52, 1) 100%); |
| } |
| |
| .model-shadow { |
| filter: drop-shadow(0 10px 15px rgba(138, 43, 226, 0.6)); |
| } |
| |
| .glow-text { |
| text-shadow: 0 0 10px rgba(255, 126, 185, 0.7), 0 0 20px rgba(255, 126, 185, 0.5); |
| } |
| |
| .stagger-animation > * { |
| opacity: 0; |
| transform: translateY(20px); |
| animation: fadeInUp 0.6s forwards; |
| } |
| |
| .stagger-animation > *:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| |
| .stagger-animation > *:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| |
| @keyframes fadeInUp { |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .model-viewer { |
| height: 250px; |
| } |
| |
| .hero-text { |
| font-size: 2.5rem !important; |
| } |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <header class="fixed w-full z-50 py-4 px-6 backdrop-blur-md bg-opacity-80"> |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-ghost text-sakura text-3xl mr-2"></i> |
| <span class="text-2xl font-bold font-anime tracking-wider text-white">ANIMAGRAPH</span> |
| </div> |
| |
| <nav class="hidden md:flex space-x-10"> |
| <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">HOME</a> |
| <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">GALLERY</a> |
| <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">TECH</a> |
| <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">ABOUT</a> |
| <a href="#" class="nav-link text-lavender font-medium hover:text-white transition-colors duration-300">CONTACT</a> |
| </nav> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="bg-transparent border-2 border-lavender hover:bg-lavender hover:text-midnight text-lavender px-4 py-2 rounded-full transition-all duration-300"> |
| LOG IN |
| </button> |
| <button class="bg-gradient-to-r from-sakura to-velvet text-white px-5 py-2 rounded-full hover:shadow-lg hover:shadow-purple-900/50 transition-all duration-300"> |
| SIGN UP |
| </button> |
| <button class="md:hidden text-lavender text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="relative pt-32 pb-20 px-6 overflow-hidden"> |
| <div class="hero-overlay"></div> |
| |
| <div class="max-w-7xl mx-auto relative z-10"> |
| <div class="flex flex-col lg:flex-row items-center"> |
| <div class="lg:w-1/2 mb-16 lg:mb-0 stagger-animation"> |
| <h1 class="hero-text text-5xl md:text-6xl font-bold leading-tight mb-6 text-white"> |
| <span class="block glow-text">ULTRA HD</span> |
| <span class="block bg-gradient-to-r from-sakura to-neonblue bg-clip-text text-transparent">3D ANIME CHARACTERS</span> |
| </h1> |
| <p class="text-lavender text-lg mb-8 max-w-lg leading-relaxed"> |
| Experience breathtaking 3D anime characters with cinematic quality rendering, hyper-realistic textures, and next-generation lighting techniques. Designed for games, animation, and digital art. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <button class="bg-gradient-to-r from-sakura to-velvet text-white px-8 py-3 rounded-full flex items-center hover:shadow-lg hover:shadow-purple-900/50 transition-all duration-300"> |
| <i class="fas fa-play-circle mr-2"></i> SHOWCASE DEMO |
| </button> |
| <button class="bg-transparent border-2 border-neonblue text-neonblue hover:bg-neonblue/10 px-8 py-3 rounded-full transition-all duration-300"> |
| LEARN TECH |
| </button> |
| </div> |
| </div> |
| |
| <div class="lg:w-1/2 flex justify-center stagger-animation"> |
| <div class="model-viewer glowing-border relative"> |
| <div class="model-placeholder"> |
| <img src="https://cdn.donmai.us/original/1c/8d/1c8da8c19c34c1f7ca7a8b4a36c28c71.gif" alt="3D Anime Character Showcase" class="w-full h-full object-cover"> |
| </div> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-midnight to-transparent p-4 text-center"> |
| <h3 class="font-bold text-xl text-white">YUMI - Cyber Samurai Edition</h3> |
| <p class="text-lavender text-sm">PGR-inspired Combat Model</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-1/4 left-10 w-24 h-24 rounded-full bg-gradient-to-br from-sakura/20 to-transparent blur-xl"></div> |
| <div class="absolute bottom-20 right-20 w-32 h-32 rounded-full bg-gradient-to-br from-neonblue/20 to-transparent blur-xl"></div> |
| </section> |
|
|
| |
| <section class="py-20 px-6"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-20"> |
| <h2 class="text-4xl font-bold text-white mb-4">NEXT-GEN CHARACTER TECHNOLOGY</h2> |
| <div class="h-1 w-32 bg-gradient-to-r from-sakura to-neonblue mx-auto rounded-full"></div> |
| <p class="text-lavender max-w-2xl mx-auto mt-6"> |
| Our characters feature industry-leading technologies that bring anime designs to life with unprecedented realism and detail. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| <div class="p-8 character-card flex flex-col items-center text-center"> |
| <div class="w-20 h-20 rounded-full bg-gradient-to-br from-sakura to-velvet flex items-center justify-center mb-6"> |
| <i class="fas fa-atom text-white text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Subsurface Scattering</h3> |
| <p class="text-lavender"> |
| Realistic skin rendering with advanced light penetration simulation for natural-looking skin. |
| </p> |
| </div> |
| |
| <div class="p-8 character-card flex flex-col items-center text-center"> |
| <div class="w-20 h-20 rounded-full bg-gradient-to-br from-lavender to-blue-600 flex items-center justify-center mb-6"> |
| <i class="fas fa-hat-wizard text-white text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">HDRI Lighting</h3> |
| <p class="text-lavender"> |
| Photorealistic environment-based lighting with accurate reflections and highlights. |
| </p> |
| </div> |
| |
| <div class="p-8 character-card flex flex-col items-center text-center"> |
| <div class="w-20 h-20 rounded-full bg-gradient-to-br from-neonblue to-cyan-400 flex items-center justify-center mb-6"> |
| <i class="fas fa-wind text-white text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Dynamic Simulation</h3> |
| <p class="text-lavender"> |
| Physics-based cloth, hair, and accessory movement that responds realistically to motion. |
| </p> |
| </div> |
| |
| <div class="p-8 character-card flex flex-col items-center text-center"> |
| <div class="w-20 h-20 rounded-full bg-gradient-to-br from-velvet to-purple-600 flex items-center justify-center mb-6"> |
| <i class="fas fa-eye text-white text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">Expressive Rigging</h3> |
| <p class="text-lavender"> |
| Sophisticated facial rigs with 100+ controls for lifelike expressions and emotions. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-6 bg-gradient-to-b from-midnight/60 to-midnight"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="flex justify-between items-center mb-12 flex-wrap"> |
| <h2 class="text-4xl font-bold text-white">FEATURED CHARACTERS</h2> |
| <div class="mt-4 md:mt-0"> |
| <div class="flex space-x-2"> |
| <button class="px-4 py-2 text-lavender border border-lavender hover:bg-lavender/10 rounded-full transition-colors">PGR Series</button> |
| <button class="px-4 py-2 text-lavender border border-lavender hover:bg-lavender/10 rounded-full transition-colors">Bishoujo</button> |
| <button class="px-4 py-2 text-lavender border border-lavender hover:bg-lavender/10 rounded-full transition-colors">Cyberpunk</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="character-card"> |
| <div class="model-viewer"> |
| <div class="model-placeholder"> |
| <img src="https://cdn.donmai.us/original/7d/c9/7dc9f70b77d25c1acf1dda7c3d9b7c9d.gif" alt="Cyber Angel" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="font-bold text-xl text-white">ASTRIA</h3> |
| <p class="text-lavender">Celestial Guardian</p> |
| </div> |
| <div class="bg-sakura/10 text-sakura px-3 py-1 rounded-full text-sm">NEW</div> |
| </div> |
| <div class="flex mt-4 mb-3"> |
| <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#PGR</div> |
| <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Bishoujo</div> |
| <div class="bg-midnight rounded-full px-3 py-1 text-xs text-lavender">#Fantasy</div> |
| </div> |
| <p class="text-lavender text-sm mt-4"> |
| High-poly model with physically based rendering. Advanced armor dynamics and glowing energy effects. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="character-card"> |
| <div class="model-viewer"> |
| <div class="model-placeholder"> |
| <img src="https://cdn.donmai.us/original/5d/5f/5d5fb9c1d0b1d6c8f07d0a5d1ff6ddaf.gif" alt="Cyber Ninja" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="font-bold text-xl text-white">KIRAKIRA</h3> |
| <p class="text-lavender">Neon Shinobi</p> |
| </div> |
| <div class="bg-neonblue/10 text-neonblue px-3 py-1 rounded-full text-sm">POPULAR</div> |
| </div> |
| <div class="flex mt-4 mb-3"> |
| <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Cyberpunk</div> |
| <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Ninja</div> |
| <div class="bg-midnight rounded-full px-3 py-1 text-xs text-lavender">#Stealth</div> |
| </div> |
| <p class="text-lavender text-sm mt-4"> |
| Advanced cloth simulation with dynamic slicing effects and holographic weapon system. |
| </p> |
| </div> |
| </div> |
| |
| |
| <div class="character-card"> |
| <div class="model-viewer"> |
| <div class="model-placeholder"> |
| <img src="https://cdn.donmai.us/original/44/d1/44d15d0f19c7f7b6cfa7f9a5f00e6b4f.gif" alt="Void Sorceress" class="w-full h-full object-cover"> |
| </div> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <h3 class="font-bold text-xl text-white">LUMINA</h3> |
| <p class="text-lavender">Void Sorceress</p> |
| </div> |
| <div class="bg-velvet/10 text-velvet px-3 py-1 rounded-full text-sm">PREMIUM</div> |
| </div> |
| <div class="flex mt-4 mb-3"> |
| <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Mage</div> |
| <div class="bg-midnight rounded-full px-3 py-1 mr-2 text-xs text-lavender">#Magic</div> |
| <div class="bg-midnight rounded-full px-3 py-1 text-xs text-lavender">#Ethereal</div> |
| </div> |
| <p class="text-lavender text-sm mt-4"> |
| Dynamic particle effects system with reactive magic trails. Real-time hair and cloak physics. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-6"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-white mb-4">ANIME VISUAL STYLES</h2> |
| <div class="h-1 w-32 bg-gradient-to-r from-lavender to-sakura mx-auto rounded-full"></div> |
| <p class="text-lavender max-w-2xl mx-auto mt-6"> |
| We specialize in various anime art styles, blending traditional aesthetics with modern 3D techniques. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center"> |
| <div class="lg:col-span-2"> |
| <div class="grid grid-cols-2 gap-8"> |
| <div> |
| <div class="bg-gradient-to-br from-purple-900/70 to-transparent border border-lavender/30 p-6 rounded-xl mb-8"> |
| <i class="fas fa-fire text-sakura text-3xl mb-4"></i> |
| <h3 class="text-xl font-bold text-white mb-2">2.5D Cel Shading</h3> |
| <p class="text-lavender"> |
| Hybrid style combining 2D anime aesthetics with 3D depth for the perfect blend. |
| </p> |
| </div> |
| <div class="bg-gradient-to-br from-blue-900/70 to-transparent border border-lavender/30 p-6 rounded-xl"> |
| <i class="fas fa-bolt text-neonblue text-3xl mb-4"></i> |
| <h3 class="text-xl font-bold text-white mb-2">Dynamic Lighting</h3> |
| <p class="text-lavender"> |
| Cinematic lighting techniques adapted for anime-style characters. |
| </p> |
| </div> |
| </div> |
| <div class="pt-10"> |
| <div class="bg-gradient-to-br from-pink-900/70 to-transparent border border-lavender/30 p-6 rounded-xl mb-8"> |
| <i class="fas fa-rainbow text-lavender text-3xl mb-4"></i> |
| <h3 class="text-xl font-bold text-white mb-2">PBR Textures</h3> |
| <p class="text-lavender"> |
| Physically-based materials with anime-inspired color palettes. |
| </p> |
| </div> |
| <div class="bg-gradient-to-br from-purple-900/70 to-transparent border border-lavender/30 p-6 rounded-xl"> |
| <i class="fas fa-magic text-velvet text-3xl mb-4"></i> |
| <h3 class="text-xl font-bold text-white mb-2">Post-processing FX</h3> |
| <p class="text-lavender"> |
| Bloom, rim lighting, and anime-specific effects to enhance the visuals. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex justify-center stagger-animation"> |
| <div class="relative"> |
| <div class="model-shadow"> |
| <div class="w-72 h-72 rounded-full bg-gradient-to-r from-sakura to-velvet absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 blur-3xl opacity-40"></div> |
| <img src="https://cdn.donmai.us/original/c6/9d/c69d31f6ffed0b3f7d5fcce6d3cbc8c1.png" alt="Art Style Comparison" class="relative rounded-2xl border-2 border-lavender/30"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-6 bg-gradient-to-b from-midnight/70 to-midnight"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-4xl font-bold text-white mb-4">RENDERING TECHNOLOGY</h2> |
| <div class="h-1 w-32 bg-gradient-to-r from-neonblue to-cyan-400 mx-auto rounded-full"></div> |
| <p class="text-lavender max-w-2xl mx-auto mt-6"> |
| Our rendering engine surpasses traditional anime character models with industry-leading technology. |
| </p> |
| </div> |
| |
| <div class="bg-gradient-to-br from-midnight/90 to-purple-900/20 rounded-3xl border border-lavender/30 p-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-10"> |
| <div> |
| <h3 class="text-2xl font-bold text-white mb-4 glow-text">CHARACTER DETAILS</h3> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="bg-neonblue/20 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-neonblue"></i> |
| </div> |
| <span class="text-lavender">4K-8K texture resolution with advanced compression</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-neonblue/20 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-neonblue"></i> |
| </div> |
| <span class="text-lavender">Ray-traced reflections on metallic surfaces</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-neonblue/20 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-neonblue"></i> |
| </div> |
| <span class="text-lavender">Advanced multi-layered subsurface scattering</span> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-neonblue/20 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-neonblue"></i> |
| </div> |
| <span class="text-lavender">Anime-specific eye shaders with parallax effect</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-2xl font-bold text-white mb-4 glow-text">TECHNICAL SPECS</h3> |
| <div class="space-y-5"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-lavender">Polygon Count</span> |
| <span class="text-sakura">200K+</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-sakura to-velvet h-2 rounded-full" style="width: 95%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-lavender">Texture Layers</span> |
| <span class="text-sakura">12-20 Layers</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-neonblue to-cyan-400 h-2 rounded-full" style="width: 85%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-lavender">Bone Rigging</span> |
| <span class="text-sakura">150-250 Bones</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-lavender to-blue-500 h-2 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-lavender">Animation Support</span> |
| <span class="text-sakura">600+ Blendshapes</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-gradient-to-r from-velvet to-purple-600 h-2 rounded-full" style="width: 90%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="bg-gradient-to-br from-midnight to-purple-900/30 border border-lavender/30 rounded-2xl p-6 text-center w-full"> |
| <div class="inline-block bg-gradient-to-br from-sakura to-velvet p-4 rounded-full mb-6"> |
| <i class="fas fa-dice-d20 text-white text-4xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-white mb-3">REALTIME RAYTRACING</h3> |
| <p class="text-lavender mb-6"> |
| Our proprietary engine supports real-time raytracing for reflections, shadows, and global illumination. |
| </p> |
| <button class="bg-gradient-to-r from-sakura to-velvet text-white px-6 py-2 rounded-full"> |
| Tech Demo |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-6"> |
| <div class="max-w-5xl mx-auto text-center bg-gradient-to-br from-midnight to-purple-900/20 rounded-3xl border border-lavender/30 p-12 relative overflow-hidden"> |
| <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-gradient-to-br from-sakura/20 to-transparent blur-3xl"></div> |
| <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full bg-gradient-to-br from-neonblue/20 to-transparent blur-3xl"></div> |
| |
| <div class="relative z-10"> |
| <h2 class="text-4xl font-bold text-white mb-6 glow-text">START CREATING TODAY</h2> |
| <p class="text-lavender text-xl max-w-2xl mx-auto mb-10"> |
| Join thousands of developers and artists using our high-quality 3D anime characters in their projects. |
| </p> |
| |
| <div class="flex flex-col md:flex-row justify-center gap-6"> |
| <button class="bg-gradient-to-r from-sakura to-velvet hover:from-sakura/90 hover:to-velvet/90 text-white px-8 py-4 rounded-full flex items-center justify-center transition-all duration-300"> |
| <i class="fas fa-download text-xl mr-3"></i> DOWNLOAD STARTER KIT |
| </button> |
| <button class="bg-gradient-to-r from-neonblue to-cyan-500 hover:from-neonblue/90 hover:to-cyan-500/90 text-white px-8 py-4 rounded-full flex items-center justify-center transition-all duration-300"> |
| <i class="fas fa-user-plus text-xl mr-3"></i> JOIN COMMUNITY |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="border-t border-lavender/20 py-12 px-6"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-10"> |
| <div> |
| <div class="flex items-center mb-6"> |
| <i class="fas fa-ghost text-sakura text-2xl mr-2"></i> |
| <span class="text-xl font-bold font-anime tracking-wider text-white">ANIMAGRAPH</span> |
| </div> |
| <p class="text-lavender mb-6"> |
| High-quality 3D anime characters with AAA game-quality graphics for all your creative projects. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-midnight/80 flex items-center justify-center hover:bg-sakura/20 transition-colors"> |
| <i class="fab fa-twitter text-lavender"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-midnight/80 flex items-center justify-center hover:bg-sakura/20 transition-colors"> |
| <i class="fab fa-discord text-lavender"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-midnight/80 flex items-center justify-center hover:bg-sakura/20 transition-colors"> |
| <i class="fab fa-artstation text-lavender"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-midnight/80 flex items-center justify-center hover:bg-sakura/20 transition-colors"> |
| <i class="fab fa-youtube text-lavender"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-white font-bold text-lg mb-6">RESOURCES</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Character Library</a></li> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Documentation</a></li> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Tutorials</a></li> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Asset Store</a></li> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Shader Library</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-white font-bold text-lg mb-6">COMPANY</h3> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">About Us</a></li> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Careers</a></li> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Contact</a></li> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">Blog</a></li> |
| <li><a href="#" class="text-lavender hover:text-neonblue transition-colors">License</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-white font-bold text-lg mb-6">SUBSCRIBE</h3> |
| <p class="text-lavender mb-4"> |
| Get updates on new characters, features, and technology releases. |
| </p> |
| <div class="flex"> |
| <input type="email" placeholder="Your email" class="bg-midnight/70 border border-lavender/30 text-white rounded-l-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-sakura w-full"> |
| <button class="bg-gradient-to-r from-sakura to-velvet px-4 rounded-r-lg"> |
| <i class="fas fa-paper-plane text-white"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-lavender/10 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-lavender text-sm mb-4 md:mb-0"> |
| © 2023 ANIMAGRAPH. All rights reserved. Anime characters for demonstration purposes only. |
| </p> |
| <div class="flex space-x-8"> |
| <a href="#" class="text-lavender hover:text-neonblue text-sm">Terms</a> |
| <a href="#" class="text-lavender hover:text-neonblue text-sm">Privacy</a> |
| <a href="#" class="text-lavender hover:text-neonblue text-sm">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const staggerElements = document.querySelectorAll('.stagger-animation'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.visibility = 'visible'; |
| const children = entry.target.children; |
| for (let i = 0; i < children.length; i++) { |
| setTimeout(() => { |
| children[i].style.opacity = 1; |
| children[i].style.transform = 'translateY(0)'; |
| }, 200 * i); |
| } |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, { threshold: 0.2 }); |
| |
| staggerElements.forEach(el => { |
| el.style.visibility = 'hidden'; |
| observer.observe(el); |
| }); |
| |
| |
| const characterCards = document.querySelectorAll('.character-card'); |
| characterCards.forEach(card => { |
| card.addEventListener('mousemove', (e) => { |
| const cardRect = card.getBoundingClientRect(); |
| const x = e.clientX - cardRect.left; |
| const y = e.clientY - cardRect.top; |
| |
| const centerX = cardRect.width / 2; |
| const centerY = cardRect.height / 2; |
| |
| const angleY = (x - centerX) / 25; |
| const angleX = (centerY - y) / 25; |
| |
| card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.02)`; |
| }); |
| |
| card.addEventListener('mouseleave', () => { |
| card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)'; |
| }); |
| }); |
| }); |
| </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=Kon2hai/awesome" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
