feat: Sreez website maybe ready for initial release

sreez/assets/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg>

sreez/assets/icons/website.svg

@@ -0,0 +1,7 @@
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
+<g>
+    <g>
+        <path d="M256,0C114.62,0,0,114.62,0,256s114.62,256,256,256s256-114.62,256-256S397.38,0,256,0z M172.211,41.609    c-24.934,27.119-44.68,66.125-56.755,111.992H49.749C75.179,102.741,118.869,62.524,172.211,41.609z M25.6,256    c0-26.999,5.077-52.727,13.662-76.8h70.494c-4.608,24.294-7.356,49.963-7.356,76.8s2.748,52.506,7.347,76.8H39.262    C30.677,308.727,25.6,283,25.6,256z M49.749,358.4h65.707c12.083,45.867,31.821,84.872,56.755,111.991    C118.869,449.476,75.179,409.259,49.749,358.4z M243.2,485.188c-43.81-8.252-81.877-58.24-101.359-126.788H243.2V485.188z     M243.2,332.8H135.74c-4.924-24.166-7.74-49.997-7.74-76.8s2.816-52.634,7.74-76.8H243.2V332.8z M243.2,153.6H141.841    C161.323,85.052,199.39,35.063,243.2,26.812V153.6z M462.251,153.6h-65.707c-12.083-45.867-31.821-84.873-56.755-111.992    C393.131,62.524,436.821,102.741,462.251,153.6z M268.8,26.812c43.81,8.252,81.877,58.24,101.359,126.788H268.8V26.812z     M268.8,179.2h107.46c4.924,24.166,7.74,49.997,7.74,76.8s-2.816,52.634-7.74,76.8H268.8V179.2z M268.8,485.188V358.4h101.359    C350.677,426.948,312.61,476.937,268.8,485.188z M339.789,470.391c24.934-27.127,44.672-66.125,56.755-111.991h65.707    C436.821,409.259,393.131,449.476,339.789,470.391z M402.244,332.8c4.608-24.294,7.356-49.963,7.356-76.8    s-2.748-52.506-7.347-76.8h70.494c8.576,24.073,13.653,49.801,13.653,76.8c0,27-5.077,52.727-13.662,76.8H402.244z"/>
+    </g>
+</g>
+</svg>

sreez/src/components/book_a_demo.rs

@@ -0,0 +1,19 @@
+use leptos::*;
+
+#[component]
+pub fn BookADemo() -> impl IntoView {
+    let (is_clicked, set_clicked) = create_signal(false);
+
+    view! {
+        <div>
+        <button class="btn"
+            on:click=move |_| {
+                set_clicked.update(|is_clicked| *is_clicked = !*is_clicked)
+            }
+        >"Book a demo →"</button>
+            <div class="animate-vertical" data-visible=is_clicked>
+                <script src="https://embed.ycb.me" async="true" data-domain="jggc"></script>
+            </div>
+        </div>
+    }
+}

sreez/src/components/footer.rs

@@ -0,0 +1,38 @@
+use leptos::*;
+
+#[component]
+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">
+            <p>"Reach us here :"</p>
+            <p>
+            <a href="linkedin" aria-label="NationTech LinkedIn page" aria-hidden="true" class="row items-center">
+            <img src="assets/icons/linkedin.svg" height="32px"/>
+
+                <span class="pad-left-1">"LinkedIn"</span>
+            </a>
+            </p>
+            <p>
+            <a href="https://jggc.youcanbook.me" aria-label="You Can Book Me" aria-hidden="true" class="row items-center">
+            <img src="assets/icons/youcanbookme_black.png" height="32px"/>
+            <span class="pad-left-1">"Book a meeting"</span>
+            </a>
+            </p>
+            <p>
+            <a href="https://nationtech.io" aria-label="NationTech website" aria-hidden="true" class="row items-center">
+            <img src="assets/icons/website.svg" height="32px"/>
+            <span class="pad-left-1">"nationtech.io"</span>
+            </a>
+            </p>
+            <p>
+            <a href="mailto=sreez@nationtech.io" aria-label="SREEZ Email Address" aria-hidden="true" class="row items-center no-decoration">
+            <span class="icon-as-image material-symbols-outlined">"mail"
+</span>
+            <span class="pad-left-1 underline">"sreez@nationtech.io"</span>
+            </a>
+            </p>
+        </div>
+    }
+}

