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:

Install Dependencies:
```
npm install
```
Build the Project:
```
npm run build
```
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:

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).
Create the Page File: Inside the new folder, create a page.tsx file.

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.

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:

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:

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:

Place Your Image: Add your image file to the src/images/ directory.
Import the Image: In the component where you want to display the image, import it at the top of the file:
```
import myImage from '@/images/my-image.png';
```

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.

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
    />
  );
}

README.md

Mycelium Network Website

About

Technologies

Dependencies

File Structure