[V0_FILE]typescriptreact:file="components/how-it-works-section.tsx" "use client" import { motion, useScroll, useTransform } from "framer-motion" import { useRef } from "react" import { Coins, Shield, MessageSquare, Zap } from "lucide-react" const steps = [ { icon: MessageSquare, title: "NFT Sessions", description: "Book exclusive consultation sessions with Web3 experts, minted as unique NFTs for proof of engagement.", }, { icon: Coins, title: "Cross-chain Payments", description: "Seamless payment processing across multiple blockchains with real-time conversion and minimal fees.", }, { icon: Shield, title: "Smart Contract Validator", description: "AI-powered smart contract auditing and validation to ensure security and optimal gas efficiency.", }, { icon: Zap, title: "Telegram Bot Support", description: "24/7 AI assistant integrated with Telegram for instant Web3 guidance and portfolio management.", }, ] export default function HowItWorksSection() { const sectionRef = useRef(null) const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start end", "end start"], }) const x = useTransform(scrollYProgress, [0, 1], ["0%", "-75%"]) return (

How It Works

Experience the future of Web3 consultancy through our innovative platform

{/* Horizontal Scrolling Cards */}

{steps.map((step, index) => (

{step.title}

{step.description}

Learn More →

))}

) } [V0_FILE]typescriptreact:file="components/consultant-profiles.tsx" "use client" import { motion } from "framer-motion" import { Star, Calendar } from "lucide-react" const consultants = [ { name: "Alex Chen", expertise: "DeFi Architecture", rating: 4.9, sessions: 150, image: "/placeholder.svg?height=200&width=200", }, { name: "Sarah Williams", expertise: "NFT Strategy", rating: 4.8, sessions: 120, image: "/placeholder.svg?height=200&width=200", }, { name: "Marcus Rodriguez", expertise: "Smart Contracts", rating: 5.0, sessions: 200, image: "/placeholder.svg?height=200&width=200", }, { name: "Emily Zhang", expertise: "Tokenomics", rating: 4.9, sessions: 180, image: "/placeholder.svg?height=200&width=200", }, { name: "David Kim", expertise: "Layer 2 Solutions", rating: 4.7, sessions: 95, image: "/placeholder.svg?height=200&width=200", }, { name: "Lisa Thompson", expertise: "Web3 Security", rating: 4.9, sessions: 160, image: "/placeholder.svg?height=200&width=200", }, ] export default function ConsultantProfiles() { return (

Expert Consultants

Connect with industry-leading Web3 experts for personalized guidance

{consultants.map((consultant, index) => (

Available

{consultant.name}

{consultant.expertise}

{consultant.rating}

{consultant.sessions} sessions

Book Now

))}

) } [V0_FILE]typescriptreact:file="components/ai-telegram-section.tsx" "use client" import { motion } from "framer-motion" import { MessageCircle, Bot, Zap } from "lucide-react" import { useState, useEffect } from "react" const chatMessages = [ { type: "user", message: "What are the best DeFi protocols for yield farming?" }, { type: "bot", message: "Based on current market conditions, I recommend looking at Aave, Compound, and Uniswap V3. Here's a detailed analysis...", }, { type: "user", message: "Can you help me audit this smart contract?" }, { type: "bot", message: "I'll analyze your contract for security vulnerabilities and gas optimization opportunities. Please share the contract code.", }, ] export default function AITelegramSection() { const [currentMessage, setCurrentMessage] = useState(0) const [displayedText, setDisplayedText] = useState("") useEffect(() => { const interval = setInterval(() => { setCurrentMessage((prev) => (prev + 1) % chatMessages.length) setDisplayedText("") }, 4000) return () => clearInterval(interval) }, []) useEffect(() => { const message = chatMessages[currentMessage].message let index = 0 const typeInterval = setInterval(() => { if (index < message.length) { setDisplayedText(message.slice(0, index + 1)) index++ } else { clearInterval(typeInterval) } }, 50) return () => clearInterval(typeInterval) }, [currentMessage]) return (

AI-Powered Assistant

Get instant Web3 guidance through our intelligent Telegram bot

{/* Telegram Interface Mockup */}

{/* Telegram Header */}

Web3Wise Bot

Online

{/* Chat Messages */}

{chatMessages.map((msg, index) => (

{index === currentMessage ? displayedText : msg.message} {index === currentMessage && ( | )}

))}

{/* Input Area */}

Type your Web3 question...

{/* Features */}

Instant Responses

Get immediate answers to your Web3 questions, 24/7 availability with lightning-fast AI processing.

Smart Analysis

Advanced AI algorithms analyze market trends, smart contracts, and provide personalized recommendations.

Telegram Integration

Seamlessly integrated with Telegram for convenient access from anywhere, anytime.

Start Chatting on Telegram

) } [V0_FILE]typescriptreact:file="components/session-nfts-section.tsx" "use client" import { motion } from "framer-motion" import { Award, Clock, Users } from "lucide-react" const nftSessions = [ { title: "DeFi Mastery Session", consultant: "Alex Chen", duration: "60 min", participants: "1-on-1", price: "0.5 ETH", image: "/placeholder.svg?height=300&width=300", }, { title: "NFT Strategy Workshop", consultant: "Sarah Williams", duration: "90 min", participants: "Group", price: "0.3 ETH", image: "/placeholder.svg?height=300&width=300", }, { title: "Smart Contract Audit", consultant: "Marcus Rodriguez", duration: "120 min", participants: "1-on-1", price: "1.2 ETH", image: "/placeholder.svg?height=300&width=300", }, ] export default function SessionNFTsSection() { return (

Session NFTs

Exclusive consultation sessions minted as NFTs - proof of your Web3 learning journey

{nftSessions.map((session, index) => (

{/* NFT Image */}

NFT

{session.title}

with {session.consultant}

{session.duration}

{session.participants}

Certificate NFT included

{session.price}

Book & Mint

))}

Why Session NFTs?

Each consultation session is minted as a unique NFT, providing proof of your learning journey, access to exclusive communities, and potential future benefits as our ecosystem grows.

View All Sessions

) } [V0_FILE]typescriptreact:file="components/crypto-converter-section.tsx" "use client" import { motion } from "framer-motion" import { ArrowUpDown, TrendingUp, Zap } from "lucide-react" import { useState } from "react" const cryptos = [ { symbol: "BTC", name: "Bitcoin", price: 45000, change: 2.5 }, { symbol: "ETH", name: "Ethereum", price: 3200, change: 1.8 }, { symbol: "SOL", name: "Solana", price: 120, change: -0.5 }, { symbol: "MATIC", name: "Polygon", price: 0.85, change: 3.2 }, ] export default function CryptoConverterSection() { const [fromCrypto, setFromCrypto] = useState("BTC") const [toCrypto, setToCrypto] = useState("ETH") const [amount, setAmount] = useState("1") const swapCryptos = () => { setFromCrypto(toCrypto) setToCrypto(fromCrypto) } return (

Crypto Tools

Advanced crypto conversion and deal finding tools powered by real-time market data

{/* Crypto Converter */}

Crypto Converter

{/* From */}

From

setAmount(e.target.value)} className="w-32 bg-white/10 border border-[#928DAB]/30 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-[#928DAB] transition-colors duration-200" placeholder="Amount" />

{/* Swap Button */}

{/* To */}

{(Number.parseFloat(amount) * 14.06).toFixed(4)}

Convert Now

{/* Deal Finder */}

Best Deals

{cryptos.map((crypto, index) => (

{crypto.symbol[0]}

{crypto.symbol}

{crypto.name}

${crypto.price.toLocaleString()}

= 0 ? "text-green-400" : "text-red-400"}`}> {crypto.change >= 0 ? "+" : ""} {crypto.change}%

Find Best Rate ))}

Smart Arbitrage

Our AI scans 50+ exchanges to find the best rates and arbitrage opportunities in real-time.

) } [V0_FILE]typescriptreact:file="components/research-section.tsx" "use client" import { motion, useScroll, useTransform } from "framer-motion" import { useRef } from "react" import { FileText, Shield, TrendingUp, Zap } from "lucide-react" const researchPapers = [ { title: "DeFi Security Analysis 2024", category: "Security", tags: ["Smart Contracts", "Auditing", "Risk Assessment"], icon: Shield, color: "from-red-500 to-pink-500", }, { title: "Cross-Chain Bridge Protocols", category: "Infrastructure", tags: ["Interoperability", "Bridges", "Layer 2"], icon: Zap, color: "from-blue-500 to-cyan-500", }, { title: "NFT Market Trends & Analysis", category: "Market Research", tags: ["NFTs", "Market Data", "Trends"], icon: TrendingUp, color: "from-green-500 to-emerald-500", }, { title: "Tokenomics Design Patterns", category: "Economics", tags: ["Tokenomics", "Game Theory", "Incentives"], icon: FileText, color: "from-purple-500 to-violet-500", }, { title: "Web3 UX/UI Best Practices", category: "Design", tags: ["UX", "Interface", "Usability"], icon: FileText, color: "from-orange-500 to-red-500", }, ] export default function ResearchSection() { const sectionRef = useRef(null) const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start end", "end start"], }) const x = useTransform(scrollYProgress, [0, 1], ["0%", "-50%"]) return (

Research & Validation

Access cutting-edge Web3 research and get your projects validated by industry experts

{/* Horizontal Scrolling Research Papers */}

{researchPapers.map((paper, index) => (

{paper.category}

{paper.title}

{paper.tags.map((tag, tagIndex) => ( {tag} ))}

Read Download

))}

{/* Validation Services */}

Smart Contract Validation

Get your smart contracts reviewed and validated by our team of security experts. Comprehensive auditing with detailed reports and recommendations.

Security vulnerability assessment
Gas optimization analysis
Best practices compliance

Submit for Validation

Project Research

Access our extensive library of Web3 research papers, market analysis, and technical documentation to stay ahead of the curve.

Market trend analysis
Technical whitepapers
Competitive analysis

Access Research Library

) } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" "use client" import { motion, useScroll, useTransform } from "framer-motion" import { useRef } from "react" import { Star, Quote } from "lucide-react" const testimonials = [ { name: "Michael Chen", role: "DeFi Protocol Founder", company: "YieldMax", rating: 5, text: "Web3Wise helped us navigate the complex DeFi landscape and launch our protocol successfully. Their expertise is unmatched.", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Sarah Johnson", role: "NFT Artist", company: "CryptoArt Studio", rating: 5, text: "The NFT strategy session was incredible. I learned so much about tokenomics and community building. Highly recommended!", avatar: "/placeholder.svg?height=80&width=80", }, { name: "David Rodriguez", role: "Blockchain Developer", company: "ChainTech Solutions", rating: 5, text: "Their smart contract auditing service saved us from potential vulnerabilities. Professional, thorough, and reliable.", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Emily Zhang", role: "Crypto Investor", company: "Digital Assets Fund", rating: 5, text: "The AI-powered insights and market analysis have been game-changing for our investment strategy. Exceptional service!", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Alex Thompson", role: "Web3 Startup CEO", company: "DecentralizedTech", rating: 5, text: "From tokenomics to technical implementation, Web3Wise provided end-to-end guidance that accelerated our growth.", avatar: "/placeholder.svg?height=80&width=80", }, ] export default function TestimonialsSection() { const sectionRef = useRef(null) const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start end", "end start"], }) const x = useTransform(scrollYProgress, [0, 1], ["0%", "-60%"]) return (

Client Success Stories

Hear from the Web3 builders and innovators who've accelerated their journey with Web3Wise

{/* Horizontal Scrolling Testimonials */}

{testimonials.map((testimonial, index) => (

{/* Quote Icon */}

{/* Rating */}

{[...Array(testimonial.rating)].map((_, i) => ( ))}

{/* Testimonial Text */}

"{testimonial.text}"

{/* Author Info */}

{testimonial.name}

{testimonial.role}

{testimonial.company}

))}

{/* Stats Section */}

4.9/5

Average Rating

500+

Happy Clients

1000+

Sessions Completed

98%

Success Rate

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" "use client" import { motion } from "framer-motion" import { ArrowRight, MessageSquare, Wallet, Zap } from "lucide-react" export default function CTASection() { return (

{/* Background Effects */}

Start Building with
Web3Wise Today

Join thousands of Web3 builders who trust Web3Wise for expert guidance, cutting-edge tools, and unparalleled support in their blockchain journey.

{/* Main CTA Card */}

Instant Access

Get started immediately with our AI-powered tools and expert consultants

24/7 Support

Round-the-clock assistance through our Telegram bot and expert network

Secure & Trusted

Enterprise-grade security with proven track record of successful projects

{/* CTA Buttons */} Connect Wallet Join Telegram {/* Footer */}

Trusted by 500+ Web3 projects worldwide • Join the future of decentralized innovation

Ethereum

Polygon

Solana

Arbitrum

Optimism

) } [V0_FILE]typescriptreact:file="components/page-transition.tsx" "use client" import type React from "react" import { motion, AnimatePresence } from "framer-motion" import { usePathname } from "next/navigation" export default function PageTransition({ children }: { children: React.ReactNode }) { const pathname = usePathname() return ( {children} ) } [V0_FILE]typescriptreact:file="app/consultants/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/research-hub/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/hero-section.tsx" "use client" import { useRef, useEffect } from "react" import { ArrowRight, Sparkles } from "lucide-react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger) } export default function HeroSection() { const sectionRef = useRef(null) const titleRef = useRef(null) const subtitleRef = useRef(null) const badgeRef = useRef(null) const buttonsRef = useRef(null) const scrollIndicatorRef = useRef(null) const particlesRef = useRef(null) useEffect(() => { const section = sectionRef.current const title = titleRef.current const subtitle = subtitleRef.current const badge = badgeRef.current const buttons = buttonsRef.current const scrollIndicator = scrollIndicatorRef.current const particles = particlesRef.current if (!section || !title || !subtitle || !badge || !buttons || !scrollIndicator || !particles) return // Create timeline for hero entrance const tl = gsap.timeline({ delay: 0.5 }) // Badge animation tl.fromTo( badge, { scale: 0, rotation: -180, opacity: 0, }, { scale: 1, rotation: 0, opacity: 1, duration: 0.8, ease: "back.out(1.7)", }, ) // Title animation with split text effect tl.fromTo( title.children, { y: 100, opacity: 0, rotationX: 90, }, { y: 0, opacity: 1, rotationX: 0, duration: 1, ease: "power3.out", stagger: 0.2, }, "-=0.4", ) // Subtitle animation tl.fromTo( subtitle, { y: 50, opacity: 0, }, { y: 0, opacity: 1, duration: 0.8, ease: "power2.out", }, "-=0.6", ) // Buttons animation tl.fromTo( buttons.children, { y: 30, opacity: 0, scale: 0.8, }, { y: 0, opacity: 1, scale: 1, duration: 0.6, ease: "back.out(1.7)", stagger: 0.2, }, "-=0.4", ) // Scroll indicator animation tl.fromTo( scrollIndicator, { y: 20, opacity: 0, }, { y: 0, opacity: 1, duration: 0.6, ease: "power2.out", }, "-=0.2", ) // Floating particles animation gsap.set(particles.children, { x: () => Math.random() * window.innerWidth, y: () => Math.random() * window.innerHeight, opacity: 0, }) gsap.to(particles.children, { y: "-=100", opacity: 1, duration: () => Math.random() * 3 + 2, ease: "none", repeat: -1, stagger: { amount: 2, repeat: -1, }, delay: () => Math.random() * 2, }) // Parallax scroll effect ScrollTrigger.create({ trigger: section, start: "top top", end: "bottom top", scrub: 1, onUpdate: (self) => { const progress = self.progress gsap.to(section, { y: progress * 200, opacity: 1 - progress * 0.8, duration: 0.1, ease: "none", }) }, }) // Continuous scroll indicator animation gsap.to(scrollIndicator.querySelector(".scroll-dot"), { y: 12, duration: 2, ease: "power2.inOut", repeat: -1, yoyo: true, }) // Cleanup return () => { tl.kill() ScrollTrigger.getAll().forEach((trigger) => trigger.kill()) } }, []) return (

{/* Floating particles */}

{[...Array(20)].map((_, i) => (

))}

Next-Gen Web3 Consultancy

Build the Future with Web3Wise

Premium Web3 consultancy, AI-powered tools, and expert guidance to accelerate your blockchain journey with confidence.

{/* CTA Buttons */}

{/* Scroll Indicator */}

) } [V0_FILE]json:file="package.json" { "name": "web3wise-platform", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@react-three/drei": "^9.88.13", "@react-three/fiber": "^8.15.11", "framer-motion": "^10.16.5", "gsap": "^3.12.2", "lucide-react": "^0.294.0", "next": "14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", "three": "^0.158.0" }, "devDependencies": { "@types/node": "^20.10.4", "@types/react": "^18.2.42", "@types/react-dom": "^18.2.17", "@types/three": "^0.158.3", "autoprefixer": "^10.4.16", "eslint": "^8.55.0", "eslint-config-next": "14.0.4", "postcss": "^8.4.32", "tailwindcss": "^3.3.6", "tailwindcss-animate": "^1.0.7", "typescript": "^5.3.3" } } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useRef, useEffect } from "react" import Link from "next/link" import { ArrowRight, Sparkles, Shield, Bot, Coins, FileText, Users } from "lucide-react" import ThreeScene from "@/components/three-scene" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger) } const features = [ { icon: Sparkles, title: "NFT Sessions", description: "Exclusive consultation sessions minted as unique NFTs", href: "/nft-sessions", color: "from-bright-purple to-medium-purple", }, { icon: Users, title: "Expert Consultants", description: "Connect with industry-leading Web3 professionals", href: "/consultants", color: "from-light-purple to-bright-purple", }, { icon: Shield, title: "Smart Contract Validator", description: "AI-powered contract auditing and security analysis", href: "/validators", color: "from-bright-purple to-light-purple", }, { icon: Bot, title: "AI Bot Support", description: "24/7 intelligent assistance via Telegram integration", href: "/bot-support", color: "from-light-purple to-medium-purple", }, { icon: Coins, title: "Swap Finder", description: "Advanced crypto conversion and arbitrage tools", href: "/swap-finder", color: "from-medium-purple to-bright-purple", }, { icon: FileText, title: "Research Hub", description: "Cutting-edge Web3 research and market analysis", href: "/research-hub", color: "from-bright-purple to-light-purple", }, ] export default function HomePage() { const containerRef = useRef(null) const heroRef = useRef(null) const featuresRef = useRef(null) const statsRef = useRef(null) useEffect(() => { const container = containerRef.current const hero = heroRef.current const features = featuresRef.current const stats = statsRef.current if (!container || !hero || !features || !stats) return // Hero section animations const heroTl = gsap.timeline({ delay: 0.5 }) heroTl .fromTo( hero.querySelector(".hero-badge"), { opacity: 0, y: -20, }, { opacity: 1, y: 0, duration: 0.8, ease: "power2.out", }, ) .fromTo( hero.querySelector(".hero-title"), { y: 100, opacity: 0, rotationX: 90, }, { y: 0, opacity: 1, rotationX: 0, duration: 1, ease: "power3.out", }, "-=0.4", ) .fromTo( hero.querySelector(".hero-subtitle"), { y: 50, opacity: 0, }, { y: 0, opacity: 1, duration: 0.8, ease: "power2.out", }, "-=0.6", ) .fromTo( hero.querySelectorAll(".hero-button"), { y: 30, opacity: 0, scale: 0.8, }, { y: 0, opacity: 1, scale: 1, duration: 0.6, ease: "back.out(1.7)", stagger: 0.2, }, "-=0.4", ) // Features section scroll trigger ScrollTrigger.create({ trigger: features, start: "top 80%", onEnter: () => { gsap.fromTo( features.querySelectorAll(".feature-card"), { y: 100, opacity: 0, rotationY: 45, }, { y: 0, opacity: 1, rotationY: 0, duration: 0.8, ease: "power3.out", stagger: 0.1, }, ) }, }) // Stats section scroll trigger ScrollTrigger.create({ trigger: stats, start: "top 80%", onEnter: () => { gsap.fromTo( stats, { scale: 0.8, opacity: 0, }, { scale: 1, opacity: 1, duration: 0.8, ease: "back.out(1.7)", }, ) // Animate stat numbers stats.querySelectorAll(".stat-number").forEach((stat) => { const finalValue = stat.textContent gsap.fromTo( stat, { textContent: "0" }, { textContent: finalValue, duration: 2, ease: "power2.out", snap: { textContent: 1 }, delay: 0.5, }, ) }) }, }) // Parallax effect for hero ScrollTrigger.create({ trigger: hero, start: "top top", end: "bottom top", scrub: 1, onUpdate: (self) => { const progress = self.progress gsap.to(hero, { y: progress * 200, opacity: 1 - progress * 0.8, duration: 0.1, ease: "none", }) }, }) // Cleanup return () => { heroTl.kill() ScrollTrigger.getAll().forEach((trigger) => trigger.kill()) } }, []) return (

{/* Hero Section */}

Next-Gen Web3 Platform

Web3Wise

Premium Web3 consultancy platform with AI-powered tools, expert guidance, and sophisticated design

{/* Features Grid */}

Platform Features

Discover our comprehensive suite of Web3 tools and sophisticated experiences

{features.map((feature, index) => (

{ gsap.to(e.currentTarget, { y: -10, scale: 1.02, rotationY: 5, duration: 0.3, ease: "power2.out", }) }} onMouseLeave={(e) => { gsap.to(e.currentTarget, { y: 0, scale: 1, rotationY: 0, duration: 0.3, ease: "power2.out", }) }} >

{feature.title}

{feature.description}

Explore

))}

{/* Stats Section */}

500+

Projects Delivered

50+

Expert Consultants

24/7

AI Support

98%

Success Rate

) } [V0_FILE]typescriptreact:file="components/three-scene.tsx" "use client" import type React from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls, Float, Text3D, Environment } from "@react-three/drei" import { Suspense } from "react" function FloatingLogo() { return ( W3W ) } function ParticleField() { const particles = Array.from({ length: 50 }, (_, i) => ( 0.5 ? "#8B5CF6" : "#A855F7"} emissive={Math.random() > 0.5 ? "#8B5CF6" : "#A855F7"} emissiveIntensity={0.6} /> )) return <>{particles} } export default function ThreeScene({ children }: { children?: React.ReactNode }) { return (

) } [V0_FILE]typescriptreact:file="app/nft-sessions/page.tsx" "use client" import { motion, useScroll, useTransform } from "framer-motion" import { useRef, useState } from "react" import { Award, Clock, Users, Zap, Star } from "lucide-react" import { Canvas } from "@react-three/fiber" import { Float, Text3D, OrbitControls } from "@react-three/drei" import { Suspense } from "react" function NFTBadge3D({ title, color }: { title: string; color: string }) { return ( {title} ) } const nftSessions = [ { id: 1, title: "DeFi Mastery Session", consultant: "Alex Chen", duration: "60 min", participants: "1-on-1", price: "0.5 ETH", rating: 4.9, sessions: 150, description: "Deep dive into DeFi protocols, yield farming strategies, and risk management", color: "#8B5CF6", }, { id: 2, title: "NFT Strategy Workshop", consultant: "Sarah Williams", duration: "90 min", participants: "Group", price: "0.3 ETH", rating: 4.8, sessions: 120, description: "Comprehensive NFT market analysis and collection strategy development", color: "#A855F7", }, { id: 3, title: "Smart Contract Audit", consultant: "Marcus Rodriguez", duration: "120 min", participants: "1-on-1", price: "1.2 ETH", rating: 5.0, sessions: 200, description: "Professional smart contract security audit and optimization recommendations", color: "#8B5CF6", }, ] export default function NFTSessionsPage() { const containerRef = useRef(null) const [selectedSession, setSelectedSession] = useState(null) const { scrollYProgress } = useScroll({ target: containerRef, offset: ["start start", "end end"], }) const x = useTransform(scrollYProgress, [0.2, 0.8], ["0%", "-66%"]) return (

{/* Hero Section */}

ERC-721 Consultation Sessions

NFT Sessions Exclusive consultation sessions minted as unique NFTs - proof of your Web3 learning journey with transferable value

{/* 3D NFT Showcase */}

{/* Horizontal Scrolling Sessions */}

Available Sessions {nftSessions.map((session, index) => ( setSelectedSession(session.id)} >

{/* NFT Badge */}

NFT

#{session.id.toString().padStart(3, "0")}

{session.title}

with {session.consultant}

{session.description}

{session.duration}

{session.participants}

{session.rating}

{session.sessions} sessions

{session.price}

Book & Mint

))}

{/* NFT Benefits */}

Why Session NFTs?

Proof of Learning

Verifiable credentials of your Web3 education journey

Exclusive Access

Join exclusive communities and future session discounts

Transferable Value

Trade or gift your session NFTs with embedded knowledge value

) } [V0_FILE]typescriptreact:file="app/consultants/page.tsx" "use client" import { motion } from "framer-motion" import { useRef, useState } from "react" import { Star, Calendar, Filter, Search, MapPin, Award } from "lucide-react" import { Canvas } from "@react-three/fiber" import { Float, Sphere, OrbitControls } from "@react-three/drei" import { Suspense } from "react" function ConsultantAvatar3D({ color }: { color: string }) { return ( ) } const consultants = [ { id: 1, name: "Alex Chen", expertise: "DeFi Architecture", rating: 4.9, sessions: 150, hourlyRate: "$200", location: "San Francisco, CA", languages: ["English", "Mandarin"], specialties: ["Yield Farming", "Liquidity Mining", "Protocol Design"], avatar: "/placeholder.svg?height=200&width=200", color: "#8B5CF6", verified: true, description: "Leading DeFi architect with 5+ years experience building protocols that have secured over $1B in TVL.", }, { id: 2, name: "Sarah Williams", expertise: "NFT Strategy", rating: 4.8, sessions: 120, hourlyRate: "$180", location: "London, UK", languages: ["English", "French"], specialties: ["Collection Strategy", "Market Analysis", "Community Building"], avatar: "/placeholder.svg?height=200&width=200", color: "#A855F7", verified: true, description: "NFT strategist who has helped launch 50+ successful collections with combined volume of 10K+ ETH.", }, { id: 3, name: "Marcus Rodriguez", expertise: "Smart Contracts", rating: 5.0, sessions: 200, hourlyRate: "$250", location: "Austin, TX", languages: ["English", "Spanish"], specialties: ["Security Audits", "Gas Optimization", "Solidity"], avatar: "/placeholder.svg?height=200&width=200", color: "#8B5CF6", verified: true, description: "Senior smart contract auditor with expertise in finding critical vulnerabilities and optimizations.", }, { id: 4, name: "Emily Zhang", expertise: "Tokenomics", rating: 4.9, sessions: 180, hourlyRate: "$220", location: "Singapore", languages: ["English", "Mandarin", "Japanese"], specialties: ["Token Design", "Economic Models", "Game Theory"], avatar: "/placeholder.svg?height=200&width=200", color: "#A855F7", verified: true, description: "Tokenomics expert who has designed sustainable economic models for 30+ successful Web3 projects.", }, { id: 5, name: "David Kim", expertise: "Layer 2 Solutions", rating: 4.7, sessions: 95, hourlyRate: "$190", location: "Seoul, South Korea", languages: ["English", "Korean"], specialties: ["Scaling Solutions", "Rollups", "Cross-chain"], avatar: "/placeholder.svg?height=200&width=200", color: "#8B5CF6", verified: true, description: "Layer 2 specialist focused on scaling solutions and cross-chain interoperability protocols.", }, { id: 6, name: "Lisa Thompson", expertise: "Web3 Security", rating: 4.9, sessions: 160, hourlyRate: "$240", location: "Toronto, Canada", languages: ["English"], specialties: ["Security Audits", "Penetration Testing", "Risk Assessment"], avatar: "/placeholder.svg?height=200&width=200", color: "#A855F7", verified: true, description: "Cybersecurity expert specializing in Web3 security audits and vulnerability assessments.", }, ] const filters = [ { name: "All", value: "all" }, { name: "DeFi", value: "defi" }, { name: "NFTs", value: "nft" }, { name: "Security", value: "security" }, { name: "Tokenomics", value: "tokenomics" }, ] export default function ConsultantsPage() { const containerRef = useRef(null) const [selectedFilter, setSelectedFilter] = useState("all") const [searchQuery, setSearchQuery] = useState("") const [selectedConsultant, setSelectedConsultant] = useState(null) return (

{/* Hero Section */}

Expert Web3 Consultants

Meet Our Consultants Connect with industry-leading Web3 experts for personalized guidance and strategic insights

{/* 3D Avatars Showcase */}

{/* Search and Filters */}

{/* Search */}

setSearchQuery(e.target.value)} className="w-full glass rounded-full pl-12 pr-4 py-3 text-pure-white placeholder-gray-light focus:outline-none focus:ring-2 focus:ring-bright-purple transition-all duration-200" />

{/* Filters */}

{filters.map((filter) => ( setSelectedFilter(filter.value)} className={`px-4 py-2 rounded-full font-medium transition-all duration-200 ${ selectedFilter === filter.value ? "bg-gradient-to-r from-bright-purple to-light-purple text-pure-white" : "glass text-gray-light hover:text-pure-white" }`} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > {filter.name} ))}

{/* Consultants Grid */}

{consultants.map((consultant, index) => ( setSelectedConsultant(consultant.id)} >

{/* Avatar and Status */}

{consultant.name .split(" ") .map((n) => n[0]) .join("")}

{consultant.verified && (

Verified

)}

{/* Info */}

{consultant.name}

{consultant.expertise}

{consultant.description}

{/* Stats */}

{consultant.rating}

{consultant.sessions} sessions

{/* Location and Rate */}

{consultant.location}

{consultant.hourlyRate}/hr

{/* Specialties */}

{consultant.specialties.slice(0, 2).map((specialty, i) => ( {specialty} ))} {consultant.specialties.length > 2 && ( +{consultant.specialties.length - 2} )}

{/* CTA */} Book Consultation

))}

{/* Stats Section */}

50+

Expert Consultants

4.9/5

Average Rating

1000+

Sessions Completed

24/7

Availability

) } [V0_FILE]typescriptreact:file="app/validators/page.tsx" "use client" import type React from "react" import { motion } from "framer-motion" import { useState } from "react" import { Upload, Shield, CheckCircle, AlertTriangle, XCircle, Code, Zap, FileText } from "lucide-react" const validationResults = [ { type: "security", status: "passed", title: "Reentrancy Protection", description: "Contract properly implements reentrancy guards", }, { type: "security", status: "warning", title: "Access Control", description: "Consider implementing role-based access control", }, { type: "gas", status: "passed", title: "Gas Optimization", description: "Efficient gas usage patterns detected", }, { type: "security", status: "failed", title: "Integer Overflow", description: "Potential overflow vulnerability in line 42", }, ] export default function ValidatorsPage() { const [uploadedFile, setUploadedFile] = useState(null) const [contractAddress, setContractAddress] = useState("") const [isValidating, setIsValidating] = useState(false) const [showResults, setShowResults] = useState(false) const handleFileUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { setUploadedFile(file.name) } } const handleValidation = () => { setIsValidating(true) setTimeout(() => { setIsValidating(false) setShowResults(true) }, 3000) } const getStatusIcon = (status: string) => { switch (status) { case "passed": return case "warning": return case "failed": return default: return } } const getStatusColor = (status: string) => { switch (status) { case "passed": return "border-green-400/20 bg-green-400/5" case "warning": return "border-yellow-400/20 bg-yellow-400/5" case "failed": return "border-red-400/20 bg-red-400/5" default: return "border-gray-light/20 bg-gray-light/5" } } return (

{/* Hero Section */}

AI-Powered Smart Contract Validation

Contract Validator Advanced AI-powered smart contract auditing and validation to ensure security and optimal gas efficiency

{/* Upload Section */}

{/* File Upload */}

Upload Contract


                    
                      {uploadedFile ? uploadedFile : "Drop your .sol or .vy file here"}
                    
                    or click to browse



              {/* Contract Address */}
              
                
                  
                  Or Enter Address
                

                
                   setContractAddress(e.target.value)}
                    className="w-full glass rounded-xl px-4 py-3 text-pure-white placeholder-gray-light focus:outline-none focus:ring-2 focus:ring-bright-purple transition-all duration-200"
                  />



            {/* Validation Button */}
            
              
                {isValidating ? (
                  
                    
                    Validating...
                  
                ) : (
                  "Start Validation"
                )}



      {/* Results Section */}
      {showResults && (
        
          
            
              
                Validation Results
              
            

            {/* Summary Cards */}
            
              
                
                  
                
                2
                Passed
              

              
                
                  
                
                1
                Warnings
              

              
                
                  
                
                1
                Critical
              
            

            {/* Detailed Results */}
            
              {validationResults.map((result, index) => (
                
                  
                    {getStatusIcon(result.status)}
                    
                      
                        {result.title}
                        
                          {result.status.toUpperCase()}
                        
                      
                      {result.description}
                    
                  
                
              ))}
            

            {/* Action Buttons */}
            
              
                
                Download Report
              

              
                Book Expert Review
              
            
          
        
      )}

      {/* Features Section */}
      
        
          
            
              Validation Features
            
          

          
            {[
              {
                icon: Shield,
                title: "Security Analysis",
                description:
                  "Comprehensive security vulnerability detection including reentrancy, overflow, and access control issues",
              },
              {
                icon: Zap,
                title: "Gas Optimization",
                description: "Identify gas-inefficient patterns and suggest optimizations to reduce transaction costs",
              },
              {
                icon: Code,
                title: "Code Quality",
                description: "Best practices compliance checking and code quality assessment for maintainability",
              },
            ].map((feature, index) => (
              
                
                  
                
                {feature.title}
                {feature.description}
              
            ))}


  )
}
[V0_FILE]typescriptreact:file="app/bot-support/page.tsx"
"use client"

import { motion } from "framer-motion"
import { useState, useEffect, useRef } from "react"
import { MessageSquare, Bot, Terminal, Send, Zap, Users, Clock } from "lucide-react"
import { Canvas } from "@react-three/fiber"
import { Float, Text3D, OrbitControls } from "@react-three/drei"
import { Suspense } from "react"

function BotAvatar3D() {
  return (
    
      
        
          
          
        
        
          AI
          
        
      
    
  )
}

const terminalCommands = [
  { command: "$ web3wise --help", output: "Web3Wise AI Assistant v2.0.1" },
  { command: "$ analyze --contract 0x742d35...", output: "✓ Contract analysis complete" },
  { command: "$ defi --strategy yield-farming", output: "📊 Generating DeFi strategy..." },
  { command: "$ nft --market-analysis", output: "🎨 NFT market trends loaded" },
]

const chatMessages = [
  { type: "user", message: "What are the best DeFi protocols for yield farming?", time: "2:34 PM" },
  {
    type: "bot",
    message:
      "Based on current market conditions, I recommend Aave, Compound, and Uniswap V3. Here's a detailed analysis with APY comparisons...",
    time: "2:34 PM",
  },
  { type: "user", message: "Can you help me audit this smart contract?", time: "2:35 PM" },
  {
    type: "bot",
    message:
      "I'll analyze your contract for security vulnerabilities and gas optimization. Please share the contract code or address.",
    time: "2:35 PM",
  },
  { type: "user", message: "How do I bridge tokens from Ethereum to Polygon?", time: "2:36 PM" },
  {
    type: "bot",
    message:
      "I'll guide you through the cross-chain bridge process. First, connect your wallet and select the tokens...",
    time: "2:36 PM",
  },
]

export default function BotSupportPage() {
  const [currentCommand, setCurrentCommand] = useState(0)
  const [terminalText, setTerminalText] = useState("")
  const [currentMessage, setCurrentMessage] = useState(0)
  const [chatInput, setChatInput] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const terminalRef = useRef(null)

  // Terminal animation
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentCommand((prev) => (prev + 1) % terminalCommands.length)
    }, 4000)
    return () => clearInterval(interval)
  }, [])

  useEffect(() => {
    const command = terminalCommands[currentCommand]
    let index = 0
    setTerminalText("")

    const typeInterval = setInterval(() => {
      if (index < command.command.length) {
        setTerminalText(command.command.slice(0, index + 1))
        index++
      } else {
        clearInterval(typeInterval)
        setTimeout(() => {
          setTerminalText(command.command + "\n" + command.output)
        }, 500)
      }
    }, 100)

    return () => clearInterval(typeInterval)
  }, [currentCommand])

  // Chat animation
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentMessage((prev) => (prev + 1) % chatMessages.length)
    }, 6000)
    return () => clearInterval(interval)
  }, [])

  const handleSendMessage = () => {
    if (chatInput.trim()) {
      setIsTyping(true)
      setTimeout(() => {
        setIsTyping(false)
        setChatInput("")
      }, 2000)
    }
  }

  return (
    
      {/* Hero Section */}
      
        
          
            
              
              AI-Powered 24/7 Support
            
          

          
            
              Bot Support
            
          

          
            Get instant Web3 guidance through our intelligent AI assistant, available 24/7 via Telegram and web
            interface
          
        
      

      {/* 3D Bot Avatar */}
      
        
      

      {/* Terminal and Chat Interface */}
      
        
          
            {/* Animated Terminal */}
            
              
                {/* Terminal Header */}
                
                  
                    
                      
                      
                      
                    
                    
                      
                      Web3Wise Terminal
                    
                  
                

                {/* Terminal Content */}
                
                  
                    Welcome to Web3Wise AI Terminal
                    

                    Type 'help' for available commands
                    

                    ================================
                  

                  
                    {terminalCommands.slice(0, currentCommand + 1).map((cmd, index) => (
                      
                        
                          {index === currentCommand ? terminalText : cmd.command}
                          {index === currentCommand && terminalText === cmd.command && (
                            
                              |
                            
                          )}
                        
                        {index < currentCommand && {cmd.output}}
                        {index === currentCommand && terminalText.includes("\n") && (
                          {cmd.output}
                        )}
                      
                    ))}
                  

                  
                    $ _
                  
                
              
            

            {/* Telegram Chat Interface */}
            
              
                {/* Chat Header */}
                
                  
                    
                      
                    
                    
                      Web3Wise Bot
                      
                        
                        Online • Instant replies
                      
                    
                  
                

                {/* Chat Messages */}
                
                  {chatMessages.slice(0, currentMessage + 1).map((msg, index) => (
                    
                      
                        
                          {msg.message}
                        
                        {msg.time}
                      
                    
                  ))}

                  {isTyping && (
                    
                      
                        
                          
                          
                          
                        
                      
                    
                  )}
                

                {/* Chat Input */}
                
                  
                     setChatInput(e.target.value)}
                      placeholder="Ask me anything about Web3..."
                      className="flex-1 glass rounded-full px-4 py-2 text-pure-white placeholder-gray-light focus:outline-none focus:ring-2 focus:ring-bright-purple transition-all duration-200"
                      onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
                    />
                    
                      
                    
                  
                
              
            
          
        
      

      {/* Features Grid */}
      
        
          
            
              AI Assistant Features
            
          

          
            {[
              {
                icon: Zap,
                title: "Instant Responses",
                description: "Get immediate answers to your Web3 questions with lightning-fast AI processing",
                color: "from-bright-purple to-medium-purple",
              },
              {
                icon: Users,
                title: "Multi-Platform Support",
                description: "Available on Telegram, Discord, and web interface for seamless accessibility",
                color: "from-light-purple to-bright-purple",
              },
              {
                icon: Clock,
                title: "24/7 Availability",
                description: "Round-the-clock assistance with no downtime or waiting periods",
                color: "from-bright-purple to-light-purple",
              },
            ].map((feature, index) => (
              
                
                  
                
                {feature.title}
                {feature.description}
              
            ))}
          
        
      

      {/* CTA Section */}
      
        
          
            
              Start Chatting with{" "}
              
                Web3Wise AI
              
            
            
              Join thousands of Web3 builders who rely on our AI assistant for instant guidance, market insights, and
              technical support.
            

            
              
                
                Start on Telegram
              

              
                Try Web Interface
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/swap-finder/page.tsx"
"use client"

import { motion, useScroll, useTransform } from "framer-motion"
import { useRef, useState } from "react"
import { ArrowUpDown, TrendingUp, Zap, RefreshCw } from "lucide-react"
import { Canvas } from "@react-three/fiber"
import { Float, Sphere, OrbitControls, Text3D } from "@react-three/drei"
import { Suspense } from "react"

function CryptoCoin3D({
  symbol,
  color,
  position,
}: { symbol: string; color: string; position: [number, number, number] }) {
  return (
    
      
        
          
        
        
          {symbol}
          
        
      
    
  )
}

const cryptos = [
  { symbol: "BTC", name: "Bitcoin", price: 45000, change: 2.5, color: "#8B5CF6" },
  { symbol: "ETH", name: "Ethereum", price: 3200, change: 1.8, color: "#A855F7" },
  { symbol: "SOL", name: "Solana", price: 120, change: -0.5, color: "#8B5CF6" },
  { symbol: "MATIC", name: "Polygon", price: 0.85, change: 3.2, color: "#A855F7" },
  { symbol: "AVAX", name: "Avalanche", price: 42, change: 1.2, color: "#8B5CF6" },
  { symbol: "DOT", name: "Polkadot", price: 8.5, change: -1.1, color: "#A855F7" },
]

const swapRoutes = [
  {
    from: "ETH",
    to: "USDC",
    route: "Uniswap V3 → 1inch",
    fee: "0.05%",
    time: "~15s",
    savings: "2.3%",
  },
  {
    from: "BTC",
    to: "SOL",
    route: "Jupiter → Serum",
    fee: "0.08%",
    time: "~30s",
    savings: "1.8%",
  },
  {
    from: "MATIC",
    to: "AVAX",
    route: "QuickSwap → TraderJoe",
    fee: "0.12%",
    time: "~45s",
    savings: "3.1%",
  },
]

export default function SwapFinderPage() {
  const containerRef = useRef(null)
  const [fromCrypto, setFromCrypto] = useState("ETH")
  const [toCrypto, setToCrypto] = useState("USDC")
  const [amount, setAmount] = useState("1")
  const [isSwapping, setIsSwapping] = useState(false)

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end end"],
  })

  const x = useTransform(scrollYProgress, [0.2, 0.8], ["0%", "-75%"])
  const rotateY = useTransform(scrollYProgress, [0, 1], [0, 360])

  const swapCryptos = () => {
    setFromCrypto(toCrypto)
    setToCrypto(fromCrypto)
  }

  const handleSwap = () => {
    setIsSwapping(true)
    setTimeout(() => {
      setIsSwapping(false)
    }, 3000)
  }

  return (
    
      {/* Hero Section */}
      
        
          
            
              
              Advanced Crypto Swap Tools
            
          

          
            
              Swap Finder
            
          

          
            Find the best crypto swap rates across multiple DEXs with real-time arbitrage opportunities and optimal
            routing
          
        
      

      {/* 3D Crypto Carousel */}
      
        
      

      {/* Swap Interface */}
      
        
          
            
              
                
                  Smart Swap Interface
                
              
              Get the best rates across 50+ DEXs with AI-powered routing
            

            
              {/* From Token */}
              
                
                  From
                  Balance: 2.45 ETH
                
                
                  
                   setAmount(e.target.value)}
                    className="w-32 bg-transparent border border-bright-purple/30 rounded-xl px-4 py-3 text-pure-white text-right focus:outline-none focus:border-bright-purple transition-colors duration-200"
                    placeholder="0.0"
                  />
                
              

              {/* Swap Button */}
              
                
                  
                
              

              {/* To Token */}
              
                
                  To
                  ≈ $3,200
                
                
                  
                  
                    {(Number.parseFloat(amount) * 3200).toFixed(4)}
                  
                
              

              {/* Route Information */}
              
                
                  
                    
                    Best Route
                  
                  Save 2.3%
                
                
                  
                    Route
                    Uniswap V3 → 1inch
                  
                  
                    Fee
                    0.05%
                  
                  
                    Est. Time
                    ~15 seconds
                  
                
              

              {/* Swap Button */}
              
                {isSwapping ? (
                  
                    
                    Swapping...
                  
                ) : (
                  "Execute Swap"
                )}
              
            
          
        
      

      {/* Horizontal Scrolling Routes */}
      
        
          
            
              Optimal Swap Routes
            
          

          
            {swapRoutes.map((route, index) => (
              
                
                  
                    
                      
                        {route.from}
                      
                      
                      
                        {route.to}
                      
                    
                    
                      Save {route.savings}
                    
                  

                  
                    
                      Route
                      {route.route}
                    
                    
                      Fee
                      {route.fee}
                    
                    
                      Time
                      {route.time}
                    
                  

                  
                    Use This Route
                  
                
              
            ))}
          
        
      

      {/* Market Data */}
      
        
          
            
              Live Market Data
            
          

          
            {cryptos.map((crypto, index) => (
              
                
                  
                    
                      {crypto.symbol[0]}
                    
                    
                      {crypto.symbol}
                      {crypto.name}
                    
                  
                  
                    ${crypto.price.toLocaleString()}
                    = 0 ? "text-green-400" : "text-red-400"}`}>
                      {crypto.change >= 0 ? "+" : ""}
                      {crypto.change}%
                    
                  
                

                
                  
                  24h Volume: $2.1B
                
              
            ))}
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/research-hub/page.tsx"
"use client"

