This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
"Where employees go to get things done."

Inspired by Axero's core principles—Productivity, Collaboration, Beautiful UI, People-Centric Design, and Instant Access to Information—this intranet homepage brings together purpose, aesthetics, and smart interactivity.

What I Built

🌟 Main Features Overview
🎯1. Smart Navigation & UX

• Sticky Tab Navigation that follows the user as they scroll.

Keyboard Shortcuts for instant access:

• ⌘+H – HR Portal
• ⌘+I – IT Help Desk
• ⌘+T – Timesheets

• ⌘+S – Team Chat

• Notification Badges for unread announcements or messages.

• Animated Active Tab Indicators and toast notifications.

🗂️ Interactive Core Tabs
📅 2. Events Tab

• "Plan, RSVP, and participate with ease."
• RSVP-enabled interactive event cards with hover details.
• Advanced filtering by type: Meetings, Lunches, Hackathons, Holidays.
• Real-time search with suggestions.
• Event creation modal + notification system.

👥 3. Teams Tab

• "Know your people. Celebrate them."
• Expandable team member profiles with click-to-reveal contact info.
• Department filters and search.
• Work anniversary trackers and online/offline status indicators.
• “Connect” and “Message” buttons with animations.

📁 4. Resources Tab

• "Everything you need. Instantly."
• Downloadable documents with rating system.
• Bookmark functionality using localStorage.
• Sorting by name, downloads, rating, date.
• Category and tag filters.

📢 5. Announcements Tab

• "Stay informed, stay ahead."
• Priority levels: Urgent, High, Medium, Low.
• Visual indicators for read/unread.
• Like/comment system.
• Search + category filter.
• “Mark as Read” notifications.

⭐ 6. Highlights Tab

• "Capture moments that matter."
• Achievements, milestones, and news in visual cards.
• Masonry layout for a beautiful gallery effect.
• Persistent like/bookmark features.
• Sharing and reactions.

🎮7. Interactive Games Tab: Gamified Learning Center

🧠 Company Trivia Game

• Timed Q&A with:
• Score tracking
• Global leaderboard
• Confetti for high scores
• Progress indicators and question explanations

🧩 Memory Challenge

• Classic card matching gameplay.
• Score, move counter, reset.
• LocalStorage for personal score tracking.
• Confetti celebration on completion.
• Bonus: Global leaderboard for friendly competition!

🔋 Enhanced Interactivity & Persistence

• Real-time Feedback: Toasts, micro-interactions, hover states.
• Confetti Animations: For achievements and game completions.
• LocalStorage Integration:
• Bookmarks, likes
• Announcements read status
• Game scores
• Mood check-in data

💼Axero Signature Widgets

🏆 8. Team Spotlight (Axero Core Feature)

• "Celebrate excellence and foster culture."
• Employee of the Month (e.g. Sarah Chen – Senior Developer, Engineering)
• Click to appreciate (heart or kudos system)
• Highlights major contributions (e.g. “Outstanding performance in Q4 2024”)

📈 9. Project Dashboard

• "Track progress. Deliver with confidence."
• Projects with:
• Status indicators (active, overdue)
• Due dates and percentage completion
• Assigned team member avatars

Examples:

• Customer Portal v2.0 – 75%
• Mobile App Redesign – 45%
• API Security Audit – 90%, Overdue

💬 10. Daily Check-in & Leadership Corner
"Prioritize mental wellbeing. Hear from leadership."

• Daily Mood Check-in: Emoji-based (Happy, Okay, Stressed)
• Personalized response messages - Stored in localStorage for trend tracking
• Tip card: "Regular check-ins help us improve your work experience."
• Leadership Corner:
• Weekly message from CEO/Managers

Example:

“Excited to announce our Q4 results exceeded expectations! Thank you all for your incredible dedication.”
– Jennifer Walsh, CEO

🎯 Principle of the Day

• "Be Customer-Obsessed: Every decision should benefit our customers first."
• Auto-rotating display of Axero’s core principles.
• Smooth transitions every 10 seconds using JS.

💌 Kudos Wall

• "Shoutouts that shape culture."
• Peer-to-peer appreciation board
• Like system (❤️)
• Timestamped kudos with sender & receiver cards

Demo

• Live Demo

Explore the full interactive intranet experience here: Link

Shreya111111 / Intranet1

🎯 9-to-Alive: The Intranet Homepage Reinvented with Axero’s Vision

Welcome to Office Haven — a modern, people-first digital workspace crafted to elevate team collaboration, boost morale, and make workdays more intuitive, engaging, and productive.

🌐 Live Demo: Check it out on Netlify!

💡 Features at a Glance

🔧 Feature	📝 Description
📅 Live Events	RSVP-enabled event tiles with countdowns & speaker highlights.
🧠 Knowledge Center	Searchable documentation, team resources, and SOPs.
🎮 Gamification Hub	Badge rewards, levels, and XP-based interactions.
🌈 Mood Check-ins	Anonymous emoji-based status updates to support mental wellness.
🌟 Team Spotlights	Auto-rotating member highlights to boost morale and visibility.
📢 Announcement Carousel	Company-wide updates in a rotating banner format.
🔍 Quick Links Panel	Instant access to HR tools, payroll, IT support, and more.
📈 Productivity Dashboard	Track daily goals, completed tasks, and focus timers.
🤝 Collaboration Feed	Shout-outs, polls, and quick wins posted by the team.

…

View on GitHub

Journey

Designing Office Haven was an exciting opportunity to reimagine what a modern intranet could be. I focused on combining Axero’s core principles with engaging interactivity, ensuring a people-first experience that’s both functional and fun. From implementing 📅 live RSVP-enabled events to building a 🎮 gamified center and 😊 mood check-ins, each feature was crafted to promote productivity and culture. The result is a digital workspace that feels alive, intuitive, and truly collaborative.

🛠️ My process began with deep research into Axero’s core values and product philosophy, which helped guide every 🧩 design and interaction choice. I 🧾 wireframed the layout to prioritize ease of navigation and 🔍 information accessibility, then built the interface using clean, modular code. ✨

License : MIT ❤️

Made in ❤️ by Shreya N