Feature/landing page update (#693)

* update header

* add biome formatter

* update footer

* update logo and title

* images and small style changes

* swizzle search bar and set up context

* use query only in context

* add poppins font

* update font and footer styles

* cleanup

* add "docs" title to smaller screen

* add hero component

* add and style searchbar

* style search component

* add search function to tags

* add flex wrap

* remove outline on search bar

* add breakpoint hook

* add tab icon images

* update search min width

* initial tabs component

* add tabs content to config

* style dropdown

* add close button to dropdown

* add tab content styling

* add astar button component

* add AstarButton hover effect

* add link to astar button comp

* style tabs menu for mobile

* style tab bar

* update fonts

* add socials bar component

* update and lock dependencies

* build fixes

* remove sass

* fix the build css issue

* fix remaining styles

* cleanup

* lower node version for CI compat.

* fix: button link z index

* fix: faucet link

* clean up old banners

* fix margins

* add svg icons

* add copyright padding

* fix broken link

* reset the query after opening the modal

* set "Enter" as constant

biome.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "suspicious": {
+        "noExplicitAny": "off"
+      },
+      "a11y": {
+        "noNoninteractiveTabindex": "off",
+        "useAnchorContent": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  }
+}

docs/build/EVM/index.md

@@ -1,5 +1,4 @@
 # EVM Smart Contracts
-![EVM smart contracts](/docs/build/img/evm.png)
 
 All Astar networks support EVM smart contracts except Swanky node.
 
@@ -10,4 +9,3 @@ import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocCardList items={useCurrentSidebarCategory().items}/>
-

docs/build/builder-guides/astar_features/astarBase.md

@@ -10,7 +10,7 @@ This cookbook will learn you on how to started using AstarBase. AstarBase is an
 
 ## What is AstarBase
 
-AstarBase is an on-chain EVM database. AstarBase contains the mapping of users's EVM and native address. An EVM address is usually referred as a Metamask address or H160, native address can be referred as a SS58 address. These two are now interchangeable through the mapping that AstarBase offers. 
+AstarBase is an on-chain EVM database. AstarBase contains the mapping of users's EVM and native address. An EVM address is usually referred as a Metamask address or H160, native address can be referred as a SS58 address. These two are now interchangeable through the mapping that AstarBase offers.
 
 The main goal of AstarBase is creating more end-user cases for users to participate in the Astar ecosystem by offering some mechanisms such as rewarding users easily.
 
@@ -19,8 +19,8 @@ The main goal of AstarBase is creating more end-user cases for users to particip
 We have three major functions in AstarBase.
 
 ```jsx
-function isRegistered(address evmAddress) 
-    external view 
+function isRegistered(address evmAddress)
+    external view
     returns (bool);
 ```
 This code snippet checks if the given address was registered in AstarBase.
@@ -41,7 +41,7 @@ This code snippet checks if the pair of addresses (SS58 & EVM) is an active stak
 
 ## Create a simple dApp using AstarBase
 
-We will work on a simple “Hello World” dApp which has a simple frontend to show a practical use case of AstarBase. 
+We will work on a simple “Hello World” dApp which has a simple frontend to show a practical use case of AstarBase.
 
 Our showcase checks if certain user is a registered user in AstarBase. One application of this would be to pick a loyal user.
 
@@ -384,7 +384,7 @@ const address = "0xF183f51D3E8dfb2513c15B046F848D4a68bd3F5D";
 ```
 
 ### Step 6:
-We will combine all what we wrote in the previous steps. For #EVM_ADDRESS, you can replace it with your specified address in EVM format. 
+We will combine all what we wrote in the previous steps. For #EVM_ADDRESS, you can replace it with your specified address in EVM format.
 
 ```jsx
 const smartContract = new web3.eth.Contract(abi, address);
@@ -397,7 +397,7 @@ That’s a wrap! Happy hacking!
 
 ## Reference
 
