feat: Sreez landing page v1 ready to go online

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