refactor: update image imports to use direct imports instead of public path

Reviewed-on: ourworld_web/www_mycelium_net#1

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, wrapped in `<AnimatedSection>`:
+
+- `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 (
+        <>
+          <Hero />
+          <Faqs />
+        </>
+      )
+    }
+    ```
+
+The new page will be accessible at `http://localhost:3000/new-page`.

next.config.js

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    output: 'export',
+    images: {
+        unoptimized: true,
+    },
+}
 
 module.exports = nextConfig

src/components/About.tsx

@@ -26,7 +26,7 @@ export function About() {
           </p>
           <div className="mt-8 flex justify-center">
             <Button
-              href="https://docs.ourworld.tf/mycelium_cloud/docs/"
+              href="https://threefold.info/mycelium_network/docs/"
               target="_blank"
               variant="outline"
               color="white"

src/components/DownloadHero.tsx

@@ -26,7 +26,7 @@ const features = [
   {
     name: 'Download for Linux',
     description: 'Download the Mycelium binary for Linux directly from its Github repository.',
-    href: 'https://github.com/threefoldtech/mycelium/releases/tag/v0.6.1',
+    href: 'https://github.com/threefoldtech/mycelium/releases',
     icon: linuxIcon,
   },
 ];
@@ -41,7 +41,7 @@ export default function DownloadHero() {
           </h2>
           <p className="mt-6 text-lg/8 text-gray-600">
             Get Mycelium for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
-            <a href="https://docs.ourworld.tf/mycelium_cloud/docs/" className="text-cyan-500 hover:text-cyan-600 font-semibold underline">
+            <a href="https://threefold.info/mycelium_network/docs/" className="text-cyan-500 hover:text-cyan-600 font-semibold underline">
               Read the manual.
             </a>
           </p>

src/components/Faqs.tsx

@@ -8,9 +8,9 @@ const faqs = [
         'Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications.',
     },
     {
-      question: 'Is mycelium ready to scale to the world?',
+      question: 'Is Mycelium ready to scale to the world?',
       answer:
-        'No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025.',
+        'No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity.',
     },
     {
       question: 'How do I install Mycelium?',
@@ -67,7 +67,7 @@ export function Faqs() {
           <p className="mt-2 text-lg text-gray-600">
             If you have anything else you want to ask,{' '}
             <a
-              href="mailto:info@example.com"
+              href="https://t.me/threefold"
               className="text-gray-900 underline"
             >
               reach out to us

src/components/Header.tsx

@@ -108,7 +108,7 @@ export function Header() {
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="mt-6 flex flex-col gap-4">
-                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
+                            <Button href="https://threefold.info/mycelium_network/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
                               Docs
                             </Button>
                             <Button variant="solid" color="cyan" href="/download/">Get Mycelium</Button>
@@ -121,7 +121,7 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
+              <Button href="https://threefold.info/mycelium_network/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
                 Docs
               </Button>
               <Button href="/download/" variant="solid" color="cyan">Get Mycelium</Button>

src/components/Hero.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx'
 
 import { DownloadLink } from '@/components/DownloadLink'
 import { Button } from '@/components/Button'
+import phoneFrame from '@/images/phoneframe.png'
 import { Container } from '@/components/Container'
 import logoBbc from '@/images/logos/bbc.svg'
 import logoCbs from '@/images/logos/cbs.svg'
@@ -129,7 +130,7 @@ export function Hero() {
             <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12  ml-0" />
             <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)]  lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24  lg:h-auto lg:pt-10 xl:-bottom-32">
               <Image
-                src="/images/phoneframe.png"
+                src={phoneFrame}
                 alt="Mycelium application demo"
                 className="mx-auto max-w-[366px]"
                 width={366}

src/components/PrimaryFeatures.tsx

@@ -16,6 +16,10 @@ import { AppScreen } from '@/components/AppScreen'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 import Image from 'next/image'
+
+import connectorImg from '@/images/connector.png'
+import peersImg from '@/images/peers.png'
+import settingImg from '@/images/setting.png'
 import { PhoneFrame } from '@/components/PhoneFrame'
 import {
   DiageoLogo,
@@ -194,7 +198,7 @@ type ScreenProps =
 function InviteScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/connector.png" alt="Mycelium Connector" width={366} height={732} className="mt-[-2rem]" />
+      <Image src={connectorImg} alt="Mycelium Connector" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }
@@ -202,7 +206,7 @@ function InviteScreen(props: ScreenProps) {
 function StocksScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/peers.png" alt="Mycelium Peers" width={366} height={732} className="mt-[-2rem]" />
+      <Image src={peersImg} alt="Mycelium Peers" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }
@@ -210,7 +214,7 @@ function StocksScreen(props: ScreenProps) {
 function InvestScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/setting.png" alt="Mycelium Settings" width={366} height={732} className="mt-[-2rem]" />
+      <Image src={settingImg} alt="Mycelium Settings" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }