www_mycelium_net/README.md

# Mycelium Network Website

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

- **Main Branch (Production):** [https://network.mycelium.tf/](https://network.mycelium.tf/)
- **Dev Branch (Staging):** [https://www2.network.mycelium.tf/](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](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 [Inter](https://fonts.google.com/specimen/Inter).
- **Logos**: Project logos are stored in `public/images/`.

---

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

---

## 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).

---

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

    ```tsx
    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`.

### Download Page

The download page, located at `src/app/(main)/download/page.tsx`, provides users with download links for the Mycelium application across various operating systems. The page is composed of the following components:

- **DownloadHero**: Displays the main header and a grid of download cards for each supported platform (iOS, macOS, Windows, Android, and Linux).
- **DevHub**: Provides links to developer resources, including documentation, support channels, forums, and community groups.
- **Faqs**: A frequently asked questions section to address common user queries.

### Not Found Page

The `not-found.tsx` file at `src/app/not-found.tsx` defines a custom 404 error page. This page is displayed whenever a user navigates to a non-existent route. It features a clean and simple layout with a 404 message and a button that directs the user back to the homepage.

### Typography with `Texts.tsx`

The `src/components/Texts.tsx` file implements a flexible and consistent typography system using a factory pattern. It exports a set of reusable text components, such as `H1`, `P`, and `SectionHeader`, each with predefined styles and color variants.

This approach ensures that the visual hierarchy and design language remain consistent throughout the application. To use a text component, simply import it and use it like any other React component:

```tsx
import { H1, P } from '@/components/Texts';

function MyComponent() {
  return (
    <div>
      <H1 color="accent">This is a heading</H1>
      <P color="secondary">This is a paragraph.</P>
    </div>
  );
}
```

### Button Components

The `src/components/Button.tsx` file provides a polymorphic button component that can be rendered as either a `<button>` or a Next.js `<Link>`. It supports two main variants (`solid` and `outline`) and multiple color schemes.

This component is used throughout the application to ensure that all buttons and links have a consistent look and feel. Example usage:

```tsx
import { Button } from '@/components/Button';

function MyComponent() {
  return (
    <div>
      <Button variant="solid" color="cyan">Submit</Button>
      <Button href="/about" variant="outline">Learn More</Button>
    </div>
  );
}
```

### Adding Images

To add images to the project while ensuring they are optimized, use the Next.js `Image` component. Follow these steps:

1.  **Place Your Image**: Add your image file to the `src/images/` directory.

2.  **Import the Image**: In the component where you want to display the image, import it at the top of the file:

    ```tsx
    import myImage from '@/images/my-image.png';
    ```

3.  **Use the `Image` Component**: Use the `Image` component from `next/image` to render your image. Provide the `src`, `alt`, `width`, and `height` props for proper rendering and accessibility.

    ```tsx
    import Image from 'next/image';
    import myImage from '@/images/my-image.png';

    export function MyComponent() {
      return (
        <Image
          src={myImage}
          alt="A descriptive alt text for accessibility"
          width={500}
          height={300}
          priority // Optional: Add this if the image is critical for the initial page load
        />
      );
    }
    ```