feat(sreez): Improve the landing page
This commit is contained in:
Jean-Gabriel Gill-Couture
@@ -1,7 +1,10 @@
|
||||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn BookADemo() -> impl IntoView {
|
||||
pub fn BookADemo(
|
||||
#[prop(optional)]
|
||||
text: String
|
||||
) -> impl IntoView {
|
||||
let (is_clicked, set_clicked) = create_signal(false);
|
||||
|
||||
view! {
|
||||
@@ -10,7 +13,7 @@ pub fn BookADemo() -> impl IntoView {
|
||||
on:click=move |_| {
|
||||
set_clicked.update(|is_clicked| *is_clicked = !*is_clicked)
|
||||
}
|
||||
>"Book a demo →"</button>
|
||||
>{text}</button>
|
||||
<div class="animate-vertical sm-margin-top-2" data-visible=is_clicked>
|
||||
<script src="https://embed.ycb.me" async="true" data-domain="jggc"></script>
|
||||
</div>
|
||||
|
||||
@@ -2,32 +2,30 @@ 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-1 lg-margin-x-auto">
|
||||
<p>"Reach us here :"</p>
|
||||
<p>
|
||||
<a href="linkedin" aria-label="NationTech LinkedIn page" aria-hidden="true" class="row items-center">
|
||||
<a href="https://www.linkedin.com/company/83986494" aria-label="NationTech LinkedIn page" aria-hidden="true" target="_blank" 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">
|
||||
<a href="https://jggc.youcanbook.me" aria-label="You Can Book Me" aria-hidden="true" target="_blank" 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">
|
||||
<a href="https://nationtech.io" aria-label="NationTech website" aria-hidden="true" target="_blank" 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">
|
||||
<a href="mailto:sreez@nationtech.io" aria-label="SREEZ Email Address" aria-hidden="true" target="_blank" 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>
|
||||
|
||||
@@ -7,16 +7,16 @@ use crate::components::Footer;
|
||||
pub fn ShortLandingPage() -> impl IntoView {
|
||||
view! {
|
||||
<div class="margin-x-auto lg-margin-x-3">
|
||||
<img src="assets/sreez_logo_shaded_v2.png" aria-label="SREEZ mascot of a cherry because SREEZ sounds like 'cerise' in French which means Cherry" class="max-width-150"/>
|
||||
<img src="assets/sreez_logo_shaded_v2.png" aria-label="SREEZ mascot of a cherry because SREEZ sounds like 'cerise' in French which means Cherry" class="max-width-150 margin-top-5"/>
|
||||
</div>
|
||||
<div class="max-width-900 margin-x-auto">
|
||||
<div class="margin-x-1 lg-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>
|
||||
<div class="margin-top-2 text-center lg-text-left">
|
||||
<BookADemo />
|
||||
<h1 class="margin-y-4">"Accelerate your software delivery with SREEZ."</h1>
|
||||
<p class="margin-y-2">"Focus on what really matters."</p>
|
||||
<p class="margin-y-2">"Stop being overwhelmed by platform and deployment chores."</p>
|
||||
<p class="margin-y-2">"Get our platform deployed and your projects migrated faster than you thought possible."</p>
|
||||
<div class="margin-y-4 text-center lg-text-left">
|
||||
<BookADemo text="Book a demo →".to_string() />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card max-width-600 margin-x-auto margin-y-4">
|
||||
@@ -28,44 +28,7 @@ pub fn ShortLandingPage() -> impl IntoView {
|
||||
<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="lg-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>
|
||||
<h2 class="margin-top-8">"Delivering faster means your business wins : join the Elite with our unique early adopter offer!"</h2>
|
||||
<h2 class="margin-top-8">"Deploy in MINUTES, instead of WEEKS : 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>
|
||||
<h3 class="pad-y-1">"Get a pioneer seat to be a key part of the SREEZ project's foundation."</h3>
|
||||
@@ -79,7 +42,62 @@ pub fn ShortLandingPage() -> impl IntoView {
|
||||
</ul>
|
||||
</div>
|
||||
<div class="margin-top-5">
|
||||
<BookADemo />
|
||||
<BookADemo text="Book a demo →".to_string() />
|
||||
</div>
|
||||
<h2 class="margin-y-8">"Struggling to keep your DevOps tools up to par ?"</h2>
|
||||
<div class="lg-lr-sections">
|
||||
<div class="card max-width-600 margin-x-auto margin-y-8">
|
||||
<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-8">
|
||||
<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-8">
|
||||
<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-8">
|
||||
<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>
|
||||
<h2 class="margin-y-8">"Get in touch to build the perfect package"</h2>
|
||||
<div class="card max-width-600 margin-x-auto margin-top-5">
|
||||
<span class="material-symbols-outlined card-icon">"redeem"</span>
|
||||
<div>
|
||||
<p>"Mix and match our services to create the ideal combination"</p>
|
||||
<ul class="text-left list-pad-1">
|
||||
<li>"Sustainable hosting"</li>
|
||||
<li>"Internal Development Platform"</li>
|
||||
<li>"CI/CD Automation"</li>
|
||||
<li>"Hardware planning, ordering and installation"</li>
|
||||
<li>"Process audits and coaching following DevOps principles"</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="margin-top-5">
|
||||
<BookADemo text="Discuss the perfect package".to_string() />
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
|
||||
Reference in New Issue
Block a user