-- Official Document for AstarBase: 
-   - [/docs/build/evm/astarbase/](/docs/build/evm/astarbase/)
+- Official Document for AstarBase:
+   - [/docs/build/EVM/astarbase/](/docs/build/EVM/astarbase/)
 - Official Document for creating a React app:
    - [https://reactjs.org/docs/create-a-new-react-app.html](https://reactjs.org/docs/create-a-new-react-app.html)

docs/build/builder-guides/hacking/general.md

@@ -3,7 +3,6 @@ sidebar_position: 1
 ---
 
 # General
-![banner](/docs/build/img/gradient5.jpg)
 
 Please read the linked chapter and try to answer questions. If you can't find the answer, go to the [Astar Discord server](https://discord.gg/invite/AstarNetwork) and ask the question in the general channel under the Developer Support category.
 

docs/build/builder-guides/hacking/hack_evm.md

@@ -5,7 +5,6 @@ import CustomNet from './img/custom_net.png'
 import Zombie from './img/zombie.png'
 
 # Hack EVM Smart Contracts
-![banner](/docs/build/img/gradient2.jpg)
 
 Read the linked chapters or use tutorials to be able to answer following questions:
 
@@ -30,4 +29,4 @@ The Truffle and Hardhat are preferred tools to develop, deploy and test smart co
 Setup your Hardhat environment using [How to use Hardhat to deploy on Shibuya](/docs/build/builder-guides/astar_features/use_hardhat).
 
 
-What is [next](/docs/build/builder-guides/hacking/next)? 
+What is [next](/docs/build/builder-guides/hacking/next)?

docs/build/builder-guides/hacking/hack_wasm.md

@@ -3,7 +3,6 @@ sidebar_position: 2
 ---
 
 # Hack Wasm Smart Contracts
-![banner](/docs/build/img/gradient4.jpg)
 
 Read the linked chapters or use tutorials to be able to answer following questions:
 
@@ -19,7 +18,7 @@ Read the linked chapters or use tutorials to be able to answer following questio
 * Can you unit test ink! smart contract without running test node like Swanky-node?
 
 ## Run [Swanky](https://github.com/AstarNetwork/swanky-node) Node
-* Start your Swanky node and connect [polkadot-JS UI](https://polkadot.js.org/apps/?rpc=ws%3A%2F%2F127.0.0.1%3A9944#/explorer) to it. Please note that for Swanky node there will be no node production if there is no interaction with it. 
+* Start your Swanky node and connect [polkadot-JS UI](https://polkadot.js.org/apps/?rpc=ws%3A%2F%2F127.0.0.1%3A9944#/explorer) to it. Please note that for Swanky node there will be no node production if there is no interaction with it.
 
 :::note
 
@@ -37,4 +36,4 @@ Depending on your confidence, use any of these tutorial. If you are just startin
   * Use Polkadot-JS UI to reload same contract you just deployed using Contracts-UI.
 
 
-What is [next](/docs/build/builder-guides/hacking/next)? 
+What is [next](/docs/build/builder-guides/hacking/next)?

docs/build/builder-guides/hacking/index.md

@@ -1,6 +1,5 @@
 # Astar Hacker Guide
-![banner](/docs/build/img/gradient8.jpg)
-Welcome to Web3! 
+Welcome to Web3!
 ## What is this Guide all about?
 This guide will navigate you through the Astar Documentation to jump start your development journey. We are aware of the complexity of the subject and want to encourage and support you on your Web3 journey.
 This Astar Hacker Guide can be used for:

docs/build/builder-guides/index.md

@@ -1,10 +1,8 @@
 # Builder Guides
-![Additional information to help developing on Astar Network](/docs/build/img/builderguides.png)
 
 <br/>
 
 import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocCardList items={useCurrentSidebarCategory().items}/>
-

docs/build/dapp-staking/index.md

@@ -16,7 +16,7 @@ If you are interested in developing on top of dApp Staking and integrating dApp
 
 Learn how to integrate dApp staking into your EVM dApp in the precompiles chapter:
 
-- [EVM Precompiled Contracts](/docs/build/evm/precompiles/staking/)
+- [EVM Precompiled Contracts](/docs/build/EVM/precompiles/staking/)
 
 ### Other page may be of interest:
 

docs/build/environment/index.md

@@ -1,11 +1,10 @@
 import Figure from "/src/components/figure"
 
 # Set up the Development Environment
-<Figure src={require('/docs/build/img/environment.png').default} width="100%" /> 
 
 Knowledge about how to set up various environments is not required before you get started, however, it may be helpful to review the following sections to learn more about the purpose of each Environment, and their specific requirements.
 
-For example, to build and test Wasm smart contracts, an ink! Environment with a Swanky node is appropriate. On the zkEVM, a [different kind of environment](/docs/build/zkEVM/quickstart/) is required. 
+For example, to build and test Wasm smart contracts, an ink! Environment with a Swanky node is appropriate. On the zkEVM, a [different kind of environment](/docs/build/zkEVM/quickstart/) is required.
 
 When you are ready to deploy a smart contract to production, you can use the information contained within this section to configure an RPC endpoint.
 
@@ -15,4 +14,3 @@ import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocCardList items={useCurrentSidebarCategory().items}/>
-

docs/build/index.md

@@ -1,19 +1,13 @@
-import build from '/docs/build/img/build.png'
-
 # Build on Astar
 
-<div style={{textAlign: 'center'}}>
-  <img src={build} caption="Documentation of all the resources builders need in order to start testing, deploying and interacting with smart contracts on the Astar network" style={{width: 1200}} />
-  </div>
-
 ## Why build on Astar?
 
-Astar is a interoperable smart contract platform providing native access to both the Polkadot and Ethereum blockchain ecosystems and supporting both Wasm and EVM environments on its Layer 2 scaling and Parachain-based networks. 
+Astar is a interoperable smart contract platform providing native access to both the Polkadot and Ethereum blockchain ecosystems and supporting both Wasm and EVM environments on its Layer 2 scaling and Parachain-based networks.
 
 ## Astar Network Key Features:
 
 ✅ Stable & scalable blockchain APIs <br/>
-✅ Flexibility to deploy dApps on the platform and ecosystem that best suits their needs, while retaining interoperability with others. <br/> 
+✅ Flexibility to deploy dApps on the platform and ecosystem that best suits their needs, while retaining interoperability with others. <br/>
 ✅ Familiar Tools and Libraries (Remix, Hardhat, Open Zeppelin) <br/>
 ✅ Social & biometric login and recovery (Google, x.com, LINE, Kakao, [Banana](/docs/build/integrations/account-abstraction/banana/)) <br/>
 ✅ Gasless payments ([Gelato](/docs/build/zkEVM/integrations/account-abstraction/relayers/gelato-relay), [Safe](/docs/build/zkEVM/integrations/account-abstraction/safe--aa/))<br/>
@@ -29,7 +23,7 @@ Astar network's innovative Build2Earn program allows developers to earn a basic
 See the [Wasm chapter](/docs/build/wasm) for more information.
 
 ## EVM smart contracts
-Solidity developers feel right at home building on Astar in both the Polkadot and Ethereum ecosystems. See the [EVM](/docs/build/evm) or [zkEVM](/docs/build/zkEVM) sections for more information.
+Solidity developers feel right at home building on Astar in both the Polkadot and Ethereum ecosystems. See the [EVM](/docs/build/EVM) or [zkEVM](/docs/build/zkEVM) sections for more information.
 
 ## Secured by Polkadot and Ethereum
 Polkadot and Ethereum networks provide some of the best security guarantees in the web3 industry.

docs/build/introduction/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Introduction",
+  "position": 1
+}

docs/build/Introduction/index.md → docs/build/introduction/index.md

@@ -1,9 +1,8 @@
 # Introduction
-![General understanding of programming basics](/docs/build/img/introduction.png)
 
-To make use of this documentation effectively, you should possess a general understanding of programming basics. The programming languages used throughout are mainly Rust and JavaScript, for which previous knowledge is not necessary, but would be highly beneficial. You should also know how to use MetaMask, manage accounts and balances, and interact with the Ethereum Virtual Machine. 
+To make use of this documentation effectively, you should possess a general understanding of programming basics. The programming languages used throughout are mainly Rust and JavaScript, for which previous knowledge is not necessary, but would be highly beneficial. You should also know how to use MetaMask, manage accounts and balances, and interact with the Ethereum Virtual Machine.
 
-In conjunction with improving your understanding of the material contained within these guides, we recommend that you review supplemental material covering these languages, in order to improve your overall understanding of the topics and the practical code examples provided. 
+In conjunction with improving your understanding of the material contained within these guides, we recommend that you review supplemental material covering these languages, in order to improve your overall understanding of the topics and the practical code examples provided.
 
 ### Do I need blockchain knowledge to follow this documentation?
 Your blockchain knowledge will be useful but if you are reading this that means you are on the right track.
@@ -12,4 +11,4 @@ Your blockchain knowledge will be useful but if you are reading this that means
 If you are already a builder on Polkadot/Kusama ecosystem you can most likely skip the Introduction chapter. It is recommended, however, that you read about our available Networks.
 
 ### Do I need to be a developer to understand Introduction chapter?
-To use this introduction chapter you do not need any programming skills, and it will be useful later when you step into more advanced topics. 
+To use this introduction chapter you do not need any programming skills, and it will be useful later when you step into more advanced topics.

docs/build/Introduction/polkadot_relay.md → docs/build/introduction/polkadot_relay.md

@@ -11,7 +11,7 @@ Astar is a blockchain connected to Polkadot Relay chain, specialized for:
 * Executing all types of smart contracts.
 * Providing a hybrid EVM + Wasm environment with interoperability.
 * Incentivizing ecosystem innovation and providing basic income for dApp developers.
-* Seamlessly aggregating features or assets from parachains in the ecosystem. 
+* Seamlessly aggregating features or assets from parachains in the ecosystem.
 
 ## Blockchain Basics
 A blockchain is a decentralized ledger that records information in a sequence of blocks. The information contained in a block is an ordered set of instructions that may or may not result in a change in state.
@@ -30,11 +30,11 @@ Ok, you can’t learn it all in one minute. But how about in 5 minutes? Have a l
 <iframe width="100%" height="500" src="https://www.youtube.com/embed/BQ60bTU1bPg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
 ## How the Relay Chain Works
-The Polkadot network uses a sharded model where shards - called "parachains", allow transactions to be processed in parallel instead of sequentially. Each parachain in the network has a unique state transition function. Polkadot is a Relay Chain acting as the main chain of the system. 
+The Polkadot network uses a sharded model where shards - called "parachains", allow transactions to be processed in parallel instead of sequentially. Each parachain in the network has a unique state transition function. Polkadot is a Relay Chain acting as the main chain of the system.
 
 Parachains construct and propose blocks to validators on the Relay Chain, where the blocks undergo rigorous availability and validity checks before being added to the finalized chain. As the Relay Chain provides the security guarantees, collators - full nodes of these parachains - don't have any security responsibilities, and thus do not require a robust incentive system. This is how the entire network stays up to date with the many transactions that take place.
 
-## Substrate 
+## Substrate
 Based on Polkadot's design, as long as a chain's logic can compile to Wasm and adheres to the Relay Chain API, then it can connect to the Polkadot network as a parachain.
 However, the majority of parachains today are built using [Substrate](https://substrate.io/) because Substrate-based chains are easy to integrate into Polkadot or Kusama to become a parachain. Essentially, Substrate is the SDK which can be used to build parachains and Polkadot is the means of securing the chains and allowing them to communicate with each other.
 
@@ -56,10 +56,7 @@ A **smart contract** is a program that runs on a blockchain and executes transac
 The Polkadot runtime does not support smart contracts. Smart contracts require a Virtual Machine (VM) environment where contracts can be executed, and the most well-known and widely supported platform being the Ethereum Virtual Machine (EVM). Substrate FRAME contains modules that support Wasm smart contract execution, as well as EVM.
 
 ### Ethereum Virtual Machine (EVM)
-The Ethereum Virtual Machine (EVM) is a virtual computer with components that enable Ethereum network participants to store data and agree on the state of that data. On a Substrate-based blockchain, the core responsibilities of the EVM are implemented in the EVM pallet, that's responsible for executing Ethereum contract bytecode written in a high level language like Solidity. Astar EVM provides a fully Ethereum Virtual Machine compatible platform, which you can learn more about in the [EVM chapter](/docs/build/evm). 
+The Ethereum Virtual Machine (EVM) is a virtual computer with components that enable Ethereum network participants to store data and agree on the state of that data. On a Substrate-based blockchain, the core responsibilities of the EVM are implemented in the EVM pallet, that's responsible for executing Ethereum contract bytecode written in a high level language like Solidity. Astar EVM provides a fully Ethereum Virtual Machine compatible platform, which you can learn more about in the [EVM chapter](/docs/build/EVM).
 
 ### Substrate Virtual Machine for Wasm Contracts
-Substrate also ships with a module for smart contracts, called `pallet-contracts`. If a parachain is developed on Substrate it can easily add smart contract functionality by including this pallet. Astar supports this Polkadot Native approach to smart contracts, and you can learn more in the [Wasm chapter](/docs/build/wasm). 
-
-
-
+Substrate also ships with a module for smart contracts, called `pallet-contracts`. If a parachain is developed on Substrate it can easily add smart contract functionality by including this pallet. Astar supports this Polkadot Native approach to smart contracts, and you can learn more in the [Wasm chapter](/docs/build/wasm).

docs/build/wasm/index.md

@@ -1,7 +1,5 @@
 # Wasm Smart Contracts
 
-![Wasm Smart Contracts](/docs/build/img/wasm.png)
-
 The **Wasm** section covers the Wasm stack on Astar/Shiden, some more advanced topics, and contains a few tutorials to help you build and deploy Wasm smart contracts.
 
 If you would like to start building right away, we encourage you to check out [**Swanky Suite**](./swanky-suite) - The all-in-one tool for Wasm smart contract developers within the Polkadot ecosystem.
@@ -12,4 +10,3 @@ import DocCardList from '@theme/DocCardList';
 import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
 <DocCardList items={useCurrentSidebarCategory().items}/>
-

docs/build/zkEVM/index.md

@@ -1,11 +1,5 @@
-import introduction from "/docs/build/img/buildZkEvm.png" 
-
 # Build on Astar zkEVM
 
-<div style={{textAlign: 'center'}}>
-    <img src={introduction} style={{width: 1200}} />
-</div>
-
 ## What is Astar zkEVM?
 
 Astar zkEVM is an Ethereum Layer-2 scaling solution leveraging Polygon's Chain Development Kit and cutting edge zero-knowledge cryptography to enable off-chain transaction execution, with finality and security guarantees provided by Ethereum. In coordination with our key partners, Astar zkEVM is well-positioned to take advantage of the extensive developer base and well-established toolset existing in the Ethereum ecosystem, and boasts the following key features:
@@ -15,7 +9,7 @@ Astar zkEVM is an Ethereum Layer-2 scaling solution leveraging Polygon's Chain D
 - **Native Account Abstraction** - The Astar zkEVM provides native features designed to revolutionize the end-user experience, and make it seamless. See the [Account Abstraction section](/docs/build/zkEVM/integrations/account-abstraction/) to learn more about how to refine the end-user experience.
 - **Recognized Partners** - Established names and brands that developers trust power the Astar zkEVM. See the [integrations section](/docs/build/zkEVM/integrations/) for more information about 3rd party service providers.
 - **Interoperability and Exposure** - With Astar zkEVM, we are supporting interoperability between the Ethereum and Polkadot ecosystems, uniting communities, and empowering web3 accessibility through a common Multichain vision.
-- **Established Tools and Libraries** - Compatible with the tools web3 developers already know how to use, such as Remix, Hardhat, and Open Zeppelin. 
+- **Established Tools and Libraries** - Compatible with the tools web3 developers already know how to use, such as Remix, Hardhat, and Open Zeppelin.
 
 ## Section Overview