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

feat: Sreez landing page v1 ready to go online

Browse Source
This commit is contained in:
jeangab 2024-04-12 14:21:44 -04:00
parent 9707bbafd9
commit f4b284606e
8 changed files with 70 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
sreez/assets/scripts/matomo.js Normal file
View File

@ -0,0 +1,16 @@
let h = window.location.hostname;
if (h === "localhost" || h.match(/\.\d\d\d$/)) {
console.log('Matomo tracking disabled, seems to be running on a development hostname', h);
} else {
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//matomo.qc1.nationtech.io/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
}

2
sreez/src/app.rs
View File

@ -5,6 +5,7 @@ use leptos_router::*;
use crate::pages::ShortLandingPage;
use crate::pages::HomePage;
use crate::pages::InitialOffer;
use crate::components::Matomo;
#[component]
pub fn App() -> impl IntoView {
@ -16,6 +17,7 @@ pub fn App() -> impl IntoView {
// id=leptos means cargo-leptos will hot-reload this stylesheet
<Stylesheet id="leptos" href="/pkg/sreez.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<Matomo />
// sets the document title
<Title text="SREEZ - Site Reliability Engineering for Everyone, eZ"/>

2
sreez/src/components/book_a_demo.rs
View File

@ -11,7 +11,7 @@ pub fn BookADemo() -> impl IntoView {
set_clicked.update(|is_clicked| *is_clicked = !*is_clicked)
}
>"Book a demo →"</button>
<div class="animate-vertical" data-visible=is_clicked>
<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>
</div>

2
sreez/src/components/footer.rs
View File

@ -5,7 +5,7 @@ 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">
<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">

8
sreez/src/components/matomo.rs Normal file
View File

@ -0,0 +1,8 @@
use leptos::*;
#[component]
pub fn Matomo() -> impl IntoView {
view! {
<script src="assets/scripts/matomo.js" type="text/javascript" />
}
}

2
sreez/src/components/mod.rs
View File

@ -1,4 +1,6 @@
mod book_a_demo;
mod footer;
mod matomo;
pub use book_a_demo::*;
pub use footer::*;
pub use matomo::*;

22
sreez/src/pages/short_landing_page.rs
View File

@ -6,17 +6,19 @@ use crate::components::Footer;
#[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 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"/>
</div>
<div class="max-width-900 margin-x-auto">
<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>
<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 />
</div>
</div>
<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">
@ -27,7 +29,7 @@ pub fn ShortLandingPage() -> impl IntoView {
</ul>
</div>
<h2 class="margin-top-5">"Struggling to keep your DevOps tools up to par ?"</h2>
<div class="lr-sections">
<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>
@ -76,7 +78,9 @@ pub fn ShortLandingPage() -> impl IntoView {
<li>"DevOps and SRE best practices coaching and resources"</li>
</ul>
</div>
<BookADemo />
<div class="margin-top-5">
<BookADemo />
</div>
</div>
<Footer/>
}

27
sreez/style/main.scss
View File

@ -181,6 +181,10 @@ ol {
margin-top: 2rem;
}
.margin-top-1 {
margin-top: 1rem;
}
.card {
.card-icon {
font-size: 7rem;
@ -351,3 +355,26 @@ ol.huge-list-markers li{
.animate-vertical[data-visible] {
max-height: 900px;
}
@media screen and (max-width: 768px) {
.sm-margin-top-2 {
margin-top: 2rem;
}
}
@media screen and (min-width: 960px) {
.lg-margin-x-auto {
margin-left: auto;
margin-right: auto;
}
.lg-text-left {
text-align: left;
}
.lg-margin-x-3 {
margin-left: 3rem;
margin-right: 3rem;
}
}