Compare commits

..

9 Commits

5 changed files with 71 additions and 62 deletions

115
README.md
View File

@@ -1,83 +1,92 @@
# Mycelium Cloud Website
# 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.
## Getting Started
---
Follow these instructions to get a local copy up and running for development and testing purposes.
## Technologies
### Prerequisites
- **Framework**: [Next.js](https://nextjs.org/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
Make sure you have Node.js and npm installed on your machine. You can download them from [nodejs.org](https://nodejs.org/).
---
### Installation
## 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 and Videos**: Add or modify images and videos in the `public/` directory. Images are in `public/images/` and videos are in `public/videos/`.
- **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**:
1. Clone the repository to your local machine.
2. Install the NPM packages:
```bash
npm install
```
### Running the Application
2. **Build the Project**:
To run the development server:
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
## Git Workflow
We follow a branching model to ensure code quality and a stable production environment. All new work should be done on a feature branch.
1. **Switch to the `development` branch** and make sure it's up to date:
```bash
git checkout development
git pull origin development
npm run build
```
2. **Create a new feature branch** for your changes:
3. **Start the Development Server**:
```bash
git checkout -b your-feature-name
npm run start
```
3. **Make your changes and commit them**.
---
4. **Push your feature branch** to the remote repository:
```bash
git push origin your-feature-name
```
## Contributing
5. **Create a Pull Request** on GitHub from your feature branch to the `development` branch.
- **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.
6. After the pull request is reviewed and merged, the changes will be on the `development` branch. To deploy to production, the `development` branch will be merged into `main`.
---
## Project Structure
## Report an Error
Here is an overview of the key directories in the project:
To report an issue, please use the following link and provide the requested information:
- `src/app/(main)/page.tsx`
This is the main entry point for the homepage.
- **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**
- `src/components/`
This directory contains all the reusable React components used throughout the site. The main components rendered on the homepage (`src/app/(main)/page.tsx`) are:
- `HomeHero.tsx`
- `StackSection.tsx` (as `StackSectionPreview`)
- `BentoReviews.tsx`
- `WorldMap.tsx`
- `Steps.tsx`
- `Companies.tsx`
- `ClickableGallery.tsx`
- `CallToAction.tsx`
- See the current web rpoject on [OW Website & Wiki Project 2025](https://git.ourworld.tf/ourworld_web/-/projects/153)
- `public/images/`
All static images are stored here. You can find logos, gallery images, and other visual assets in this folder.
When reporting an issue, please include:
- `public/videos/`
This folder contains video assets used on the site.
- **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.
## License
---
This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
## Questions
If you have any questions, you can reach out to [sashaastiadi](https://git.ourworld.tf/sashaastiadi).

View File

@@ -21,15 +21,12 @@ export default function Home() {
<section id="home-hero">
<HomeHero />
</section>
<section id="technologies">
<StackSectionPreview />
</section>
<section id="bento-reviews">
<BentoReviews />
</section>
<section id="network">
<WorldMap />
</section>
<section id="technologies">
<StackSectionPreview />
</section>
<section id="deploy">
<Steps />
</section>
@@ -39,6 +36,9 @@ export default function Home() {
<section id="clickable-gallery">
<ClickableGallery />
</section>
<section id="bento-reviews">
<BentoReviews />
</section>
<section id="call-to-action">
<CallToAction />
</section>

View File

@@ -92,7 +92,7 @@ export function BentoReviews() {
return (
<div>
<div className="relative isolate pt-24 pb-12 bg-black text-center w-full lg:px-0 px-4">
<div className="relative isolate py-24 bg-black text-center w-full lg:px-0 px-4">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<div className="mx-auto max-w-5xl ">
<H2 className="text-center">Augmented Intelligence Fabric</H2>

View File

@@ -40,7 +40,7 @@ const row2 = logos.slice(6);
export function Companies() {
return (
<div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased py-4 -top-20">
<div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased py-4 mb-12">
<div className="relative z-10 mx-auto w-full max-w-6xl p-4">
{/* Heading */}

View File

@@ -30,7 +30,7 @@ export function Steps() {
const isInView = useInView(ref, { once: true });
return (
<section id="benefits" ref={ref} className="relative pt-16 pb-4 px-4 lg:px-12 -top-20 text-white">
<section id="benefits" ref={ref} className="relative pt-12 pb-4 px-4 lg:px-12 text-white">
<div className="relative px-6 lg:px-12">
<motion.div
initial={{ opacity: 0, y: 20 }}