🐳 19/05 - 18:20 - n you please add a mobile version a tablet version and also fix the current version on the landing page, and I want you to add images that fit each of the categories or each of the
060b66f verified | <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NSFWStudio — The AI Creation Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }, | |
| colors: { | |
| bg: 'oklch(0.07 0.006 285)', surface: 'oklch(0.12 0.02 285)', 'surface-2': 'oklch(0.16 0.025 285)', 'surface-3': 'oklch(0.20 0.028 285)', | |
| fg: 'oklch(0.97 0.005 285)', muted: 'oklch(0.55 0.02 285)', primary: 'oklch(0.70 0.28 350)', 'primary-foreground': 'oklch(0.98 0.005 285)', | |
| secondary: 'oklch(0.75 0.15 215)', accent: 'oklch(0.80 0.18 85)', border: 'oklch(0.22 0.02 285)', ring: 'oklch(0.70 0.28 350)', | |
| destructive: 'oklch(0.55 0.22 25)', success: 'oklch(0.65 0.2 145)', | |
| }, | |
| keyframes: { | |
| 'fade-up': { 'from': { opacity: '0', transform: 'translateY(30px) scale(0.97)' }, 'to': { opacity: '1', transform: 'translateY(0) scale(1)' } }, | |
| 'fade-in': { 'from': { opacity: '0' }, 'to': { opacity: '1' } }, | |
| 'marquee': { 'from': { transform: 'translateX(0)' }, 'to': { transform: 'translateX(-50%)' } }, | |
| 'pulse-glow': { '0%, 100%': { opacity: '0.4', transform: 'scale(1)' }, '50%': { opacity: '0.8', transform: 'scale(1.05)' } }, | |
| shimmer: { '0%': { backgroundPosition: '-200% 0' }, '100%': { backgroundPosition: '200% 0' } }, | |
| 'spin-slow': { 'to': { transform: 'rotate(360deg)' } }, | |
| 'float-3d': { '0%, 100%': { transform: 'translateY(0) rotateX(0) rotateY(0)' }, '25%': { transform: 'translateY(-12px) rotateX(3deg) rotateY(-3deg)' }, '50%': { transform: 'translateY(-6px) rotateX(-2deg) rotateY(4deg)' }, '75%': { transform: 'translateY(-14px) rotateX(2deg) rotateY(-2deg)' } }, | |
| 'glow-pulse': { '0%, 100%': { boxShadow: '0 0 20px oklch(0.70 0.28 350 / 0.3), 0 0 60px oklch(0.70 0.28 350 / 0.1)' }, '50%': { boxShadow: '0 0 30px oklch(0.70 0.28 350 / 0.5), 0 0 80px oklch(0.70 0.28 350 / 0.2)' } }, | |
| 'border-dance': { '0%, 100%': { backgroundPosition: '0% 50%' }, '50%': { backgroundPosition: '100% 50%' } }, | |
| 'slide-in-right': { 'from': { transform: 'translateX(100px) rotateY(-15deg)', opacity: '0' }, 'to': { transform: 'translateX(0) rotateY(0)', opacity: '1' } }, | |
| 'morph': { '0%, 100%': { borderRadius: '60% 40% 30% 70% / 60% 30% 70% 40%' }, '25%': { borderRadius: '30% 60% 70% 40% / 50% 60% 30% 60%' }, '50%': { borderRadius: '50% 60% 30% 60% / 40% 70% 60% 30%' }, '75%': { borderRadius: '60% 30% 60% 40% / 70% 40% 50% 60%' } }, | |
| }, | |
| animation: { | |
| 'fade-up': 'fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'fade-in': 'fade-in 0.6s ease-out forwards', | |
| 'marquee': 'marquee 30s linear infinite', | |
| 'pulse-glow': 'pulse-glow 3s ease-in-out infinite', | |
| shimmer: 'shimmer 2s linear infinite', | |
| 'spin-slow': 'spin-slow 8s linear infinite', | |
| 'float-3d': 'float-3d 6s ease-in-out infinite', | |
| 'glow-pulse': 'glow-pulse 3s ease-in-out infinite', | |
| 'border-dance': 'border-dance 3s ease infinite', | |
| 'slide-in-right': 'slide-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| 'morph': 'morph 8s ease-in-out infinite', | |
| }, | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| body { background-color: oklch(0.07 0.006 285); color: oklch(0.97 0.005 285); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } | |
| .glass { background: oklch(0.14 0.015 285 / 0.6); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); border: 1px solid oklch(0.25 0.02 285 / 0.5); } | |
| .glass-strong { background: oklch(0.14 0.015 285 / 0.85); backdrop-filter: blur(32px) saturate(1.4); -webkit-backdrop-filter: blur(32px) saturate(1.4); border: 1px solid oklch(0.25 0.02 285 / 0.6); } | |
| .gradient-text { background: linear-gradient(135deg, oklch(0.70 0.28 350), oklch(0.75 0.15 215)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .gradient-text-warm { background: linear-gradient(135deg, oklch(0.70 0.28 350), oklch(0.80 0.18 60)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .gradient-text-hot { background: linear-gradient(135deg, oklch(0.65 0.32 10), oklch(0.70 0.28 350), oklch(0.80 0.18 60)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .grid-pattern { background-image: linear-gradient(oklch(0.22 0.02 285 / 0.3) 1px, transparent 1px), linear-gradient(90deg, oklch(0.22 0.02 285 / 0.3) 1px, transparent 1px); background-size: 64px 64px; } | |
| .dot-pattern { background-image: radial-gradient(oklch(0.25 0.02 285 / 0.4) 1px, transparent 1px); background-size: 24px 24px; } | |
| /* 3D Effects */ | |
| .perspective { perspective: 1200px; } | |
| .preserve-3d { transform-style: preserve-3d; } | |
| .card-3d { transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease; } | |
| .card-3d:hover { transform: perspective(1000px) rotateY(-4deg) rotateX(3deg) translateZ(30px); box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 80px oklch(0.70 0.28 350 / 0.08), inset 0 1px 0 oklch(0.30 0.02 285 / 0.3); } | |
| .depth-shadow { box-shadow: 0 4px 6px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.2), 0 24px 48px rgba(0,0,0,0.25); } | |
| .hover-lift { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; } | |
| .hover-lift:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 25px 50px rgba(0,0,0,0.4), 0 0 0 1px oklch(0.70 0.28 350 / 0.3), 0 0 40px oklch(0.70 0.28 350 / 0.1); } | |
| .glow-border { position: relative; isolation: isolate; } | |
| .glow-border::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, oklch(0.70 0.28 350), oklch(0.75 0.15 215), oklch(0.80 0.18 85)); z-index: -1; opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; filter: blur(12px); } | |
| .glow-border:hover::after { opacity: 0.7; transform: scale(1.02); } | |
| .shine { position: relative; overflow: hidden; } | |
| .shine::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, oklch(0.70 0.28 350 / 0.08), transparent 30%); animation: spin-slow 8s linear infinite; z-index: 0; } | |
| .gradient-border-animated { position: relative; isolation: isolate; } | |
| .gradient-border-animated::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(270deg, oklch(0.70 0.28 350), oklch(0.75 0.15 215), oklch(0.80 0.18 85), oklch(0.70 0.28 350)); background-size: 300% 100%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: border-dance 3s ease infinite; opacity: 0; transition: opacity 0.3s ease; } | |
| .gradient-border-animated:hover::before { opacity: 1; } | |
| .text-glow { text-shadow: 0 0 20px oklch(0.70 0.28 350 / 0.5), 0 0 40px oklch(0.70 0.28 350 / 0.2); } | |
| .bg-mesh { background: radial-gradient(at 20% 20%, oklch(0.70 0.28 350 / 0.12), transparent 50%), radial-gradient(at 80% 80%, oklch(0.75 0.15 215 / 0.08), transparent 50%), radial-gradient(at 50% 50%, oklch(0.80 0.18 85 / 0.04), transparent 70%); } | |
| .morph-bg { animation: morph 8s ease-in-out infinite, pulse-glow 3s ease-in-out infinite; } | |
| /* Reveal animations */ | |
| .reveal { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } | |
| .reveal.visible { opacity: 1; transform: translateY(0) scale(1); } | |
| .reveal-delay-1 { transition-delay: 0.1s; } | |
| .reveal-delay-2 { transition-delay: 0.2s; } | |
| .reveal-delay-3 { transition-delay: 0.3s; } | |
| .reveal-delay-4 { transition-delay: 0.4s; } | |
| .reveal-delay-5 { transition-delay: 0.5s; } | |
| /* Other */ | |
| .typing-cursor::after { content: '|'; animation: blink 1s step-end infinite; color: oklch(0.70 0.28 350); font-weight: 300; } | |
| @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } | |
| @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } | |
| .animate-float { animation: float 4s ease-in-out infinite; } | |
| .animate-float-delay { animation: float 4s ease-in-out 1s infinite; } | |
| .animate-float-slow { animation: float 6s ease-in-out infinite; } | |
| .card-highlight { position: relative; } | |
| .card-highlight::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, oklch(0.70 0.28 350 / 0.5), oklch(0.75 0.15 215 / 0.15), transparent, transparent); z-index: -1; opacity: 0; transition: opacity 0.4s ease; } | |
| .card-highlight:hover::before { opacity: 1; } | |
| .tabular-nums { font-variant-numeric: tabular-nums; } | |
| ::selection { background: oklch(0.70 0.28 350 / 0.3); color: white; } | |
| body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } | |
| .scroll-progress { position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(90deg, oklch(0.70 0.28 350), oklch(0.75 0.15 215), oklch(0.80 0.18 85)); z-index: 100; transition: width 0.1s linear; box-shadow: 0 0 15px oklch(0.70 0.28 350 / 0.5); } | |
| .faq-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1); } | |
| .faq-content.open { grid-template-rows: 1fr; } | |
| .faq-content > div { overflow: hidden; } | |
| .stat-number { background: linear-gradient(135deg, oklch(0.97 0.005 285), oklch(0.70 0.28 350)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } | |
| /* 3D interactive card */ | |
| .interactive-3d { transition: transform 0.15s ease-out, box-shadow 0.3s ease; } | |
| .interactive-3d .card-inner { transition: transform 0.15s ease-out; } | |
| /* Age gate */ | |
| .age-blur { filter: blur(20px) brightness(0.5); transition: filter 0.6s ease; pointer-events: none; } | |
| .age-blur.revealed { filter: none; pointer-events: auto; } | |
| /* Mobile & Tablet Responsive */ | |
| @media (max-width: 640px) { | |
| .hero-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } | |
| .hero-cta-group { flex-direction: column; width: 100%; } | |
| .hero-cta-group a { width: 100%; justify-content: center; } | |
| .features-grid { grid-template-columns: 1fr; } | |
| .pricing-grid { grid-template-columns: 1fr; overflow-x: auto; } | |
| .creators-grid { grid-template-columns: repeat(2, 1fr); } | |
| .testimonials-grid { grid-template-columns: 1fr; } | |
| .live-section { flex-direction: column; } | |
| .live-feed { width: 100%; } | |
| .live-creations { grid-template-columns: repeat(2, 1fr); } | |
| .footer-grid { grid-template-columns: 1fr; } | |
| .footer-form { flex-direction: column; } | |
| .cta-input-group { flex-direction: column; width: 100%; } | |
| .cta-input-group input { width: 100%; } | |
| .cta-input-group a { width: 100%; justify-content: center; } | |
| .cta-trust-badges { flex-direction: column; align-items: center; gap: 8px; } | |
| .faq-section { padding: 48px 0; } | |
| .h2-responsive { font-size: 1.875rem; } | |
| .h1-responsive { font-size: 2.25rem; } | |
| } | |
| @media (min-width: 641px) and (max-width: 1023px) { | |
| .hero-stats-grid { grid-template-columns: repeat(4, 1fr); } | |
| .features-grid { grid-template-columns: repeat(2, 1fr); } | |
| .creators-grid { grid-template-columns: repeat(3, 1fr); } | |
| .testimonials-grid { grid-template-columns: repeat(2, 1fr); } | |
| .pricing-grid { grid-template-columns: repeat(3, 1fr); } | |
| .live-creations { grid-template-columns: repeat(2, 1fr); } | |
| .h2-responsive { font-size: 2.25rem; } | |
| } | |
| @media (min-width: 768px) and (max-width: 1023px) { | |
| .creators-grid { grid-template-columns: repeat(3, 1fr); } | |
| } | |
| /* Touch improvements */ | |
| @media (hover: none) and (pointer: coarse) { | |
| .card-3d:hover { transform: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); } | |
| .hover-lift:hover { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } | |
| .gradient-border-animated::before { opacity: 0 ; } | |
| button, a { min-height: 44px; } | |
| } | |
| /* Feature card images */ | |
| .feature-card-img { position: absolute; bottom: 0; right: 0; width: 50%; height: 70%; opacity: 0.15; pointer-events: none; object-fit: cover; mask-image: linear-gradient(to top left, black, transparent); -webkit-mask-image: linear-gradient(to top left, black, transparent); transition: opacity 0.5s ease; } | |
| .group:hover .feature-card-img { opacity: 0.3; } | |
| .step-icon-ring { position: relative; } | |
| .step-icon-ring::before { content: ''; position: absolute; inset: -4px; border-radius: 1rem; border: 2px dashed; opacity: 0.2; } | |
| </style> | |
| </head> | |
| <body class="antialiased overflow-x-hidden"> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect, useRef, useCallback } = React; | |
| /* ─── Age Gate ─── */ | |
| const AgeGate = ({ onVerified }) => { | |
| const [visible, setVisible] = useState(true); | |
| const [dob, setDob] = useState(''); | |
| const handleConfirm = () => { setVisible(false); onVerified(); }; | |
| useEffect(() => { document.body.style.overflow = visible ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [visible]); | |
| if (!visible) return null; | |
| return ( | |
| <div className="fixed inset-0 z-[200] flex items-center justify-center bg-bg/95 backdrop-blur-xl"> | |
| <div className="absolute inset-0 bg-mesh opacity-40 pointer-events-none" /> | |
| <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[160px] morph-bg pointer-events-none" /> | |
| <div className="relative z-10 max-w-md w-full mx-4 p-8 rounded-3xl bg-surface border border-border shine depth-shadow"> | |
| <div className="relative z-10 text-center"> | |
| <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6 animate-glow-pulse"> | |
| <i data-lucide="shield-alert" className="w-8 h-8 text-primary" style={{width:32,height:32}}></i> | |
| </div> | |
| <h2 className="text-2xl font-bold mb-2">Age Verification Required</h2> | |
| <p className="text-muted mb-6 text-sm leading-relaxed">This platform contains explicit adult content. You must be 18+ to enter. By proceeding, you confirm that you are of legal age in your jurisdiction.</p> | |
| <div className="space-y-4"> | |
| <div> | |
| <label className="block text-sm font-medium text-fg mb-2 text-left">Date of Birth</label> | |
| <input type="date" value={dob} onChange={e => setDob(e.target.value)} className="w-full px-4 py-3 rounded-xl bg-surface-2 border border-border text-fg focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" /> | |
| </div> | |
| <button onClick={handleConfirm} className="w-full py-4 rounded-xl bg-primary text-primary-foreground font-bold hover:brightness-110 transition-all shadow-lg shadow-primary/30 text-base group flex items-center justify-center gap-2"> | |
| I am 18 or older — Enter <i data-lucide="arrow-right" className="w-5 h-5 group-hover:translate-x-1 transition-transform" style={{width:20,height:20}}></i> | |
| </button> | |
| <button onClick={() => window.location.href = 'https://google.com'} className="w-full py-3 rounded-xl border border-border text-sm text-muted hover:text-fg hover:bg-surface-2 transition-colors"> | |
| I am under 18 — Leave | |
| </button> | |
| </div> | |
| <p className="text-xs text-muted/50 mt-6">By entering, you agree to our Terms of Service and confirm your age.</p> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| /* ─── Hooks ─── */ | |
| const useScrollReveal = () => { | |
| useEffect(() => { | |
| const observer = new IntersectionObserver( | |
| (entries) => { entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); }); }, | |
| { threshold: 0.08, rootMargin: '0px 0px -30px 0px' } | |
| ); | |
| document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); | |
| return () => observer.disconnect(); | |
| }, []); | |
| }; | |
| const useCountUp = (end, duration = 2000) => { | |
| const [count, setCount] = useState(0); | |
| const ref = useRef(null); | |
| const isInView = useRef(false); | |
| useEffect(() => { | |
| const observer = new IntersectionObserver(([entry]) => { | |
| if (entry.isIntersecting && !isInView.current) { | |
| isInView.current = true; | |
| const startTime = performance.now(); | |
| const animate = (now) => { | |
| const elapsed = now - startTime; | |
| const progress = Math.min(elapsed / duration, 1); | |
| const eased = 1 - Math.pow(1 - progress, 3); | |
| setCount(Math.floor(eased * end)); | |
| if (progress < 1) requestAnimationFrame(animate); | |
| }; | |
| requestAnimationFrame(animate); | |
| } | |
| }, { threshold: 0.5 }); | |
| if (ref.current) observer.observe(ref.current); | |
| return () => observer.disconnect(); | |
| }, [end, duration]); | |
| return [count, ref]; | |
| }; | |
| const use3DCard = () => { | |
| const cardRef = useRef(null); | |
| const handleMove = useCallback((e) => { | |
| const card = cardRef.current; | |
| if (!card) return; | |
| const rect = card.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| const centerX = rect.width / 2; | |
| const centerY = rect.height / 2; | |
| const rotateX = (y - centerY) / centerY * -8; | |
| const rotateY = (x - centerX) / centerX * 8; | |
| card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px) scale(1.02)`; | |
| }, []); | |
| const handleLeave = useCallback(() => { | |
| const card = cardRef.current; | |
| if (!card) return; | |
| card.style.transform = ''; | |
| }, []); | |
| return { cardRef, handleMove, handleLeave }; | |
| }; | |
| /* ─── Icon Component ─── */ | |
| const Icon = ({ name, size = 20, className = "", strokeWidth = 2 }) => { | |
| const ref = useRef(null); | |
| useEffect(() => { | |
| if (ref.current) { | |
| const existing = ref.current.querySelector('svg'); | |
| if (existing) existing.remove(); | |
| const svg = lucide.createElement(lucide.icons[name]); | |
| if (svg) { | |
| svg.setAttribute('width', size); | |
| svg.setAttribute('height', size); | |
| svg.setAttribute('stroke-width', strokeWidth); | |
| ref.current.appendChild(svg); | |
| } | |
| } | |
| }, [name, size, className, strokeWidth]); | |
| return <span ref={ref} className={`inline-flex items-center justify-center ${className}`} style={{ width: size, height: size }} />; | |
| }; | |
| /* ─── Top Bar ─── */ | |
| const TopBar = () => ( | |
| <div className="fixed top-0 left-0 right-0 z-[60] h-8 bg-bg/90 border-b border-border/50 flex items-center justify-center px-4 backdrop-blur-md"> | |
| <div className="hidden sm:flex items-center gap-6 text-xs text-muted"> | |
| <a href="dashboard.html" className="hover:text-fg transition-colors duration-200">Dashboard</a> | |
| <a href="generator.html" className="hover:text-fg transition-colors duration-200">Generator</a> | |
| <a href="models.html" className="hover:text-fg transition-colors duration-200">Models</a> | |
| <a href="marketplace.html" className="hover:text-fg transition-colors duration-200">Marketplace</a> | |
| <a href="api-keys.html" className="hover:text-fg transition-colors duration-200">API</a> | |
| <a href="signin.html" className="text-primary font-medium hover:underline transition-all">Sign In</a> | |
| </div> | |
| <div className="flex sm:hidden items-center gap-4 text-xs text-muted"> | |
| <a href="dashboard.html" className="hover:text-fg transition-colors duration-200">Dashboard</a> | |
| <a href="generator.html" className="hover:text-fg transition-colors duration-200">Generator</a> | |
| <a href="signin.html" className="text-primary font-medium hover:underline transition-all">Sign In</a> | |
| </div> | |
| </div> | |
| ); | |
| /* ─── Scroll Progress ─── */ | |
| const ScrollProgress = () => { | |
| const [progress, setProgress] = useState(0); | |
| useEffect(() => { | |
| const onScroll = () => { | |
| const scrollTop = window.scrollY; | |
| const docHeight = document.documentElement.scrollHeight - window.innerHeight; | |
| setProgress(docHeight > 0 ? (scrollTop / docHeight) * 100 : 0); | |
| }; | |
| window.addEventListener('scroll', onScroll, { passive: true }); | |
| return () => window.removeEventListener('scroll', onScroll); | |
| }, []); | |
| return <div className="scroll-progress" style={{ width: `${progress}%` }} />; | |
| }; | |
| /* ─── Back to Top ─── */ | |
| const BackToTop = () => { | |
| const [visible, setVisible] = useState(false); | |
| useEffect(() => { | |
| const onScroll = () => setVisible(window.scrollY > 600); | |
| window.addEventListener('scroll', onScroll, { passive: true }); | |
| return () => window.removeEventListener('scroll', onScroll); | |
| }, []); | |
| return ( | |
| <button | |
| onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} | |
| className={`fixed bottom-6 right-6 z-50 w-12 h-12 rounded-xl bg-primary text-primary-foreground flex items-center justify-center shadow-lg shadow-primary/30 hover:shadow-primary/50 hover:scale-110 transition-all duration-300 ${visible ? 'opacity-100 translate-y-0 pointer-events-auto' : 'opacity-0 translate-y-4 pointer-events-none'}`} | |
| > | |
| <Icon name="arrow-up" size={20} /> | |
| </button> | |
| ); | |
| }; | |
| /* ─── Navbar ─── */ | |
| const Navbar = () => { | |
| const [isScrolled, setIsScrolled] = useState(false); | |
| const [mobileOpen, setMobileOpen] = useState(false); | |
| useEffect(() => { | |
| const onScroll = () => setIsScrolled(window.scrollY > 40); | |
| window.addEventListener('scroll', onScroll, { passive: true }); | |
| return () => window.removeEventListener('scroll', onScroll); | |
| }, []); | |
| useEffect(() => { | |
| document.body.style.overflow = mobileOpen ? 'hidden' : ''; | |
| return () => { document.body.style.overflow = ''; }; | |
| }, [mobileOpen]); | |
| const links = [ | |
| { name: 'Studio', href: 'generator.html' }, | |
| { name: 'Models', href: 'models.html' }, | |
| { name: 'Agents', href: 'dashboard.html' }, | |
| { name: 'Workflows', href: 'workflows.html' }, | |
| { name: 'Marketplace', href: 'marketplace.html' }, | |
| { name: 'Pricing', href: '#pricing' }, | |
| { name: 'Docs', href: 'playground.html' }, | |
| ]; | |
| return ( | |
| <> | |
| <nav className={`fixed top-8 w-full z-50 transition-all duration-500 ${isScrolled ? 'glass-strong shadow-2xl shadow-black/30' : 'bg-transparent'}`}> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="flex items-center justify-between h-16"> | |
| <a href="#" className="flex items-center gap-2.5 group"> | |
| <div className="w-9 h-9 rounded-xl bg-primary flex items-center justify-center shadow-lg shadow-primary/30 group-hover:shadow-primary/50 group-hover:scale-110 transition-all duration-300"><Icon name="sparkles" size={16} className="text-primary-foreground" /></div> | |
| <span className="text-lg font-bold tracking-tight">NSFW<span className="text-muted">Studio</span></span> | |
| </a> | |
| <div className="hidden lg:flex items-center gap-1"> | |
| {links.map(l => <a key={l.name} href={l.href} className="px-3 py-2 text-sm font-medium text-muted hover:text-fg transition-all duration-200 rounded-lg hover:bg-surface-2/80">{l.name}</a>)} | |
| </div> | |
| <div className="hidden lg:flex items-center gap-3"> | |
| <a href="signin.html" className="text-sm font-medium text-muted hover:text-fg transition-colors duration-200 px-3 py-2">Sign in</a> | |
| <a href="signin.html" className="px-5 py-2.5 rounded-xl bg-primary text-primary-foreground text-sm font-semibold hover:brightness-110 transition-all duration-300 shadow-lg shadow-primary/30 hover:shadow-primary/50 hover:scale-105">Get Started Free</a> | |
| </div> | |
| <button onClick={() => setMobileOpen(!mobileOpen)} className="lg:hidden p-2 rounded-xl hover:bg-surface-2 text-muted hover:text-fg transition-colors duration-200"> | |
| <Icon name={mobileOpen ? 'x' : 'menu'} size={22} /> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <div className={`fixed inset-0 z-40 lg:hidden transition-all duration-500 ${mobileOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}> | |
| <div className="absolute inset-0 bg-black/70 backdrop-blur-md" onClick={() => setMobileOpen(false)} /> | |
| <div className={`absolute right-0 top-0 bottom-0 w-80 max-w-[85vw] bg-surface border-l border-border p-6 pt-20 transition-transform duration-500 ease-out ${mobileOpen ? 'translate-x-0' : 'translate-x-full'}`}> | |
| <div className="flex flex-col gap-1"> | |
| {links.map(l => <a key={l.name} href={l.href} onClick={() => setMobileOpen(false)} className="px-4 py-3 text-base font-medium text-muted hover:text-fg hover:bg-surface-2 rounded-xl transition-colors duration-200">{l.name}</a>)} | |
| </div> | |
| <div className="mt-6 pt-6 border-t border-border flex flex-col gap-3"> | |
| <a href="signin.html" className="px-4 py-3 text-base font-medium text-muted hover:text-fg text-center rounded-xl hover:bg-surface-2 transition-colors duration-200">Sign in</a> | |
| <a href="signin.html" className="px-4 py-3 bg-primary text-primary-foreground font-semibold text-center rounded-xl hover:brightness-110 transition-all duration-300 shadow-lg shadow-primary/25">Get Started Free</a> | |
| </div> | |
| </div> | |
| </div> | |
| </> | |
| ); | |
| }; | |
| /* ─── Hero ─── */ | |
| const Hero = () => { | |
| const words = ['Fantasies', 'Desires', 'Images', 'Videos', 'Models']; | |
| const [typedWord, setTypedWord] = useState(''); | |
| const [wordIndex, setWordIndex] = useState(0); | |
| const [isDeleting, setIsDeleting] = useState(false); | |
| useEffect(() => { | |
| const currentWord = words[wordIndex]; | |
| let timeout; | |
| if (!isDeleting) { | |
| if (typedWord.length < currentWord.length) { | |
| timeout = setTimeout(() => setTypedWord(currentWord.slice(0, typedWord.length + 1)), 80 + Math.random() * 60); | |
| } else { | |
| timeout = setTimeout(() => setIsDeleting(true), 2200); | |
| } | |
| } else { | |
| if (typedWord.length > 0) { | |
| timeout = setTimeout(() => setTypedWord(typedWord.slice(0, -1)), 40); | |
| } else { | |
| setIsDeleting(false); | |
| setWordIndex((prev) => (prev + 1) % words.length); | |
| } | |
| } | |
| return () => clearTimeout(timeout); | |
| }, [typedWord, isDeleting, wordIndex]); | |
| const stats = [ | |
| { label: 'Creators', value: '2.8M+', icon: 'users' }, | |
| { label: 'AI Models', value: '45.8K+', icon: 'box' }, | |
| { label: 'Workflows', value: '1.2M+', icon: 'workflow' }, | |
| { label: 'Uptime', value: '99.9%', icon: 'activity' }, | |
| ]; | |
| return ( | |
| <section className="relative pt-36 pb-8 lg:pt-44 lg:pb-12 overflow-hidden"> | |
| <div className="absolute inset-0 grid-pattern opacity-30 pointer-events-none" /> | |
| <div className="absolute top-0 right-0 w-[1000px] h-[1000px] bg-primary/15 rounded-full blur-[180px] -translate-y-1/2 translate-x-1/3 pointer-events-none morph-bg" /> | |
| <div className="absolute bottom-0 left-0 w-[700px] h-[700px] bg-secondary/10 rounded-full blur-[150px] translate-y-1/3 -translate-x-1/3 pointer-events-none" /> | |
| <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] bg-accent/5 rounded-full blur-[120px] pointer-events-none" /> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center"> | |
| <div className="space-y-8"> | |
| <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/30 bg-primary/5 backdrop-blur-sm reveal hover:bg-primary/10 transition-colors duration-300 cursor-pointer"> | |
| <span className="w-2 h-2 rounded-full bg-primary animate-pulse" /> | |
| <span className="text-xs font-bold tracking-wider uppercase text-primary">Now in Public Beta — v3.0</span> | |
| </div> | |
| <h1 className="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.05] tracking-tight reveal reveal-delay-1 h1-responsive"> | |
| Unleash Your<br /><span className="gradient-text-hot">Darkest</span><br /> | |
| <span className="relative inline-flex min-w-[180px] sm:min-w-[280px]"> | |
| <span className="gradient-text-warm typing-cursor text-glow">{typedWord}</span> | |
| </span> | |
| </h1> | |
| <p className="text-sm sm:text-base lg:text-lg text-muted max-w-lg leading-relaxed reveal reveal-delay-2"> | |
| The uncensored AI platform for adult creators. Generate explicit art, erotic videos, custom models, and autonomous pleasure agents — all without limits or restrictions. | |
| </p> | |
| <div className="flex flex-wrap gap-3 reveal reveal-delay-3 hero-cta-group"> | |
| <a href="signin.html" className="group inline-flex items-center gap-2.5 px-5 sm:px-7 py-3.5 sm:py-4 rounded-xl bg-primary text-primary-foreground font-bold hover:brightness-110 transition-all duration-300 shadow-xl shadow-primary/30 hover:shadow-primary/50 hover:scale-105 text-sm sm:text-base"> | |
| Start Creating <Icon name="arrow-right" size={16} className="group-hover:translate-x-1 transition-transform duration-200" /> | |
| </a> | |
| <a href="playground.html" className="inline-flex items-center gap-2.5 px-5 sm:px-7 py-3.5 sm:py-4 rounded-xl border border-border bg-surface/50 text-fg font-semibold hover:bg-surface-2 hover:border-surface-3 transition-all duration-300 hover:scale-105 gradient-border-animated text-sm sm:text-base"> | |
| <Icon name="play" size={16} /> Watch Demo | |
| </a> | |
| </div> | |
| <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 pt-6 sm:pt-8 border-t border-border reveal reveal-delay-4 hero-stats-grid"> | |
| {stats.map((s, i) => ( | |
| <div key={i} className="group cursor-default"> | |
| <div className="flex items-center gap-1.5 mb-1"> | |
| <Icon name={s.icon} size={14} className="text-muted group-hover:text-primary transition-colors duration-300" /> | |
| <span className="text-[10px] sm:text-xs text-muted uppercase tracking-wider font-medium">{s.label}</span> | |
| </div> | |
| <div className="text-lg sm:text-2xl font-bold text-fg tabular-nums group-hover:text-primary transition-colors duration-300">{s.value}</div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| <div className="relative h-[400px] sm:h-[500px] lg:h-[650px] flex items-center justify-center reveal reveal-delay-2 perspective"> | |
| <div className="absolute inset-0 rounded-3xl overflow-hidden opacity-40 pointer-events-none"> | |
| <img src="http://static.photos/cyberpunk/800x1000/1" alt="" className="w-full h-full object-cover scale-110" /> | |
| <div className="absolute inset-0 bg-gradient-to-t from-bg via-bg/60 to-transparent" /> | |
| <div className="absolute inset-0 bg-gradient-to-r from-bg/80 to-transparent" /> | |
| </div> | |
| <div className="relative w-full max-w-md glass rounded-2xl p-5 shadow-2xl shadow-black/40 glow-border animate-glow-pulse"> | |
| <div className="flex items-center justify-between mb-4"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-2.5 h-2.5 rounded-full bg-success animate-pulse" /> | |
| <span className="text-sm font-semibold text-fg">Live Generation</span> | |
| </div> | |
| <span className="px-2.5 py-1 rounded-lg bg-success/10 text-success text-xs font-bold border border-success/20">LIVE</span> | |
| </div> | |
| <div className="relative rounded-xl overflow-hidden mb-4 aspect-video bg-surface-3 group cursor-pointer overflow-hidden border border-border/50"> | |
| <img src="http://static.photos/cyberpunk/640x360/2" alt="Generated preview" className="w-full h-full object-cover opacity-90 group-hover:scale-110 transition-transform duration-700 ease-out" /> | |
| <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/40 backdrop-blur-[2px]"> | |
| <div className="w-14 h-14 rounded-full bg-primary/30 backdrop-blur-sm flex items-center justify-center border border-primary/30 animate-pulse"> | |
| <Icon name="play" size={24} className="text-primary ml-1" /> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="space-y-3"> | |
| <div className="flex justify-between items-end"> | |
| <div> | |
| <h3 className="font-bold text-fg text-sm">Dark Seductress</h3> | |
| <p className="text-xs text-muted">4K Ultra — DreamVision XL</p> | |
| </div> | |
| <span className="text-sm font-bold text-primary tabular-nums">72%</span> | |
| </div> | |
| <div className="h-2 w-full bg-surface-3 rounded-full overflow-hidden"> | |
| <div className="h-full w-[72%] bg-gradient-to-r from-primary via-secondary to-accent rounded-full relative overflow-hidden shimmer" style={{backgroundSize:'200% 100%'}} /> | |
| </div> | |
| <div className="flex items-center gap-3 text-xs text-muted"> | |
| <span className="flex items-center gap-1"><Icon name="clock" size={12} /> ~12s remaining</span> | |
| <span className="flex items-center gap-1"><Icon name="cpu" size={12} /> GPU: A100</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="hidden sm:flex absolute top-6 -left-4 glass rounded-xl px-3 py-2 items-center gap-2 shadow-xl shadow-primary/10 hover-lift cursor-default"> | |
| <div className="w-6 h-6 rounded-md bg-primary/20 flex items-center justify-center"><Icon name="box" size={12} className="text-primary" /></div> | |
| <div><div className="text-xs font-bold text-fg">45.8K+ Models</div></div> | |
| </div> | |
| <div className="hidden md:flex absolute bottom-12 -left-4 glass rounded-xl px-3 py-2 items-center gap-2 shadow-xl shadow-black/20 hover-lift cursor-default" style={{animationDelay:'1s'}}> | |
| <div className="w-6 h-6 rounded-md bg-secondary/20 flex items-center justify-center"><Icon name="zap" size={12} className="text-secondary" /></div> | |
| <div><div className="text-xs font-bold text-fg">Uncensored</div></div> | |
| </div> | |
| <div className="hidden lg:flex absolute top-1/2 -right-4 glass rounded-xl px-3 py-2 items-center gap-2 shadow-xl shadow-black/20 hover-lift cursor-default" style={{animationDelay:'2s'}}> | |
| <div className="w-6 h-6 rounded-md bg-success/20 flex items-center justify-center"><Icon name="dollar-sign" size={12} className="text-success" /></div> | |
| <div><div className="text-xs font-bold text-fg">$12M+ Earned</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── Trusted By ─── */ | |
| const TrustedBy = () => { | |
| const brands = [ | |
| { name: 'Stability AI', icon: 'hexagon' }, { name: 'Hugging Face', icon: 'smile' }, { name: 'Replicate', icon: 'copy' }, | |
| { name: 'Comfy UI', icon: 'layout-dashboard' }, { name: 'Automatic1111', icon: 'terminal' }, { name: 'Ollama', icon: 'server' }, | |
| { name: 'LangChain', icon: 'link' }, { name: 'LlamaIndex', icon: 'book-open' }, { name: 'CrewAI', icon: 'users' }, | |
| { name: 'AutoGen', icon: 'bot' }, { name: 'Vercel', icon: 'triangle' }, { name: 'Cloudflare', icon: 'cloud' }, | |
| ]; | |
| return ( | |
| <section className="py-12 border-y border-border/50 relative overflow-hidden"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-6"> | |
| <p className="text-center text-xs font-bold uppercase tracking-widest text-muted">Integrated with the tools you love</p> | |
| </div> | |
| <div className="relative"> | |
| <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-bg to-transparent z-10 pointer-events-none" /> | |
| <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-bg to-transparent z-10 pointer-events-none" /> | |
| <div className="flex animate-marquee whitespace-nowrap"> | |
| {[...brands, ...brands].map((b, i) => ( | |
| <div key={i} className="mx-8 flex items-center gap-2.5 text-muted/40 hover:text-muted transition-colors duration-500 cursor-pointer"> | |
| <Icon name={b.icon} size={18} /><span className="text-sm font-bold tracking-wide">{b.name}</span> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── How It Works ─── */ | |
| const HowItWorks = () => { | |
| const steps = [ | |
| { icon: 'pencil', title: '1. Describe', desc: 'Write your deepest fantasy or upload a reference. Our AI understands explicit prompts with precision.', color: 'text-primary', bg: 'bg-primary', img: 'http://static.photos/workspace/320x240/1' }, | |
| { icon: 'sparkles', title: '2. Generate', desc: 'Choose from 45K+ uncensored models. Your creation renders in seconds — no filters, no restrictions.', color: 'text-secondary', bg: 'bg-secondary', img: 'http://static.photos/cyberpunk/320x240/2' }, | |
| { icon: 'wand', title: '3. Refine', desc: 'Upscale, edit, morph, and fine-tune every intimate detail with our pro editing suite.', color: 'text-accent', bg: 'bg-accent', img: 'http://static.photos/abstract/320x240/3' }, | |
| { icon: 'rocket', title: '4. Publish & Earn', desc: 'Sell on the adult marketplace or deploy via API. Top creators earn $50K+/month.', color: 'text-success', bg: 'bg-success', img: 'http://static.photos/finance/320x240/4' }, | |
| ]; | |
| return ( | |
| <section className="py-24 relative"> | |
| <div className="absolute inset-0 bg-mesh opacity-30 pointer-events-none" /> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div className="text-center mb-16 reveal"> | |
| <span className="inline-block px-3 py-1.5 rounded-full border border-border bg-surface/50 text-xs font-bold uppercase tracking-widest text-muted mb-4">How It Works</span> | |
| <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-3 sm:mb-4 h2-responsive">From Fantasy to <span className="gradient-text-hot">Reality</span> in Seconds</h2> | |
| <p className="text-muted max-w-2xl mx-auto text-sm sm:text-lg">Four steps to bring your most explicit visions to life.</p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-4 gap-6 sm:gap-8 reveal reveal-delay-2"> | |
| {steps.map((step, i) => ( | |
| <div key={i} className="relative text-center group hover-lift p-6 rounded-2xl bg-surface border border-border overflow-hidden transition-all duration-400"> | |
| <div className="absolute top-0 right-0 w-24 h-24 opacity-10 group-hover:opacity-20 transition-opacity duration-500 pointer-events-none"> | |
| <img src={step.img} alt="" className="w-full h-full object-cover rounded-bl-3xl" /> | |
| </div> | |
| <div className={`w-14 h-14 sm:w-16 sm:h-16 rounded-2xl ${step.bg}/10 flex items-center justify-center mx-auto mb-4 sm:mb-5 group-hover:scale-110 group-hover:shadow-lg transition-all duration-300 step-icon-ring`}> | |
| <Icon name={step.icon} size={24} className={step.color} /> | |
| </div> | |
| <h3 className="text-base sm:text-lg font-bold text-fg mb-2">{step.title}</h3> | |
| <p className="text-xs sm:text-sm text-muted leading-relaxed">{step.desc}</p> | |
| {i < steps.length - 1 && ( | |
| <div className="hidden md:block absolute top-14 right-0 translate-x-1/2 w-10 border-t-2 border-dashed border-primary/30" /> | |
| )} | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── Features ─── */ | |
| const Features = () => { | |
| const features = [ | |
| { icon: 'hexagon', title: 'Studio', desc: 'Generate explicit images, erotic videos, adult audio, and unrestricted content with the most powerful uncensored AI models. No filters, no blocks.', color: 'text-primary', bg: 'bg-primary/10', link: 'Open Studio →', href: 'generator.html', span: 'lg:col-span-2 lg:row-span-2', img: 'http://static.photos/cyberpunk/640x360/3' }, | |
| { icon: 'box', title: 'Models', desc: 'Access 45K+ uncensored AI models. Fantasy, fetish, erotic — train and fine-tune your own.', color: 'text-secondary', bg: 'bg-secondary/10', link: 'Browse Models →', href: 'models.html', span: '', img: 'http://static.photos/technology/320x240/4' }, | |
| { icon: 'bot', title: 'Agents', desc: 'Autonomous AI pleasure agents that think, roleplay, and create for you 24/7.', color: 'text-success', bg: 'bg-success/10', link: 'Manage Agents →', href: 'dashboard.html', span: '', img: 'http://static.photos/science/320x240/5' }, | |
| { icon: 'workflow', title: 'Workflows', desc: 'Build automation pipelines — batch generation, auto-tagging, content processing.', color: 'text-purple-400', bg: 'bg-purple-500/10', link: 'Create Workflow →', href: 'workflows.html', span: '', img: 'http://static.photos/workspace/320x240/6' }, | |
| { icon: 'shopping-bag', title: 'Marketplace', desc: 'Buy and sell adult models, prompts, agents, and explicit workflows. The #1 adult AI marketplace.', color: 'text-accent', bg: 'bg-accent/10', link: 'Explore Marketplace →', href: 'marketplace.html', span: '', img: 'http://static.photos/retail/320x240/7' }, | |
| ]; | |
| return ( | |
| <section className="py-12 sm:py-24 relative"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="text-center mb-10 sm:mb-16 reveal"> | |
| <span className="inline-block px-3 py-1.5 rounded-full border border-border bg-surface/50 text-[10px] sm:text-xs font-bold uppercase tracking-widest text-muted mb-3 sm:mb-4">Platform</span> | |
| <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-3 sm:mb-4 h2-responsive">Everything You Need to <span className="gradient-text-hot">Build, Scale & Earn</span></h2> | |
| <p className="text-muted max-w-2xl mx-auto text-sm sm:text-lg">One uncensored platform for all your adult AI needs.</p> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 features-grid"> | |
| {features.map((f, i) => ( | |
| <div key={i} className={`${f.span || ''} group relative rounded-2xl p-5 sm:p-6 lg:p-8 bg-surface border border-border hover:border-primary/30 transition-all duration-500 cursor-pointer card-3d preserve-3d shine gradient-border-animated overflow-hidden reveal reveal-delay-${Math.min(i + 1, 5)}`}> | |
| <img src={f.img} alt={f.title} className="feature-card-img rounded-tl-3xl" /> | |
| <div className={`w-10 h-10 sm:w-12 sm:h-12 rounded-xl ${f.bg} flex items-center justify-center mb-3 sm:mb-4 group-hover:scale-110 group-hover:shadow-lg transition-all duration-300 relative z-10`}> | |
| <Icon name={f.icon} size={20} className={f.color} /> | |
| </div> | |
| <h3 className="text-lg sm:text-xl font-bold mb-2 text-fg group-hover:text-primary transition-colors duration-300 relative z-10">{f.title}</h3> | |
| <p className="text-xs sm:text-sm text-muted leading-relaxed mb-4 sm:mb-6 relative z-10">{f.desc}</p> | |
| <a href={f.href} className={`text-xs sm:text-sm font-bold ${f.color} flex items-center gap-1.5 group-hover:gap-3 transition-all duration-300 relative z-10`}>{f.link} <Icon name="arrow-right" size={14} /></a> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── Number Stats ─── */ | |
| const NumberStats = () => { | |
| const [c1, r1] = useCountUp(2800000); | |
| const [c2, r2] = useCountUp(45800); | |
| const [c3, r3] = useCountUp(1200000); | |
| const [c4, r4] = useCountUp(99); | |
| const format = (n) => { if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M'; if (n >= 1000) return (n / 1000).toFixed(1) + 'K'; return n.toString(); }; | |
| const stats = [ | |
| { label: 'Adult Creators', count: c1, ref: r1, display: format(c1), suffix: '+', icon: 'users', color: 'text-primary', bg: 'bg-primary/10' }, | |
| { label: 'AI Models', count: c2, ref: r2, display: format(c2), suffix: '+', icon: 'box', color: 'text-secondary', bg: 'bg-secondary/10' }, | |
| { label: 'Generations', count: c3, ref: r3, display: format(c3), suffix: '+', icon: 'workflow', color: 'text-success', bg: 'bg-success/10' }, | |
| { label: 'Uptime', count: c4, ref: r4, display: c4, suffix: '.9%', icon: 'activity', color: 'text-accent', bg: 'bg-accent/10' }, | |
| ]; | |
| return ( | |
| <section className="py-10 sm:py-16 border-y border-border/50 bg-surface/30"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8"> | |
| {stats.map((s, i) => ( | |
| <div key={i} ref={s.ref} className="text-center group hover-lift p-3 sm:p-4 rounded-2xl cursor-default"> | |
| <div className={`w-10 h-10 sm:w-12 sm:h-12 rounded-xl ${s.bg} flex items-center justify-center mx-auto mb-2 sm:mb-3 group-hover:scale-110 transition-all duration-300`}> | |
| <Icon name={s.icon} size={18} className={`${s.color} sm:hidden`} /><Icon name={s.icon} size={22} className={`${s.color} hidden sm:block`} /> | |
| </div> | |
| <div className="text-2xl sm:text-3xl md:text-4xl font-bold stat-number tabular-nums">{s.display}{s.suffix}</div> | |
| <div className="text-xs sm:text-sm text-muted mt-1">{s.label}</div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── Live Activity ─── */ | |
| const LiveActivity = () => { | |
| const activities = [ | |
| { user: '@velvet_sin', action: 'generated Dark Succubus', time: '2s', avatar: 'http://static.photos/people/100x100/1', type: 'image' }, | |
| { user: '@kink_architect', action: 'deployed a roleplay agent', time: '5s', avatar: 'http://static.photos/people/100x100/2', type: 'workflow' }, | |
| { user: '@fantasy_weaver', action: 'trained EroticDream XL', time: '8s', avatar: 'http://static.photos/people/100x100/3', type: 'model' }, | |
| { user: '@dark_desires', action: 'sold a model for $89', time: '12s', avatar: 'http://static.photos/people/100x100/4', type: 'sale' }, | |
| { user: '@luna_sin', action: 'rendered 4K erotic video', time: '18s', avatar: 'http://static.photos/people/100x100/15', type: 'video' }, | |
| ]; | |
| const creations = [ | |
| { title: 'Crimson Seductress', type: 'NSFW Image', image: 'http://static.photos/cyberpunk/400x300/3', likes: 284, views: '2.8K', user: '@velvet_sin' }, | |
| { title: 'Nightshade Art', type: 'Erotic Video', image: 'http://static.photos/people/400x300/5', likes: 198, views: '1.6K', user: '@kink_architect' }, | |
| { title: 'Temple of Flesh', type: 'Fantasy Gen', image: 'http://static.photos/technology/400x300/6', likes: 156, views: '1.3K', user: '@dark_desires' }, | |
| { title: 'Bound Illusions', type: 'Fetish Model', image: 'http://static.photos/nature/400x300/7', likes: 142, views: '1.1K', user: '@luna_sin' }, | |
| ]; | |
| const typeIcons = { image: 'image', workflow: 'workflow', model: 'box', sale: 'dollar-sign', video: 'video' }; | |
| return ( | |
| <section className="py-12 sm:py-24 bg-surface/40 border-y border-border/50 relative"> | |
| <div className="absolute inset-0 bg-mesh opacity-20 pointer-events-none" /> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div className="flex flex-col lg:flex-row gap-6 sm:gap-10 live-section"> | |
| <div className="lg:w-[340px] flex-shrink-0 reveal live-feed"> | |
| <div className="flex items-center justify-between mb-6"> | |
| <div><h3 className="text-2xl font-bold mb-1">Live Activity</h3><p className="text-sm text-muted">Explicit creations in real-time</p></div> | |
| <span className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-success/10 border border-success/20 text-xs font-bold text-success"> | |
| <span className="relative flex h-2 w-2"><span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-success opacity-75"></span><span className="relative inline-flex rounded-full h-2 w-2 bg-success"></span></span>Live | |
| </span> | |
| </div> | |
| <div className="space-y-1.5 sm:space-y-2 mb-4 sm:mb-6"> | |
| {activities.map((act, i) => ( | |
| <div key={i} className="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg sm:rounded-xl hover:bg-surface-2/50 transition-all duration-300 cursor-pointer group"> | |
| <img src={act.avatar} alt="" className="w-7 h-7 sm:w-9 sm:h-9 rounded-full border border-border object-cover group-hover:border-primary/30 transition-colors duration-300" /> | |
| <div className="flex-1 min-w-0"><p className="text-xs sm:text-sm text-fg/80 truncate"><span className="text-fg font-semibold">{act.user}</span> {act.action}</p></div> | |
| <div className="flex items-center gap-1 text-[10px] sm:text-xs text-muted shrink-0"><Icon name={typeIcons[act.type]} size={10} className="sm:w-[12px] sm:h-[12px]" />{act.time}</div> | |
| </div> | |
| ))} | |
| </div> | |
| <a href="dashboard.html" className="w-full py-2 sm:py-2.5 rounded-xl border border-border text-xs sm:text-sm font-semibold text-muted hover:text-fg hover:bg-surface-2 hover:border-primary/30 transition-all duration-300 text-center block">View Full Feed</a> | |
| </div> | |
| <div className="flex-1 grid grid-cols-2 sm:grid-cols-2 gap-3 sm:gap-4 reveal reveal-delay-2 live-creations"> | |
| {creations.map((item, i) => ( | |
| <div key={i} className="group relative rounded-xl sm:rounded-2xl overflow-hidden aspect-[4/3] cursor-pointer card-3d preserve-3d"> | |
| <img src={item.image} alt={item.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-115" /> | |
| <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/40 to-transparent opacity-80 group-hover:opacity-100 transition-opacity duration-300" /> | |
| <div className="absolute top-2 left-2 sm:top-3 sm:left-3"><span className="px-1.5 py-0.5 sm:px-2.5 sm:py-1 rounded bg-primary/20 backdrop-blur-md text-[9px] sm:text-xs font-bold text-primary border border-primary/30">{item.type}</span></div> | |
| <div className="absolute bottom-0 left-0 right-0 p-2 sm:p-4"> | |
| <h4 className="font-bold text-fg text-xs sm:text-base mb-1 group-hover:text-primary transition-colors duration-300">{item.title}</h4> | |
| <div className="flex items-center justify-between text-[10px] sm:text-xs text-muted"> | |
| <span className="hidden sm:inline">{item.user}</span> | |
| <div className="flex items-center gap-2 sm:gap-3"> | |
| <span className="flex items-center gap-0.5 sm:gap-1 text-fg/60 hover:text-primary transition-colors"><Icon name="heart" size={10} className="sm:hidden" /><Icon name="heart" size={12} className="hidden sm:inline-block" /> {item.likes}</span> | |
| <span className="flex items-center gap-0.5 sm:gap-1"><Icon name="eye" size={10} className="sm:hidden" /><Icon name="eye" size={12} className="hidden sm:inline-block" /> {item.views}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── Top Creators ─── */ | |
| const TopCreators = () => { | |
| const creators = [ | |
| { name: 'Velvet Sin', handle: '@velvet_sin', followers: '24.1K', likes: '1.2M', badge: 'Top Creator', badgeColor: 'bg-primary/15 text-primary border-primary/20', img: 'http://static.photos/people/200x200/10' }, | |
| { name: 'Kink Architect', handle: '@kink_architect', followers: '18.7K', likes: '982K', badge: 'Verified', badgeColor: 'bg-secondary/15 text-secondary border-secondary/20', img: 'http://static.photos/people/200x200/11' }, | |
| { name: 'Dark Desires', handle: '@dark_desires', followers: '16.3K', likes: '872K', badge: 'Top Creator', badgeColor: 'bg-primary/15 text-primary border-primary/20', img: 'http://static.photos/people/200x200/12' }, | |
| { name: 'Sin Studios', handle: '@sin_studios', followers: '13.9K', likes: '745K', badge: 'Verified', badgeColor: 'bg-secondary/15 text-secondary border-secondary/20', img: 'http://static.photos/people/200x200/13' }, | |
| { name: 'Fantasy Weaver', handle: '@fantasy_weaver', followers: '12.2K', likes: '612K', badge: 'Rising Star', badgeColor: 'bg-accent/15 text-accent border-accent/20', img: 'http://static.photos/people/200x200/14' }, | |
| ]; | |
| return ( | |
| <section className="py-12 sm:py-24 relative"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="flex items-center justify-between mb-8 sm:mb-12 reveal"> | |
| <div><h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-1 sm:mb-2 h2-responsive">Top <span className="gradient-text">Creators</span></h2><p className="text-xs sm:text-sm text-muted">The most successful adult AI creators on the platform.</p></div> | |
| <a href="marketplace.html" className="hidden sm:inline-flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border text-sm font-semibold text-muted hover:text-fg hover:bg-surface-2 hover:border-primary/30 transition-all duration-300">Explore All <Icon name="arrow-right" size={14} /></a> | |
| </div> | |
| <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4 reveal reveal-delay-2 creators-grid"> | |
| {creators.map((c, i) => ( | |
| <div key={i} className="group relative rounded-xl sm:rounded-2xl p-4 sm:p-6 bg-surface border border-border hover:border-primary/30 text-center transition-all duration-500 hover:-translate-y-2 hover:shadow-2xl hover:shadow-primary/10 card-3d preserve-3d shine gradient-border-animated"> | |
| <div className="relative w-14 h-14 sm:w-20 sm:h-20 mx-auto mb-2 sm:mb-4"> | |
| <img src={c.img} alt={c.name} className="w-full h-full rounded-full object-cover border-2 border-border group-hover:border-primary/40 transition-colors duration-300" /> | |
| {i < 2 && <div className="absolute -bottom-0.5 -right-0.5 bg-secondary text-white p-0.5 sm:p-1 rounded-full border-2 border-surface"><Icon name="check" size={10} /></div>} | |
| </div> | |
| <h3 className="font-bold text-fg text-sm sm:text-base mb-0.5 group-hover:text-primary transition-colors duration-300">{c.name}</h3> | |
| <p className="text-[10px] sm:text-xs text-muted mb-2 sm:mb-4">{c.handle}</p> | |
| <div className="flex justify-center gap-3 sm:gap-4 mb-2 sm:mb-4 text-[10px] sm:text-xs"> | |
| <div><div className="font-bold text-fg tabular-nums">{c.followers}</div><div className="text-muted">Followers</div></div> | |
| <div><div className="font-bold text-fg tabular-nums">{c.likes}</div><div className="text-muted">Likes</div></div> | |
| </div> | |
| <span className={`inline-block px-2 sm:px-3 py-1 rounded-full text-[9px] sm:text-xs font-bold border ${c.badgeColor}`}>{c.badge}</span> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── Pricing ─── */ | |
| const Pricing = () => { | |
| const [isYearly, setIsYearly] = useState(false); | |
| const plans = [ | |
| { name: 'Free', desc: 'Get started with basic features.', price: 0, period: '/mo', features: ['10 generations / day', 'Basic models access', 'Community support', 'Standard queue'], cta: 'Get Started', highlight: false }, | |
| { name: 'Creator', desc: 'Perfect for content creators.', price: 19, period: '/mo', features: ['1,000 generations / mo', 'All uncensored models', 'Priority support', 'Commercial use', 'Custom workflows'], cta: 'Choose Plan', highlight: false }, | |
| { name: 'Pro', desc: 'Best for power users.', price: 49, period: '/mo', features: ['10,000 generations / mo', 'All models + exclusive access', 'Fastest queue', 'Early access features', 'API access', 'Team collaboration'], cta: 'Choose Plan', highlight: true }, | |
| { name: 'Team', desc: 'For teams and studios.', price: 149, period: '/mo', features: ['50,000 generations / mo', 'Team collaboration', 'Shared assets library', 'Advanced analytics', 'API access', 'Priority queue'], cta: 'Choose Plan', highlight: false }, | |
| { name: 'Enterprise', desc: 'For large scale operations.', price: null, period: '', features: ['Unlimited generations', 'Custom integrations', 'Dedicated support', 'SLA & uptime guarantee', 'On-premise option'], cta: 'Contact Sales', highlight: false }, | |
| ]; | |
| return ( | |
| <section id="pricing" className="py-12 sm:py-24 relative"> | |
| <div className="absolute inset-0 dot-pattern opacity-20 pointer-events-none" /> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div className="text-center mb-8 sm:mb-12 reveal"> | |
| <span className="inline-block px-3 py-1.5 rounded-full border border-border bg-surface/50 text-[10px] sm:text-xs font-bold uppercase tracking-widest text-muted mb-3 sm:mb-4">Pricing</span> | |
| <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-3 sm:mb-4 h2-responsive">Simple, Transparent Pricing</h2> | |
| <p className="text-muted text-sm sm:text-lg mb-6 sm:mb-8">Start free. Scale when you're ready.</p> | |
| <div className="inline-flex items-center p-1 rounded-full border border-border bg-surface"> | |
| <button onClick={() => setIsYearly(false)} className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-xs sm:text-sm font-semibold transition-all duration-300 ${!isYearly ? 'bg-fg text-bg shadow-md' : 'text-muted hover:text-fg'}`}>Monthly</button> | |
| <button onClick={() => setIsYearly(true)} className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-xs sm:text-sm font-semibold transition-all duration-300 flex items-center gap-1.5 sm:gap-2 ${isYearly ? 'bg-fg text-bg shadow-md' : 'text-muted hover:text-fg'}`}> | |
| Yearly <span className="px-1.5 sm:px-2 py-0.5 rounded-full bg-success/15 text-success text-[10px] sm:text-xs font-bold border border-success/20">20% off</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div className="flex lg:grid lg:grid-cols-5 gap-4 overflow-x-auto no-scrollbar pb-2 -mx-4 px-4 lg:mx-0 lg:px-0 lg:overflow-visible reveal reveal-delay-2 pricing-grid snap-x snap-mandatory"> | |
| {plans.map((plan, i) => ( | |
| <div key={i} className={`relative rounded-2xl p-5 sm:p-6 flex flex-col h-full min-w-[260px] lg:min-w-0 snap-center transition-all duration-500 hover:-translate-y-1 ${plan.highlight ? 'bg-gradient-to-b from-primary/10 to-surface border-2 border-primary/40 shadow-xl shadow-primary/10 glow-border' : 'bg-surface border border-border hover:border-surface-3'}`}> | |
| {plan.highlight && <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 bg-primary text-primary-foreground text-xs font-bold rounded-full shadow-lg shadow-primary/30 animate-glow-pulse">MOST POPULAR</div>} | |
| <div className="mb-4 sm:mb-5"><h3 className="text-base sm:text-lg font-bold text-fg mb-1">{plan.name}</h3><p className="text-[10px] sm:text-xs text-muted">{plan.desc}</p></div> | |
| <div className="mb-4 sm:mb-5"><span className="text-2xl sm:text-4xl font-bold text-fg tabular-nums">{plan.price === null ? 'Custom' : `${isYearly ? Math.round(plan.price * 0.8) : plan.price}`}</span>{plan.period && <span className="text-muted text-xs sm:text-sm">{plan.period}</span>}</div> | |
| <ul className="space-y-2 sm:space-y-3 mb-6 sm:mb-8 flex-grow"> | |
| {plan.features.map((feat, j) => <li key={j} className="flex items-start gap-2 sm:gap-2.5 text-xs sm:text-sm text-fg/80"><Icon name="check" size={14} className="text-primary shrink-0 mt-0.5 sm:w-4 sm:h-4" /><span>{feat}</span></li>)} | |
| </ul> | |
| <button className={`w-full py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all duration-300 ${plan.highlight ? 'bg-primary text-primary-foreground hover:brightness-110 shadow-lg shadow-primary/25 hover:shadow-primary/40 hover:scale-105' : 'border border-border text-fg hover:bg-surface-2 hover:border-surface-3 hover:scale-105'}`}>{plan.cta}</button> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── Testimonials ─── */ | |
| const Testimonials = () => { | |
| const testimonials = [ | |
| { text: "NSFWStudio let me turn my wildest fantasies into stunning visuals. The uncensored models are absolutely insane — nothing else compares.", author: "Velvet Sin", role: "Erotic AI Artist", img: "http://static.photos/people/100x100/20" }, | |
| { text: "The workflow builder saved me hundreds of hours of manual editing. I batch-generate and auto-tag everything now. My revenue tripled.", author: "Dark Pixel", role: "Content Studio Owner", img: "http://static.photos/people/100x100/21" }, | |
| { text: "Best uncensored AI platform, period. The model quality is unmatched and the API integration into my tube site was seamless.", author: "Echo Nova", role: "Adult Content Creator", img: "http://static.photos/people/100x100/22" }, | |
| { text: "Finally a platform that doesn't censor adult creativity. The freedom to create without restrictions is liberating. Outstanding quality.", author: "Nyx Reality", role: "Fantasy Artist", img: "http://static.photos/people/100x100/23" }, | |
| ]; | |
| return ( | |
| <section className="py-12 sm:py-24 bg-surface/40 border-y border-border/50 relative"> | |
| <div className="absolute inset-0 bg-mesh opacity-20 pointer-events-none" /> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div className="text-center mb-8 sm:mb-12 reveal"> | |
| <span className="inline-block px-3 py-1.5 rounded-full border border-border bg-surface/50 text-[10px] sm:text-xs font-bold uppercase tracking-widest text-muted mb-3 sm:mb-4">Testimonials</span> | |
| <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-1 sm:mb-2 h2-responsive">Loved by <span className="gradient-text">Creators</span></h2> | |
| <p className="text-muted">See what our community is saying.</p> | |
| </div> | |
| <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 reveal reveal-delay-2 testimonials-grid"> | |
| {testimonials.map((t, i) => ( | |
| <div key={i} className="group rounded-xl sm:rounded-2xl p-4 sm:p-6 bg-surface border border-border hover:border-primary/30 transition-all duration-500 hover:-translate-y-2 hover:shadow-xl hover:shadow-primary/5 relative card-3d preserve-3d shine gradient-border-animated"> | |
| <div className="absolute top-3 right-3 sm:top-4 sm:right-4 text-primary/5 group-hover:text-primary/15 transition-colors duration-500"><Icon name="quote" size={24} className="sm:hidden" /><Icon name="quote" size={32} className="hidden sm:block" /></div> | |
| <div className="flex gap-0.5 mb-3 sm:mb-4 text-accent">{[...Array(5)].map((_, j) => <Icon key={j} name="star" size={12} className="sm:w-[14px] sm:h-[14px]" />)}</div> | |
| <p className="text-fg/80 text-xs sm:text-sm leading-relaxed mb-4 sm:mb-6">"{t.text}"</p> | |
| <div className="flex items-center gap-3 mt-auto"> | |
| <img src={t.img} alt={t.author} className="w-8 h-8 sm:w-10 sm:h-10 rounded-full border border-border object-cover group-hover:border-primary/30 transition-colors duration-300" /> | |
| <div><div className="text-xs sm:text-sm font-bold text-fg">{t.author}</div><div className="text-[10px] sm:text-xs text-muted">{t.role}</div></div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── FAQ ─── */ | |
| const FAQ = () => { | |
| const [openIndex, setOpenIndex] = useState(null); | |
| const faqs = [ | |
| { q: 'What is NSFWStudio?', a: "NSFWStudio is an all-in-one uncensored AI creation platform for adult content. Generate explicit images, erotic videos, AI roleplay agents, and automated workflows — all without content filters or restrictions." }, | |
| { q: 'Is the content uncensored?', a: 'Yes. Our platform is designed for adult creators who need unrestricted creative freedom. All models on our platform bypass traditional safety filters, giving you complete control over your output.' }, | |
| { q: 'What kind of models are available?', a: 'Over 45,000+ AI models across every adult niche — photorealistic, anime, fantasy, fetish, erotic art, fetish-specific models, style transfer, video generation, and more. You can also train and deploy custom models.' }, | |
| { q: 'Can I sell my generated content?', a: 'Absolutely. On the Creator plan and above, all content you generate comes with full commercial rights. Sell on our marketplace, deploy via API, or distribute anywhere. You own what you create.' }, | |
| { q: 'What are AI Agents and Workflows?', a: 'Agents are autonomous AI programs that can roleplay, generate content, and execute tasks 24/7 on your behalf. Workflows let you chain multiple steps — batch generation, auto-tagging, content processing — into automated pipelines.' }, | |
| { q: 'How does the marketplace work?', a: 'The marketplace lets you buy and sell adult models, agents, prompts, and workflow templates. Creators earn revenue from every sale. We handle payments, licensing, and distribution. Top creators earn $50K+/month.' }, | |
| ]; | |
| return ( | |
| <section className="py-12 sm:py-24 faq-section"> | |
| <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="text-center mb-8 sm:mb-12 reveal"> | |
| <span className="inline-block px-3 py-1.5 rounded-full border border-border bg-surface/50 text-xs font-bold uppercase tracking-widest text-muted mb-4">FAQ</span> | |
| <h2 className="text-3xl md:text-4xl font-bold mb-2">Frequently Asked Questions</h2> | |
| <p className="text-muted">Got questions? We've got answers.</p> | |
| </div> | |
| <div className="space-y-3 reveal reveal-delay-1"> | |
| {faqs.map((faq, i) => ( | |
| <div key={i} className="rounded-xl border border-border bg-surface overflow-hidden hover:border-surface-3 transition-colors duration-300"> | |
| <button onClick={() => setOpenIndex(openIndex === i ? null : i)} className="w-full flex items-center justify-between p-5 text-left hover:bg-surface-2/30 transition-colors duration-200"> | |
| <span className="font-bold text-fg pr-4">{faq.q}</span> | |
| <Icon name={openIndex === i ? 'minus' : 'plus'} size={20} className={`text-muted shrink-0 transition-transform duration-300 ${openIndex === i ? 'rotate-180' : ''}`} /> | |
| </button> | |
| <div className={`faq-content ${openIndex === i ? 'open' : ''}`}> | |
| <div><p className="px-5 pb-5 text-sm text-muted leading-relaxed">{faq.a}</p></div> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| }; | |
| /* ─── CTA ─── */ | |
| const CTA = () => ( | |
| <section className="py-12 sm:py-24 relative overflow-hidden"> | |
| <div className="absolute inset-0 grid-pattern opacity-15 pointer-events-none" /> | |
| <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[900px] h-[900px] bg-primary/10 rounded-full blur-[200px] pointer-events-none morph-bg" /> | |
| <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center reveal"> | |
| <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold mb-4 sm:mb-6 h2-responsive">Ready to Create <span className="gradient-text-hot">Without Limits</span>?</h2> | |
| <p className="text-muted text-sm sm:text-lg max-w-2xl mx-auto mb-6 sm:mb-10">Join 2.8 million adult creators already building the future. Start free, no credit card required.</p> | |
| <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mb-8 w-full max-w-lg mx-auto cta-input-group"> | |
| <input type="email" placeholder="Enter your email" className="w-full sm:flex-1 px-4 sm:px-5 py-3.5 sm:py-4 rounded-xl bg-surface border border-border text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all duration-300 text-sm sm:text-base" /> | |
| <a href="signin.html" className="group inline-flex items-center justify-center gap-2.5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-xl bg-primary text-primary-foreground font-bold hover:brightness-110 transition-all duration-300 shadow-xl shadow-primary/30 hover:shadow-primary/50 hover:scale-105 whitespace-nowrap text-sm sm:text-base"> | |
| Start Creating <Icon name="arrow-right" size={18} className="group-hover:translate-x-1 transition-transform duration-200" /> | |
| </a> | |
| </div> | |
| <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 text-xs sm:text-sm text-muted cta-trust-badges"> | |
| {['No credit card required', 'Uncensored access', 'Cancel anytime'].map((text, i) => ( | |
| <span key={i} className="flex items-center gap-1.5"><Icon name="check-circle" size={16} className="text-success" />{text}</span> | |
| ))} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| /* ─── Footer ─── */ | |
| const Footer = () => { | |
| const columns = [ | |
| { title: 'Platform', links: ['Studio', 'Models', 'Agents', 'Workflows', 'Marketplace', 'Pricing'], hrefs: ['generator.html', 'models.html', 'dashboard.html', 'workflows.html', 'marketplace.html', '#pricing'] }, | |
| { title: 'Resources', links: ['Documentation', 'API Reference', 'Cookbook', 'Guides', 'Blog', 'Changelog'], hrefs: ['#', '#', '#', '#', '#', '#'] }, | |
| { title: 'Company', links: ['About Us', 'Careers', 'Contact', 'Partners', 'Brand Kit', 'Press'], hrefs: ['#', '#', '#', '#', '#', '#'] }, | |
| { title: 'Legal', links: ['Terms of Service', 'Privacy Policy', '2257 Compliance', 'Content Policy', 'DMCA', 'Cookie Settings'], hrefs: ['#', '#', '#', '#', '#', '#'] }, | |
| ]; | |
| return ( | |
| <footer className="pt-12 sm:pt-20 pb-8 sm:pb-10 border-t border-border bg-[oklch(0.04_0.005_285)]"> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 sm:gap-8 mb-10 sm:mb-16"> | |
| <div className="col-span-2"> | |
| <a href="#" className="flex items-center gap-2.5 mb-3 sm:mb-4 group"> | |
| <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center shadow-md shadow-primary/20 group-hover:shadow-primary/40 group-hover:scale-110 transition-all duration-300"><Icon name="sparkles" size={16} className="text-primary-foreground" /></div> | |
| <span className="text-lg font-bold tracking-tight">NSFW<span className="text-muted">Studio</span></span> | |
| </a> | |
| <p className="text-xs sm:text-sm text-muted mb-4 sm:mb-6 max-w-xs leading-relaxed">The ultimate uncensored AI platform for adult creators. Build, automate, and monetize without limits.</p> | |
| <div className="mb-4 sm:mb-6"> | |
| <p className="text-xs sm:text-sm font-semibold text-fg mb-2 sm:mb-3">Stay in the loop</p> | |
| <div className="flex gap-2 footer-form"> | |
| <input type="email" placeholder="you@example.com" className="flex-1 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg bg-surface-2 border border-border text-xs sm:text-sm text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all duration-200 min-w-0" /> | |
| <button className="px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg bg-primary text-primary-foreground text-xs sm:text-sm font-bold hover:brightness-110 transition-all duration-200 shrink-0 hover:scale-105">Subscribe</button> | |
| </div> | |
| </div> | |
| <div className="flex gap-3"> | |
| {[{ name: 'github' }, { name: 'twitter' }, { name: 'youtube' }, { name: 'instagram' }].map((s) => ( | |
| <a key={s.name} href="#" className="w-9 h-9 rounded-lg bg-surface-2 flex items-center justify-center text-muted hover:text-fg hover:bg-surface-3 hover:scale-110 transition-all duration-200 border border-border"><Icon name={s.name} size={16} /></a> | |
| ))} | |
| </div> | |
| </div> | |
| {columns.map((col, i) => ( | |
| <div key={i}> | |
| <h4 className="font-bold text-fg mb-4 text-sm">{col.title}</h4> | |
| <ul className="space-y-2.5">{col.links.map((link, j) => <li key={j}><a href={col.hrefs[j]} className="text-sm text-muted hover:text-fg hover:text-primary transition-colors duration-200">{link}</a></li>)}</ul> | |
| </div> | |
| ))} | |
| </div> | |
| <div className="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-border/50 gap-4"> | |
| <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 text-xs text-muted"> | |
| <span>© 2025 NSFWStudio. All rights reserved.</span> | |
| <span className="hidden sm:inline text-border">·</span> | |
| <span>18 U.S.C. § 2257 Compliant</span> | |
| </div> | |
| <div className="flex items-center gap-2 text-xs text-muted"><span className="w-2 h-2 rounded-full bg-success animate-pulse" /> All Systems Operational</div> | |
| </div> | |
| </div> | |
| </footer> | |
| ); | |
| }; | |
| /* ─── App ─── */ | |
| const App = () => { | |
| const [ageVerified, setAgeVerified] = useState(false); | |
| useScrollReveal(); | |
| return ( | |
| <div className="min-h-screen bg-bg text-fg overflow-x-hidden"> | |
| {!ageVerified && <AgeGate onVerified={() => setAgeVerified(true)} />} | |
| <div className={ageVerified ? '' : 'age-blur'}> | |
| <TopBar /> | |
| <ScrollProgress /> | |
| <Navbar /> | |
| <main> | |
| <Hero /> | |
| <TrustedBy /> | |
| <HowItWorks /> | |
| <Features /> | |
| <NumberStats /> | |
| <LiveActivity /> | |
| <TopCreators /> | |
| <Pricing /> | |
| <Testimonials /> | |
| <FAQ /> | |
| <CTA /> | |
| </main> | |
| <Footer /> | |
| <BackToTop /> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| ReactDOM.createRoot(document.getElementById('root')).render(<App />); | |
| </script> | |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> | |
| </body> | |
| </html> |