Skip to content

Commit e0b3329

Browse files
nud3lnud3l
committed
docs: update landing page
1 parent 55f1170 commit e0b3329

File tree

2 files changed

+89
-32
lines changed

2 files changed

+89
-32
lines changed

‎docs/docs/learn/introduction/index.mdx‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import styles from "./index.module.css";
1515
</div>
1616
</div>
1717

18-
## What is BOB?
18+
## Why BOB?
1919

2020
BOB is a new type of Bitcoin-secured blockchain: a Hybrid L2. Hybrid L2s inherit security from Bitcoin, as the most secure and decentralized network.
2121

@@ -24,53 +24,56 @@ With BOB's Hybrid L2 design we strive to completely change the way BTC is used i
2424
- **Today**: deposit BTC into centralized exchanges or wrap to a dozen of other chains via multisig bridges.
2525
- **The Hybrid future**: Everyone deposits assets into a BTC-secured platform that has access to native BTC liquidity… because everyone is OK to trust Bitcoin.
2626

27-
2827
### Bitcoin Security
2928

30-
Security is key to unlock Bitcoin liquidity in DeFi. The BOB Hybrid L2 in its final form will inherit Bitcoin security and support trust-minimized BTC deposits and withdrawals. While native ZK verification on Bitcoin requires a fork, BitVM allows us to create optimistic rollups and bridges with the tools we have today. Unlike multisig bridges and federated sidechains (t-of-n = honest majority), BitVM remains secure even with just a single honest node (1-of-n). For more details, see the [BitVM2 paper](https://bitvm.org/bitvm_bridge.pdf) co-authored by researchers from ZeroSync, BOB, TU Vienna and others.
29+
Security is essential for Bitcoin liquidity in DeFi.
30+
BOB Hybrid L2 will inherit Bitcoin's security using Bitcoin finality through BTC staking and a native BTC bridge powered by BitVM.
31+
BitVM enables much more secure BTC bridges without requiring a Bitcoin fork.
32+
33+
Learn more in the [BitVM2 paper](https://bitvm.org/bitvm_bridge.pdf).
3134

3235
### Ethereum Liquidity
3336

34-
Network effects, liquidity, and accessibility are key to a successful DeFi ecosystem. This Ethereum's super power.To harness the best of both worlds, BOB will run a trust-minimized Ethereum bridge, providing ETH users with a seamless DeFi experience.
35-
This "Hybrid" bridge functions like ETH L2 optimistic bridges but is uniquely powered by Bitcoin finality. An ETH L2 bridge waits for L2 finality on Ethereum. The Hybrid bridge instead checks for Bitcoin finality. In simple terms: ETH and ERC-20s deposited to BOB are secured by Bitcoin.
37+
BOB leverages Ethereum's network effects and liquidity while providing a trust-minimized bridge for ETH users.
38+
Our unique "Hybrid" bridge uses Bitcoin finality instead of Ethereum L2 finality, ensuring all assets on BOB are secured by Bitcoin's robust security model.
3639

3740
Learn more in the [BOB: The Hybrid L2 whitepaper](https://docs.gobob.xyz/whitepaper.pdf).
3841

3942
## Use BOB
4043

4144
<div className="row">
4245
<div className="col col--4">
43-
<div className={styles.card}>
46+
<div className={`${styles.card} ${styles.cardHover}`}>
4447
<div className="card__header">
4548
<h4>Setup your Wallet</h4>
4649
</div>
4750
<div className="card__body">
48-
<a href="/learn/user-guides/getting-started">
49-
<button class="button button--lg button--primary button--block">Connect to BOB↗</button>
51+
<a className="button button--lg button--primary button--block" href="/learn/user-guides/getting-started.mdx">
52+
Connect to BOB
5053
</a>
5154
</div>
5255
</div>
5356
</div>
5457
<div className="col col--4">
55-
<div className={styles.card}>
58+
<div className={`${styles.card} ${styles.cardHover}`}>
5659
<div className="card__header">
5760
<h4>Add funds to your Wallet</h4>
5861
</div>
5962
<div className="card__body">
60-
<a href="/learn/user-guides/onboard-to-bob">
61-
<button class="button button--lg button--primary button--block">Bridge to BOB ↗</button>
63+
<a className="button button--lg button--primary button--block" href="/learn/user-guides/onboard-to-bob.mdx">
64+
Bridge to BOB
6265
</a>
6366
</div>
6467
</div>
6568
</div>
6669
<div className="col col--4">
67-
<div className={styles.card}>
70+
<div className={`${styles.card} ${styles.cardHover}`}>
6871
<div className="card__header">
6972
<h4>Stake your Bitcoin</h4>
7073
</div>
7174
<div className="card__body">
72-
<a href="/learn/user-guides/bob-stake">
73-
<button class="button button--lg button--primary button--block">Stake BTC ↗</button>
75+
<a className="button button--lg button--primary button--block" href="/learn/user-guides/bob-stake.mdx">
76+
Stake BTC
7477
</a>
7578
</div>
7679
</div>
@@ -81,37 +84,37 @@ Learn more in the [BOB: The Hybrid L2 whitepaper](https://docs.gobob.xyz/whitepa
8184

8285
<div className="row">
8386
<div className="col col--4">
84-
<div className={styles.card}>
87+
<div className={`${styles.card} ${styles.cardHover}`}>
8588
<div className="card__header">
8689
<h4>Deploy a Smart Contract</h4>
8790
</div>
8891
<div className="card__body">
89-
<a href="/learn/builder-guides/hello-bitcoin">
90-
<button class="button button--lg button--secondary button--block">Hello Bitcoin ↗</button>
92+
<a className="button button--lg button--secondary button--block" href="/learn/builder-guides/hello-bitcoin.mdx">
93+
Hello Bitcoin
9194
</a>
9295
</div>
9396
</div>
9497
</div>
9598
<div className="col col--4">
96-
<div className={styles.card}>
99+
<div className={`${styles.card} ${styles.cardHover}`}>
97100
<div className="card__header">
98101
<h4>BTC Onramp in your App</h4>
99102
</div>
100103
<div className="card__body">
101-
<a href="/learn/builder-guides/gateway">
102-
<button class="button button--lg button--secondary button--block">BOB Gateway ↗</button>
104+
<a className="button button--lg button--secondary button--block" href="/learn/builder-guides/gateway">
105+
BOB Gateway
103106
</a>
104107
</div>
105108
</div>
106109
</div>
107110
<div className="col col--4">
108-
<div className={styles.card}>
111+
<div className={`${styles.card} ${styles.cardHover}`}>
109112
<div className="card__header">
110113
<h4>Start a Full Node</h4>
111114
</div>
112115
<div className="card__body">
113-
<a href="/learn/builder-guides/full-node">
114-
<button class="button button--lg button--secondary button--block">Run a Full Node ↗</button>
116+
<a className="button button--lg button--secondary button--block" href="/learn/builder-guides/full-node.mdx">
117+
Run a Full Node
115118
</a>
116119
</div>
117120
</div>

‎docs/docs/learn/introduction/index.module.css‎

Lines changed: 63 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,71 @@
44
*/
55

66
.hero {
7-
padding: auto;
8-
margin-top: 5rem;
9-
margin-right: 0;
10-
margin-bottom: 5rem;
11-
background-color: var(--bob-background);
7+
padding: 2rem 0;
8+
position: relative;
9+
overflow: hidden;
10+
}
11+
12+
.hero__subtitle {
13+
font-size: 1.5rem;
14+
max-width: 800px;
15+
margin: 0;
16+
color: var(--ifm-color-primary);
1217
}
1318

1419
.card {
15-
margin: 1rem;
16-
padding: 1rem;
17-
border-radius: 0.5rem;
18-
background-color: var(--ifm-background-surface-color);
20+
height: 100%;
21+
display: flex;
22+
flex-direction: column;
23+
transition: transform 0.2s ease-in-out;
24+
border-radius: 8px;
1925
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
26+
background: var(--ifm-card-background-color);
27+
border: 1px solid var(--ifm-color-emphasis-200);
28+
}
29+
30+
.cardHover:hover {
31+
transform: translateY(-5px);
32+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
33+
}
34+
35+
.card__header {
36+
padding: 1rem;
37+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
38+
}
39+
40+
.card__header h4 {
41+
margin: 0;
42+
color: var(--ifm-color-primary);
43+
text-align: center;
44+
}
45+
46+
.card__body {
47+
padding: 1rem;
48+
flex-grow: 1;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
min-height: 80px;
53+
}
54+
55+
.card__body a {
56+
width: 100%;
57+
height: 100%;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
}
62+
63+
.button--block {
64+
width: 100%;
65+
text-align: center;
66+
padding: 0.75rem 1.5rem;
67+
font-weight: 500;
68+
border-radius: 6px;
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
height: 100%;
73+
min-height: 50px;
2074
}

0 commit comments

Comments
 (0)