feat: New landing page first draft is up

This commit is contained in:
2024-04-08 23:33:32 -04:00
parent 1911630fc4
commit 5cf4501069
14 changed files with 335 additions and 33 deletions

30
sreez/Cargo.lock generated
View File

@@ -1512,21 +1512,6 @@ dependencies = [
"windows-sys 0.48.0",
]
[[package]]
name = "nationtech-io"
version = "0.1.0"
dependencies = [
"actix-files",
"actix-web",
"console_error_panic_hook",
"http 0.2.11",
"leptos",
"leptos_actix",
"leptos_meta",
"leptos_router",
"wasm-bindgen",
]
[[package]]
name = "nom"
version = "7.1.3"
@@ -2167,6 +2152,21 @@ dependencies = [
"windows-sys 0.52.0",
]
[[package]]
name = "sreez"
version = "0.1.0"
dependencies = [
"actix-files",
"actix-web",
"console_error_panic_hook",
"http 0.2.11",
"leptos",
"leptos_actix",
"leptos_meta",
"leptos_router",
"wasm-bindgen",
]
[[package]]
name = "strsim"
version = "0.10.0"

View File

@@ -1,5 +1,5 @@
[package]
name = "nationtech-io"
name = "sreez"
version = "0.1.0"
edition = "2021"
@@ -39,7 +39,7 @@ panic = "abort"
[package.metadata.leptos]
# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
output-name = "nationtech-io"
output-name = "sreez"
# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
site-root = "target/site"
# The site-root relative folder where all compiled output (JS, WASM and CSS) is written

Binary file not shown.

After

Width:  |  Height:  |  Size: 712 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 717 KiB

View File

