feat: set updates (#55)

* feat: set updates * refactor: translate team, update photo * refactor: update seo, change titles
graasp · Dec 12, 2024 · c80608c · c80608c
1 parent d44bf83
commit c80608c
Show file tree

Hide file tree

Showing 25 changed files with 762 additions and 164 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -3,7 +3,7 @@ name: Deploy
 on:
   push:
     branches:
-      - "main"
+      - 'main'
 
   workflow_dispatch:
 
@@ -33,6 +33,6 @@ jobs:
           build-folder: 'dist'
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_PROD }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_PROD }}
-          aws-region: ${{ secrets.AWS_REGION_PROD }}
+          aws-region: ${{ vars.AWS_REGION }}
           aws-s3-bucket-name: ${{ secrets.AWS_S3_BUCKET_NAME }}
-          cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION }}
+          cloudfront-distribution-id: ${{ secrets.CLOUDFRONT_DISTRIBUTION }}
diff --git a/package.json b/package.json
@@ -27,6 +27,8 @@
     "@popperjs/core": "2.11.8",
     "@types/bootstrap": "5.2.7",
     "astro": "^3.1.4",
+    "astro-navbar": "2.3.3",
+    "astro-seo": "0.8.4",
     "bootstrap": "5.3.2",
     "i18next": "23.5.1"
   },

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -13,20 +13,22 @@ const t = useTranslations(lang);
       <Image class="logo" src={graaspLogo} alt="Graasp Climate logo" />
       <h4 class="logo-text">GRAASP CLIMATE</h4>
     </div>
+
     <button
       class="navbar-toggler"
       type="button"
-      data-toggle="collapse"
-      data-target="#collapsingNavbarSm"
-      aria-controls="navbarToggleExternalContent"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarSupportedContent"
+      aria-controls="navbarSupportedContent"
       aria-expanded="false"
       aria-label="Toggle navigation"
     >
       <span class="navbar-toggler-icon"></span>
     </button>
+
     <div
       class="navbar-collapse collapse justify-content-end"
-      id="collapsingNavbarSm"
+      id="navbarSupportedContent"
     >
       <div class="p-4">
         <ul class="navbar-nav">
@@ -36,8 +38,8 @@ const t = useTranslations(lang);
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#services">
-              {t('Simulations')}
+            <a class="nav-link" href="#physics">
+              {t('PHYSICS_SIMULATIONS_TITLE')}
             </a>
           </li>
           <li class="nav-item">

diff --git a/src/components/subpages/Chemistry.astro b/src/components/subpages/Chemistry.astro
@@ -0,0 +1,34 @@
+---
+import { getLangFromUrl, useTranslations } from '../../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<div
+  id="services"
+  class="container-fluid"
+  style={{ backgroundColor: '#82bee5', opacity: '0.7', color: 'white' }}
+>
+  <div class="container">
+    <div class="flexbox" style={{ display: 'flex', alignItems: 'center' }}>
+      <h2 class="text-center my-5">{t('CHEMISTRY_SIMULATIONS_TITLE')}</h2>
+      <div
+        class="row"
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '105%',
+        }}
+      >
+        Coming soon...
+      </div>
+    </div>
+  </div>
+
+  <style>
+    .text-wrapper {
+      margin: 20px 0;
+    }
+  </style>
+</div>
diff --git a/src/components/subpages/End.astro b/src/components/subpages/End.astro
@@ -7,26 +7,19 @@ const t = useTranslations(lang);
 
 <div
   class="container-fluid"
-  style={{ backgroundColor: '#cbe6ef', color: 'white', paddingBottom: 30 }}
+  style={{ backgroundColor: '#cbe6ef', paddingBottom: 30 }}
 >
   <div class="container">
     <div class="flexbox">
       <h1 class="text-center my-5" style={{ color: 'black' }}>
         {t('Contact us')}
       </h1>
