feat: landing improvements

vocs/docs/pages/index.mdx

@@ -1,22 +1,180 @@
 ---
+title: alloy · Rust Ethereum
+content:
+  width: 100%
 layout: landing
+logo: false
 ---
 
 import { HomePage, Sponsors } from "vocs/components";
-import Tab from "../components/Tab";
-
-<HomePage.Root>
-  <HomePage.Logo />
-  <HomePage.Tagline>Connect Applications to Blockchains</HomePage.Tagline>
-  <Tab />
-  <HomePage.Description></HomePage.Description>
-  <HomePage.Buttons>
-    <HomePage.Button href="/getting-started/installation" variant="accent">
-      Get started
-    </HomePage.Button>
-    <HomePage.Button href="https://github.com/alloy-rs/alloy">
-      GitHub
-    </HomePage.Button>
-  </HomePage.Buttons>
-  <Sponsors />
-</HomePage.Root>
+
+<div className="max-w-[1120px] mx-auto vp-doc relative px-[24px] mb-[96px] mt-[32px] md:px-0 md:mb-[64px]">
+  <div className="pt-[48px] max-sm:pt-0">
+    <div className="max-sm:px-0 flex justify-between z-0 max-md:justify-center">
+      <div className="space-y-8 max-w-[400px] flex flex-col items-start max-md:items-center">
+        <div className="space-x-8 flex flex-row">
+        <HomePage.Logo />
+        </div>
+        <div className="font-regular text-[21px] max-sm:text-[18px] text-[#919193] max-md:text-center">Connect applications to blockchains using <span className="text-black dark:text-white">performant</span>, <span className="text-black dark:text-white">intuitive</span>, and <span className="text-black dark:text-white">battle-tested</span> APIs.</div>
+        <div className="flex justify-center space-x-2">
+          <HomePage.Button href="/getting-started/quick-start" variant="accent">Get started</HomePage.Button>
+          <HomePage.Button href="https://github.com/alloy-rs/alloy">GitHub</HomePage.Button>
+        </div>
+      </div>
+      <div id="home-install" className="w-[400px] space-y-10 max-lg:w-[300px]">        
+        ```bash [cargo]
+        cargo add alloy
+        ```
+        </div>
+    </div>
+
+  </div>
+</div>
+
+<article className="vocs_Content max-w-5xl mx-auto">
+
+# Common Actions
+
+:::code-group
+
+```rust [read_contract.rs]
+//! Demonstrates reading a contract by fetching the WETH balance of an address.
+use alloy::{primitives::address, providers::ProviderBuilder, sol};
+use eyre::Result;
+
+// Generate the contract bindings for the ERC20 interface.
+sol! {
+   // The `rpc` attribute enables contract interaction via the provider.
+   #[sol(rpc)]
+   contract ERC20 {
+        function balanceOf(address owner) public view returns (uint256);
+   }
+}
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    // Initialize the provider.
+    let provider = ProviderBuilder::new().connect("https://eth.llamarpc.com").await?;
+
+    // Instantiate the contract instance.
+    let weth = address!("0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2");
+    let erc20 = ERC20::new(weth, provider);
+
+    // Fetch the balance of WETH for a given address.
+    let owner = address!("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
+    let balance = erc20.balanceOf(owner).call().await?;
+
+    println!("WETH Balance of {owner}: {balance}");
+
+    Ok(())
+}
+```
+
+```rust [write_contract.rs]
+//! Demonstrates writing to a contract by depositing ETH to the WETH contract.
+use alloy::{
+    primitives::{
+        address,
+        utils::{format_ether, Unit},
+        U256,
+    },
+    providers::ProviderBuilder,
+    signers::local::PrivateKeySigner,
+    sol,
+};
+use eyre::Result;
+
+// Generate bindings for the WETH9 contract.
+// WETH9: <https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2>
+sol! {
+    #[sol(rpc)]
+    contract WETH9 {
+        function deposit() public payable;
+        function balanceOf(address) public view returns (uint256);
+    }
+}
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    // Initialize a signer with a private key.
+    let signer: PrivateKeySigner =
+        "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80".parse()?;
+
+    // Instantiate a provider with the signer.
+    let provider = ProviderBuilder::new()
+        // Signs transactions before dispatching them.
+        .wallet(signer)
+        // Forking mainnet using anvil to avoid spending real ETH.
+        .on_anvil_with_config(|a| a.fork("https://eth.llamarpc.com"));
+
+    // Setup WETH contract instance.
+    let weth = address!("0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2");
+    let weth = WETH9::new(weth, provider);
+
+    // Prepare deposit transaction.
+    let amt = Unit::ETHER.wei().saturating_mul(U256::from(100));
+    let deposit = weth.deposit().value(amt);
+
+    // Send the transaction and wait for it to be included.
+    let deposit_tx = deposit.send().await?;
+    let receipt = deposit_tx.get_receipt().await?;
+
+    // Check balance by verifying the deposit.
+    let balance = weth.balanceOf(receipt.from).call().await?;
+    println!("Verified balance of {:.3} WETH for {}", format_ether(balance), receipt.from);
+    Ok(())
+}
+```
+
+```rust [send_transaction.rs]
+//! Send a transaction transferring ETH.
+use alloy::{
+    network::TransactionBuilder,
+    primitives::{
+        address,
+        utils::{format_ether, Unit},
+        U256,
+    },
+    providers::{Provider, ProviderBuilder},
+    rpc::types::TransactionRequest,
+    signers::local::PrivateKeySigner,
+};
+use eyre::Result;
+
+#[tokio::main]
+async fn main() -> Result<()> {
+    // Initialize a signer with a private key.
+    let signer: PrivateKeySigner =
+        "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80".parse()?;
+
+    // Instantiate a provider with the signer.
+    // This example uses a local Anvil node.
+    let provider = ProviderBuilder::new().wallet(signer).connect("http://localhost:8545").await?;
+
+    // Prepare a transaction request to send 100 ETH to Alice.
+    let alice = address!("0x70997970C51812dc3A010C7d01b50e0d17dc79C8");
+    let value = Unit::ETHER.wei().saturating_mul(U256::from(100));
+    let tx = TransactionRequest::default().with_to(alice).with_value(value);
+
+    // Send the transaction and wait for the broadcast.
+    let pending_tx = provider.send_transaction(tx).await?;
+    println!("Pending transaction... {}", pending_tx.tx_hash());
+
+    // Wait for the transaction to be included and get the receipt.
+    let receipt = pending_tx.get_receipt().await?;
+    println!(
+        "Transaction included in block {}",
+        receipt.block_number.expect("Failed to get block number")
+    );
+
+    println!("Transferred {:.5} ETH to {alice}", format_ether(value));
+
+    Ok(())
+}
+```
+
+:::
+
+<Sponsors />
+
+</article>

