InstituteFlow – Education & Online Course NextJS Template

InstituteFlow is a premium, multi-concept template built with
Next.js 16 (App Router), React 19 and
TypeScript — engineered for online education, e-learning
platforms, and educational institutions. With
10 unique homepage concepts — Course Platform, E-Learning
Hub, Course Marketplace, Instructor Profile, Distance Learning, Language
School, Kindergarten, Business Coach, Cooking Academy, and Health Coaching —
InstituteFlow gives you a production-ready foundation to launch a stunning,
high-performance education website right out of the box.

Built on the Next.js App Router with
React Server Components, styled with a modular
SCSS architecture, and animated with
GSAP, InstituteFlow ships fully SEO-optimized —
per-page metadata, sitemap.xml, robots.txt, JSON-LD
structured data, and a PWA web manifest — for a fast, search-friendly,
pixel-perfect experience on every device.

Requirements

• Node.js 18.18+ (Node 20 LTS recommended)
• npm — run npm install then npm run dev / npm run build
• Basic knowledge of Next.js / React is helpful for customization

10 Unique Demo Concepts

• Demo 1 – Course Platform: Full-featured online course platform with course listings, filters, and enrollment flow
• Demo 2 – E-Learning Hub: Modern e-learning hub with video lessons, instructors, and a student-dashboard feel
• Demo 3 – Course Marketplace: Multi-instructor marketplace layout with category browsing and featured courses
• Demo 4 – Instructor Profile: Single-instructor personal brand site with bio, courses, and testimonials
• Demo 5 – Distance Learning: Remote and online learning layout with flexible study options
• Demo 6 – Language School: Language institution design with class schedules and programs
• Demo 7 – Kindergarten: Colorful, child-friendly school website — includes a full 9-page sub-theme
• Demo 8 – Business Coach: Professional coaching and mentoring website with personal-branding focus
• Demo 9 – Cooking Academy: Culinary course site with recipes, instructors, and class booking
• Demo 10 – Health Coaching: Health, fitness, and wellness coaching platform with programs and scheduling

Key Features

Scale & Content

• 10 Unique Homepage Designs – Covering every major education & e-learning niche out of the box
• 40+ Inner Pages – Every essential page a complete education website needs
• 50+ Total Pages – Across all 10 demo concepts combined
• 300+ Unique UI Elements – Process steps, icon boxes, testimonials, pricing tables, progress bars, tabs, team members, forms, and much more
• Kindergarten Sub-Theme – A complete 9-page child-friendly sub-site with its own style and color scheme

Next.js & Performance

• Next.js 16 App Router – Modern file-based routing with route groups and nested layouts
• React Server Components – Server-rendered by default for minimal client JavaScript and fast loads
• TypeScript (strict) – Fully typed, safer, and easier to maintain
• SEO Ready – Per-page metadata (title, description, Open Graph, Twitter, canonical), sitemap.xml and robots.txt
• JSON-LD Structured Data – Organization & WebSite schema for richer search results
• PWA Web Manifest – Installable, with theme color and icons
• Self-Hosted Google Fonts – Loaded via next/font with zero layout shift and no external font requests
• Error Handling – Styled 404, route error boundary, and global error boundary
• Single-File Configuration – Brand, URL, contact, and social details centralized in one siteConfig file

Animation & Interactions

• GSAP Animation Suite – Scroll-triggered reveals, shape movement, and timeline-based sequences
• GSAP SplitText Title Animations – Character/word stagger and cinematic heading reveals
• GSAP ScrollSmoother – Ultra-smooth native-feel scrolling integrated with ScrollTrigger
• Directional Fade-In Animations – Top / left / bottom / right scroll reveals with configurable offset, delay, and duration via data attributes
• Animated Counters – Number counters with scroll trigger (CounterUp2 & Odometer)
• Tilt Effects – Subtle interactive tilt on cards and thumbnails (Vanilla Tilt)
• Video Modal – YouTube lightbox with autoplay on open and auto-stop on close
• Marquee Ticker – Infinite scrolling element tickers with configurable speed and direction

Framework & Architecture

• Bootstrap 5 Grid – Mobile-first responsive grid and utilities
• React-Bootstrap Components – Accessible interactive components (e.g. FAQ accordions)
• Modular SCSS Architecture – Split into abstracts, base, layout, components, and sections — easy to customize and extend
• Swiper Slider – Touch-friendly, GPU-accelerated carousels and auto-scroll sliders
• Proven jQuery Plugins – Magnific Popup (lightbox), Nice Select (dropdowns), and MeanMenu (mobile navigation) integrated cleanly on the client

Education-Specific Pages

• Course Management – 3 course grid layouts, sidebar-left, sidebar-right listings, and 3 course-detail styles (8 pages total)
• Instructor Pages – Two instructor listing styles, instructor detail page, and a Become a Mentor application page
• Event Pages – Event grid listing with scheduling info and a full event-detail page
• Auth & Profile Pages – Login, Sign-up, and User Profile pages

General Pages

• Blog Pages – Standard, 2-column, and 3-column listings, plus blog details with left sidebar, right sidebar, and standard styles (6 pages total)
• Shop & E-Commerce – Shop listing, product detail, cart, and checkout pages with category and price-range filtering
• About, Pricing, FAQ & Contact – All essential business pages, ready to customize
• 404 Error Page – Styled error page matching the template’s design language

