feat: Sreez website maybe ready for initial release
This commit is contained in:
jeangab
19
sreez/src/components/book_a_demo.rs
Normal file
19
sreez/src/components/book_a_demo.rs
Normal file
@@ -0,0 +1,19 @@
|
||||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn BookADemo() -> impl IntoView {
|
||||
let (is_clicked, set_clicked) = create_signal(false);
|
||||
|
||||
view! {
|
||||
<div>
|
||||
<button class="btn"
|
||||
on:click=move |_| {
|
||||
set_clicked.update(|is_clicked| *is_clicked = !*is_clicked)
|
||||
}
|
||||
>"Book a demo →"</button>
|
||||
<div class="animate-vertical" data-visible=is_clicked>
|
||||
<script src="https://embed.ycb.me" async="true" data-domain="jggc"></script>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
38
sreez/src/components/footer.rs
Normal file
38
sreez/src/components/footer.rs
Normal file
@@ -0,0 +1,38 @@
|
||||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn Footer() -> impl IntoView {
|
||||
let (is_clicked, set_clicked) = create_signal(false);
|
||||
|
||||
view! {
|
||||
<div class="pad-y-4 margin-top-5 text-left max-width-900 margin-x-auto">
|
||||
<p>"Reach us here :"</p>
|
||||
<p>
|
||||
<a href="linkedin" aria-label="NationTech LinkedIn page" aria-hidden="true" class="row items-center">
|
||||
<img src="assets/icons/linkedin.svg" height="32px"/>
|
||||
|
||||
<span class="pad-left-1">"LinkedIn"</span>
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://jggc.youcanbook.me" aria-label="You Can Book Me" aria-hidden="true" class="row items-center">
|
||||
<img src="assets/icons/youcanbookme_black.png" height="32px"/>
|
||||
<span class="pad-left-1">"Book a meeting"</span>
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://nationtech.io" aria-label="NationTech website" aria-hidden="true" class="row items-center">
|
||||
<img src="assets/icons/website.svg" height="32px"/>
|
||||
<span class="pad-left-1">"nationtech.io"</span>
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="mailto=sreez@nationtech.io" aria-label="SREEZ Email Address" aria-hidden="true" class="row items-center no-decoration">
|
||||
<span class="icon-as-image material-symbols-outlined">"mail"
|
||||
</span>
|
||||
<span class="pad-left-1 underline">"sreez@nationtech.io"</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
4
sreez/src/components/mod.rs
Normal file
4
sreez/src/components/mod.rs
Normal file
@@ -0,0 +1,4 @@
|
||||
mod book_a_demo;
|
||||
mod footer;
|
||||
pub use book_a_demo::*;
|
||||
pub use footer::*;
|
||||
@@ -1,5 +1,6 @@
|
||||
pub mod app;
|
||||
mod pages;
|
||||
mod components;
|
||||
|
||||
#[cfg(feature = "hydrate")]
|
||||
#[wasm_bindgen::prelude::wasm_bindgen]
|
||||
|
||||
@@ -1,58 +1,72 @@
|
||||
use leptos::*;
|
||||
use crate::components::BookADemo;
|
||||
use crate::components::Footer;
|
||||
|
||||
/// Renders the home page of your application.
|
||||
#[component]
|
||||
pub fn ShortLandingPage() -> impl IntoView {
|
||||
view! {
|
||||
<div class="max-width-150 margin-x-3">
|
||||
<img src="assets/sreez_logo_shaded_v2.png" width="50px" aria-label="SREEZ mascot of a cherry because SREEZ sounds like 'cerise' in French which means Cherry" class="max-width-100pct margin-x-auto pad-left-3"/>
|
||||
</div>
|
||||
<div class="max-width-900 margin-x-auto">
|
||||
<div class="row margin-y-4 justify-center">
|
||||
<img src="assets/sreez_logo.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 class="margin-x-3 text-left">
|
||||
<h1>"Accelerate your software delivery with SREEZ."</h1>
|
||||
<p>"Focus on what really matters."</p>
|
||||
<p>"Stop being overwhelmed by platform and infrastructure work."</p>
|
||||
<p>"Get our platform deployed and your projects migrated faster than you thought possible."</p>
|
||||
<BookADemo />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card max-width-600 margin-x-auto margin-top-5">
|
||||
<div class="card max-width-600 margin-x-auto margin-y-4">
|
||||
<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>"A single dashboard for your infrastructure"</li>
|
||||
<li>"Pre-built platform combining 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 class="lr-sections">
|
||||
<div class="card max-width-600 margin-x-auto margin-y-4">
|
||||
<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-y-4">
|
||||
<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-y-4">
|
||||
<span class="material-symbols-outlined card-icon">"waving_hand"</span>
|
||||
<div>
|
||||
<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 margin-top-2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card max-width-600 margin-x-auto margin-y-4">
|
||||
<span class="material-symbols-outlined card-icon">"engineering"</span>
|
||||
<div>
|
||||
<h3>"Wo do all this for you"</h3>
|
||||
<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>
|
||||
</div>
|
||||
</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>
|
||||
<h2 class="margin-top-8">"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>
|
||||
<h3 class="pad-y-1">"Get a pioneer seat to be a key part of the SREEZ project's foundation."</h3>
|
||||
<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>
|
||||
@@ -62,8 +76,8 @@ pub fn ShortLandingPage() -> impl IntoView {
|
||||
<li>"DevOps and SRE best practices coaching and resources"</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h1>"TODO"</h1>
|
||||
<button>"Book a demo"</button>
|
||||
<BookADemo />
|
||||
</div>
|
||||
<Footer/>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user