Ultimate Study Centre | The Sanctuary<\/title>\r\n <meta name=\"title\" content=\"Ultimate Study Centre | The Sanctuary\">\r\n <meta name=\"description\" content=\"A dedicated sanctuary in Churachandpur designed for serious aspirants. Premium library facilities with high-speed WiFi, AC, and a distraction-free environment.\">\r\n <meta name=\"keywords\" content=\"Library, Study Centre, Churachandpur, Manipur, UPSC, NEET, JEE, Silent Study, Premium Library\">\r\n\r\n \r\n <meta property=\"og:type\" content=\"website\">\r\n <meta property=\"og:url\" content=\"https:\/\/ultimatestudycentre.oneupit.co.in\/\">\r\n <meta property=\"og:title\" content=\"Ultimate Study Centre | The Sanctuary\">\r\n <meta property=\"og:description\" content=\"A dedicated sanctuary in Churachandpur designed for serious aspirants. Premium library facilities with high-speed WiFi, AC, and a distraction-free environment.\">\r\n \r\n <meta property=\"og:image\" content=\"https:\/\/images.unsplash.com\/photo-1517673132405-a56a62b18caf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\">\r\n\r\n \r\n <meta property=\"twitter:card\" content=\"summary_large_image\">\r\n <meta property=\"twitter:url\" content=\"https:\/\/ultimatestudycentre.oneupit.co.in\/\">\r\n <meta property=\"twitter:title\" content=\"Ultimate Study Centre | The Sanctuary\">\r\n <meta property=\"twitter:description\" content=\"A dedicated sanctuary in Churachandpur designed for serious aspirants. Premium library facilities with high-speed WiFi, AC, and a distraction-free environment.\">\r\n <meta property=\"twitter:image\" content=\"https:\/\/images.unsplash.com\/photo-1517673132405-a56a62b18caf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\">\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vanilla-tilt\/1.8.0\/vanilla-tilt.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;700&family=Space+Grotesk:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Space Grotesk', 'sans-serif'],\r\n display: ['Cinzel', 'serif'],\r\n },\r\n colors: {\r\n void: '#050507',\r\n glass: 'rgba(255, 255, 255, 0.05)',\r\n gold: '#d4af37',\r\n accent: '#ffbd59',\r\n },\r\n backgroundImage: {\r\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n background-color: #050507;\r\n color: #ffffff;\r\n overflow-x: hidden;\r\n cursor: none; \/* Custom cursor *\/\r\n }\r\n\r\n \/* Custom Cursor *\/\r\n .cursor-dot,\r\n .cursor-outline {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n transform: translate(-50%, -50%);\r\n border-radius: 50%;\r\n z-index: 9999;\r\n pointer-events: none;\r\n }\r\n .cursor-dot {\r\n width: 8px;\r\n height: 8px;\r\n background-color: #d4af37;\r\n }\r\n .cursor-outline {\r\n width: 40px;\r\n height: 40px;\r\n border: 1px solid rgba(212, 175, 55, 0.5);\r\n transition: width 0.2s, height 0.2s, background-color 0.2s;\r\n }\r\n\r\n \/* 3D Canvas *\/\r\n #canvas-container {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n }\r\n\r\n \/* Glassmorphism *\/\r\n .glass-panel {\r\n background: rgba(18, 18, 20, 0.6);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .glass-card {\r\n background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n \/* Navigation Links *\/\r\n .nav-link {\r\n position: relative;\r\n }\r\n .nav-link::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 1px;\r\n bottom: -2px;\r\n left: 0;\r\n background-color: #d4af37;\r\n transform: scaleX(0);\r\n transform-origin: right;\r\n transition: transform 0.4s ease;\r\n }\r\n .nav-link:hover::before {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n\r\n \/* Loader *\/\r\n #loader {\r\n position: fixed;\r\n inset: 0;\r\n background: #050507;\r\n z-index: 100;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n \/* Image Hover Effects *\/\r\n .image-wrapper {\r\n overflow: hidden;\r\n border-radius: 0.75rem;\r\n }\r\n .image-wrapper img {\r\n transition: transform 0.8s ease;\r\n }\r\n .image-wrapper:hover img {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Scrollbar *\/\r\n ::-webkit-scrollbar { width: 4px; }\r\n ::-webkit-scrollbar-track { background: #050507; }\r\n ::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased selection:bg-gold selection:text-black\">\r\n\r\n \r\n <div class=\"cursor-dot hidden md:block\"><\/div>\r\n <div class=\"cursor-outline hidden md:block\"><\/div>\r\n\r\n \r\n <div id=\"loader\">\r\n <div class=\"flex flex-col items-center justify-center space-y-4\">\r\n <div class=\"w-16 h-16 border-4 border-gold border-t-transparent rounded-full animate-spin\"><\/div>\r\n <div class=\"text-gold font-display text-2xl tracking-[0.3em] animate-pulse\">LOADING<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"canvas-container\"><\/div>\r\n\r\n \r\n <nav class=\"fixed w-full z-50 top-0 left-0 p-4 md:p-6 transition-all duration-300\" id=\"navbar\">\r\n <div class=\"max-w-7xl mx-auto glass-panel rounded-full px-6 py-4 flex justify-between items-center\">\r\n <a href=\"#\" class=\"flex items-center gap-3 group z-50\">\r\n <div class=\"bg-gold\/10 p-2 rounded-full border border-gold\/20 group-hover:bg-gold\/20 transition-colors\">\r\n <i data-lucide=\"library\" class=\"text-gold w-5 h-5\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"font-display font-bold text-lg leading-none tracking-wider text-white\">ULTIMATE<\/span>\r\n <span class=\"text-[10px] uppercase tracking-[0.2em] text-gray-400 group-hover:text-gold transition-colors\">Study Centre<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n \r\n <div class=\"hidden md:flex items-center gap-8 text-xs lg:text-sm font-medium tracking-widest\">\r\n <a href=\"#\" class=\"text-white hover:text-gold transition-colors nav-link\">HOME<\/a>\r\n <a href=\"#about\" class=\"text-gray-400 hover:text-gold transition-colors nav-link\">ABOUT<\/a>\r\n <a href=\"#amenities\" class=\"text-gray-400 hover:text-gold transition-colors nav-link\">AMENITIES<\/a>\r\n <a href=\"#gallery\" class=\"text-gray-400 hover:text-gold transition-colors nav-link\">GALLERY<\/a>\r\n <a href=\"#testimonials\" class=\"text-gray-400 hover:text-gold transition-colors nav-link\">REVIEWS<\/a>\r\n \r\n \r\n <a href=\"https:\/\/ultimatestudycentre.oneupit.co.in\" class=\"text-gray-500 hover:text-white transition-colors nav-link text-[10px] uppercase\">ADMIN<\/a>\r\n\r\n <a href=\"#contact\" class=\"bg-gradient-to-r from-gold to-yellow-600 text-black px-8 py-2.5 rounded-full font-bold hover:shadow-[0_0_20px_rgba(212,175,55,0.4)] hover:scale-105 transition-all duration-300 transform\">\r\n JOIN US\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <button class=\"md:hidden text-white z-50\" onclick=\"toggleMobileMenu()\">\r\n <i data-lucide=\"menu\" class=\"w-8 h-8\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-menu\" class=\"fixed inset-0 bg-void\/95 backdrop-blur-xl z-40 hidden flex-col justify-center items-center gap-8 opacity-0 transition-opacity duration-300\">\r\n <a href=\"#\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-white hover:text-gold\">Home<\/a>\r\n <a href=\"#about\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gray-400 hover:text-gold\">About<\/a>\r\n <a href=\"#amenities\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gray-400 hover:text-gold\">Amenities<\/a>\r\n <a href=\"#gallery\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gray-400 hover:text-gold\">Gallery<\/a>\r\n <a href=\"#testimonials\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gray-400 hover:text-gold\">Reviews<\/a>\r\n <a href=\"https:\/\/ultimatestudycentre.oneupit.co.in\" class=\"font-display text-2xl text-gray-600 hover:text-white uppercase tracking-widest mt-4\">Admin Login<\/a>\r\n <a href=\"#contact\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gold\">Contact<\/a>\r\n <button onclick=\"toggleMobileMenu()\" class=\"absolute top-8 right-8 text-white p-2\">\r\n <i data-lucide=\"x\" class=\"w-8 h-8\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <header class=\"relative min-h-screen flex items-center justify-center px-4 pt-20 overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-12 items-center\">\r\n \r\n \r\n <div class=\"text-center lg:text-left z-10 space-y-8\">\r\n <div class=\"gsap-hero opacity-0 translate-y-10\">\r\n <div class=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-gold\/30 bg-gold\/5 backdrop-blur-md\">\r\n <span class=\"w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse\"><\/span>\r\n <span class=\"text-xs font-bold uppercase tracking-widest text-gold\">Admissions Open 2024<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <h1 class=\"gsap-hero opacity-0 translate-y-10 font-display text-5xl md:text-7xl lg:text-8xl font-bold leading-[1.1]\">\r\n Unlock Your <br \/>\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-gold via-yellow-200 to-amber-600\">Potential<\/span>\r\n <\/h1>\r\n \r\n <p class=\"gsap-hero opacity-0 translate-y-10 text-lg text-gray-400 max-w-xl mx-auto lg:mx-0 font-light leading-relaxed\">\r\n A dedicated sanctuary in Churachandpur designed for serious aspirants. We provide the silence, resources, and environment you need to succeed.\r\n <\/p>\r\n\r\n <div class=\"gsap-hero opacity-0 translate-y-10 flex flex-col sm:flex-row gap-5 justify-center lg:justify-start\">\r\n <a href=\"#contact\" class=\"px-8 py-4 bg-white text-black font-bold rounded-full hover:bg-gold transition-colors shadow-lg hover:shadow-gold\/20 flex items-center justify-center gap-2\">\r\n <span>Book Your Seat<\/span>\r\n <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\r\n <\/a>\r\n <a href=\"#amenities\" class=\"px-8 py-4 border border-white\/20 rounded-full text-white hover:bg-white\/5 transition-all flex items-center justify-center gap-2\">\r\n <span>View Facilities<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"gsap-hero opacity-0 translate-x-10 hidden lg:block relative perspective-1000\" data-tilt data-tilt-max=\"10\" data-tilt-speed=\"400\" data-tilt-perspective=\"1000\">\r\n <div class=\"relative z-10 rounded-3xl overflow-hidden border border-white\/10 shadow-2xl shadow-gold\/10 group\">\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-void\/80 via-transparent to-transparent z-10\"><\/div>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517673132405-a56a62b18caf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\" alt=\"Indian Student Studying\" class=\"w-full h-[600px] object-cover transform transition-transform duration-700 group-hover:scale-105\">\r\n \r\n <div class=\"absolute bottom-8 left-8 z-20\">\r\n <div class=\"glass-panel p-4 rounded-xl inline-block\">\r\n <p class=\"text-gold text-xs uppercase tracking-wider font-bold mb-1\">Tuibong Forest Gate<\/p>\r\n <p class=\"text-white font-display text-xl\">The Silence Zone<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"absolute -top-10 -right-10 w-40 h-40 bg-gold\/20 rounded-full blur-3xl -z-10\"><\/div>\r\n <div class=\"absolute -bottom-10 -left-10 w-40 h-40 bg-blue-500\/20 rounded-full blur-3xl -z-10\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"absolute bottom-10 left-1\/2 -translate-x-1\/2 animate-bounce hidden md:block\">\r\n <i data-lucide=\"chevron-down\" class=\"text-white\/30 w-8 h-8\"><\/i>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div class=\"bg-gold\/10 py-4 overflow-hidden border-y border-gold\/10 backdrop-blur-sm\">\r\n <div class=\"whitespace-nowrap flex gap-8 animate-marquee\">\r\n <span class=\"text-gold\/50 font-display text-xl uppercase tracking-widest\">\u2022 Focus \u2022 Discipline \u2022 Success \u2022 Silence \u2022 Growth<\/span>\r\n <span class=\"text-gold\/50 font-display text-xl uppercase tracking-widest\">\u2022 Focus \u2022 Discipline \u2022 Success \u2022 Silence \u2022 Growth<\/span>\r\n <span class=\"text-gold\/50 font-display text-xl uppercase tracking-widest\">\u2022 Focus \u2022 Discipline \u2022 Success \u2022 Silence \u2022 Growth<\/span>\r\n <span class=\"text-gold\/50 font-display text-xl uppercase tracking-widest\">\u2022 Focus \u2022 Discipline \u2022 Success \u2022 Silence \u2022 Growth<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section id=\"about\" class=\"py-32 relative\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n <div class=\"grid md:grid-cols-2 gap-16 items-center\">\r\n \r\n <div class=\"grid grid-cols-2 gap-4 gsap-fade-right\">\r\n <div class=\"space-y-4 mt-8\">\r\n <div class=\"image-wrapper rounded-2xl overflow-hidden h-64 border border-white\/10\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497633762265-9d179a990aa6?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" class=\"w-full h-full object-cover opacity-80 hover:opacity-100 transition-opacity\" alt=\"Library Books\">\r\n <\/div>\r\n <div class=\"glass-panel p-6 rounded-2xl text-center\">\r\n <span class=\"block text-4xl font-display font-bold text-gold counter\" data-target=\"24\">0<\/span>\r\n <span class=\"text-xs text-gray-400 uppercase tracking-widest\">Hours Access (Req)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"glass-panel p-6 rounded-2xl text-center\">\r\n <span class=\"block text-4xl font-display font-bold text-gold counter\" data-target=\"100\">0<\/span>\r\n <span class=\"text-xs text-gray-400 uppercase tracking-widest\">Percent Silence<\/span>\r\n <\/div>\r\n <div class=\"image-wrapper rounded-2xl overflow-hidden h-64 border border-white\/10\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1610484826967-09c5720778c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" class=\"w-full h-full object-cover opacity-80 hover:opacity-100 transition-opacity\" alt=\"Student Writing\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"gsap-fade-left\">\r\n <h2 class=\"font-display text-4xl md:text-5xl text-white mb-6\">\r\n Designed for the <br\/><span class=\"text-gold italic\">Relentless<\/span>\r\n <\/h2>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-8\">\r\n The Ultimate Study Centre is more than just a desk and a chair. It is a carefully curated ecosystem for Indian students preparing for competitive exams, boards, and higher studies. We understand the pressure and the need for a distraction-free zone.\r\n <\/p>\r\n <p class=\"text-gray-500 mb-8\">\r\n Whether you are preparing for UPSC, NEET, JEE, or State Services, our environment adapts to your rigorous schedule.\r\n <\/p>\r\n <a href=\"#amenities\" class=\"text-gold font-bold tracking-widest hover:text-white transition-colors uppercase text-sm border-b border-gold pb-1 inline-block\">\r\n Explore Facilities\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"amenities\" class=\"py-20 relative bg-void\/50\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-gold text-xs tracking-widest uppercase block mb-2\">Premium Facilities<\/span>\r\n <h2 class=\"font-display text-4xl md:text-5xl text-white\">Amenities<\/h2>\r\n <div class=\"w-16 h-1 bg-gradient-to-r from-transparent via-gold to-transparent mx-auto mt-4\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"wifi\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">High-Speed WiFi<\/h3>\r\n <p class=\"text-sm text-gray-400\">Fiber-optic connectivity ensures seamless access to online lectures and research materials.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"wind\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">Air Conditioned<\/h3>\r\n <p class=\"text-sm text-gray-400\">Maintain your cool during intense study sessions with our climate-controlled environment.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"zap\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">Power Backup<\/h3>\r\n <p class=\"text-sm text-gray-400\">Uninterrupted power supply ensures your study schedule is never compromised by outages.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"armchair\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">Ergonomic Seating<\/h3>\r\n <p class=\"text-sm text-gray-400\">Chairs designed for long-duration sitting to prevent fatigue and back pain.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"lock\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">Private Lockers<\/h3>\r\n <p class=\"text-sm text-gray-400\">Secure storage for your books and valuables so you don't have to carry them daily.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"droplet\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">RO Water<\/h3>\r\n <p class=\"text-sm text-gray-400\">Clean, purified drinking water available 24\/7 to keep you hydrated and healthy.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"shield-check\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">CCTV Security<\/h3>\r\n <p class=\"text-sm text-gray-400\">24\/7 surveillance ensures a safe environment, especially for late-night study sessions.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"newspaper\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">News & Papers<\/h3>\r\n <p class=\"text-sm text-gray-400\">Daily newspapers and monthly current affairs magazines available for general studies.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"gallery\" class=\"py-32 bg-void relative overflow-hidden\">\r\n \r\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full text-center pointer-events-none opacity-5\">\r\n <span class=\"font-display font-bold text-[20vw] text-white\">LIBRARY<\/span>\r\n <\/div>\r\n\r\n <div class=\"max-w-7xl mx-auto px-4 relative z-10\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-gold text-xs tracking-widest uppercase block mb-2\">Visual Tour<\/span>\r\n <h2 class=\"font-display text-4xl md:text-5xl mb-4\">Life at The Centre<\/h2>\r\n <div class=\"w-24 h-1 bg-gold mx-auto\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-3 gap-8\">\r\n \r\n <div class=\"group relative h-[500px] overflow-hidden rounded-2xl border border-white\/10 cursor-pointer gsap-card\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0\" alt=\"Group Study\">\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 p-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500\">\r\n <span class=\"text-gold text-xs font-bold tracking-widest uppercase mb-2 block\">Community<\/span>\r\n <h3 class=\"text-2xl font-display font-bold\">Peer Learning<\/h3>\r\n <p class=\"text-gray-400 text-sm mt-2 opacity-0 group-hover:opacity-100 transition-opacity delay-100\">Connect with like-minded aspirants.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"group relative h-[500px] overflow-hidden rounded-2xl border border-gold\/50 cursor-pointer md:-mt-12 shadow-2xl shadow-gold\/10 gsap-card\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" alt=\"Book Shelves\">\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80 group-hover:opacity-60 transition-opacity\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 p-8\">\r\n <span class=\"text-gold text-xs font-bold tracking-widest uppercase mb-2 block\">Resources<\/span>\r\n <h3 class=\"text-2xl font-display font-bold\">Vast Library<\/h3>\r\n <p class=\"text-gray-400 text-sm mt-2\">Access to reference books and materials.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"group relative h-[500px] overflow-hidden rounded-2xl border border-white\/10 cursor-pointer gsap-card\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0\" alt=\"Deep Focus\">\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 p-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500\">\r\n <span class=\"text-gold text-xs font-bold tracking-widest uppercase mb-2 block\">Atmosphere<\/span>\r\n <h3 class=\"text-2xl font-display font-bold\">Deep Focus<\/h3>\r\n <p class=\"text-gray-400 text-sm mt-2 opacity-0 group-hover:opacity-100 transition-opacity delay-100\">Zero distractions, 100% productivity.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"testimonials\" class=\"py-24 relative\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n <div class=\"flex flex-col md:flex-row justify-between items-end mb-12\">\r\n <div>\r\n <span class=\"text-gold text-xs tracking-widest uppercase block mb-2\">Success Stories<\/span>\r\n <h2 class=\"font-display text-4xl md:text-5xl text-white\">Student Voices<\/h2>\r\n <\/div>\r\n <div class=\"text-right hidden md:block\">\r\n <div class=\"text-gold text-2xl font-bold\">4.9\/5<\/div>\r\n <div class=\"text-xs text-gray-400 uppercase tracking-widest\">Average Rating<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n \r\n <div class=\"glass-panel p-8 rounded-2xl relative gsap-card\">\r\n <div class=\"absolute -top-4 -right-4 bg-gold text-black rounded-full p-2\">\r\n <i data-lucide=\"quote\" class=\"w-6 h-6 fill-current\"><\/i>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 mb-6\">\r\n <div class=\"w-12 h-12 bg-gray-700 rounded-full overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80\" alt=\"Student\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-lg\">Rohan Sharma<\/h4>\r\n <p class=\"text-xs text-gold uppercase tracking-wider\">NEET Aspirant<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed italic\">\"The silence here is exactly what I needed. Distractions at home were killing my productivity. Here, I can study for 8 hours straight without realizing it.\"<\/p>\r\n <div class=\"flex gap-1 mt-4 text-gold\">\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel p-8 rounded-2xl relative mt-0 md:mt-8 gsap-card\">\r\n <div class=\"absolute -top-4 -right-4 bg-gold text-black rounded-full p-2\">\r\n <i data-lucide=\"quote\" class=\"w-6 h-6 fill-current\"><\/i>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 mb-6\">\r\n <div class=\"w-12 h-12 bg-gray-700 rounded-full overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1590650516494-0c8e4a4dd67e?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80\" alt=\"Student\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-lg\">Anjali Singh<\/h4>\r\n <p class=\"text-xs text-gold uppercase tracking-wider\">UPSC CSE<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed italic\">\"Safety was my biggest concern for late-night studies. The CCTV coverage and secure environment at Tuibong Forest Gate make me feel completely safe.\"<\/p>\r\n <div class=\"flex gap-1 mt-4 text-gold\">\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel p-8 rounded-2xl relative gsap-card\">\r\n <div class=\"absolute -top-4 -right-4 bg-gold text-black rounded-full p-2\">\r\n <i data-lucide=\"quote\" class=\"w-6 h-6 fill-current\"><\/i>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 mb-6\">\r\n <div class=\"w-12 h-12 bg-gray-700 rounded-full overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1566492031773-4f4e44671857?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80\" alt=\"Student\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-lg\">Vikram L.<\/h4>\r\n <p class=\"text-xs text-gold uppercase tracking-wider\">MPSC Aspirant<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed italic\">\"The internet speed is phenomenal. I attend all my live classes here without any buffer. The chairs are also very comfortable for long sitting hours.\"<\/p>\r\n <div class=\"flex gap-1 mt-4 text-gold\">\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\" class=\"py-20 relative bg-[#0a0a0c]\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n <div class=\"glass-panel rounded-3xl p-8 md:p-12 border-t border-gold\/30 relative overflow-hidden\">\r\n \r\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-gold opacity-5 blur-[120px] rounded-full pointer-events-none\"><\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-12\">\r\n <div>\r\n <h2 class=\"font-display text-4xl font-bold mb-6\">Visit Us<\/h2>\r\n <p class=\"text-gray-400 mb-10\">We invite you to experience the atmosphere yourself. Walk in for a free tour.<\/p>\r\n\r\n <div class=\"space-y-6\">\r\n <div class=\"flex items-start gap-4 group\">\r\n <div class=\"w-12 h-12 rounded-full bg-white\/5 flex items-center justify-center group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"map-pin\" class=\"w-5 h-5\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-bold text-lg\">Location<\/h4>\r\n <p class=\"text-gray-400\">Ultimate Study Centre<br>Tuibong Forest Gate<br>Churachandpur, Manipur 795128<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-start gap-4 group\">\r\n <div class=\"w-12 h-12 rounded-full bg-white\/5 flex items-center justify-center group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-bold text-lg\">Contact<\/h4>\r\n <p class=\"text-gray-400 font-mono\">9873775515<\/p>\r\n <p class=\"text-gray-500 text-sm\">theultimatestudycentre@gmail.com<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-10 pt-10 border-t border-white\/10\">\r\n <h3 class=\"font-display text-2xl font-bold mb-6 text-white\">Book Your Seat<\/h3>\r\n <form action=\"https:\/\/formspree.io\/f\/xqearwop\" method=\"POST\" class=\"space-y-4\">\r\n \r\n <input type=\"hidden\" name=\"_cc\" value=\"theultimatestudycentre@gmail.com\">\r\n <input type=\"hidden\" name=\"_subject\" value=\"New Seat Inquiry - Ultimate Study Centre\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <input type=\"text\" name=\"name\" placeholder=\"Your Name\" required \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-gold focus:bg-white\/10 transition-all\">\r\n \r\n <input type=\"tel\" name=\"phone\" placeholder=\"Phone Number\" required \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-gold focus:bg-white\/10 transition-all\">\r\n <\/div>\r\n\r\n <input type=\"email\" name=\"email\" placeholder=\"Email Address\" required \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-gold focus:bg-white\/10 transition-all\">\r\n\r\n <select name=\"interest\" required \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-gold focus:bg-white\/10 transition-all appearance-none cursor-pointer\">\r\n <option value=\"\" disabled selected class=\"bg-void text-gray-500\">Select Plan \/ Purpose<\/option>\r\n <option value=\"Monthly Seat\" class=\"bg-void text-white\">Reserve Monthly Seat<\/option>\r\n <option value=\"Center Tour\" class=\"bg-void text-white\">Schedule a Tour<\/option>\r\n <option value=\"General Inquiry\" class=\"bg-void text-white\">General Inquiry<\/option>\r\n <\/select>\r\n\r\n <textarea name=\"message\" rows=\"2\" placeholder=\"Any specific requirements?\" \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-gold focus:bg-white\/10 transition-all resize-none\"><\/textarea>\r\n \r\n <button type=\"submit\" class=\"w-full bg-white text-black font-bold py-4 rounded-xl hover:bg-gold transition-colors shadow-lg hover:shadow-gold\/20 flex items-center justify-center gap-2 group\">\r\n <span>CONFIRM BOOKING<\/span>\r\n <i data-lucide=\"send\" class=\"w-4 h-4 group-hover:translate-x-1 transition-transform\"><\/i>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative rounded-2xl overflow-hidden h-full min-h-[500px] border border-white\/10 group bg-white\/5\">\r\n <iframe \r\n src=\"https:\/\/maps.google.com\/maps?q=Ultimate+Study+Centre+Tuibong+Forest+Gate+Churachandpur+Manipur+795128&t=&z=15&ie=UTF8&iwloc=&output=embed\" \r\n width=\"100%\" \r\n height=\"100%\" \r\n style=\"border:0; min-height: 400px;\" \r\n allowfullscreen=\"\" \r\n loading=\"lazy\" \r\n referrerpolicy=\"no-referrer-when-downgrade\"\r\n class=\"w-full h-full rounded-2xl filter grayscale invert-[.85] contrast-125 hover:filter-none transition-all duration-500 opacity-90 hover:opacity-100\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"border-t border-white\/10 py-12 bg-black text-center md:text-left\">\r\n <div class=\"max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6\">\r\n <div>\r\n <h3 class=\"font-display font-bold text-lg text-white tracking-widest mb-1\">ULTIMATE<\/h3>\r\n <p class=\"text-xs text-gray-500\">STUDY CENTRE<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex gap-8 text-xs font-bold tracking-widest text-gray-500\">\r\n <a href=\"#\" class=\"hover:text-gold transition-colors\">HOME<\/a>\r\n <a href=\"#about\" class=\"hover:text-gold transition-colors\">ABOUT<\/a>\r\n <a href=\"#amenities\" class=\"hover:text-gold transition-colors\">AMENITIES<\/a>\r\n <a href=\"#gallery\" class=\"hover:text-gold transition-colors\">GALLERY<\/a>\r\n <a href=\"#contact\" class=\"hover:text-gold transition-colors\">CONTACT<\/a>\r\n <\/div>\r\n\r\n <div class=\"text-gray-700 text-xs\">\r\n © 2024 Ultimate Study Centre.\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <script>\r\n \/\/ 1. Initialize Lucide Icons\r\n lucide.createIcons();\r\n\r\n \/\/ 2. Custom Cursor Logic\r\n const cursorDot = document.querySelector('.cursor-dot');\r\n const cursorOutline = document.querySelector('.cursor-outline');\r\n\r\n if (window.matchMedia(\"(min-width: 768px)\").matches) {\r\n window.addEventListener('mousemove', (e) => {\r\n const posX = e.clientX;\r\n const posY = e.clientY;\r\n\r\n \/\/ Dot follows instantly\r\n cursorDot.style.left = `${posX}px`;\r\n cursorDot.style.top = `${posY}px`;\r\n\r\n \/\/ Outline follows with delay (animation in CSS or via animate)\r\n cursorOutline.animate({\r\n left: `${posX}px`,\r\n top: `${posY}px`\r\n }, { duration: 500, fill: \"forwards\" });\r\n });\r\n \r\n \/\/ Hover states for cursor\r\n document.querySelectorAll('a, button').forEach(el => {\r\n el.addEventListener('mouseenter', () => {\r\n cursorOutline.style.width = '60px';\r\n cursorOutline.style.height = '60px';\r\n cursorOutline.style.borderColor = '#fff';\r\n });\r\n el.addEventListener('mouseleave', () => {\r\n cursorOutline.style.width = '40px';\r\n cursorOutline.style.height = '40px';\r\n cursorOutline.style.borderColor = 'rgba(212, 175, 55, 0.5)';\r\n });\r\n });\r\n }\r\n\r\n \/\/ 3. Mobile Menu Toggle\r\n function toggleMobileMenu() {\r\n const menu = document.getElementById('mobile-menu');\r\n if (menu.classList.contains('hidden')) {\r\n menu.classList.remove('hidden');\r\n menu.style.display = 'flex';\r\n setTimeout(() => menu.style.opacity = '1', 10);\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n menu.style.opacity = '0';\r\n setTimeout(() => {\r\n menu.classList.add('hidden');\r\n menu.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }, 300);\r\n }\r\n }\r\n\r\n \/\/ 4. Three.js Background (Enhanced Constellation)\r\n const initThreeJS = () => {\r\n const container = document.getElementById('canvas-container');\r\n const scene = new THREE.Scene();\r\n scene.fog = new THREE.FogExp2(0x050507, 0.002);\r\n\r\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\r\n camera.position.z = 5;\r\n\r\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n renderer.setPixelRatio(window.devicePixelRatio);\r\n container.appendChild(renderer.domElement);\r\n\r\n \/\/ Particles\r\n const geometry = new THREE.BufferGeometry();\r\n const count = 1000;\r\n const positions = new Float32Array(count * 3);\r\n const colors = new Float32Array(count * 3);\r\n\r\n for(let i = 0; i < count * 3; i++) {\r\n positions[i] = (Math.random() - 0.5) * 20; \/\/ Spread out\r\n colors[i] = Math.random(); \/\/ Gradient factor\r\n }\r\n\r\n geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\r\n geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\r\n\r\n const material = new THREE.PointsMaterial({\r\n size: 0.03,\r\n color: 0xd4af37,\r\n transparent: true,\r\n opacity: 0.8,\r\n sizeAttenuation: true\r\n });\r\n\r\n const particles = new THREE.Points(geometry, material);\r\n scene.add(particles);\r\n\r\n \/\/ Animation Loop\r\n const animate = () => {\r\n requestAnimationFrame(animate);\r\n particles.rotation.y += 0.001;\r\n particles.rotation.x += 0.0005;\r\n renderer.render(scene, camera);\r\n };\r\n animate();\r\n\r\n \/\/ Resize\r\n window.addEventListener('resize', () => {\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n });\r\n };\r\n \r\n initThreeJS();\r\n\r\n \/\/ 5. GSAP Animations\r\n window.addEventListener('load', () => {\r\n \/\/ Remove Loader\r\n const loader = document.getElementById('loader');\r\n gsap.to(loader, { opacity: 0, duration: 1, onComplete: () => loader.style.display = 'none' });\r\n\r\n \/\/ Hero Animation\r\n gsap.to(\".gsap-hero\", {\r\n opacity: 1,\r\n y: 0,\r\n duration: 1.2,\r\n stagger: 0.15,\r\n ease: \"power3.out\",\r\n delay: 0.5\r\n });\r\n\r\n \/\/ Counters (Simple JS implementation triggered by GSAP)\r\n const counters = document.querySelectorAll('.counter');\r\n counters.forEach(counter => {\r\n const target = +counter.getAttribute('data-target');\r\n gsap.to(counter, {\r\n scrollTrigger: {\r\n trigger: counter,\r\n start: \"top 85%\",\r\n },\r\n innerHTML: target,\r\n duration: 2,\r\n snap: { innerHTML: 1 },\r\n ease: \"power2.out\"\r\n });\r\n });\r\n\r\n \/\/ Fade Right\r\n gsap.utils.toArray('.gsap-fade-right').forEach(el => {\r\n gsap.from(el, {\r\n scrollTrigger: { trigger: el, start: \"top 85%\" },\r\n x: -50, opacity: 0, duration: 1, ease: \"power3.out\"\r\n });\r\n });\r\n\r\n \/\/ Fade Left\r\n gsap.utils.toArray('.gsap-fade-left').forEach(el => {\r\n gsap.from(el, {\r\n scrollTrigger: { trigger: el, start: \"top 85%\" },\r\n x: 50, opacity: 0, duration: 1, ease: \"power3.out\"\r\n });\r\n });\r\n \r\n \/\/ Cards Stagger\r\n gsap.utils.toArray('.gsap-card').forEach((el, i) => {\r\n gsap.from(el, {\r\n scrollTrigger: { trigger: el, start: \"top 90%\" },\r\n y: 50, opacity: 0, duration: 0.8, delay: i * 0.1, ease: \"back.out(1.7)\"\r\n });\r\n });\r\n });\r\n\r\n \/\/ 6. Vanilla Tilt Init\r\n VanillaTilt.init(document.querySelectorAll(\"[data-tilt]\"), {\r\n max: 15,\r\n speed: 400,\r\n glare: true,\r\n \"max-glare\": 0.2,\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ultimate Study Centre | The Sanctuary LOADING ULTIMATE Study Centre HOME ABOUT AMENITIES GALLERY REVIEWS ADMIN JOIN US Home About Amenities Gallery Reviews Admin Login Contact Admissions Open 2024 Unlock Your Potential A dedicated sanctuary in Churachandpur designed for serious aspirants. We provide the silence, resources, and environment you need to succeed. Book Your Seat […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":17,"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n \r\n Ultimate Study Centre | The Sanctuary<\/title>\r\n <meta name=\"title\" content=\"Ultimate Study Centre | The Sanctuary\">\r\n <meta name=\"description\" content=\"A dedicated sanctuary in Churachandpur designed for serious aspirants. Premium library facilities with high-speed WiFi, AC, and a distraction-free environment.\">\r\n <meta name=\"keywords\" content=\"Library, Study Centre, Churachandpur, Manipur, UPSC, NEET, JEE, Silent Study, Premium Library\">\r\n\r\n \r\n <meta property=\"og:type\" content=\"website\">\r\n <meta property=\"og:url\" content=\"https:\/\/ultimatestudycentre.oneupit.co.in\/\">\r\n <meta property=\"og:title\" content=\"Ultimate Study Centre | The Sanctuary\">\r\n <meta property=\"og:description\" content=\"A dedicated sanctuary in Churachandpur designed for serious aspirants. Premium library facilities with high-speed WiFi, AC, and a distraction-free environment.\">\r\n \r\n <meta property=\"og:image\" content=\"https:\/\/images.unsplash.com\/photo-1517673132405-a56a62b18caf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\">\r\n\r\n \r\n <meta property=\"twitter:card\" content=\"summary_large_image\">\r\n <meta property=\"twitter:url\" content=\"https:\/\/ultimatestudycentre.oneupit.co.in\/\">\r\n <meta property=\"twitter:title\" content=\"Ultimate Study Centre | The Sanctuary\">\r\n <meta property=\"twitter:description\" content=\"A dedicated sanctuary in Churachandpur designed for serious aspirants. Premium library facilities with high-speed WiFi, AC, and a distraction-free environment.\">\r\n <meta property=\"twitter:image\" content=\"https:\/\/images.unsplash.com\/photo-1517673132405-a56a62b18caf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\">\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vanilla-tilt\/1.8.0\/vanilla-tilt.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;700&family=Space+Grotesk:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Space Grotesk', 'sans-serif'],\r\n display: ['Cinzel', 'serif'],\r\n },\r\n colors: {\r\n void: '#050507',\r\n glass: 'rgba(255, 255, 255, 0.05)',\r\n gold: '#d4af37',\r\n accent: '#ffbd59',\r\n },\r\n backgroundImage: {\r\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n background-color: #050507;\r\n color: #ffffff;\r\n overflow-x: hidden;\r\n cursor: none; \/* Custom cursor *\/\r\n }\r\n\r\n \/* Custom Cursor *\/\r\n .cursor-dot,\r\n .cursor-outline {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n transform: translate(-50%, -50%);\r\n border-radius: 50%;\r\n z-index: 9999;\r\n pointer-events: none;\r\n }\r\n .cursor-dot {\r\n width: 8px;\r\n height: 8px;\r\n background-color: #d4af37;\r\n }\r\n .cursor-outline {\r\n width: 40px;\r\n height: 40px;\r\n border: 1px solid rgba(212, 175, 55, 0.5);\r\n transition: width 0.2s, height 0.2s, background-color 0.2s;\r\n }\r\n\r\n \/* 3D Canvas *\/\r\n #canvas-container {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n }\r\n\r\n \/* Glassmorphism *\/\r\n .glass-panel {\r\n background: rgba(18, 18, 20, 0.6);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .glass-card {\r\n background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n \/* Navigation Links *\/\r\n .nav-link {\r\n position: relative;\r\n }\r\n .nav-link::before {\r\n content: '';\r\n position: absolute;\r\n width: 100%;\r\n height: 1px;\r\n bottom: -2px;\r\n left: 0;\r\n background-color: #d4af37;\r\n transform: scaleX(0);\r\n transform-origin: right;\r\n transition: transform 0.4s ease;\r\n }\r\n .nav-link:hover::before {\r\n transform: scaleX(1);\r\n transform-origin: left;\r\n }\r\n\r\n \/* Loader *\/\r\n #loader {\r\n position: fixed;\r\n inset: 0;\r\n background: #050507;\r\n z-index: 100;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n \/* Image Hover Effects *\/\r\n .image-wrapper {\r\n overflow: hidden;\r\n border-radius: 0.75rem;\r\n }\r\n .image-wrapper img {\r\n transition: transform 0.8s ease;\r\n }\r\n .image-wrapper:hover img {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Scrollbar *\/\r\n ::-webkit-scrollbar { width: 4px; }\r\n ::-webkit-scrollbar-track { background: #050507; }\r\n ::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased selection:bg-gold selection:text-black\">\r\n\r\n \r\n <div class=\"cursor-dot hidden md:block\"><\/div>\r\n <div class=\"cursor-outline hidden md:block\"><\/div>\r\n\r\n \r\n <div id=\"loader\">\r\n <div class=\"flex flex-col items-center justify-center space-y-4\">\r\n <div class=\"w-16 h-16 border-4 border-gold border-t-transparent rounded-full animate-spin\"><\/div>\r\n <div class=\"text-gold font-display text-2xl tracking-[0.3em] animate-pulse\">LOADING<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"canvas-container\"><\/div>\r\n\r\n \r\n <nav class=\"fixed w-full z-50 top-0 left-0 p-4 md:p-6 transition-all duration-300\" id=\"navbar\">\r\n <div class=\"max-w-7xl mx-auto glass-panel rounded-full px-6 py-4 flex justify-between items-center\">\r\n <a href=\"#\" class=\"flex items-center gap-3 group z-50\">\r\n <div class=\"bg-gold\/10 p-2 rounded-full border border-gold\/20 group-hover:bg-gold\/20 transition-colors\">\r\n <i data-lucide=\"library\" class=\"text-gold w-5 h-5\"><\/i>\r\n <\/div>\r\n <div class=\"flex flex-col\">\r\n <span class=\"font-display font-bold text-lg leading-none tracking-wider text-white\">ULTIMATE<\/span>\r\n <span class=\"text-[10px] uppercase tracking-[0.2em] text-gray-400 group-hover:text-gold transition-colors\">Study Centre<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n \r\n <div class=\"hidden md:flex items-center gap-8 text-xs lg:text-sm font-medium tracking-widest\">\r\n <a href=\"#\" class=\"text-white hover:text-gold transition-colors nav-link\">HOME<\/a>\r\n <a href=\"#about\" class=\"text-gray-400 hover:text-gold transition-colors nav-link\">ABOUT<\/a>\r\n <a href=\"#amenities\" class=\"text-gray-400 hover:text-gold transition-colors nav-link\">AMENITIES<\/a>\r\n <a href=\"#gallery\" class=\"text-gray-400 hover:text-gold transition-colors nav-link\">GALLERY<\/a>\r\n <a href=\"#testimonials\" class=\"text-gray-400 hover:text-gold transition-colors nav-link\">REVIEWS<\/a>\r\n \r\n \r\n <a href=\"https:\/\/ultimatestudycentre.oneupit.co.in\" class=\"text-gray-500 hover:text-white transition-colors nav-link text-[10px] uppercase\">ADMIN<\/a>\r\n\r\n <a href=\"#contact\" class=\"bg-gradient-to-r from-gold to-yellow-600 text-black px-8 py-2.5 rounded-full font-bold hover:shadow-[0_0_20px_rgba(212,175,55,0.4)] hover:scale-105 transition-all duration-300 transform\">\r\n JOIN US\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <button class=\"md:hidden text-white z-50\" onclick=\"toggleMobileMenu()\">\r\n <i data-lucide=\"menu\" class=\"w-8 h-8\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-menu\" class=\"fixed inset-0 bg-void\/95 backdrop-blur-xl z-40 hidden flex-col justify-center items-center gap-8 opacity-0 transition-opacity duration-300\">\r\n <a href=\"#\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-white hover:text-gold\">Home<\/a>\r\n <a href=\"#about\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gray-400 hover:text-gold\">About<\/a>\r\n <a href=\"#amenities\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gray-400 hover:text-gold\">Amenities<\/a>\r\n <a href=\"#gallery\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gray-400 hover:text-gold\">Gallery<\/a>\r\n <a href=\"#testimonials\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gray-400 hover:text-gold\">Reviews<\/a>\r\n <a href=\"https:\/\/ultimatestudycentre.oneupit.co.in\" class=\"font-display text-2xl text-gray-600 hover:text-white uppercase tracking-widest mt-4\">Admin Login<\/a>\r\n <a href=\"#contact\" onclick=\"toggleMobileMenu()\" class=\"font-display text-3xl text-gold\">Contact<\/a>\r\n <button onclick=\"toggleMobileMenu()\" class=\"absolute top-8 right-8 text-white p-2\">\r\n <i data-lucide=\"x\" class=\"w-8 h-8\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <header class=\"relative min-h-screen flex items-center justify-center px-4 pt-20 overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-12 items-center\">\r\n \r\n \r\n <div class=\"text-center lg:text-left z-10 space-y-8\">\r\n <div class=\"gsap-hero opacity-0 translate-y-10\">\r\n <div class=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-gold\/30 bg-gold\/5 backdrop-blur-md\">\r\n <span class=\"w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse\"><\/span>\r\n <span class=\"text-xs font-bold uppercase tracking-widest text-gold\">Admissions Open 2024<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <h1 class=\"gsap-hero opacity-0 translate-y-10 font-display text-5xl md:text-7xl lg:text-8xl font-bold leading-[1.1]\">\r\n Unlock Your <br \/>\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-gold via-yellow-200 to-amber-600\">Potential<\/span>\r\n <\/h1>\r\n \r\n <p class=\"gsap-hero opacity-0 translate-y-10 text-lg text-gray-400 max-w-xl mx-auto lg:mx-0 font-light leading-relaxed\">\r\n A dedicated sanctuary in Churachandpur designed for serious aspirants. We provide the silence, resources, and environment you need to succeed.\r\n <\/p>\r\n\r\n <div class=\"gsap-hero opacity-0 translate-y-10 flex flex-col sm:flex-row gap-5 justify-center lg:justify-start\">\r\n <a href=\"#contact\" class=\"px-8 py-4 bg-white text-black font-bold rounded-full hover:bg-gold transition-colors shadow-lg hover:shadow-gold\/20 flex items-center justify-center gap-2\">\r\n <span>Book Your Seat<\/span>\r\n <i data-lucide=\"arrow-right\" class=\"w-4 h-4\"><\/i>\r\n <\/a>\r\n <a href=\"#amenities\" class=\"px-8 py-4 border border-white\/20 rounded-full text-white hover:bg-white\/5 transition-all flex items-center justify-center gap-2\">\r\n <span>View Facilities<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"gsap-hero opacity-0 translate-x-10 hidden lg:block relative perspective-1000\" data-tilt data-tilt-max=\"10\" data-tilt-speed=\"400\" data-tilt-perspective=\"1000\">\r\n <div class=\"relative z-10 rounded-3xl overflow-hidden border border-white\/10 shadow-2xl shadow-gold\/10 group\">\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-void\/80 via-transparent to-transparent z-10\"><\/div>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517673132405-a56a62b18caf?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80\" alt=\"Indian Student Studying\" class=\"w-full h-[600px] object-cover transform transition-transform duration-700 group-hover:scale-105\">\r\n \r\n <div class=\"absolute bottom-8 left-8 z-20\">\r\n <div class=\"glass-panel p-4 rounded-xl inline-block\">\r\n <p class=\"text-gold text-xs uppercase tracking-wider font-bold mb-1\">Tuibong Forest Gate<\/p>\r\n <p class=\"text-white font-display text-xl\">The Silence Zone<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"absolute -top-10 -right-10 w-40 h-40 bg-gold\/20 rounded-full blur-3xl -z-10\"><\/div>\r\n <div class=\"absolute -bottom-10 -left-10 w-40 h-40 bg-blue-500\/20 rounded-full blur-3xl -z-10\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"absolute bottom-10 left-1\/2 -translate-x-1\/2 animate-bounce hidden md:block\">\r\n <i data-lucide=\"chevron-down\" class=\"text-white\/30 w-8 h-8\"><\/i>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <div class=\"bg-gold\/10 py-4 overflow-hidden border-y border-gold\/10 backdrop-blur-sm\">\r\n <div class=\"whitespace-nowrap flex gap-8 animate-marquee\">\r\n <span class=\"text-gold\/50 font-display text-xl uppercase tracking-widest\">\u2022 Focus \u2022 Discipline \u2022 Success \u2022 Silence \u2022 Growth<\/span>\r\n <span class=\"text-gold\/50 font-display text-xl uppercase tracking-widest\">\u2022 Focus \u2022 Discipline \u2022 Success \u2022 Silence \u2022 Growth<\/span>\r\n <span class=\"text-gold\/50 font-display text-xl uppercase tracking-widest\">\u2022 Focus \u2022 Discipline \u2022 Success \u2022 Silence \u2022 Growth<\/span>\r\n <span class=\"text-gold\/50 font-display text-xl uppercase tracking-widest\">\u2022 Focus \u2022 Discipline \u2022 Success \u2022 Silence \u2022 Growth<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <section id=\"about\" class=\"py-32 relative\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n <div class=\"grid md:grid-cols-2 gap-16 items-center\">\r\n \r\n <div class=\"grid grid-cols-2 gap-4 gsap-fade-right\">\r\n <div class=\"space-y-4 mt-8\">\r\n <div class=\"image-wrapper rounded-2xl overflow-hidden h-64 border border-white\/10\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497633762265-9d179a990aa6?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" class=\"w-full h-full object-cover opacity-80 hover:opacity-100 transition-opacity\" alt=\"Library Books\">\r\n <\/div>\r\n <div class=\"glass-panel p-6 rounded-2xl text-center\">\r\n <span class=\"block text-4xl font-display font-bold text-gold counter\" data-target=\"24\">0<\/span>\r\n <span class=\"text-xs text-gray-400 uppercase tracking-widest\">Hours Access (Req)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"glass-panel p-6 rounded-2xl text-center\">\r\n <span class=\"block text-4xl font-display font-bold text-gold counter\" data-target=\"100\">0<\/span>\r\n <span class=\"text-xs text-gray-400 uppercase tracking-widest\">Percent Silence<\/span>\r\n <\/div>\r\n <div class=\"image-wrapper rounded-2xl overflow-hidden h-64 border border-white\/10\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1610484826967-09c5720778c7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80\" class=\"w-full h-full object-cover opacity-80 hover:opacity-100 transition-opacity\" alt=\"Student Writing\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"gsap-fade-left\">\r\n <h2 class=\"font-display text-4xl md:text-5xl text-white mb-6\">\r\n Designed for the <br\/><span class=\"text-gold italic\">Relentless<\/span>\r\n <\/h2>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-8\">\r\n The Ultimate Study Centre is more than just a desk and a chair. It is a carefully curated ecosystem for Indian students preparing for competitive exams, boards, and higher studies. We understand the pressure and the need for a distraction-free zone.\r\n <\/p>\r\n <p class=\"text-gray-500 mb-8\">\r\n Whether you are preparing for UPSC, NEET, JEE, or State Services, our environment adapts to your rigorous schedule.\r\n <\/p>\r\n <a href=\"#amenities\" class=\"text-gold font-bold tracking-widest hover:text-white transition-colors uppercase text-sm border-b border-gold pb-1 inline-block\">\r\n Explore Facilities\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"amenities\" class=\"py-20 relative bg-void\/50\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-gold text-xs tracking-widest uppercase block mb-2\">Premium Facilities<\/span>\r\n <h2 class=\"font-display text-4xl md:text-5xl text-white\">Amenities<\/h2>\r\n <div class=\"w-16 h-1 bg-gradient-to-r from-transparent via-gold to-transparent mx-auto mt-4\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"wifi\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">High-Speed WiFi<\/h3>\r\n <p class=\"text-sm text-gray-400\">Fiber-optic connectivity ensures seamless access to online lectures and research materials.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"wind\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">Air Conditioned<\/h3>\r\n <p class=\"text-sm text-gray-400\">Maintain your cool during intense study sessions with our climate-controlled environment.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"zap\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">Power Backup<\/h3>\r\n <p class=\"text-sm text-gray-400\">Uninterrupted power supply ensures your study schedule is never compromised by outages.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"armchair\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">Ergonomic Seating<\/h3>\r\n <p class=\"text-sm text-gray-400\">Chairs designed for long-duration sitting to prevent fatigue and back pain.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"lock\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">Private Lockers<\/h3>\r\n <p class=\"text-sm text-gray-400\">Secure storage for your books and valuables so you don't have to carry them daily.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"droplet\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">RO Water<\/h3>\r\n <p class=\"text-sm text-gray-400\">Clean, purified drinking water available 24\/7 to keep you hydrated and healthy.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"shield-check\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">CCTV Security<\/h3>\r\n <p class=\"text-sm text-gray-400\">24\/7 surveillance ensures a safe environment, especially for late-night study sessions.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-6 rounded-2xl group hover:bg-white\/5 cursor-pointer gsap-card\">\r\n <div class=\"bg-gold\/10 w-12 h-12 rounded-lg flex items-center justify-center mb-4 group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"newspaper\" class=\"w-6 h-6 text-gold group-hover:text-black\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-2\">News & Papers<\/h3>\r\n <p class=\"text-sm text-gray-400\">Daily newspapers and monthly current affairs magazines available for general studies.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"gallery\" class=\"py-32 bg-void relative overflow-hidden\">\r\n \r\n <div class=\"absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full text-center pointer-events-none opacity-5\">\r\n <span class=\"font-display font-bold text-[20vw] text-white\">LIBRARY<\/span>\r\n <\/div>\r\n\r\n <div class=\"max-w-7xl mx-auto px-4 relative z-10\">\r\n <div class=\"text-center mb-16\">\r\n <span class=\"text-gold text-xs tracking-widest uppercase block mb-2\">Visual Tour<\/span>\r\n <h2 class=\"font-display text-4xl md:text-5xl mb-4\">Life at The Centre<\/h2>\r\n <div class=\"w-24 h-1 bg-gold mx-auto\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"grid md:grid-cols-3 gap-8\">\r\n \r\n <div class=\"group relative h-[500px] overflow-hidden rounded-2xl border border-white\/10 cursor-pointer gsap-card\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0\" alt=\"Group Study\">\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 p-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500\">\r\n <span class=\"text-gold text-xs font-bold tracking-widest uppercase mb-2 block\">Community<\/span>\r\n <h3 class=\"text-2xl font-display font-bold\">Peer Learning<\/h3>\r\n <p class=\"text-gray-400 text-sm mt-2 opacity-0 group-hover:opacity-100 transition-opacity delay-100\">Connect with like-minded aspirants.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"group relative h-[500px] overflow-hidden rounded-2xl border border-gold\/50 cursor-pointer md:-mt-12 shadow-2xl shadow-gold\/10 gsap-card\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\" alt=\"Book Shelves\">\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-80 group-hover:opacity-60 transition-opacity\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 p-8\">\r\n <span class=\"text-gold text-xs font-bold tracking-widest uppercase mb-2 block\">Resources<\/span>\r\n <h3 class=\"text-2xl font-display font-bold\">Vast Library<\/h3>\r\n <p class=\"text-gray-400 text-sm mt-2\">Access to reference books and materials.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"group relative h-[500px] overflow-hidden rounded-2xl border border-white\/10 cursor-pointer gsap-card\" data-tilt>\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0\" alt=\"Deep Focus\">\r\n <div class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/20 to-transparent opacity-80 group-hover:opacity-60 transition-opacity\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 p-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500\">\r\n <span class=\"text-gold text-xs font-bold tracking-widest uppercase mb-2 block\">Atmosphere<\/span>\r\n <h3 class=\"text-2xl font-display font-bold\">Deep Focus<\/h3>\r\n <p class=\"text-gray-400 text-sm mt-2 opacity-0 group-hover:opacity-100 transition-opacity delay-100\">Zero distractions, 100% productivity.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"testimonials\" class=\"py-24 relative\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n <div class=\"flex flex-col md:flex-row justify-between items-end mb-12\">\r\n <div>\r\n <span class=\"text-gold text-xs tracking-widest uppercase block mb-2\">Success Stories<\/span>\r\n <h2 class=\"font-display text-4xl md:text-5xl text-white\">Student Voices<\/h2>\r\n <\/div>\r\n <div class=\"text-right hidden md:block\">\r\n <div class=\"text-gold text-2xl font-bold\">4.9\/5<\/div>\r\n <div class=\"text-xs text-gray-400 uppercase tracking-widest\">Average Rating<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n \r\n <div class=\"glass-panel p-8 rounded-2xl relative gsap-card\">\r\n <div class=\"absolute -top-4 -right-4 bg-gold text-black rounded-full p-2\">\r\n <i data-lucide=\"quote\" class=\"w-6 h-6 fill-current\"><\/i>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 mb-6\">\r\n <div class=\"w-12 h-12 bg-gray-700 rounded-full overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80\" alt=\"Student\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-lg\">Rohan Sharma<\/h4>\r\n <p class=\"text-xs text-gold uppercase tracking-wider\">NEET Aspirant<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed italic\">\"The silence here is exactly what I needed. Distractions at home were killing my productivity. Here, I can study for 8 hours straight without realizing it.\"<\/p>\r\n <div class=\"flex gap-1 mt-4 text-gold\">\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel p-8 rounded-2xl relative mt-0 md:mt-8 gsap-card\">\r\n <div class=\"absolute -top-4 -right-4 bg-gold text-black rounded-full p-2\">\r\n <i data-lucide=\"quote\" class=\"w-6 h-6 fill-current\"><\/i>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 mb-6\">\r\n <div class=\"w-12 h-12 bg-gray-700 rounded-full overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1590650516494-0c8e4a4dd67e?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80\" alt=\"Student\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-lg\">Anjali Singh<\/h4>\r\n <p class=\"text-xs text-gold uppercase tracking-wider\">UPSC CSE<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed italic\">\"Safety was my biggest concern for late-night studies. The CCTV coverage and secure environment at Tuibong Forest Gate make me feel completely safe.\"<\/p>\r\n <div class=\"flex gap-1 mt-4 text-gold\">\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-panel p-8 rounded-2xl relative gsap-card\">\r\n <div class=\"absolute -top-4 -right-4 bg-gold text-black rounded-full p-2\">\r\n <i data-lucide=\"quote\" class=\"w-6 h-6 fill-current\"><\/i>\r\n <\/div>\r\n <div class=\"flex items-center gap-4 mb-6\">\r\n <div class=\"w-12 h-12 bg-gray-700 rounded-full overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1566492031773-4f4e44671857?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80\" alt=\"Student\" class=\"w-full h-full object-cover\">\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-lg\">Vikram L.<\/h4>\r\n <p class=\"text-xs text-gold uppercase tracking-wider\">MPSC Aspirant<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"text-gray-400 leading-relaxed italic\">\"The internet speed is phenomenal. I attend all my live classes here without any buffer. The chairs are also very comfortable for long sitting hours.\"<\/p>\r\n <div class=\"flex gap-1 mt-4 text-gold\">\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <i data-lucide=\"star\" class=\"w-4 h-4 fill-current\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\" class=\"py-20 relative bg-[#0a0a0c]\">\r\n <div class=\"max-w-7xl mx-auto px-4\">\r\n <div class=\"glass-panel rounded-3xl p-8 md:p-12 border-t border-gold\/30 relative overflow-hidden\">\r\n \r\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-gold opacity-5 blur-[120px] rounded-full pointer-events-none\"><\/div>\r\n\r\n <div class=\"grid md:grid-cols-2 gap-12\">\r\n <div>\r\n <h2 class=\"font-display text-4xl font-bold mb-6\">Visit Us<\/h2>\r\n <p class=\"text-gray-400 mb-10\">We invite you to experience the atmosphere yourself. Walk in for a free tour.<\/p>\r\n\r\n <div class=\"space-y-6\">\r\n <div class=\"flex items-start gap-4 group\">\r\n <div class=\"w-12 h-12 rounded-full bg-white\/5 flex items-center justify-center group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"map-pin\" class=\"w-5 h-5\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-bold text-lg\">Location<\/h4>\r\n <p class=\"text-gray-400\">Ultimate Study Centre<br>Tuibong Forest Gate<br>Churachandpur, Manipur 795128<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex items-start gap-4 group\">\r\n <div class=\"w-12 h-12 rounded-full bg-white\/5 flex items-center justify-center group-hover:bg-gold group-hover:text-black transition-all\">\r\n <i data-lucide=\"phone\" class=\"w-5 h-5\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"text-white font-bold text-lg\">Contact<\/h4>\r\n <p class=\"text-gray-400 font-mono\">9873775515<\/p>\r\n <p class=\"text-gray-500 text-sm\">theultimatestudycentre@gmail.com<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-10 pt-10 border-t border-white\/10\">\r\n <h3 class=\"font-display text-2xl font-bold mb-6 text-white\">Book Your Seat<\/h3>\r\n <form action=\"https:\/\/formspree.io\/f\/xqearwop\" method=\"POST\" class=\"space-y-4\">\r\n \r\n <input type=\"hidden\" name=\"_cc\" value=\"theultimatestudycentre@gmail.com\">\r\n <input type=\"hidden\" name=\"_subject\" value=\"New Seat Inquiry - Ultimate Study Centre\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n <input type=\"text\" name=\"name\" placeholder=\"Your Name\" required \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-gold focus:bg-white\/10 transition-all\">\r\n \r\n <input type=\"tel\" name=\"phone\" placeholder=\"Phone Number\" required \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-gold focus:bg-white\/10 transition-all\">\r\n <\/div>\r\n\r\n <input type=\"email\" name=\"email\" placeholder=\"Email Address\" required \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-gold focus:bg-white\/10 transition-all\">\r\n\r\n <select name=\"interest\" required \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-gold focus:bg-white\/10 transition-all appearance-none cursor-pointer\">\r\n <option value=\"\" disabled selected class=\"bg-void text-gray-500\">Select Plan \/ Purpose<\/option>\r\n <option value=\"Monthly Seat\" class=\"bg-void text-white\">Reserve Monthly Seat<\/option>\r\n <option value=\"Center Tour\" class=\"bg-void text-white\">Schedule a Tour<\/option>\r\n <option value=\"General Inquiry\" class=\"bg-void text-white\">General Inquiry<\/option>\r\n <\/select>\r\n\r\n <textarea name=\"message\" rows=\"2\" placeholder=\"Any specific requirements?\" \r\n class=\"w-full bg-white\/5 border border-white\/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-gold focus:bg-white\/10 transition-all resize-none\"><\/textarea>\r\n \r\n <button type=\"submit\" class=\"w-full bg-white text-black font-bold py-4 rounded-xl hover:bg-gold transition-colors shadow-lg hover:shadow-gold\/20 flex items-center justify-center gap-2 group\">\r\n <span>CONFIRM BOOKING<\/span>\r\n <i data-lucide=\"send\" class=\"w-4 h-4 group-hover:translate-x-1 transition-transform\"><\/i>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative rounded-2xl overflow-hidden h-full min-h-[500px] border border-white\/10 group bg-white\/5\">\r\n <iframe \r\n src=\"https:\/\/maps.google.com\/maps?q=Ultimate+Study+Centre+Tuibong+Forest+Gate+Churachandpur+Manipur+795128&t=&z=15&ie=UTF8&iwloc=&output=embed\" \r\n width=\"100%\" \r\n height=\"100%\" \r\n style=\"border:0; min-height: 400px;\" \r\n allowfullscreen=\"\" \r\n loading=\"lazy\" \r\n referrerpolicy=\"no-referrer-when-downgrade\"\r\n class=\"w-full h-full rounded-2xl filter grayscale invert-[.85] contrast-125 hover:filter-none transition-all duration-500 opacity-90 hover:opacity-100\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"border-t border-white\/10 py-12 bg-black text-center md:text-left\">\r\n <div class=\"max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6\">\r\n <div>\r\n <h3 class=\"font-display font-bold text-lg text-white tracking-widest mb-1\">ULTIMATE<\/h3>\r\n <p class=\"text-xs text-gray-500\">STUDY CENTRE<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex gap-8 text-xs font-bold tracking-widest text-gray-500\">\r\n <a href=\"#\" class=\"hover:text-gold transition-colors\">HOME<\/a>\r\n <a href=\"#about\" class=\"hover:text-gold transition-colors\">ABOUT<\/a>\r\n <a href=\"#amenities\" class=\"hover:text-gold transition-colors\">AMENITIES<\/a>\r\n <a href=\"#gallery\" class=\"hover:text-gold transition-colors\">GALLERY<\/a>\r\n <a href=\"#contact\" class=\"hover:text-gold transition-colors\">CONTACT<\/a>\r\n <\/div>\r\n\r\n <div class=\"text-gray-700 text-xs\">\r\n © 2024 Ultimate Study Centre.\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <script>\r\n \/\/ 1. Initialize Lucide Icons\r\n lucide.createIcons();\r\n\r\n \/\/ 2. Custom Cursor Logic\r\n const cursorDot = document.querySelector('.cursor-dot');\r\n const cursorOutline = document.querySelector('.cursor-outline');\r\n\r\n if (window.matchMedia(\"(min-width: 768px)\").matches) {\r\n window.addEventListener('mousemove', (e) => {\r\n const posX = e.clientX;\r\n const posY = e.clientY;\r\n\r\n \/\/ Dot follows instantly\r\n cursorDot.style.left = `${posX}px`;\r\n cursorDot.style.top = `${posY}px`;\r\n\r\n \/\/ Outline follows with delay (animation in CSS or via animate)\r\n cursorOutline.animate({\r\n left: `${posX}px`,\r\n top: `${posY}px`\r\n }, { duration: 500, fill: \"forwards\" });\r\n });\r\n \r\n \/\/ Hover states for cursor\r\n document.querySelectorAll('a, button').forEach(el => {\r\n el.addEventListener('mouseenter', () => {\r\n cursorOutline.style.width = '60px';\r\n cursorOutline.style.height = '60px';\r\n cursorOutline.style.borderColor = '#fff';\r\n });\r\n el.addEventListener('mouseleave', () => {\r\n cursorOutline.style.width = '40px';\r\n cursorOutline.style.height = '40px';\r\n cursorOutline.style.borderColor = 'rgba(212, 175, 55, 0.5)';\r\n });\r\n });\r\n }\r\n\r\n \/\/ 3. Mobile Menu Toggle\r\n function toggleMobileMenu() {\r\n const menu = document.getElementById('mobile-menu');\r\n if (menu.classList.contains('hidden')) {\r\n menu.classList.remove('hidden');\r\n menu.style.display = 'flex';\r\n setTimeout(() => menu.style.opacity = '1', 10);\r\n document.body.style.overflow = 'hidden';\r\n } else {\r\n menu.style.opacity = '0';\r\n setTimeout(() => {\r\n menu.classList.add('hidden');\r\n menu.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }, 300);\r\n }\r\n }\r\n\r\n \/\/ 4. Three.js Background (Enhanced Constellation)\r\n const initThreeJS = () => {\r\n const container = document.getElementById('canvas-container');\r\n const scene = new THREE.Scene();\r\n scene.fog = new THREE.FogExp2(0x050507, 0.002);\r\n\r\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\r\n camera.position.z = 5;\r\n\r\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n renderer.setPixelRatio(window.devicePixelRatio);\r\n container.appendChild(renderer.domElement);\r\n\r\n \/\/ Particles\r\n const geometry = new THREE.BufferGeometry();\r\n const count = 1000;\r\n const positions = new Float32Array(count * 3);\r\n const colors = new Float32Array(count * 3);\r\n\r\n for(let i = 0; i < count * 3; i++) {\r\n positions[i] = (Math.random() - 0.5) * 20; \/\/ Spread out\r\n colors[i] = Math.random(); \/\/ Gradient factor\r\n }\r\n\r\n geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\r\n geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\r\n\r\n const material = new THREE.PointsMaterial({\r\n size: 0.03,\r\n color: 0xd4af37,\r\n transparent: true,\r\n opacity: 0.8,\r\n sizeAttenuation: true\r\n });\r\n\r\n const particles = new THREE.Points(geometry, material);\r\n scene.add(particles);\r\n\r\n \/\/ Animation Loop\r\n const animate = () => {\r\n requestAnimationFrame(animate);\r\n particles.rotation.y += 0.001;\r\n particles.rotation.x += 0.0005;\r\n renderer.render(scene, camera);\r\n };\r\n animate();\r\n\r\n \/\/ Resize\r\n window.addEventListener('resize', () => {\r\n camera.aspect = window.innerWidth \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth, window.innerHeight);\r\n });\r\n };\r\n \r\n initThreeJS();\r\n\r\n \/\/ 5. GSAP Animations\r\n window.addEventListener('load', () => {\r\n \/\/ Remove Loader\r\n const loader = document.getElementById('loader');\r\n gsap.to(loader, { opacity: 0, duration: 1, onComplete: () => loader.style.display = 'none' });\r\n\r\n \/\/ Hero Animation\r\n gsap.to(\".gsap-hero\", {\r\n opacity: 1,\r\n y: 0,\r\n duration: 1.2,\r\n stagger: 0.15,\r\n ease: \"power3.out\",\r\n delay: 0.5\r\n });\r\n\r\n \/\/ Counters (Simple JS implementation triggered by GSAP)\r\n const counters = document.querySelectorAll('.counter');\r\n counters.forEach(counter => {\r\n const target = +counter.getAttribute('data-target');\r\n gsap.to(counter, {\r\n scrollTrigger: {\r\n trigger: counter,\r\n start: \"top 85%\",\r\n },\r\n innerHTML: target,\r\n duration: 2,\r\n snap: { innerHTML: 1 },\r\n ease: \"power2.out\"\r\n });\r\n });\r\n\r\n \/\/ Fade Right\r\n gsap.utils.toArray('.gsap-fade-right').forEach(el => {\r\n gsap.from(el, {\r\n scrollTrigger: { trigger: el, start: \"top 85%\" },\r\n x: -50, opacity: 0, duration: 1, ease: \"power3.out\"\r\n });\r\n });\r\n\r\n \/\/ Fade Left\r\n gsap.utils.toArray('.gsap-fade-left').forEach(el => {\r\n gsap.from(el, {\r\n scrollTrigger: { trigger: el, start: \"top 85%\" },\r\n x: 50, opacity: 0, duration: 1, ease: \"power3.out\"\r\n });\r\n });\r\n \r\n \/\/ Cards Stagger\r\n gsap.utils.toArray('.gsap-card').forEach((el, i) => {\r\n gsap.from(el, {\r\n scrollTrigger: { trigger: el, start: \"top 90%\" },\r\n y: 50, opacity: 0, duration: 0.8, delay: i * 0.1, ease: \"back.out(1.7)\"\r\n });\r\n });\r\n });\r\n\r\n \/\/ 6. Vanilla Tilt Init\r\n VanillaTilt.init(document.querySelectorAll(\"[data-tilt]\"), {\r\n max: 15,\r\n speed: 400,\r\n glare: true,\r\n \"max-glare\": 0.2,\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ultimate Study Centre | The Sanctuary LOADING ULTIMATE Study Centre HOME ABOUT AMENITIES GALLERY REVIEWS ADMIN JOIN US Home About Amenities Gallery Reviews Admin Login Contact Admissions Open 2024 Unlock Your Potential A dedicated sanctuary in Churachandpur designed for serious aspirants. We provide the silence, resources, and environment you need to succeed. Book Your Seat […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":17,"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/ultimatestudycentre.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}