import { motion, useScroll, useTransform } from "framer-motion"
import { useRef, useState } from "react"
import { FileText, Shield, TrendingUp, Zap, Download, Eye, Filter, Search } from "lucide-react"
import { Canvas } from "@react-three/fiber"
import { Float, Box, OrbitControls } from "@react-three/drei"
import { Suspense } from "react"

function ResearchCard3D({ color, position }: { color: string; position: [number, number, number] }) {
  return (
    
      
        
      
    
  )
}

const researchPapers = [
  {
    id: 1,
    title: "DeFi Security Analysis 2024",
    category: "Security",
    tags: ["Smart Contracts", "Auditing", "Risk Assessment"],
    icon: Shield,
    color: "from-bright-purple to-light-purple",
    author: "Dr. Sarah Chen",
    date: "Dec 2024",
    views: "12.5K",
    downloads: "3.2K",
    description:
      "Comprehensive analysis of DeFi security vulnerabilities and mitigation strategies based on 500+ protocol audits.",
    abstract:
      "This paper presents a systematic analysis of security vulnerabilities in decentralized finance protocols...",
  },
  {
    id: 2,
    title: "Cross-Chain Bridge Protocols",
    category: "Infrastructure",
    tags: ["Interoperability", "Bridges", "Layer 2"],
    icon: Zap,
    color: "from-light-purple to-bright-purple",
    author: "Prof. Michael Zhang",
    date: "Nov 2024",
    views: "8.7K",
    downloads: "2.1K",
    description: "Technical deep-dive into cross-chain bridge architectures and their security implications.",
    abstract: "Cross-chain bridges have become critical infrastructure for the multi-chain ecosystem...",
  },
  {
    id: 3,
    title: "NFT Market Trends & Analysis",
    category: "Market Research",
    tags: ["NFTs", "Market Data", "Trends"],
    icon: TrendingUp,
    color: "from-bright-purple to-medium-purple",
    author: "Emma Rodriguez",
    date: "Oct 2024",
    views: "15.3K",
    downloads: "4.8K",
    description: "Comprehensive market analysis of NFT trends, pricing patterns, and future projections.",
    abstract: "The NFT market has experienced significant evolution throughout 2024...",
  },
  {
    id: 4,
    title: "Tokenomics Design Patterns",
    category: "Economics",
    tags: ["Tokenomics", "Game Theory", "Incentives"],
    icon: FileText,
    color: "from-light-purple to-medium-purple",
    author: "Dr. Alex Thompson",
    date: "Sep 2024",
    views: "9.2K",
    downloads: "2.7K",
    description: "Analysis of successful tokenomics models and design patterns for sustainable Web3 economies.",
    abstract: "Effective tokenomics design is crucial for the long-term success of Web3 projects...",
  },
  {
    id: 5,
    title: "Web3 UX/UI Best Practices",
    category: "Design",
    tags: ["UX", "Interface", "Usability"],
    icon: FileText,
    color: "from-bright-purple to-light-purple",
    author: "Lisa Park",
    date: "Aug 2024",
    views: "11.1K",
    downloads: "3.5K",
    description: "User experience guidelines and best practices for Web3 applications and interfaces.",
    abstract: "Web3 applications face unique UX challenges that require specialized design approaches...",
  },
  {
    id: 6,
    title: "Layer 2 Scaling Solutions",
    category: "Technology",
    tags: ["Scaling", "Layer 2", "Performance"],
    icon: Zap,
    color: "from-medium-purple to-light-purple",
    author: "Dr. James Wilson",
    date: "Jul 2024",
    views: "13.8K",
    downloads: "4.1K",
    description: "Comparative analysis of Layer 2 scaling solutions and their performance characteristics.",
    abstract: "Layer 2 solutions have emerged as the primary scaling approach for Ethereum...",
  },
]

