Further styling and cleanups

docs/content/build-xdapp/quickstart.md

@@ -2,7 +2,7 @@
 sidebar_position: 1
 ---
 
-# First XDapp
+# My First XDapp
 
 This QuickStart guide will run through how to start an Omni XDApp (cross-chain decentralized app) in 5 minutes.
 

docs/content/build-xdapp/showcase-dapps.md

@@ -2,17 +2,37 @@
 sidebar_position: 1
 ---
 
+import GitHubCodeBlock from '@site/src/components/GitHubCodeBlock/GitHubCodeBlock';
+
 # Showcase
 
-TODO
 
 
-Awesome Omni Examples and Templates
+## Cross-stake
+
+ An example xchain staking app that allows ERC20 deposits on multiple chains.
+ https://github.com/kevinhalliday/xstake
+
+ <GitHubCodeBlock url="https://github.com/kevinhalliday/xstake/blob/main/src/XStaker.sol"/>
+
+
+## Ethereum to Omni bridge
+
+OMNI is an ERC-20 token on Layer 1, and we understand that developers and users need a seamless way to transfer it to the Omni EVM for gas payments. To address this, we've developed a bridge that utilizes the Omni protocol, ensuring smooth and secure token transfers.
+
+
+### Omni to Ethereum
+<GitHubCodeBlock url="https://github.com/omni-network/omni/blob/main/contracts/core/src/token/OmniBridgeL1.sol"/>
+
+### Ethereum to Omni
+<GitHubCodeBlock url="https://github.com/omni-network/omni/blob/main/contracts/core/src/token/OmniBridgeNative.sol" />
+
 
-See the Awesome Omni repo for a list of Omni examples and templates that you can use to get started with your Omni projects.
+## What else? 
 
-- Cross-stake
-- Bridge
+:::tip
+Get inspired by the following ideas. Looking forward to seeing your PRs on https://github.com/omni-network/awesome-omni
+:::
 
 <div class="grid-wrapper">
   <div class="grid-rfp">

docs/content/build-xdapp/walkthrough.md

@@ -6,7 +6,7 @@ import GitHubCodeBlock from '@site/src/components/GitHubCodeBlock/GitHubCodeBloc
 
 # XDapp walkthrough
 
-Here's an example of a simple cross-chain contract set for setting and getting a string. This contract lets you send greetings from a rollup chain to a global storage contract deployed on Omni. Two main contracts are used in this example:
+Let's see what's happening under the hood. This contract lets you send greetings from a rollup chain to a global storage contract deployed on Omni. Two main contracts are used in this example:
 
 1. `Greeter` - A contract deployed on a rollup that sends greetings to the Omni EVM.
 2. `GreetingBook` - A contract deployed on the Omni EVM that stores greetings from all supported chains.
@@ -15,8 +15,6 @@ Here's an example of a simple cross-chain contract set for setting and getting a
 
 <GitHubCodeBlock url="https://github.com/omni-network/hello-world-template/blob/48ff2f5277b4c144802c1ffa894a03ac071f02fc/src/Greeter.sol" />
 
-### Walkthrough
-
 Let's walk through this step by step.
 
 First, inherit from `XApp`.
@@ -53,8 +51,6 @@ function greet(string calldata greeting) external payable {
 
 <GitHubCodeBlock url="https://github.com/omni-network/hello-world-template/blob/eb02c55bc8ef92c09e7cb6e40420353e41e2841c/src/GreetingBook.sol" />
 
-### Walkthrough
-
 Similar to `Greeter`, we inherit from `XApp`.
 
 ```solidity

docs/website/docusaurus.config.ts

@@ -58,6 +58,11 @@ const config: Config = {
 
   themeConfig: {
     image: "img/omni-banner.png",
+    docs: {
+      sidebar: {
+        autoCollapseCategories: true,
+      },
+    },
     navbar: {
       title: 'Omni Developers',
       logo: {

docs/website/src/components/GitHubCodeBlock/GitHubCodeBlock.css

@@ -1,6 +1,8 @@
 .code-snippet-container {
     position: relative;
     display: block;
+    height: 200px; /* Set your desired height */
+    overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
 }
 
 .code-snippet-footer {

docs/website/src/components/HomepageFeatures/index.tsx

@@ -45,7 +45,7 @@ function Feature({title, Svg, description, link}: FeatureItem) {
     <div className={clsx('col col--4')}>
       <Link href={link}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img"/>
+        <Svg className="cta-img" role="img" viewBox="0 0 500 500"/>
       </div>
       <div className="text--center padding-horiz--md">
           <Heading as="h3" className="cta">{title}</Heading>

docs/website/src/components/IntroVideo/index.tsx

@@ -37,9 +37,10 @@ export default function VideoSequence() {
   // }, []);
 
   return (
-    <div className={styles.videoContainer}>
+    // <div className={styles.videoContainer}>
+    <div>
 
-      <img src='img/omni-intro.png'/>
+      <img src='img/omni-intro.png' width="90%"/>
 
       {/* <video ref={video1Ref} className={styles.video} controls style={{ display: 'block' }}>
         <source src="/img/OmniDocsAnim.mp4" type="video/mp4" />

docs/website/src/css/custom.css

@@ -35,13 +35,15 @@
   --ifm-cta-color: black;
   --ifm-link-color: #3e88ff;
   --ifm-navbar-link-hover-color: #3e88ff;
+  --ifm-footer-link-hover-color: #3e88ff;
+  --ifm-hero-background-color: #edf4ff;
   background-color: #ffffff;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
   --ifm-color-primary: #7eafff;
-  --ifm-color-primary-dark: #6285bc;
+  --ifm-color-primary-dark: #0d2143;
   --ifm-color-primary-darker: #8498b9;
   --ifm-color-primary-darkest: #afbfd8;
   --ifm-color-primary-light: #79cbcf;
@@ -56,6 +58,7 @@
   --ifm-menu-color-background-active: #0d2143;
   --ifm-menu-color-active: #606770;
   --ifm-cta-color: #e7ebeb;
+  --ifm-hero-background-color: #edf4ff;
   background-color: #00122f;
 }
 
@@ -178,14 +181,24 @@ figcaption {
   color: var(--ifm-cta-color);
 }
 
+.cta-img {
+  width: 30%;
+  height: auto;
+}
+
+.hero__title {
+  font-size: 2.5rem;
+}
+
 .hero__subtitle {
   font-size: 1.5rem;
   color: var(--ifm-heading-color);
 }
 
 .button.button--secondary {
-  color: var(--ifm-color-primary);
+  color: white;
   background-color: var(--ifm-color-primary-dark);
+  margin-top: 3%;
 }
 
 .table-of-contents__link--active {

docs/website/src/pages/index.tsx

@@ -38,7 +38,7 @@ function HomepageHeader() {
 
 
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx('hero', styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title">
         Cross-Chain Liquidity at your fingertips