sreez/src/components/mod.rs

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

sreez/src/lib.rs

@@ -1,5 +1,6 @@
 pub mod app;
 mod pages;
+mod components;
 
 #[cfg(feature = "hydrate")]
 #[wasm_bindgen::prelude::wasm_bindgen]

sreez/src/pages/short_landing_page.rs

@@ -1,34 +1,44 @@
 use leptos::*;
+use crate::components::BookADemo;
+use crate::components::Footer;
+
 /// Renders the home page of your application.
 #[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>
         <div class="max-width-900 margin-x-auto">
-            <div class="row margin-y-4 justify-center">
-                <img src="assets/sreez_logo.png"  alt="SREEZ mascot. Yes it is text-to-image generated by GPT4/DALL·E" class="max-width-300 margin-x-3"/>
-                <div class="margin-x-3 text-left column justify-center">
-                    <h1>"Accelerate your software delivery with SREEZ. Your DevOps Catalyst"</h1>
+                <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>
+                    <BookADemo />
                 </div>
-            </div>
-            <div class="card max-width-600 margin-x-auto margin-top-5">
+            <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">
-                <li>"Comprehensive platform based on the best tools available"</li>
+                <li>"A single dashboard for your infrastructure"</li>
+                <li>"Pre-built platform combining the best tools available"</li>
                 <li>"Expert platform engineers with decades of DevOps and SRE experience"</li>
                 <li>"An all-in-one software delivery platform with services you didn't think you could afford"</li>
             </ul>
             </div>
             <h2 class="margin-top-5">"Struggling to keep your DevOps tools up to par ?"</h2>
-            <div class="card max-width-600 margin-x-auto margin-top-5">
+            <div class="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>
                 </div>
-            <div class="card max-width-600 margin-x-auto margin-top-5">
+                <div class="card max-width-600 margin-x-auto margin-y-4">
                     <span class="material-symbols-outlined card-icon">"stacks"</span>
                     <p>"We fix that by building a unified platform for small and medium teams."</p>
                 </div>
-            <div class="card max-width-600 margin-x-auto margin-top-5">
+                <div class="card max-width-600 margin-x-auto margin-y-4">
                     <span class="material-symbols-outlined card-icon">"waving_hand"</span>
+                    <div>
                     <p>"Our platform engineering experts work with you to select the best fitting open-source tools such as"</p>
                     <ul class="text-left list-pad-1">
                         <li>"Kubernetes"</li>
