feat: Sreez landing page v1 ready to go online

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);
+  })();
+}

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
         <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"/>

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>

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">

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" />
+    }
+}

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::*;

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">
+        <div class="margin-x-auto lg-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"/>
+            <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">
+            <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,8 +78,10 @@ pub fn ShortLandingPage() -> impl IntoView {
                     <li>"DevOps and SRE best practices coaching and resources"</li>
                 </ul>
             </div>
+            <div class="margin-top-5">
                 <BookADemo />
             </div>
+        </div>
         <Footer/>
     }
 }

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;
+  }
+}