feat(web): add network subpages and subdomains listing page

- Add /subdomains page listing all 20 PezkuwiChain subdomains
- Add Back to Home button to Subdomains page
- Create NetworkPage reusable component for network details
- Add 7 network subpages: /mainnet, /staging, /testnet, /beta, /alfa, /development, /local
- Update ChainSpecs network cards to navigate to network subpages
- Add i18n translations for chainSpecs section in en.ts
- Add SDK docs with rebranding support (rebrand-rustdoc.cjs)
- Add generate-docs-structure.cjs for automatic docs generation
- Update shared libs: endpoints, polkadot, wallet, xcm-bridge
- Add new token logos: TYR, ZGR, pezkuwi_icon
- Add new pages: Explorer, Docs, Wallet, Api, Faucet, Developers, Grants, Wiki, Forum, Telemetry

web/src/pages/networks/Alfa.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import NetworkPage from './NetworkPage';
+
+const Alfa: React.FC = () => {
+  return (
+    <NetworkPage
+      id="alfa"
+      name="Alfa Testnet"
+      type="Development"
+      description="Early-stage testing network for experimental features and internal testing"
+      endpoint="wss://alfa.pezkuwichain.io"
+      chainId="pezkuwichain-alfa"
+      validators={5}
+      features={[
+        'Experimental Features',
+        'Early Access',
+        'Internal Testing',
+        'Rapid Changes',
+        'Developer Preview',
+        'Unstable'
+      ]}
+      color="from-red-600 to-red-800"
+      status="coming-soon"
+      blockTime="~6s"
+      finality="~12s"
+      consensus="TNPoS"
+    />
+  );
+};
+
+export default Alfa;

web/src/pages/networks/Beta.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import NetworkPage from './NetworkPage';
+
+const Beta: React.FC = () => {
+  return (
+    <NetworkPage
+      id="beta"
+      name="Beta Testnet"
+      type="Development"
+      description="Active development testnet with the latest features and improvements"
+      endpoint="wss://rpc.pezkuwichain.io:9944"
+      chainId="pezkuwichain-beta"
+      validators={7}
+      features={[
+        'Latest Features',
+        'Active Development',
+        'Fast Iterations',
+        'Community Access',
+        'Bug Hunting',
+        'Feature Feedback'
+      ]}
+      color="from-orange-600 to-orange-800"
+      status="active"
+      blockTime="~6s"
+      finality="~12s"
+      consensus="TNPoS"
+    />
+  );
+};
+
+export default Beta;

web/src/pages/networks/Development.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import NetworkPage from './NetworkPage';
+
+const Development: React.FC = () => {
+  return (
+    <NetworkPage
+      id="development"
+      name="Development Environment"
+      type="Development"
+      description="Internal development network for core team feature development"
+      endpoint="wss://dev.pezkuwichain.io"
+      chainId="pezkuwichain-dev"
+      validators={3}
+      features={[
+        'Core Development',
+        'Feature Prototyping',
+        'Internal Only',
+        'Frequent Resets',
+        'Debug Mode',
+        'Hot Reloading'
+      ]}
+      color="from-yellow-600 to-yellow-800"
+      status="coming-soon"
+      blockTime="~6s"
+      finality="~12s"
+      consensus="TNPoS"
+    />
+  );
+};
+
+export default Development;

web/src/pages/networks/Local.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import NetworkPage from './NetworkPage';
+
+const Local: React.FC = () => {
+  return (
+    <NetworkPage
+      id="local"
+      name="Local Testnet"
+      type="Local"
+      description="Run your own local PezkuwiChain node for development and testing"
+      endpoint="ws://127.0.0.1:9944"
+      chainId="pezkuwichain-local"
+      validators={1}
+      features={[
+        'Local Development',
+        'Instant Blocks',
+        'Full Control',
+        'No Network Latency',
+        'Custom Genesis',
+        'Unlimited Funds'
+      ]}
+      color="from-blue-600 to-blue-800"
+      status="active"
+      blockTime="Instant"
+      finality="Instant"
+      consensus="Dev"
+    />
+  );
+};
+
+export default Local;

web/src/pages/networks/Mainnet.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import NetworkPage from './NetworkPage';
+
+const Mainnet: React.FC = () => {
+  return (
+    <NetworkPage
+      id="mainnet"
+      name="PezkuwiChain Mainnet"
+      type="Live"
+      description="The production PezkuwiChain network with real value transactions"
+      endpoint="wss://mainnet.pezkuwichain.io"
+      chainId="pezkuwichain-mainnet"
+      validators={21}
+      features={[
+        'HEZ Native Token',
+        'Production Ready',
+        'Full Security',
+        'Governance',
+        'Staking',
+        'TNPoS Consensus',
+        'Identity & KYC',
+        'Asset Hub'
+      ]}
+      color="from-green-600 to-green-800"
+      status="coming-soon"
+      blockTime="~6s"
+      finality="~12s"
+      consensus="TNPoS"
+    />
+  );
+};
+
+export default Mainnet;

