add website
This commit is contained in:
timurgordon
1372
website/Cargo.lock
generated
Normal file
1372
website/Cargo.lock
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
website/Cargo.toml
Normal file
22
website/Cargo.toml
Normal file
@@ -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"
|
||||
7
website/Trunk.toml
Normal file
7
website/Trunk.toml
Normal file
@@ -0,0 +1,7 @@
|
||||
[build]
|
||||
target = "index.html"
|
||||
|
||||
[serve]
|
||||
address = "127.0.0.1"
|
||||
port = 8080
|
||||
open = true
|
||||
22
website/content/defi/features.md
Normal file
22
website/content/defi/features.md
Normal file
@@ -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.
|
||||
5
website/content/defi/hero.md
Normal file
5
website/content/defi/hero.md
Normal file
@@ -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.
|
||||
16
website/content/home/about.md
Normal file
16
website/content/home/about.md
Normal file
@@ -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
|
||||
5
website/content/home/hero.md
Normal file
5
website/content/home/hero.md
Normal file
@@ -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.
|
||||
19
website/content/marketplace/features.md
Normal file
19
website/content/marketplace/features.md
Normal file
@@ -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.
|
||||
5
website/content/marketplace/hero.md
Normal file
5
website/content/marketplace/hero.md
Normal file
@@ -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.
|
||||
19
website/content/platform/features.md
Normal file
19
website/content/platform/features.md
Normal file
@@ -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.
|
||||
5
website/content/platform/hero.md
Normal file
5
website/content/platform/hero.md
Normal file
@@ -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.
|
||||
28
website/index.html
Normal file
28
website/index.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Freezone - Digital Freedom Platform</title>
|
||||
<base data-trunk-public-url />
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link data-trunk rel="css" href="styles/main.css" />
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Custom JS -->
|
||||
<link data-trunk rel="copy-file" href="static/js/animations.js" />
|
||||
|
||||
<!-- Rust WASM -->
|
||||
<link data-trunk rel="rust" data-cargo-features="yew/csr" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="animations.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
46
website/src/app.rs
Normal file
46
website/src/app.rs
Normal file
@@ -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! { <Home /> },
|
||||
Route::Platform => html! { <Platform /> },
|
||||
Route::Marketplace => html! { <Marketplace /> },
|
||||
Route::DeFi => html! { <DeFi /> },
|
||||
Route::NotFound => html! { <NotFound /> },
|
||||
}
|
||||
}
|
||||
|
||||
#[function_component(App)]
|
||||
pub fn app() -> Html {
|
||||
html! {
|
||||
<BrowserRouter>
|
||||
<div id="app">
|
||||
<Header />
|
||||
<main>
|
||||
<Switch<Route> render={switch} />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
}
|
||||
}
|
||||
102
website/src/components/footer.rs
Normal file
102
website/src/components/footer.rs
Normal file
@@ -0,0 +1,102 @@
|
||||
use yew::prelude::*;
|
||||
use yew_router::prelude::*;
|
||||
use crate::app::Route;
|
||||
|
||||
#[function_component(Footer)]
|
||||
pub fn footer() -> Html {
|
||||
html! {
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h5 class="mb-3">{"Freezone"}</h5>
|
||||
<p class="text-muted">
|
||||
{"The ultimate digital freedom platform where innovation meets opportunity."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-6 mb-4">
|
||||
<h6 class="mb-3">{"Platform"}</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<Link<Route> to={Route::Platform} classes="text-muted text-decoration-none">
|
||||
{"Overview"}
|
||||
</Link<Route>>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"Features"}</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"Pricing"}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-6 mb-4">
|
||||
<h6 class="mb-3">{"Marketplace"}</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<Link<Route> to={Route::Marketplace} classes="text-muted text-decoration-none">
|
||||
{"Browse"}
|
||||
</Link<Route>>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"Sell"}</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"NFTs"}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-6 mb-4">
|
||||
<h6 class="mb-3">{"DeFi"}</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<Link<Route> to={Route::DeFi} classes="text-muted text-decoration-none">
|
||||
{"Trading"}
|
||||
</Link<Route>>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"Staking"}</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"Pools"}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-2 col-md-6 mb-4">
|
||||
<h6 class="mb-3">{"Support"}</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"Help Center"}</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"Contact"}</a>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<a href="#" class="text-muted text-decoration-none">{"Community"}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" style="border-color: var(--border-color);" />
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<p class="text-muted mb-0">
|
||||
{"© 2024 Freezone. All rights reserved."}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<a href="#" class="text-muted text-decoration-none me-3">{"Privacy"}</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-3">{"Terms"}</a>
|
||||
<a href="#" class="text-muted text-decoration-none">{"Security"}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
}
|
||||
}
|
||||
45
website/src/components/header.rs
Normal file
45
website/src/components/header.rs
Normal file
@@ -0,0 +1,45 @@
|
||||
use yew::prelude::*;
|
||||
use yew_router::prelude::*;
|
||||
use crate::app::Route;
|
||||
|
||||
#[function_component(Header)]
|
||||
pub fn header() -> Html {
|
||||
html! {
|
||||
<nav class="navbar navbar-expand-lg fixed-top">
|
||||
<div class="container">
|
||||
<Link<Route> to={Route::Home} classes="navbar-brand">
|
||||
{"Zanzibar Digital Freezone"}
|
||||
</Link<Route>>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<Link<Route> to={Route::Platform} classes="nav-link">
|
||||
{"Platform"}
|
||||
</Link<Route>>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<Link<Route> to={Route::Marketplace} classes="nav-link">
|
||||
{"Marketplace"}
|
||||
</Link<Route>>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<Link<Route> to={Route::DeFi} classes="nav-link">
|
||||
{"DeFi"}
|
||||
</Link<Route>>
|
||||
</li>
|
||||
<li class="nav-item ms-3">
|
||||
<a href="#" class="btn btn-primary">
|
||||
{"Register"}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
131
website/src/components/hero.rs
Normal file
131
website/src/components/hero.rs
Normal file
@@ -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<String>,
|
||||
#[prop_or_default]
|
||||
pub secondary_cta_link: Option<String>,
|
||||
#[prop_or_default]
|
||||
pub background_variant: Option<String>,
|
||||
}
|
||||
|
||||
#[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! {
|
||||
<section class={classes!("hero-section", background_class)}>
|
||||
<div class="container">
|
||||
<div class="row align-items-center min-vh-100">
|
||||
<div class="col-lg-6 hero-content">
|
||||
<div class="fade-in animate">
|
||||
<h1 class="hero-title">{title}</h1>
|
||||
<p class="hero-subtitle">{description}</p>
|
||||
<div class="hero-actions mt-4">
|
||||
<a href={props.cta_link.clone()} class="btn btn-primary btn-lg me-3">
|
||||
{&props.cta_text}
|
||||
</a>
|
||||
{if let Some(secondary_text) = &props.secondary_cta_text {
|
||||
html! {
|
||||
<a href={props.secondary_cta_link.clone().unwrap_or_default()}
|
||||
class="btn btn-outline-primary btn-lg">
|
||||
{secondary_text}
|
||||
</a>
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 slide-in-right animate">
|
||||
<div class="hero-visual">
|
||||
{match props.background_variant.as_deref() {
|
||||
Some("marketplace") => html! {
|
||||
<div class="hero-marketplace-visual">
|
||||
<div class="floating-cards">
|
||||
<div class="floating-card card-1">
|
||||
<div class="card-icon">{"🎨"}</div>
|
||||
<div class="card-title">{"Digital Art"}</div>
|
||||
<div class="card-price">{"2.5 ETH"}</div>
|
||||
</div>
|
||||
<div class="floating-card card-2">
|
||||
<div class="card-icon">{"🏠"}</div>
|
||||
<div class="card-title">{"Real Estate"}</div>
|
||||
<div class="card-price">{"$50K"}</div>
|
||||
</div>
|
||||
<div class="floating-card card-3">
|
||||
<div class="card-icon">{"💼"}</div>
|
||||
<div class="card-title">{"Services"}</div>
|
||||
<div class="card-price">{"100 USDC"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
Some("platform") => html! {
|
||||
<div class="hero-platform-visual">
|
||||
<div class="dashboard-preview">
|
||||
<div class="dashboard-header"></div>
|
||||
<div class="dashboard-content">
|
||||
<div class="dashboard-widget"></div>
|
||||
<div class="dashboard-widget"></div>
|
||||
<div class="dashboard-widget large"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
Some("defi") => html! {
|
||||
<div class="hero-defi-visual">
|
||||
<div class="liquidity-pool-animation">
|
||||
<div class="pool-container">
|
||||
<div class="pool-center">
|
||||
<div class="pool-label">{"Pool"}</div>
|
||||
</div>
|
||||
<div class="asset-flow">
|
||||
<div class="asset-token eth flowing-in">{"ETH"}</div>
|
||||
<div class="asset-token usdc flowing-in">{"USDC"}</div>
|
||||
<div class="asset-token btc flowing-out">{"BTC"}</div>
|
||||
<div class="asset-token dai flowing-out">{"DAI"}</div>
|
||||
</div>
|
||||
<div class="pool-stats">
|
||||
<div class="pool-stat">
|
||||
<span class="stat-label">{"TVL:"}</span>
|
||||
<span class="stat-value">{"$2.4B"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
},
|
||||
_ => html! {
|
||||
<div class="hero-default-visual">
|
||||
<WorldMap />
|
||||
</div>
|
||||
}
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Scroll indicator
|
||||
<div class="scroll-indicator">
|
||||
<div class="scroll-arrow"></div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
316
website/src/components/marketplace_flow.rs
Normal file
316
website/src/components/marketplace_flow.rs
Normal file
@@ -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! {
|
||||
<div class="marketplace-flow-container">
|
||||
<div class="marketplace-items">
|
||||
{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! {
|
||||
<div class={classes!("marketplace-item", rarity_class)}>
|
||||
<div class="item-header">
|
||||
<div class="item-image">{&item.image}</div>
|
||||
<div class="item-rarity">
|
||||
<span class="rarity-badge">{&item.rarity}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<h6 class="item-title">{&item.title}</h6>
|
||||
<p class="item-category">{&item.category}</p>
|
||||
<div class="item-seller">
|
||||
<span class="seller-label">{"by "}</span>
|
||||
<span class="seller-name">{&item.seller}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-footer">
|
||||
<div class="item-price">{&item.price}</div>
|
||||
<button class="btn-quick-buy">{"Quick Buy"}</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}).collect::<Html>()}
|
||||
</div>
|
||||
<div class="flow-overlay-left"></div>
|
||||
<div class="flow-overlay-right"></div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[function_component(InteractiveLiquidityPool)]
|
||||
pub fn interactive_liquidity_pool() -> Html {
|
||||
html! {
|
||||
<div class="interactive-demo">
|
||||
<h5 class="text-center mb-4">{"Live Liquidity Pools"}</h5>
|
||||
<div class="liquidity-pools">
|
||||
<div class="liquidity-pool" data-pool="eth-usdc">
|
||||
<div class="pool-header">
|
||||
<div class="pool-tokens">
|
||||
<div class="token-pair">
|
||||
<div class="token-icon eth"></div>
|
||||
<div class="token-icon usdc"></div>
|
||||
</div>
|
||||
<span class="pool-name">{"ETH/USDC"}</span>
|
||||
</div>
|
||||
<div class="pool-apr">{"12.4% APR"}</div>
|
||||
</div>
|
||||
<div class="pool-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">{"TVL"}</span>
|
||||
<span class="stat-value">{"$2.4M"}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">{"Volume 24h"}</span>
|
||||
<span class="stat-value">{"$890K"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="liquidity-pool" data-pool="btc-eth">
|
||||
<div class="pool-header">
|
||||
<div class="pool-tokens">
|
||||
<div class="token-pair">
|
||||
<div class="token-icon btc"></div>
|
||||
<div class="token-icon eth"></div>
|
||||
</div>
|
||||
<span class="pool-name">{"BTC/ETH"}</span>
|
||||
</div>
|
||||
<div class="pool-apr">{"8.7% APR"}</div>
|
||||
</div>
|
||||
<div class="pool-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">{"TVL"}</span>
|
||||
<span class="stat-value">{"$5.1M"}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">{"Volume 24h"}</span>
|
||||
<span class="stat-value">{"$1.2M"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="liquidity-pool" data-pool="usdc-dai">
|
||||
<div class="pool-header">
|
||||
<div class="pool-tokens">
|
||||
<div class="token-pair">
|
||||
<div class="token-icon usdc"></div>
|
||||
<div class="token-icon dai"></div>
|
||||
</div>
|
||||
<span class="pool-name">{"USDC/DAI"}</span>
|
||||
</div>
|
||||
<div class="pool-apr">{"4.2% APR"}</div>
|
||||
</div>
|
||||
<div class="pool-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">{"TVL"}</span>
|
||||
<span class="stat-value">{"$8.9M"}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">{"Volume 24h"}</span>
|
||||
<span class="stat-value">{"$2.1M"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[function_component(LiveOrderbook)]
|
||||
pub fn live_orderbook() -> Html {
|
||||
html! {
|
||||
<div class="interactive-demo">
|
||||
<h5 class="text-center mb-4">{"Live Order Book - BTC/USDC"}</h5>
|
||||
<div class="orderbook">
|
||||
<div class="orderbook-header">
|
||||
<span>{"Price (USDC)"}</span>
|
||||
<span>{"Amount (BTC)"}</span>
|
||||
<span>{"Total"}</span>
|
||||
</div>
|
||||
<div class="orderbook-content" id="orderbook-content">
|
||||
// Orders will be populated by JavaScript
|
||||
</div>
|
||||
<div class="spread-indicator">
|
||||
<span class="spread-label">{"Spread: "}</span>
|
||||
<span class="spread-value">{"$12.50 (0.03%)"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[function_component(PlatformWireframe)]
|
||||
pub fn platform_wireframe() -> Html {
|
||||
html! {
|
||||
<div class="interactive-demo">
|
||||
<h5 class="text-center mb-4">{"Platform Dashboard Preview"}</h5>
|
||||
<div class="platform-wireframe wireframe">
|
||||
<div class="wireframe-header">
|
||||
<div class="header-logo"></div>
|
||||
<div class="header-nav">
|
||||
<div class="nav-item active"></div>
|
||||
<div class="nav-item"></div>
|
||||
<div class="nav-item"></div>
|
||||
</div>
|
||||
<div class="header-user"></div>
|
||||
</div>
|
||||
<div class="wireframe-sidebar">
|
||||
<div class="sidebar-item"></div>
|
||||
<div class="sidebar-item active"></div>
|
||||
<div class="sidebar-item"></div>
|
||||
<div class="sidebar-item"></div>
|
||||
</div>
|
||||
<div class="wireframe-main">
|
||||
<div class="main-header">
|
||||
<div class="page-title"></div>
|
||||
<div class="action-buttons">
|
||||
<div class="btn-wireframe primary"></div>
|
||||
<div class="btn-wireframe secondary"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="content-grid">
|
||||
<div class="grid-item large"></div>
|
||||
<div class="grid-item medium"></div>
|
||||
<div class="grid-item medium"></div>
|
||||
<div class="grid-item small"></div>
|
||||
<div class="grid-item small"></div>
|
||||
<div class="grid-item small"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[function_component(TradingInterface)]
|
||||
pub fn trading_interface() -> Html {
|
||||
html! {
|
||||
<div class="interactive-demo">
|
||||
<h5 class="text-center mb-4">{"Advanced Trading Interface"}</h5>
|
||||
<div class="trading-interface">
|
||||
<div class="trading-header">
|
||||
<div class="trading-pair">
|
||||
<span class="pair-name">{"BTC/USDC"}</span>
|
||||
<span class="pair-price">{"$42,150.00"}</span>
|
||||
<span class="pair-change positive">{"+2.4%"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trading-content">
|
||||
<div class="chart-container">
|
||||
<div class="defi-chart chart" id="trading-chart"></div>
|
||||
</div>
|
||||
<div class="trading-controls">
|
||||
<div class="order-form">
|
||||
<div class="order-tabs">
|
||||
<button class="tab-btn active">{"Buy"}</button>
|
||||
<button class="tab-btn">{"Sell"}</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>{"Amount (BTC)"}</label>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="0.00" />
|
||||
<span class="input-suffix">{"BTC"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>{"Price (USDC)"}</label>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="42,150.00" />
|
||||
<span class="input-suffix">{"USDC"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-trade buy">{"Place Buy Order"}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
19
website/src/components/mod.rs
Normal file
19
website/src/components/mod.rs
Normal file
@@ -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;
|
||||
127
website/src/components/section.rs
Normal file
127
website/src/components/section.rs
Normal file
@@ -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<AttrValue>,
|
||||
#[prop_or_default]
|
||||
pub background_class: Option<AttrValue>,
|
||||
#[prop_or_default]
|
||||
pub id: Option<AttrValue>,
|
||||
}
|
||||
|
||||
#[function_component(Section)]
|
||||
pub fn section(props: &SectionProps) -> Html {
|
||||
let content = match props.content_path.as_str() {
|
||||
"home/about" => html! {
|
||||
<>
|
||||
<h2 class="section-title">{"About the Freezone"}</h2>
|
||||
<p class="section-subtitle">
|
||||
{"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."}
|
||||
</p>
|
||||
<h3>{"Our Vision"}</h3>
|
||||
<p>
|
||||
{"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."}
|
||||
</p>
|
||||
<h3>{"Core Values"}</h3>
|
||||
<ul>
|
||||
<li><strong>{"Freedom"}</strong>{": Complete autonomy over your digital presence"}</li>
|
||||
<li><strong>{"Innovation"}</strong>{": Cutting-edge technology that pushes boundaries"}</li>
|
||||
<li><strong>{"Community"}</strong>{": A thriving ecosystem of like-minded pioneers"}</li>
|
||||
<li><strong>{"Security"}</strong>{": Bank-grade protection for all your assets"}</li>
|
||||
<li><strong>{"Transparency"}</strong>{": Open, auditable, and trustworthy operations"}</li>
|
||||
</ul>
|
||||
</>
|
||||
},
|
||||
"platform/features" => html! {
|
||||
<>
|
||||
<h2 class="section-title">{"Platform Features"}</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Company Management"}</h4>
|
||||
<p>{"Establish and manage your digital companies with complete autonomy. Handle registrations, compliance, and operations through our intuitive dashboard."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Digital Governance"}</h4>
|
||||
<p>{"Implement transparent governance structures with built-in voting mechanisms, proposal systems, and stakeholder management tools."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Financial Administration"}</h4>
|
||||
<p>{"Comprehensive financial management including accounting, budgeting, treasury management, and automated reporting systems."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Smart Contracts"}</h4>
|
||||
<p>{"Deploy and manage smart contracts for automated business processes, ensuring trust and transparency in all operations."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
},
|
||||
"marketplace/features" => html! {
|
||||
<>
|
||||
<h2 class="section-title">{"Marketplace Features"}</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Digital Asset Trading"}</h4>
|
||||
<p>{"Trade a wide variety of digital assets including cryptocurrencies, tokens, and digital commodities with advanced trading tools and real-time market data."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"NFT Marketplace"}</h4>
|
||||
<p>{"Discover, buy, and sell unique NFTs from artists, creators, and brands. Support for multiple blockchain networks and advanced filtering options."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Service Exchange"}</h4>
|
||||
<p>{"Connect with service providers and clients in the freezone. From consulting to development, find or offer professional services with crypto payments."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Real Estate Tokenization"}</h4>
|
||||
<p>{"Invest in tokenized real estate properties, enabling fractional ownership and global accessibility to premium real estate markets."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
},
|
||||
"defi/features" => html! {
|
||||
<>
|
||||
<h2 class="section-title">{"DeFi Features"}</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Liquidity Pools"}</h4>
|
||||
<p>{"Provide liquidity to earn rewards and help facilitate seamless trading across multiple token pairs with competitive APY rates."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Leveraged Trading"}</h4>
|
||||
<p>{"Access up to 100x leverage on major cryptocurrency pairs with advanced risk management tools and real-time margin monitoring."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Yield Farming"}</h4>
|
||||
<p>{"Maximize your returns through strategic yield farming opportunities across multiple protocols and chains."}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<h4>{"Staking Rewards"}</h4>
|
||||
<p>{"Stake your tokens to earn passive income while contributing to network security and governance."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
},
|
||||
_ => html! { <h2>{"Content not found"}</h2> }
|
||||
};
|
||||
|
||||
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! {
|
||||
<section class={background_class} id={section_id}>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class={animation_class}>
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
433
website/src/components/world_map.rs
Normal file
433
website/src/components/world_map.rs
Normal file
@@ -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<String>,
|
||||
}
|
||||
|
||||
#[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::<ActiveConnection>::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::<HtmlElement>() {
|
||||
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::<HtmlScriptElement>().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: '<div style="background: #86efac; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 15px #86efac;"></div>',
|
||||
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<dyn FnMut()>);
|
||||
|
||||
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! {
|
||||
<div class="world-map-container fade-in animate">
|
||||
<div class="map-wrapper">
|
||||
// OpenStreetMap container
|
||||
<div id="world-map" ref={map_ref} class="leaflet-map"></div>
|
||||
|
||||
// Connection animations overlay
|
||||
<div class="connection-overlay">
|
||||
// Animated connection lines and dots
|
||||
<svg class="connections-svg" viewBox="0 0 1200 600">
|
||||
// Gradient definition for beam effect
|
||||
<defs>
|
||||
<linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:rgba(0,255,255,0.1);stop-opacity:1" />
|
||||
<stop offset="50%" style="stop-color:rgba(0,255,255,0.8);stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:rgba(0,255,255,0.1);stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{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! {
|
||||
<g key={entity.id}>
|
||||
// Straight beam line
|
||||
<line
|
||||
class="connection-line animated"
|
||||
x1={start_x.to_string()}
|
||||
y1={start_y.to_string()}
|
||||
x2={end_x.to_string()}
|
||||
y2={end_y.to_string()}
|
||||
style={format!("opacity: {}", (0.7 - progress * 0.3).max(0.2))}
|
||||
/>
|
||||
// Moving data dot
|
||||
<circle
|
||||
class="connection-dot moving"
|
||||
cx={current_x.to_string()}
|
||||
cy={current_y.to_string()}
|
||||
r="6"
|
||||
style={format!("opacity: {}", (1.0 - progress * 0.1).max(0.7))}
|
||||
/>
|
||||
</g>
|
||||
}
|
||||
})}
|
||||
|
||||
// Zanzibar hub (always visible) - actual geographic position
|
||||
// Zanzibar coordinates: -6.1659, 39.2026
|
||||
<circle class="zanzibar-hub" cx="731.5" cy="321.1" r="15" />
|
||||
<circle class="zanzibar-pulse" cx="731.5" cy="321.1" r="15" />
|
||||
</svg>
|
||||
|
||||
// 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! {
|
||||
<div
|
||||
key={entity.id}
|
||||
class="entity-card"
|
||||
style={format!("left: {}%; top: {}%; opacity: {};", card_x, card_y, opacity)}
|
||||
>
|
||||
<div class="entity-header">
|
||||
<span class={format!("entity-type {}", entity.entity_type.to_lowercase())}>
|
||||
{&entity.entity_type}
|
||||
</span>
|
||||
<span class="entity-date">{&entity.registration_date}</span>
|
||||
</div>
|
||||
<div class="entity-name">{&entity.name}</div>
|
||||
<div class="entity-location">
|
||||
<span class="location-icon">{"📍"}</span>
|
||||
{&entity.location}
|
||||
</div>
|
||||
{if let Some(industry) = &entity.industry {
|
||||
html! {
|
||||
<div class="entity-industry">{industry}</div>
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
}}
|
||||
<div class="entity-status">
|
||||
{if progress < 0.5 {
|
||||
"Connecting to Zanzibar..."
|
||||
} else if progress < 0.9 {
|
||||
"Establishing digital presence..."
|
||||
} else {
|
||||
"Registration complete!"
|
||||
}}
|
||||
</div>
|
||||
<div class="connection-progress">
|
||||
<div class="progress-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
style={format!("width: {}%", progress * 100.0)}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Statistics
|
||||
<div class="map-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{"17,736"}</div>
|
||||
<div class="stat-label">{"Digital Entities"}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{"127"}</div>
|
||||
<div class="stat-label">{"Countries"}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{"$2.4B"}</div>
|
||||
<div class="stat-label">{"Assets Under Management"}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">{"24/7"}</div>
|
||||
<div class="stat-label">{"Global Operations"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[function_component(GlobalConnections)]
|
||||
pub fn global_connections() -> Html {
|
||||
html! {
|
||||
<section class="section global-connections-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in">{"Global Digital Hub"}</h2>
|
||||
<p class="section-subtitle fade-in">
|
||||
{"Connecting entrepreneurs worldwide to Zanzibar's digital freezone"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="slide-in-right">
|
||||
<WorldMap />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
10
website/src/main.rs
Normal file
10
website/src/main.rs
Normal file
@@ -0,0 +1,10 @@
|
||||
mod app;
|
||||
mod components;
|
||||
mod pages;
|
||||
mod utils;
|
||||
|
||||
use app::App;
|
||||
|
||||
fn main() {
|
||||
yew::Renderer::<App>::new().render();
|
||||
}
|
||||
428
website/src/pages/defi.rs
Normal file
428
website/src/pages/defi.rs
Normal file
@@ -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! {
|
||||
<>
|
||||
<Hero
|
||||
content_path="defi/hero"
|
||||
cta_text="Start Trading"
|
||||
cta_link="#trading"
|
||||
secondary_cta_text="View Pools"
|
||||
secondary_cta_link="#pools"
|
||||
background_variant="defi"
|
||||
/>
|
||||
|
||||
// Live trading interface
|
||||
<section class="section section-alt" id="trading">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Trading Interface"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Experience professional-grade DeFi trading with real-time data and advanced tools"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-12">
|
||||
<div class="fade-in animate">
|
||||
<TradingInterface />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// DeFi protocols overview
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"DeFi Protocols"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Access the full spectrum of decentralized finance opportunities"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="feature-card text-center fade-in animate">
|
||||
<div class="feature-icon mx-auto">
|
||||
{"💧"}
|
||||
</div>
|
||||
<h5>{"Liquidity Pools"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Provide liquidity and earn fees from trading activity across multiple token pairs."}
|
||||
</p>
|
||||
<div class="protocol-stats">
|
||||
<div class="stat-row">
|
||||
<span>{"TVL:"}</span>
|
||||
<span class="text-success">{"$2.4B"}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>{"APY:"}</span>
|
||||
<span class="text-info">{"8.5% - 45%"}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>{"Pools:"}</span>
|
||||
<span>{"150+"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="feature-card text-center fade-in animate">
|
||||
<div class="feature-icon mx-auto">
|
||||
{"📈"}
|
||||
</div>
|
||||
<h5>{"Leveraged Trading"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Trade with up to 100x leverage on major cryptocurrency pairs with advanced risk management."}
|
||||
</p>
|
||||
<div class="protocol-stats">
|
||||
<div class="stat-row">
|
||||
<span>{"Max Leverage:"}</span>
|
||||
<span class="text-warning">{"100x"}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>{"Trading Pairs:"}</span>
|
||||
<span>{"50+"}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>{"24h Volume:"}</span>
|
||||
<span class="text-success">{"$890M"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="feature-card text-center fade-in animate">
|
||||
<div class="feature-icon mx-auto">
|
||||
{"🌾"}
|
||||
</div>
|
||||
<h5>{"Yield Farming"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Maximize returns through strategic yield farming across multiple protocols and chains."}
|
||||
</p>
|
||||
<div class="protocol-stats">
|
||||
<div class="stat-row">
|
||||
<span>{"Best APY:"}</span>
|
||||
<span class="text-success">{"125%"}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>{"Active Farms:"}</span>
|
||||
<span>{"85"}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>{"Total Staked:"}</span>
|
||||
<span>{"$450M"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="feature-card text-center fade-in animate">
|
||||
<div class="feature-icon mx-auto">
|
||||
{"🏦"}
|
||||
</div>
|
||||
<h5>{"Lending & Borrowing"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Lend your assets to earn interest or borrow against your collateral with competitive rates."}
|
||||
</p>
|
||||
<div class="protocol-stats">
|
||||
<div class="stat-row">
|
||||
<span>{"Supply APY:"}</span>
|
||||
<span class="text-success">{"3.2% - 12%"}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>{"Borrow APY:"}</span>
|
||||
<span class="text-info">{"5.8% - 18%"}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>{"Total Supplied:"}</span>
|
||||
<span>{"$1.2B"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Live pools and orderbook
|
||||
<section class="section section-alt" id="pools">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Live Market Data"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Real-time liquidity pools and order book data"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="fade-in animate">
|
||||
<InteractiveLiquidityPool />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="fade-in animate">
|
||||
<LiveOrderbook />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Section
|
||||
content_path="defi/features"
|
||||
animation_class="fade-in"
|
||||
/>
|
||||
|
||||
// Advanced DeFi strategies
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"DeFi Strategies"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Sophisticated tools for maximizing your DeFi returns"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"🔄"}
|
||||
</div>
|
||||
<h5>{"Auto-Compounding"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Automatically reinvest your yields to maximize compound returns across all positions."}
|
||||
</p>
|
||||
<div class="strategy-demo">
|
||||
<div class="compound-visualization">
|
||||
<div class="compound-layer layer-1">
|
||||
<span>{"Initial: $1,000"}</span>
|
||||
</div>
|
||||
<div class="compound-layer layer-2">
|
||||
<span>{"+ Yield: $120"}</span>
|
||||
</div>
|
||||
<div class="compound-layer layer-3">
|
||||
<span>{"Compounded: $1,134"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"⚖️"}
|
||||
</div>
|
||||
<h5>{"Portfolio Rebalancing"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Maintain optimal portfolio allocation with automated rebalancing strategies."}
|
||||
</p>
|
||||
<div class="strategy-demo">
|
||||
<div class="rebalance-chart">
|
||||
<div class="allocation-bar">
|
||||
<div class="allocation-segment eth" style="width: 40%">{"ETH 40%"}</div>
|
||||
<div class="allocation-segment btc" style="width: 35%">{"BTC 35%"}</div>
|
||||
<div class="allocation-segment stable" style="width: 25%">{"USDC 25%"}</div>
|
||||
</div>
|
||||
<div class="rebalance-arrow">{"⟲"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"🛡️"}
|
||||
</div>
|
||||
<h5>{"Risk Management"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Advanced risk controls with stop-loss, take-profit, and position sizing automation."}
|
||||
</p>
|
||||
<div class="strategy-demo">
|
||||
<div class="risk-gauge">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-fill" style="--risk-level: 35%"></div>
|
||||
<div class="gauge-label">{"Risk: Low"}</div>
|
||||
</div>
|
||||
<div class="risk-metrics">
|
||||
<div class="risk-metric">
|
||||
<span>{"Max Drawdown:"}</span>
|
||||
<span class="text-success">{"5.2%"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Cross-chain capabilities
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Cross-Chain DeFi"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Access opportunities across multiple blockchain networks"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="network-grid fade-in animate">
|
||||
<div class="network-card ethereum">
|
||||
<div class="network-icon">{"Ξ"}</div>
|
||||
<div class="network-name">{"Ethereum"}</div>
|
||||
<div class="network-stats">
|
||||
<div>{"TVL: $1.2B"}</div>
|
||||
<div>{"APY: 8.5%"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="network-card polygon">
|
||||
<div class="network-icon">{"⬟"}</div>
|
||||
<div class="network-name">{"Polygon"}</div>
|
||||
<div class="network-stats">
|
||||
<div>{"TVL: $450M"}</div>
|
||||
<div>{"APY: 12.3%"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="network-card bsc">
|
||||
<div class="network-icon">{"🔶"}</div>
|
||||
<div class="network-name">{"BSC"}</div>
|
||||
<div class="network-stats">
|
||||
<div>{"TVL: $320M"}</div>
|
||||
<div>{"APY: 15.7%"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="network-card avalanche">
|
||||
<div class="network-icon">{"🔺"}</div>
|
||||
<div class="network-name">{"Avalanche"}</div>
|
||||
<div class="network-stats">
|
||||
<div>{"TVL: $280M"}</div>
|
||||
<div>{"APY: 18.2%"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="fade-in animate">
|
||||
<h4>{"Seamless Cross-Chain Operations"}</h4>
|
||||
<p class="text-muted mb-4">
|
||||
{"Our advanced bridge technology enables instant asset transfers and yield optimization across all major blockchain networks."}
|
||||
</p>
|
||||
|
||||
<div class="cross-chain-features">
|
||||
<div class="feature-item">
|
||||
<div class="feature-check">{"✓"}</div>
|
||||
<span>{"Instant cross-chain swaps"}</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-check">{"✓"}</div>
|
||||
<span>{"Unified portfolio management"}</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-check">{"✓"}</div>
|
||||
<span>{"Automated yield optimization"}</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-check">{"✓"}</div>
|
||||
<span>{"Gas fee optimization"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// DeFi statistics
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"DeFi Platform Statistics"}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="text-center fade-in animate">
|
||||
<div class="stat-number counter">{"2400000000"}</div>
|
||||
<p class="stat-label">{"Total Value Locked (USD)"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="text-center fade-in animate">
|
||||
<div class="stat-number counter">{"89000"}</div>
|
||||
<p class="stat-label">{"Active DeFi Users"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="text-center fade-in animate">
|
||||
<div class="stat-number">{"18.5%"}</div>
|
||||
<p class="stat-label">{"Average APY"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="text-center fade-in animate">
|
||||
<div class="stat-number counter">{"1200000000"}</div>
|
||||
<p class="stat-label">{"24h Trading Volume (USD)"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Call to action
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<div class="fade-in animate">
|
||||
<h2 class="section-title">{"Ready to Maximize Your DeFi Returns?"}</h2>
|
||||
<p class="section-subtitle">
|
||||
{"Join thousands of users earning passive income through our advanced DeFi protocols"}
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<a href="#register" class="btn btn-primary btn-lg me-3">
|
||||
{"Start Earning"}
|
||||
</a>
|
||||
<Link<Route> to={Route::Platform} classes="btn btn-outline-primary btn-lg">
|
||||
{"Explore Platform"}
|
||||
</Link<Route>>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
}
|
||||
}
|
||||
265
website/src/pages/home.rs
Normal file
265
website/src/pages/home.rs
Normal file
@@ -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! {
|
||||
<>
|
||||
<Hero
|
||||
content_path="home/hero"
|
||||
cta_text="Get Started"
|
||||
cta_link="#explore"
|
||||
secondary_cta_text="Learn More"
|
||||
secondary_cta_link="#about"
|
||||
/>
|
||||
|
||||
<Section
|
||||
content_path="home/about"
|
||||
animation_class="fade-in"
|
||||
id="about"
|
||||
/>
|
||||
|
||||
|
||||
// Platform preview section with interactive demos
|
||||
<section class="section section-alt" id="explore">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Zanzibar Digital Freezone Ecosystem"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Three powerful platforms enabling digital entity formation and asset trading in Zanzibar"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-lg-6 slide-in-left animate">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
{"🏢"}
|
||||
</div>
|
||||
<h3>{"Platform"}</h3>
|
||||
<p class="text-muted mb-4">
|
||||
{"Establish your digital legal entity and residence in Zanzibar. Manage, administer and govern your digital presence with full regulatory compliance."}
|
||||
</p>
|
||||
<div class="feature-highlights mb-4">
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Digital entity formation in Zanzibar"}</span>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Digital residence establishment"}</span>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Regulatory compliance & reporting"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link<Route> to={Route::Platform} classes="btn btn-outline-primary">
|
||||
{"Explore Platform"}
|
||||
</Link<Route>>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 slide-in-right animate">
|
||||
<PlatformWireframe />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-lg-6 order-lg-2 slide-in-right animate">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
{"🛒"}
|
||||
</div>
|
||||
<h3>{"Marketplace"}</h3>
|
||||
<p class="text-muted mb-4">
|
||||
{"Trade digital assets within the Zanzibar Digital Freezone. Access global markets while operating under favorable regulatory frameworks."}
|
||||
</p>
|
||||
<div class="feature-highlights mb-4">
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Digital asset trading within freezone"}</span>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Regulatory compliant transactions"}</span>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Global market access"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link<Route> to={Route::Marketplace} classes="btn btn-outline-primary">
|
||||
{"Explore Marketplace"}
|
||||
</Link<Route>>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 order-lg-1 slide-in-left animate">
|
||||
<div class="marketplace-preview">
|
||||
<MarketplaceFlow />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 slide-in-left animate">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
{"💰"}
|
||||
</div>
|
||||
<h3>{"DeFi"}</h3>
|
||||
<p class="text-muted mb-4">
|
||||
{"Advanced DeFi capabilities for digital asset trading within the Zanzibar Digital Freezone. Leverage, stake, and earn with regulatory clarity."}
|
||||
</p>
|
||||
<div class="feature-highlights mb-4">
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Freezone-compliant DeFi protocols"}</span>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Digital asset yield generation"}</span>
|
||||
</div>
|
||||
<div class="highlight-item">
|
||||
<span class="highlight-icon">{"✓"}</span>
|
||||
<span>{"Regulated trading environment"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link<Route> to={Route::DeFi} classes="btn btn-outline-primary">
|
||||
{"Start Trading"}
|
||||
</Link<Route>>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 slide-in-right animate">
|
||||
<InteractiveLiquidityPool />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Why choose Freezone section
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Why Choose Zanzibar Digital Freezone?"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Experience the future of digital entity formation and asset trading with regulatory clarity"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card text-center fade-in animate">
|
||||
<div class="feature-icon mx-auto">
|
||||
{"🔒"}
|
||||
</div>
|
||||
<h5>{"Secure & Trustless"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Built on blockchain technology with bank-grade security, multi-signature wallets, and complete transparency in all operations."}
|
||||
</p>
|
||||
<div class="security-indicators">
|
||||
<div class="indicator">
|
||||
<span class="indicator-icon">{"🛡️"}</span>
|
||||
<span>{"Multi-sig security"}</span>
|
||||
</div>
|
||||
<div class="indicator">
|
||||
<span class="indicator-icon">{"🔍"}</span>
|
||||
<span>{"Audited smart contracts"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card text-center fade-in animate">
|
||||
<div class="feature-icon mx-auto">
|
||||
{"⚡"}
|
||||
</div>
|
||||
<h5>{"Lightning Fast"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Experience instant transactions and real-time updates across all platforms with sub-second settlement times."}
|
||||
</p>
|
||||
<div class="performance-metrics">
|
||||
<div class="metric">
|
||||
<span class="metric-value">{"<1s"}</span>
|
||||
<span class="metric-label">{"Settlement"}</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-value">{"99.9%"}</span>
|
||||
<span class="metric-label">{"Uptime"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card text-center fade-in animate">
|
||||
<div class="feature-icon mx-auto">
|
||||
{"🌍"}
|
||||
</div>
|
||||
<h5>{"Global Access"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Access your digital assets and services from anywhere in the world, 24/7, with support for multiple currencies and languages."}
|
||||
</p>
|
||||
<div class="global-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-value">{"150+"}</span>
|
||||
<span class="stat-label">{"Countries"}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">{"24/7"}</span>
|
||||
<span class="stat-label">{"Support"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Call to action
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<div class="fade-in animate">
|
||||
<h2 class="section-title">{"Ready to Establish Your Digital Presence?"}</h2>
|
||||
<p class="section-subtitle">
|
||||
{"Join the Zanzibar Digital Freezone and unlock global opportunities with regulatory clarity"}
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<a href="#register" class="btn btn-primary btn-lg me-3">
|
||||
{"Establish Your Entity"}
|
||||
</a>
|
||||
<a href="#learn-more" class="btn btn-outline-primary btn-lg">
|
||||
{"Learn More"}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="cta-features mt-4">
|
||||
<div class="cta-feature">
|
||||
<span class="cta-icon">{"✓"}</span>
|
||||
<span>{"Digital entity formation"}</span>
|
||||
</div>
|
||||
<div class="cta-feature">
|
||||
<span class="cta-icon">{"✓"}</span>
|
||||
<span>{"Regulatory compliance"}</span>
|
||||
</div>
|
||||
<div class="cta-feature">
|
||||
<span class="cta-icon">{"✓"}</span>
|
||||
<span>{"Global market access"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
}
|
||||
}
|
||||
201
website/src/pages/marketplace.rs
Normal file
201
website/src/pages/marketplace.rs
Normal file
@@ -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
|
||||
<section class="hero-section hero-marketplace">
|
||||
<div class="container">
|
||||
<div class="row align-items-center min-vh-100">
|
||||
<div class="col-lg-6 hero-content">
|
||||
<div class="fade-in animate">
|
||||
<h1 class="hero-title">{"Marketplace"}</h1>
|
||||
<p class="hero-subtitle">
|
||||
{"The future of business digitalization. Transform your real-world assets and services into digital tokens, enabling seamless global commerce within the Zanzibar Digital Freezone."}
|
||||
</p>
|
||||
<div class="hero-actions mt-4">
|
||||
<a href="#digitize" class="btn btn-primary btn-lg me-3">
|
||||
{"Digitize Assets"}
|
||||
</a>
|
||||
<a href="#features" class="btn btn-outline-primary btn-lg">
|
||||
{"Learn More"}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 slide-in-right animate">
|
||||
// Marketplace flow on the right side
|
||||
<div class="hero-marketplace-flow">
|
||||
<MarketplaceFlow />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Scroll indicator
|
||||
<div class="scroll-indicator">
|
||||
<div class="scroll-arrow"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Real world asset digitalization section
|
||||
<section class="section" id="digitize">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Digitalize Real World Assets"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Transform traditional assets into digital tokens for global accessibility, fractional ownership, and enhanced liquidity"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Real Estate - Left aligned
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-lg-6 fade-in animate">
|
||||
<div class="asset-showcase">
|
||||
<h3>{"Real Estate Tokenization"}</h3>
|
||||
<p class="lead">
|
||||
{"Tokenize eco-friendly developments, renewable energy projects, and sustainable infrastructure that benefits local communities while preserving Zanzibar's natural beauty."}
|
||||
</p>
|
||||
<ul class="feature-list">
|
||||
<li>{"✓ Solar-powered eco-resorts with community ownership"}</li>
|
||||
<li>{"✓ Mangrove restoration project funding"}</li>
|
||||
<li>{"✓ Sustainable housing cooperatives"}</li>
|
||||
<li>{"✓ Ocean conservation infrastructure"}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 fade-in animate">
|
||||
<div class="asset-visual">
|
||||
<div class="tokenization-demo">
|
||||
<div class="property-card">
|
||||
<div class="property-image"></div>
|
||||
<div class="property-details">
|
||||
<h5>{"Coral Reef Eco-Resort"}</h5>
|
||||
<p>{"$1.2M Total Value • $500 per token • 2400 tokens available"}</p>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width: 78%"></div>
|
||||
</div>
|
||||
<small>{"78% Funded • Carbon Negative"}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Services - Right aligned
|
||||
<div class="row align-items-center mb-5">
|
||||
<div class="col-lg-6 order-lg-2 fade-in animate">
|
||||
<div class="asset-showcase">
|
||||
<h3>{"Service Digitalization"}</h3>
|
||||
<p class="lead">
|
||||
{"Transform professional services into smart contract-powered digital offerings with automated execution, milestone tracking, and global marketplace access."}
|
||||
</p>
|
||||
<ul class="feature-list">
|
||||
<li>{"✓ Educational program licensing"}</li>
|
||||
<li>{"✓ Healthcare service contracts"}</li>
|
||||
<li>{"✓ Training and certification services"}</li>
|
||||
<li>{"✓ Professional consulting packages"}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 order-lg-1 fade-in animate">
|
||||
<div class="asset-visual">
|
||||
<div class="service-demo">
|
||||
<div class="service-card">
|
||||
<div class="service-provider">
|
||||
<div class="provider-avatar"></div>
|
||||
<div class="provider-info">
|
||||
<h6>{"Ocean Conservation Consultancy"}</h6>
|
||||
<p>{"$2,500/month • 4.8★ • 89 projects completed"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-contract">
|
||||
<div class="contract-status active">{"Active Program"}</div>
|
||||
<div class="milestones">
|
||||
<div class="milestone completed">{"✓ Community Assessment"}</div>
|
||||
<div class="milestone active">{"⏳ Training Deployment"}</div>
|
||||
<div class="milestone pending">{"○ Impact Measurement"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
// Software & Shares - Left aligned
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 fade-in animate">
|
||||
<div class="asset-showcase">
|
||||
<h3>{"Company Share Tokenization"}</h3>
|
||||
<p class="lead">
|
||||
{"Tokenize company shares and equity stakes for enhanced liquidity, fractional ownership, and global investor access across diverse industries and business models."}
|
||||
</p>
|
||||
<ul class="feature-list">
|
||||
<li>{"✓ Agricultural cooperative equity tokens"}</li>
|
||||
<li>{"✓ Environmental project shares"}</li>
|
||||
<li>{"✓ Technology startup equity"}</li>
|
||||
<li>{"✓ Industry-specific investment tokens"}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 fade-in animate">
|
||||
<div class="asset-visual">
|
||||
<div class="digital-assets-demo">
|
||||
<div class="asset-grid">
|
||||
<div class="digital-asset">
|
||||
<div class="asset-type">{"Cooperative Shares"}</div>
|
||||
<h6>{"Zanzibar Spice Farmers Co-op"}</h6>
|
||||
<p>{"1,200 shares • $75 each • Fair Trade Certified"}</p>
|
||||
</div>
|
||||
<div class="digital-asset">
|
||||
<div class="asset-type">{"Carbon Credits"}</div>
|
||||
<h6>{"Mangrove Restoration Project"}</h6>
|
||||
<p>{"5,000 credits • $12 each • Verified Impact"}</p>
|
||||
</div>
|
||||
<div class="digital-asset">
|
||||
<div class="asset-type">{"FinTech Startup"}</div>
|
||||
<h6>{"Community Banking Platform"}</h6>
|
||||
<p>{"Series A • $50 per token • Financial Inclusion"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Call to action
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<div class="fade-in animate">
|
||||
<h2 class="section-title">{"Ready to Join the Digital Asset Economy?"}</h2>
|
||||
<p class="section-subtitle">
|
||||
{"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."}
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<a href="#register" class="btn btn-primary btn-lg me-3">
|
||||
{"Start Digitalization"}
|
||||
</a>
|
||||
<Link<Route> to={Route::Platform} classes="btn btn-outline-primary btn-lg">
|
||||
{"Explore Platform"}
|
||||
</Link<Route>>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
}
|
||||
}
|
||||
11
website/src/pages/mod.rs
Normal file
11
website/src/pages/mod.rs
Normal file
@@ -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;
|
||||
27
website/src/pages/not_found.rs
Normal file
27
website/src/pages/not_found.rs
Normal file
@@ -0,0 +1,27 @@
|
||||
use yew::prelude::*;
|
||||
use yew_router::prelude::*;
|
||||
use crate::app::Route;
|
||||
|
||||
#[function_component(NotFound)]
|
||||
pub fn not_found() -> Html {
|
||||
html! {
|
||||
<section class="hero-section d-flex align-items-center">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6 text-center">
|
||||
<div class="fade-in">
|
||||
<h1 class="display-1 text-primary mb-4">{"404"}</h1>
|
||||
<h2 class="mb-4">{"Page Not Found"}</h2>
|
||||
<p class="text-muted mb-4">
|
||||
{"The page you're looking for doesn't exist in the freezone. Let's get you back on track."}
|
||||
</p>
|
||||
<Link<Route> to={Route::Home} classes="btn btn-primary btn-lg">
|
||||
{"Return Home"}
|
||||
</Link<Route>>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
381
website/src/pages/platform.rs
Normal file
381
website/src/pages/platform.rs
Normal file
@@ -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! {
|
||||
<>
|
||||
<Hero
|
||||
content_path="platform/hero"
|
||||
cta_text="Launch Platform"
|
||||
cta_link="#get-started"
|
||||
secondary_cta_text="View Demo"
|
||||
secondary_cta_link="#demo"
|
||||
background_variant="platform"
|
||||
/>
|
||||
|
||||
// Interactive platform demo
|
||||
<section class="section section-alt" id="demo">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Platform Interface Preview"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Experience the intuitive dashboard that powers digital business management"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-10">
|
||||
<div class="fade-in animate">
|
||||
<PlatformWireframe />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Core platform features
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Core Platform Features"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Everything you need to manage and govern your digital business empire"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-5">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"🏢"}
|
||||
</div>
|
||||
<h5>{"Company Formation"}</h5>
|
||||
<p class="text-muted">
|
||||
{"Establish digital companies with complete legal framework and automated compliance."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"⚖️"}
|
||||
</div>
|
||||
<h5>{"Legal Framework"}</h5>
|
||||
<p class="text-muted">
|
||||
{"Built-in legal structures with smart contract enforcement and dispute resolution."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"💰"}
|
||||
</div>
|
||||
<h5>{"Treasury Management"}</h5>
|
||||
<p class="text-muted">
|
||||
{"Advanced treasury operations with multi-signature wallets and automated accounting."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"🗳️"}
|
||||
</div>
|
||||
<h5>{"Governance Tools"}</h5>
|
||||
<p class="text-muted">
|
||||
{"Democratic decision-making with voting mechanisms and proposal systems."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 mb-5">
|
||||
<div class="interactive-demo slide-in-right animate">
|
||||
<h5 class="text-center mb-4">{"Live Company Dashboard"}</h5>
|
||||
<div class="company-dashboard">
|
||||
<div class="dashboard-header">
|
||||
<div class="company-info">
|
||||
<div class="company-logo"></div>
|
||||
<div class="company-details">
|
||||
<h6>{"TechCorp Digital Ltd."}</h6>
|
||||
<span class="company-status active">{"Active"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-actions">
|
||||
<button class="btn-dashboard primary">{"New Proposal"}</button>
|
||||
<button class="btn-dashboard secondary">{"Treasury"}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-metrics">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{"$2.4M"}</div>
|
||||
<div class="metric-label">{"Treasury Balance"}</div>
|
||||
<div class="metric-change positive">{"+12.5%"}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{"156"}</div>
|
||||
<div class="metric-label">{"Shareholders"}</div>
|
||||
<div class="metric-change positive">{"+8"}</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{"23"}</div>
|
||||
<div class="metric-label">{"Active Proposals"}</div>
|
||||
<div class="metric-change neutral">{"±0"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-content">
|
||||
<div class="content-section">
|
||||
<h6>{"Recent Activity"}</h6>
|
||||
<div class="activity-list">
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon proposal"></div>
|
||||
<div class="activity-text">{"New proposal: Q4 Budget Allocation"}</div>
|
||||
<div class="activity-time">{"2h ago"}</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon treasury"></div>
|
||||
<div class="activity-text">{"Treasury deposit: $50,000 USDC"}</div>
|
||||
<div class="activity-time">{"4h ago"}</div>
|
||||
</div>
|
||||
<div class="activity-item">
|
||||
<div class="activity-icon vote"></div>
|
||||
<div class="activity-text">{"Proposal passed: Marketing Budget"}</div>
|
||||
<div class="activity-time">{"1d ago"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Section
|
||||
content_path="platform/features"
|
||||
animation_class="fade-in"
|
||||
background_class="section section-alt"
|
||||
/>
|
||||
|
||||
// Advanced governance section
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Advanced Governance"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Sophisticated tools for democratic business management and stakeholder engagement"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"📊"}
|
||||
</div>
|
||||
<h5>{"Proposal System"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Create, discuss, and vote on business proposals with transparent tracking and automated execution."}
|
||||
</p>
|
||||
<div class="governance-demo">
|
||||
<div class="proposal-item">
|
||||
<div class="proposal-title">{"Q4 Marketing Budget"}</div>
|
||||
<div class="proposal-status passing">{"Passing"}</div>
|
||||
<div class="vote-bar">
|
||||
<div class="vote-progress" style="width: 78%"></div>
|
||||
</div>
|
||||
<div class="vote-stats">
|
||||
<span>{"78% Yes"}</span>
|
||||
<span>{"22% No"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"👥"}
|
||||
</div>
|
||||
<h5>{"Stakeholder Management"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Manage shareholders, voting rights, and stake distributions with complete transparency."}
|
||||
</p>
|
||||
<div class="stakeholder-demo">
|
||||
<div class="stakeholder-chart">
|
||||
<div class="chart-segment" style="--percentage: 35%; --color: var(--pastel-blue)"></div>
|
||||
<div class="chart-segment" style="--percentage: 25%; --color: var(--pastel-purple)"></div>
|
||||
<div class="chart-segment" style="--percentage: 20%; --color: var(--pastel-green)"></div>
|
||||
<div class="chart-segment" style="--percentage: 20%; --color: var(--pastel-pink)"></div>
|
||||
</div>
|
||||
<div class="chart-legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: var(--pastel-blue)"></div>
|
||||
<span>{"Founders 35%"}</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: var(--pastel-purple)"></div>
|
||||
<span>{"Investors 25%"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="feature-card fade-in animate">
|
||||
<div class="feature-icon">
|
||||
{"🔐"}
|
||||
</div>
|
||||
<h5>{"Multi-Sig Treasury"}</h5>
|
||||
<p class="text-muted mb-4">
|
||||
{"Secure treasury management with multi-signature requirements and automated compliance."}
|
||||
</p>
|
||||
<div class="multisig-demo">
|
||||
<div class="transaction-item">
|
||||
<div class="tx-header">
|
||||
<span class="tx-amount">{"$100,000 USDC"}</span>
|
||||
<span class="tx-status pending">{"2/3 Signatures"}</span>
|
||||
</div>
|
||||
<div class="tx-description">{"Marketing Campaign Payment"}</div>
|
||||
<div class="signature-progress">
|
||||
<div class="signature signed">{"✓"}</div>
|
||||
<div class="signature signed">{"✓"}</div>
|
||||
<div class="signature pending">{"⏳"}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Integration ecosystem
|
||||
<section class="section section-alt">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Integration Ecosystem"}</h2>
|
||||
<p class="section-subtitle fade-in animate">
|
||||
{"Seamlessly connect with external services and blockchain networks"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="integration-card fade-in animate">
|
||||
<div class="integration-icon">{"🔗"}</div>
|
||||
<h6>{"Blockchain Networks"}</h6>
|
||||
<p class="small text-muted">{"Ethereum, Polygon, BSC, Avalanche"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="integration-card fade-in animate">
|
||||
<div class="integration-icon">{"💳"}</div>
|
||||
<h6>{"Payment Gateways"}</h6>
|
||||
<p class="small text-muted">{"Stripe, PayPal, Crypto payments"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="integration-card fade-in animate">
|
||||
<div class="integration-icon">{"📊"}</div>
|
||||
<h6>{"Analytics Tools"}</h6>
|
||||
<p class="small text-muted">{"Google Analytics, Mixpanel, Custom"}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="integration-card fade-in animate">
|
||||
<div class="integration-icon">{"🛡️"}</div>
|
||||
<h6>{"Security Services"}</h6>
|
||||
<p class="small text-muted">{"Multi-factor auth, KYC, AML"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Success metrics
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center mb-5">
|
||||
<h2 class="section-title fade-in animate">{"Platform Success Metrics"}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="text-center fade-in animate">
|
||||
<div class="stat-number counter">{"2850"}</div>
|
||||
<p class="stat-label">{"Active Companies"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="text-center fade-in animate">
|
||||
<div class="stat-number counter">{"45000"}</div>
|
||||
<p class="stat-label">{"Platform Users"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="text-center fade-in animate">
|
||||
<div class="stat-number counter">{"1200000000"}</div>
|
||||
<p class="stat-label">{"Assets Under Management (USD)"}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-6 mb-4">
|
||||
<div class="text-center fade-in animate">
|
||||
<div class="stat-number counter">{"12500"}</div>
|
||||
<p class="stat-label">{"Governance Proposals"}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// Call to action
|
||||
<section class="section section-alt" id="get-started">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<div class="fade-in animate">
|
||||
<h2 class="section-title">{"Ready to Launch Your Digital Company?"}</h2>
|
||||
<p class="section-subtitle">
|
||||
{"Join the future of business management with our comprehensive platform"}
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<a href="#register" class="btn btn-primary btn-lg me-3">
|
||||
{"Start Building"}
|
||||
</a>
|
||||
<Link<Route> to={Route::Marketplace} classes="btn btn-outline-primary btn-lg">
|
||||
{"Explore Marketplace"}
|
||||
</Link<Route>>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
}
|
||||
}
|
||||
33
website/src/utils/markdown.rs
Normal file
33
website/src/utils/markdown.rs
Normal file
@@ -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::<Vec<String>>()
|
||||
.join(" ");
|
||||
|
||||
(title, description)
|
||||
}
|
||||
31
website/src/utils/mod.rs
Normal file
31
website/src/utils/mod.rs
Normal file
@@ -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(),
|
||||
}
|
||||
}
|
||||
557
website/static/js/animations.js
Normal file
557
website/static/js/animations.js
Normal file
@@ -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 = '<div class="text-center text-muted mb-2">Live Orderbook</div>';
|
||||
}
|
||||
|
||||
const order = orders[currentIndex];
|
||||
const orderRow = document.createElement('div');
|
||||
orderRow.className = `order-row order-${order.type}`;
|
||||
orderRow.innerHTML = `
|
||||
<span>$${order.price}</span>
|
||||
<span>${order.amount} BTC</span>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<div class="pool-token">
|
||||
<div class="token-icon" style="background: var(--pastel-blue);"></div>
|
||||
<span>ETH: ${ethAmount}</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-success">${apr}% APR</div>
|
||||
</div>
|
||||
<div class="pool-token">
|
||||
<div class="token-icon" style="background: var(--pastel-green);"></div>
|
||||
<span>USDC: ${Number(usdcAmount).toLocaleString()}</span>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
updatePool();
|
||||
setInterval(updatePool, 5000);
|
||||
}
|
||||
|
||||
setupWireframeAnimations() {
|
||||
const wireframes = document.querySelectorAll('.platform-wireframe');
|
||||
wireframes.forEach(wireframe => {
|
||||
this.createWireframeContent(wireframe);
|
||||
});
|
||||
}
|
||||
|
||||
createWireframeContent(wireframe) {
|
||||
wireframe.innerHTML = `
|
||||
<div class="wireframe-header"></div>
|
||||
<div class="wireframe-content">
|
||||
<div class="wireframe-block"></div>
|
||||
<div class="wireframe-block"></div>
|
||||
<div class="wireframe-block"></div>
|
||||
<div class="wireframe-block"></div>
|
||||
</div>
|
||||
<div class="wireframe-content">
|
||||
<div class="wireframe-block" style="grid-column: 1 / -1; height: 40px;"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
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();
|
||||
3312
website/styles/main.css
Normal file
3312
website/styles/main.css
Normal file
File diff suppressed because it is too large
Load Diff
954
website/styles/main.scss
Normal file
954
website/styles/main.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user