johnride/nationtech-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(sreez): Improve sreez landing page content and style

Browse Source
This commit is contained in:
jeangab 2024-03-01 14:48:05 -05:00
parent 315bff8a53
commit 17f794e93c
3 changed files with 91 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
nationtech-io/README.md
View File

@ -1,68 +1,10 @@
<picture> # Run the project
<source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)"> ```bash
<img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo"> rustup update
</picture> rustup default nightly
cargo install cargo-leptos
cargo leptos watch
# Leptos Starter Template # To be accessible on LAN
LEPTOS_SITE_ADDR=0.0.0.0:3000 cargo leptos watch
This is a template for use with the [Leptos](https://github.com/leptos-rs/leptos) web framework and the [cargo-leptos](https://github.com/akesson/cargo-leptos) tool.
## Creating your template repo
If you don't have `cargo-leptos` installed you can install it with
`cargo install cargo-leptos`
Then run
`cargo leptos new --git leptos-rs/start`
to generate a new project template (you will be prompted to enter a project name).
`cd {projectname}`
to go to your newly created project.
Of course, you should explore around the project structure, but the best place to start with your application code is in `src/app.rs`.
## Running your project
`cargo leptos watch`
By default, you can access your local project at `http://localhost:3000`
## Installing Additional Tools
By default, `cargo-leptos` uses `nightly` Rust, `cargo-generate`, and `sass`. If you run into any trouble, you may need to install one or more of these tools.
1. `rustup toolchain install nightly --allow-downgrade` - make sure you have Rust nightly
2. `rustup target add wasm32-unknown-unknown` - add the ability to compile Rust to WebAssembly
3. `cargo install cargo-generate` - install `cargo-generate` binary (should be installed automatically in future)
4. `npm install -g sass` - install `dart-sass` (should be optional in future)
## Executing a Server on a Remote Machine Without the Toolchain
After running a `cargo leptos build --release` the minimum files needed are:
1. The server binary located in `target/server/release`
2. The `site` directory and all files within located in `target/site`
Copy these files to your remote server. The directory structure should be:
```text
leptos_start
site/
``` ```
Set the following environment variables (updating for your project as needed):
```sh
export LEPTOS_OUTPUT_NAME="leptos_start"
export LEPTOS_SITE_ROOT="site"
export LEPTOS_SITE_PKG_DIR="pkg"
export LEPTOS_SITE_ADDR="127.0.0.1:3000"
export LEPTOS_RELOAD_PORT="3001"
```
Finally, run the server binary.
## Notes about CSR and Trunk:
Although it is not recommended, you can also run your project without server integration using the feature `csr` and `trunk serve`:
`trunk serve --open --features csr`
This may be useful for integrating external tools which require a static site, e.g. `tauri`.

43
nationtech-io/src/pages/home_page.rs
View File

@ -4,13 +4,22 @@ use leptos::*;
pub fn HomePage() -> impl IntoView { pub fn HomePage() -> impl IntoView {
// Creates a reactive value to update the button // Creates a reactive value to update the button
view! { view! {
<div class="row margin-y-4 justify-center">
<img src="assets/sreez_transparent_bg.png" alt="SREEZ mascot. Yes it is text-to-image generated by GPT4/DALL·E" class="max-width-400 margin-x-3"/>
<div class="margin-x-3 text-left column justify-center">
<h1>"SREEZ" <h1>"SREEZ"
<br/> <br/>
<span class="subtitle">"Site Reliability Engineering for Everyone, eZ"</span> <span class="font-size-xl color-gray">"Site Reliability Engineering for Everyone, eZ"</span>
</h1> </h1>
<img src="assets/sreez_transparent_bg.png" alt="SREEZ mascot. Yes it is text-to-image generated by GPT4/DALL·E"/> <h2 class="font-size-3xl">
<h2>"Spend your time developping your features, we take care of the infrastructure."</h2> <span>"Stay focused"</span><br/>
<div class="card-list"> <span>"on your features,"</span><br/>
<span>"we take care"</span><br/>
<span>"of the infrastructure."</span>
</h2>
</div>
</div>
<div class="row card-list">
<div class="card"> <div class="card">
<h3>"24/7 support"</h3> <h3>"24/7 support"</h3>
<ul> <ul>
@ -22,18 +31,18 @@ pub fn HomePage() -> impl IntoView {
<div class="card"> <div class="card">
<h3>"Batteries included"</h3> <h3>"Batteries included"</h3>
<ul> <ul>
<li>"OKD : RedHat Openshift community edition included"</li> <li>"Managed Orchestrator : RedHat OpenShift Community (OKD) cluster"</li>
<li>"Kubeapps : Install hundreds of apps, databases, productivity tools in a few clicks"</li> <li>"Marketplace : Easily install hundreds of apps, databases, productivity tools at no additional cost"</li>
<li>"CI/CD Pipeline : Gitea, Gitlab, Jenkins, ArgoCD"</li> <li>"CI/CD Pipeline : Source Control, Continuous Integration, Test Automation, Static Analysis, Continuous Delivery"</li>
<li>"AI Tools : Open source LLM, Kubeflow, Jupyter Notebooks, NVidia GPUs"</li> <li>"AI Tools : Open source LLMs, Model Management and Deployment, Jupyter Notebooks, NVidia GPUs"</li>
</ul> </ul>
</div> </div>
<div class="card"> <div class="card">
<h3>"Free as a byte"</h3> <h3>"Free as a byte"</h3>
<ul> <ul>
<li>"No vendor lock-in, only open source tools"</li> <li>"No vendor lock-in, only open source tools"</li>
<li>"Install commercial software based on your specific needs only"</li> <li>"Install any software based on your specific needs only"</li>
<li>"Run anywhere : NationTech Network, on premise, public cloud, private cloud"</li> <li>"Run anywhere : NationTech Network, Bare Metal, Virtual Machines, Public Cloud, Private Cloud"</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -43,10 +52,11 @@ pub fn HomePage() -> impl IntoView {
<ol class="huge-list-markers"> <ol class="huge-list-markers">
<li><h3 class="text-3x">"Fork a template repo"</h3></li> <li><h3 class="text-3x">"Fork a template repo"</h3></li>
<li><h3 class="text-3x">"Create an account"</h3></li> <li><h3 class="text-3x">"Create an account"</h3></li>
<li><h3 class="text-3x">"View the result"</h3></li> <li><h3 class="text-3x">"Push a modification"</h3></li>
<li><h3 class="text-3x">"Enjoy life in production"</h3></li>
</ol> </ol>
</div> </div>
<div class="card-list"> <div class="row card-list">
<div class="card"> <div class="card">
<h3 class="border-bottom-4">"Base package - Self Managed"</h3> <h3 class="border-bottom-4">"Base package - Self Managed"</h3>
<ul class="text-left"> <ul class="text-left">
@ -61,12 +71,12 @@ pub fn HomePage() -> impl IntoView {
<li>"32 CPU Cores"</li> <li>"32 CPU Cores"</li>
<li>"2 TB General Purpose Distributed Storage"</li> <li>"2 TB General Purpose Distributed Storage"</li>
</ul> </ul>
<div class="spacer"></div>
<p class="font-bold text-center text-4">"1 055 CAD / Month"</p> <p class="font-bold text-center text-4">"1 055 CAD / Month"</p>
<p class="font-bold text-center text-4">"10 555 CAD / Year"</p> <p class="font-bold text-center text-4">"10 555 CAD / Year"</p>
</div> </div>
<div class="card"> <div class="card">
<h3 class="border-bottom-4">"Startup Package - SRE as a Service"</h3> <h3 class="border-bottom-4">"Startup Package - SRE as a Service"</h3>
<p>"For those who have modest needs but want to benefit from the best SRE tools and teams in the industry"</p>
<ul class="text-left"> <ul class="text-left">
<li>"Everything in lower package, plus"</li> <li>"Everything in lower package, plus"</li>
<li>"Unlimited Kubernetes namespaces - Auto-Healing, Auto-Scaling, Fully Managed"</li> <li>"Unlimited Kubernetes namespaces - Auto-Healing, Auto-Scaling, Fully Managed"</li>
@ -79,6 +89,8 @@ pub fn HomePage() -> impl IntoView {
<li>"2 hours per month complimentary consulting with our SRE team"</li> <li>"2 hours per month complimentary consulting with our SRE team"</li>
<li>"Access to direct messaging with 4 hour SLA 24/7"</li> <li>"Access to direct messaging with 4 hour SLA 24/7"</li>
</ul> </ul>
<div class="spacer"></div>
<p class="margin-x-1">"For those who have modest needs but want to benefit from the best SRE tools and teams in the industry"</p>
<p class="font-bold text-center text-4">"5 555 CAD / Month"</p> <p class="font-bold text-center text-4">"5 555 CAD / Month"</p>
<p class="font-bold text-center text-4">"55 555 CAD / Year"</p> <p class="font-bold text-center text-4">"55 555 CAD / Year"</p>
</div> </div>
@ -94,7 +106,10 @@ pub fn HomePage() -> impl IntoView {
<li>"500 CPU Cores"</li> <li>"500 CPU Cores"</li>
<li>"1 200 TB General Purpose Distributed Storage"</li> <li>"1 200 TB General Purpose Distributed Storage"</li>
</ul> </ul>
<p>"At this point, we can customize our offering around this base package. Let us know what you need. We can deliver, fast. 2 clusters available within 3 days, 1 month lead time for more clusters."</p> <div class="spacer"></div>
<p class="margin-x-1">"We can customize our offering around this base package. Let us know what you need."</p>
<p class="margin-x-1">"We can deliver, fast : 2 clusters available within 3 days."</p>
<p class="margin-x-1">"1 month lead time for more clusters."</p>
<p class="font-bold text-center text-4">"55 555 CAD / Month"</p> <p class="font-bold text-center text-4">"55 555 CAD / Month"</p>
<p class="font-bold text-center text-4">"555 555 CAD / Year"</p> <p class="font-bold text-center text-4">"555 555 CAD / Year"</p>
</div> </div>

56
nationtech-io/style/main.scss
View File

@ -5,20 +5,56 @@ body {
} }
h1 { .font-size-4xl {
font-size: 3rem; font-size: 3rem;
.subtitle { }
font-size: 2rem;
} .font-size-xl {
font-size: 1.5rem;
}
.color-gray {
color: gray
} }
ol { ol {
list-style-type: decimal; list-style-type: decimal;
} }
.card-list { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.margin-x-1 {
margin-left: 1rem;
margin-right: 1rem;
}
.margin-y-4 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.margin-x-3 {
margin-left: 3rem;
margin-right: 3rem;
}
.card-list {
text-align: left; text-align: left;
justify-content: center; justify-content: center;
.card { .card {
@ -26,6 +62,12 @@ ol {
border: solid 3px black; border: solid 3px black;
border-radius: 20px; border-radius: 20px;
margin: 30px; margin: 30px;
display: flex;
flex-direction: column;
.spacer {
flex-grow: 1;
}
h3 { h3 {
text-align: center; text-align: center;
@ -76,3 +118,7 @@ ol.huge-list-markers li{
.font-bold { .font-bold {
font-weight: 800; font-weight: 800;
} }
.max-width-400 {
max-width: 400px;
}