🛕 Vishwaguru: The Divine Blueprint

🌍 View Live Website • 💻 View Source Code

Vishwaguru is an immersive, cinematic web experience dedicated to preserving and showcasing the profound heritage of India's ancient temples, sacred narratives, and classical arts. Built with modern web technologies, it blends deep historical wisdom with cutting-edge UI/UX design.

✨ Key Features

• Cinematic Dark Mode UI: A premium, glassmorphic design system utilizing deep blacks, slate grays, and glowing cosmic orange accents.
• Scroll-Triggered Animations: Smooth, hardware-accelerated scroll animations powered by GSAP and ScrollTrigger, bringing stories and architecture to life as the user scrolls.
• Dynamic Routing: Seamless navigation using Next.js App Router for deep-diving into specific temple details, sacred stories, and classical dances.
• Interactive Data Filtering: A custom, glass-styled masonry grid that allows users to instantly filter ancient temples by category (UNESCO, Jyotirlinga, Char Dham, etc.).
• State Preservation: Engineered with native browser history APIs and session storage to ensure users never lose their scroll position when navigating back from a deep dive.

🛠️ Tech Stack

• Framework: Next.js (React) utilizing the App Router
• Styling: Tailwind CSS
• Animations: GSAP (GreenSock Animation Platform) & Framer Motion
• Data Handling: Local JSON architecture for ultra-fast, static data delivery

🗺️ Project Structure

vishwaguru/
├── app/
│   ├── components/
│   │   ├── Navbar.jsx        # Glassmorphic, framer-motion mobile menu
│   │   └── Footer.jsx        # Premium dark-mode footer
│   ├── stories/
│   │   ├── page.jsx          # Sacred Narratives & Epics hub
│   │   └── [id]/page.jsx     # Dynamic story detail pages
│   ├── dance/
│   │   ├── page.jsx          # The Cosmic Dance & Natya Shastra
│   │   └── [id]/page.jsx     # Dynamic classical dance pages
│   ├── temple/
│   │   └── [id]/page.jsx     # Deep dive into temple architecture
│   ├── layout.js             # Root layout with global fonts and Navbar/Footer
│   └── page.js               # Home page (Hero, About, Temple Showcase)
├── public/                   # Static assets (Images, Fonts)
└── templesData.json          # Main database for site content

🚀 Getting Started

To run this project locally on your machine:

1. Clone the repository:

   git clone https://github.com/krishnasai89/Temples_Site.git

2. Navigate into the directory:

   cd Temples_Site

3. Install the dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open your browser: Navigate to http://localhost:3000 to see the application running.

🎨 Design Philosophy (The Yantra)

In Indian classical tradition, the concept of Yantra refers to sacred geometry representing the cosmos. This website was designed with that same philosophy:

• Symmetry: Grid layouts and flex containers are mathematically balanced.
• Motion: Animations are eased and staggered to mimic the rhythm of classical dance.
• Depth: Drop shadows, backdrop blurs, and gradient overlays create a sense of multi-dimensional space, much like walking into the sanctum of an ancient temple.

👨‍💻 Author Designed and developed by Krishna Sai.

GitHub: @krishnasai89

📜 License

This project is licensed under the MIT License - see the LICENSE.md file for details.