const categories = ["All", "Security", "Infrastructure", "Market Research", "Economics", "Design", "Technology"]

export default function ResearchHubPage() {
  const containerRef = useRef(null)
  const [selectedCategory, setSelectedCategory] = useState("All")
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedPaper, setSelectedPaper] = useState(null)

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end end"],
  })

  const x = useTransform(scrollYProgress, [0.2, 0.8], ["0%", "-50%"])

  const filteredPapers = researchPapers.filter((paper) => {
    const matchesCategory = selectedCategory === "All" || paper.category === selectedCategory
    const matchesSearch =
      searchQuery === "" ||
      paper.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      paper.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))
    return matchesCategory && matchesSearch
  })

  return (
    
      {/* Hero Section */}
      
        
          
            
              
              Cutting-Edge Web3 Research
            
          

          
            
              Research Hub
            
          

          
            Access cutting-edge Web3 research papers, market analysis, and technical documentation from industry experts
          
        
      

      {/* 3D Research Cards */}
      
        
      

      {/* Search and Filters */}
      
        
          
            {/* Search */}
            
              
               setSearchQuery(e.target.value)}
                className="w-full glass rounded-full pl-12 pr-4 py-3 text-pure-white placeholder-gray-light focus:outline-none focus:ring-2 focus:ring-bright-purple transition-all duration-200"
              />
            

            {/* Category Filters */}
            
              
              
                {categories.map((category) => (
                   setSelectedCategory(category)}
                    className={`px-4 py-2 rounded-full font-medium transition-all duration-200 ${
                      selectedCategory === category
                        ? "bg-gradient-to-r from-bright-purple to-light-purple text-pure-white"
                        : "glass text-gray-light hover:text-pure-white"
                    }`}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                  >
                    {category}
                  
                ))}
              
            
          
        
      

      {/* Horizontal Scrolling Research Papers */}
      
        
          
            
              Latest Research
            
          

          
            {filteredPapers.map((paper, index) => (
               setSelectedPaper(paper.id)}
              >
                
                  
                    
                  

                  
                    
                      {paper.category}
                    
                    
                      {paper.title}
                    
                    {paper.description}
                  

                  
                    
                      {paper.author}
                      {paper.date}
                    
                    
                      
                        
                        {paper.views}
                      
                      
                        
                        {paper.downloads}
                      
                    
                  

                  
                    {paper.tags.slice(0, 3).map((tag, i) => (
                      
                        {tag}
                      
                    ))}
                  

                  
                    
                      
                      Read
                    
                    
                      
                      Download
                    
                  
                
              
            ))}
          
        
      

      {/* Stats Section */}
      
        
          
            
              
                
                  150+
                
                Research Papers
              
              
                
                  50+
                
                Expert Authors
              
              
                
                  100K+
                
                Total Downloads
              
              
                
                  Weekly
                
                New Publications
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/cross-chain-payments/page.tsx"
"use client"