UI Components & Icons

• Material Symbols – Google Material Symbols (Outlined, Rounded, Sharp) with fill, weight, and size utility classes
• Font Awesome – Full icon library included
• Magnific Popup – Responsive lightbox for images and inline content
• Nice Select – Styleable, enhanced select inputs

Typography

• Google Fonts via next/font – Mona Sans, DM Sans, Playfair Display, Instrument Serif & Forum, self-hosted for performance
• CSS Variable Typography System – Font sizes (h1–h6 and custom scales) and families managed via CSS custom properties

Quality & Standards

• Fully Responsive – Pixel-perfect on Desktop, Laptop, Tablet, and Mobile
• Retina Ready – Crisp on high-density screens; WebP-optimized images
• Cross-Browser Compatible – Tested on Chrome, Firefox, Safari, Edge, and Opera
• Strict TypeScript & Clean ESLint – Zero lint warnings, type-safe, production-grade code
• Well-Commented Code – Clear structure and easy navigation
• Custom CSS Variable Design System – Colors, spacing, breakpoints, and typography controlled from a single _variables.scss file

Support & Updates

• Detailed Documentation – Step-by-step setup, customization, and component-usage guide included
• Free Updates – Ongoing improvements and new features
• Dedicated Support – Submit a ticket at pixavation — maximum 24-hour response time

Full Page List (50+ Pages)

Home Demos (10 Pages)

• Home – Course Platform
• Home – E-Learning Hub
• Home – Course Marketplace
• Home – Instructor Profile
• Home – Distance Learning
• Home – Language School
• Home – Kindergarten
• Home – Business Coach
• Home – Cooking Academy
• Home – Health Coaching

Course Pages (8 Pages)

• Courses Grid V1
• Courses Grid V2
• Courses Grid V3
• Courses – Sidebar Left
• Courses – Sidebar Right
• Course Details Classic V1
• Course Details Classic V2
• Course Details Classic V3

Instructor Pages (5 Pages)

• Instructors V1
• Instructors V2
• Instructor Details
• Become a Mentor
• User Profile

Blog Pages (6 Pages)

• Blog Standard
• Blog Two Column
• Blog Three Column
• Blog Details – Standard
• Blog Details – Left Sidebar
• Blog Details – Right Sidebar

Event Pages (2 Pages)

• Event Grid
• Event Details

Shop / E-Commerce Pages (4 Pages)

• Shop
• Shop Details
• Cart
• Checkout

General Pages (6 Pages)

• About V1
• Pricing
• FAQ
• Contact
• Login
• Sign Up

Utility Pages (1 Page)

• 404 Error Page

Kindergarten Sub-Theme (9 Pages)

• Kindergarten Home
• Kindergarten About
• Kindergarten Courses
• Kindergarten Course Details
• Kindergarten Contact
• Kindergarten FAQ
• Kindergarten Teachers
• Kindergarten Teacher Details
• Kindergarten 404

Tech Stack & Libraries

• Next.js 16 (App Router)
• React 19
• TypeScript
• SCSS (modular architecture)
• Bootstrap 5 & React-Bootstrap
• GSAP (ScrollTrigger, ScrollSmoother, SplitText)
• Swiper Slider
• jQuery + Magnific Popup, Nice Select & MeanMenu
• CounterUp2 & Odometer (animated counters)
• Vanilla Tilt
• Animate.css
• Font Awesome & Google Material Symbols
• Google Fonts via next/font – Mona Sans, DM Sans, Playfair Display, Instrument Serif & Forum

Ideal For

• Online Course Platforms & LMS Websites
• E-Learning Hubs & Virtual Classrooms
• Course Marketplaces & Education Portals
• Individual Instructors & Tutors
• Distance & Remote Learning Programs
• Language Schools & Language Learning Apps
• Kindergartens, Primary & Secondary Schools
• Business Coaches & Mentoring Services
• Cooking Academies & Culinary Schools
• Health, Fitness & Wellness Coaches
• Universities & Educational Institutions
• Any Education or Training Business

Files Included

• Complete Next.js Project Source (App Router)
• TypeScript Source Files
• Modular SCSS Source Files
• JavaScript & Component Files
• Image & Icon Assets (WebP optimized)
• Font Awesome Webfonts
• Documentation

Support

If you have any questions or need help with customization, please visit our
support center at
Pixavation.
We aim to respond to all inquiries within a maximum of 24 hours.

Note

• Images used in the live preview are for demonstration purposes only and are not included in the download package.
• If you need the demo images, please contact our support team.

Changelog

v1.0.0 – Initial Release

• 10 unique homepage demo concepts
• 50+ pages across all demo concepts
• Next.js 16 App Router + React 19 + TypeScript
• Full modular SCSS source included
• GSAP animation system (ScrollTrigger, ScrollSmoother, SplitText)
• SEO ready – metadata, sitemap.xml, robots.txt, JSON-LD, PWA manifest
• Kindergarten 9-page sub-theme included
• WebP-optimized image assets

The post InstituteFlow – Education & Online Course NextJS Template first appeared on MasterTemplate.