vocs/docs/styles.css

@@ -0,0 +1,27 @@
+@import "tailwindcss" important;
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+[data-layout="landing"] .vocs_Button_button {
+  border-radius: 4px !important;
+  height: 36px !important;
+  padding: 0 16px !important;
+}
+
+[data-layout="landing"] .vocs_Content {
+  position: inherit;
+}
+
+#home-install .vocs_CodeGroup {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+#home-install .vocs_Tabs_content {
+  flex: 1;
+}
+
+#home-install .vocs_Code {
+  font-size: 18px;
+}

vocs/vocs.config.tsx

@@ -39,5 +39,28 @@ export default defineConfig({
   socials: [
     { icon: 'github', link: "https://github.com/alloy-rs/alloy" },
     { icon: 'telegram', link: "https://t.me/ethers_rs" },
+  ],
+  topNav: [
+    { 
+      text: 'Docs',
+      link: '/getting-started/quick-start',
+    },
+    {
+      text: 'Examples',
+      link: 'https://github.com/alloy-rs/examples',
+    },
+    { 
+      text: '0.14.0', 
+      items: [ 
+        { 
+          text: 'Changelog', 
+          link: 'https://github.com/alloy-rs/alloy/blob/main/CHANGELOG.md', 
+        }, 
+        { 
+          text: 'Contributing', 
+          link: 'https://github.com/alloy-rs/alloy/blob/main/CONTRIBUTING.md', 
+        }, 
+      ], 
+    }, 
   ]
 })