import { motion, useScroll, useTransform } from "framer-motion"
import { useRef, useState } from "react"
import { ArrowRight, Zap, Shield, Clock, DollarSign } from "lucide-react"
import { Canvas } from "@react-three/fiber"
import { Float, Cylinder, Sphere, OrbitControls } from "@react-three/drei"
import { Suspense } from "react"

function BridgeAnimation() {
  return (
    
      {/* Bridge Structure */}
      
        
          
        
      

      {/* Source Token */}
      
        
          
        
      

      {/* Destination Token */}
      
        
          
        
      

      {/* Moving Particles */}
      {Array.from({ length: 5 }).map((_, i) => (
        
          
            
          
        
      ))}
    
  )
}

const crossChainRoutes = [
  {
    from: { token: "ETH", network: "Ethereum", color: "#8B5CF6" },
    to: { token: "USDC", network: "Polygon", color: "#A855F7" },
    route: "Polygon Bridge → QuickSwap",
    fee: "0.1%",
    time: "2-5 min",
    savings: "15%",
    useCase: "Lower fees for DeFi transactions",
  },
  {
    from: { token: "USDC", network: "Ethereum", color: "#8B5CF6" },
    to: { token: "SOL", network: "Solana", color: "#A855F7" },
    route: "Wormhole → Jupiter",
    fee: "0.05%",
    time: "1-3 min",
    savings: "25%",
    useCase: "Fast payments to Solana ecosystem",
  },
  {
    from: { token: "MATIC", network: "Polygon", color: "#A855F7" },
    to: { token: "APT", network: "Aptos", color: "#8B5CF6" },
    route: "LayerZero → PancakeSwap",
    fee: "0.08%",
    time: "3-7 min",
    savings: "20%",
    useCase: "Cross-chain consulting payments",
  },
]