-      <div class="row my-4">
-        <div class="col-lg-6 mb-4">
-          <input type="text" class="inputBox" placeholder={t('Your Name')} />
-        </div>
-        <div class="col-lg-6 mb-4">
-          <input type="email" class="inputBox" placeholder={t('Your Email')} />
-        </div>
-      </div>
-      <textarea rows="2" class="inputBox mb-4" placeholder={t('Your Message')}
-      ></textarea>
-      <button class="btn btn-light mb-4 py-3" type="submit">
-        {t('Submit')}
-      </button>
+      {t('CONTACT_FORM_TEXT')}
+      <a class="text-center mt-3" href="mailto:[email protected]">
+        <button class="btn btn-light mb-4 py-3" type="submit">
+          {t('SEND_EMAIL_BUTTON')}
+        </button></a
+      >
     </div>
   </div>
 </div>
diff --git a/src/components/subpages/LandingPage.astro b/src/components/subpages/LandingPage.astro
@@ -11,11 +11,7 @@ const t = useTranslations(lang);
     <Navbar />
     <div class="centerItems">
       <h1 class="landing-page-text">
-        {
-          t(
-            'Active learning simulations for investigating the science of global warming',
-          )
-        }
+        {t('TITLE')}
       </h1>
       <p class="description">
         {

diff --git a/src/components/subpages/Services.astro → src/components/subpages/Physics.astro b/src/components/subpages/Services.astro → src/components/subpages/Physics.astro
@@ -16,13 +16,13 @@ const tutorialLink =
 ---
 
 <div
-  id="services"
+  id="physics"
   class="container-fluid"
   style={{ backgroundColor: '#035603', opacity: '0.7', color: 'white' }}
 >
   <div class="container">
     <div class="flexbox" style={{ display: 'flex', alignItems: 'center' }}>
-      <h2 class="text-center my-5">{t('Simulations')}</h2>
+      <h2 class="text-center my-5">{t('PHYSICS_SIMULATIONS_TITLE')}</h2>
       <div
         class="row"
         style={{
@@ -33,29 +33,25 @@ const tutorialLink =
       >
         <ServiceItem
           title={t('Oscillating charge')}
-          description={t(
-            'Electromagnetic waves emitted by an oscillating charge',
-          )}
+          description={t('OSCILLATING_CHARGE_DESCRIPTION')}
           web={`https://apps.graasp.org/4b63857b-1bd9-44cf-a72d-4fb7ff531b13/latest/index.html${qs}`}
           github="https://github.com/graasp/graasp-app-radiating-charge"
         />
         <ServiceItem
           title={t('Thermal radiation')}
-          description={t('Thermal radiation emitted by a planetary surface')}
+          description={t('THERMAL_RADIATION_DESCRIPTION')}
           web={`https://apps.graasp.org/ff4d50d9-1370-4707-a460-02a041474579/latest/index.html${qs}`}
           github="https://github.com/graasp/graasp-app-thermal-radiation"
         />
         <ServiceItem
-          title={t('Radiation absorption')}
-          description={t('Interaction between radiation and gas molecules')}
+          title={t('GREENHOUSE_EFFECT_TITLE')}
+          description={t('RADIATION_ABSORPTION_DESCRIPTION')}
           web={`https://apps.graasp.org/35288bda-d787-42f9-b5d6-110d689d0eda/latest/index.html${qs}`}
           github="https://github.com/graasp/graasp-app-radiation-absorption"
         />
         <ServiceItem
-          title={t('Energy balance')}
-          description={t(
-            'Global model including radiation, greenhouse gases, clouds and ice',
-          )}
+          title={t('GLOBAL_MODEL_TITLE')}
+          description={t('GLOBAL_MODEL_DESCRIPTION')}
           web={`https://apps.graasp.org/f61d6916-be33-4c63-b697-2c7b09a7b8e5/latest/index.html${qs}`}
           github="https://github.com/graasp/graasp-app-greenhouse-effect"
         />

diff --git a/src/components/subpages/Team.astro b/src/components/subpages/Team.astro