feat: Sreez website maybe ready for initial release
This commit is contained in:
jeangab
parent
0d5a8334c8
commit
9707bbafd9
1
sreez/assets/icons/linkedin.svg
Normal file
1
sreez/assets/icons/linkedin.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg>
|
||||
|
After Width: | Height: | Size: 681 B |
7
sreez/assets/icons/website.svg
Normal file
7
sreez/assets/icons/website.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M256,0C114.62,0,0,114.62,0,256s114.62,256,256,256s256-114.62,256-256S397.38,0,256,0z M172.211,41.609 c-24.934,27.119-44.68,66.125-56.755,111.992H49.749C75.179,102.741,118.869,62.524,172.211,41.609z M25.6,256 c0-26.999,5.077-52.727,13.662-76.8h70.494c-4.608,24.294-7.356,49.963-7.356,76.8s2.748,52.506,7.347,76.8H39.262 C30.677,308.727,25.6,283,25.6,256z M49.749,358.4h65.707c12.083,45.867,31.821,84.872,56.755,111.991 C118.869,449.476,75.179,409.259,49.749,358.4z M243.2,485.188c-43.81-8.252-81.877-58.24-101.359-126.788H243.2V485.188z M243.2,332.8H135.74c-4.924-24.166-7.74-49.997-7.74-76.8s2.816-52.634,7.74-76.8H243.2V332.8z M243.2,153.6H141.841 C161.323,85.052,199.39,35.063,243.2,26.812V153.6z M462.251,153.6h-65.707c-12.083-45.867-31.821-84.873-56.755-111.992 C393.131,62.524,436.821,102.741,462.251,153.6z M268.8,26.812c43.81,8.252,81.877,58.24,101.359,126.788H268.8V26.812z M268.8,179.2h107.46c4.924,24.166,7.74,49.997,7.74,76.8s-2.816,52.634-7.74,76.8H268.8V179.2z M268.8,485.188V358.4h101.359 C350.677,426.948,312.61,476.937,268.8,485.188z M339.789,470.391c24.934-27.127,44.672-66.125,56.755-111.991h65.707 C436.821,409.259,393.131,449.476,339.789,470.391z M402.244,332.8c4.608-24.294,7.356-49.963,7.356-76.8 s-2.748-52.506-7.347-76.8h70.494c8.576,24.073,13.653,49.801,13.653,76.8c0,27-5.077,52.727-13.662,76.8H402.244z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
BIN
sreez/assets/icons/youcanbookme_black.png
Normal file
BIN
sreez/assets/icons/youcanbookme_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 134 KiB |
BIN
sreez/assets/sreez_logo_shaded.png
Normal file
BIN
sreez/assets/sreez_logo_shaded.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
BIN
sreez/assets/sreez_logo_shaded_v2.png
Normal file
BIN
sreez/assets/sreez_logo_shaded_v2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
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/>
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,6 +25,10 @@ body {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.line-2-5 {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.font-4xl {
|
||||
font-size: 3rem;
|
||||
}
|
||||
@ -59,6 +63,20 @@ ol {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.no-decoration {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.icon-as-image {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
font-size: 32px !important;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@ -77,6 +95,24 @@ ol {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.pad-y-4 {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.pad-y-1 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pad-left-3 {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.pad-left-1 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.margin-x-3 {
|
||||
margin-left: 3rem;
|
||||
margin-right: 3rem;
|
||||
@ -96,6 +132,10 @@ ol {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.max-width-150 {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.max-width-400 {
|
||||
max-width: 400px;
|
||||
}
|
||||
@ -129,10 +169,18 @@ ol {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.margin-top-8 {
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
.margin-top-5 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
.margin-top-2 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
.card-icon {
|
||||
font-size: 7rem;
|
||||
@ -245,14 +293,43 @@ ol.huge-list-markers li{
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
padding: 0.7rem 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 700;
|
||||
font-size: inherit;
|
||||
text-transform: capitalize;
|
||||
cursor: pointer;
|
||||
background-color: #e72235;
|
||||
color: white;
|
||||
&:hover {
|
||||
background-color: #007488CC;
|
||||
// background-color: #eee;
|
||||
// color: black;
|
||||
box-shadow: 5px 5px 27px 10px rgba(231,34,53,0.21);
|
||||
//background-color: #66d500;
|
||||
//background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.lr-sections {
|
||||
> div {
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
justify-content: space-around;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
|
||||
.card-icon {
|
||||
padding-left: 7rem;
|
||||
padding-right: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@ -263,3 +340,14 @@ ol.huge-list-markers li{
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}
|
||||
|
||||
.animate-vertical {
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
/* CSS for when data-visible attribute is true */
|
||||
.animate-vertical[data-visible] {
|
||||
max-height: 900px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user