@@ -2,6 +2,7 @@ use leptos::*;
use leptos_meta::*;
use leptos_router::*;
use crate::pages::ShortLandingPage;
use crate::pages::HomePage;
use crate::pages::InitialOffer;
@@ -13,7 +14,8 @@ pub fn App() -> impl IntoView {
view! {
// injects a stylesheet into the document <head>
// id=leptos means cargo-leptos will hot-reload this stylesheet
<Stylesheet id="leptos" href="/pkg/nationtech-io.css"/>
<Stylesheet id="leptos" href="/pkg/sreez.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
// sets the document title
<Title text="SREEZ - Site Reliability Engineering for Everyone, eZ"/>
@@ -22,7 +24,8 @@ pub fn App() -> impl IntoView {
<Router>
<main class="bg-main bg-light">
<Routes>
<Route path="" view=HomePage/>
<Route path="" view=ShortLandingPage/>
<Route path="/home-page" view=HomePage/>
<Route path="/initial-offer" view=InitialOffer/>
<Route path="/*any" view=NotFound/>
</Routes>

View File

@@ -5,7 +5,7 @@ async fn main() -> std::io::Result<()> {
use actix_web::*;
use leptos::*;
use leptos_actix::{generate_route_list, LeptosRoutes};
use nationtech_io::app::*;
use sreez::app::*;
let conf = get_configuration(None).await.unwrap();
let addr = conf.leptos_options.site_addr;

View File

@@ -11,10 +11,10 @@ pub fn HomePage() -> impl IntoView {
<span class="font-size-xl color-gray">"Site Reliability Engineering for Everyone, eZ"</span>
</h1>
<h2 class="font-size-3xl">
<span>"Stay focused"</span><br/>
<span>"on your features,"</span><br/>
<span>"we take care"</span><br/>
<span>"of the infrastructure."</span>
<span>"Focus"</span><br/>
<span>"On features"</span><br/>
<span>"We perfect"</span><br/>
<span>"Your infrastructure."</span>
</h2>
</div>
</div>
@@ -32,7 +32,7 @@ pub fn HomePage() -> impl IntoView {
<h3>"Batteries included"</h3>
<ul>
<li>"Managed Orchestrator : RedHat OpenShift Community (OKD) cluster"</li>
<li>"Marketplace : Easily install hundreds of apps, databases, productivity tools at no additional cost"</li>
<li>"Marketplace : Easily install, upgrade, rollback hundreds of apps, databases, productivity tools at no additional cost"</li>
<li>"CI/CD Pipeline : Source Control, Continuous Integration, Test Automation, Static Analysis, Continuous Delivery"</li>
<li>"AI Tools : Open source LLMs, Model Management and Deployment, Jupyter Notebooks, NVidia GPUs"</li>
</ul>

View File

@@ -1,4 +1,6 @@
mod home_page;
mod initial_offer;
mod short_landing_page;
pub use short_landing_page::*;
pub use home_page::*;
pub use initial_offer::*;

View File

@@ -0,0 +1,69 @@
use leptos::*;
/// Renders the home page of your application.
#[component]
pub fn ShortLandingPage() -> impl IntoView {
view! {
<div class="max-width-900 margin-x-auto">
<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-300 margin-x-3"/>
<div class="margin-x-3 text-left column justify-center">
<h1>"Accelerate your software delivery with SREEZ. Your DevOps Catalyst"</h1>
</div>
</div>
<div class="card max-width-600 margin-x-auto margin-top-5">
<span class="material-symbols-outlined card-icon">"key"</span>
<ul class="text-left list-pad-1">
<li>"Comprehensive platform based on the best tools available"</li>
<li>"Expert platform engineers with decades of DevOps and SRE experience"</li>
<li>"An all-in-one software delivery platform with services you didn't think you could afford"</li>
</ul>
</div>
<h2 class="margin-top-5">"Struggling to keep your DevOps tools up to par ?"</h2>
<div class="card max-width-600 margin-x-auto margin-top-5">
<span class="material-symbols-outlined card-icon">"price_change"</span>
<p>"With an ever-growing DevOps toolchain, most teams cannot afford to invest the time and money required to build the pipeline they know they need."</p>
</div>
<div class="card max-width-600 margin-x-auto margin-top-5">
<span class="material-symbols-outlined card-icon">"stacks"</span>
<p>"We fix that by building a unified platform for small and medium teams."</p>
</div>
<div class="card max-width-600 margin-x-auto margin-top-5">
<span class="material-symbols-outlined card-icon">"waving_hand"</span>
<p>"Our platform engineering experts work with you to select the best fitting open-source tools such as"</p>
<ul class="text-left list-pad-1">
<li>"Kubernetes"</li>
<li>"RedHat Developer Hub"</li>
<li>"ArgoCD"</li>
<li>"Grafana"</li>
<li>"HyperDX"</li>
</ul>
<img src="assets/sreez_stack_logos_flat.png" alt="SREEZ stack logos" class="width-600 max-width-100pct" />
</div>
<div class="card max-width-600 margin-x-auto margin-top-5">
<span class="material-symbols-outlined card-icon">"engineering"</span>
<p>"Our team is also working for you to"</p>
<ul class="text-left list-pad-1">
<li>"Migrate your existing applications to the platform"</li>
<li>"Coach your team on best practices"</li>
<li>"Be the 24/7 first respondants to incidents, only waking you up when it really matters"</li>
<li>"Continuously improve your delivery speed, quality and reliability"</li>
</ul>
</div>
<h2 class="margin-top-5">"Delivering faster means your business wins : join the Elite with our unique early adopter offer!"</h2>
<div class="card max-width-600 margin-x-auto margin-top-5">
<span class="material-symbols-outlined card-icon">"editor_choice"</span>
<p>"Get one of the 5 seats available to be a key part of the SREEZ project's foundation."</p>
<p><strong>"What you'll get"</strong></p>
<ul class="text-left list-pad-1">
<li>"20 to 100 hours of expert consulting from our team every month"</li>
<li>"Free hosting up to 500 CPUs, 2 000 GB RAM, 150 TB Storage, 128 GB GPU VRAM for AI models"</li>
<li>"Full SREEZ platform based on best-in-class open-source tools "</li>
<li>"Your features prioritized on the platform"</li>
<li>"DevOps and SRE best practices coaching and resources"</li>
</ul>
</div>
<h1>"TODO"</h1>
<button>"Book a demo"</button>
</div>
}
}

View File

@@ -1,3 +1,4 @@
body {
font-family: sans-serif;
text-align: center;
@@ -76,15 +77,55 @@ ol {
margin: 3rem;
}
.max-width-300 {
max-width: 300px;
}
.max-width-400 {
max-width: 400px;
}
.max-width-500 {
max-width: 500px;
}
.max-width-600 {
max-width: 600px;
}
.width-600 {
width: 600px;
}
.max-width-100pct {
max-width: 100%;
}
.max-width-900 {
max-width: 900px;
}
.list-pad-1 li {
margin-bottom: 1rem;
}
.margin-x-auto {
margin-left: auto;
margin-right: auto;
}
.margin-top-5 {
margin-top: 5rem;
}
.card {
.card-icon {
font-size: 7rem;
color: #333;
}
}
.card-list {
text-align: left;
justify-content: center;
@@ -175,11 +216,6 @@ ol.huge-list-markers li{
font-weight: 600;
}
.max-width-400 {
max-width: 400px;
}
.height-110 {
height: 110px;
}
@@ -205,3 +241,11 @@ ol.huge-list-markers li{
background-color: #007488CC;
}
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}