forked from sashaastiadi/www_mycelium_net
151 lines
4.2 KiB
Markdown
151 lines
4.2 KiB
Markdown
# 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:
|
|
|
|
- `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`.
|