A modern, educational platform for Indian Army aspirants featuring comprehensive training resources, fitness guides, eligibility checkers, and inspirational content.
- Background: Pure black (
bg-black) - Text: Soft white/gray (
text-gray-100,text-gray-300) - Accent Color: Emerald green (
emerald-500,emerald-600) - Glassmorphism:
bg-white/5,backdrop-blur-xl,border-white/10
- Headings: Bold, white text
- Body: Gray-300 for readability
- Accents: Emerald-200/400 for highlights
- Sticky navigation bar with backdrop blur
- Logo: "Indian Army Hub"
- Main nav links: Home, Ranks & Badges, Training Programs, Fitness, Weapons, Stories, Regiments, Gallery, Events, Join Army, About, Help
- Right side: Login link + Register button
- Mobile: Hamburger menu with full-screen overlay
- Features: Framer Motion hover animations, responsive design
- Three-column layout
- Hub description
- Quick links grid
- Social media placeholders
- Copyright text
- Styling: Dark glass theme with subtle borders
- Reusable page header component
- Props:
title,subtitle,tag(optional) - Usage: Used across all content pages
- Styling: Tag badge, large title, descriptive subtitle
- Original 3D canvas hero (now replaced with video background)
- Three main sections: Training & Fitness, Learn & Prepare, Motivation & Community
- Glassmorphism cards with icons
- Hover animations (scale + glow)
- Links to respective pages
- Icons: Lucide React icons
- Floating button appears after scrolling 300px
- Smooth scroll to top functionality
- Framer Motion animations (fade in/out, scale)
- Position: Fixed bottom-right
- Styling: Emerald button with shadow
- Hero Section: Full-screen video background (
/bg.mp4)- Auto-play, muted, loop
- Dark gradient overlay
- Centered content: "Train. Serve. Lead."
- Two CTAs: "Explore Training Programs", "Check Eligibility"
- Framer Motion fade-in animations
- Feature Sections: Three main category cards below hero
- Filter tabs: All, Officers, JCO, Other Ranks
- Grid of rank cards (17 ranks total)
- Each card: Name, level badge, description, badge placeholder
- Features: Filter functionality, hover animations, color-coded badges
- Program cards: NDA Prep, CDS Exam, OTA Training, Physical Bootcamp, SSB Prep, Field Craft
- Each card: Difficulty, duration, focus (mental/physical/tactical), progress bar
- Timeline Section: "Journey of a Cadet" - 6 steps from Application to Commissioning
- Features: Progress visualization, status indicators
- Six routine sections: Warm-up, Running, Strength, Flexibility, Recovery, Nutrition
- Each section: Recommended exercises, tips
- Weekly Plan: 7-day grid with daily focus and duration
- Features: Exercise lists, tip cards, weekly schedule
- Grid of weapon cards: INSAS, AK-203, LMG, Pistol, Sniper, RPG-7
- Each card: Name, type, range, description
- Side Panel Modal: Opens on click with detailed specs
- Caliber, weight, rate of fire, effective range, features
- Safety notice
- Features: Click-to-expand, smooth animations
- Story cards with title, regiment, author, date, summary
- Filter Dropdown: Filter by regiment (UI only)
- Modal: "Read Story" button opens full story text
- 6 stories with categories: Combat, Leadership, Rescue, Training
- Features: Dropdown filter, expandable modals, category badges
- Regiment cards: Rajput, Sikh, Gorkha, Maratha Light Infantry, Jat, Garhwal Rifles
- Each card: Name, founding year, motto, history, key battles
- Horizontal Timeline: Historical events from 1778-1999
- Features: Color-coded cards, battle timelines, historical milestones
- Tabs: Photos | Videos toggle
- Photo Grid: 12 placeholder images with gradients, category badges
- Video Cards: 8 videos with thumbnails, play icon, duration, title
- Features: Tab switching, responsive grid, hover effects
- Contact Form: Name, Email, Phone, Preferred Program dropdown, Message
- Form validation and success state
- Location Card: Map placeholder, address, phone, email
- Response Time Info: "We respond within 24-48 hours" notice
- Features: Form handling, success feedback, map placeholder
- Eligibility Sections: Age, Education, Nationality, Physical Standards
- Interactive Checklist: Clickable options with visual feedback
- Real-time Results: Shows eligible programs (NDA/CDS/OTA) based on selections
- Physical Standards Card: Height, weight, chest, vision, running requirements
- Features: Real-time eligibility calculation, visual feedback
- Event cards: 8 events (bootcamps, webinars, workshops)
- Each card: Date, time, location, level, type (Online/Offline), description
- Tags: Online/Offline badges, Beginner/Intermediate/Advanced level badges
- Register Button: Toggle functionality, shows "Registered" state
- Capacity tracking: Shows registered/capacity counts
- Features: Registration toggle, full event handling, calendar info
- Mission Section: Purpose and goals of the hub
- Disclaimer: Important notice about unofficial status
- Core Values: Courage, Honor, Commitment (3 value cards)
- What We Offer: Grid of services
- Features: Comprehensive information, disclaimer, value cards
- Accordion FAQ: 10 frequently asked questions
- Framer Motion open/close animations
- Topics: Hub purpose, data accuracy, training usage, fitness, eligibility, events, navigation, weapons, contact, pricing
- Additional Help: Contact CTA at bottom
- Features: Smooth accordion animations, comprehensive Q&A
- Auth (
/auth): Authentication page template - Dashboard (
/dashboard): Dashboard page template
- Scroll-based reveals
- Hover effects (scale, glow)
- Modal transitions
- Accordion animations
- Page transitions
- Mobile-first approach
- Breakpoints:
sm:,lg:,xl: - Grid layouts adapt from 1 → 2 → 3 columns
- Mobile hamburger menu
- Touch-friendly buttons
- Forms with validation
- Dropdowns and filters
- Modals and side panels
- Accordions
- Registration toggles
- Eligibility checker
- Next.js 16.0.7: React framework
- React 19.2.0: UI library
- TypeScript: Type safety
- Tailwind CSS 4: Utility-first CSS
- tw-animate-css: Animation utilities
- framer-motion: Animation library
- lucide-react: Icon library
- @react-three/fiber: 3D rendering
- @react-three/drei: 3D helpers
- three: 3D library
client/
├── app/
│ ├── (root)/
│ │ ├── about/
│ │ ├── auth/
│ │ ├── contact/
│ │ ├── dashboard/
│ │ ├── events/
│ │ ├── fitness-guide/
│ │ ├── gallery/
│ │ ├── help/
│ │ ├── join-army/
│ │ ├── ranks-badges/
│ │ ├── regiments-history/
│ │ ├── stories/
│ │ ├── training-programs/
│ │ ├── weapons-awareness/
│ │ ├── layout.tsx
│ │ └── page.tsx (home)
│ ├── globals.css
│ └── layout.tsx (root layout)
├── components/
│ ├── FeatureSections.tsx
│ ├── Footer.tsx
│ ├── Hero.tsx (legacy)
│ ├── Navbar.tsx
│ ├── PageHeader.tsx
│ ├── ScrollToTop.tsx
│ └── ui/
│ └── navigation-menu.tsx
├── public/
│ ├── bg.mp4 (hero video)
│ └── Assets/
│ └── IA.png
└── package.json
className="rounded-2xl border border-white/10 bg-white/5 p-6 shadow-lg backdrop-blur-xl ring-1 ring-white/5"whileHover={{ scale: 1.02, y: -4 }}className="mx-auto flex w-full max-w-6xl flex-1 px-4 pb-16 pt-6 sm:px-6 lg:px-8"- Primary:
bg-emerald-600 hover:bg-emerald-700 - Secondary:
border border-white/10 bg-white/5 hover:bg-white/10 - Success:
bg-emerald-500/20 text-emerald-200
- Create folder in
app/(root)/[page-name]/ - Add
page.tsxwith PageHeader component - Use consistent container classes
- Add to Navbar links if needed
- Create in
components/folder - Use "use client" if using hooks/animations
- Follow glassmorphism styling
- Add Framer Motion animations
- Use Tailwind utility classes
- Maintain dark theme consistency
- Use emerald for accents
- Add hover states for interactivity
- Ensure mobile responsiveness
- All data is currently static (arrays in page files)
- Forms are UI-only (no backend integration)
- Modals and dropdowns use local state
- Video background uses
/bg.mp4from public folder - Favicon should be added to
/public/favicon.ico - Metadata configured in root layout
- ✅ Global dark theme with glassmorphism
- ✅ Responsive navigation with mobile menu
- ✅ Full-screen video hero
- ✅ 12 content pages with rich UI
- ✅ Interactive elements (forms, modals, accordions)
- ✅ Smooth animations throughout
- ✅ Scroll to top button
- ✅ Consistent design system
- ✅ SEO metadata
- ✅ Accessibility considerations
Last Updated: December 2024