diff --git a/website/Cargo.lock b/website/Cargo.lock
new file mode 100644
index 0000000..3505d68
--- /dev/null
+++ b/website/Cargo.lock
@@ -0,0 +1,1372 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 4
+
+[[package]]
+name = "addr2line"
+version = "0.24.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dfbe277e56a376000877090da837660b4427aad530e3028d44e0bffe4f89a1c1"
+dependencies = [
+ "gimli",
+]
+
+[[package]]
+name = "adler2"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
+
+[[package]]
+name = "anymap2"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c"
+
+[[package]]
+name = "backtrace"
+version = "0.3.75"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6806a6321ec58106fea15becdad98371e28d92ccbc7c8f1b3b6dd724fe8f1002"
+dependencies = [
+ "addr2line",
+ "cfg-if",
+ "libc",
+ "miniz_oxide",
+ "object",
+ "rustc-demangle",
+ "windows-targets",
+]
+
+[[package]]
+name = "bincode"
+version = "1.3.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b1f45e9417d87227c7a56d22e471c6206462cba514c7590c09aff4cf6d1ddcad"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "bitflags"
+version = "2.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b8e56985ec62d17e9c1001dc89c88ecd7dc08e47eba5ec7c29c7b5eeecde967"
+
+[[package]]
+name = "boolinator"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
+
+[[package]]
+name = "bumpalo"
+version = "3.19.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "46c5e41b57b8bba42a04676d81cb89e9ee8e859a1a66f80a5a72e1cb76b34d43"
+
+[[package]]
+name = "bytes"
+version = "1.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d71b6127be86fdcfddb610f7182ac57211d4b18a3e9c82eb2d17662f2227ad6a"
+
+[[package]]
+name = "cfg-if"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9555578bc9e57714c812a1f84e4fc5b4d21fcb063490c624de019f7464c91268"
+
+[[package]]
+name = "console_error_panic_hook"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "equivalent"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"
+
+[[package]]
+name = "fnv"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
+
+[[package]]
+name = "form_urlencoded"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e13624c2627564efccf4934284bdd98cbaa14e79b0b5a141218e507b3a823456"
+dependencies = [
+ "percent-encoding",
+]
+
+[[package]]
+name = "freezone-website"
+version = "0.1.0"
+dependencies = [
+ "gloo 0.11.0",
+ "gloo-timers 0.3.0",
+ "js-sys",
+ "pulldown-cmark",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router",
+]
+
+[[package]]
+name = "futures"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "65bc07b1a8bc7c85c5f2e110c476c7389b4554ba72af57d8445ea63a576b0876"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-sink",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-channel"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2dff15bf788c671c1934e366d07e30c1814a8ef514e1af724a602e8a2fbe1b10"
+dependencies = [
+ "futures-core",
+ "futures-sink",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
+
+[[package]]
+name = "futures-io"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9e5c1b78ca4aae1ac06c48a526a655760685149f0d465d21f37abfe57ce075c6"
+
+[[package]]
+name = "futures-macro"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "162ee34ebcb7c64a8abebc059ce0fee27c2262618d7b60ed8faf72fef13c3650"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "futures-sink"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e575fab7d1e0dcb8d0c7bcf9a63ee213816ab51902e6d244a95819acacf1d4f7"
+
+[[package]]
+name = "futures-task"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f90f7dce0722e95104fcb095585910c0977252f286e354b5e3bd38902cd99988"
+
+[[package]]
+name = "futures-util"
+version = "0.3.31"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9fa08315bb612088cc391249efdc3bc77536f16c91f6cf495e6fbe85b20a4a81"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-macro",
+ "futures-sink",
+ "futures-task",
+ "memchr",
+ "pin-project-lite",
+ "pin-utils",
+ "slab",
+]
+
+[[package]]
+name = "getopts"
+version = "0.2.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cba6ae63eb948698e300f645f87c70f76630d505f23b8907cf1e193ee85048c1"
+dependencies = [
+ "unicode-width",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "335ff9f135e4384c8150d6f27c6daed433577f86b4750418338c01a1a2528592"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "libc",
+ "wasi",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gimli"
+version = "0.31.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07e28edb80900c19c28f1072f2e8aeca7fa06b23cd4169cefe1af5aa3260783f"
+
+[[package]]
+name = "gloo"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "28999cda5ef6916ffd33fb4a7b87e1de633c47c0dc6d97905fee1cdaa142b94d"
+dependencies = [
+ "gloo-console 0.2.3",
+ "gloo-dialogs 0.1.1",
+ "gloo-events 0.1.2",
+ "gloo-file 0.2.3",
+ "gloo-history 0.1.5",
+ "gloo-net 0.3.1",
+ "gloo-render 0.1.1",
+ "gloo-storage 0.2.2",
+ "gloo-timers 0.2.6",
+ "gloo-utils 0.1.7",
+ "gloo-worker 0.2.1",
+]
+
+[[package]]
+name = "gloo"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cd35526c28cc55c1db77aed6296de58677dbab863b118483a27845631d870249"
+dependencies = [
+ "gloo-console 0.3.0",
+ "gloo-dialogs 0.2.0",
+ "gloo-events 0.2.0",
+ "gloo-file 0.3.0",
+ "gloo-history 0.2.2",
+ "gloo-net 0.4.0",
+ "gloo-render 0.2.0",
+ "gloo-storage 0.3.0",
+ "gloo-timers 0.3.0",
+ "gloo-utils 0.2.0",
+ "gloo-worker 0.4.0",
+]
+
+[[package]]
+name = "gloo"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d15282ece24eaf4bd338d73ef580c6714c8615155c4190c781290ee3fa0fd372"
+dependencies = [
+ "gloo-console 0.3.0",
+ "gloo-dialogs 0.2.0",
+ "gloo-events 0.2.0",
+ "gloo-file 0.3.0",
+ "gloo-history 0.2.2",
+ "gloo-net 0.5.0",
+ "gloo-render 0.2.0",
+ "gloo-storage 0.3.0",
+ "gloo-timers 0.3.0",
+ "gloo-utils 0.2.0",
+ "gloo-worker 0.5.0",
+]
+
+[[package]]
+name = "gloo-console"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82b7ce3c05debe147233596904981848862b068862e9ec3e34be446077190d3f"
+dependencies = [
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-console"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2a17868f56b4a24f677b17c8cb69958385102fa879418052d60b50bc1727e261"
+dependencies = [
+ "gloo-utils 0.2.0",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-dialogs"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67062364ac72d27f08445a46cab428188e2e224ec9e37efdba48ae8c289002e6"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-dialogs"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bf4748e10122b01435750ff530095b1217cf6546173459448b83913ebe7815df"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-events"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68b107f8abed8105e4182de63845afcc7b69c098b7852a813ea7462a320992fc"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-events"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27c26fb45f7c385ba980f5fa87ac677e363949e065a083722697ef1b2cc91e41"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-file"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a8d5564e570a38b43d78bdc063374a0c3098c4f0d64005b12f9bbe87e869b6d7"
+dependencies = [
+ "gloo-events 0.1.2",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-file"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97563d71863fb2824b2e974e754a81d19c4a7ec47b09ced8a0e6656b6d54bd1f"
+dependencies = [
+ "futures-channel",
+ "gloo-events 0.2.0",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-history"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85725d90bf0ed47063b3930ef28e863658a7905989e9929a8708aab74a1d5e7f"
+dependencies = [
+ "gloo-events 0.1.2",
+ "gloo-utils 0.1.7",
+ "serde",
+ "serde-wasm-bindgen 0.5.0",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-history"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "903f432be5ba34427eac5e16048ef65604a82061fe93789f2212afc73d8617d6"
+dependencies = [
+ "getrandom",
+ "gloo-events 0.2.0",
+ "gloo-utils 0.2.0",
+ "serde",
+ "serde-wasm-bindgen 0.6.5",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a66b4e3c7d9ed8d315fd6b97c8b1f74a7c6ecbbc2320e65ae7ed38b7068cc620"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.1.7",
+ "http",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ac9e8288ae2c632fa9f8657ac70bfe38a1530f345282d7ba66a1f70b72b7dc4"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.2.0",
+ "http",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "43aaa242d1239a8822c15c645f02166398da4f8b5c4bae795c1f5b44e9eee173"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils 0.2.0",
+ "http",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-render"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2fd9306aef67cfd4449823aadcd14e3958e0800aa2183955a309112a84ec7764"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-render"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56008b6744713a8e8d98ac3dcb7d06543d5662358c9c805b4ce2167ad4649833"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-storage"
+version = "0.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d6ab60bf5dbfd6f0ed1f7843da31b41010515c745735c970e821945ca91e480"
+dependencies = [
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-storage"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fbc8031e8c92758af912f9bc08fbbadd3c6f3cfcbf6b64cdf3d6a81f0139277a"
+dependencies = [
+ "gloo-utils 0.2.0",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-timers"
+version = "0.2.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b995a66bb87bebce9a0f4a95aed01daca4872c050bfcb21653361c03bc35e5c"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gloo-timers"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gloo-utils"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "037fcb07216cb3a30f7292bd0176b050b7b9a052ba830ef7d5d65f6dc64ba58e"
+dependencies = [
+ "js-sys",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-utils"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b5555354113b18c547c1d3a98fbf7fb32a9ff4f6fa112ce823a21641a0ba3aa"
+dependencies = [
+ "js-sys",
+ "serde",
+ "serde_json",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13471584da78061a28306d1359dd0178d8d6fc1c7c80e5e35d27260346e0516a"
+dependencies = [
+ "anymap2",
+ "bincode",
+ "gloo-console 0.2.3",
+ "gloo-utils 0.1.7",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker"
+version = "0.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76495d3dd87de51da268fa3a593da118ab43eb7f8809e17eb38d3319b424e400"
+dependencies = [
+ "bincode",
+ "futures",
+ "gloo-utils 0.2.0",
+ "gloo-worker-macros",
+ "js-sys",
+ "pinned",
+ "serde",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "085f262d7604911c8150162529cefab3782e91adb20202e8658f7275d2aefe5d"
+dependencies = [
+ "bincode",
+ "futures",
+ "gloo-utils 0.2.0",
+ "gloo-worker-macros",
+ "js-sys",
+ "pinned",
+ "serde",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-worker-macros"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "956caa58d4857bc9941749d55e4bd3000032d8212762586fa5705632967140e7"
+dependencies = [
+ "proc-macro-crate",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "hashbrown"
+version = "0.15.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5971ac85611da7067dbfcabef3c70ebb5606018acd9e2a3903a0da507521e0d5"
+
+[[package]]
+name = "hermit-abi"
+version = "0.5.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fc0fef456e4baa96da950455cd02c081ca953b141298e41db3fc7e36b1da849c"
+
+[[package]]
+name = "http"
+version = "0.2.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "601cbb57e577e2f5ef5be8e7b83f0f63994f25aa94d673e54a92d5c516d101f1"
+dependencies = [
+ "bytes",
+ "fnv",
+ "itoa",
+]
+
+[[package]]
+name = "implicit-clone"
+version = "0.4.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8a9aa791c7b5a71b636b7a68207fdebf171ddfc593d9c8506ec4cbc527b6a84"
+dependencies = [
+ "implicit-clone-derive",
+ "indexmap",
+]
+
+[[package]]
+name = "implicit-clone-derive"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "699c1b6d335e63d0ba5c1e1c7f647371ce989c3bcbe1f7ed2b85fa56e3bd1a21"
+dependencies = [
+ "quote",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cea70ddb795996207ad57735b50c5982d8844f38ba9ee5f1aedcfb708a2aa11e"
+dependencies = [
+ "equivalent",
+ "hashbrown",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4a5f13b858c8d314ee3e8f639011f7ccefe71f97f96e50151fb991f267928e2c"
+
+[[package]]
+name = "js-sys"
+version = "0.3.77"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1cfaf33c695fc6e08064efbc1f72ec937429614f25eef83af942d0e227c3a28f"
+dependencies = [
+ "once_cell",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "libc"
+version = "0.2.174"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1171693293099992e19cddea4e8b849964e9846f4acee11b3948bcc337be8776"
+
+[[package]]
+name = "log"
+version = "0.4.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13dc2df351e3202783a1fe0d44375f7295ffb4049267b0f3018346dc122a1d94"
+
+[[package]]
+name = "memchr"
+version = "2.7.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a282da65faaf38286cf3be983213fcf1d2e2a58700e808f83f4ea9a4804bc0"
+
+[[package]]
+name = "miniz_oxide"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
+dependencies = [
+ "adler2",
+]
+
+[[package]]
+name = "num_cpus"
+version = "1.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91df4bbde75afed763b708b7eee1e8e7651e02d97f6d5dd763e89367e957b23b"
+dependencies = [
+ "hermit-abi",
+ "libc",
+]
+
+[[package]]
+name = "object"
+version = "0.36.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62948e14d923ea95ea2c7c86c71013138b66525b86bdc08d2dcc262bdb497b87"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.21.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42f5e15c9953c5e4ccceeb2e7382a716482c34515315f7b03532b8b4e8393d2d"
+
+[[package]]
+name = "percent-encoding"
+version = "2.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e"
+
+[[package]]
+name = "pin-project"
+version = "1.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "677f1add503faace112b9f1373e43e9e054bfdd22ff1a63c1bc485eaec6a6a8a"
+dependencies = [
+ "pin-project-internal",
+]
+
+[[package]]
+name = "pin-project-internal"
+version = "1.1.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e918e4ff8c4549eb882f14b3a4bc8c8bc93de829416eacf579f1207a8fbf861"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b3cff922bd51709b605d9ead9aa71031d81447142d828eb4a6eba76fe619f9b"
+
+[[package]]
+name = "pin-utils"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
+
+[[package]]
+name = "pinned"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a829027bd95e54cfe13e3e258a1ae7b645960553fb82b75ff852c29688ee595b"
+dependencies = [
+ "futures",
+ "rustversion",
+ "thiserror",
+]
+
+[[package]]
+name = "prettyplease"
+version = "0.2.35"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "061c1221631e079b26479d25bbf2275bfe5917ae8419cd7e34f13bfc2aa7539a"
+dependencies = [
+ "proc-macro2",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "proc-macro-crate"
+version = "1.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f4c021e1093a56626774e81216a4ce732a735e5bad4868a03f3ed65ca0c3919"
+dependencies = [
+ "once_cell",
+ "toml_edit",
+]
+
+[[package]]
+name = "proc-macro-error"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da25490ff9892aab3fcf7c36f08cfb902dd3e71ca0f9f9517bea02a73a5ce38c"
+dependencies = [
+ "proc-macro-error-attr",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro-error-attr"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a1be40180e52ecc98ad80b184934baf3d0d29f979574e439af5a55274b35f869"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "version_check",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.95"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02b3e5e68a3a1a02aad3ec490a98007cbc13c37cbe84a3cd7b8e406d76e7f778"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "prokio"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03b55e106e5791fa5a13abd13c85d6127312e8e09098059ca2bc9b03ca4cf488"
+dependencies = [
+ "futures",
+ "gloo 0.8.1",
+ "num_cpus",
+ "once_cell",
+ "pin-project",
+ "pinned",
+ "tokio",
+ "tokio-stream",
+ "wasm-bindgen-futures",
+]
+
+[[package]]
+name = "pulldown-cmark"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "679341d22c78c6c649893cbd6c3278dcbe9fc4faa62fea3a9296ae2b50c14625"
+dependencies = [
+ "bitflags",
+ "getopts",
+ "memchr",
+ "pulldown-cmark-escape",
+ "unicase",
+]
+
+[[package]]
+name = "pulldown-cmark-escape"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "007d8adb5ddab6f8e3f491ac63566a7d5002cc7ed73901f72057943fa71ae1ae"
+
+[[package]]
+name = "quote"
+version = "1.0.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1885c039570dc00dcb4ff087a89e185fd56bae234ddc7f056a945bf36467248d"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "route-recognizer"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
+
+[[package]]
+name = "rustc-demangle"
+version = "0.1.25"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "989e6739f80c4ad5b13e0fd7fe89531180375b18520cc8c82080e4dc4035b84f"
+
+[[package]]
+name = "rustversion"
+version = "1.0.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a0d197bd2c9dc6e53b84da9556a69ba4cdfab8619eb41a8bd1cc2027a0f6b1d"
+
+[[package]]
+name = "ryu"
+version = "1.0.20"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "28d3b2b1366ec20994f1fd18c3c594f05c5dd4bc44d8bb0c1c632c8d6829481f"
+
+[[package]]
+name = "serde"
+version = "1.0.219"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f0e2c6ed6606019b4e29e69dbaba95b11854410e5347d525002456dbbb786b6"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f3b143e2833c57ab9ad3ea280d21fd34e285a42837aeb0ee301f4f41890fa00e"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.6.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8302e169f0eddcc139c70f139d19d6467353af16f9fce27e8c30158036a1e16b"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.219"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5b0276cf7f2c73365f7157c8123c21cd9a50fbbd844757af28ca1f5925fc2a00"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.140"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "20068b6e96dc6c9bd23e01df8827e6c7e1f2fddd43c21810382803c136b99373"
+dependencies = [
+ "itoa",
+ "memchr",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "serde_urlencoded"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
+dependencies = [
+ "form_urlencoded",
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "slab"
+version = "0.4.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "04dc19736151f35336d325007ac991178d504a119863a2fcb3758cdb5e52c50d"
+
+[[package]]
+name = "syn"
+version = "1.0.109"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b64191b275b66ffe2469e8af2c1cfe3bafa67b529ead792a6d0160888b4237"
+dependencies = [
+ "proc-macro2",
+ "unicode-ident",
+]
+
+[[package]]
+name = "syn"
+version = "2.0.104"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "17b6f705963418cdb9927482fa304bc562ece2fdd4f616084c50b7023b435a40"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "thiserror"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6aaf5339b578ea85b50e080feb250a3e8ae8cfcdff9a461c9ec2904bc923f52"
+dependencies = [
+ "thiserror-impl",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "1.0.69"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4fee6c4efc90059e10f81e6d42c60a18f76588c3d74cb83a0b242a2b6c7504c1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "tokio"
+version = "1.45.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75ef51a33ef1da925cea3e4eb122833cb377c61439ca401b770f54902b806779"
+dependencies = [
+ "backtrace",
+ "pin-project-lite",
+]
+
+[[package]]
+name = "tokio-stream"
+version = "0.1.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eca58d7bba4a75707817a2c44174253f9236b2d5fbd055602e9d5c07c139a047"
+dependencies = [
+ "futures-core",
+ "pin-project-lite",
+ "tokio",
+]
+
+[[package]]
+name = "toml_datetime"
+version = "0.6.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "22cddaf88f4fbc13c51aebbf5f8eceb5c7c5a9da2ac40a13519eb5b0a0e8f11c"
+
+[[package]]
+name = "toml_edit"
+version = "0.19.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
+dependencies = [
+ "indexmap",
+ "toml_datetime",
+ "winnow",
+]
+
+[[package]]
+name = "tracing"
+version = "0.1.41"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "784e0ac535deb450455cbfa28a6f0df145ea1bb7ae51b821cf5e7927fdcfbdd0"
+dependencies = [
+ "pin-project-lite",
+ "tracing-attributes",
+ "tracing-core",
+]
+
+[[package]]
+name = "tracing-attributes"
+version = "0.1.30"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81383ab64e72a7a8b8e13130c49e3dab29def6d0c7d76a03087b3cf71c5c6903"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "tracing-core"
+version = "0.1.34"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9d12581f227e93f094d3af2ae690a574abb8a2b9b7a96e7cfe9647b2b617678"
+dependencies = [
+ "once_cell",
+]
+
+[[package]]
+name = "unicase"
+version = "2.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75b844d17643ee918803943289730bec8aac480150456169e647ed0b576ba539"
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5a5f39404a5da50712a4c1eecf25e90dd62b613502b7e925fd4e4d19b5c96512"
+
+[[package]]
+name = "unicode-width"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4a1a07cc7db3810833284e8d372ccdc6da29741639ecc70c9ec107df0fa6154c"
+
+[[package]]
+name = "urlencoding"
+version = "2.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "daf8dba3b7eb870caf1ddeed7bc9d2a049f3cfdfae7cb521b087cc33ae4c49da"
+
+[[package]]
+name = "version_check"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
+
+[[package]]
+name = "wasi"
+version = "0.11.1+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
+
+[[package]]
+name = "wasm-bindgen"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1edc8929d7499fc4e8f0be2262a241556cfc54a0bea223790e71446f2aab1ef5"
+dependencies = [
+ "cfg-if",
+ "once_cell",
+ "rustversion",
+ "wasm-bindgen-macro",
+]
+
+[[package]]
+name = "wasm-bindgen-backend"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2f0a0651a5c2bc21487bde11ee802ccaf4c51935d0d3d42a6101f98161700bc6"
+dependencies = [
+ "bumpalo",
+ "log",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-futures"
+version = "0.4.50"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "555d470ec0bc3bb57890405e5d4322cc9ea83cebb085523ced7be4144dac1e61"
+dependencies = [
+ "cfg-if",
+ "js-sys",
+ "once_cell",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "wasm-bindgen-macro"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7fe63fc6d09ed3792bd0897b314f53de8e16568c2b3f7982f468c0bf9bd0b407"
+dependencies = [
+ "quote",
+ "wasm-bindgen-macro-support",
+]
+
+[[package]]
+name = "wasm-bindgen-macro-support"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ae87ea40c9f689fc23f209965b6fb8a99ad69aeeb0231408be24920604395de"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+ "wasm-bindgen-backend",
+ "wasm-bindgen-shared",
+]
+
+[[package]]
+name = "wasm-bindgen-shared"
+version = "0.2.100"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a05d73b933a847d6cccdda8f838a22ff101ad9bf93e33684f39c1f5f0eece3d"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "web-sys"
+version = "0.3.77"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33b6dd2ef9186f1f2072e409e99cd22a975331a6b3591b12c764e0e55c60d5d2"
+dependencies = [
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b724f72796e036ab90c1021d4780d4d3d648aca59e491e6b98e725b84e99973"
+dependencies = [
+ "windows_aarch64_gnullvm",
+ "windows_aarch64_msvc",
+ "windows_i686_gnu",
+ "windows_i686_gnullvm",
+ "windows_i686_msvc",
+ "windows_x86_64_gnu",
+ "windows_x86_64_gnullvm",
+ "windows_x86_64_msvc",
+]
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a4622180e7a0ec044bb555404c800bc9fd9ec262ec147edd5989ccd0c02cd3"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09ec2a7bb152e2252b53fa7803150007879548bc709c039df7627cabbd05d469"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e9b5ad5ab802e97eb8e295ac6720e509ee4c243f69d781394014ebfe8bbfa0b"
+
+[[package]]
+name = "windows_i686_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0eee52d38c090b3caa76c563b86c3a4bd71ef1a819287c19d586d7334ae8ed66"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "240948bc05c5e7c6dabba28bf89d89ffce3e303022809e73deaefe4f6ec56c66"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "147a5c80aabfbf0c7d901cb5895d1de30ef2907eb21fbbab29ca94c5b08b1a78"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24d5b23dc417412679681396f2b49f3de8c1473deb516bd34410872eff51ed0d"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
+
+[[package]]
+name = "winnow"
+version = "0.5.40"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f593a95398737aeed53e489c785df13f3618e41dbcd6718c6addbf1395aa6876"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "yew"
+version = "0.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5f1a03f255c70c7aa3e9c62e15292f142ede0564123543c1cc0c7a4f31660cac"
+dependencies = [
+ "console_error_panic_hook",
+ "futures",
+ "gloo 0.10.0",
+ "implicit-clone",
+ "indexmap",
+ "js-sys",
+ "prokio",
+ "rustversion",
+ "serde",
+ "slab",
+ "thiserror",
+ "tokio",
+ "tracing",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "yew-macro",
+]
+
+[[package]]
+name = "yew-macro"
+version = "0.21.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "02fd8ca5166d69e59f796500a2ce432ff751edecbbb308ca59fd3fe4d0343de2"
+dependencies = [
+ "boolinator",
+ "once_cell",
+ "prettyplease",
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+]
+
+[[package]]
+name = "yew-router"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ca1d5052c96e6762b4d6209a8aded597758d442e6c479995faf0c7b5538e0c6"
+dependencies = [
+ "gloo 0.10.0",
+ "js-sys",
+ "route-recognizer",
+ "serde",
+ "serde_urlencoded",
+ "tracing",
+ "urlencoding",
+ "wasm-bindgen",
+ "web-sys",
+ "yew",
+ "yew-router-macro",
+]
+
+[[package]]
+name = "yew-router-macro"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "42bfd190a07ca8cfde7cd4c52b3ac463803dc07323db8c34daa697e86365978c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.104",
+]
diff --git a/website/Cargo.toml b/website/Cargo.toml
new file mode 100644
index 0000000..5f39e28
--- /dev/null
+++ b/website/Cargo.toml
@@ -0,0 +1,22 @@
+[package]
+name = "freezone-website"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+yew = { version = "0.21", features = ["csr"] }
+yew-router = "0.18"
+gloo = "0.11"
+gloo-timers = { version = "0.3", features = ["futures"] }
+wasm-bindgen = "0.2"
+web-sys = { version = "0.3", features = [
+ "console",
+ "Document",
+ "Element",
+ "HtmlElement",
+ "Window",
+ "Location",
+] }
+js-sys = "0.3"
+serde = { version = "1.0", features = ["derive"] }
+pulldown-cmark = "0.11"
\ No newline at end of file
diff --git a/website/Trunk.toml b/website/Trunk.toml
new file mode 100644
index 0000000..aef223b
--- /dev/null
+++ b/website/Trunk.toml
@@ -0,0 +1,7 @@
+[build]
+target = "index.html"
+
+[serve]
+address = "127.0.0.1"
+port = 8080
+open = true
\ No newline at end of file
diff --git a/website/content/defi/features.md b/website/content/defi/features.md
new file mode 100644
index 0000000..86e87ce
--- /dev/null
+++ b/website/content/defi/features.md
@@ -0,0 +1,22 @@
+# DeFi Features
+
+## Liquidity Pools
+Provide liquidity to earn rewards and help facilitate seamless trading across multiple token pairs with competitive APY rates.
+
+## Leveraged Trading
+Access up to 100x leverage on major cryptocurrency pairs with advanced risk management tools and real-time margin monitoring.
+
+## Yield Farming
+Maximize your returns through strategic yield farming opportunities across multiple protocols and chains.
+
+## Staking Rewards
+Stake your tokens to earn passive income while contributing to network security and governance.
+
+## Decentralized Funds
+Create or invest in decentralized investment funds with transparent performance tracking and automated rebalancing.
+
+## Cross-Chain Bridge
+Seamlessly move assets across different blockchain networks with our secure and efficient bridge technology.
+
+## Automated Strategies
+Deploy sophisticated trading and investment strategies with our automated DeFi strategy engine.
\ No newline at end of file
diff --git a/website/content/defi/hero.md b/website/content/defi/hero.md
new file mode 100644
index 0000000..d1fc7bf
--- /dev/null
+++ b/website/content/defi/hero.md
@@ -0,0 +1,5 @@
+# DeFi Platform
+
+Access comprehensive decentralized finance functionality including leveraging, liquidity pools, yield farming, and cross-chain trading. The future of finance, today.
+
+Maximize your returns with AI-powered optimization, risk management, and seamless cross-chain operations.
\ No newline at end of file
diff --git a/website/content/home/about.md b/website/content/home/about.md
new file mode 100644
index 0000000..c65abb5
--- /dev/null
+++ b/website/content/home/about.md
@@ -0,0 +1,16 @@
+# About Zanzibar Digital Freezone
+
+The Zanzibar Digital Freezone is a revolutionary economic zone that enables global entrepreneurs to establish their digital legal entities and residence in one of Africa's most strategic locations. Built on cutting-edge blockchain technology and backed by progressive regulatory frameworks.
+
+## Our Vision
+
+To create Africa's premier digital economic zone where global businesses can operate with complete legal certainty, regulatory compliance, and digital asset freedom. Zanzibar's strategic location and forward-thinking government make it the perfect gateway between Africa, Asia, and the Middle East.
+
+## Core Benefits
+
+- **Legal Entity Formation**: Establish your digital company with full legal recognition
+- **Digital Residence**: Obtain digital residency status in Zanzibar
+- **Asset Trading**: Trade digital assets with regulatory compliance
+- **Tax Optimization**: Benefit from Zanzibar's competitive tax framework
+- **Strategic Location**: Access to African, Asian, and Middle Eastern markets
+- **Regulatory Clarity**: Clear, progressive regulations for digital businesses
\ No newline at end of file
diff --git a/website/content/home/hero.md b/website/content/home/hero.md
new file mode 100644
index 0000000..d28bf17
--- /dev/null
+++ b/website/content/home/hero.md
@@ -0,0 +1,5 @@
+# Zanzibar Digital Freezone
+
+Establish your digital legal entity and residence in Zanzibar's premier digital freezone. Experience seamless digital asset trading with full legal protection and regulatory compliance.
+
+Join global entrepreneurs building their digital future in Africa's most innovative economic zone.
\ No newline at end of file
diff --git a/website/content/marketplace/features.md b/website/content/marketplace/features.md
new file mode 100644
index 0000000..c75dfc9
--- /dev/null
+++ b/website/content/marketplace/features.md
@@ -0,0 +1,19 @@
+# Marketplace Features
+
+## Digital Asset Trading
+Trade a wide variety of digital assets including cryptocurrencies, tokens, and digital commodities with advanced trading tools and real-time market data.
+
+## NFT Marketplace
+Discover, buy, and sell unique NFTs from artists, creators, and brands. Support for multiple blockchain networks and advanced filtering options.
+
+## Service Exchange
+Connect with service providers and clients in the freezone. From consulting to development, find or offer professional services with crypto payments.
+
+## Real Estate Tokenization
+Invest in tokenized real estate properties, enabling fractional ownership and global accessibility to premium real estate markets.
+
+## Escrow Services
+Secure transactions with built-in escrow services, ensuring safe and reliable trading for all parties involved.
+
+## Advanced Analytics
+Market insights, price tracking, and portfolio management tools to help you make informed trading decisions.
\ No newline at end of file
diff --git a/website/content/marketplace/hero.md b/website/content/marketplace/hero.md
new file mode 100644
index 0000000..84207cb
--- /dev/null
+++ b/website/content/marketplace/hero.md
@@ -0,0 +1,5 @@
+# Marketplace
+
+The future of business digitalization. Transform your real-world assets and services into digital tokens, enabling seamless global commerce within the Zanzibar Digital Freezone.
+
+Empower your business with blockchain technology, smart contracts, and regulatory compliance for the digital economy.
\ No newline at end of file
diff --git a/website/content/platform/features.md b/website/content/platform/features.md
new file mode 100644
index 0000000..51d920a
--- /dev/null
+++ b/website/content/platform/features.md
@@ -0,0 +1,19 @@
+# Platform Features
+
+## Company Management
+Establish and manage your digital companies with complete autonomy. Handle registrations, compliance, and operations through our intuitive dashboard.
+
+## Digital Governance
+Implement transparent governance structures with built-in voting mechanisms, proposal systems, and stakeholder management tools.
+
+## Financial Administration
+Comprehensive financial management including accounting, budgeting, treasury management, and automated reporting systems.
+
+## Smart Contracts
+Deploy and manage smart contracts for automated business processes, ensuring trust and transparency in all operations.
+
+## Analytics & Insights
+Real-time analytics and business intelligence tools to make data-driven decisions and optimize your operations.
+
+## Compliance Tools
+Stay compliant with automated regulatory reporting, audit trails, and compliance monitoring across multiple jurisdictions.
\ No newline at end of file
diff --git a/website/content/platform/hero.md b/website/content/platform/hero.md
new file mode 100644
index 0000000..72c9046
--- /dev/null
+++ b/website/content/platform/hero.md
@@ -0,0 +1,5 @@
+# Business Management Platform
+
+Manage, administer and govern your digital companies with unprecedented control and transparency. Built for the future of autonomous business operations.
+
+Transform how you run your business with smart contracts, automated governance, and comprehensive financial management tools.
\ No newline at end of file
diff --git a/website/index.html b/website/index.html
new file mode 100644
index 0000000..4090d91
--- /dev/null
+++ b/website/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Freezone - Digital Freedom Platform
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/website/src/app.rs b/website/src/app.rs
new file mode 100644
index 0000000..a0e8e4e
--- /dev/null
+++ b/website/src/app.rs
@@ -0,0 +1,46 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+
+use crate::components::header::Header;
+use crate::components::footer::Footer;
+use crate::pages::{Home, Platform, Marketplace, DeFi, NotFound};
+
+#[derive(Clone, Routable, PartialEq)]
+pub enum Route {
+ #[at("/")]
+ Home,
+ #[at("/platform")]
+ Platform,
+ #[at("/marketplace")]
+ Marketplace,
+ #[at("/defi")]
+ DeFi,
+ #[not_found]
+ #[at("/404")]
+ NotFound,
+}
+
+fn switch(routes: Route) -> Html {
+ match routes {
+ Route::Home => html! { },
+ Route::Platform => html! { },
+ Route::Marketplace => html! { },
+ Route::DeFi => html! { },
+ Route::NotFound => html! { },
+ }
+}
+
+#[function_component(App)]
+pub fn app() -> Html {
+ html! {
+
+
+
+
+ render={switch} />
+
+
+
+
+ }
+}
\ No newline at end of file
diff --git a/website/src/components/footer.rs b/website/src/components/footer.rs
new file mode 100644
index 0000000..16238c1
--- /dev/null
+++ b/website/src/components/footer.rs
@@ -0,0 +1,102 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+use crate::app::Route;
+
+#[function_component(Footer)]
+pub fn footer() -> Html {
+ html! {
+
+ }
+}
\ No newline at end of file
diff --git a/website/src/components/header.rs b/website/src/components/header.rs
new file mode 100644
index 0000000..eacda57
--- /dev/null
+++ b/website/src/components/header.rs
@@ -0,0 +1,45 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+use crate::app::Route;
+
+#[function_component(Header)]
+pub fn header() -> Html {
+ html! {
+
+
+
to={Route::Home} classes="navbar-brand">
+ {"Zanzibar Digital Freezone"}
+ >
+
+
+
+
+
+
+
+
+ to={Route::Platform} classes="nav-link">
+ {"Platform"}
+ >
+
+
+ to={Route::Marketplace} classes="nav-link">
+ {"Marketplace"}
+ >
+
+
+ to={Route::DeFi} classes="nav-link">
+ {"DeFi"}
+ >
+
+
+
+ {"Register"}
+
+
+
+
+
+
+ }
+}
\ No newline at end of file
diff --git a/website/src/components/hero.rs b/website/src/components/hero.rs
new file mode 100644
index 0000000..394c298
--- /dev/null
+++ b/website/src/components/hero.rs
@@ -0,0 +1,131 @@
+use yew::prelude::*;
+use crate::utils::{load_markdown_content, markdown::extract_title_and_description};
+use crate::components::WorldMap;
+
+#[derive(Properties, PartialEq)]
+pub struct HeroProps {
+ pub content_path: String,
+ pub cta_text: String,
+ pub cta_link: String,
+ #[prop_or_default]
+ pub secondary_cta_text: Option,
+ #[prop_or_default]
+ pub secondary_cta_link: Option,
+ #[prop_or_default]
+ pub background_variant: Option,
+}
+
+#[function_component(Hero)]
+pub fn hero(props: &HeroProps) -> Html {
+ let content = load_markdown_content(&props.content_path);
+ let (title, description) = extract_title_and_description(&content);
+
+ let background_class = match props.background_variant.as_deref() {
+ Some("marketplace") => "hero-marketplace",
+ Some("platform") => "hero-platform",
+ Some("defi") => "hero-defi",
+ _ => "hero-default"
+ };
+
+ html! {
+
+
+
+
+
+
{title}
+
{description}
+
+
+
+
+
+ {match props.background_variant.as_deref() {
+ Some("marketplace") => html! {
+
+
+
+
{"🎨"}
+
{"Digital Art"}
+
{"2.5 ETH"}
+
+
+
{"🏠"}
+
{"Real Estate"}
+
{"$50K"}
+
+
+
{"💼"}
+
{"Services"}
+
{"100 USDC"}
+
+
+
+ },
+ Some("platform") => html! {
+
+ },
+ Some("defi") => html! {
+
+
+
+
+
+
{"ETH"}
+
{"USDC"}
+
{"BTC"}
+
{"DAI"}
+
+
+
+ {"TVL:"}
+ {"$2.4B"}
+
+
+
+
+
+ },
+ _ => html! {
+
+
+
+ }
+ }}
+
+
+
+
+
+ // Scroll indicator
+
+
+ }
+}
\ No newline at end of file
diff --git a/website/src/components/marketplace_flow.rs b/website/src/components/marketplace_flow.rs
new file mode 100644
index 0000000..4d4c642
--- /dev/null
+++ b/website/src/components/marketplace_flow.rs
@@ -0,0 +1,316 @@
+use yew::prelude::*;
+
+#[derive(Clone, PartialEq)]
+pub struct MarketplaceItem {
+ pub title: String,
+ pub price: String,
+ pub category: String,
+ pub image: String,
+ pub seller: String,
+ pub rarity: String,
+}
+
+#[function_component(MarketplaceFlow)]
+pub fn marketplace_flow() -> Html {
+ let items = vec![
+ MarketplaceItem {
+ title: "EcoMobility E-Bike Shares".to_string(),
+ price: "$150".to_string(),
+ category: "Company Shares".to_string(),
+ image: "🚲".to_string(),
+ seller: "GreenTransport Co-op".to_string(),
+ rarity: "Impact Verified".to_string(),
+ },
+ MarketplaceItem {
+ title: "Coral Reef Eco-Resort".to_string(),
+ price: "$2,500".to_string(),
+ category: "Real Estate".to_string(),
+ image: "🏝️".to_string(),
+ seller: "Ocean Conservation Trust".to_string(),
+ rarity: "Carbon Negative".to_string(),
+ },
+ MarketplaceItem {
+ title: "Telemedicine Platform".to_string(),
+ price: "500 USDC".to_string(),
+ category: "HealthTech Services".to_string(),
+ image: "🏥".to_string(),
+ seller: "CommunityHealth DAO".to_string(),
+ rarity: "Community Owned".to_string(),
+ },
+ MarketplaceItem {
+ title: "Mangrove Restoration Credits".to_string(),
+ price: "$12".to_string(),
+ category: "Carbon Credits".to_string(),
+ image: "🌿".to_string(),
+ seller: "Zanzibar Conservation".to_string(),
+ rarity: "Verified Impact".to_string(),
+ },
+ MarketplaceItem {
+ title: "Solar Microgrid Shares".to_string(),
+ price: "$300".to_string(),
+ category: "Renewable Energy".to_string(),
+ image: "☀️".to_string(),
+ seller: "Community Power Co-op".to_string(),
+ rarity: "Grid Connected".to_string(),
+ },
+ MarketplaceItem {
+ title: "Ocean Education Platform".to_string(),
+ price: "250 USDC".to_string(),
+ category: "EdTech Services".to_string(),
+ image: "🐠".to_string(),
+ seller: "Marine Learning DAO".to_string(),
+ rarity: "UNESCO Certified".to_string(),
+ },
+ MarketplaceItem {
+ title: "Spice Farmers Cooperative".to_string(),
+ price: "$75".to_string(),
+ category: "Agricultural Co-op".to_string(),
+ image: "🌶️".to_string(),
+ seller: "Fair Trade Zanzibar".to_string(),
+ rarity: "Fair Trade".to_string(),
+ },
+ MarketplaceItem {
+ title: "Community Banking Token".to_string(),
+ price: "$50".to_string(),
+ category: "FinTech Startup".to_string(),
+ image: "🏦".to_string(),
+ seller: "Financial Inclusion Ltd".to_string(),
+ rarity: "Series A".to_string(),
+ },
+ ];
+
+ html! {
+
+
+ {items.iter().map(|item| {
+ let rarity_class = match item.rarity.as_str() {
+ "Legendary" => "rarity-legendary",
+ "Ultra Rare" => "rarity-ultra-rare",
+ "Epic" => "rarity-epic",
+ "Premium" => "rarity-premium",
+ "Exclusive" => "rarity-exclusive",
+ _ => "rarity-common"
+ };
+
+ html! {
+
+
+
+
{&item.title}
+
{&item.category}
+
+ {"by "}
+ {&item.seller}
+
+
+
+
+ }
+ }).collect::()}
+
+
+
+
+ }
+}
+
+#[function_component(InteractiveLiquidityPool)]
+pub fn interactive_liquidity_pool() -> Html {
+ html! {
+
+
{"Live Liquidity Pools"}
+
+
+
+
+
+ {"TVL"}
+ {"$2.4M"}
+
+
+ {"Volume 24h"}
+ {"$890K"}
+
+
+
+
+
+
+
+
+ {"TVL"}
+ {"$5.1M"}
+
+
+ {"Volume 24h"}
+ {"$1.2M"}
+
+
+
+
+
+
+
+
+ {"TVL"}
+ {"$8.9M"}
+
+
+ {"Volume 24h"}
+ {"$2.1M"}
+
+
+
+
+
+ }
+}
+
+#[function_component(LiveOrderbook)]
+pub fn live_orderbook() -> Html {
+ html! {
+
+
{"Live Order Book - BTC/USDC"}
+
+
+
+ // Orders will be populated by JavaScript
+
+
+ {"Spread: "}
+ {"$12.50 (0.03%)"}
+
+
+
+ }
+}
+
+#[function_component(PlatformWireframe)]
+pub fn platform_wireframe() -> Html {
+ html! {
+
+
{"Platform Dashboard Preview"}
+
+
+ }
+}
+
+#[function_component(TradingInterface)]
+pub fn trading_interface() -> Html {
+ html! {
+
+
{"Advanced Trading Interface"}
+
+
+ }
+}
\ No newline at end of file
diff --git a/website/src/components/mod.rs b/website/src/components/mod.rs
new file mode 100644
index 0000000..15b153d
--- /dev/null
+++ b/website/src/components/mod.rs
@@ -0,0 +1,19 @@
+pub mod header;
+pub mod footer;
+pub mod hero;
+pub mod section;
+pub mod marketplace_flow;
+pub mod world_map;
+
+pub use header::Header;
+pub use footer::Footer;
+pub use hero::Hero;
+pub use section::Section;
+pub use marketplace_flow::{
+ MarketplaceFlow,
+ InteractiveLiquidityPool,
+ LiveOrderbook,
+ PlatformWireframe,
+ TradingInterface
+};
+pub use world_map::WorldMap;
\ No newline at end of file
diff --git a/website/src/components/section.rs b/website/src/components/section.rs
new file mode 100644
index 0000000..5d9eb4b
--- /dev/null
+++ b/website/src/components/section.rs
@@ -0,0 +1,127 @@
+use yew::prelude::*;
+use crate::utils::{load_markdown_content, markdown_to_html};
+
+#[derive(Properties, PartialEq)]
+pub struct SectionProps {
+ pub content_path: AttrValue,
+ #[prop_or_default]
+ pub animation_class: Option,
+ #[prop_or_default]
+ pub background_class: Option,
+ #[prop_or_default]
+ pub id: Option,
+}
+
+#[function_component(Section)]
+pub fn section(props: &SectionProps) -> Html {
+ let content = match props.content_path.as_str() {
+ "home/about" => html! {
+ <>
+ {"About the Freezone"}
+
+ {"The Freezone is a revolutionary digital ecosystem that empowers individuals and businesses to operate with complete autonomy and freedom. Built on cutting-edge blockchain technology, we provide three core platforms that work seamlessly together."}
+
+ {"Our Vision"}
+
+ {"To create a world where digital sovereignty is not just a concept, but a reality for everyone. Where businesses can thrive without traditional barriers, and individuals can truly own their digital assets and identity."}
+
+ {"Core Values"}
+
+ {"Freedom"} {": Complete autonomy over your digital presence"}
+ {"Innovation"} {": Cutting-edge technology that pushes boundaries"}
+ {"Community"} {": A thriving ecosystem of like-minded pioneers"}
+ {"Security"} {": Bank-grade protection for all your assets"}
+ {"Transparency"} {": Open, auditable, and trustworthy operations"}
+
+ >
+ },
+ "platform/features" => html! {
+ <>
+ {"Platform Features"}
+
+
+
{"Company Management"}
+
{"Establish and manage your digital companies with complete autonomy. Handle registrations, compliance, and operations through our intuitive dashboard."}
+
+
+
{"Digital Governance"}
+
{"Implement transparent governance structures with built-in voting mechanisms, proposal systems, and stakeholder management tools."}
+
+
+
{"Financial Administration"}
+
{"Comprehensive financial management including accounting, budgeting, treasury management, and automated reporting systems."}
+
+
+
{"Smart Contracts"}
+
{"Deploy and manage smart contracts for automated business processes, ensuring trust and transparency in all operations."}
+
+
+ >
+ },
+ "marketplace/features" => html! {
+ <>
+ {"Marketplace Features"}
+
+
+
{"Digital Asset Trading"}
+
{"Trade a wide variety of digital assets including cryptocurrencies, tokens, and digital commodities with advanced trading tools and real-time market data."}
+
+
+
{"NFT Marketplace"}
+
{"Discover, buy, and sell unique NFTs from artists, creators, and brands. Support for multiple blockchain networks and advanced filtering options."}
+
+
+
{"Service Exchange"}
+
{"Connect with service providers and clients in the freezone. From consulting to development, find or offer professional services with crypto payments."}
+
+
+
{"Real Estate Tokenization"}
+
{"Invest in tokenized real estate properties, enabling fractional ownership and global accessibility to premium real estate markets."}
+
+
+ >
+ },
+ "defi/features" => html! {
+ <>
+ {"DeFi Features"}
+
+
+
{"Liquidity Pools"}
+
{"Provide liquidity to earn rewards and help facilitate seamless trading across multiple token pairs with competitive APY rates."}
+
+
+
{"Leveraged Trading"}
+
{"Access up to 100x leverage on major cryptocurrency pairs with advanced risk management tools and real-time margin monitoring."}
+
+
+
{"Yield Farming"}
+
{"Maximize your returns through strategic yield farming opportunities across multiple protocols and chains."}
+
+
+
{"Staking Rewards"}
+
{"Stake your tokens to earn passive income while contributing to network security and governance."}
+
+
+ >
+ },
+ _ => html! { {"Content not found"} }
+ };
+
+ let animation_class = props.animation_class.as_deref().unwrap_or("fade-in").to_string();
+ let background_class = props.background_class.as_deref().unwrap_or("section").to_string();
+ let section_id = props.id.as_ref().map(|id| id.to_string());
+
+ html! {
+
+ }
+}
\ No newline at end of file
diff --git a/website/src/components/world_map.rs b/website/src/components/world_map.rs
new file mode 100644
index 0000000..466eca2
--- /dev/null
+++ b/website/src/components/world_map.rs
@@ -0,0 +1,433 @@
+use yew::prelude::*;
+use web_sys::{window, HtmlElement, HtmlScriptElement};
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::JsCast;
+use gloo_timers::callback::{Interval, Timeout};
+
+#[derive(Clone, PartialEq)]
+struct ConnectionEntity {
+ id: u32,
+ name: String,
+ entity_type: String, // "Business" or "Resident"
+ location: String,
+ lat: f64,
+ lng: f64,
+ registration_date: String,
+ industry: Option,
+}
+
+#[derive(Clone, PartialEq)]
+struct ActiveConnection {
+ entity: ConnectionEntity,
+ start_time: f64,
+ progress: f64,
+}
+
+#[function_component(WorldMap)]
+pub fn world_map() -> Html {
+ let map_ref = use_node_ref();
+ let active_connections = use_state(|| Vec::::new());
+
+ // Sample entities from around the world
+ let entities = vec![
+ ConnectionEntity {
+ id: 1,
+ name: "TechCorp Solutions Ltd".to_string(),
+ entity_type: "Business".to_string(),
+ location: "New York, USA".to_string(),
+ lat: 40.7128,
+ lng: -74.0060,
+ registration_date: "2024-01-15".to_string(),
+ industry: Some("Technology".to_string()),
+ },
+ ConnectionEntity {
+ id: 2,
+ name: "Digital Nomad LLC".to_string(),
+ entity_type: "Business".to_string(),
+ location: "London, UK".to_string(),
+ lat: 51.5074,
+ lng: -0.1278,
+ registration_date: "2024-02-03".to_string(),
+ industry: Some("Consulting".to_string()),
+ },
+ ConnectionEntity {
+ id: 3,
+ name: "Sarah Chen".to_string(),
+ entity_type: "Resident".to_string(),
+ location: "Singapore".to_string(),
+ lat: 1.3521,
+ lng: 103.8198,
+ registration_date: "2024-01-28".to_string(),
+ industry: None,
+ },
+ ConnectionEntity {
+ id: 4,
+ name: "Crypto Ventures Ltd".to_string(),
+ entity_type: "Business".to_string(),
+ location: "Dubai, UAE".to_string(),
+ lat: 25.2048,
+ lng: 55.2708,
+ registration_date: "2024-02-10".to_string(),
+ industry: Some("Cryptocurrency".to_string()),
+ },
+ ConnectionEntity {
+ id: 5,
+ name: "Marcus Johnson".to_string(),
+ entity_type: "Resident".to_string(),
+ location: "Sydney, Australia".to_string(),
+ lat: -33.8688,
+ lng: 151.2093,
+ registration_date: "2024-01-20".to_string(),
+ industry: None,
+ },
+ ConnectionEntity {
+ id: 6,
+ name: "FinTech Innovations SA".to_string(),
+ entity_type: "Business".to_string(),
+ location: "São Paulo, Brazil".to_string(),
+ lat: -23.5505,
+ lng: -46.6333,
+ registration_date: "2024-02-05".to_string(),
+ industry: Some("Financial Technology".to_string()),
+ },
+ ConnectionEntity {
+ id: 7,
+ name: "Elena Rodriguez".to_string(),
+ entity_type: "Resident".to_string(),
+ location: "Madrid, Spain".to_string(),
+ lat: 40.4168,
+ lng: -3.7038,
+ registration_date: "2024-01-12".to_string(),
+ industry: None,
+ },
+ ConnectionEntity {
+ id: 8,
+ name: "Green Energy Solutions".to_string(),
+ entity_type: "Business".to_string(),
+ location: "Lagos, Nigeria".to_string(),
+ lat: 6.5244,
+ lng: 3.3792,
+ registration_date: "2024-02-08".to_string(),
+ industry: Some("Renewable Energy".to_string()),
+ },
+ ];
+
+ // Initialize OpenStreetMap
+ {
+ let map_ref = map_ref.clone();
+ use_effect_with(
+ (),
+ move |_| {
+ if let Some(element) = map_ref.cast::() {
+ let window = window().unwrap();
+
+ // Create script element for Leaflet CSS
+ let document = window.document().unwrap();
+ let head = document.head().unwrap();
+
+ // Add Leaflet CSS
+ let css_link = document.create_element("link").unwrap();
+ css_link.set_attribute("rel", "stylesheet").unwrap();
+ css_link.set_attribute("href", "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css").unwrap();
+ css_link.set_attribute("integrity", "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=").unwrap();
+ css_link.set_attribute("crossorigin", "").unwrap();
+ head.append_child(&css_link).unwrap();
+
+ // Add Leaflet JS
+ let script = document.create_element("script").unwrap()
+ .dyn_into::().unwrap();
+ script.set_src("https://unpkg.com/leaflet@1.9.4/dist/leaflet.js");
+ script.set_attribute("integrity", "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=").unwrap();
+ script.set_attribute("crossorigin", "").unwrap();
+
+ let element_clone = element.clone();
+ let onload = Closure::wrap(Box::new(move || {
+ // Initialize map when Leaflet loads
+ let js_code = format!(r#"
+ if (typeof L !== 'undefined') {{
+ const map = L.map('{}', {{
+ zoomControl: false,
+ scrollWheelZoom: false,
+ doubleClickZoom: false,
+ boxZoom: false,
+ keyboard: false,
+ dragging: false,
+ touchZoom: false,
+ attributionControl: false
+ }}).setView([-6.1659, 39.2026], 2);
+
+ L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{
+ attribution: '',
+ maxZoom: 18,
+ opacity: 0.9,
+ className: 'map-tiles'
+ }}).addTo(map);
+
+ // Add subtle Zanzibar marker
+ const zanzIcon = L.divIcon({{
+ className: 'zanzibar-marker',
+ html: '
',
+ iconSize: [12, 12],
+ iconAnchor: [6, 6]
+ }});
+ L.marker([-6.1659, 39.2026], {{icon: zanzIcon}}).addTo(map);
+ }}
+ "#, element_clone.id());
+
+ js_sys::eval(&js_code).unwrap();
+ }) as Box);
+
+ script.set_onload(Some(onload.as_ref().unchecked_ref()));
+ onload.forget();
+
+ head.append_child(&script).unwrap();
+ }
+ || {}
+ },
+ );
+ }
+
+ // Animate connections
+ {
+ let active_connections = active_connections.clone();
+ let entities_clone = entities.clone();
+
+ use_effect_with(
+ (),
+ move |_| {
+ let interval = Interval::new(4000, move || {
+ // Pick a random entity to start connection
+ if let Some(entity) = entities_clone.get((js_sys::Math::random() * entities_clone.len() as f64) as usize) {
+ let mut current_connections = (*active_connections).clone();
+
+ // Add new connection
+ current_connections.push(ActiveConnection {
+ entity: entity.clone(),
+ start_time: js_sys::Date::now(),
+ progress: 0.0,
+ });
+
+ active_connections.set(current_connections);
+
+ // Remove connection after animation completes (8 seconds)
+ let active_connections_cleanup = active_connections.clone();
+ let entity_id = entity.id;
+
+ Timeout::new(8000, move || {
+ let mut current_connections = (*active_connections_cleanup).clone();
+ current_connections.retain(|conn| conn.entity.id != entity_id);
+ active_connections_cleanup.set(current_connections);
+ }).forget();
+ }
+ });
+
+ move || drop(interval)
+ },
+ );
+ }
+
+ // Update connection progress
+ {
+ let active_connections = active_connections.clone();
+
+ use_effect_with(
+ (),
+ move |_| {
+ let interval = Interval::new(50, move || {
+ let current_time = js_sys::Date::now();
+ let mut updated_connections = (*active_connections).clone();
+ let mut changed = false;
+
+ for connection in &mut updated_connections {
+ let elapsed = current_time - connection.start_time;
+ let new_progress = (elapsed / 6000.0).min(1.0); // 6 second animation
+
+ if (new_progress - connection.progress).abs() > 0.01 {
+ connection.progress = new_progress;
+ changed = true;
+ }
+ }
+
+ if changed {
+ active_connections.set(updated_connections);
+ }
+ });
+
+ move || drop(interval)
+ },
+ );
+ }
+
+ html! {
+
+
+ // OpenStreetMap container
+
+
+ // Connection animations overlay
+
+ // Animated connection lines and dots
+
+ // Gradient definition for beam effect
+
+
+
+
+
+
+
+
+ {for active_connections.iter().map(|connection| {
+ let entity = &connection.entity;
+ let progress = connection.progress;
+
+ // Convert lat/lng to SVG coordinates (simplified projection)
+ // Adjust for larger map coverage and proper geographic positioning
+ let start_x = ((entity.lng + 180.0) / 360.0) * 1200.0;
+ let start_y = ((90.0 - entity.lat) / 180.0) * 600.0;
+
+ // Zanzibar coordinates: -6.1659, 39.2026
+ let zanzibar_x = ((39.2026 + 180.0) / 360.0) * 1200.0;
+ let zanzibar_y = ((90.0 - (-6.1659)) / 180.0) * 600.0;
+ let end_x = zanzibar_x;
+ let end_y = zanzibar_y;
+
+ // Calculate current position along straight line
+ let current_x = start_x + (end_x - start_x) * progress;
+ let current_y = start_y + (end_y - start_y) * progress;
+
+ html! {
+
+ // Straight beam line
+
+ // Moving data dot
+
+
+ }
+ })}
+
+ // Zanzibar hub (always visible) - actual geographic position
+ // Zanzibar coordinates: -6.1659, 39.2026
+
+
+
+
+ // Entity cards that appear during connections
+ {for active_connections.iter().map(|connection| {
+ let entity = &connection.entity;
+ let progress = connection.progress;
+
+ // Convert lat/lng to pixel coordinates for card positioning
+ let card_x = ((entity.lng + 180.0) / 360.0) * 100.0; // Percentage
+ let card_y = ((90.0 - entity.lat) / 180.0) * 100.0; // Percentage
+
+ // Card fades out as connection progresses
+ let opacity = (1.0 - progress).max(0.0);
+
+ html! {
+
+
+
{&entity.name}
+
+ {"📍"}
+ {&entity.location}
+
+ {if let Some(industry) = &entity.industry {
+ html! {
+
{industry}
+ }
+ } else {
+ html! {}
+ }}
+
+ {if progress < 0.5 {
+ "Connecting to Zanzibar..."
+ } else if progress < 0.9 {
+ "Establishing digital presence..."
+ } else {
+ "Registration complete!"
+ }}
+
+
+
+ }
+ })}
+
+
+
+ // Statistics
+
+
+
{"17,736"}
+
{"Digital Entities"}
+
+
+
{"127"}
+
{"Countries"}
+
+
+
{"$2.4B"}
+
{"Assets Under Management"}
+
+
+
{"24/7"}
+
{"Global Operations"}
+
+
+
+ }
+}
+
+#[function_component(GlobalConnections)]
+pub fn global_connections() -> Html {
+ html! {
+
+
+
+
+
{"Global Digital Hub"}
+
+ {"Connecting entrepreneurs worldwide to Zanzibar's digital freezone"}
+
+
+
+
+
+
+ }
+}
\ No newline at end of file
diff --git a/website/src/main.rs b/website/src/main.rs
new file mode 100644
index 0000000..e1a7820
--- /dev/null
+++ b/website/src/main.rs
@@ -0,0 +1,10 @@
+mod app;
+mod components;
+mod pages;
+mod utils;
+
+use app::App;
+
+fn main() {
+ yew::Renderer::::new().render();
+}
\ No newline at end of file
diff --git a/website/src/pages/defi.rs b/website/src/pages/defi.rs
new file mode 100644
index 0000000..4f13109
--- /dev/null
+++ b/website/src/pages/defi.rs
@@ -0,0 +1,428 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+use crate::app::Route;
+use crate::components::{Hero, Section, TradingInterface, InteractiveLiquidityPool, LiveOrderbook};
+
+#[function_component(DeFi)]
+pub fn defi() -> Html {
+ html! {
+ <>
+
+
+ // Live trading interface
+
+
+
+
+
{"Trading Interface"}
+
+ {"Experience professional-grade DeFi trading with real-time data and advanced tools"}
+
+
+
+
+
+
+
+ // DeFi protocols overview
+
+
+
+
+
{"DeFi Protocols"}
+
+ {"Access the full spectrum of decentralized finance opportunities"}
+
+
+
+
+
+
+
+
+ {"💧"}
+
+
{"Liquidity Pools"}
+
+ {"Provide liquidity and earn fees from trading activity across multiple token pairs."}
+
+
+
+ {"TVL:"}
+ {"$2.4B"}
+
+
+ {"APY:"}
+ {"8.5% - 45%"}
+
+
+ {"Pools:"}
+ {"150+"}
+
+
+
+
+
+
+
+
+ {"📈"}
+
+
{"Leveraged Trading"}
+
+ {"Trade with up to 100x leverage on major cryptocurrency pairs with advanced risk management."}
+
+
+
+ {"Max Leverage:"}
+ {"100x"}
+
+
+ {"Trading Pairs:"}
+ {"50+"}
+
+
+ {"24h Volume:"}
+ {"$890M"}
+
+
+
+
+
+
+
+
+ {"🌾"}
+
+
{"Yield Farming"}
+
+ {"Maximize returns through strategic yield farming across multiple protocols and chains."}
+
+
+
+ {"Best APY:"}
+ {"125%"}
+
+
+ {"Active Farms:"}
+ {"85"}
+
+
+ {"Total Staked:"}
+ {"$450M"}
+
+
+
+
+
+
+
+
+ {"🏦"}
+
+
{"Lending & Borrowing"}
+
+ {"Lend your assets to earn interest or borrow against your collateral with competitive rates."}
+
+
+
+ {"Supply APY:"}
+ {"3.2% - 12%"}
+
+
+ {"Borrow APY:"}
+ {"5.8% - 18%"}
+
+
+ {"Total Supplied:"}
+ {"$1.2B"}
+
+
+
+
+
+
+
+
+ // Live pools and orderbook
+
+
+
+
+
{"Live Market Data"}
+
+ {"Real-time liquidity pools and order book data"}
+
+
+
+
+
+
+
+
+
+
+ // Advanced DeFi strategies
+
+
+
+
+
{"DeFi Strategies"}
+
+ {"Sophisticated tools for maximizing your DeFi returns"}
+
+
+
+
+
+
+
+
+ {"🔄"}
+
+
{"Auto-Compounding"}
+
+ {"Automatically reinvest your yields to maximize compound returns across all positions."}
+
+
+
+
+ {"Initial: $1,000"}
+
+
+ {"+ Yield: $120"}
+
+
+ {"Compounded: $1,134"}
+
+
+
+
+
+
+
+
+
+ {"⚖️"}
+
+
{"Portfolio Rebalancing"}
+
+ {"Maintain optimal portfolio allocation with automated rebalancing strategies."}
+
+
+
+
+
{"ETH 40%"}
+
{"BTC 35%"}
+
{"USDC 25%"}
+
+
{"⟲"}
+
+
+
+
+
+
+
+
+ {"🛡️"}
+
+
{"Risk Management"}
+
+ {"Advanced risk controls with stop-loss, take-profit, and position sizing automation."}
+
+
+
+
+
+
+ {"Max Drawdown:"}
+ {"5.2%"}
+
+
+
+
+
+
+
+
+
+
+ // Cross-chain capabilities
+
+
+
+
+
{"Cross-Chain DeFi"}
+
+ {"Access opportunities across multiple blockchain networks"}
+
+
+
+
+
+
+
+
+
{"Ξ"}
+
{"Ethereum"}
+
+
{"TVL: $1.2B"}
+
{"APY: 8.5%"}
+
+
+
+
{"⬟"}
+
{"Polygon"}
+
+
{"TVL: $450M"}
+
{"APY: 12.3%"}
+
+
+
+
{"🔶"}
+
{"BSC"}
+
+
{"TVL: $320M"}
+
{"APY: 15.7%"}
+
+
+
+
{"🔺"}
+
{"Avalanche"}
+
+
{"TVL: $280M"}
+
{"APY: 18.2%"}
+
+
+
+
+
+
+
+
{"Seamless Cross-Chain Operations"}
+
+ {"Our advanced bridge technology enables instant asset transfers and yield optimization across all major blockchain networks."}
+
+
+
+
+
{"✓"}
+
{"Instant cross-chain swaps"}
+
+
+
{"✓"}
+
{"Unified portfolio management"}
+
+
+
{"✓"}
+
{"Automated yield optimization"}
+
+
+
{"✓"}
+
{"Gas fee optimization"}
+
+
+
+
+
+
+
+
+ // DeFi statistics
+
+
+
+
+
{"DeFi Platform Statistics"}
+
+
+
+
+
+
+
{"2400000000"}
+
{"Total Value Locked (USD)"}
+
+
+
+
+
+
{"89000"}
+
{"Active DeFi Users"}
+
+
+
+
+
+
{"18.5%"}
+
{"Average APY"}
+
+
+
+
+
+
{"1200000000"}
+
{"24h Trading Volume (USD)"}
+
+
+
+
+
+
+ // Call to action
+
+
+
+
+
+
{"Ready to Maximize Your DeFi Returns?"}
+
+ {"Join thousands of users earning passive income through our advanced DeFi protocols"}
+
+
+
+ {"Start Earning"}
+
+
to={Route::Platform} classes="btn btn-outline-primary btn-lg">
+ {"Explore Platform"}
+ >
+
+
+
+
+
+
+ >
+ }
+}
\ No newline at end of file
diff --git a/website/src/pages/home.rs b/website/src/pages/home.rs
new file mode 100644
index 0000000..6a4b641
--- /dev/null
+++ b/website/src/pages/home.rs
@@ -0,0 +1,265 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+use crate::app::Route;
+use crate::components::{Hero, Section, MarketplaceFlow, InteractiveLiquidityPool, PlatformWireframe, WorldMap};
+
+#[function_component(Home)]
+pub fn home() -> Html {
+ html! {
+ <>
+
+
+
+
+
+ // Platform preview section with interactive demos
+
+
+
+
+
{"Zanzibar Digital Freezone Ecosystem"}
+
+ {"Three powerful platforms enabling digital entity formation and asset trading in Zanzibar"}
+
+
+
+
+
+
+
+
+ {"🏢"}
+
+
{"Platform"}
+
+ {"Establish your digital legal entity and residence in Zanzibar. Manage, administer and govern your digital presence with full regulatory compliance."}
+
+
+
+ {"✓"}
+ {"Digital entity formation in Zanzibar"}
+
+
+ {"✓"}
+ {"Digital residence establishment"}
+
+
+ {"✓"}
+ {"Regulatory compliance & reporting"}
+
+
+
to={Route::Platform} classes="btn btn-outline-primary">
+ {"Explore Platform"}
+ >
+
+
+
+
+
+
+
+
+
+ {"🛒"}
+
+
{"Marketplace"}
+
+ {"Trade digital assets within the Zanzibar Digital Freezone. Access global markets while operating under favorable regulatory frameworks."}
+
+
+
+ {"✓"}
+ {"Digital asset trading within freezone"}
+
+
+ {"✓"}
+ {"Regulatory compliant transactions"}
+
+
+ {"✓"}
+ {"Global market access"}
+
+
+
to={Route::Marketplace} classes="btn btn-outline-primary">
+ {"Explore Marketplace"}
+ >
+
+
+
+
+
+
+
+
+
+ {"💰"}
+
+
{"DeFi"}
+
+ {"Advanced DeFi capabilities for digital asset trading within the Zanzibar Digital Freezone. Leverage, stake, and earn with regulatory clarity."}
+
+
+
+ {"✓"}
+ {"Freezone-compliant DeFi protocols"}
+
+
+ {"✓"}
+ {"Digital asset yield generation"}
+
+
+ {"✓"}
+ {"Regulated trading environment"}
+
+
+
to={Route::DeFi} classes="btn btn-outline-primary">
+ {"Start Trading"}
+ >
+
+
+
+
+
+
+
+
+
+ // Why choose Freezone section
+
+
+
+
+
{"Why Choose Zanzibar Digital Freezone?"}
+
+ {"Experience the future of digital entity formation and asset trading with regulatory clarity"}
+
+
+
+
+
+
+
+
+ {"🔒"}
+
+
{"Secure & Trustless"}
+
+ {"Built on blockchain technology with bank-grade security, multi-signature wallets, and complete transparency in all operations."}
+
+
+
+ {"🛡️"}
+ {"Multi-sig security"}
+
+
+ {"🔍"}
+ {"Audited smart contracts"}
+
+
+
+
+
+
+
+
+ {"⚡"}
+
+
{"Lightning Fast"}
+
+ {"Experience instant transactions and real-time updates across all platforms with sub-second settlement times."}
+
+
+
+
+
+
+
+
+ {"🌍"}
+
+
{"Global Access"}
+
+ {"Access your digital assets and services from anywhere in the world, 24/7, with support for multiple currencies and languages."}
+
+
+
+ {"150+"}
+ {"Countries"}
+
+
+ {"24/7"}
+ {"Support"}
+
+
+
+
+
+
+
+
+ // Call to action
+
+
+
+
+
+
{"Ready to Establish Your Digital Presence?"}
+
+ {"Join the Zanzibar Digital Freezone and unlock global opportunities with regulatory clarity"}
+
+
+
+
+
+ {"✓"}
+ {"Digital entity formation"}
+
+
+ {"✓"}
+ {"Regulatory compliance"}
+
+
+ {"✓"}
+ {"Global market access"}
+
+
+
+
+
+
+
+ >
+ }
+}
\ No newline at end of file
diff --git a/website/src/pages/marketplace.rs b/website/src/pages/marketplace.rs
new file mode 100644
index 0000000..5300148
--- /dev/null
+++ b/website/src/pages/marketplace.rs
@@ -0,0 +1,201 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+use crate::app::Route;
+use crate::components::{Hero, Section, MarketplaceFlow, InteractiveLiquidityPool, LiveOrderbook};
+
+#[function_component(Marketplace)]
+pub fn marketplace() -> Html {
+ html! {
+ <>
+ // Custom hero with integrated marketplace flow
+
+
+
+
+
+
{"Marketplace"}
+
+ {"The future of business digitalization. Transform your real-world assets and services into digital tokens, enabling seamless global commerce within the Zanzibar Digital Freezone."}
+
+
+
+
+
+ // Marketplace flow on the right side
+
+
+
+
+
+
+
+ // Scroll indicator
+
+
+
+ // Real world asset digitalization section
+
+
+
+
+
{"Digitalize Real World Assets"}
+
+ {"Transform traditional assets into digital tokens for global accessibility, fractional ownership, and enhanced liquidity"}
+
+
+
+
+ // Real Estate - Left aligned
+
+
+
+
{"Real Estate Tokenization"}
+
+ {"Tokenize eco-friendly developments, renewable energy projects, and sustainable infrastructure that benefits local communities while preserving Zanzibar's natural beauty."}
+
+
+ {"✓ Solar-powered eco-resorts with community ownership"}
+ {"✓ Mangrove restoration project funding"}
+ {"✓ Sustainable housing cooperatives"}
+ {"✓ Ocean conservation infrastructure"}
+
+
+
+
+
+
+
+
+
+
{"Coral Reef Eco-Resort"}
+
{"$1.2M Total Value • $500 per token • 2400 tokens available"}
+
+
{"78% Funded • Carbon Negative"}
+
+
+
+
+
+
+
+ // Services - Right aligned
+
+
+
+
{"Service Digitalization"}
+
+ {"Transform professional services into smart contract-powered digital offerings with automated execution, milestone tracking, and global marketplace access."}
+
+
+ {"✓ Educational program licensing"}
+ {"✓ Healthcare service contracts"}
+ {"✓ Training and certification services"}
+ {"✓ Professional consulting packages"}
+
+
+
+
+
+
+
+
+
+
+
{"Ocean Conservation Consultancy"}
+
{"$2,500/month • 4.8★ • 89 projects completed"}
+
+
+
+
{"Active Program"}
+
+
{"✓ Community Assessment"}
+
{"⏳ Training Deployment"}
+
{"○ Impact Measurement"}
+
+
+
+
+
+
+
+
+ // Software & Shares - Left aligned
+
+
+
+
{"Company Share Tokenization"}
+
+ {"Tokenize company shares and equity stakes for enhanced liquidity, fractional ownership, and global investor access across diverse industries and business models."}
+
+
+ {"✓ Agricultural cooperative equity tokens"}
+ {"✓ Environmental project shares"}
+ {"✓ Technology startup equity"}
+ {"✓ Industry-specific investment tokens"}
+
+
+
+
+
+
+
+
+
{"Cooperative Shares"}
+
{"Zanzibar Spice Farmers Co-op"}
+
{"1,200 shares • $75 each • Fair Trade Certified"}
+
+
+
{"Carbon Credits"}
+
{"Mangrove Restoration Project"}
+
{"5,000 credits • $12 each • Verified Impact"}
+
+
+
{"FinTech Startup"}
+
{"Community Banking Platform"}
+
{"Series A • $50 per token • Financial Inclusion"}
+
+
+
+
+
+
+
+
+
+ // Call to action
+
+
+
+
+
+
{"Ready to Join the Digital Asset Economy?"}
+
+ {"Transform your traditional assets into digital tokens and unlock global opportunities within the Zanzibar Digital Freezone. Access new markets, enable fractional ownership, and enhance liquidity for your investments."}
+
+
+
+
+
+
+
+ >
+ }
+}
\ No newline at end of file
diff --git a/website/src/pages/mod.rs b/website/src/pages/mod.rs
new file mode 100644
index 0000000..73e6eb3
--- /dev/null
+++ b/website/src/pages/mod.rs
@@ -0,0 +1,11 @@
+pub mod home;
+pub mod platform;
+pub mod marketplace;
+pub mod defi;
+pub mod not_found;
+
+pub use home::Home;
+pub use platform::Platform;
+pub use marketplace::Marketplace;
+pub use defi::DeFi;
+pub use not_found::NotFound;
\ No newline at end of file
diff --git a/website/src/pages/not_found.rs b/website/src/pages/not_found.rs
new file mode 100644
index 0000000..2e7acc2
--- /dev/null
+++ b/website/src/pages/not_found.rs
@@ -0,0 +1,27 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+use crate::app::Route;
+
+#[function_component(NotFound)]
+pub fn not_found() -> Html {
+ html! {
+
+
+
+
+
+
{"404"}
+
{"Page Not Found"}
+
+ {"The page you're looking for doesn't exist in the freezone. Let's get you back on track."}
+
+
to={Route::Home} classes="btn btn-primary btn-lg">
+ {"Return Home"}
+ >
+
+
+
+
+
+ }
+}
\ No newline at end of file
diff --git a/website/src/pages/platform.rs b/website/src/pages/platform.rs
new file mode 100644
index 0000000..4f71089
--- /dev/null
+++ b/website/src/pages/platform.rs
@@ -0,0 +1,381 @@
+use yew::prelude::*;
+use yew_router::prelude::*;
+use crate::app::Route;
+use crate::components::{Hero, Section, PlatformWireframe};
+
+#[function_component(Platform)]
+pub fn platform() -> Html {
+ html! {
+ <>
+
+
+ // Interactive platform demo
+
+
+
+
+
{"Platform Interface Preview"}
+
+ {"Experience the intuitive dashboard that powers digital business management"}
+
+
+
+
+
+
+
+ // Core platform features
+
+
+
+
+
{"Core Platform Features"}
+
+ {"Everything you need to manage and govern your digital business empire"}
+
+
+
+
+
+
+
+
+
+
+ {"🏢"}
+
+
{"Company Formation"}
+
+ {"Establish digital companies with complete legal framework and automated compliance."}
+
+
+
+
+
+
+ {"⚖️"}
+
+
{"Legal Framework"}
+
+ {"Built-in legal structures with smart contract enforcement and dispute resolution."}
+
+
+
+
+
+
+ {"💰"}
+
+
{"Treasury Management"}
+
+ {"Advanced treasury operations with multi-signature wallets and automated accounting."}
+
+
+
+
+
+
+ {"🗳️"}
+
+
{"Governance Tools"}
+
+ {"Democratic decision-making with voting mechanisms and proposal systems."}
+
+
+
+
+
+
+
+
+
{"Live Company Dashboard"}
+
+
+
+
+
+
{"$2.4M"}
+
{"Treasury Balance"}
+
{"+12.5%"}
+
+
+
{"156"}
+
{"Shareholders"}
+
{"+8"}
+
+
+
{"23"}
+
{"Active Proposals"}
+
{"±0"}
+
+
+
+
+
+
{"Recent Activity"}
+
+
+
+
{"New proposal: Q4 Budget Allocation"}
+
{"2h ago"}
+
+
+
+
{"Treasury deposit: $50,000 USDC"}
+
{"4h ago"}
+
+
+
+
{"Proposal passed: Marketing Budget"}
+
{"1d ago"}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ // Advanced governance section
+
+
+
+
+
{"Advanced Governance"}
+
+ {"Sophisticated tools for democratic business management and stakeholder engagement"}
+
+
+
+
+
+
+
+
+ {"📊"}
+
+
{"Proposal System"}
+
+ {"Create, discuss, and vote on business proposals with transparent tracking and automated execution."}
+
+
+
+
{"Q4 Marketing Budget"}
+
{"Passing"}
+
+
+ {"78% Yes"}
+ {"22% No"}
+
+
+
+
+
+
+
+
+
+ {"👥"}
+
+
{"Stakeholder Management"}
+
+ {"Manage shareholders, voting rights, and stake distributions with complete transparency."}
+
+
+
+
+
+
+
+
+ {"🔐"}
+
+
{"Multi-Sig Treasury"}
+
+ {"Secure treasury management with multi-signature requirements and automated compliance."}
+
+
+
+
+
{"Marketing Campaign Payment"}
+
+
{"✓"}
+
{"✓"}
+
{"⏳"}
+
+
+
+
+
+
+
+
+
+ // Integration ecosystem
+
+
+
+
+
{"Integration Ecosystem"}
+
+ {"Seamlessly connect with external services and blockchain networks"}
+
+
+
+
+
+
+
+
{"🔗"}
+
{"Blockchain Networks"}
+
{"Ethereum, Polygon, BSC, Avalanche"}
+
+
+
+
+
{"💳"}
+
{"Payment Gateways"}
+
{"Stripe, PayPal, Crypto payments"}
+
+
+
+
+
{"📊"}
+
{"Analytics Tools"}
+
{"Google Analytics, Mixpanel, Custom"}
+
+
+
+
+
{"🛡️"}
+
{"Security Services"}
+
{"Multi-factor auth, KYC, AML"}
+
+
+
+
+
+
+ // Success metrics
+
+
+
+
+
{"Platform Success Metrics"}
+
+
+
+
+
+
+
{"2850"}
+
{"Active Companies"}
+
+
+
+
+
+
{"45000"}
+
{"Platform Users"}
+
+
+
+
+
+
{"1200000000"}
+
{"Assets Under Management (USD)"}
+
+
+
+
+
+
{"12500"}
+
{"Governance Proposals"}
+
+
+
+
+
+
+ // Call to action
+
+
+
+
+
+
{"Ready to Launch Your Digital Company?"}
+
+ {"Join the future of business management with our comprehensive platform"}
+
+
+
+ {"Start Building"}
+
+
to={Route::Marketplace} classes="btn btn-outline-primary btn-lg">
+ {"Explore Marketplace"}
+ >
+
+
+
+
+
+
+ >
+ }
+}
\ No newline at end of file
diff --git a/website/src/utils/markdown.rs b/website/src/utils/markdown.rs
new file mode 100644
index 0000000..91900f5
--- /dev/null
+++ b/website/src/utils/markdown.rs
@@ -0,0 +1,33 @@
+use pulldown_cmark::{Parser, Options, html};
+
+pub fn render_markdown(markdown: &str) -> String {
+ let mut options = Options::empty();
+ options.insert(Options::ENABLE_STRIKETHROUGH);
+ options.insert(Options::ENABLE_TABLES);
+ options.insert(Options::ENABLE_FOOTNOTES);
+
+ let parser = Parser::new_ext(markdown, options);
+ let mut html_output = String::new();
+ html::push_html(&mut html_output, parser);
+ html_output
+}
+
+pub fn extract_title_and_description(markdown: &str) -> (String, String) {
+ let lines: Vec<&str> = markdown.lines().collect();
+
+ let title = lines
+ .iter()
+ .find(|line| line.starts_with("# "))
+ .map(|line| line.replace("# ", ""))
+ .unwrap_or_default();
+
+ let description = lines
+ .iter()
+ .skip_while(|line| line.starts_with("#") || line.trim().is_empty())
+ .take_while(|line| !line.trim().is_empty())
+ .map(|s| s.to_string())
+ .collect::>()
+ .join(" ");
+
+ (title, description)
+}
\ No newline at end of file
diff --git a/website/src/utils/mod.rs b/website/src/utils/mod.rs
new file mode 100644
index 0000000..21685ae
--- /dev/null
+++ b/website/src/utils/mod.rs
@@ -0,0 +1,31 @@
+pub mod markdown;
+
+use pulldown_cmark::{Parser, Options, html};
+
+pub fn markdown_to_html(markdown: &str) -> String {
+ let mut options = Options::empty();
+ options.insert(Options::ENABLE_STRIKETHROUGH);
+ options.insert(Options::ENABLE_TABLES);
+ options.insert(Options::ENABLE_FOOTNOTES);
+
+ let parser = Parser::new_ext(markdown, options);
+ let mut html_output = String::new();
+ html::push_html(&mut html_output, parser);
+ html_output
+}
+
+pub fn load_markdown_content(path: &str) -> String {
+ // In a real application, you would load this from the file system
+ // For this demo, we'll return the content based on the path
+ match path {
+ "home/hero" => include_str!("../../content/home/hero.md").to_string(),
+ "home/about" => include_str!("../../content/home/about.md").to_string(),
+ "platform/hero" => include_str!("../../content/platform/hero.md").to_string(),
+ "platform/features" => include_str!("../../content/platform/features.md").to_string(),
+ "marketplace/hero" => include_str!("../../content/marketplace/hero.md").to_string(),
+ "marketplace/features" => include_str!("../../content/marketplace/features.md").to_string(),
+ "defi/hero" => include_str!("../../content/defi/hero.md").to_string(),
+ "defi/features" => include_str!("../../content/defi/features.md").to_string(),
+ _ => "Content not found".to_string(),
+ }
+}
\ No newline at end of file
diff --git a/website/static/js/animations.js b/website/static/js/animations.js
new file mode 100644
index 0000000..be30ada
--- /dev/null
+++ b/website/static/js/animations.js
@@ -0,0 +1,557 @@
+// Advanced animations and interactions for Freezone website
+class FreezoneAnimations {
+ constructor() {
+ this.init();
+ this.setupInteractiveElements();
+ }
+
+ init() {
+ // Initialize on DOM load
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', () => this.onReady());
+ } else {
+ this.onReady();
+ }
+ }
+
+ onReady() {
+ this.setupNavbarEffects();
+ this.setupSmoothScrolling();
+ this.setupMarketplaceFlow();
+ this.setupOrderbookAnimation();
+ this.setupLiquidityPoolAnimation();
+ this.setupWireframeAnimations();
+ this.setupChartAnimations();
+ this.setupCounterAnimations();
+ }
+
+ setupCounterAnimations() {
+ // Simple counter animation for statistics
+ const counters = document.querySelectorAll('.counter');
+ counters.forEach(counter => {
+ const target = parseInt(counter.textContent.replace(/[^\d]/g, ''));
+ const suffix = counter.textContent.replace(/[\d,]/g, '');
+ let current = 0;
+ const increment = target / 100;
+ const timer = setInterval(() => {
+ current += increment;
+ if (current >= target) {
+ current = target;
+ clearInterval(timer);
+ }
+ counter.textContent = Math.floor(current).toLocaleString() + suffix;
+ }, 20);
+ });
+ }
+
+ setupObservers() {
+ // Intersection Observer for scroll animations
+ this.observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -100px 0px'
+ };
+
+ this.observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+
+ // Trigger specific animations based on element type
+ if (entry.target.classList.contains('counter')) {
+ this.animateCounter(entry.target);
+ }
+ if (entry.target.classList.contains('chart')) {
+ this.animateChart(entry.target);
+ }
+ if (entry.target.classList.contains('wireframe')) {
+ this.animateWireframe(entry.target);
+ }
+ }
+ });
+ }, this.observerOptions);
+
+ // Observe all animated elements
+ this.observeElements();
+ }
+
+ observeElements() {
+ const animatedElements = document.querySelectorAll(
+ '.fade-in, .slide-in-left, .slide-in-right, .scale-in, .counter, .chart, .wireframe'
+ );
+ animatedElements.forEach(el => {
+ el.classList.add('animate');
+ this.observer.observe(el);
+ });
+ }
+
+ setupScrollAnimations() {
+ // Add stagger effect to grouped elements
+ const groups = document.querySelectorAll('.row');
+ groups.forEach(group => {
+ const children = group.querySelectorAll('.fade-in, .slide-in-left, .slide-in-right');
+ children.forEach((child, index) => {
+ child.style.transitionDelay = `${index * 0.1}s`;
+ });
+ });
+ }
+
+ setupNavbarEffects() {
+ const navbar = document.querySelector('.navbar');
+ if (!navbar) return;
+
+ let lastScrollY = window.scrollY;
+ let ticking = false;
+
+ const updateNavbar = () => {
+ const scrollY = window.scrollY;
+
+ if (scrollY > 100) {
+ navbar.classList.add('scrolled');
+ } else {
+ navbar.classList.remove('scrolled');
+ }
+
+ // Hide/show navbar on scroll
+ if (scrollY > lastScrollY && scrollY > 200) {
+ navbar.style.transform = 'translateY(-100%)';
+ } else {
+ navbar.style.transform = 'translateY(0)';
+ }
+
+ lastScrollY = scrollY;
+ ticking = false;
+ };
+
+ window.addEventListener('scroll', () => {
+ if (!ticking) {
+ requestAnimationFrame(updateNavbar);
+ ticking = true;
+ }
+ });
+ }
+
+ setupSmoothScrolling() {
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', (e) => {
+ e.preventDefault();
+ const target = document.querySelector(anchor.getAttribute('href'));
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
+ }
+
+ setupMarketplaceFlow() {
+ const containers = document.querySelectorAll('.marketplace-flow-container');
+ containers.forEach(container => {
+ const items = container.querySelector('.marketplace-items');
+ if (!items) return;
+
+ // Clone items for seamless loop
+ const itemsClone = items.cloneNode(true);
+ container.appendChild(itemsClone);
+
+ // Add hover pause effect
+ container.addEventListener('mouseenter', () => {
+ items.style.animationPlayState = 'paused';
+ itemsClone.style.animationPlayState = 'paused';
+ });
+
+ container.addEventListener('mouseleave', () => {
+ items.style.animationPlayState = 'running';
+ itemsClone.style.animationPlayState = 'running';
+ });
+ });
+ }
+
+ setupOrderbookAnimation() {
+ const orderbooks = document.querySelectorAll('.orderbook');
+ orderbooks.forEach(orderbook => {
+ this.animateOrderbook(orderbook);
+ });
+ }
+
+ animateOrderbook(orderbook) {
+ const orders = [
+ { price: '42,150.00', amount: '0.5432', type: 'buy' },
+ { price: '42,145.50', amount: '1.2100', type: 'buy' },
+ { price: '42,140.25', amount: '0.8750', type: 'buy' },
+ { price: '42,155.75', amount: '0.3200', type: 'sell' },
+ { price: '42,160.00', amount: '0.9800', type: 'sell' },
+ { price: '42,165.25', amount: '1.5000', type: 'sell' }
+ ];
+
+ let currentIndex = 0;
+
+ const addOrder = () => {
+ if (currentIndex >= orders.length) {
+ currentIndex = 0;
+ orderbook.innerHTML = 'Live Orderbook
';
+ }
+
+ const order = orders[currentIndex];
+ const orderRow = document.createElement('div');
+ orderRow.className = `order-row order-${order.type}`;
+ orderRow.innerHTML = `
+ $${order.price}
+ ${order.amount} BTC
+ `;
+
+ orderbook.appendChild(orderRow);
+ currentIndex++;
+
+ // Remove old orders to keep it manageable
+ const rows = orderbook.querySelectorAll('.order-row');
+ if (rows.length > 8) {
+ rows[1].remove(); // Keep header
+ }
+ };
+
+ // Add orders periodically
+ setInterval(addOrder, 2000);
+ addOrder(); // Initial order
+ }
+
+ setupLiquidityPoolAnimation() {
+ const pools = document.querySelectorAll('.liquidity-pool');
+ pools.forEach(pool => {
+ this.animateLiquidityPool(pool);
+ });
+ }
+
+ animateLiquidityPool(pool) {
+ const updatePool = () => {
+ const ethAmount = (Math.random() * 1000 + 500).toFixed(2);
+ const usdcAmount = (Math.random() * 2000000 + 1000000).toFixed(0);
+ const apr = (Math.random() * 20 + 5).toFixed(1);
+
+ pool.innerHTML = `
+
+
+
+
+
USDC: ${Number(usdcAmount).toLocaleString()}
+
+ `;
+ };
+
+ updatePool();
+ setInterval(updatePool, 5000);
+ }
+
+ setupWireframeAnimations() {
+ const wireframes = document.querySelectorAll('.platform-wireframe');
+ wireframes.forEach(wireframe => {
+ this.createWireframeContent(wireframe);
+ });
+ }
+
+ createWireframeContent(wireframe) {
+ wireframe.innerHTML = `
+
+
+
+ `;
+ }
+
+ animateWireframe(wireframe) {
+ const blocks = wireframe.querySelectorAll('.wireframe-block');
+ blocks.forEach((block, index) => {
+ setTimeout(() => {
+ block.style.background = 'var(--pastel-blue)';
+ setTimeout(() => {
+ block.style.background = 'var(--border-color)';
+ }, 500);
+ }, index * 200);
+ });
+ }
+
+ setupChartAnimations() {
+ const charts = document.querySelectorAll('.defi-chart');
+ charts.forEach(chart => {
+ this.createChart(chart);
+ });
+ }
+
+ createChart(chart) {
+ const canvas = document.createElement('canvas');
+ canvas.width = chart.offsetWidth;
+ canvas.height = chart.offsetHeight;
+ chart.appendChild(canvas);
+
+ const ctx = canvas.getContext('2d');
+ this.animateChart(chart, ctx, canvas);
+ }
+
+ animateChart(chart, ctx, canvas) {
+ if (!ctx || !canvas) return;
+
+ const points = [];
+ const numPoints = 50;
+
+ // Generate random chart data
+ for (let i = 0; i < numPoints; i++) {
+ points.push({
+ x: (i / numPoints) * canvas.width,
+ y: Math.random() * canvas.height * 0.6 + canvas.height * 0.2
+ });
+ }
+
+ let animationProgress = 0;
+
+ const animate = () => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Draw grid
+ ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
+ ctx.lineWidth = 1;
+ for (let i = 0; i < 10; i++) {
+ const y = (i / 10) * canvas.height;
+ ctx.beginPath();
+ ctx.moveTo(0, y);
+ ctx.lineTo(canvas.width, y);
+ ctx.stroke();
+ }
+
+ // Draw chart line
+ const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+ gradient.addColorStop(0, '#a7f3d0');
+ gradient.addColorStop(0.5, '#c4b5fd');
+ gradient.addColorStop(1, '#fbb6ce');
+
+ ctx.strokeStyle = gradient;
+ ctx.lineWidth = 3;
+ ctx.beginPath();
+
+ const visiblePoints = Math.floor(animationProgress * points.length);
+
+ for (let i = 0; i < visiblePoints; i++) {
+ if (i === 0) {
+ ctx.moveTo(points[i].x, points[i].y);
+ } else {
+ ctx.lineTo(points[i].x, points[i].y);
+ }
+ }
+
+ ctx.stroke();
+
+ // Fill area under curve
+ ctx.fillStyle = 'rgba(167, 243, 208, 0.1)';
+ ctx.beginPath();
+ ctx.moveTo(points[0].x, canvas.height);
+ for (let i = 0; i < visiblePoints; i++) {
+ ctx.lineTo(points[i].x, points[i].y);
+ }
+ ctx.lineTo(points[visiblePoints - 1]?.x || 0, canvas.height);
+ ctx.closePath();
+ ctx.fill();
+
+ animationProgress += 0.02;
+ if (animationProgress < 1) {
+ requestAnimationFrame(animate);
+ }
+ };
+
+ animate();
+ }
+
+ setupCounterAnimations() {
+ // Counter animation will be triggered by intersection observer
+ }
+
+ animateCounter(element) {
+ const target = parseInt(element.textContent.replace(/[^\d]/g, ''));
+ const duration = 2000;
+ const start = performance.now();
+ const suffix = element.textContent.replace(/[\d,]/g, '');
+
+ const animate = (currentTime) => {
+ const elapsed = currentTime - start;
+ const progress = Math.min(elapsed / duration, 1);
+
+ // Easing function
+ const easeOut = 1 - Math.pow(1 - progress, 3);
+ const current = Math.floor(target * easeOut);
+
+ element.textContent = current.toLocaleString() + suffix;
+
+ if (progress < 1) {
+ requestAnimationFrame(animate);
+ }
+ };
+
+ requestAnimationFrame(animate);
+ }
+
+ setupParallaxEffects() {
+ const parallaxElements = document.querySelectorAll('.hero-section');
+
+ window.addEventListener('scroll', () => {
+ const scrolled = window.pageYOffset;
+
+ parallaxElements.forEach(element => {
+ const speed = 0.3;
+ element.style.transform = `translateY(${scrolled * speed}px)`;
+ });
+ });
+ }
+
+ setupInteractiveElements() {
+ // Add hover effects to cards
+ const cards = document.querySelectorAll('.feature-card');
+ cards.forEach(card => {
+ card.addEventListener('mouseenter', () => {
+ card.style.transform = 'translateY(-15px) scale(1.02)';
+ });
+
+ card.addEventListener('mouseleave', () => {
+ card.style.transform = 'translateY(0) scale(1)';
+ });
+ });
+
+ // Add click ripple effect to buttons
+ const buttons = document.querySelectorAll('.btn');
+ buttons.forEach(button => {
+ button.addEventListener('click', (e) => {
+ const ripple = document.createElement('span');
+ const rect = button.getBoundingClientRect();
+ const size = Math.max(rect.width, rect.height);
+ const x = e.clientX - rect.left - size / 2;
+ const y = e.clientY - rect.top - size / 2;
+
+ ripple.style.cssText = `
+ position: absolute;
+ width: ${size}px;
+ height: ${size}px;
+ left: ${x}px;
+ top: ${y}px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+ transform: scale(0);
+ animation: ripple 0.6s ease-out;
+ pointer-events: none;
+ `;
+
+ button.style.position = 'relative';
+ button.style.overflow = 'hidden';
+ button.appendChild(ripple);
+
+ setTimeout(() => ripple.remove(), 600);
+ });
+ });
+ }
+
+ setupParticleSystem() {
+ const heroSections = document.querySelectorAll('.hero-section');
+ heroSections.forEach(section => {
+ this.createParticles(section);
+ });
+ }
+
+ createParticles(container) {
+ const canvas = document.createElement('canvas');
+ canvas.style.position = 'absolute';
+ canvas.style.top = '0';
+ canvas.style.left = '0';
+ canvas.style.width = '100%';
+ canvas.style.height = '100%';
+ canvas.style.pointerEvents = 'none';
+ canvas.style.zIndex = '1';
+
+ container.appendChild(canvas);
+
+ const ctx = canvas.getContext('2d');
+ const particles = [];
+
+ const resizeCanvas = () => {
+ canvas.width = container.offsetWidth;
+ canvas.height = container.offsetHeight;
+ };
+
+ resizeCanvas();
+ window.addEventListener('resize', resizeCanvas);
+
+ // Create particles
+ for (let i = 0; i < 50; i++) {
+ particles.push({
+ x: Math.random() * canvas.width,
+ y: Math.random() * canvas.height,
+ vx: (Math.random() - 0.5) * 0.5,
+ vy: (Math.random() - 0.5) * 0.5,
+ size: Math.random() * 2 + 1,
+ opacity: Math.random() * 0.5 + 0.1
+ });
+ }
+
+ const animate = () => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ particles.forEach(particle => {
+ particle.x += particle.vx;
+ particle.y += particle.vy;
+
+ // Wrap around edges
+ if (particle.x < 0) particle.x = canvas.width;
+ if (particle.x > canvas.width) particle.x = 0;
+ if (particle.y < 0) particle.y = canvas.height;
+ if (particle.y > canvas.height) particle.y = 0;
+
+ // Draw particle
+ ctx.beginPath();
+ ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+ ctx.fillStyle = `rgba(167, 243, 208, ${particle.opacity})`;
+ ctx.fill();
+ });
+
+ requestAnimationFrame(animate);
+ };
+
+ animate();
+ }
+
+ // Public method to reinitialize animations (for SPA navigation)
+ reinitialize() {
+ this.observeElements();
+ this.setupMarketplaceFlow();
+ this.setupOrderbookAnimation();
+ this.setupLiquidityPoolAnimation();
+ this.setupWireframeAnimations();
+ this.setupChartAnimations();
+ this.setupParticleSystem();
+ }
+}
+
+// Add CSS for ripple animation
+const style = document.createElement('style');
+style.textContent = `
+ @keyframes ripple {
+ to {
+ transform: scale(2);
+ opacity: 0;
+ }
+ }
+`;
+document.head.appendChild(style);
+
+// Initialize animations
+const freezoneAnimations = new FreezoneAnimations();
+
+// Export for use in Yew components
+window.freezoneAnimations = freezoneAnimations;
+window.reinitializeAnimations = () => freezoneAnimations.reinitialize();
\ No newline at end of file
diff --git a/website/styles/main.css b/website/styles/main.css
new file mode 100644
index 0000000..bac1bdc
--- /dev/null
+++ b/website/styles/main.css
@@ -0,0 +1,3312 @@
+/* Custom variables - Professional black/white with pastel highlights */
+:root {
+ /* Core colors */
+ --black: #000000;
+ --white: #ffffff;
+ --gray-50: #f8fafc;
+ --gray-100: #f1f5f9;
+ --gray-200: #e2e8f0;
+ --gray-300: #cbd5e1;
+ --gray-400: #94a3b8;
+ --gray-500: #64748b;
+ --gray-600: #475569;
+ --gray-700: #334155;
+ --gray-800: #1e293b;
+ --gray-900: #0f172a;
+
+ /* Pastel highlights */
+ --pastel-blue: #a7f3d0;
+ --pastel-purple: #c4b5fd;
+ --pastel-pink: #fbb6ce;
+ --pastel-yellow: #fde68a;
+ --pastel-green: #86efac;
+ --pastel-orange: #fed7aa;
+
+ /* Accent colors */
+ --accent-primary: #3b82f6;
+ --accent-secondary: #8b5cf6;
+ --accent-success: #10b981;
+ --accent-warning: #f59e0b;
+ --accent-danger: #ef4444;
+
+ /* Theme colors */
+ --bg-primary: var(--black);
+ --bg-secondary: var(--gray-900);
+ --bg-tertiary: var(--gray-800);
+ --text-primary: var(--white);
+ --text-secondary: var(--gray-300);
+ --text-muted: var(--gray-400);
+ --border-color: var(--gray-700);
+ --border-light: var(--gray-600);
+}
+
+/* Global styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--bg-primary);
+ color: var(--text-primary);
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+ overflow-x: hidden;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+ width: 6px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--border-color);
+ border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--pastel-blue);
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 600;
+ line-height: 1.2;
+ margin-bottom: 1rem;
+}
+
+.display-1 { font-size: 5rem; font-weight: 700; }
+.display-2 { font-size: 4.5rem; font-weight: 700; }
+.display-3 { font-size: 4rem; font-weight: 700; }
+.display-4 { font-size: 3.5rem; font-weight: 700; }
+
+/* Header styles */
+.navbar {
+ background: rgba(0, 0, 0, 0.95) !important;
+ backdrop-filter: blur(20px);
+ border-bottom: 1px solid var(--border-color);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 1000;
+}
+
+.navbar.scrolled {
+ background: rgba(0, 0, 0, 0.98) !important;
+ backdrop-filter: blur(30px);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.navbar-brand {
+ font-weight: 800;
+ font-size: 1.75rem;
+ color: var(--white) !important;
+ text-decoration: none;
+ position: relative;
+}
+
+.navbar-brand::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: linear-gradient(90deg, var(--pastel-blue), var(--pastel-purple));
+ border-radius: 1px;
+}
+
+.navbar-nav .nav-link {
+ color: var(--text-secondary) !important;
+ font-weight: 500;
+ font-size: 0.95rem;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ margin: 0 1.5rem;
+}
+
+.navbar-nav .nav-link:hover {
+ color: var(--white) !important;
+ transform: translateY(-1px);
+}
+
+.navbar-nav .nav-link::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 50%;
+ width: 0;
+ height: 2px;
+ background: var(--pastel-blue);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ transform: translateX(-50%);
+}
+
+.navbar-nav .nav-link:hover::after {
+ width: 100%;
+}
+
+/* Button styles */
+.btn {
+ border-radius: 12px;
+ font-weight: 600;
+ font-size: 0.95rem;
+ padding: 12px 28px;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ border: none;
+ position: relative;
+ overflow: hidden;
+}
+
+.btn::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+ transition: left 0.5s;
+}
+
+.btn:hover::before {
+ left: 100%;
+}
+
+.btn-primary {
+ background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+ color: var(--white);
+ box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+}
+
+.btn-primary:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+ color: var(--white);
+}
+
+.btn-outline-primary {
+ border: 2px solid var(--pastel-blue);
+ color: var(--pastel-blue);
+ background: transparent;
+}
+
+.btn-outline-primary:hover {
+ background: var(--pastel-blue);
+ color: var(--black);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(167, 243, 208, 0.3);
+}
+
+.btn-lg {
+ padding: 16px 36px;
+ font-size: 1.1rem;
+}
+
+/* Hero section */
+.hero-section {
+ min-height: 100vh;
+ background: var(--bg-primary);
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ padding-top: 80px;
+}
+
+.hero-section::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background:
+ radial-gradient(circle at 20% 30%, rgba(167, 243, 208, 0.05) 0%, transparent 50%),
+ radial-gradient(circle at 80% 70%, rgba(196, 181, 253, 0.05) 0%, transparent 50%),
+ radial-gradient(circle at 50% 50%, rgba(251, 182, 206, 0.03) 0%, transparent 50%);
+ pointer-events: none;
+}
+
+.hero-section::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: url('data:image/svg+xml, ');
+ pointer-events: none;
+}
+
+.hero-content {
+ position: relative;
+ z-index: 2;
+}
+
+.hero-title {
+ font-size: clamp(3rem, 8vw, 6rem);
+ font-weight: 800;
+ color: var(--white);
+ margin-bottom: 1.5rem;
+ line-height: 1.1;
+ background: linear-gradient(135deg, var(--white), var(--pastel-blue));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.hero-subtitle {
+ font-size: 1.25rem;
+ color: var(--text-secondary);
+ margin-bottom: 2.5rem;
+ max-width: 600px;
+ line-height: 1.6;
+}
+
+/* Hero visual elements */
+.hero-visual {
+ position: relative;
+ height: 400px;
+}
+
+.floating-cards {
+ position: relative;
+ height: 100%;
+}
+
+.floating-card {
+ position: absolute;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ backdrop-filter: blur(10px);
+ animation: float 6s ease-in-out infinite;
+}
+
+.floating-card.card-1 {
+ top: 20%;
+ left: 10%;
+ animation-delay: 0s;
+}
+
+.floating-card.card-2 {
+ top: 50%;
+ right: 10%;
+ animation-delay: 2s;
+}
+
+.floating-card.card-3 {
+ bottom: 20%;
+ left: 30%;
+ animation-delay: 4s;
+}
+
+@keyframes float {
+ 0%, 100% { transform: translateY(0px); }
+ 50% { transform: translateY(-20px); }
+}
+
+.card-icon {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+}
+
+.card-title {
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ color: var(--white);
+}
+
+.card-price {
+ color: var(--pastel-green);
+ font-weight: 700;
+}
+
+/* Dashboard preview */
+.dashboard-preview {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ height: 300px;
+}
+
+.dashboard-header {
+ height: 40px;
+ background: var(--border-color);
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ animation: pulse 2s infinite;
+}
+
+.dashboard-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ height: 200px;
+}
+
+.dashboard-widget {
+ background: var(--border-color);
+ border-radius: 8px;
+ animation: pulse 2s infinite;
+}
+
+.dashboard-widget.large {
+ grid-column: 1 / -1;
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 0.6; }
+ 50% { opacity: 1; }
+}
+
+/* DeFi visual */
+.defi-interface {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ height: 300px;
+}
+
+.defi-chart-preview {
+ height: 150px;
+ background: var(--border-color);
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.defi-chart-preview::after {
+ content: '';
+ position: absolute;
+ bottom: 20px;
+ left: 20px;
+ right: 20px;
+ height: 2px;
+ background: var(--pastel-green);
+ animation: chartGrow 3s ease-in-out infinite;
+}
+
+@keyframes chartGrow {
+ 0% { width: 0; }
+ 100% { width: calc(100% - 40px); }
+}
+
+.defi-stats {
+ display: flex;
+ justify-content: space-around;
+}
+
+.stat-item {
+ text-align: center;
+}
+
+.stat-value {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--pastel-blue);
+}
+
+.stat-label {
+ font-size: 0.9rem;
+ color: var(--text-muted);
+}
+
+/* Liquidity Pool Animation */
+.liquidity-pool-animation {
+ position: relative;
+ height: 400px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.pool-container {
+ position: relative;
+ width: 300px;
+ height: 300px;
+}
+
+.pool-center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 120px;
+ height: 120px;
+ background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));
+ border-radius: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 0 30px rgba(167, 243, 208, 0.4);
+ animation: poolPulse 3s ease-in-out infinite;
+}
+
+.pool-label {
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--black);
+ text-align: center;
+}
+
+.asset-flow {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.asset-token {
+ position: absolute;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 0.9rem;
+ color: var(--black);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.asset-token.eth {
+ background: var(--pastel-blue);
+ top: 20px;
+ left: 20px;
+}
+
+.asset-token.usdc {
+ background: var(--pastel-green);
+ top: 20px;
+ right: 20px;
+}
+
+.asset-token.btc {
+ background: var(--pastel-yellow);
+ bottom: 20px;
+ left: 20px;
+}
+
+.asset-token.dai {
+ background: var(--pastel-orange);
+ bottom: 20px;
+ right: 20px;
+}
+
+.asset-token.flowing-in {
+ animation: flowToPool 4s ease-in-out infinite;
+}
+
+.asset-token.flowing-out {
+ animation: flowFromPool 4s ease-in-out infinite;
+}
+
+@keyframes poolPulse {
+ 0%, 100% {
+ transform: translate(-50%, -50%) scale(1);
+ box-shadow: 0 0 30px rgba(167, 243, 208, 0.4);
+ }
+ 50% {
+ transform: translate(-50%, -50%) scale(1.05);
+ box-shadow: 0 0 40px rgba(167, 243, 208, 0.6);
+ }
+}
+
+@keyframes flowToPool {
+ 0% {
+ transform: scale(1);
+ opacity: 0.8;
+ }
+ 50% {
+ transform: scale(0.7) translate(30px, 30px);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 0.8;
+ }
+}
+
+@keyframes flowFromPool {
+ 0% {
+ transform: scale(1);
+ opacity: 0.8;
+ }
+ 50% {
+ transform: scale(0.7) translate(-30px, -30px);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 0.8;
+ }
+}
+
+.pool-stats {
+ position: absolute;
+ bottom: -40px;
+ left: 50%;
+ transform: translateX(-50%);
+ text-align: center;
+}
+
+.pool-stat {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.9rem;
+}
+
+.pool-stat .stat-label {
+ color: var(--text-secondary);
+}
+
+.pool-stat .stat-value {
+ color: var(--pastel-blue);
+ font-weight: 700;
+}
+
+/* Geometric shapes */
+.geometric-shapes {
+ position: relative;
+ height: 300px;
+}
+
+.shape {
+ position: absolute;
+ border-radius: 50%;
+ animation: rotate 20s linear infinite;
+}
+
+.shape-1 {
+ width: 100px;
+ height: 100px;
+ background: linear-gradient(45deg, var(--pastel-blue), var(--pastel-purple));
+ top: 20%;
+ left: 20%;
+}
+
+.shape-2 {
+ width: 80px;
+ height: 80px;
+ background: linear-gradient(45deg, var(--pastel-pink), var(--pastel-yellow));
+ top: 60%;
+ right: 30%;
+ animation-delay: 5s;
+}
+
+.shape-3 {
+ width: 60px;
+ height: 60px;
+ background: linear-gradient(45deg, var(--pastel-green), var(--pastel-orange));
+ bottom: 30%;
+ left: 50%;
+ animation-delay: 10s;
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+/* Scroll indicator */
+.scroll-indicator {
+ position: absolute;
+ bottom: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 3;
+}
+
+.scroll-arrow {
+ width: 30px;
+ height: 30px;
+ border-right: 2px solid var(--pastel-blue);
+ border-bottom: 2px solid var(--pastel-blue);
+ transform: rotate(45deg);
+ animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+ 0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
+ 40% { transform: rotate(45deg) translateY(-10px); }
+ 60% { transform: rotate(45deg) translateY(-5px); }
+}
+
+/* Section styles */
+.section {
+ padding: 120px 0;
+ position: relative;
+}
+
+.section-alt {
+ background: var(--bg-secondary);
+}
+
+.section-title {
+ font-size: clamp(2.5rem, 5vw, 3.5rem);
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ color: var(--white);
+ text-align: center;
+}
+
+.section-subtitle {
+ font-size: 1.2rem;
+ color: var(--text-secondary);
+ margin-bottom: 4rem;
+ max-width: 700px;
+ text-align: center;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Card styles */
+.feature-card {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 20px;
+ padding: 2.5rem;
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ backdrop-filter: blur(10px);
+ position: relative;
+ overflow: hidden;
+ height: 100%;
+}
+
+.feature-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--pastel-blue), transparent);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-10px);
+ border-color: var(--pastel-blue);
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.feature-card:hover::before {
+ opacity: 1;
+}
+
+.feature-icon {
+ width: 70px;
+ height: 70px;
+ background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1.5rem;
+ font-size: 1.75rem;
+ color: var(--black);
+ font-weight: 600;
+}
+
+.feature-card h3,
+.feature-card h5 {
+ color: var(--white);
+ margin-bottom: 1rem;
+}
+
+.feature-card p {
+ color: var(--text-secondary);
+ line-height: 1.6;
+}
+
+/* Feature highlights */
+.feature-highlights {
+ margin: 1.5rem 0;
+}
+
+.highlight-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.75rem;
+}
+
+.highlight-icon {
+ color: var(--pastel-green);
+ margin-right: 0.75rem;
+ font-weight: 600;
+}
+
+/* Interactive elements */
+.interactive-demo {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 20px;
+ padding: 2rem;
+ position: relative;
+ overflow: hidden;
+ height: 100%;
+}
+
+/* Liquidity pools */
+.liquidity-pools {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.liquidity-pool {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ padding: 1.5rem;
+ transition: all 0.3s ease;
+}
+
+.liquidity-pool:hover {
+ border-color: var(--pastel-blue);
+ transform: scale(1.02);
+}
+
+.pool-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.pool-tokens {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.token-pair {
+ display: flex;
+ align-items: center;
+ gap: -0.5rem;
+}
+
+.token-icon {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 2px solid var(--white);
+}
+
+.token-icon.eth { background: var(--pastel-blue); }
+.token-icon.usdc { background: var(--pastel-green); }
+.token-icon.btc { background: var(--pastel-yellow); }
+.token-icon.dai { background: var(--pastel-orange); }
+
+.pool-name {
+ font-weight: 600;
+ color: var(--white);
+}
+
+.pool-apr {
+ color: var(--pastel-green);
+ font-weight: 700;
+}
+
+.pool-stats {
+ display: flex;
+ justify-content: space-between;
+}
+
+.stat {
+ text-align: center;
+}
+
+.stat-label {
+ font-size: 0.85rem;
+ color: var(--text-muted);
+ margin-bottom: 0.25rem;
+}
+
+.stat-value {
+ font-weight: 600;
+ color: var(--white);
+}
+
+/* Orderbook */
+.orderbook {
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 12px;
+ padding: 1rem;
+ font-family: 'Monaco', 'Menlo', monospace;
+ font-size: 0.85rem;
+ height: 300px;
+ overflow-y: auto;
+}
+
+.orderbook-header {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.5rem 0;
+ border-bottom: 1px solid var(--border-color);
+ margin-bottom: 0.5rem;
+ font-weight: 600;
+ color: var(--text-secondary);
+}
+
+.order-row {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.25rem 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+ animation: slideInOrder 0.5s ease-out;
+}
+
+.order-buy { color: var(--pastel-green); }
+.order-sell { color: var(--pastel-pink); }
+
+@keyframes slideInOrder {
+ from {
+ opacity: 0;
+ transform: translateX(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.spread-indicator {
+ margin-top: 1rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--border-color);
+ text-align: center;
+}
+
+.spread-label {
+ color: var(--text-muted);
+}
+
+.spread-value {
+ color: var(--pastel-blue);
+ font-weight: 600;
+}
+
+/* Marketplace flow */
+.marketplace-flow-container {
+ height: 400px;
+ position: relative;
+ overflow: hidden;
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 20px;
+ border: 1px solid var(--border-color);
+}
+
+.marketplace-items {
+ display: flex;
+ gap: 1.5rem;
+ animation: marketplaceFlow 25s linear infinite;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+}
+
+.marketplace-item {
+ min-width: 280px;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ backdrop-filter: blur(10px);
+ transition: all 0.3s ease;
+ position: relative;
+}
+
+.marketplace-item:hover {
+ transform: scale(1.05);
+ border-color: var(--pastel-blue);
+}
+
+.marketplace-item.rarity-legendary {
+ border-color: var(--pastel-yellow);
+ box-shadow: 0 0 20px rgba(253, 230, 138, 0.3);
+}
+
+.marketplace-item.rarity-ultra-rare {
+ border-color: var(--pastel-purple);
+ box-shadow: 0 0 20px rgba(196, 181, 253, 0.3);
+}
+
+.marketplace-item.rarity-epic {
+ border-color: var(--pastel-pink);
+ box-shadow: 0 0 20px rgba(251, 182, 206, 0.3);
+}
+
+.item-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 1rem;
+}
+
+.item-image {
+ font-size: 2rem;
+}
+
+.rarity-badge {
+ background: var(--pastel-blue);
+ color: var(--black);
+ padding: 0.25rem 0.5rem;
+ border-radius: 6px;
+ font-size: 0.75rem;
+ font-weight: 600;
+}
+
+.item-title {
+ color: var(--white);
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+}
+
+.item-category {
+ color: var(--text-muted);
+ font-size: 0.9rem;
+ margin-bottom: 0.5rem;
+}
+
+.item-seller {
+ font-size: 0.85rem;
+}
+
+.seller-label {
+ color: var(--text-muted);
+}
+
+.seller-name {
+ color: var(--pastel-blue);
+ font-weight: 600;
+}
+
+.item-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 1rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--border-color);
+}
+
+.item-price {
+ color: var(--pastel-green);
+ font-weight: 700;
+ font-size: 1.1rem;
+}
+
+.btn-quick-buy {
+ background: var(--pastel-blue);
+ color: var(--black);
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ font-weight: 600;
+ font-size: 0.85rem;
+ transition: all 0.3s ease;
+}
+
+.btn-quick-buy:hover {
+ background: var(--white);
+ transform: scale(1.05);
+}
+
+@keyframes marketplaceFlow {
+ 0% {
+ transform: translateX(0) translateY(-50%);
+ }
+ 100% {
+ transform: translateX(-100%) translateY(-50%);
+ }
+}
+
+.flow-overlay-left,
+.flow-overlay-right {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 100px;
+ pointer-events: none;
+ z-index: 2;
+}
+
+.flow-overlay-left {
+ left: 0;
+ background: linear-gradient(90deg, var(--bg-secondary), transparent);
+}
+
+.flow-overlay-right {
+ right: 0;
+ background: linear-gradient(270deg, var(--bg-secondary), transparent);
+}
+
+/* Platform wireframes */
+.platform-wireframe {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ position: relative;
+ overflow: hidden;
+ height: 400px;
+}
+
+.wireframe-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 50px;
+ background: var(--border-color);
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ padding: 0 1rem;
+}
+
+.header-logo {
+ width: 40px;
+ height: 20px;
+ background: var(--pastel-blue);
+ border-radius: 4px;
+}
+
+.header-nav {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.nav-item.active {
+ background: var(--pastel-blue);
+}
+
+.header-user {
+ width: 30px;
+ height: 30px;
+ background: var(--border-light);
+ border-radius: 50%;
+}
+
+.wireframe-sidebar {
+ position: absolute;
+ left: 1.5rem;
+ top: 120px;
+ width: 60px;
+ height: 200px;
+ background: var(--border-color);
+ border-radius: 8px;
+ padding: 1rem 0.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.sidebar-item {
+ height: 30px;
+ background: var(--border-light);
+ border-radius: 4px;
+}
+
+.sidebar-item.active {
+ background: var(--pastel-blue);
+}
+
+.wireframe-main {
+ margin-left: 80px;
+ height: 250px;
+}
+
+.main-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.page-title {
+ width: 150px;
+ height: 30px;
+ background: var(--border-light);
+ border-radius: 4px;
+}
+
+.action-buttons {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.btn-wireframe {
+ width: 80px;
+ height: 30px;
+ border-radius: 6px;
+}
+
+.btn-wireframe.primary {
+ background: var(--pastel-blue);
+}
+
+.btn-wireframe.secondary {
+ background: var(--border-light);
+}
+
+.main-content {
+ height: 180px;
+}
+
+.content-grid {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 1rem;
+ height: 100%;
+}
+
+.grid-item {
+ background: var(--border-color);
+ border-radius: 8px;
+ animation: wireframeGlow 3s infinite;
+}
+
+.grid-item.large {
+ grid-row: 1 / -1;
+}
+
+.grid-item.medium {
+ grid-column: 2 / 4;
+}
+
+.grid-item.small {
+ /* Default grid placement */
+}
+
+@keyframes wireframeGlow {
+ 0%, 100% { opacity: 0.6; }
+ 50% { opacity: 1; }
+}
+
+/* Company dashboard */
+.company-dashboard {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+}
+
+.dashboard-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.company-info {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.company-logo {
+ width: 40px;
+ height: 40px;
+ background: var(--pastel-blue);
+ border-radius: 8px;
+}
+
+.company-details h6 {
+ margin: 0;
+ color: var(--white);
+}
+
+.company-status {
+ padding: 0.25rem 0.75rem;
+ border-radius: 12px;
+ font-size: 0.75rem;
+ font-weight: 600;
+}
+
+.company-status.active {
+ background: var(--pastel-green);
+ color: var(--black);
+}
+
+.dashboard-actions {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.btn-dashboard {
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ border: none;
+ font-weight: 600;
+ font-size: 0.85rem;
+ transition: all 0.3s ease;
+}
+
+.btn-dashboard.primary {
+ background: var(--pastel-blue);
+ color: var(--black);
+}
+
+.btn-dashboard.secondary {
+ background: transparent;
+ color: var(--pastel-blue);
+ border: 1px solid var(--pastel-blue);
+}
+
+.dashboard-metrics {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+}
+
+.metric-card {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ padding: 1rem;
+ text-align: center;
+}
+
+.metric-value {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--white);
+ margin-bottom: 0.25rem;
+}
+
+.metric-label {
+ font-size: 0.85rem;
+ color: var(--text-muted);
+ margin-bottom: 0.5rem;
+}
+
+.metric-change {
+ font-size: 0.8rem;
+ font-weight: 600;
+}
+
+.metric-change.positive { color: var(--pastel-green); }
+.metric-change.negative { color: var(--pastel-pink); }
+.metric-change.neutral { color: var(--text-muted); }
+
+.content-section h6 {
+ color: var(--white);
+ margin-bottom: 1rem;
+}
+
+.activity-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.activity-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem;
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 8px;
+}
+
+.activity-icon {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+}
+
+.activity-icon.proposal { background: var(--pastel-blue); }
+.activity-icon.treasury { background: var(--pastel-green); }
+.activity-icon.vote { background: var(--pastel-purple); }
+
+.activity-text {
+ flex: 1;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+}
+
+.activity-time {
+ color: var(--text-muted);
+ font-size: 0.8rem;
+}
+
+/* Trading interface */
+.trading-interface {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ height: 500px;
+}
+
+.trading-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.trading-pair {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.pair-name {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--white);
+}
+
+.pair-price {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: var(--text-secondary);
+}
+
+.pair-change {
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ font-size: 0.85rem;
+ font-weight: 600;
+}
+
+.pair-change.positive {
+ background: rgba(134, 239, 172, 0.2);
+ color: var(--pastel-green);
+}
+
+.trading-content {
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 1.5rem;
+ height: 350px;
+}
+
+.chart-container {
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 12px;
+ padding: 1rem;
+}
+
+.trading-controls {
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 12px;
+ padding: 1rem;
+}
+
+.order-tabs {
+ display: flex;
+ margin-bottom: 1rem;
+}
+
+.tab-btn {
+ flex: 1;
+ padding: 0.75rem;
+ border: none;
+ background: transparent;
+ color: var(--text-muted);
+ font-weight: 600;
+ border-bottom: 2px solid transparent;
+ transition: all 0.3s ease;
+}
+
+.tab-btn.active {
+ color: var(--pastel-blue);
+ border-bottom-color: var(--pastel-blue);
+}
+
+.form-group {
+ margin-bottom: 1rem;
+}
+
+.form-group label {
+ display: block;
+ margin-bottom: 0.5rem;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ font-weight: 600;
+}
+
+.input-group {
+ position: relative;
+}
+
+.input-group input {
+ width: 100%;
+ padding: 0.75rem;
+ padding-right: 3rem;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ color: var(--white);
+ font-size: 0.9rem;
+}
+
+.input-group input:focus {
+ outline: none;
+ border-color: var(--pastel-blue);
+}
+
+.input-suffix {
+ position: absolute;
+ right: 0.75rem;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+ font-size: 0.85rem;
+}
+
+.btn-trade {
+ width: 100%;
+ padding: 1rem;
+ border: none;
+ border-radius: 8px;
+ font-weight: 600;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+}
+
+.btn-trade.buy {
+ background: var(--pastel-green);
+ color: var(--black);
+}
+
+.btn-trade.buy:hover {
+ background: var(--accent-success);
+ transform: translateY(-2px);
+}
+
+/* Governance demos */
+.governance-demo {
+ margin-top: 1rem;
+}
+
+.proposal-item {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 1rem;
+}
+
+.proposal-title {
+ font-weight: 600;
+ color: var(--white);
+ margin-bottom: 0.5rem;
+}
+
+.proposal-status {
+ display: inline-block;
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ margin-bottom: 0.75rem;
+}
+
+.proposal-status.passing {
+ background: var(--pastel-green);
+ color: var(--black);
+}
+
+.vote-bar {
+ width: 100%;
+ height: 8px;
+ background: var(--border-color);
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 0.5rem;
+}
+
+.vote-progress {
+ height: 100%;
+ background: var(--pastel-green);
+ transition: width 0.3s ease;
+}
+
+.vote-stats {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.85rem;
+}
+
+/* Stakeholder demo */
+.stakeholder-demo {
+ margin-top: 1rem;
+}
+
+.stakeholder-chart {
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ margin: 0 auto 1rem;
+ background: conic-gradient(
+ var(--pastel-blue) 0deg 126deg,
+ var(--pastel-purple) 126deg 216deg,
+ var(--pastel-green) 216deg 288deg,
+ var(--pastel-pink) 288deg 360deg
+ );
+}
+
+.chart-legend {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.85rem;
+}
+
+.legend-color {
+ width: 12px;
+ height: 12px;
+ border-radius: 2px;
+}
+
+/* Multi-sig demo */
+.multisig-demo {
+ margin-top: 1rem;
+}
+
+.transaction-item {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 1rem;
+}
+
+.tx-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.5rem;
+}
+
+.tx-amount {
+ font-weight: 700;
+ color: var(--white);
+}
+
+.tx-status {
+ padding: 0.25rem 0.5rem;
+ border-radius: 4px;
+ font-size: 0.75rem;
+ font-weight: 600;
+}
+
+.tx-status.pending {
+ background: var(--pastel-yellow);
+ color: var(--black);
+}
+
+.tx-description {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ margin-bottom: 0.75rem;
+}
+
+.signature-progress {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.signature {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+ font-weight: 600;
+}
+
+.signature.signed {
+ background: var(--pastel-green);
+ color: var(--black);
+}
+
+.signature.pending {
+ background: var(--border-color);
+ color: var(--text-muted);
+}
+
+/* Integration cards */
+.integration-card {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ padding: 1.5rem;
+ text-align: center;
+ transition: all 0.3s ease;
+ height: 100%;
+}
+
+.integration-card:hover {
+ border-color: var(--pastel-blue);
+ transform: translateY(-5px);
+}
+
+.integration-icon {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+}
+
+.integration-card h6 {
+ color: var(--white);
+ margin-bottom: 0.5rem;
+}
+
+/* Protocol stats */
+.protocol-stats {
+ margin-top: 1rem;
+ padding-top: 1rem;
+ border-top: 1px solid var(--border-color);
+}
+
+.stat-row {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 0.5rem;
+ font-size: 0.9rem;
+}
+
+/* Strategy demos */
+.strategy-demo {
+ margin-top: 1rem;
+ padding: 1rem;
+ background: rgba(255, 255, 255, 0.02);
+ border-radius: 8px;
+}
+
+.compound-visualization {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.compound-layer {
+ padding: 0.5rem;
+ background: var(--border-color);
+ border-radius: 4px;
+ text-align: center;
+ font-size: 0.85rem;
+ color: var(--white);
+}
+
+.compound-layer.layer-2 {
+ background: var(--pastel-blue);
+ color: var(--black);
+}
+
+.compound-layer.layer-3 {
+ background: var(--pastel-green);
+ color: var(--black);
+}
+
+.rebalance-chart {
+ text-align: center;
+}
+
+.allocation-bar {
+ display: flex;
+ height: 30px;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 0.5rem;
+}
+
+.allocation-segment {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: var(--black);
+}
+
+.allocation-segment.eth { background: var(--pastel-blue); }
+.allocation-segment.btc { background: var(--pastel-yellow); }
+.allocation-segment.stable { background: var(--pastel-green); }
+
+.rebalance-arrow {
+ font-size: 1.5rem;
+ color: var(--pastel-blue);
+}
+
+.risk-gauge {
+ text-align: center;
+}
+
+.gauge-container {
+ position: relative;
+ width: 100px;
+ height: 50px;
+ margin: 0 auto 1rem;
+ background: var(--border-color);
+ border-radius: 50px 50px 0 0;
+ overflow: hidden;
+}
+
+.gauge-fill {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 100%;
+ width: var(--risk-level);
+ background: var(--pastel-green);
+ transition: width 0.3s ease;
+}
+
+.gauge-label {
+ font-size: 0.85rem;
+ color: var(--white);
+ margin-bottom: 0.5rem;
+}
+
+.risk-metrics {
+ font-size: 0.85rem;
+}
+
+.risk-metric {
+ display: flex;
+ justify-content: space-between;
+}
+
+/* Network grid */
+.network-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+}
+
+.network-card {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ padding: 1rem;
+ text-align: center;
+ transition: all 0.3s ease;
+}
+
+.network-card:hover {
+ border-color: var(--pastel-blue);
+ transform: scale(1.02);
+}
+
+.network-icon {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+}
+
+.network-name {
+ font-weight: 600;
+ color: var(--white);
+ margin-bottom: 0.5rem;
+}
+
+.network-stats {
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+}
+
+.cross-chain-features {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.feature-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.feature-check {
+ color: var(--pastel-green);
+ font-weight: 600;
+}
+
+/* Innovation cards */
+.innovation-card {
+ background: rgba(255, 255, 255, 0.02);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 2rem;
+ height: 100%;
+}
+
+.innovation-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+}
+
+.innovation-icon {
+ font-size: 2rem;
+}
+
+.innovation-card h5 {
+ color: var(--white);
+ margin: 0;
+}
+
+.ai-demo {
+ margin-top: 1rem;
+}
+
+.ai-process {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.process-step {
+ padding: 0.5rem 1rem;
+ background: var(--border-color);
+ border-radius: 8px;
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ transition: all 0.3s ease;
+}
+
+.process-step.active {
+ background: var(--pastel-blue);
+ color: var(--black);
+}
+
+.process-arrow {
+ color: var(--pastel-blue);
+ font-weight: 600;
+}
+
+.chain-network {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ margin-top: 1rem;
+}
+
+.chain-node {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: var(--black);
+}
+
+.chain-node.ethereum { background: var(--pastel-blue); }
+.chain-node.polygon { background: var(--pastel-purple); }
+.chain-node.bsc { background: var(--pastel-yellow); }
+.chain-node.avalanche { background: var(--pastel-pink); }
+
+.chain-connection {
+ width: 20px;
+ height: 2px;
+ background: var(--border-color);
+}
+
+/* Community stats */
+.cta-features {
+ display: flex;
+ justify-content: center;
+ gap: 2rem;
+ flex-wrap: wrap;
+}
+
+.cta-feature {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+}
+
+.cta-icon {
+ color: var(--pastel-green);
+ font-weight: 600;
+}
+
+/* Security indicators */
+.security-indicators {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin-top: 1rem;
+}
+
+.indicator {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.85rem;
+}
+
+.indicator-icon {
+ font-size: 1rem;
+}
+
+/* Performance metrics */
+.performance-metrics {
+ display: flex;
+ justify-content: space-around;
+ margin-top: 1rem;
+}
+
+.metric {
+ text-align: center;
+}
+
+.metric-value {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--pastel-blue);
+}
+
+.metric-label {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+/* Global stats */
+.global-stats {
+ display: flex;
+ justify-content: space-around;
+ margin-top: 1rem;
+}
+
+.stat {
+ text-align: center;
+}
+
+.stat-value {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--pastel-blue);
+}
+
+.stat-label {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+}
+
+/* Pure CSS scroll animations using animation-timeline (modern browsers) */
+.fade-in {
+ animation: fadeInUp 1s ease-out both;
+ animation-timeline: view();
+ animation-range: entry 0% cover 30%;
+}
+
+.slide-in-left {
+ animation: slideInLeft 1s ease-out both;
+ animation-timeline: view();
+ animation-range: entry 0% cover 30%;
+}
+
+.slide-in-right {
+ animation: slideInRight 1s ease-out both;
+ animation-timeline: view();
+ animation-range: entry 0% cover 30%;
+}
+
+.scale-in {
+ animation: scaleIn 1s ease-out both;
+ animation-timeline: view();
+ animation-range: entry 0% cover 30%;
+}
+
+/* Fallback for browsers without animation-timeline support */
+@supports not (animation-timeline: view()) {
+ .fade-in {
+ animation: fadeInUp 0.8s ease-out forwards;
+ animation-delay: 0.1s;
+ }
+
+ .slide-in-left {
+ animation: slideInLeft 0.8s ease-out forwards;
+ animation-delay: 0.2s;
+ }
+
+ .slide-in-right {
+ animation: slideInRight 0.8s ease-out forwards;
+ animation-delay: 0.3s;
+ }
+
+ .scale-in {
+ animation: scaleIn 0.8s ease-out forwards;
+ animation-delay: 0.4s;
+ }
+
+ /* Stagger animations for multiple elements */
+ .fade-in:nth-child(2) { animation-delay: 0.3s; }
+ .fade-in:nth-child(3) { animation-delay: 0.5s; }
+ .fade-in:nth-child(4) { animation-delay: 0.7s; }
+ .fade-in:nth-child(5) { animation-delay: 0.9s; }
+
+ .slide-in-left:nth-child(2) { animation-delay: 0.4s; }
+ .slide-in-left:nth-child(3) { animation-delay: 0.6s; }
+
+ .slide-in-right:nth-child(2) { animation-delay: 0.5s; }
+ .slide-in-right:nth-child(3) { animation-delay: 0.7s; }
+}
+
+/* Keyframe animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(40px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideInLeft {
+ from {
+ opacity: 0;
+ transform: translateX(-60px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ opacity: 0;
+ transform: translateX(60px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes scaleIn {
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+/* Immediate animations for hero content */
+.hero-section .fade-in,
+.hero-section .slide-in-left,
+.hero-section .slide-in-right {
+ animation: fadeInUp 1s ease-out forwards;
+}
+
+.hero-section .slide-in-right {
+ animation: slideInRight 1s ease-out forwards;
+ animation-delay: 0.3s;
+}
+
+/* Keyframe animations for hero */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ opacity: 0;
+ transform: translateX(50px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+/* Ensure content is visible if animations are disabled */
+@media (prefers-reduced-motion: reduce) {
+ .fade-in,
+ .slide-in-left,
+ .slide-in-right,
+ .scale-in {
+ animation: none !important;
+ opacity: 1 !important;
+ transform: none !important;
+ transition: none !important;
+ }
+}
+
+/* Fallback for when JavaScript doesn't load */
+.fade-in,
+.slide-in-left,
+.slide-in-right,
+.scale-in {
+ opacity: 1;
+ transform: none;
+}
+
+/* Statistics */
+.stat-number {
+ font-size: 3.5rem;
+ font-weight: 800;
+ background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 0.5rem;
+}
+
+.stat-label {
+ color: var(--text-secondary);
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ font-size: 0.9rem;
+}
+
+/* Footer */
+.footer {
+ background: var(--bg-secondary);
+ border-top: 1px solid var(--border-color);
+ padding: 4rem 0 2rem;
+ margin-top: 6rem;
+}
+
+.footer-link {
+ color: var(--text-secondary);
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.footer-link:hover {
+ color: var(--pastel-blue);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .section {
+ padding: 80px 0;
+ }
+
+ .hero-title {
+ font-size: 3rem;
+ }
+
+ .section-title {
+ font-size: 2.5rem;
+ }
+
+ .feature-card {
+ margin-bottom: 2rem;
+ }
+
+ .marketplace-flow-container {
+ height: 300px;
+ }
+
+ .marketplace-item {
+ min-width: 240px;
+ }
+
+ .btn {
+ padding: 10px 20px;
+ font-size: 0.9rem;
+ }
+
+ .btn-lg {
+ padding: 14px 28px;
+ font-size: 1rem;
+ }
+
+ .trading-content {
+ grid-template-columns: 1fr;
+ height: auto;
+ }
+
+ .dashboard-metrics {
+ grid-template-columns: 1fr;
+ }
+
+ .network-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .ai-process {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .process-arrow {
+ transform: rotate(90deg);
+ }
+
+ .chain-network {
+ flex-wrap: wrap;
+ }
+
+ .cta-features {
+ gap: 1rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .hero-section {
+ padding-top: 100px;
+ }
+
+ .section {
+ padding: 60px 0;
+ }
+
+ .feature-card {
+ padding: 2rem 1.5rem;
+ }
+
+ .stat-number {
+ font-size: 2.5rem;
+ }
+
+ .floating-cards {
+ display: none;
+ }
+
+ .performance-metrics,
+ .global-stats {
+ flex-direction: column;
+ gap: 1rem;
+ }
+}
+
+/* Loading states */
+.loading {
+ opacity: 0;
+ animation: fadeInLoad 0.5s ease-out forwards;
+}
+
+@keyframes fadeInLoad {
+ to {
+ opacity: 1;
+ }
+}
+
+/* World Map Styles */
+.world-map-container {
+ background: transparent;
+ position: relative;
+ overflow: visible;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+.map-wrapper {
+ position: relative;
+ height: 500px;
+ width: 100%;
+ overflow: visible;
+ border-radius: 12px;
+ padding: 50px;
+}
+
+/* Remove wrapper overlay */
+
+/* Add fade-out mask overlay directly to the leaflet map */
+.leaflet-map::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 1) 100%);
+ pointer-events: none;
+ z-index: 20;
+}
+
+/* Hero section map styling */
+.hero-section .world-map-container {
+ max-width: 600px;
+ margin: 0 auto;
+ margin-right: -50px;
+}
+
+.hero-section .map-wrapper {
+ height: 450px;
+ border-radius: 16px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+ overflow: visible;
+ padding: 60px;
+}
+
+.hero-section .map-stats {
+ display: none;
+}
+
+.leaflet-map {
+ width: 150%;
+ height: 150%;
+ z-index: 1;
+ background: transparent !important;
+ position: absolute;
+ top: -25%;
+ left: -25%;
+}
+
+/* Make Leaflet map visible with balanced darker grayscale */
+.leaflet-map {
+ opacity: 1 !important;
+ background: transparent !important;
+}
+
+.leaflet-map .leaflet-tile {
+ opacity: 0.8 !important;
+ /* Sweet spot - darker but still visible */
+ filter: brightness(0.55) contrast(1.4) saturate(0) grayscale(1);
+ mix-blend-mode: multiply;
+}
+
+.leaflet-map .leaflet-tile-container {
+ opacity: 1 !important;
+ background: transparent !important;
+}
+
+.leaflet-map .leaflet-tile-container .leaflet-tile {
+ opacity: 0.8 !important;
+ filter: brightness(0.55) contrast(1.4) saturate(0) grayscale(1);
+ mix-blend-mode: multiply;
+}
+
+/* Hide all Leaflet controls */
+.leaflet-map .leaflet-control-zoom,
+.leaflet-map .leaflet-control-attribution {
+ display: none !important;
+}
+
+.leaflet-map .leaflet-container {
+ opacity: 1 !important;
+ background: transparent !important;
+}
+
+.leaflet-map .leaflet-tile-pane {
+ opacity: 1 !important;
+ background: transparent !important;
+}
+
+.leaflet-map .leaflet-layer {
+ opacity: 1 !important;
+ background: transparent !important;
+}
+
+/* Map tiles with balanced darker grayscale styling */
+.leaflet-map .map-tiles {
+ opacity: 0.8 !important;
+ filter: brightness(0.55) contrast(1.4) saturate(0) grayscale(1);
+ mix-blend-mode: multiply;
+}
+
+.connection-overlay {
+ position: absolute;
+ top: -50px;
+ left: -50px;
+ right: -50px;
+ bottom: -50px;
+ pointer-events: none;
+ z-index: 10;
+ overflow: visible;
+}
+
+.connections-svg {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 11;
+}
+
+.connection-line {
+ fill: none;
+ stroke: #00ffff;
+ stroke-width: 3;
+ opacity: 0.9;
+ filter: drop-shadow(0 0 12px #00ffff);
+}
+
+.connection-line.animated {
+ animation: beamPulse 3s ease-in-out infinite;
+}
+
+@keyframes beamPulse {
+ 0%, 100% {
+ opacity: 0.4;
+ stroke-width: 1;
+ }
+ 50% {
+ opacity: 0.9;
+ stroke-width: 3;
+ }
+}
+
+.connection-dot {
+ fill: #00ffff;
+ filter: drop-shadow(0 0 15px #00ffff);
+ opacity: 1;
+}
+
+.connection-dot.moving {
+ fill: #00ff00;
+ filter: drop-shadow(0 0 20px #00ff00);
+ animation: dotGlow 1.5s ease-in-out infinite;
+}
+
+@keyframes dotGlow {
+ 0%, 100% {
+ opacity: 0.8;
+ r: 5;
+ }
+ 50% {
+ opacity: 1;
+ r: 8;
+ }
+}
+
+/* Beam gradient definition */
+.beam-gradient {
+ --beam-start: rgba(0, 255, 255, 0.1);
+ --beam-middle: rgba(0, 255, 255, 0.8);
+ --beam-end: rgba(0, 255, 255, 0.1);
+}
+
+.zanzibar-hub {
+ fill: #00ff00;
+ filter: drop-shadow(0 0 20px #00ff00);
+ animation: hubPulse 2s ease-in-out infinite;
+}
+
+.zanzibar-pulse {
+ fill: none;
+ stroke: #00ff00;
+ stroke-width: 3;
+ opacity: 0.8;
+ animation: hubRipple 2s ease-in-out infinite;
+}
+
+@keyframes hubPulse {
+ 0%, 100% {
+ opacity: 0.9;
+ r: 15;
+ }
+ 50% {
+ opacity: 1;
+ r: 18;
+ }
+}
+
+@keyframes hubRipple {
+ 0% {
+ r: 15;
+ opacity: 0.8;
+ }
+ 100% {
+ r: 40;
+ opacity: 0;
+ }
+}
+
+/* Entity Cards */
+.entity-card {
+ position: absolute;
+ background: rgba(0, 0, 0, 0.95);
+ border: 2px solid var(--pastel-blue);
+ border-radius: 12px;
+ padding: 1rem;
+ min-width: 280px;
+ max-width: 320px;
+ backdrop-filter: blur(15px);
+ transform: translate(-50%, -100%);
+ z-index: 10;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+ animation: cardAppear 0.5s ease-out;
+}
+
+@keyframes cardAppear {
+ from {
+ opacity: 0;
+ transform: translate(-50%, -100%) scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: translate(-50%, -100%) scale(1);
+ }
+}
+
+.entity-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 0.75rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.entity-type {
+ padding: 0.25rem 0.75rem;
+ border-radius: 12px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.entity-type.business {
+ background: var(--pastel-blue);
+ color: var(--black);
+}
+
+.entity-type.resident {
+ background: var(--pastel-purple);
+ color: var(--black);
+}
+
+.entity-date {
+ color: var(--text-muted);
+ font-size: 0.8rem;
+}
+
+.entity-name {
+ font-size: 1.1rem;
+ font-weight: 700;
+ color: var(--white);
+ margin-bottom: 0.5rem;
+}
+
+.entity-location {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ margin-bottom: 0.5rem;
+}
+
+.location-icon {
+ font-size: 0.8rem;
+}
+
+.entity-industry {
+ color: var(--pastel-green);
+ font-size: 0.85rem;
+ font-weight: 600;
+ margin-bottom: 0.75rem;
+}
+
+.entity-status {
+ color: var(--pastel-blue);
+ font-size: 0.9rem;
+ font-weight: 600;
+ margin-bottom: 0.75rem;
+ animation: statusPulse 2s ease-in-out infinite;
+}
+
+@keyframes statusPulse {
+ 0%, 100% {
+ opacity: 0.8;
+ }
+ 50% {
+ opacity: 1;
+ }
+}
+
+.connection-progress {
+ margin-top: 0.75rem;
+}
+
+.progress-bar {
+ width: 100%;
+ height: 4px;
+ background: var(--border-color);
+ border-radius: 2px;
+ overflow: hidden;
+}
+
+.progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, var(--pastel-blue), var(--pastel-green));
+ border-radius: 2px;
+ transition: width 0.3s ease;
+ animation: progressGlow 1.5s ease-in-out infinite;
+}
+
+@keyframes progressGlow {
+ 0%, 100% {
+ box-shadow: 0 0 4px var(--pastel-blue);
+ }
+ 50% {
+ box-shadow: 0 0 8px var(--pastel-green);
+ }
+}
+
+.zanzibar-hub {
+ fill: var(--pastel-green);
+ filter: drop-shadow(0 0 10px var(--pastel-green));
+}
+
+.zanzibar-pulse {
+ fill: none;
+ stroke: var(--pastel-green);
+ stroke-width: 2;
+ opacity: 0.6;
+ animation: hubPulse 2s ease-in-out infinite;
+}
+
+@keyframes hubPulse {
+ 0% {
+ r: 12;
+ opacity: 0.8;
+ }
+ 100% {
+ r: 25;
+ opacity: 0;
+ }
+}
+
+.city-labels {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ pointer-events: none;
+}
+
+.city-label {
+ position: absolute;
+ background: rgba(0, 0, 0, 0.8);
+ border: 1px solid var(--border-color);
+ border-radius: 8px;
+ padding: 0.5rem 0.75rem;
+ backdrop-filter: blur(10px);
+ transform: translate(-50%, -50%);
+ animation: labelFloat 4s ease-in-out infinite;
+}
+
+.city-label:nth-child(2n) {
+ animation-delay: 1s;
+}
+
+.city-label:nth-child(3n) {
+ animation-delay: 2s;
+}
+
+@keyframes labelFloat {
+ 0%, 100% {
+ transform: translate(-50%, -50%) translateY(0px);
+ }
+ 50% {
+ transform: translate(-50%, -50%) translateY(-5px);
+ }
+}
+
+.city-name {
+ display: block;
+ color: var(--white);
+ font-weight: 600;
+ font-size: 0.9rem;
+ margin-bottom: 0.25rem;
+}
+
+.city-name.zanzibar {
+ color: var(--pastel-green);
+ font-size: 1.1rem;
+}
+
+.city-connections {
+ display: block;
+ color: var(--pastel-blue);
+ font-size: 0.75rem;
+}
+
+.city-subtitle {
+ display: block;
+ color: var(--pastel-purple);
+ font-size: 0.8rem;
+ margin-bottom: 0.25rem;
+}
+
+.total-entities {
+ display: block;
+ color: var(--pastel-green);
+ font-size: 0.85rem;
+ font-weight: 600;
+}
+
+.zanzibar-label {
+ position: absolute;
+ background: rgba(0, 0, 0, 0.9);
+ border: 2px solid var(--pastel-green);
+ border-radius: 12px;
+ padding: 1rem 1.25rem;
+ backdrop-filter: blur(15px);
+ transform: translate(-50%, -50%);
+ box-shadow: 0 0 20px rgba(134, 239, 172, 0.3);
+}
+
+.map-stats {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 2rem;
+ margin-top: 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid var(--border-color);
+}
+
+.map-stats .stat-item {
+ text-align: center;
+}
+
+.map-stats .stat-number {
+ font-size: 2rem;
+ font-weight: 700;
+ color: var(--pastel-blue);
+ margin-bottom: 0.5rem;
+}
+
+.map-stats .stat-label {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.global-connections-section {
+ background: var(--bg-secondary);
+ position: relative;
+ overflow: hidden;
+}
+
+.global-connections-section::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background:
+ radial-gradient(circle at 30% 20%, rgba(167, 243, 208, 0.03) 0%, transparent 50%),
+ radial-gradient(circle at 70% 80%, rgba(196, 181, 253, 0.03) 0%, transparent 50%);
+ pointer-events: none;
+}
+
+/* Responsive map styles */
+@media (max-width: 768px) {
+ .map-wrapper {
+ height: 350px;
+ }
+
+ .map-stats {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ }
+
+ .city-label {
+ padding: 0.25rem 0.5rem;
+ }
+
+ .city-name {
+ font-size: 0.8rem;
+ }
+
+ .city-connections {
+ font-size: 0.7rem;
+ }
+
+ .zanzibar-label {
+ padding: 0.75rem 1rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .map-wrapper {
+ height: 300px;
+ }
+
+ .map-stats {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .world-map-container {
+ padding: 1rem;
+ }
+}
+
+/* Utility classes */
+.text-gradient {
+ background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.border-gradient {
+ border: 1px solid;
+ border-image: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple)) 1;
+}
+
+.bg-glass {
+ background: rgba(255, 255, 255, 0.02);
+ backdrop-filter: blur(10px);
+ border: 1px solid var(--border-color);
+}
+
+/* Asset Digitalization Styles */
+.asset-showcase {
+ padding: 2rem 0;
+ position: relative;
+}
+
+
+.asset-showcase h3 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ color: var(--white);
+ background: linear-gradient(135deg, var(--white), var(--pastel-blue));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.asset-showcase .lead {
+ font-size: 1.25rem;
+ color: var(--text-secondary);
+ margin-bottom: 2rem;
+ line-height: 1.6;
+}
+
+.feature-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.feature-list li {
+ padding: 0.75rem 0;
+ color: var(--text-secondary);
+ font-size: 1.1rem;
+ display: flex;
+ align-items: center;
+ transition: all 0.3s ease;
+}
+
+.feature-list li:hover {
+ color: var(--white);
+ transform: translateX(5px);
+}
+
+.feature-list li::before {
+ content: '';
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ background: var(--pastel-green);
+ border-radius: 50%;
+ margin-right: 1rem;
+ box-shadow: 0 0 8px var(--pastel-green);
+}
+
+.asset-visual {
+ padding: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+/* Property Tokenization Demo */
+.tokenization-demo {
+ width: 100%;
+ max-width: 400px;
+}
+
+.property-card {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 20px;
+ padding: 2rem;
+ backdrop-filter: blur(15px);
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+}
+
+.property-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--pastel-blue), transparent);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.property-card:hover {
+ transform: translateY(-5px);
+ border-color: var(--pastel-blue);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.property-card:hover::before {
+ opacity: 1;
+}
+
+.property-image {
+ height: 140px;
+ background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));
+ border-radius: 12px;
+ margin-bottom: 1.5rem;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 3rem;
+ overflow: hidden;
+}
+
+.property-image::after {
+ content: '🏢';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 3rem;
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+
+.property-details h5 {
+ color: var(--white);
+ margin-bottom: 0.75rem;
+ font-weight: 600;
+ font-size: 1.2rem;
+}
+
+.property-details p {
+ color: var(--text-secondary);
+ margin-bottom: 1.5rem;
+ font-size: 1rem;
+}
+
+.property-details .progress {
+ height: 10px;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 5px;
+ margin-bottom: 0.75rem;
+ overflow: hidden;
+}
+
+.property-details .progress-bar {
+ background: linear-gradient(90deg, var(--pastel-green), var(--pastel-blue));
+ border-radius: 5px;
+ transition: width 0.3s ease;
+ box-shadow: 0 0 10px rgba(134, 239, 172, 0.5);
+}
+
+.property-details small {
+ color: var(--pastel-green);
+ font-weight: 600;
+ font-size: 0.9rem;
+}
+
+/* Service Demo */
+.service-demo {
+ width: 100%;
+ max-width: 400px;
+}
+
+.service-card {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 20px;
+ padding: 2rem;
+ backdrop-filter: blur(15px);
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+}
+
+.service-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--pastel-purple), transparent);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.service-card:hover {
+ transform: translateY(-5px);
+ border-color: var(--pastel-purple);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.service-card:hover::before {
+ opacity: 1;
+}
+
+.service-provider {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.provider-avatar {
+ width: 60px;
+ height: 60px;
+ background: linear-gradient(135deg, var(--pastel-purple), var(--pastel-pink));
+ border-radius: 50%;
+ margin-right: 1rem;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2rem;
+ box-shadow: 0 4px 15px rgba(196, 181, 253, 0.3);
+}
+
+.provider-avatar::after {
+ content: '👨💼';
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+}
+
+.provider-info h6 {
+ color: var(--white);
+ margin-bottom: 0.25rem;
+ font-weight: 600;
+ font-size: 1.1rem;
+}
+
+.provider-info p {
+ color: var(--text-secondary);
+ font-size: 0.9rem;
+ margin: 0;
+}
+
+.service-contract .contract-status {
+ background: var(--pastel-green);
+ color: var(--black);
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ display: inline-block;
+ margin-bottom: 1rem;
+ box-shadow: 0 2px 8px rgba(134, 239, 172, 0.3);
+}
+
+.milestones {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.milestone {
+ padding: 0.75rem 1rem;
+ border-radius: 8px;
+ font-size: 0.9rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+}
+
+.milestone.completed {
+ background: rgba(134, 239, 172, 0.1);
+ color: var(--pastel-green);
+ border-left: 3px solid var(--pastel-green);
+}
+
+.milestone.active {
+ background: rgba(253, 230, 138, 0.1);
+ color: var(--pastel-yellow);
+ border-left: 3px solid var(--pastel-yellow);
+ animation: pulse 2s infinite;
+}
+
+.milestone.pending {
+ background: rgba(255, 255, 255, 0.05);
+ color: var(--text-muted);
+ border-left: 3px solid var(--border-color);
+}
+
+/* Digital Assets Demo */
+.digital-assets-demo {
+ width: 100%;
+ max-width: 450px;
+}
+
+.asset-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1rem;
+}
+
+.digital-asset {
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ backdrop-filter: blur(10px);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.digital-asset::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--pastel-blue), transparent);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.digital-asset:hover {
+ transform: translateY(-3px);
+ border-color: var(--pastel-blue);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.digital-asset:hover::before {
+ opacity: 1;
+}
+
+.asset-type {
+ background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-purple));
+ color: var(--black);
+ padding: 0.4rem 1rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ display: inline-block;
+ margin-bottom: 1rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ box-shadow: 0 2px 8px rgba(167, 243, 208, 0.3);
+}
+
+.digital-asset h6 {
+ color: var(--white);
+ margin-bottom: 0.75rem;
+ font-weight: 600;
+ font-size: 1.1rem;
+}
+
+.digital-asset p {
+ color: var(--text-secondary);
+ font-size: 0.95rem;
+ margin: 0;
+ line-height: 1.4;
+}
+
+/* Responsive adjustments for asset digitalization */
+@media (max-width: 768px) {
+ .asset-showcase {
+ text-align: center;
+ margin-bottom: 3rem;
+ }
+
+ .asset-showcase h3 {
+ font-size: 2rem;
+ }
+
+ .asset-visual {
+ margin-bottom: 2rem;
+ padding: 1rem;
+ }
+
+ .property-card,
+ .service-card,
+ .digital-assets-demo {
+ max-width: 100%;
+ }
+
+ .feature-list li {
+ font-size: 1rem;
+ }
+}
+
+@media (max-width: 576px) {
+ .asset-showcase {
+ padding: 1rem 0;
+ }
+
+ .asset-showcase h3 {
+ font-size: 1.75rem;
+ }
+
+ .asset-showcase .lead {
+ font-size: 1.1rem;
+ }
+
+ .property-card,
+ .service-card {
+ padding: 1.5rem;
+ }
+
+ .digital-asset {
+ padding: 1.25rem;
+ }
+}
\ No newline at end of file
diff --git a/website/styles/main.scss b/website/styles/main.scss
new file mode 100644
index 0000000..ff657f4
--- /dev/null
+++ b/website/styles/main.scss
@@ -0,0 +1,954 @@
+// Custom variables
+:root {
+ --primary-color: #6366f1;
+ --secondary-color: #8b5cf6;
+ --accent-color: #06b6d4;
+ --success-color: #10b981;
+ --warning-color: #f59e0b;
+ --danger-color: #ef4444;
+ --dark-bg: #0f172a;
+ --darker-bg: #020617;
+ --light-text: #f8fafc;
+ --muted-text: #94a3b8;
+ --border-color: #334155;
+}
+
+// Dark theme by default
+body {
+ background-color: var(--dark-bg);
+ color: var(--light-text);
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+}
+
+// Custom scrollbar
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--darker-bg);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--border-color);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--muted-text);
+}
+
+// Header styles
+.navbar {
+ background-color: rgba(15, 23, 42, 0.95) !important;
+ backdrop-filter: blur(10px);
+ border-bottom: 1px solid var(--border-color);
+ transition: all 0.3s ease;
+}
+
+.navbar-brand {
+ font-weight: 700;
+ font-size: 1.5rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.navbar-nav .nav-link {
+ color: var(--light-text) !important;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ position: relative;
+ margin: 0 1.5rem;
+
+ &:hover {
+ color: var(--primary-color) !important;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 50%;
+ width: 0;
+ height: 2px;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ transition: all 0.3s ease;
+ transform: translateX(-50%);
+ }
+
+ &:hover::after {
+ width: 100%;
+ }
+}
+
+// Button styles
+.btn-primary {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ border: none;
+ border-radius: 8px;
+ padding: 12px 24px;
+ font-weight: 600;
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
+ }
+}
+
+.btn-outline-primary {
+ border: 2px solid var(--primary-color);
+ color: var(--primary-color);
+ background: transparent;
+ border-radius: 8px;
+ padding: 10px 22px;
+ font-weight: 600;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: var(--primary-color);
+ color: white;
+ transform: translateY(-2px);
+ }
+}
+
+// Hero section
+.hero-section {
+ min-height: 100vh;
+ background: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
+ radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
+ pointer-events: none;
+ }
+}
+
+.hero-content {
+ position: relative;
+ z-index: 2;
+}
+
+.hero-title {
+ font-size: 4rem;
+ font-weight: 800;
+ background: linear-gradient(135deg, var(--light-text), var(--muted-text));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1.5rem;
+
+ @media (max-width: 768px) {
+ font-size: 2.5rem;
+ }
+}
+
+.hero-subtitle {
+ font-size: 1.25rem;
+ color: var(--muted-text);
+ margin-bottom: 2rem;
+ max-width: 600px;
+}
+
+// Section styles
+.section {
+ padding: 100px 0;
+ position: relative;
+}
+
+.section-title {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ background: linear-gradient(135deg, var(--light-text), var(--muted-text));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.section-subtitle {
+ font-size: 1.1rem;
+ color: var(--muted-text);
+ margin-bottom: 3rem;
+ max-width: 600px;
+}
+
+// Card styles
+.feature-card {
+ background: rgba(51, 65, 85, 0.1);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 2rem;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+
+ &:hover {
+ transform: translateY(-10px);
+ border-color: var(--primary-color);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+ }
+}
+
+.feature-icon {
+ width: 60px;
+ height: 60px;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1.5rem;
+ font-size: 1.5rem;
+ color: white;
+}
+
+// Marketplace animation
+.marketplace-items {
+ display: flex;
+ gap: 1rem;
+ animation: flow 20s linear infinite;
+}
+
+.marketplace-item {
+ min-width: 200px;
+ background: rgba(51, 65, 85, 0.2);
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ padding: 1rem;
+ backdrop-filter: blur(10px);
+}
+
+@keyframes flow {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-100%);
+ }
+}
+
+// Scroll animations
+.fade-in {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.8s ease;
+
+ &.visible {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.slide-in-left {
+ opacity: 0;
+ transform: translateX(-50px);
+ transition: all 0.8s ease;
+
+ &.visible {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.slide-in-right {
+ opacity: 0;
+ transform: translateX(50px);
+ transition: all 0.8s ease;
+
+ &.visible {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+// Footer
+.footer {
+ background-color: var(--darker-bg);
+ border-top: 1px solid var(--border-color);
+ padding: 3rem 0;
+ margin-top: 5rem;
+}
+
+// Asset showcase styles
+.asset-showcase {
+ padding: 2rem 0;
+
+
+ h3 {
+ font-size: 2rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ color: var(--light-text);
+ }
+
+ .lead {
+ font-size: 1.2rem;
+ color: var(--muted-text);
+ margin-bottom: 2rem;
+ }
+
+ .feature-list {
+ list-style: none;
+ padding: 0;
+
+ li {
+ padding: 0.5rem 0;
+ color: var(--light-text);
+ font-size: 1.1rem;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ width: 4px;
+ height: 4px;
+ background: var(--primary-color);
+ border-radius: 50%;
+ margin-right: 1rem;
+ }
+ }
+ }
+}
+
+.asset-visual {
+ padding: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+// Property tokenization demo
+.tokenization-demo {
+ .property-card {
+ background: rgba(51, 65, 85, 0.2);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ backdrop-filter: blur(10px);
+ max-width: 300px;
+
+ .property-image {
+ height: 120px;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ position: relative;
+
+ &::after {
+ content: '🏢';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 2rem;
+ }
+ }
+
+ .property-details {
+ h5 {
+ color: var(--light-text);
+ margin-bottom: 0.5rem;
+ }
+
+ p {
+ color: var(--muted-text);
+ margin-bottom: 1rem;
+ }
+
+ .progress {
+ height: 8px;
+ background: rgba(51, 65, 85, 0.5);
+ border-radius: 4px;
+ margin-bottom: 0.5rem;
+
+ .progress-bar {
+ background: linear-gradient(135deg, var(--success-color), var(--accent-color));
+ border-radius: 4px;
+ }
+ }
+
+ small {
+ color: var(--success-color);
+ font-weight: 600;
+ }
+ }
+ }
+}
+
+// Service demo
+.service-demo {
+ .service-card {
+ background: rgba(51, 65, 85, 0.2);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ backdrop-filter: blur(10px);
+ max-width: 320px;
+
+ .service-provider {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1.5rem;
+
+ .provider-avatar {
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+ border-radius: 50%;
+ margin-right: 1rem;
+ position: relative;
+
+ &::after {
+ content: '👨💼';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 1.5rem;
+ }
+ }
+
+ .provider-info {
+ h6 {
+ color: var(--light-text);
+ margin-bottom: 0.25rem;
+ }
+
+ p {
+ color: var(--muted-text);
+ font-size: 0.9rem;
+ margin: 0;
+ }
+ }
+ }
+
+ .service-contract {
+ .contract-status {
+ background: var(--success-color);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ display: inline-block;
+ margin-bottom: 1rem;
+ }
+
+ .milestones {
+ .milestone {
+ padding: 0.5rem 0;
+ color: var(--muted-text);
+
+ &.completed {
+ color: var(--success-color);
+ }
+
+ &.active {
+ color: var(--warning-color);
+ }
+ }
+ }
+ }
+ }
+}
+
+// Digital assets demo
+.digital-assets-demo {
+ .asset-grid {
+ display: grid;
+ gap: 1rem;
+
+ .digital-asset {
+ background: rgba(51, 65, 85, 0.2);
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ padding: 1rem;
+ backdrop-filter: blur(10px);
+
+ .asset-type {
+ background: var(--primary-color);
+ color: white;
+ padding: 0.25rem 0.75rem;
+ border-radius: 12px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ display: inline-block;
+ margin-bottom: 0.5rem;
+ }
+
+ h6 {
+ color: var(--light-text);
+ margin-bottom: 0.5rem;
+ }
+
+ p {
+ color: var(--muted-text);
+ font-size: 0.9rem;
+ margin: 0;
+ }
+ }
+ }
+}
+
+// Responsive
+@media (max-width: 768px) {
+ .section {
+ padding: 60px 0;
+ }
+
+ .section-title {
+ font-size: 2rem;
+ }
+
+ .feature-card {
+ margin-bottom: 2rem;
+ }
+
+ .asset-showcase {
+ text-align: center;
+ margin-bottom: 3rem;
+
+
+ h3 {
+ font-size: 1.5rem;
+ }
+ }
+
+ .asset-visual {
+ margin-bottom: 2rem;
+ }
+}
+
+// Enhanced Asset Digitalization Styles
+.asset-showcase {
+ padding: 2rem 0;
+ position: relative;
+
+
+ h3 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ color: var(--light-text);
+ background: linear-gradient(135deg, var(--light-text), var(--primary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ }
+
+ .lead {
+ font-size: 1.25rem;
+ color: var(--muted-text);
+ margin-bottom: 2rem;
+ line-height: 1.6;
+ }
+
+ .feature-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ padding: 0.75rem 0;
+ color: var(--muted-text);
+ font-size: 1.1rem;
+ display: flex;
+ align-items: center;
+ transition: all 0.3s ease;
+
+ &:hover {
+ color: var(--light-text);
+ transform: translateX(5px);
+ }
+
+ &::before {
+ content: '';
+ display: inline-block;
+ width: 6px;
+ height: 6px;
+ background: var(--success-color);
+ border-radius: 50%;
+ margin-right: 1rem;
+ box-shadow: 0 0 8px var(--success-color);
+ }
+ }
+ }
+}
+
+.asset-visual {
+ padding: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+}
+
+// Enhanced Property Tokenization Demo
+.tokenization-demo {
+ width: 100%;
+ max-width: 400px;
+
+ .property-card {
+ background: rgba(51, 65, 85, 0.1);
+ border: 1px solid var(--border-color);
+ border-radius: 20px;
+ padding: 2rem;
+ backdrop-filter: blur(15px);
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ &:hover {
+ transform: translateY(-5px);
+ border-color: var(--primary-color);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+
+ &::before {
+ opacity: 1;
+ }
+ }
+
+ .property-image {
+ height: 140px;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ border-radius: 12px;
+ margin-bottom: 1.5rem;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 3rem;
+ overflow: hidden;
+
+ &::after {
+ content: '🏢';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 3rem;
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+ }
+ }
+
+ .property-details {
+ h5 {
+ color: var(--light-text);
+ margin-bottom: 0.75rem;
+ font-weight: 600;
+ font-size: 1.2rem;
+ }
+
+ p {
+ color: var(--muted-text);
+ margin-bottom: 1.5rem;
+ font-size: 1rem;
+ }
+
+ .progress {
+ height: 10px;
+ background: rgba(51, 65, 85, 0.5);
+ border-radius: 5px;
+ margin-bottom: 0.75rem;
+ overflow: hidden;
+
+ .progress-bar {
+ background: linear-gradient(90deg, var(--success-color), var(--accent-color));
+ border-radius: 5px;
+ transition: width 0.3s ease;
+ box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
+ }
+ }
+
+ small {
+ color: var(--success-color);
+ font-weight: 600;
+ font-size: 0.9rem;
+ }
+ }
+ }
+}
+
+// Enhanced Service Demo
+.service-demo {
+ width: 100%;
+ max-width: 400px;
+
+ .service-card {
+ background: rgba(51, 65, 85, 0.1);
+ border: 1px solid var(--border-color);
+ border-radius: 20px;
+ padding: 2rem;
+ backdrop-filter: blur(15px);
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--secondary-color), transparent);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ &:hover {
+ transform: translateY(-5px);
+ border-color: var(--secondary-color);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+
+ &::before {
+ opacity: 1;
+ }
+ }
+
+ .service-provider {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1.5rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid var(--border-color);
+
+ .provider-avatar {
+ width: 60px;
+ height: 60px;
+ background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+ border-radius: 50%;
+ margin-right: 1rem;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 2rem;
+ box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+
+ &::after {
+ content: '👨💼';
+ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+ }
+ }
+
+ .provider-info {
+ h6 {
+ color: var(--light-text);
+ margin-bottom: 0.25rem;
+ font-weight: 600;
+ font-size: 1.1rem;
+ }
+
+ p {
+ color: var(--muted-text);
+ font-size: 0.9rem;
+ margin: 0;
+ }
+ }
+ }
+
+ .service-contract {
+ .contract-status {
+ background: var(--success-color);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ display: inline-block;
+ margin-bottom: 1rem;
+ box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+
+ &.active {
+ background: var(--success-color);
+ }
+ }
+
+ .milestones {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ .milestone {
+ padding: 0.75rem 1rem;
+ border-radius: 8px;
+ font-size: 0.9rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+
+ &.completed {
+ background: rgba(16, 185, 129, 0.1);
+ color: var(--success-color);
+ border-left: 3px solid var(--success-color);
+ }
+
+ &.active {
+ background: rgba(245, 158, 11, 0.1);
+ color: var(--warning-color);
+ border-left: 3px solid var(--warning-color);
+ animation: pulse 2s infinite;
+ }
+
+ &.pending {
+ background: rgba(51, 65, 85, 0.1);
+ color: var(--muted-text);
+ border-left: 3px solid var(--border-color);
+ }
+ }
+ }
+ }
+ }
+}
+
+// Enhanced Digital Assets Demo
+.digital-assets-demo {
+ width: 100%;
+ max-width: 450px;
+
+ .asset-grid {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 1rem;
+
+ .digital-asset {
+ background: rgba(51, 65, 85, 0.1);
+ border: 1px solid var(--border-color);
+ border-radius: 16px;
+ padding: 1.5rem;
+ backdrop-filter: blur(10px);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ &:hover {
+ transform: translateY(-3px);
+ border-color: var(--primary-color);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+
+ &::before {
+ opacity: 1;
+ }
+ }
+
+ .asset-type {
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ padding: 0.4rem 1rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ display: inline-block;
+ margin-bottom: 1rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+ }
+
+ h6 {
+ color: var(--light-text);
+ margin-bottom: 0.75rem;
+ font-weight: 600;
+ font-size: 1.1rem;
+ }
+
+ p {
+ color: var(--muted-text);
+ font-size: 0.95rem;
+ margin: 0;
+ line-height: 1.4;
+ }
+ }
+ }
+}
+
+// Enhanced responsive styles for asset digitalization
+@media (max-width: 768px) {
+ .asset-showcase {
+ text-align: center;
+ margin-bottom: 3rem;
+
+
+ h3 {
+ font-size: 2rem;
+ }
+
+ .lead {
+ font-size: 1.1rem;
+ }
+
+ .feature-list li {
+ font-size: 1rem;
+ justify-content: center;
+ }
+ }
+
+ .asset-visual {
+ margin-bottom: 2rem;
+ padding: 1rem;
+ }
+
+ .property-card,
+ .service-card,
+ .digital-assets-demo {
+ max-width: 100%;
+ }
+}
+
+@media (max-width: 576px) {
+ .asset-showcase {
+ padding: 1rem 0;
+
+
+ h3 {
+ font-size: 1.75rem;
+ }
+
+ .lead {
+ font-size: 1rem;
+ }
+ }
+
+ .property-card,
+ .service-card {
+ padding: 1.5rem;
+ }
+
+ .digital-asset {
+ padding: 1.25rem;
+ }
+}
\ No newline at end of file