const paymentSteps = [
  {
    step: 1,
    title: "Select Source",
    description: "Choose your token and network",
    icon: DollarSign,
  },
  {
    step: 2,
    title: "Bridge & Convert",
    description: "Automated cross-chain routing",
    icon: Zap,
  },
  {
    step: 3,
    title: "Secure Transfer",
    description: "Consultant receives payment",
    icon: Shield,
  },
]

export default function CrossChainPaymentsPage() {
  const containerRef = useRef(null)
  const [selectedRoute, setSelectedRoute] = useState(0)
  const [paymentAmount, setPaymentAmount] = useState("100")
  const [isProcessing, setIsProcessing] = useState(false)

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end end"],
  })

  const x = useTransform(scrollYProgress, [0.3, 0.7], ["0%", "-66%"])

  const handlePayment = () => {
    setIsProcessing(true)
    setTimeout(() => {
      setIsProcessing(false)
    }, 4000)
  }

  return (
    
      {/* Hero Section */}
      
        
          
            
              
              Seamless Cross-Chain Payments
            
          

          
            
              Cross-Chain Payments
            
          

          
            Pay consultants in any token while they receive in their preferred currency across multiple blockchains
          
        
      

      {/* 3D Bridge Animation */}
      
        
      

      {/* Payment Flow */}
      
        
          
            
              How It Works
            
          

          
            {paymentSteps.map((step, index) => (
              
                
                  
                    
                  
                  
                    {step.step}
                  
                
                {step.title}
                {step.description}
              
            ))}
          

          {/* Payment Interface */}
          
            
              {/* You Pay */}
              
                You Pay
                
                  
                    Amount
                    Balance: 2.45 ETH
                  
                  
                    
                     setPaymentAmount(e.target.value)}
                      className="w-32 bg-transparent border border-bright-purple/30 rounded-xl px-4 py-3 text-pure-white text-right focus:outline-none focus:border-bright-purple transition-colors duration-200"
                      placeholder="0.0"
                    />
                  
                  
                    ≈ ${(Number.parseFloat(paymentAmount) * 3200).toLocaleString()}
                  
                
              

              {/* Consultant Receives */}
              
                Consultant Receives
                
                  
                    Converted Amount
                    Auto-converted
                  
                  
                    
                    
                      {(Number.parseFloat(paymentAmount) * 320).toFixed(2)}
                    
                  
                  
                    ≈ ${(Number.parseFloat(paymentAmount) * 3200).toLocaleString()}
                  
                
              
            

            {/* Route Information */}
            
              
                
                  
                  Optimal Route
                
                Save 20%
              
              
                
                  Route
                  LayerZero → PancakeSwap
                
                
                  Fee
                  0.08%
                
                
                  Est. Time
                  3-7 minutes
                
              
            

            {/* Payment Button */}
            
              {isProcessing ? (
                
                  
                  Processing Payment...
                
              ) : (
                
                  Send Cross-Chain Payment
                  
                
              )}
            
          
        
      

      {/* Horizontal Scrolling Use Cases */}
      
        
          
            
              Real-World Use Cases
            
          

          
            {crossChainRoutes.map((route, index) => (
              
                
                  {/* Route Visualization */}
                  
                    
                      
                        {route.from.token}
                      
                      
                        
                        {route.time}
                      
                      
                        {route.to.token}
                      
                    
                    
                      Save {route.savings}
                    
                  

                  {/* Network Info */}
                  
                    
                      From Network
                      {route.from.network}
                    
                    
                      To Network
                      {route.to.network}
                    
                    
                      Route
                      {route.route}
                    
                    
                      Fee
                      {route.fee}
                    
                  

                  {/* Use Case */}
                  
                    Use Case
                    {route.useCase}
                  

                  
                    Use This Route
                  
                
              
            ))}
          
        
      

      {/* Benefits Section */}
      
        
          
            
              
                Why Cross-Chain Payments?
              
            

            
              
                
                  
                
                Lower Costs
                Save up to 25% on transaction fees with optimal routing
              

              
                
                  
                
                Faster Settlements
                Complete payments in minutes instead of hours or days
              

              
                
                  
                
                Secure & Trustless
                Powered by battle-tested bridge protocols and smart contracts
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/navbar.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Menu, X, Zap, Home, Award, Users, Shield, Bot, ArrowUpDown, FileText, CreditCard } from "lucide-react"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger)
}

