askkushal

byKushal Patel

Build a production-ready, ultra-modern cinematic 3D global education website called AskKushal Study AI. Replace all old “AskRohit/Digital Marketing Agency” content with study/education content. BRAND: AskKushal Study AI. Tagline: “Learn Without Limits.” Supporting line: “Your AI-powered global study universe.” STACK: HTML5, CSS3, Vanilla JS ES6+, Three.js, GSAP, GSAP ScrollTrigger, Lenis, Font Awesome CDN. Optional Troika Text. No React, Vue, Angular, Next.js, Tailwind, Bootstrap, Vite, Webpack or other frameworks/build tools. Must run with index.html or a simple local server. MASTER FONT: The user will provide a font. That font is the MASTER FONT and must be used everywhere via @font-face from /fonts/: logo, headings, body, nav, buttons, cards, courses, pricing, forms, dashboard and footer. If multiple weights exist, map them correctly. Never replace it. Use system-ui only as fallback. NO IMAGES: Do not use photos, stock images, downloaded SVGs or illustrations. Create visuals only with CSS, Three.js/WebGL geometry, particles, shaders, gradients, lighting, glassmorphism, procedural graphics and Font Awesome icons. STYLE: premium, luxury, futuristic, cinematic, minimal, dark, intelligent, interactive. Colors: #0B1020, #121B35, #4F8CFF, #00E5FF, #A855F7, white. Use glass panels, neon borders, glow, subtle noise, digital grids, fog, bloom-style effects, floating geometry and animated gradients. GLOBAL EFFECTS: Three.js particle universe, glowing knowledge nodes, floating spheres/cubes, holographic panels, digital grids, light beams, mouse parallax, subtle cursor glow/trail, 3D card tilt, magnetic buttons, ripple clicks, animated numbers, split/letter text animation, procedural geometry, smooth section reveals and camera transitions. Use Lenis + GSAP ScrollTrigger. The whole site should feel like one continuous cinematic journey, not separate normal sections. LOADER: cinematic AskKushal/STUDY AI loader with percentage, rotating 3D knowledge sphere, particles and glowing rings; zoom smoothly into Hero. Provide CSS fallback if WebGL is unavailable. NAV: Home, Subjects, Courses, Study Tools, AI Tutor, Pricing, About, Contact. Buttons: Sign In, Get Started. Responsive animated mobile menu; glass navbar on scroll. HERO: Massive Three.js educational universe with particles, knowledge nodes, digital grid, orbiting geometry, mathematical symbols, molecular/network structures and holographic panels. Show: “ASKKUSHAL STUDY AI” “LEARN WITHOUT LIMITS.” “An intelligent global learning platform to help you learn, understand, practice and master almost anything.” Stats: 5000+ Subjects, 4500+ Courses, 1000+ Languages, 40+ Countries. Buttons: Start Learning, Explore Subjects, Ask AI. Add AI prompt bar: “What do you want to learn today?” with example prompts like Explain photosynthesis, Create nursing MCQs, Teach calculus, Summarize this chapter, Explain in Gujarati, Create flashcards, Make a study plan. GLOBAL COVERAGE: Present 5000+ subjects, 4500+ courses, 1000+ languages and 40+ countries as platform coverage claims; do not call them live database counts unless real data exists. SUBJECTS: Interactive subject universe with Nursing, Medicine, Biology, Chemistry, Physics, Mathematics, Engineering, Computer Science, Psychology, Business, Economics, Accounting, Law, History, Geography, Literature, Languages, Arts, Science and more. Hover/click reveals information. COURSES: Futuristic explorer for 4500+ courses. Categories: Nursing, Medical, Engineering, Science, Technology, Business, Commerce, Arts, Languages, Professional Skills, Competitive Exams. Cards: title, subject, level, duration, lessons, difficulty, language, progress, Start button. No images. STUDY TOOLS: AI Tutor, AI Question Solver, Notes, Smart Summarizer, Flashcards, Quiz Generator, MCQ Generator, Exam Generator, Study Planner, Pomodoro Timer, Formula Sheet, Dictionary, Translation, Grammar Checker, Citation Helper, PDF Study Tool, Mind Map, Revision Planner, Progress Tracker, Question Bank. Each tool must have a real frontend interaction such as modal, input/output, calculator, timer, tabs or filtering; no dead buttons. AI TUTOR: premium chat UI with message area, input, send, subject selector, language selector and modes Beginner/Student/Advanced/Expert. Prepare clean integration points for a real AI API. Do not fake AI responses and never expose API keys in frontend. LANGUAGES: “LEARN IN YOUR LANGUAGE” with selector and examples English, Hindi, Gujarati, Spanish, French, German, Arabic, Japanese, Chinese, Portuguese, Italian, Korean. Show 1000+ Languages conceptually; do not claim full support for every language unless implemented. GLOBAL EDUCATION: Interactive Three.js globe made only with geometry, glowing country points for 40+ countries, click-to-open info panels. No map images. ACADEMIC LEVELS: Primary, Secondary, Higher Secondary, Diploma, Undergraduate, Postgraduate, Professional, Competitive Exams. SUBJECT SEARCH: “WHAT DO YOU WANT TO MASTER?” Search subjects/courses/topics with filters Subject, Country, Language, Education Level, Difficulty, Duration. Filtering must work on available frontend data. HOW IT WORKS: cinematic flow: 1 Choose, 2 Ask, 3 Learn, 4 Practice, 5 Master. Animate with ScrollTrigger and camera motion. STUDENT DASHBOARD: Show Study Hours, Courses Completed, Questions Solved, Quiz Score, Current Streak, Learning Progress, Strong Areas, Weak Areas, Revision Status using CSS/JS charts, bars and progress rings. Any fixed stats must be clearly demo/sample data until connected to real user data. EXAMS: school, university, nursing, medical, engineering and competitive exam interfaces with Mock Tests, MCQs, Timed Exams, Revision Planner and Performance Analysis. TESTIMONIALS: floating glass cards without photos; use initials/procedural avatars and Font Awesome icons. Mark as sample/demo unless verified real testimonials. TECHNOLOGY: “POWERED BY MODERN TECHNOLOGY” with icons for AI, HTML5, CSS3, JavaScript, Three.js, Cloud, APIs, Security, Analytics, Database. PRICING: Exactly 6 tiers: 1 FREE + 5 PAID. Names: FREE, STUDENT, PLUS, PRO, PREMIUM, ULTIMATE. Include Monthly/Annual toggle and INR ₹ / USD $ toggle. Free = ₹0 / $0. Paid prices must be editable in one central JS config object. Dynamically update currency, period, price and savings. Use separate INR/USD prices; do not fake live exchange rates. Do not claim unlimited features unless actually implemented. Buttons should be ready for future payment integration; do not fake payments. ABOUT: Explain AskKushal Study AI as a global AI-powered study ecosystem for learning, practice, revision and academic productivity. CONTACT: Glass form with Name, Email, Country, Subject, Education Level, Message. Validate fields. Submit through AJAX without reload. Show “Sending...” then “Mail successfully sent!” on success or a clear error on failure. Send via server/contact.php using PHP mail() to [youremail@example.com](mailto:youremail@example.com). Note: PHP mail() requires a PHP-capable server; direct file:// opening cannot send email. Fail gracefully if PHP is unavailable. FOOTER: AskKushal Study AI, Subjects, Courses, Study Tools, AI Tutor, Pricing, About, Contact, Privacy, Terms, social icons. Add subtle particles/grid/glow. RESPONSIVE: mobile-first for phones, tablets, laptops, desktops and large screens. Reduce particles/3D/cursor effects on mobile and low-power devices. Support touch interactions. ACCESSIBILITY: semantic HTML, keyboard navigation, focus states, ARIA labels where needed, readable contrast, prefers-reduced-motion. PERFORMANCE: use requestAnimationFrame efficiently, optimize particle count/draw calls, dispose Three.js resources, avoid memory leaks, lazy-load heavy effects, throttle mouse/scroll handlers and provide reduced effects on mobile. SECURITY: never expose API keys, passwords, database credentials or private tokens. Keep secrets server-side. Validate/sanitize form input. Use secure CORS and error handling. Never expose stack traces or sensitive data. FILES: index.html style.css script.js js/threeScene.js js/animations.js js/particles.js js/cursor.js js/scroll.js js/ui.js js/pricing.js js/studyTools.js assets/ fonts/ server/contact.php CODE QUALITY: modular ES6, reusable functions, centralized configuration, comments for complex 3D code. Preserve useful existing code where possible. Remove AskRohit, marketing-agency text, lorem ipsum, broken links, dead buttons, fake APIs and console errors. FINAL TEST: verify loader, navigation, Hero, Three.js, GSAP, ScrollTrigger, Lenis, subjects, course search/filter, study tools, AI UI, language selector, 3D globe, academic levels, dashboard, pricing, Monthly/Annual, INR/USD, contact validation, AJAX PHP form, loading/success/error states, mobile layout, WebGL fallback, reduced motion, custom font loading, broken links and console errors. FINAL RESULT: a premium global AI education product with cinematic storytelling, immersive 3D, smooth animations, futuristic glass UI, study tools, courses, AI tutor, global learning coverage, analytics and six pricing tiers. The final brand must be AskKushal Study AI and the user-provided font must be the master font throughout.