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
<Router>
<main class="bg-main">
<main class="bg-main bg-light">
<Routes>
<Route path="" view=HomePage/>
<Route path="/initial-offer" view=InitialOffer/>

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

@ -3,24 +3,24 @@ use leptos::*;
#[component]
pub fn InitialOffer() -> impl IntoView {
view! {
<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 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="row wrap margin-y-4 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/>
<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>
<h2 class="font-size-3xl">
<h2 class="font-3xl">
<span>"Stay focused"</span><br/>
<span>"on your features,"</span><br/>
<span>"we take care"</span><br/>
<span>"of the infrastructure."</span>
</h2>
</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 class="row card-list">
<div class="card">
@ -49,7 +49,8 @@ pub fn InitialOffer() -> impl IntoView {
</ul>
</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="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">"Coming soon"</p>
<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>
<ul class="text-left">
<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">"5 available "</p>
<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>
<ul class="text-left">
<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">"1 available "</p>
<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>
<ul class="text-left">
<li>"Everything in lower package, plus"</li>
@ -121,7 +122,7 @@ pub fn InitialOffer() -> impl IntoView {
<div class="margin-y-25vh">
<h2>"Not ready to make a move yet but want to improve your infrastructure"</h2>
<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"
</p>
</div>

54
sreez/style/main.scss
View File

@ -1,22 +1,25 @@
body {
font-family: sans-serif;
text-align: center;
font-size: 1.25rem;
font-size: 1.4rem;
}
body {
background-color: #FAFAF5;
font-family: Roboto, helvetica;
font-family: Poppins, helvetica;
}
.font-size-4xl {
.font-4xl {
font-size: 3rem;
}
.font-size-xl {
font-size: 1.5rem;
.font-xl {
font-size: 1.7rem;
}
.line-1 {
line-height: 1rem;
}
.color-gray {
@ -32,6 +35,10 @@ ol {
flex-direction: row;
}
.wrap {
flex-wrap: wrap;
}
.column {
display: flex;
flex-direction: column;
@ -88,12 +95,6 @@ ol {
flex: 1;
min-width: 250px;
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;
display: flex;
flex-direction: column;
@ -152,22 +153,29 @@ ol.huge-list-markers li{
}
}
@media (min-width: 900px) {
.text-2x {
font-size: 2rem;
}
.text-3x {
font-size: 3rem;
font-size: 3.5rem;
}
.text-4x {
font-size: 4rem;
}
}
.font-bold {
font-weight: 800;
}
.font-600 {
font-weight: 600;
}
.max-width-400 {
max-width: 400px;
}
@ -175,3 +183,25 @@ ol.huge-list-markers li{
.height-110 {
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;
}
}