web/src/pages/networks/NetworkPage.tsx

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, Copy, Check, Server, Globe, Zap, Clock, Shield, ExternalLink, Activity } from 'lucide-react';
+
+interface NetworkPageProps {
+  id: string;
+  name: string;
+  type: 'Live' | 'Development' | 'Local';
+  description: string;
+  endpoint: string;
+  chainId: string;
+  validators: number;
+  features: string[];
+  color: string;
+  status: 'active' | 'coming-soon' | 'maintenance';
+  blockTime?: string;
+  finality?: string;
+  consensus?: string;
+}
+
+const NetworkPage: React.FC<NetworkPageProps> = ({
+  id,
+  name,
+  type,
+  description,
+  endpoint,
+  chainId,
+  validators,
+  features,
+  color,
+  status,
+  blockTime = '~6s',
+  finality = '~12s',
+  consensus = 'TNPoS'
+}) => {
+  const navigate = useNavigate();
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+
+  const copyToClipboard = (text: string, field: string) => {
+    navigator.clipboard.writeText(text);
+    setCopiedField(field);
+    setTimeout(() => setCopiedField(null), 2000);
+  };
+
+  const statusColors = {
+    'active': 'bg-green-500/20 text-green-400 border-green-500/30',
+    'coming-soon': 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+    'maintenance': 'bg-red-500/20 text-red-400 border-red-500/30'
+  };
+
+  const statusLabels = {
+    'active': 'Active',
+    'coming-soon': 'Coming Soon',
+    'maintenance': 'Maintenance'
+  };
+
+  const typeColors = {
+    'Live': 'bg-green-900/30 text-green-400',
+    'Development': 'bg-yellow-900/30 text-yellow-400',
+    'Local': 'bg-blue-900/30 text-blue-400'
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-950 py-12">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Back Button */}
+        <button
+          onClick={() => navigate('/')}
+          className="flex items-center text-gray-400 hover:text-white mb-8 transition-colors"
+        >
+          <ArrowLeft className="w-5 h-5 mr-2" />
+          Back to Home
+        </button>
+
+        {/* Header */}
+        <div className="mb-10">
+          <div className="flex items-center gap-4 mb-4">
+            <div className={`p-4 rounded-xl bg-gradient-to-br ${color}`}>
+              <Globe className="w-8 h-8 text-white" />
+            </div>
+            <div>
+              <div className="flex items-center gap-3">
+                <h1 className="text-3xl md:text-4xl font-bold text-white">{name}</h1>
+                <span className={`px-3 py-1 text-sm rounded-full ${typeColors[type]}`}>
+                  {type}
+                </span>
+              </div>
+              <p className="text-gray-400 mt-1">{description}</p>
+            </div>
+          </div>
+          <div className={`inline-flex items-center px-4 py-2 rounded-full border ${statusColors[status]}`}>
+            <span className="w-2 h-2 rounded-full bg-current mr-2 animate-pulse"></span>
+            {statusLabels[status]}
+          </div>
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
+          <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5 text-center">
+            <Server className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
+            <div className="text-2xl font-bold text-white">{validators}</div>
+            <div className="text-gray-400 text-sm">Validators</div>
+          </div>
+          <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5 text-center">
+            <Clock className="w-6 h-6 text-green-400 mx-auto mb-2" />
+            <div className="text-2xl font-bold text-white">{blockTime}</div>
+            <div className="text-gray-400 text-sm">Block Time</div>
+          </div>
+          <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5 text-center">
+            <Zap className="w-6 h-6 text-yellow-400 mx-auto mb-2" />
+            <div className="text-2xl font-bold text-white">{finality}</div>
+            <div className="text-gray-400 text-sm">Finality</div>
+          </div>
+          <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5 text-center">
+            <Shield className="w-6 h-6 text-purple-400 mx-auto mb-2" />
+            <div className="text-2xl font-bold text-white">{consensus}</div>
+            <div className="text-gray-400 text-sm">Consensus</div>
+          </div>
+        </div>
+
+        {/* Connection Details */}
+        <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 mb-8">
+          <h2 className="text-xl font-semibold text-white mb-6 flex items-center">
+            <Activity className="w-5 h-5 mr-2 text-cyan-400" />
+            Connection Details
+          </h2>
+
+          <div className="space-y-4">
+            <div>
+              <label className="text-gray-400 text-sm block mb-2">WebSocket Endpoint</label>
+              <div className="flex items-center">
+                <code className="flex-1 p-4 bg-gray-950 rounded-lg text-cyan-400 font-mono text-sm border border-gray-800">
+                  {endpoint}
+                </code>
+                <button
+                  onClick={() => copyToClipboard(endpoint, 'endpoint')}
+                  className="ml-3 p-3 text-gray-400 hover:text-white bg-gray-800 rounded-lg transition-colors"
+                >
+                  {copiedField === 'endpoint' ?
+                    <Check className="w-5 h-5 text-green-400" /> :
+                    <Copy className="w-5 h-5" />
+                  }
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <label className="text-gray-400 text-sm block mb-2">Chain ID</label>
+              <div className="flex items-center">
+                <code className="flex-1 p-4 bg-gray-950 rounded-lg text-purple-400 font-mono text-sm border border-gray-800">
+                  {chainId}
+                </code>
+                <button
+                  onClick={() => copyToClipboard(chainId, 'chainId')}
+                  className="ml-3 p-3 text-gray-400 hover:text-white bg-gray-800 rounded-lg transition-colors"
+                >
+                  {copiedField === 'chainId' ?
+                    <Check className="w-5 h-5 text-green-400" /> :
+                    <Copy className="w-5 h-5" />
+                  }
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Features */}
+        <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 mb-8">
+          <h2 className="text-xl font-semibold text-white mb-4">Features</h2>
+          <div className="flex flex-wrap gap-3">
+            {features.map((feature, index) => (
+              <span
+                key={index}
+                className={`px-4 py-2 rounded-full bg-gradient-to-r ${color} text-white text-sm font-medium`}
+              >
+                {feature}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {/* Code Example */}
+        <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 mb-8">
+          <h2 className="text-xl font-semibold text-white mb-4">Quick Start</h2>
+          <div className="bg-gray-950 rounded-lg p-4 border border-gray-800">
+            <pre className="text-sm overflow-x-auto">
+              <code className="text-gray-300">
+{`import { ApiPromise, WsProvider } from '@polkadot/api';
+
+const provider = new WsProvider('${endpoint}');
+const api = await ApiPromise.create({ provider });
+
+// Get chain info
+const chain = await api.rpc.system.chain();
+console.log('Connected to:', chain.toString());`}
+              </code>
+            </pre>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-wrap gap-4">
+          <a
+            href="https://explorer.pezkuwichain.io"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`flex items-center px-6 py-3 rounded-lg bg-gradient-to-r ${color} text-white font-semibold hover:opacity-90 transition-opacity`}
+          >
+            <ExternalLink className="w-5 h-5 mr-2" />
+            Open Explorer
+          </a>
+          <a
+            href="https://docs.pezkuwichain.io"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center px-6 py-3 rounded-lg bg-gray-800 text-white font-semibold hover:bg-gray-700 transition-colors border border-gray-700"
+          >
+            Documentation
+          </a>
+          {type !== 'Live' && (
+            <a
+              href="https://faucet.pezkuwichain.io"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center px-6 py-3 rounded-lg bg-cyan-600 text-white font-semibold hover:bg-cyan-700 transition-colors"
+            >
+              Get Test Tokens
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NetworkPage;

web/src/pages/networks/Staging.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import NetworkPage from './NetworkPage';
+
+const Staging: React.FC = () => {
+  return (
+    <NetworkPage
+      id="staging"
+      name="Staging Network"
+      type="Development"
+      description="Pre-production environment for final testing before mainnet deployment"
+      endpoint="wss://staging.pezkuwichain.io"
+      chainId="pezkuwichain-staging"
+      validators={14}
+      features={[
+        'Pre-Production Testing',
+        'Runtime Upgrades',
+        'Feature Validation',
+        'Security Audits',
+        'Stress Testing',
+        'Migration Testing'
+      ]}
+      color="from-purple-600 to-purple-800"
+      status="coming-soon"
+      blockTime="~6s"
+      finality="~12s"
+      consensus="TNPoS"
+    />
+  );
+};
+
+export default Staging;

web/src/pages/networks/Testnet.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import NetworkPage from './NetworkPage';
+
+const Testnet: React.FC = () => {
+  return (
+    <NetworkPage
+      id="testnet"
+      name="Public Testnet"
+      type="Development"
+      description="Public testing network for community and developers to test applications"
+      endpoint="wss://testnet.pezkuwichain.io"
+      chainId="pezkuwichain-testnet"
+      validators={10}
+      features={[
+        'Free Test Tokens',
+        'Public Access',
+        'Full Feature Set',
+        'Community Testing',
+        'dApp Development',
+        'No Real Value'
+      ]}
+      color="from-cyan-600 to-cyan-800"
+      status="coming-soon"
+      blockTime="~6s"
+      finality="~12s"
+      consensus="TNPoS"
+    />
+  );
+};
+
+export default Testnet;