update Join the Waitlist button

README.md

@@ -1,92 +1,83 @@
-# Project Mycelium Website
+# Mycelium Cloud 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
 
-## Technologies
+Follow these instructions to get a local copy up and running for development and testing purposes.
 
-- **Framework**: [Next.js](https://nextjs.org/)
+### Prerequisites
-- **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/).
 
-## File Structure
+### Installation
-
-- **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
     ```
 
-2.  **Build the Project**:
+### Running the Application
 
+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
-    npm run build
+    git checkout development
+    git pull origin development
     ```
 
-3.  **Start the Development Server**:
+2.  **Create a new feature branch** for your changes:
-
     ```bash
-    npm run start
+    git checkout -b your-feature-name
     ```
 
----
+3.  **Make your changes and commit them**.
 
-## Contributing
+4.  **Push your feature branch** to the remote repository:
+    ```bash
+    git push origin your-feature-name
+    ```
 
-- **Never update the `main` branch directly.** All changes must be reviewed and merged by the team through a pull request.
+5.  **Create a Pull Request** on GitHub from your feature branch to the `development` branch.
-- **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`.
 
-## Report an Error
+## Project Structure
 
-To report an issue, please use the following link and provide the requested information:
+Here is an overview of the key directories in the project:
 
-- **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/app/(main)/page.tsx`
+    This is the main entry point for the homepage.
 
-- See the current web rpoject on [OW Website & Wiki Project 2025](https://git.ourworld.tf/ourworld_web/-/projects/153)
+-   `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`
 
-When reporting an issue, please include:
+-   `public/images/`
+    All static images are stored here. You can find logos, gallery images, and other visual assets in this folder.
 
-- **URL**: The page where the error occurred.
+-   `public/videos/`
-- **Repo**: The repository you are working with.
+    This folder contains video assets used on the site.
-- **Branch**: The specific branch you are on.
-- **Problem**: A detailed description of the problem.
 
----
+## License
 
-## Questions
+This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
-
-If you have any questions, you can reach out to [sashaastiadi](https://git.ourworld.tf/sashaastiadi).

src/app/(main)/page.tsx

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

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import { type Metadata } from 'next'
+import Script from 'next/script'
 import { Mulish } from 'next/font/google'
 import clsx from 'clsx'
 
@@ -26,6 +27,19 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={clsx('antialiased', mulish.variable)}>
+      <head>
+        {/* MailerLite Universal */}
+        <Script id="mailerlite-universal" strategy="afterInteractive">
+          {`(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
+var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
+f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
+var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
+_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
+
+var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');`}
+        </Script>
+        {/* End MailerLite Universal */}
+      </head>
       <body className="bg-black text-white">{children}</body>
     </html>
   )

src/components/CallTo.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { H2, P } from '@/components/Texts'
 
 export function CallTo() {
@@ -20,7 +22,15 @@ export function CallTo() {
             >
               Book a Meeting
             </a>
-            <a href="mailto:info@ourworld.tf" target="_blank" rel="noopener noreferrer" className="text-sm/6 font-semibold text-[#2F3178] hover:text-[#2F3178]/80">
+            <a
+              href="javascript:;"
+              onClick={() => {
+                if (typeof window !== 'undefined' && (window as any).ml_account) {
+                  (window as any).ml_account('webforms', '6108375', 'l9m8g1', 'show')
+                }
+              }}
+              className="text-sm/6 font-semibold text-[#2F3178] hover:text-[#2F3178]/80"
+            >
               Join the Waitlist <span aria-hidden="true">→</span>
             </a>
           </div>

src/components/CallToAction.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 import { Button } from '@/components/Button'
@@ -42,7 +44,15 @@ export function CallToAction() {
             >
               Book a Meeting
             </Button>
-            <Button href="mailto:info@ourworld.tf" target="_blank" rel="noopener noreferrer" variant="outline" color="white">
+            <Button
+              variant="outline"
+              color="white"
+              onClick={() => {
+                if (typeof window !== 'undefined' && (window as any).ml_account) {
+                  (window as any).ml_account('webforms', '6108375', 'l9m8g1', 'show')
+                }
+              }}
+            >
               Join the Waitlist
             </Button>
           </div>

src/components/Header.tsx

@@ -110,7 +110,15 @@ export function Header() {
                             <NavLinks className="block text-base/7 tracking-tight" />
                           </div>
                           <div className="mt-8 flex flex-col gap-4">
-                            <Button href="mailto:info@ourworld.tf" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
+                            <Button
+                              variant="outline"
+                              color="white"
+                              onClick={() => {
+                                if (typeof window !== 'undefined' && (window as any).ml_account) {
+                                  (window as any).ml_account('webforms', '6108375', 'l9m8g1', 'show')
+                                }
+                              }}
+                            >
                               Join the Waitlist
                             </Button>
                             <Button href="https://calendly.com/sachao/30min" color="cyan">Book a Meeting</Button>
@@ -123,8 +131,16 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="mailto:info@ourworld.tf" variant="outline" color="white" target="_blank" rel="noopener noreferrer">
+              <Button
-              Join the Waitlist
+                variant="outline"
+                color="white"
+                onClick={() => {
+                  if (typeof window !== 'undefined' && (window as any).ml_account) {
+                    (window as any).ml_account('webforms', '6108375', 'l9m8g1', 'show')
+                  }
+                }}
+              >
+                Join the Waitlist
               </Button>
               <Button href="https://calendly.com/sachao/30min" color="cyan">Book a Meeting</Button>
             </div>