Merge pull request #3 from status-im/feature/intro-content

Add Introduction & Quick Start Guide, Implement Translation Support, Fix CSS Bugs and Light Mode Styling

Author: nadeemb53

Jenkinsfile

@@ -45,8 +45,7 @@ pipeline {
                 -b deploy-master \
                 -c docs.status.network \
                 -p build
-                """, 
-                pure: false
+            """
             )
           }
         }

README.md

@@ -77,26 +77,6 @@ docs/
 └── other/              # Additional resources
 ```
 
-### Style Guide
-
-When contributing to the documentation, please follow these guidelines:
-
-- Use clear, concise language
-- Include code examples where applicable
-- Add screenshots or diagrams for complex concepts
-- Follow the existing document structure
-- Use appropriate frontmatter for all markdown files
-
-Example markdown frontmatter:
-```md
----
-id: page-id
-title: Page Title
-description: Brief description of the page
-sidebar_position: 1
----
-```
-
 ---
 
 Made with ❤️ by the Status Network community

docs/general-info/add-status-network.md

@@ -1 +1,84 @@
-# Add Status Network
+# Add Status Network
+
+This guide shows how to add the **Status Network** to your wallet.
+
+## Testnet
+
+To add **Status Network Testnet** as a custom network to MetaMask:
+
+1. **Open MetaMask**:
+
+   - Click on the MetaMask extension icon in your browser to open it.
+
+2. **Access the Network Settings**:
+
+   - Click on the network selection dropdown at the top of the MetaMask window.
+
+3. **Add a New Network**:
+
+   - Click on **"Add network"**.
+   - In the new window, click on **"Add a network manually"**.
+
+4. **Enter Network Details**:
+
+   - Fill in the following information:
+
+     | Name             | Value                                    |
+     |------------------|------------------------------------------|
+     | **Network Name** | Status Network Testnet                   |
+     | **RPC URL**      |      |
+     | **Chain ID**     |                                   |
+     | **Currency Symbol** | `ETH`                                 |
+     | **Block Explorer URL** |  |
+
+5. **Save the Network**:
+
+   - Click **"Save"** to add the Status Network Testnet to your MetaMask wallet.
+
+You should now be able to connect to the Status Network Testnet by selecting it from the network dropdown menu.
+
+---
+
+## Mobile Wallets
+
+### Adding Status Network to MetaMask Mobile
+
+1. **Open MetaMask Mobile App**:
+
+   - Launch the MetaMask app on your mobile device.
+
+2. **Access Settings**:
+
+   - Tap on the hamburger menu (three horizontal lines) in the top left corner.
+   - Select **"Settings"**.
+
+3. **Add a New Network**:
+
+   - Tap on **"Networks"**.
+   - Tap on **"Add Network"**.
+
+4. **Enter Network Details**:
+
+   - Input the same network details as mentioned above for Testnet.
+
+5. **Save the Network**:
+
+   - Tap **"Add"** to save the new network.
+
+---
+
+## Additional Information
+
+- **Official Links**:
+
+  - [Status Network Website](https://status.network/)
+  - [Status Network Documentation](https://docs.status.network/)
+  - [Status Network Explorer](#)
+
+- **Need Help?**
+
+  - If you encounter any issues, please join our [Community Discord](https://discord.gg/status_im).
+
+---
+
+By following this guide, you've successfully added the Status Network to your MetaMask wallet!

docs/general-info/network-details.md

@@ -1 +1,12 @@
-# Network Details
+# Network Details
+
+## Status Testnet
+
+| Name                | Value |
+|---------------------|-------|
+| **Network Name**    |       |
+| **RPC Endpoint**    |       |
+| **Chain ID**        |       |
+| **Currency Symbol** |       |
+| **Block Explorer**  |       |
+| **Bridge**          |       |

docs/index.md

@@ -5,4 +5,24 @@ slug: /
 sidebar_position: 1
 ---
 
-# Introducing Status Network
+# Welcome to Status Network
+
+Welcome to **Status Network**, the crypto social playground that reimagines your blockchain experience! Built as an **EVM-equivalent Ethereum Layer 2 rollup** on [Linea's cutting-edge ZK-EVM technology](https://docs.linea.build/architecture), Status Network offers unique features that set us apart from other platforms.
+
+## What Makes Us Unique?
+
+### 💰 Native ETH and DAI Yield
+
+Enjoy sustainable and attractive yields on your **ETH** and **DAI** assets! We offer native yield generation, a distinctive feature among Layer 2 solutions, allowing you to enhance your crypto holdings effortlessly while participating in the network.
+
+### 🏆 Earn $AURA Tokens
+
+Get rewarded for your engagement in **real time**! Participate in network activities and **stake $SNT** to earn **$AURA tokens**. The more you interact—be it through transactions, staking, or community involvement—the more influence you gain within our vibrant community. Your $AURA amplifies your voice in shaping the future of the network.
+
+### 🔒 Privacy with a Playful Twist
+
+Experience privacy features that are both **secure and fun**! We believe that privacy is a fundamental right and should be accessible to everyone without the complexity. Our user-friendly privacy tools make secure interactions enjoyable, breaking away from traditional notions of complicated privacy tech.
+
+---
+
+Join Status Network and be part of a unique, privacy-focused, and rewarding crypto community where **your active participation truly shapes the future**! Let's build the crypto playground together!

docs/introduction/quick-start.md

@@ -1 +1,114 @@
-# Quick Start
+# Quick Start
+
+In this section, we'll get you deploying a sample contract on **Status Network Testnet** in less than 10 minutes.
+
+Let’s see how to deploy a smart contract on Status Network using the Remix IDE for simplicity.
+
+## Get Everything Ready
+
+Before getting started:
+
+- **Add Status Network Testnet to MetaMask**:
+
+  Follow the [Status Network documentation](/general-info/add-status-network) for step-by-step instructions on how to add the Status Network testnet to MetaMask. You'll need the network's RPC URL, Chain ID, and other details.
+
+- **Obtain Testnet Tokens**:
+
+  This guide assumes you have obtained testnet ETH on the Status Network. You can use the [Status Network Testnet Faucet](#) to request test tokens.
+
+We are ready to get started!
+
+## Remix & Sample Code
+
+**Remix** is a no-setup tool for developing smart contracts. It’s easy to get started, allowing a simple deployment process, debugging, interacting with smart contracts, and more. It’s a great tool to test quick changes and interact with deployed smart contracts.
+
+For the sake of this tutorial, we will be deploying the `SimpleStorage.sol` smart contract that comes as an example in Remix, but you can use any of your code.
+
+Here's the sample code:
+
+```solidity
+// SPDX-License-Identifier: MIT
+
+pragma solidity ^0.8.24;
+
+contract SimpleStorage {
+
+    uint256 number;
+    
+    function store(uint256 num) public {
+        number = num;
+    }
+
+    function retrieve() public view returns (uint256) {
+        return number;
+    }
+}
+```
+
+> **Note:** This contract lets you store a number and then read what that number is.
+
+## Steps to Deploy
+
+1. **Copy the Sample Code**:
+
+   - Copy the sample code and paste it into a new file named `SimpleStorage.sol` in Remix.
+
+2. **Compile the Smart Contract**:
+
+   - Go to the **Solidity Compiler** tab (on the left sidebar).
+   - Ensure the compiler version matches the pragma statement in your contract (`0.8.24`).
+   - Click **"Compile SimpleStorage.sol"**.
+   - You can enable **"Auto compile"** for automatic compilation whenever you change the contract code.
+
+3. **Deploy the Smart Contract**:
+
+   - Switch to the **Deploy & Run Transactions** tab.
+   - In the **"Environment"** dropdown menu, select **"Injected Provider - MetaMask"**. This connects Remix to your MetaMask wallet.
+   - MetaMask may prompt you to connect to Remix. Confirm the connection.
+   - Ensure that **Status Network Testnet** is selected in MetaMask.
+   - Under **"Contract"**, make sure `SimpleStorage` is selected.
+   - Click **"Deploy"**.
+   - MetaMask will pop up, asking you to confirm the transaction.
+   - Review the transaction details and click **"Confirm"**.
+   - Wait for the transaction to be mined. You can track the status in Remix or MetaMask.
+
+**CONGRATULATIONS!** You just deployed your first smart contract on Status Network.
+
+## Interact with Your Deployed Smart Contract
+
+1. **Access Deployed Contract**:
+
+   - In Remix, under the **"Deployed Contracts"** section, you'll see your deployed `SimpleStorage` contract.
+
+2. **Store a Number**:
+
+   - Expand the deployed contract to view its functions.
+   - In the **"store"** function input field, enter a number (e.g., `42`).
+   - Click **"transact"**.
+   - MetaMask will prompt you to confirm the transaction. Click **"Confirm"**.
+   - Wait for the transaction to be confirmed.
+
+3. **Retrieve the Number**:
+
+   - Click on the **"retrieve"** function.
+   - The stored number will display below the button.
+
+## Next Steps
+
+- **Get Support**:
+
+  - If you encounter any issues or have questions, join the community channels for assistance.
+
+## Summary
+
+You've successfully:
+
+- Set up your environment to interact with Status Network Testnet.
+- Deployed a smart contract using Remix IDE and MetaMask.
+- Interacted with your deployed contract by storing and retrieving a number.
+
+---
+
+If you want to dive deeper, consider exploring more complex smart contracts. Checkout more tutorials [here](/tutorials/ethers-tutorial).
+
+**Happy Coding!**