🏠 Home Page

The Home Page of MystiKeys is the primary landing area and starting point for your Web3 gaming journey on the MystiKeys Mystery Chest Platform, developed by Companeons DAO—the official Gaming Sub-DAO of Solana Sky Pilots.

The home page is designed for maximum accessibility, seamless user experience, and intuitive navigation, providing players quick and clear access to all core functionalities.

Below you'll find a detailed and structured overview of every key feature available on the MystiKeys Home Page.

🖥️ Home Page Structure & Components

🔷 1. Mystery Chests Display

At the heart of the Home Page are 6 visually distinctive mystery chests, clearly indicating their costs and types, allowing players quick chest selection:

Chest Tier	Cost (MystiKeys)
🥉 Silver	1 MystiKey
🥈 Gold	2 MystiKeys
💎 Diamond	5 MystiKeys
💠 Ruby	10 MystiKeys
🔷 Sapphire	20 MystiKeys
🍀 Emerald	50 MystiKeys

• Chest Tier Cards: Visually appealing clickable cards clearly labeled by chest type and cost. Clicking directs the player to the specific chest page for detailed information.

• Open Chest Button: Quick access button for players to initiate chest openings immediately.

🔷 2. Top Header Navigation

The top header is consistently accessible from every page, providing quick and essential actions for seamless gameplay:

Header Element	Functionality Explanation
🔗 Companeons Official Logo	Located at top-left corner; clicking redirects to Companeons DAO's official website.
🆘 Help Button	Quick access to FAQs, tutorials, and support.
🔗 Connect Wallet Button	Allows quick and secure Solana wallet connection (Phantom, Solflare, etc.)
🔑 MystiKeys Balance Display	Clearly shows your current MystiKeys balance in real-time.
➕ "Add MystiKeys" Button	Opens an instant purchase modal allowing you to buy MystiKeys at $1 per key instantly via SOL or USDC.

🔷 3. Footer Navigation Bar

Located clearly at the bottom, the footer enables simple navigation across key pages of MystiKeys:

Footer Link	Purpose & Function
🏠 Home	Returns users to the main home page (chest selection area).
📣 Earn	Takes users to the Tweet-to-Earn page to earn daily free MystiKeys.
💸 Offers	Navigates to Offers Page for discounted bulk MystiKeys purchases.
👤 Profile	Opens the Profile Page for managing rewards, claims, and transactions history.
🏢 Franchise	Takes users to Franchise information and onboarding page for interested Web3 projects.

🔷 4. Wallet Connectivity & MystiKeys Purchase

The Home Page header allows quick, frictionless wallet connectivity and MystiKeys purchases:

• ✅ Wallet Connection: Simple wallet connect button; supports Phantom, Solflare, and other Solana wallets securely.

• 💳 Instant MystiKeys Purchase: Clicking the ➕ “Add MystiKeys” button opens an instant-buy modal. MystiKeys can be quickly bought at the fixed price of $1 per key (SOL/USDC).

🚨 NOTE: If you prefer bulk discounts, visit the Offers page.

🔷 5. Visual & Interactive Features

MystiKeys Home Page prioritizes a visually engaging and interactive user experience:

• 🎨 Immersive Chest Animations: Chests have interactive and visually appealing animations to enhance excitement.

• 🎉 Seasonal Visual Effects: Special visual and sound effects during community events or seasons.

• 🖱️ Interactive Hover Effects: Chest cards and buttons feature attractive animations when hovered over for enhanced interactivity and user experience.

🕹️ Home Page User Flow (Step-by-Step)

MystiKeys ensures simple, intuitive, and enjoyable interaction from landing to gameplay:

✅ Scenario A: First-Time Users

1. Land on Home Page.

2. Click "Connect Wallet" (Phantom, Solflare, etc.).

3. Check MystiKeys balance (initially 0).

4. Click ➕ "Add MystiKeys" button in header to instantly purchase MystiKeys.

5. Choose your preferred chest tier by clicking on the chest card.

6. Proceed to open your selected chests.

✅ Scenario B: Returning Users

1. Land on Home Page with wallet auto-connected.

2. Immediately view your MystiKeys balance at the top header.

3. Quickly top-up more MystiKeys (if needed) via the ➕ "Add MystiKeys" button.

4. Directly open chests or navigate via footer links to Earn, Offers, Profile, or Franchise pages.

🛡️ Security & Transparency

The MystiKeys Home Page is built with a security-first approach:

• Secure wallet connection (non-custodial).

• Real-time MystiKeys balance display (on-chain synced).

• Instant transactions transparently logged on Solana blockchain.

• Clearly defined UI elements reducing confusion or potential mistakes.

🎯 UX Philosophy & Approach

MystiKeys Home Page adheres to core UX principles enhancing player engagement and satisfaction:

Principle	Implementation
⚡ Instant & Frictionless	Wallet connect and MystiKeys purchase accessible in a single click.
🎮 Intuitive Design	Clear and self-explanatory visual cards, buttons, and navigation bars.
🎨 Visually Rich & Engaging	Animation and attractive graphics to create an immersive gaming experience.
🔒 Trustworthy Transparency	Real-time, verifiable, and transparent MystiKeys balances, transactions, and reward probabilities.

🧑‍💻 Developer & Ecosystem Notes

• Fully responsive and optimized for mobile browsers and wallets (Phantom Mobile, Solflare App).

• Modular design enabling efficient franchise deployments.

• Instant purchase and wallet connections facilitated securely via reliable Solana infrastructure.

📌 Quick Summary (TL;DR)

Home Page Feature	Description
🎟️ Chest Selection	Easily accessible and visually engaging chest tier cards.
💰 Instant MystiKeys Purchase	Quickly buy MystiKeys via the header ➕ button at $1 per key.
🔗 Secure Wallet Connectivity	Connect Phantom, Solflare, or compatible Solana wallets seamlessly.
🧭 Navigation	Clear header and footer navigation bars to access all platform sections.
🖼️ Interactive UI/UX	Visually rich animations and interactive experiences enhancing user satisfaction.
🔐 Secure & Transparent	Blockchain-secured transactions, instant and visible MystiKeys balance updates.