const navItems = [
  { name: "Home", href: "/", icon: Home },
  { name: "NFT Sessions", href: "/nft-sessions", icon: Award },
  { name: "Consultants", href: "/consultants", icon: Users },
  { name: "Validators", href: "/validators", icon: Shield },
  { name: "Bot Support", href: "/bot-support", icon: Bot },
  { name: "Swap Finder", href: "/swap-finder", icon: ArrowUpDown },
  { name: "Research Hub", href: "/research-hub", icon: FileText },
  { name: "Cross-Chain Payments", href: "/cross-chain-payments", icon: CreditCard },
]

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()
  const navRef = useRef(null)
  const overlayRef = useRef(null)
  const sidebarRef = useRef(null)
  const logoRef = useRef(null)
  const menuButtonRef = useRef(null)
  const scrollContainerRef = useRef(null)

  useEffect(() => {
    const nav = navRef.current
    const menuButton = menuButtonRef.current

    if (!nav || !menuButton) return

    // Initial navbar animation - simple fade in
    gsap.fromTo(
      nav,
      {
        opacity: 0,
      },
      {
        opacity: 1,
        duration: 0.8,
        ease: "power2.out",
        delay: 0.3,
      },
    )

    // Menu button animation
    gsap.fromTo(
      menuButton,
      {
        scale: 0,
        rotation: 90,
      },
      {
        scale: 1,
        rotation: 0,
        duration: 0.8,
        ease: "back.out(1.7)",
        delay: 0.8,
      },
    )

    // Cleanup
    return () => {
      ScrollTrigger.getAll().forEach((trigger) => trigger.kill())
    }
  }, [])

  useEffect(() => {
    // Prevent body scroll when sidebar is open
    if (isOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "unset"
    }

    // Cleanup on unmount
    return () => {
      document.body.style.overflow = "unset"
    }
  }, [isOpen])

  const toggleSidebar = () => {
    const sidebar = sidebarRef.current
    const overlay = overlayRef.current
    const scrollContainer = scrollContainerRef.current

    if (!sidebar || !overlay || !scrollContainer) return

    if (!isOpen) {
      setIsOpen(true)

      // Show overlay with blur effect
      gsap.set(overlay, { display: "block" })
      gsap.fromTo(
        overlay,
        {
          opacity: 0,
          backdropFilter: "blur(0px)",
        },
        {
          opacity: 1,
          backdropFilter: "blur(10px)",
          duration: 0.4,
          ease: "power2.out",
        },
      )

      // Slide in sidebar
      gsap.fromTo(
        sidebar,
        {
          x: "-100%",
        },
        {
          x: "0%",
          duration: 0.5,
          ease: "power3.out",
        },
      )

      // Reset scroll position
      scrollContainer.scrollTop = 0

      // Stagger animate menu items
      gsap.fromTo(
        scrollContainer.querySelectorAll(".nav-item"),
        {
          x: -50,
          opacity: 0,
        },
        {
          x: 0,
          opacity: 1,
          duration: 0.4,
          ease: "power2.out",
          stagger: 0.05,
          delay: 0.2,
        },
      )
    } else {
      // Hide sidebar
      gsap.to(sidebar, {
        x: "-100%",
        duration: 0.4,
        ease: "power3.in",
      })

      // Hide overlay
      gsap.to(overlay, {
        opacity: 0,
        backdropFilter: "blur(0px)",
        duration: 0.3,
        ease: "power2.in",
        onComplete: () => {
          gsap.set(overlay, { display: "none" })
          setIsOpen(false)
        },
      })
    }
  }

  const handleLogoHover = (isHovering: boolean) => {
    gsap.to(logoRef.current, {
      scale: isHovering ? 1.05 : 1,
      duration: 0.3,
      ease: "power2.out",
    })
  }

  const handleMenuButtonHover = (isHovering: boolean) => {
    gsap.to(menuButtonRef.current, {
      scale: isHovering ? 1.1 : 1,
      rotation: isHovering ? 90 : 0,
      duration: 0.3,
      ease: "power2.out",
    })
  }

  return (
    <>
      {/* Top-left fixed navbar */}
      
        
          {/* Logo */}
          
             handleLogoHover(true)}
              onMouseLeave={() => handleLogoHover(false)}
            >
              
                
              
              
                Web3Wise
              
            
          

          {/* Menu Button */}
          
        
      

      {/* Overlay */}
      

      {/* Left Sidebar */}
      
        {/* Fixed Header */}
        
          
            
              
            
            
              
                Web3Wise
              
              Next-Gen Platform
            
          
        

        {/* Scrollable Content */}
        
          {/* Navigation Items */}
          
            {navItems.map((item, index) => (
              
                 {
                    if (pathname !== item.href) {
                      gsap.to(e.currentTarget, {
                        x: 10,
                        scale: 1.02,
                        duration: 0.2,
                        ease: "power2.out",
                      })
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (pathname !== item.href) {
                      gsap.to(e.currentTarget, {
                        x: 0,
                        scale: 1,
                        duration: 0.2,
                        ease: "power2.out",
                      })
                    }
                  }}
                >
                  
                    
                  
                  
                    
                      {item.name}
                    
                    {pathname === item.href && (
                      
                    )}
                  
                  
                    {String(index + 1).padStart(2, "0")}
                  
                
              
            ))}
          
        

        {/* Fixed Footer */}
        
          {/* Connect Wallet Button */}
          

          {/* Footer */}
          
            © 2024 Web3Wise Platform
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter, Sora } from "next/font/google"
import "./globals.css"
import Navbar from "@/components/navbar"
import PageTransition from "@/components/page-transition"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
})

