Hunar Bazar NextJS

A beautiful gallery showcasing traditional Pashto paintings with an interactive user experience. Built using Next.js, this project features animated cards, navigation controls, and smooth transitions to provide an engaging interface.

Features

• Interactive 3D Cards: Hover and click effects to view detailed images and descriptions.
• Navigation Controls: Next and Previous buttons to browse through the gallery.
• Responsive Design: Seamless viewing experience across different devices.
• Dynamic Backgrounds: Each card features a unique painting background with descriptive overlays.

Technologies Used

• Next.js: React framework for server-rendered applications.
• React: JavaScript library for building user interfaces.
• CSS Modules: Scoped CSS for styling components.
• ImageKit: Image CDN and optimization.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/pashto-paintings-gallery.git
   
   

🔑Key Features

• 📄 7+ Pre-Designed Pages
• 🚀 Google Page Speed score 100! (Desktop)
• 🎨 Tailwind CSS
• 🌍 SEO-Friendly
• 📱 100% Responsive Design
• ✉️ Supports Contact Form
• 📊 Google Analytics support
• 💬 Disqus Comment Support
• 🖼️ Custom Logo Support
• 👥 Multi-Author
• 🌐 Semantic HTML Document Structure
• 🎨 Includes All SCSS Files
• 🌅 Image Optimized With Next/image
• 🎨 Color and fonts variable in the config file
• 📚 Related Posts Suggestion
• ✏️ MDX Support with many built-in custom components

📄 7+ Pre-Designed Pages

• 🏠 Home Page
• ℹ️ About Page
• 📞 Contact Page
• 🎨 Elements Page
• 🔒 Terms and Condition Page
• 📚 Blog Page
• 📝 Blog Single Page

⚙️Installation

After downloading the template, you have some prerequisites to install. Then you can run it on your localhost. You can view the package.json file to see which scripts are included.

🔧Install prerequisites (once for a machine)

• Node Installation: Install node js [Recommended LTS version]

🖥️Local setup

After successfully installing those dependencies, open this template with any IDE [VS Code recommended], and then open the internal terminal of IDM [vs code shortcut ctrl/cmd+`]

• Install dependencies

npm install

• Run locally

npm run dev

After that, it will open up a preview of the template in your default browser, watch for changes to source files, and live-reload the browser when changes are saved.

🏗️Production Build

After finishing all the customization, you can create a production build by running this command.

npm run build

Hasan