Mythtopia - Web3 Eco-Glamping Resort & NFT Platform

Mythtopia is a modern Web3-enabled landing and exploration platform designed for a luxury eco-glamping resort situated near Edinburgh, Scotland. The platform seamlessly fuses physical eco-tourism with digital Web3 ecosystems—featuring exclusive NFT membership access, booking revenue-sharing staking mechanisms, an augmented reality (AR) gaming universe (Mythtopia Legends), and carbon credit cryptocurrency rewards (OXE token).

---

Key Features

• Immersive Video Showcase: Responsive hero section powered by react-player and dynamic navbar controls for seamless navigation across resort highlights.
• Web3 Onboarding & Minting Journey:
  • Clear 5-step user journey guide covering Web3 wallet integration (MetaMask), allowlist enrollment, NFT acquisition, date staking, and reservation confirmation.
  • Direct wallet connection calls-to-action for immediate booking availability checks.
• Dynamic NFT Collection Showcase:
  • Multi-breakpoint responsive carousel (react-elastic-carousel) highlighting exclusive Mythtopia NFT character artwork.
  • Scroll-triggered cubic ease transitions powered by AOS (Animate on Scroll).
• Holder Utility & Staking Ecosystem:
  • Exclusive Annual Access: Up to 3 nights per year at luxury geodesic domes, clubhouse dining, and holistic activities.
  • Environmental Rewilding: Direct ecological contribution toward planting 120,000 trees across 100 acres.
  • Resort Staking Mechanics: Staking pool enabling token holders to earn shares of resort booking revenues.
  • OXE Token Utility: Early access to tokenized carbon credit cryptocurrency derived from on-site woodland sequestration.
• Responsive Dual-Layout Roadmap:
  • Alternating staggered timeline for desktop viewports and linear vertical milestone cards for mobile devices.
  • Covers phases from NFT drop and dome expansion to Mythtopia Legends AR game deployment and operations scaling.
• Sustainable Geodesic Dome Spotlight:
  • Technical and architectural overview of eco-engineered 7m and 8m domes powered by solar and geothermal energy.
• Interactive FAQ Accordion:
  • Collapsible, animated accordion component answering frequently asked questions on booking policies, surcharges, pricing, and tokenomics.
• Newsletter Subscription & Social Engagement:
  • Responsive footer with direct newsletter signup input and community links (Twitter, Discord).

---

Tech Stack

Domain	Technologies
Frontend Framework	React.js (v17), React Router DOM (v5)
UI Components & Layout	Reactstrap (v8), Bootstrap (v4), Custom SCSS / SASS
Animations & Effects	AOS (Animate on Scroll)
Media & Carousels	react-elastic-carousel, react-player, react-icons
Utilities	flatpickr, moment, classnames
Tooling & CI/CD	react-scripts, Gulp, AWS CodeBuild (buildspec.yml)

---

Project Structure

Mythtopia/
├── public/
│   ├── index.html            # Main HTML document with custom font imports
│   ├── manifest.json         # PWA web manifest
│   └── favicon.ico           # Application favicon
├── src/
│   ├── assets/
│   │   ├── css/              # Nucleo icons and precompiled styling
│   │   ├── fonts/            # Custom typefaces (GeneralSans, IvyMode)
│   │   ├── img/              # Resort photography, dome visuals, NFT assets
│   │   └── scss/             # Modular SCSS architecture (variables, mixins, custom components)
│   ├── components/
│   │   ├── Footer/           # Community links, legal links, newsletter subscription
│   │   └── Navbars/          # Responsive navigation bar with mobile drawer toggle
│   ├── helper/               # Anchor scroll smooth-scrolling utilities
│   ├── routes/               # Client-side router configuration
│   ├── views/
│   │   └── home/             # Main landing modules (Banner, Mint, NFTcollection, Benefits, Roadmap, FAQ)
│   └── index.js              # Application entry point
├── buildspec.yml             # AWS CodeBuild configuration
├── gulpfile.js               # Build and licensing tasks
├── package.json              # Project dependencies and npm scripts
└── README.md                 # Project documentation

---

Getting Started

Prerequisites

• Node.js: 14.x or 16.x
• npm: v6.x or higher

Installation

1. Clone the repository:

   git clone https://github.com/anitha-software-dev/mythtopia.git
   cd mythtopia

2. Install dependencies:

   npm install --legacy-peer-deps

3. Start the development server:

   npm start

   Open http://localhost:3000 to view the application in your browser.

4. Build for production:

   npm run build

---

License

This project is licensed under the MIT License.