docs: add development guide and dependencies section to README

README.md

@@ -22,11 +22,19 @@ This is the official website for Mycelium Cloud, built using Next.js and Tailwin
 
 ---
 
+## 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 and Videos**: Add or modify images and videos in the `public/` directory. Images are in `public/images/` and videos are in `public/videos/`.
+- **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.
 
 ---
@@ -62,6 +70,57 @@ Follow these steps to get the project running locally:
 
 ---
 
+## 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:
+
+- `HomeHero`
+- `WorldMap`
+- `StackSectionPreview`
+- `Steps`
+- `Companies`
+- `ClickableGallery`
+- `BentoReviews`
+- `CallToAction`
+
+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 { HomeHero } from '@/components/HomeHero'
+    import { Faqs } from '@/components/Faqs'
+
+    export default function NewPage() {
+      return (
+        <>
+          <HomeHero />
+          <Faqs />
+        </>
+      )
+    }
+    ```
+
+The new page will be accessible at `http://localhost:3000/new-page`.
+
+---
+
 ## Contributing
 
 - **Never update the `main` branch directly.** All changes must be reviewed and merged by the team through a pull request.