diff --git a/README.md b/README.md index 7c5504b..eded3e4 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,150 @@ -# Mycelium +# Mycelium Network Website -Mycelium is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org). +- **Repository:** [https://git.ourworld.tf/ourworld_web/www_mycelium_net/](https://git.ourworld.tf/ourworld_web/www_mycelium_net/) -## Getting started +- **Main Branch (Production):** [https://network.mycelium.tf/](https://network.mycelium.tf/) +- **Dev Branch (Staging):** [https://www2.network.mycelium.tf/](https://www2.network.mycelium.tf/) -To get started with this template, first install the npm dependencies: -```bash -npm install -``` +--- -Next, run the development server: +## About -```bash -npm run dev -``` +This is the official website for Mycelium Network, built using Next.js and Tailwind CSS. -Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website. +--- -## Customizing +## Technologies -You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files. +- **Framework**: [Next.js](https://nextjs.org/) +- **Language**: [TypeScript](https://www.typescriptlang.org/) +- **Styling**: [Tailwind CSS](https://tailwindcss.com/) -## License +--- -This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license). +## Dependencies -## Learn more +- **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) -To learn more about the technologies used in this site template, see the following resources: +--- -- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation -- [Next.js](https://nextjs.org/docs) - the official Next.js documentation -- [Headless UI](https://headlessui.dev) - the official Headless UI documentation +## 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 ( + <> + + + + ) + } + ``` + +The new page will be accessible at `http://localhost:3000/new-page`.