const sora = Sora({
  subsets: ["latin"],
  variable: "--font-sora",
  display: "swap",
})

export const metadata: Metadata = {
  title: "Web3Wise - Premium Web3 Consultancy Platform",
  description: "Cinematic Web3 consultancy with AI-powered tools and expert guidance",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
        {children}
      
    
  )
}
[V0_FILE]typescriptreact:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #000000;
  color: #ffffff;
  font-family: var(--font-inter), sans-serif;
}

/* Apply Sora font to all headings */
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: var(--font-sora), sans-serif;
  font-weight: 700;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(139, 92, 246, 0.1);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #8b5cf6, #a855f7);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #a855f7, #8b5cf6);
}

/* Glassmorphism utilities */
.glass {
  background: rgba(31, 27, 36, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(45, 27, 61, 0.5);
}

.glass-hover:hover {
  background: rgba(31, 27, 36, 0.9);
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.3);
}

/* GSAP optimized classes */
.gsap-element {
  will-change: transform, opacity;
}

.gsap-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Perspective for 3D effects */
.perspective-1000 {
  perspective: 1000px;
}

.transform-3d {
  transform-style: preserve-3d;
}

/* Performance optimizations for GSAP */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Smooth animations */
.smooth-animation {
  transition: none;
  will-change: transform, opacity, filter;
}

