diff --git a/sreez/assets/scripts/matomo.js b/sreez/assets/scripts/matomo.js new file mode 100644 index 0000000..5767972 --- /dev/null +++ b/sreez/assets/scripts/matomo.js @@ -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); + })(); +} diff --git a/sreez/src/app.rs b/sreez/src/app.rs index 96db584..779cc7a 100644 --- a/sreez/src/app.rs +++ b/sreez/src/app.rs @@ -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 + // sets the document title diff --git a/sreez/src/components/book_a_demo.rs b/sreez/src/components/book_a_demo.rs index 654f88f..131b674 100644 --- a/sreez/src/components/book_a_demo.rs +++ b/sreez/src/components/book_a_demo.rs @@ -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> diff --git a/sreez/src/components/footer.rs b/sreez/src/components/footer.rs index 96cc890..58909cd 100644 --- a/sreez/src/components/footer.rs +++ b/sreez/src/components/footer.rs @@ -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"> diff --git a/sreez/src/components/matomo.rs b/sreez/src/components/matomo.rs new file mode 100644 index 0000000..958969a --- /dev/null +++ b/sreez/src/components/matomo.rs @@ -0,0 +1,8 @@ +use leptos::*; + +#[component] +pub fn Matomo() -> impl IntoView { + view! { + <script src="assets/scripts/matomo.js" type="text/javascript" /> + } +} diff --git a/sreez/src/components/mod.rs b/sreez/src/components/mod.rs index 5355267..7fb9aa5 100644 --- a/sreez/src/components/mod.rs +++ b/sreez/src/components/mod.rs @@ -1,4 +1,6 @@ mod book_a_demo; mod footer; +mod matomo; pub use book_a_demo::*; pub use footer::*; +pub use matomo::*; diff --git a/sreez/src/pages/short_landing_page.rs b/sreez/src/pages/short_landing_page.rs index e1de4fb..86d2194 100644 --- a/sreez/src/pages/short_landing_page.rs +++ b/sreez/src/pages/short_landing_page.rs @@ -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/> } diff --git a/sreez/style/main.scss b/sreez/style/main.scss index 5e3568c..a5b840d 100644 --- a/sreez/style/main.scss +++ b/sreez/style/main.scss @@ -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; + } +}