Mycelium Network Website

• Repository: https://git.ourworld.tf/ourworld_web/www_mycelium_net/

• Main Branch (Production): https://network.mycelium.tf/

• Dev Branch (Staging): https://www2.network.mycelium.tf/

---

About

This is the official website for Mycelium Network, built using Next.js and Tailwind CSS.

---

Technologies

• Framework: Next.js
• Language: TypeScript
• Styling: Tailwind CSS

---

Dependencies

• UI: @headlessui/react
• Animation: framer-motion
• Utilities: clsx, use-debounce

---

File Structure

• Pages: To edit the content of a specific page, navigate to src/app/(main)/.
• Components: Reusable components are located in src/components/.
• Images: Add or modify images in the public/images/ directory.
• CSS: Global styles can be found in src/styles/tailwind.css. Most styling is done using Tailwind CSS utility classes directly in the .tsx files.

---

Branding

• Font: The primary font used is Inter.
• Logos: Project logos are stored in public/images/.

---

Get Started

Follow these steps to get the project running locally:

1. Install Dependencies:

   npm install
   

2. Build the Project:

   npm run build
   

3. Start the Development Server:

   npm run start
   

---

Contributing

• Never update the main branch directly. All changes must be reviewed and merged by the team through a pull request.
• Always work on the development branch. Create a feature branch from development and submit your pull request to development.
• Request a review. After submitting your pull request, ask the team to review and accept it into the main branch.

---

Report an Error

To report an issue, please use the following link and provide the requested information:

• Issue Tracker: git.ourworld.tf/ourworld_web/HOME/issues/new and tag OW Website & Wiki Project 2025

• See the current web rpoject on OW Website & Wiki Project 2025

When reporting an issue, please include:

• URL: The page where the error occurred.
• Repo: The repository you are working with.
• Branch: The specific branch you are on.
• Problem: A detailed description of the problem.

---

Questions

If you have any questions, you can reach out to sashaastiadi.

---

Development Guide

This project follows a modular, component-based architecture. Pages are assembled by combining reusable components into a single layout.

Homepage Structure

The homepage (src/app/(main)/page.tsx) is composed of the following components, wrapped in <AnimatedSection>:

• Hero
• About
• Features
• PrimaryFeatures
• SecondaryFeatures
• CallToAction
• Faqs

To edit a specific section of the homepage, navigate to src/components/ and modify the corresponding component file.

Base Layout

The main layout for the application is defined in src/components/Layout.tsx. This file includes the Header and Footer and wraps the primary content of each page.

Creating a New Page

To create a new page, follow these steps:

1. Create a Folder: Inside the src/app/(main)/ directory, create a new folder with the desired URL slug for your page (e.g., new-page).

2. Create the Page File: Inside the new folder, create a page.tsx file.

3. Add Page Content: Compose your page by importing and using the reusable components from src/components/. For example:

   import { Hero } from '@/components/Hero'
   import { Faqs } from '@/components/Faqs'
   
   export default function NewPage() {
     return (
       <>
         <Hero />
         <Faqs />
       </>
     )
   }
   

The new page will be accessible at http://localhost:3000/new-page.