/* GSAP timeline markers (for development) */
.gsap-marker {
  position: absolute;
  background: rgba(255, 0, 0, 0.3);
  pointer-events: none;
  z-index: 9999;
}

/* Enhanced mobile performance */
@media (max-width: 768px) {
  .gpu-accelerated {
    transform: translate3d(0, 0, 0);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .gsap-element {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sidebar specific scrollbar styling */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.5) rgba(0, 0, 0, 0.1);
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: rgba(139, 92, 246, 0.05);
  border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #8b5cf6, #a855f7);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #a855f7, #8b5cf6);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* Smooth scrolling for sidebar */
.sidebar-scroll {
  scroll-behavior: smooth;
}

/* Enhanced blur effect for overlay */
.nav-overlay {
  backdrop-filter: blur(15px) saturate(180%);
  background: rgba(0, 0, 0, 0.8);
}

/* Smooth sidebar transitions */
.sidebar-transition {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation item hover effects */
.nav-item-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item-hover:hover {
  transform: translateX(8px) scale(1.02);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

/* Active navigation item glow */
.nav-item-active {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  border: 1px solid rgba(139, 92, 246, 0.5);
}

/* Mobile responsiveness for sidebar */
@media (max-width: 640px) {
  .sidebar-mobile {
    width: 100vw;
  }
}

/* Prevent body scroll when sidebar is open */
.sidebar-open {
  overflow: hidden;
}

/* Enhanced glassmorphism for sidebar */
.sidebar-glass {
  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(30px) saturate(150%);
  border-right: 1px solid rgba(45, 27, 61, 0.5);
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.5);
}

/* Sidebar content sections */
.sidebar-section {
  border-bottom: 1px solid rgba(45, 27, 61, 0.3);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.sidebar-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Scroll fade effects */
.sidebar-scroll::before {
  content: "";
  position: sticky;
  top: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.98), transparent);
  z-index: 1;
  pointer-events: none;
}

.sidebar-scroll::after {
  content: "";
  position: sticky;
  bottom: 0;
  height: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.98), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Enhanced navigation item animations */
.nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.nav-item:hover::before {
  left: 100%;
}

/* Smooth scroll behavior for the entire sidebar */
.sidebar-smooth-scroll {
  scroll-behavior: smooth;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Purple glow effects */
.purple-glow {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.purple-glow-hover:hover {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.7);
}

/* Purple pulse animation */
@keyframes purple-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.8);
  }
}

.purple-pulse {
  animation: purple-pulse 2s ease-in-out infinite;
}
[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        inter: ["var(--font-inter)", "sans-serif"],
        sora: ["var(--font-sora)", "sans-serif"],
        heading: ["var(--font-sora)", "sans-serif"],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "#000000",
        foreground: "#FFFFFF",
        primary: {
          DEFAULT: "#8B5CF6",
          foreground: "#FFFFFF",
        },
        secondary: {
          DEFAULT: "#A855F7",
          foreground: "#000000",
        },
        success: {
          DEFAULT: "#8B5CF6",
          foreground: "#FFFFFF",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "#1F1B24",
          foreground: "#9CA3AF",
        },
        accent: {
          DEFAULT: "#2D1B3D",
          foreground: "#FFFFFF",
        },
        popover: {
          DEFAULT: "#1F1B24",
          foreground: "#FFFFFF",
        },
        card: {
          DEFAULT: "#1F1B24",
          foreground: "#FFFFFF",
        },
        // Custom black, purple, dark purple, white palette
        "pure-black": "#000000",
        "dark-purple": "#2D1B3D",
        "medium-purple": "#4C1D95",
        "bright-purple": "#8B5CF6",
        "light-purple": "#A855F7",
        "pure-white": "#FFFFFF",
        "gray-light": "#9CA3AF",
        "gray-dark": "#374151",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      perspective: {
        "1000": "1000px",
      },
      rotate: {
        "y-5": "5deg",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

How It Works

{step.title}

Expert Consultants

{consultant.name}

AI-Powered Assistant

Web3Wise Bot

Instant Responses

Smart Analysis

Telegram Integration

Session NFTs

{session.title}

Why Session NFTs?

Crypto Tools

Crypto Converter

Best Deals

Research & Validation

{paper.title}

Smart Contract Validation

Project Research

Client Success Stories

{testimonial.name}

Start Building with Web3Wise Today

Instant Access

24/7 Support

Secure & Trusted

Build the Future with Web3Wise

Web3Wise

Platform Features

{feature.title}

{session.title}

Why Session NFTs?

Proof of Learning

Exclusive Access

Transferable Value

{consultant.name}

Upload Contract

Or Enter Address

Validation Results

{result.title}

{feature.title}

Web3Wise Bot

{feature.title}

Start Chatting with{" "} Web3Wise AI

Smart Swap Interface

{paper.title}

{step.title}

You Pay

Consultant Receives

Use Case

Why Cross-Chain Payments?

Lower Costs

Faster Settlements

Secure & Trustless

Web3Wise

Start Building with
Web3Wise Today