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

wip(sreez): initial offer landing page improving

Browse Source
This commit is contained in:
Jean-Gabriel Gill-Couture 2024-03-07 08:33:29 -05:00
parent d8bed59ef7
commit 3abbb61187
3 changed files with 58 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sreez/src/app.rs
View File

@ -20,7 +20,7 @@ pub fn App() -> impl IntoView {
// content for this welcome page // content for this welcome page
<Router> <Router>
<main class="bg-main"> <main class="bg-main bg-light">
<Routes> <Routes>
<Route path="" view=HomePage/> <Route path="" view=HomePage/>
<Route path="/initial-offer" view=InitialOffer/> <Route path="/initial-offer" view=InitialOffer/>

29
sreez/src/pages/initial_offer.rs
View File

@ -3,24 +3,24 @@ use leptos::*;
#[component] #[component]
pub fn InitialOffer() -> impl IntoView { pub fn InitialOffer() -> impl IntoView {
view! { view! {
<div class="text-center margin-y-25vh"> <div class="row wrap margin-y-4 justify-center">
<p class="text-3x font-bold max-width-900 margin-x-auto">"Imagine a world where your startup's infrastructure is as resilient as the biggest tech giants', but without the overhead."</p>
<p class="text-3x font-bold max-width-900 margin-x-auto">"Welcome to SREEZ, where we make that dream a reality"</p>
</div>
<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"> <div class="margin-x-3 text-left column justify-center">
<h1>"SREEZ" <h1 class="text-3x">"Site Reliability Engineering for Everyone, eZ : SREEZ"
<br/> <br/>
<span class="font-size-xl color-gray">"Site Reliability Engineering for Everyone, eZ"</span> <span class="font-xl color-gray line-1">"Site Reliability Engineering for Everyone, eZ"</span>
</h1> </h1>
<h2 class="font-size-3xl"> <h2 class="font-3xl">
<span>"Stay focused"</span><br/> <span>"Stay focused"</span><br/>
<span>"on your features,"</span><br/> <span>"on your features,"</span><br/>
<span>"we take care"</span><br/> <span>"we take care"</span><br/>
<span>"of the infrastructure."</span> <span>"of the infrastructure."</span>
</h2> </h2>
</div> </div>
<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>
<div class="text-center margin-y-25vh">
<p class="text-3x font-bold max-width-900 margin-x-auto">"Imagine a world where your startup's infrastructure is as resilient as the biggest tech giants', but without the overhead."</p>
<p class="text-3x font-bold max-width-900 margin-x-auto">"Welcome to SREEZ, where we make that dream a reality"</p>
</div> </div>
<div class="row card-list"> <div class="row card-list">
<div class="card"> <div class="card">
@ -49,7 +49,8 @@ pub fn InitialOffer() -> impl IntoView {
</ul> </ul>
</div> </div>
</div> </div>
<p>"And much more, just "<a href="mailto:sreez@nationtech.io">"ask us!"</a></p> <p>"And much more, just "</p>
<a href="mailto:sreez@nationtech.io?subject=SREEZ: I want to know more" target="_blank" ><button class="btn btn-dark">"Ask us"</button></a>
<div class="row card-list"> <div class="row card-list">
<div class="card"> <div class="card">
@ -58,7 +59,7 @@ pub fn InitialOffer() -> impl IntoView {
<p class="font-bold text-center ">"10 555 CAD / Year"</p> <p class="font-bold text-center ">"10 555 CAD / Year"</p>
<p class="font-bold text-center">"Coming soon"</p> <p class="font-bold text-center">"Coming soon"</p>
<p class="font-bold text-center"> <p class="font-bold text-center">
<a href="mailto:sreez@nationtech.io?subject=SREEZ Bootstrap Package&body=I am interested in SREEZ Bootstrap Package">"Subscribe to waitlist"</a> <a target="_blank" href="mailto:sreez@nationtech.io?subject=SREEZ Bootstrap Package&body=I am interested in SREEZ Bootstrap Package">"Subscribe to waitlist"</a>
</p> </p>
<ul class="text-left"> <ul class="text-left">
<li>"Dedicated Kubernetes namespace - Auto-Healing, Auto-Scaling, Fully Managed"</li> <li>"Dedicated Kubernetes namespace - Auto-Healing, Auto-Scaling, Fully Managed"</li>
@ -79,7 +80,7 @@ pub fn InitialOffer() -> impl IntoView {
<p class="font-bold text-center ">"55 555 CAD / Year"</p> <p class="font-bold text-center ">"55 555 CAD / Year"</p>
<p class="font-bold text-center">"5 available "</p> <p class="font-bold text-center">"5 available "</p>
<p class="font-bold text-center"> <p class="font-bold text-center">
<a href="mailto:sreez@nationtech.io?subject=SREEZ Startup Package&body=I am interested in SREEZ Startup Package">"Get it now"</a> <a target="_blank" href="mailto:sreez@nationtech.io?subject=SREEZ Startup Package&body=I am interested in SREEZ Startup Package">"Get it now"</a>
</p> </p>
<ul class="text-left"> <ul class="text-left">
<li>"Everything in lower package, plus"</li> <li>"Everything in lower package, plus"</li>
@ -101,7 +102,7 @@ pub fn InitialOffer() -> impl IntoView {
<p class="font-bold text-center">"555 555 CAD / Year"</p> <p class="font-bold text-center">"555 555 CAD / Year"</p>
<p class="font-bold text-center">"1 available "</p> <p class="font-bold text-center">"1 available "</p>
<p class="font-bold text-center"> <p class="font-bold text-center">
<a href="mailto:sreez@nationtech.io?subject=SREEZ Top package&body=I am interested in SREEZ Top Package">"Get it now"</a> <a target="_blank" href="mailto:sreez@nationtech.io?subject=SREEZ Top package&body=I am interested in SREEZ Top Package">"Get it now"</a>
</p> </p>
<ul class="text-left"> <ul class="text-left">
<li>"Everything in lower package, plus"</li> <li>"Everything in lower package, plus"</li>
@ -121,7 +122,7 @@ pub fn InitialOffer() -> impl IntoView {
<div class="margin-y-25vh"> <div class="margin-y-25vh">
<h2>"Not ready to make a move yet but want to improve your infrastructure"</h2> <h2>"Not ready to make a move yet but want to improve your infrastructure"</h2>
<p> <p>
<a href="mailto:sreez@nationtech.io?subject=Mailing list subscription&body=I want to get SREEZ news">"Subscribe to our mailing list"</a> <a target="_blank" href="mailto:sreez@nationtech.io?subject=Mailing list subscription&body=I want to get SREEZ news">"Subscribe to our mailing list"</a>
" for SRE advice and events" " for SRE advice and events"
</p> </p>
</div> </div>

54
sreez/style/main.scss
View File

@ -1,22 +1,25 @@
body { body {
font-family: sans-serif; font-family: sans-serif;
text-align: center; text-align: center;
font-size: 1.25rem; font-size: 1.4rem;
} }
body { body {
background-color: #FAFAF5;
font-family: Roboto, helvetica; font-family: Roboto, helvetica;
font-family: Poppins, helvetica; font-family: Poppins, helvetica;
} }
.font-size-4xl { .font-4xl {
font-size: 3rem; font-size: 3rem;
} }
.font-size-xl { .font-xl {
font-size: 1.5rem; font-size: 1.7rem;
}
.line-1 {
line-height: 1rem;
} }
.color-gray { .color-gray {
@ -32,6 +35,10 @@ ol {
flex-direction: row; flex-direction: row;
} }
.wrap {
flex-wrap: wrap;
}
.column { .column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -88,12 +95,6 @@ ol {
flex: 1; flex: 1;
min-width: 250px; min-width: 250px;
max-width: 400px; max-width: 400px;
// border: solid 3px #ccc;
//border-radius: 20px;
// background-color: white;
//border: 2px solid #eee;
//border-right: 2px solid #fc314e88;
//border-left: 2px solid #fc314e88;
margin: 30px; margin: 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -152,22 +153,29 @@ ol.huge-list-markers li{
} }
} }
@media (min-width: 900px) {
.text-2x { .text-2x {
font-size: 2rem; font-size: 2rem;
} }
.text-3x { .text-3x {
font-size: 3rem; font-size: 3.5rem;
} }
.text-4x { .text-4x {
font-size: 4rem; font-size: 4rem;
} }
}
.font-bold { .font-bold {
font-weight: 800; font-weight: 800;
} }
.font-600 {
font-weight: 600;
}
.max-width-400 { .max-width-400 {
max-width: 400px; max-width: 400px;
} }
@ -175,3 +183,25 @@ ol.huge-list-markers li{
.height-110 { .height-110 {
height: 110px; height: 110px;
} }
.bg-light, body {
background-color: #F8F9F1;
}
.btn-dark {
background-color: #007488;
color: #FFF;
}
.btn {
border: none;
padding: 0.7rem 1rem;
border-radius: 0.75rem;
font-weight: 700;
font-size: inherit;
text-transform: capitalize;
cursor: pointer;
&:hover {
background-color: #007488CC;
}
}