---
layout: home.njk
title: "StudyVision - AI-Powered Learning Suite | Master Exams with AI"
description: "StudyVision combines artificial intelligence with comprehensive educational content to help you master any subject and ace competitive exams like JEE, NEET, CBSE, HSC, and MHT CET."
permalink: "/"
---

<!-- Header & Navigation -->
    <header id="main-header">
        <div class="header-container">
            <a href="index.html" class="logo">
                <i class="fas fa-graduation-cap logo-icon"></i>
                StudyVision
            </a>

            <nav>
                <ul>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#how-it-works">How It Works</a></li>
                    <li><a href="#exams">Exams</a></li>
                    <li><a href="main.html">Study Portal</a></li>
                </ul>
            </nav>

            <div class="auth-buttons">
                <!-- User Profile Header Section (Initially hidden) -->
                <div id="userProfile" class="user-profile">
                    <div class="user-avatar" id="userAvatar">U</div>
                    <span id="userName">User</span>
                    <i class="fas fa-chevron-down" style="font-size: 0.8rem; margin-left: 2px;"></i>
                </div>

                <!-- Standard User Dropdown Menu -->
                <div class="user-menu-modal" id="userMenuModal">
                    <button class="menu-item" id="profileBtn">
                        <i class="fas fa-user-circle"></i> My Profile
                    </button>
                    <button class="menu-item" onclick="window.location.href='main.html'">
                        <i class="fas fa-book-open"></i> Go to Study Portal
                    </button>
                    <button class="menu-item" id="logoutBtn">
                        <i class="fas fa-sign-out-alt"></i> Logout
                    </button>
                </div>

                <button id="loginBtn" class="btn btn-outline">Login</button>
                <button id="signupBtn" class="btn btn-primary">Sign Up</button>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="floating-elements">
            <div class="floating-element"></div>
            <div class="floating-element"></div>
            <div class="floating-element"></div>
            <div class="floating-element"></div>
        </div>

        <div class="hero-container">
            <div class="hero-content">
                <h1>Unlock Your <span>Flow State</span> with AI-Driven Learning</h1>
                <p>StudyVision combines personalized dynamic AI tutoring with complete structured reference materials to
                    keep you focused, challenged, and ready to ace your competitive exams.</p>

                <div class="hero-buttons">
                    <a href="main.html" class="btn btn-primary btn-large"><i class="fas fa-rocket"></i> Start Learning
                        Now</a>
                    <a href="#features" class="btn btn-outline btn-large">Explore Features <i
                            class="fas fa-chevron-right"></i></a>
                </div>
            </div>

            <div class="hero-graphics">
                <!-- Beautiful Mockup SVG showing the core concept -->
                <svg width="450" height="420" viewBox="0 0 450 420" fill="none" xmlns="http://www.w3.org/2000/svg"
                    style="filter: drop-shadow(0 20px 30px rgba(0,0,0,0.25)); max-width: 100%; height: auto;">
                    <!-- Main Dashboard Background -->
                    <rect x="10" y="10" width="430" height="400" rx="24" fill="#1E2A38" stroke="#2A5C82"
                        stroke-width="3" />

                    <!-- Top Window Bar -->
                    <rect x="10" y="10" width="430" height="40" rx="0" fill="#2A5C82" />
                    <circle cx="35" cy="30" r="6" fill="#FF5F56" />
                    <circle cx="55" cy="30" r="6" fill="#FFBD2E" />
                    <circle cx="75" cy="30" r="6" fill="#27C93F" />
                    <text x="225" y="35" fill="#ffffff" font-family="Poppins" font-size="12" font-weight="600"
                        text-anchor="middle">Adaptive AI Dashboard</text>

                    <!-- Left panel: AI Chat Mockup -->
                    <rect x="30" y="70" width="220" height="310" rx="14" fill="#ffffff" fill-opacity="0.05"
                        stroke="#4A90E2" stroke-width="1.5" />
                    <text x="45" y="95" fill="#4A90E2" font-family="Poppins" font-size="11" font-weight="700">AI TUTOR
                        DIALOGUE</text>

                    <!-- Chat Bubble AI -->
                    <g class="anim-chat-1">
                        <rect x="45" y="115" width="160" height="55" rx="8" fill="#ffffff" fill-opacity="0.1" />
                        <text x="55" y="132" fill="#e2e8f0" font-family="Poppins" font-size="9" font-weight="600">AI:
                            Let's test concepts on Vectors!</text>
                        <text x="55" y="147" fill="#cbd5e1" font-family="Poppins" font-size="8">What happens to the dot
                            product when</text>
                        <text x="55" y="157" fill="#cbd5e1" font-family="Poppins" font-size="8">vectors are
                            perpendicular?</text>
                    </g>

                    <!-- Chat Bubble User Answer -->
                    <g class="anim-chat-2">
                        <rect x="75" y="185" width="160" height="40" rx="8" fill="#2A5C82" />
                        <text x="85" y="202" fill="#ffffff" font-family="Poppins" font-size="9" font-weight="600">User:
                            It becomes zero (cos 90 = 0)</text>
                    </g>

                    <!-- Feedback Banner -->
                    <g class="anim-chat-3">
                        <rect x="45" y="240" width="190" height="35" rx="8" fill="#4CAF50" fill-opacity="0.2"
                            stroke="#4CAF50" stroke-width="1" />
                        <circle cx="60" cy="257" r="8" fill="#4CAF50" />
                        <path d="M57 257L59 259L63 255" stroke="white" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <text x="75" y="260" fill="#81c784" font-family="Poppins" font-size="9"
                            font-weight="700">Correct! Difficulty Increased ⚡</text>
                    </g>

                    <!-- Right panel: Gamified Progress Map & Flow Rate -->
                    <!-- Flow rate meter -->
                    <rect x="270" y="70" width="150" height="130" rx="14" fill="#ffffff" fill-opacity="0.05"
                        stroke="#4A90E2" stroke-width="1.5" />
                    <text x="285" y="95" fill="#4A90E2" font-family="Poppins" font-size="11" font-weight="700">STUDENT
                        FLOW RATE</text>
                    <!-- Gauge Outer -->
                    <circle cx="345" cy="140" r="35" fill="none" stroke="#2A5C82" stroke-width="6" />
                    <circle cx="345" cy="140" r="35" fill="none" stroke="#4CAF50" stroke-width="6"
                        stroke-dasharray="165 220" stroke-linecap="round" transform="rotate(-90 345 140)" />
                    <text x="345" y="144" fill="#4CAF50" font-family="Poppins" font-size="12" font-weight="700"
                        text-anchor="middle">92%</text>
                    <text x="345" y="185" fill="#a7f3d0" font-family="Poppins" font-size="9" font-weight="600"
                        text-anchor="middle">Optimal Flow State</text>

                    <!-- Gamified path tracker mini mockup -->
                    <rect x="270" y="215" width="150" height="165" rx="14" fill="#ffffff" fill-opacity="0.05"
                        stroke="#4A90E2" stroke-width="1.5" />
                    <text x="285" y="238" fill="#4A90E2" font-family="Poppins" font-size="11" font-weight="700">PROGRESS
                        PATH</text>

                    <!-- Nodes connection line -->
                    <path d="M305 340C305 300 385 300 385 270" stroke="#cbd5e1" stroke-width="3" stroke-dasharray="5,5"
                        class="anim-dash-line" />
                    <path d="M385 270C385 240 315 240 315 200" stroke="#4CAF50" stroke-width="3" />

                    <!-- Chapter Node 1 (Green/Complete) -->
                    <g class="anim-glow-node">
                        <circle cx="305" cy="340" r="14" fill="#4CAF50" stroke="#ffffff" stroke-width="2" />
                        <path d="M301 340L303 342L309 337" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </g>
                    <text x="325" y="343" fill="#cbd5e1" font-family="Poppins" font-size="8" font-weight="600">Chapter
                        1</text>

                    <!-- Chapter Node 2 (Blue/In-progress) -->
                    <g class="anim-glow-node">
                        <circle cx="385" cy="270" r="14" fill="#255277" stroke="#ffffff" stroke-width="2" />
                        <path d="M382 265L390 270L382 275Z" fill="white" />
                    </g>
                    <text x="340" y="273" fill="#cbd5e1" font-family="Poppins" font-size="8" font-weight="600">Chapter
                        2</text>
                </svg>
            </div>
        </div>
    </section>

    <!-- The Problem Section -->
    <section class="problem-section" id="problem">
        <div class="section-title anim-fade-up">
            <h2>Why Traditional Study Methods Fail</h2>
            <p>Most online study platforms just dump books on the screen, creating passive reading habits that result in
                poor retention.</p>
        </div>

        <div class="problem-container">
            <div class="problem-card passive anim-fade-up">
                <h3><i class="fas fa-times-circle"></i> Passive Study Methods</h3>
                <ul class="problem-list">
                    <li><i class="fas fa-times"></i> <strong>The Forgetting Curve:</strong> Just reading notes or
                        watching lectures results in forgetting 70% of concepts within 24 hours.</li>
                    <li><i class="fas fa-times"></i> <strong>One-Size-Fits-All:</strong> Static materials are either too
                        easy (causing boredom) or too difficult (causing frustration).</li>
                    <li><i class="fas fa-times"></i> <strong>Fragmented Notebooks:</strong> Switching between notes,
                        formula PDFs, PYQ books, and calculators breaks focus.</li>
                </ul>
            </div>

            <div class="problem-card active-flow anim-fade-up">
                <h3><i class="fas fa-check-circle"></i> StudyVision Active AI Flow</h3>
                <ul class="problem-list">
                    <li><i class="fas fa-check"></i> <strong>Active Recall Tutoring:</strong> The AI doesn't just
                        display theory—it continuously tests you conceptually to cement details in long-term memory.
                    </li>
                    <li><i class="fas fa-check"></i> <strong>Adaptive Difficulty:</strong> The AI tutor gauges your
                        responses and adjusts complexity dynamically to keep you in the "Flow Zone".</li>
                    <li><i class="fas fa-check"></i> <strong>All-In-One Toolkit:</strong> Integrated notes, formula
                        reference guides, calculator, dictionary, and notepad right on one clean page.</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features" id="features">
        <div class="section-title anim-fade-up">
            <h2>Designed For High Performance Learning</h2>
            <p>Our tools are built specifically to improve active engagement, recall speed, and study comfort.</p>
        </div>

        <div class="features-grid">
            <!-- Feature 1: Adaptive learning -->
            <div class="feature-card anim-fade-up">
                <div class="feature-icon">
                    <i class="fas fa-brain"></i>
                </div>
                <h3>Adaptive AI Tutor</h3>
                <p>An interactive, conversational AI system that asks conceptual questions, verifies your reasoning, and
                    adapts complexity on-the-fly to keep you in flow state.</p>
            </div>

            <!-- Feature 2: Complete reference material -->
            <div class="feature-card anim-fade-up">
                <div class="feature-icon">
                    <i class="fas fa-book-open"></i>
                </div>
                <h3>Structured Reference Suite</h3>
                <p>Fully formatted reference materials including structured Class Notes, basic concepts summaries,
                    dynamic formulas cheat-sheets, and verified Previous Year Questions (PYQs).</p>
            </div>

            <!-- Feature 3: Progress Tracker Map -->
            <div class="feature-card anim-fade-up">
                <div class="feature-icon">
                    <i class="fas fa-route"></i>
                </div>
                <h3>Gamified Blueprint Map</h3>
                <p>Visualize your progress via a gamified map. Nodes represent chapters, changing color from Red
                    (Incomplete) to Blue (In Progress) and Green (Complete) as the DB updates.</p>
            </div>

            <!-- Feature 4: Utility Study Tools -->
            <div class="feature-card anim-fade-up">
                <div class="feature-icon">
                    <i class="fas fa-tools"></i>
                </div>
                <h3>Integrated Smart Tools</h3>
                <p>Stay focused with embedded study widgets: an engineering scientific calculator, a quick definition
                    science dictionary, a multi-unit converter, and a personal digital notepad.</p>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section class="how-it-works" id="how-it-works">
        <div class="section-title anim-fade-up">
            <h2>Your Path to Exam Mastery</h2>
            <p>StudyVision helps you learn effectively in 4 simple steps</p>
        </div>

        <div class="steps-container anim-fade-up">
            <div class="step-connect-line"></div>

            <div class="step">
                <div class="step-number">1</div>
                <div class="step-icon"><i class="fas fa-user-check"></i></div>
                <h3>Choose Your Goal</h3>
                <p>Register a free account and choose your specific target exam (JEE, NEET, Board, MHT CET).</p>
            </div>

            <div class="step">
                <div class="step-number">2</div>
                <div class="step-icon"><i class="fas fa-layer-group"></i></div>
                <h3>Pick Your Mode</h3>
                <p>Select static mode for self-study and notes, or select Adaptive Mode for dynamic AI-guided tutoring.
                </p>
            </div>

            <div class="step">
                <div class="step-number">3</div>
                <div class="step-icon"><i class="fas fa-comments"></i></div>
                <h3>Interact & Practice</h3>
                <p>Talk to the AI tutor, solve challenges, view answers, and look up details with smart widgets.</p>
            </div>

            <div class="step">
                <div class="step-number">4</div>
                <div class="step-icon"><i class="fas fa-chart-line"></i></div>
                <h3>Analyze & Conquer</h3>
                <p>Review the visual progress map as the backend syncs, lock down critical formulas, and secure top
                    marks.</p>
            </div>
        </div>
    </section>

    <!-- Exam Coverage Section -->
    <section class="exam-coverage" id="exams">
        <div class="section-title anim-fade-up">
            <h2>Exam Preparation Coverage</h2>
            <p>StudyVision provides comprehensive syllabus maps for all major regional and national examinations.</p>
        </div>

        <div class="exam-grid">
            <div class="exam-card anim-fade-up">
                <h3>JEE Mains</h3>
                <p>Class 11th & 12th complete physics, chemistry, and math syllabus with PYQs.</p>
            </div>

            <div class="exam-card anim-fade-up">
                <h3>NEET</h3>
                <p>Focused physics, chemistry, and biological sciences question banks with active recall support.</p>
            </div>

            <div class="exam-card anim-fade-up">
                <h3>CBSE Board</h3>
                <p>Structured curriculum coverage for high school science streams aligned with NCERT.</p>
            </div>

            <div class="exam-card anim-fade-up">
                <h3>HSC Board</h3>
                <p>Complete Class 11th and 12th syllabus mapped to Maharashtra State Board guidelines.</p>
            </div>

            <div class="exam-card anim-fade-up">
                <h3>MHT CET</h3>
                <p>Specialized entrance prep material with formula grids and high-frequency CET questions.</p>
            </div>
        </div>
    </section>


    <!-- CTA Section -->
    <section class="cta">
        <div class="cta-content">
            <h2>Ready to Transform Your Learning Experience?</h2>
            <p>Join thousands of high-schoolers and entrance aspirants utilizing StudyVision to study smarter, retain
                longer, and ace their exams.</p>
            <a href="main.html" class="btn btn-primary btn-large"><i class="fas fa-graduation-cap"></i> Enter Study
                Portal</a>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-about">
                <div class="footer-logo">
                    <i class="fas fa-graduation-cap footer-logo-icon"></i>
                    StudyVision
                </div>
                <p>AI-powered learning suite designed to help students master concepts and excel in competitive exams
                    through personalized, intelligent study tools.</p>
                <div class="social-icons">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>

            <div class="footer-links">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#how-it-works">How It Works</a></li>
                    <li><a href="#exams">Exams</a></li>
                    <li><a href="main.html">Study Portal</a></li>
                </ul>
            </div>

            <div class="footer-exams">
                <h3>HSC Preparation</h3>
                <ul>
                    <li><a href="main.html?exam=HSC%20-%2011th&subject=Physics">11th Physics</a></li>
                    <li><a href="main.html?exam=HSC%20-%2011th&subject=Chemistry">11th Chemistry</a></li>
                    <li><a href="main.html?exam=HSC%20-%2012th&subject=Mathematics">12th Mathematics</a></li>
                    <li><a href="main.html?exam=HSC%20-%2012th&subject=Biology">12th Biology</a></li>
                </ul>
            </div>

            <div class="footer-exams">
                <h3>MHT CET Prep</h3>
                <ul>
                    <li><a href="main.html?exam=MHT%20CET%20-%2012th&subject=Physics">Physics CET Prep</a></li>
                    <li><a href="main.html?exam=MHT%20CET%20-%2012th&subject=Chemistry">Chemistry CET Prep</a></li>
                    <li><a href="main.html?exam=MHT%20CET%20-%2012th&subject=Mathematics">Math CET Prep</a></li>
                </ul>
            </div>

            <div class="footer-contact">
                <h3>Contact Us</h3>
                <p><i class="fas fa-envelope"></i> support@studyvision.com</p>
            </div>
        </div>

        <div class="copyright">
            <p>&copy; 2026 StudyVision. All rights reserved.</p>
        </div>
    </footer>

    <!-- Auth Modal Container -->
    <div class="modal" id="authModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="authModalTitle">Login to StudyVision</h3>
                <button class="close-modal" id="closeAuthModal">&times;</button>
            </div>
            <div class="modal-body" id="authModalBody">
                <!-- Auth forms will load dynamically from auth.js -->
            </div>
        </div>
    </div>

    <!-- Initialize Supabase globally first -->
    <script>
        const SUPABASE_URL = 'https://wvqwyrhzrnojxvqsqkos.supabase.co/';
        const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Ind2cXd5cmh6cm5vanh2cXNxa29zIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTY1NzcxNDUsImV4cCI6MjA3MjE1MzE0NX0.fIkWwMr13cvkdrU6Shxbw_AeobYNDF5UC3_lw9Ozxvg';

        // Initialize Supabase Client globally so auth.js can capture it
        window.supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
            auth: {
                autoRefreshToken: true,
                persistSession: true,
                detectSessionInUrl: true
            }
        });
    </script>

    <!-- Load Central Auth Handler (auth.js) -->
    <script src="js/auth.js"></script>

    <!-- Homepage Controller -->
    <script>
        // Map Globals for auth.js to automatically capture
        window.authModalTitle = document.getElementById('authModalTitle');
        window.authModalBody = document.getElementById('authModalBody');
        window.authModal = document.getElementById('authModal');
        window.loginBtn = document.getElementById('loginBtn');
        window.signupBtn = document.getElementById('signupBtn');
        window.userProfile = document.getElementById('userProfile');
        window.userName = document.getElementById('userName');
        window.userAvatar = document.getElementById('userAvatar');
        window.userMenuModal = document.getElementById('userMenuModal');

        // Local State
        window.isLoggedIn = false;
        window.currentUser = null;

        document.addEventListener('DOMContentLoaded', async () => {

            // Initial Auth Check and Auth State Change Binding
            try {
                const { data: { session } } = await window.supabase.auth.getSession();
                if (session) {
                    window.isLoggedIn = true;
                    window.currentUser = session.user;
                    if (typeof window.updateUserUI === 'function') window.updateUserUI();
                }
            } catch (err) {
                console.error('Initial session check error:', err);
            }

            window.supabase.auth.onAuthStateChange(async (event, session) => {
                console.log('[Auth] State changed:', event);
                if (session) {
                    window.isLoggedIn = true;
                    window.currentUser = session.user;
                    if (typeof window.updateUserUI === 'function') window.updateUserUI();
                } else {
                    window.isLoggedIn = false;
                    window.currentUser = null;
                    if (typeof window.updateUserUI === 'function') window.updateUserUI();
                }
            });

            // Local UI Listeners
            const mainHeader = document.getElementById('main-header');
            const closeAuthModal = document.getElementById('closeAuthModal');

            // Header scroll transition
            window.addEventListener('scroll', () => {
                if (window.scrollY > 40) {
                    mainHeader?.classList.add('header-scrolled');
                } else {
                    mainHeader?.classList.remove('header-scrolled');
                }
            });

            // Open Login/Signup trigger
            if (window.loginBtn) {
                window.loginBtn.addEventListener('click', () => {
                    const closeBtn = document.getElementById('closeAuthModal');
                    if (closeBtn) closeBtn.style.display = 'block'; // Make sure the X button works on home page
                    if (typeof window.showLoginModal === 'function') window.showLoginModal();
                });
            }

            if (window.signupBtn) {
                window.signupBtn.addEventListener('click', () => {
                    const closeBtn = document.getElementById('closeAuthModal');
                    if (closeBtn) closeBtn.style.display = 'block'; // Make sure the X button works on home page
                    if (typeof window.showSignupModal === 'function') window.showSignupModal();
                });
            }

            // Toggle Profile Dropdown
            if (window.userProfile) {
                window.userProfile.addEventListener('click', (e) => {
                    e.stopPropagation();
                    if (window.userMenuModal) {
                        window.userMenuModal.style.display = window.userMenuModal.style.display === 'flex' ? 'none' : 'flex';
                    }
                });
            }

            // Close dropdowns clicking outside
            document.addEventListener('click', () => {
                if (window.userMenuModal) window.userMenuModal.style.display = 'none';
            });

            // Close Auth Modal Close Button
            if (closeAuthModal) {
                closeAuthModal.addEventListener('click', () => {
                    if (window.authModal) window.authModal.style.display = 'none';
                });
            }

            // Close modal clicking outside
            window.addEventListener('click', (e) => {
                if (e.target === window.authModal) {
                    window.authModal.style.display = 'none';
                }
            });

            // Smooth Scroll for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;

                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 85,
                            behavior: 'smooth'
                        });
                    }
                });
            });

            // IntersectionObserver for scroll animations
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('anim-active');
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.anim-fade-up').forEach(el => {
                observer.observe(el);
            });
        });
    </script>