# Project Mycelium Website

- **Repository:** [https://git.ourworld.tf/ourworld_web/www_project_mycelium/](https://git.ourworld.tf/ourworld_web/www_project_mycelium/)

- **Main Branch (Production):** [https://project.mycelium.tf/](https://project.mycelium.tf/)
- **Dev Branch (Staging):** [https://www2.project.mycelium.tf/](https://www2.project.mycelium.tf/)


---

## About

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

---

## Technologies

- **Framework**: [Next.js](https://nextjs.org/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)

---

## Dependencies

- **UI**: [@headlessui/react](https://headlessui.com/)
- **Animation**: [framer-motion](https://www.framer.com/motion/)
- **Utilities**: [clsx](https://github.com/lukeed/clsx), [use-debounce](https://github.com/xnimorz/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 [Mulish](https://fonts.google.com/specimen/Mulish).
- **Logos**: Project logos are stored in `public/images/logos/`.

---

## Get Started

Follow these steps to get the project running locally:

1.  **Install Dependencies**:

    ```bash
    npm install
    ```

2.  **Build the Project**:

    ```bash
    npm run build
    ```

3.  **Start the Development Server**:

    ```bash
    npm run start
    ```

---

## 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:

- `HomeHero`
- `WorldMap`
- `StackSectionPreview`
- `Steps`
- `Companies`
- `ClickableGallery`
- `BentoReviews`
- `CallToAction`

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:

    ```tsx
    import { HomeHero } from '@/components/HomeHero'
    import { Faqs } from '@/components/Faqs'

    export default function NewPage() {
      return (
        <>
          <HomeHero />
          <Faqs />
        </>
      )
    }
    ```

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

---

## 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](https://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](https://git.ourworld.tf/ourworld_web/-/projects/153)

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](https://git.ourworld.tf/sashaastiadi).