style(corp/rih): integrate initial new frontend styles r/6386

Change-Id: Ie36fb58efab9a1c2d563dc3d891301b152de1c52
Reviewed-on: https://cl.tvl.fyi/c/depot/+/8918
Reviewed-by: tazjin <tazjin@tvl.su>
Autosubmit: tazjin <tazjin@tvl.su>
Tested-by: BuildkiteCI

2 files changed, 236 insertions, 157 deletions

diff --git a/corp/rih/frontend/src/home.html b/corp/rih/frontend/src/home.html
index 697daf5148f3..3d63462b7d85 100644
--- a/corp/rih/frontend/src/home.html
+++ b/corp/rih/frontend/src/home.html
@@ -1,4 +1,5 @@
 html! {
+<>
 <main>
   <script>
     {r#"function captchaOnload(sitekey, callback) {
@@ -13,194 +14,273 @@ html! {
     }"#}
   </script>
 
-  <div class="container px-4 pt-5 my-5 text-center">
-    <div class="row">
-      <div class="col-7 ms-auto">
-        <h1 class="display-5 fw-bold text-body-emphasis">{"Russia is Hiring"}</h1>
-        <p class="lead my-4">
-          {"Are you an IT-specialist on the hunt for a job? Well, "}
-          <a href="https://archive.is/SAONj" class="text-black">{"times are tough"}</a>
-          {" in Western countries at the moment. Meanwhile tech is booming in Russia, and national support programs make life as an IT-specialist very comfortable. Why not look East?"}
-        </p>
-        <p class="lead mb-4">{"We can help you find an employer in Russia, sort out the formalities and get you started. Sign up and tell us a bit about your profile, or read on below about the benefits of life in Russia."}</p>
+  <div class="first_block" id="top">
+    <div class="h-100">
+      <div class="container h-100">
+	<div class="row h-100 align-items-stretch">
+	  <div class="col-12 col-md-8 col-lg-6">
+	    <div class="d-flex flex-column justify-content-around text-block">
+	      <div class="col-auto pt-5 pt-mb-0">
+		<div class="mb-3 font-size-250 font-india text-center text-md-start">
+		  {"Are you an IT-specialist on the hunt for a job?"}
+		</div>
 
-        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
-          <button type="button" class="btn btn-primary btn-lg px-4 gap-3">{"Sign up"}</button>
-        </div>
-      </div>
-      <div class="col-2 me-auto">
-        <img src="/rih-logo.png" height="400px" />
+		<div class="mb-3 text-grey1">
+		  {"Well, times are tough in Western countries at the moment. Meanwhile tech is booming in Russia, and national support programs make life as an IT-specialist very comfortable.  Why not look East?"}
+		</div>
+
+		<div class="mb-3 text-grey1">
+		  {"We can help you find an employer in Russia, sort out the formalities and get you started. Sign up and tell us a bit about your profile, or read on below about the benefits of life in Russia."}
+		</div>
+
+		<a href="#signup" class="d-block text-decoration-none text-red font-size-150 mb-3 font-india text-center text-md-start">
+		  {"Sign up →"}
+		</a>
+
+	      </div>
+	      <img src="img/mat.png" class="hidden-md hidden-lg hidden-xl hidden-xxl my-3" width="" height="" />
+	      <div class="col-auto text-center text-md-start">
+		<div class="text-red mb-3 font-size-250 font-india">
+		  {"Russia is well placed to draw highly-qualified specialists"}
+		</div>
+		<div class="mb-3 font-size-125">
+		  {"looking to relocate from any part of the World."}
+		</div>
+	      </div>
+	    </div>
+	  </div>
+	</div>
       </div>
     </div>
   </div>
-  <div class="b-section-divider"></div>
-
-  <div class="container px-5 py-5">
-    <h2 class="pb-2 border-bottom">{"Life in Russia"}</h2>
-    <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
-      <div class="col d-flex flex-column align-items-start gap-2">
-        <h3 class="fw-bold">{"Moscow is very cool and good indeed"}</h3>
-        <p class="text-body-secondary">{"Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words."}</p>
-        <a href="#sign-up" class="btn btn-primary btn-lg">{"Primary button"}</a>
-      </div>
-      <div class="col">
-        <div class="row row-cols-1 row-cols-sm-2 g-4">
-          <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            </div>
-            <h4 class="fw-semibold mb-0">{"Look they have banyas"}</h4>
-            <p class="text-body-secondary">{"Paragraph of text beneath the heading to explain the heading."}</p>
-          </div>
-
-          <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            </div>
-            <h4 class="fw-semibold mb-0">{"Wow such cultural diversity"}</h4>
-            <p class="text-body-secondary">{"Paragraph of text beneath the heading to explain the heading."}</p>
-          </div>
 
-          <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            </div>
-            <h4 class="fw-semibold mb-0">{"Many nice landscapes indeed"}</h4>
-            <p class="text-body-secondary">{"Paragraph of text beneath the heading to explain the heading."}</p>
-          </div>
+  <div class="second_block mb-3 mb-sm-4 mb-md-5">
+    <div class="container">
+      <div class="px-3">
+	<div class="row py-3 py-sm-4">
+	  <div class="col-12 col-md-4 text-red font-size-150 mb-3 font-india">
+	    {"Russia is"}
+            <br/>
+            {"an industrialized country"}
+	  </div>
+	  <div class="col-12 col-md-8 font-size-125">
+	    <div class="mb-3">
+	      {"and the sole European power whose economic cycle is synchronized with Asian economic growth rather than with Western economic contraction."}
+	    </div>
+	    <div class="mb-3">
+	      {"Despite the recent sanctions and political tensions, Russia is developing rapidly and needs skilled workers to help fuel its growth. The country has a diverse economy, with strong industries in areas such as energy, technology, finance, and manufacturing. Russian economy has much less risks compared to the Western economies, it is isolated from the Western financial sector and is not a Bubble economy."}
+	    </div>
+	  </div>
+	</div>
+      </div>
+    </div>
+  </div>
 
-          <div class="col d-flex flex-column gap-2">
-            <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
-            </div>
-            <h4 class="fw-semibold mb-0">{"And such low taxes!"}</h4>
-            <p class="text-body-secondary">{"Paragraph of text beneath the heading to explain the heading."}</p>
-          </div>
-        </div>
+  <div class="mb-3 mb-sm-4 mb-md-5">
+    <div class="container">
+      <div class="row">
+	<div class="col-12 col-md-6">
+	  <div class=" font-size-150 mb-3 font-india">
+	    {"There are opportunities for professionals in a variety of fields, from engineering and IT to marketing and finance."}
+	  </div>
+	  <div class=" font-size-125 mb-3">
+	    {"So, if you're a skilled professional looking for new opportunities and want to have for you and your family a great quality of life, consider working in Russia."}
+	  </div>
+	</div>
+	<div class="col-12 col-md-6">
+	  <div class=" font-size-150 mb-3 font-india">
+	    {"The country welcomes foreign workers and their families and is ready to offer you the support you need to succeed."}
+	  </div>
+	  <div class=" font-size-125 mb-3">
+	    {"Don't let politics or misconceptions hold you back - come see what Russia has to offer and help build a brighter future for all."}
+	  </div>
+	</div>
       </div>
     </div>
   </div>
-  <div class="b-section-divider"></div>
-
-  <div class="container px-4 py-5">
-    <div class="row">
-      <div class="mx-auto col-7">
-        <a id="sign-up"/>
-        <h2 class="pb-2 border-bottom">{"Finding Work in Russia"}</h2>
-        <p>
-          {"Usually landing the most interesting jobs requires you to have a well-developed network of contacts, but this is tough when you set your eyes on a new country. Luckily we at "}
-          <a class="text-black" href={VISTA_URL}>{"Vista Immigration"}</a>
-          {" have contacts with many tech companies in Russia, large and small, and can help you with this!"}</p>
-        <p>{"Tell us a bit about yourself, the technologies you'd like to work with, and your situation in regards to relocating to Russia. We will then match up your profile with companies that match your interests, and establish contact between you and a potential employer if there is a good fit. No generic recruiter spam, guaranteed - we'd rather not send you anything, than send you something irrelevant!"}</p>
-        <p>
-          {"If you get hired, our experts can assist you with legal and other support for your move. Добро пожаловать в Россию!"}
-        </p>
+
+  <div class="mb-3 mb-sm-4 mb-md-5">
+    <div class="container">
+      <div class="row align-items-center">
+	<div class="col-12 col-md-4">
+	  <img src="img/it.png" alt="" title=""/>
+	</div>
+	<div class="col-12 col-md-8">
+	  <div class=" font-size-150 text-red mb-3 font-india">
+	    {"As an IT specialist you can qualify for"}
+	  </div>
+	  <div class=" font-size-125 mb-3 font-india">
+	    {"a Highly Qualified Specialist work permit"}
+	  </div>
+	  <div class=" font-size-125 mb-3 font-india">
+	    {"a 3 year work visa that gives you a flat 13% tax rate from day 1 on your salary"}
+	  </div>
+	  <div class=" font-size-125 mb-3 font-india">
+	    {"Moreover, in case your Russian employer is an accredited IT company you are eligible to obtain a permanent residency in Russia within 3-4 months after employment"}
+	  </div>
+	</div>
       </div>
     </div>
+  </div>
 
-    <div class="row my-3">
-      <div class="col-7 mx-auto">
-        <p>{"Let's get started with you telling us a bit about what kind of job you would like!"}</p>
+  <div class="mb-3 mb-sm-4 mb-md-5">
+    <div class="container">
+      <div class="row align-items-center flex-md-row-reverse">
+	<div class="col-12 col-md-6 hidden-xs hidden-sm">
+	  <img src="img/work.png" alt="" title=""/>
+	</div>
+	<div class="col-12 col-md-6">
+	  <div class=" font-size-200 text-red mb-3 font-india">
+	    {"Finding Work in"}
+            <span class="hidden-xs hidden-sm">{"Russia"}</span>
+	  </div>
+	  <img src="img/rus.png" class="mb-3 hidden-md hidden-lg hidden-xl hidden-xxl" alt="" title=""/>
+	  <div class="font-size-125 mb-3 font-india">
+	    {"Usually landing the most interesting jobs requires you to have a well-developed network of contacts, but this is tough when you set your eyes on a new country."}
+          </div>
+	  <div class="font-size-125 mb-3 font-india">
+	    {"Luckily we at Vista Immigration have contacts with many tech companies in Russia, large and small, and can help you with this!"}
+	  </div>
+	  <div class="font-size-125 mb-3 font-india">
+	    {"Tell us a bit about yourself, the technologies you'd like to work with, and your situation in regards to relocating to Russia. We will then match up your profile with companies that match your interests, and establish contact between you and a potential employer if there is a good fit. No generic recruiter spam, guaranteed - we'd rather not send you anything, than send you something irrelevant!"}
+	  </div>
+	  <div class="font-size-125 mb-3 font-india">
+	    {"If you get hired, our experts can assist you with legal and other support for your move."}
+	  </div>
+	</div>
       </div>
+    </div>
+  </div>
 
-      if !self.submitted {
-      <div class="mx-auto col-6 border rounded-3 shadow">
-        <form class="m-3">
+  <hr/>
 
-          <div class="mb-3">
-            <label for="job" class="form-label">{"What job(s) are you looking for?"}</label>
-            <input
-              type="text" class="form-control" id="job"
-              placeholder="Backend/frontend engineer, Test automation, DevOps/SRE, UI/UX ..."
-              oninput={link.callback(|event| input_message(event, Msg::SetPosition))} />
-          </div>
+  if !self.submitted {
+  <div class="container font-size-200 text-center mb-3 mb-sm-4 mb-md-5 font-india" id="signup">
+    {"Welcome to Russia"}
+    <br/>
+    {"Добро пожаловать в Россию!"}
+  </div>
 
-          <div class="mb-3">
-            <label for="technologies" class="form-label">{"Which technologies do you want to work with?"}</label>
-            <div>{render_technologies(link, &self.record.technologies)}</div>
+  <div class="container font-size-150  mb-3 mb-sm-4 mb-md-5 font-india">
+    {"Let's get started with you telling us a bit"}
+    <br/>
+    {"about what kind of job you would like!"}
+  </div>
 
-            <input type="text" class="form-control" id="technologies"
-                   aria-describedby="technologiesHelp"
-                   onkeypress={link.callback(add_tech)}/>
-            <div id="technologiesHelp" class="form-text">{"Press enter after each technology."}</div>
-          </div>
+  <form class="font-size-125  mb-3 mb-sm-4 mb-md-5" >
+    <div class="container">
 
-          <div class="mb-3">
-            <label for="jobDetails" class="form-label">{"What's your work background?"}</label>
-            <textarea class="form-control" id="workBackground" rows=3
-                      aria-describedby="workBackgroundHelp"
-                      oninput={link.callback(|event| textarea_message(event, Msg::SetWorkBackground))} >
-            </textarea>
-            <div id="workBackgroundHelp" class="form-text">{"Tell us about your work experience, and/or leave links to your CV on your site, LinkedIn or wherever."}</div>
-          </div>
+      <div class="mb-3">
+        <label for="job" class="form-label">{"What job(s) are you looking for?"}</label>
+        <input
+          type="text" class="form-control" id="job"
+          placeholder="Backend/frontend engineer, Test automation, DevOps/SRE, UI/UX ..."
+          oninput={link.callback(|event| input_message(event, Msg::SetPosition))} />
+      </div>
 
-          <div class="mb-3">
-            <label for="jobDetails" class="form-label">{"Other job details:"}</label>
-            <textarea class="form-control" id="jobDetails" rows=3
-                      aria-describedby="jobDetailsHelp"
-                      oninput={link.callback(|event| textarea_message(event, Msg::SetJobDetails))}>
-            </textarea>
-            <div id="jobDetailsHelp" class="form-text">{"Tell us a bit about what you're looking for in a job and in an employer."}</div>
-          </div>
+      <div class="mb-3">
+        <label for="technologies" class="form-label">{"Which technologies do you want to work with?"}</label>
+        <div>{render_technologies(link, &self.record.technologies)}</div>
 
-          <hr/>
-          <p>{"Now we also need some personal details about you:"}</p>
+        <input type="text" class="form-control" id="technologies"
+               aria-describedby="technologiesHelp"
+               onkeypress={link.callback(add_tech)}/>
+        <div id="technologiesHelp" class="form-text">{"Press enter after each technology."}</div>
+      </div>
 
-          <div class="mb-3">
-            <label for="name" class="form-label">{"What's your name?"}</label>
-            <input type="text" class="form-control" id="name"
-                   oninput={link.callback(|event| input_message(event, Msg::SetName))} />
-          </div>
+      <div class="mb-3">
+        <label for="jobDetails" class="form-label">{"What's your work background?"}</label>
+        <textarea class="form-control" id="workBackground" rows=3
+                  aria-describedby="workBackgroundHelp"
+                  oninput={link.callback(|event| textarea_message(event, Msg::SetWorkBackground))} >
+        </textarea>
+        <div id="workBackgroundHelp" class="form-text">{"Tell us about your work experience, and/or leave links to your CV on your site, LinkedIn or wherever."}</div>
+      </div>
 
-          <div class="mb-3">
-            <label for="email" class="form-label">{"What's your email address?"}</label>
-            <input type="email" class="form-control" id="email" aria-describedby="emailHelp"
-                   oninput={link.callback(|event| input_message(event, Msg::SetEmail))}/>
-            <div id="emailHelp" class="form-text">{"No newsletters, no spam - we will only reach out if there's a match!"}</div>
-          </div>
+      <div class="mb-3">
+        <label for="jobDetails" class="form-label">{"Other job details:"}</label>
+        <textarea class="form-control" id="jobDetails" rows=3
+                  aria-describedby="jobDetailsHelp"
+                  oninput={link.callback(|event| textarea_message(event, Msg::SetJobDetails))}>
+        </textarea>
+        <div id="jobDetailsHelp" class="form-text">{"Tell us a bit about what you're looking for in a job and in an employer."}</div>
+      </div>
 
-          <div class="mb-3">
-            <label id="citizenship" class="form-label">{"What citizenship do you hold?"}</label>
-            {citizenship_input(self, link)}
-            <div id="citizenshipHelp" class="form-text">{"We need to know this to estimate immigration-related bureaucracy. If you hold more than one citizenship, pick the one with which you'd want to receive a work visa."}</div>
-          </div>
+      <div class="font-size-150 mb-3 ">
+	{"Now we also need some personal details about you:"}
+      </div>
 
-          <div class="mb-3">
-            <label for="personalDetails" class="form-label">{"Other relevant information:"}</label>
-            <textarea class="form-control" id="personalDetails" rows=3
-                      aria-describedby="personalDetailsHelp"
-                      oninput={link.callback(|event| textarea_message(event, Msg::SetPersonalDetails))} >
-            </textarea>
-            <div id="personalDetailsHelp" class="form-text">{"Any specific places where you'd like to live? Would you be moving with family? Any other assistance required?"}</div>
-          </div>
+      <div class="mb-3">
+        <label for="name" class="form-label">{"What's your name?"}</label>
+        <input type="text" class="form-control" id="name"
+               oninput={link.callback(|event| input_message(event, Msg::SetName))} />
+      </div>
+
+      <div class="mb-3">
+        <label for="email" class="form-label">{"What's your email address?"}</label>
+        <input type="email" class="form-control" id="email" aria-describedby="emailHelp"
+               oninput={link.callback(|event| input_message(event, Msg::SetEmail))}/>
+        <div id="emailHelp" class="form-text">{"No newsletters, no spam - we will only reach out if there's a match!"}</div>
+      </div>
+
+      <div class="mb-3">
+        <label id="citizenship" class="form-label">{"What citizenship do you hold?"}</label>
+        {citizenship_input(self, link)}
+        <div id="citizenshipHelp" class="form-text">{"We need to know this to estimate immigration-related bureaucracy. If you hold more than one citizenship, pick the one with which you'd want to receive a work visa."}</div>
+      </div>
 
-          <div id="captcha-container" class="smart-captcha mb-3" style="height: 100px" />
+      {"" /* TODO(tazjin): language knowledge selector */}
 
-          <button type="submit" class="btn btn-primary"
-                  disabled={!(self.record.is_complete() && self.captcha_token.is_some())}
-                  onclick={link.callback(|_| Msg::Submit)}>
-            {"Submit"}
-          </button>
-          <p class="pt-2"><i>{"This page is still under construction! Please reach out at contact@ if you have any questions."}</i></p>
-        </form>
+      <div class="mb-3">
+        <label for="personalDetails" class="form-label">{"Other relevant information:"}</label>
+        <textarea class="form-control" id="personalDetails" rows=3
+                  aria-describedby="personalDetailsHelp"
+                  oninput={link.callback(|event| textarea_message(event, Msg::SetPersonalDetails))} >
+        </textarea>
+        <div id="personalDetailsHelp" class="form-text">{"Any specific places where you'd like to live? Would you be moving with family? Any other assistance required?"}</div>
       </div>
-      } else {
-      <div class="mx-auto col-6 border rounded-3 shadow">
-        <p>{"Thank you for submitting your data! We will reach out to confirm your email address, and further if any matches are found. You can contact us at contact@russiaishiring.com with any questions you might have."}</p>
+
+      <div class="form-check mb-3">
+	<input class="form-check-input" type="checkbox" id="privacy-policy" required=true />
+	<label class="form-check-label" for="privacy-policy">
+	  {"I have read and agree to the Privacy Policy"}
+	</label>
+      </div>
+
+      <div id="captcha-container" class="smart-captcha mb-3" style="height: 100px; width=350px;"/>
+
+      <div class="mb-3 text-center">
+        <button type="submit" class="mb-3 btn text-red font-india"
+                disabled={!(self.record.is_complete() && self.captcha_token.is_some())}
+                onclick={link.callback(|_| Msg::Submit)}>
+          {"Submit →"}
+        </button>
       </div>
-      }
 
     </div>
+  </form>
+  } else {
+  <div class="mx-auto col-6 border rounded-3 shadow">
+    <p>{"Thank you for submitting your data! We will reach out to confirm your email address, and further if any matches are found. You can contact us at contact@russiaishiring.com with any questions you might have."}</p>
   </div>
-  <div class="b-section-divider"></div>
-
-  <footer class="mt-auto text-center">
-    <div class="py-3">
-      <p>
+  }
+</main>
+<footer class="footer m-0 py-3">
+  <div class="container">
+    <div class="row text-center">
+      <div class="col-12 col-sm-4 text-sm-start">{"privacy policy"}</div>
+      <div class="col-12 col-sm-4">
         {"By "}
-        <a href={VISTA_URL} class="text-black">{"Vista Immigration"}</a>
+        <a href={VISTA_URL} class="text-white">{"Vista Immigration"}</a>
         {", with help from "}
-        <a href="https://tvl.su/" class="text-black">{"TVL"}</a>
+        <a href="https://tvl.su/" class="text-white">{"TVL"}</a>
         {"."}
-      </p>
+        <br/>
+        {"© 2023"}
+      </div>
+      <div class="col-12 col-sm-4 text-sm-end"><a href="#top" class="text-decoration-none">{"Go to top↑"}</a></div>
     </div>
-  </footer>
-
-</main>
+  </div>
+</footer>
+</>
 }
diff --git a/corp/rih/frontend/src/main.rs b/corp/rih/frontend/src/main.rs
index efccaaece287..65f9c79a540e 100644
--- a/corp/rih/frontend/src/main.rs
+++ b/corp/rih/frontend/src/main.rs
@@ -4,7 +4,6 @@ use gloo::console;
 use gloo::history::{BrowserHistory, History};
 use gloo::net::http;
 use gloo::storage::{LocalStorage, Storage};
-use gloo::utils::format::JsValueSerdeExt;
 use rand::seq::IteratorRandom;
 use rand::thread_rng;
 use serde::{Deserialize, Serialize};
@@ -345,7 +344,7 @@ async fn submit_data(captcha_token: &str, record: &Record) -> bool {
 }
 
 /// Handle the submit event, if all data was successfully collected.
-fn handle_submit(app: &App, link: Scope<App>) -> Msg {
+fn handle_submit(app: &App, _link: Scope<App>) -> Msg {
     let token = app.captcha_token.as_ref().unwrap().clone();
     let record = app.record.clone();