style: improve hero section layout and text positioning for better responsiveness

README.md

@@ -1,35 +1,83 @@
-# Mycelium
+# Mycelium Cloud 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).
+This is the official website for Mycelium Cloud, built using Next.js and Tailwind CSS.
 
-## Getting started
+## Getting Started
 
-To get started with this template, first install the npm dependencies:
+Follow these instructions to get a local copy up and running for development and testing purposes.
 
-```bash
+### Prerequisites
-npm install
-```
 
-Next, run the development server:
+Make sure you have Node.js and npm installed on your machine. You can download them from [nodejs.org](https://nodejs.org/).
+
+### Installation
+
+1.  Clone the repository to your local machine.
+2.  Install the NPM packages:
+    ```bash
+    npm install
+    ```
+
+### Running the Application
+
+To run the development server:
 
 ```bash
 npm run dev
 ```
 
-Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
 
-## Customizing
+## Git Workflow
 
-You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
+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
+    ```
+
+2.  **Create a new feature branch** for your changes:
+    ```bash
+    git checkout -b your-feature-name
+    ```
+
+3.  **Make your changes and commit them**.
+
+4.  **Push your feature branch** to the remote repository:
+    ```bash
+    git push origin your-feature-name
+    ```
+
+5.  **Create a Pull Request** on GitHub from your feature branch to the `development` 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
+
+Here is an overview of the key directories in the project:
+
+-   `src/app/(main)/page.tsx`
+    This is the main entry point for the homepage.
+
+-   `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`
+
+-   `public/images/`
+    All static images are stored here. You can find logos, gallery images, and other visual assets in this folder.
+
+-   `public/videos/`
+    This folder contains video assets used on the site.
 
 ## License
 
 This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
-
-## Learn more
-
-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

src/components/HomeHero.tsx

@@ -5,7 +5,7 @@ import { motion } from 'framer-motion'
 import { TypeAnimation } from 'react-type-animation'
 import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
-import { H1, PL } from '@/components/Texts'
+import { H1, H2, PL } from '@/components/Texts'
 
 const navigation = [
   { name: 'Product', href: '#' },
@@ -32,9 +32,9 @@ export function HomeHero() {
         <div className="absolute inset-0 bg-black/60" />
       </div>
       <div className="relative px-6 lg:px-8">
-        <div className="relative -top-15 mx-auto flex h-screen max-w-8xl items-center justify-center">
+        <div className="relative mt-4 mx-auto flex h-screen max-w-8xl items-center justify-center">
           <div className="text-center">
-            <div className="max-w-5xl">
+            <div className="max-w-6xl">
               <H1 color="light">
                 <TypeAnimation
                   sequence={[
@@ -55,11 +55,10 @@ export function HomeHero() {
               transition={{ duration: 1, delay: 1 }}
               className="lg:hidden"
             >
-              <PL className="mt-8 max-w-xl text-center text-gray-100" color="light">
+              <PL className="mt-12 max-w-3xl text-center text-gray-100" color="light">
                 Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
               </PL>
             </motion.div>
-          </div>
 
             {/* Desktop-only PL */}
             <motion.div
@@ -68,12 +67,13 @@ export function HomeHero() {
               transition={{ duration: 1, delay: 1 }}
               className="hidden lg:block"
             >
-            <PL className="absolute -bottom-8 left-0 max-w-xl text-left text-gray-100" color="light">
+              <PL className="mt-12 max-w-4xl text-center text-gray-100 mx-auto" color="light">
                 Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
               </PL>
             </motion.div>
           </div>
         </div>
       </div>
+    </div>
   )
 }

src/components/StackSection.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { StackedCubes } from "@/components/ui/StackedCubes";
-import { H2, P } from '@/components/Texts';
+import { H1, H2, P } from '@/components/Texts';
 import { FadeIn } from "./FadeIn";
 
 export function StackSectionPreview() {