@@ -37,11 +47,13 @@ pub fn ShortLandingPage() -> impl IntoView {
                         <li>"Grafana"</li>
                         <li>"HyperDX"</li>
                     </ul>
-                <img src="assets/sreez_stack_logos_flat.png" alt="SREEZ stack logos" class="width-600 max-width-100pct" />
+                    <img src="assets/sreez_stack_logos_flat.png" alt="SREEZ stack logos" class="width-600 max-width-100pct margin-top-2" />
                     </div>
-            <div class="card max-width-600 margin-x-auto margin-top-5">
+                </div>
+                <div class="card max-width-600 margin-x-auto margin-y-4">
                     <span class="material-symbols-outlined card-icon">"engineering"</span>
-                <p>"Our team is also working for you to"</p>
+                    <div>
+                    <h3>"Wo do all this for you"</h3>
                     <ul class="text-left list-pad-1">
                         <li>"Migrate your existing applications to the platform"</li>
                         <li>"Coach your team on best practices"</li>
@@ -49,10 +61,12 @@ pub fn ShortLandingPage() -> impl IntoView {
                         <li>"Continuously improve your delivery speed, quality and reliability"</li>
                     </ul>
                     </div>
-            <h2 class="margin-top-5">"Delivering faster means your business wins : join the Elite with our unique early adopter offer!"</h2>
+                </div>
+            </div>
+            <h2 class="margin-top-8">"Delivering faster means your business wins : join the Elite with our unique early adopter offer!"</h2>
             <div class="card max-width-600 margin-x-auto margin-top-5">
                 <span class="material-symbols-outlined card-icon">"editor_choice"</span>
-                <p>"Get one of the 5 seats available to be a key part of the SREEZ project's foundation."</p>
+                <h3 class="pad-y-1">"Get a pioneer seat to be a key part of the SREEZ project's foundation."</h3>
                 <p><strong>"What you'll get"</strong></p>
                 <ul class="text-left list-pad-1">
                     <li>"20 to 100 hours of expert consulting from our team every month"</li>
@@ -62,8 +76,8 @@ pub fn ShortLandingPage() -> impl IntoView {
                     <li>"DevOps and SRE best practices coaching and resources"</li>
                 </ul>
             </div>
-            <h1>"TODO"</h1>
-            <button>"Book a demo"</button>
+            <BookADemo />
         </div>
+        <Footer/>
     }
 }

sreez/style/main.scss

@@ -25,6 +25,10 @@ body {
   font-size: 1.4rem;
 }
 
+.line-2-5 {
+  line-height: 2.5rem;
+}
+
 .font-4xl {
   font-size: 3rem;
 }
@@ -59,6 +63,20 @@ ol {
   flex-direction: column;
 }
 
+.no-decoration {
+  text-decoration: none;
+}
+
+.icon-as-image {
+  color: black;
+  text-decoration: none;
+  font-size: 32px !important;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
 .items-center {
   align-items: center;
 }
@@ -77,6 +95,24 @@ ol {
   margin-bottom: 4rem;
 }
 
+.pad-y-4 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.pad-y-1 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.pad-left-3 {
+  padding-left: 3rem;
+}
+
+.pad-left-1 {
+  padding-left: 1rem;
+}
+
 .margin-x-3 {
   margin-left: 3rem;
   margin-right: 3rem;
@@ -96,6 +132,10 @@ ol {
   max-width: 300px;
 }
 
+.max-width-150 {
+  max-width: 150px;
+}
+
 .max-width-400 {
   max-width: 400px;
 }
@@ -129,10 +169,18 @@ ol {
   margin-right: auto;
 }
 
+.margin-top-8 {
+  margin-top: 8rem;
+}
+
 .margin-top-5 {
   margin-top: 5rem;
 }
 
+.margin-top-2 {
+  margin-top: 2rem;
+}
+
 .card {
   .card-icon {
     font-size: 7rem;
@@ -245,14 +293,43 @@ ol.huge-list-markers li{
 
 .btn {
   border: none;
-  padding: 0.7rem 1rem;
+  padding: 1rem 1.5rem;
   border-radius: 0.75rem;
   font-weight: 700;
   font-size: inherit;
-  text-transform: capitalize;
   cursor: pointer;
+    background-color: #e72235;
+    color: white;
   &:hover {
-    background-color: #007488CC;
+    // background-color: #eee;
+    // color: black;
+    box-shadow: 5px 5px 27px 10px rgba(231,34,53,0.21);
+    //background-color: #66d500;
+    //background-color: white;
+  }
+}
+
+.lr-sections {
+  > div {
+    margin-right: 0;
+    display: flex;
+    flex-direction: row;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    min-width: 100%;
+    justify-content: space-around;
+    text-align: left;
+    align-items: center;
+
+    .card-icon {
+      padding-left: 7rem;
+      padding-right: 7rem;
+    }
+  }
+
+  > div:nth-child(even) {
+    flex-direction: row-reverse;
   }
 }
 
@@ -263,3 +340,14 @@ ol.huge-list-markers li{
   'GRAD' 0,
   'opsz' 24
 }
+
+.animate-vertical {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.5s ease-in-out;
+}
+
+/* CSS for when data-visible attribute is true */
+.animate-vertical[data-visible] {
+  max-height: 900px;
+}