Merge pull request WING-NUS#321 from sibinhho99/landing-page

Implement landing page based on Issue WING-NUS#291 + Set up frontend testing

.github/workflows/verify.yml

@@ -93,14 +93,24 @@ jobs:
           sudo /etc/init.d/mysql start
           mysql -e 'CREATE DATABASE ssid_test;' -u root -proot
           bundle exec rails db:create
-          bundle exec rails db:schema:load
+          bundle exec rails db:migrate
+          bundle exec rails db:seed
 
       - name: Install chrome
+        id: setup-chrome
         uses: browser-actions/setup-chrome@v1
 
+      - name: Show chrome version
+        run: |
+          echo Installed chromium version: ${{ steps.setup-chrome.outputs.chrome-version }} ${{ steps.setup-chrome.outputs.chrome-path }} --version
+
       - name: Setup chromedriver
         uses: nanasess/setup-chromedriver@v2
 
+      - name: Run local server for testing
+        run: |
+          bundle exec rails server -d -p 3000 -e test
+          sleep 5
       - name: Run tests
         run: bundle exec rspec
 

Gemfile

@@ -63,6 +63,13 @@ gem 'bootsnap', '>= 1.4.2', require: false
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
+
+  # Testing
+  gem 'capybara', '>= 2.15'
+  gem 'rspec-rails', '~> 4.0.2'
+  gem 'selenium-webdriver'
+  gem 'webdrivers'
+
   # Linter for Ruby code
   gem 'pronto'
   gem 'pronto-eslint', require: false
@@ -76,8 +83,6 @@ group :development, :test do
   # Security scanners
   gem 'brakeman'
   gem 'bundle-audit'
-  # Testing
-  gem 'rspec-rails', '~> 4.0.2'
 
   # Coverage
   gem 'simplecov',      require: false
@@ -89,14 +94,6 @@ group :development do
   gem 'web-console', '>= 3.3.0'
 end
 
-group :test do
-  # Adds support for Capybara system testing and selenium driver
-  gem 'capybara', '>= 2.15'
-  gem 'selenium-webdriver'
-  # Easy installation and use of web drivers to run system tests with browsers
-  gem 'webdrivers'
-end
-
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 

app/assets/javascripts/site.js.coffee

@@ -52,10 +52,16 @@ Site.setClipHeight = (page) ->
   return
 
 $(document).ready ->
-  if $("ul#menu").length > 0
-    $(".site_header").addClass("site_header_background");
   Site.setClipHeight($(this));
 
+  if $(".site-introduction").length > 0
+    $("body").css('background-image', "radial-gradient(
+        at top right,
+        #d4e5ea,
+        white 75%
+        )");
+    $("body").css('background-repeat', "no-repeat");
+
   # if (window.location.pathname && !window.location.pathname.includes('cover'))
   #   $(".site-login").addClass("site-login-hidden")
   return

app/assets/stylesheets/application.scss

@@ -55,4 +55,29 @@
     border-color: #d6e9c6;
     color: #468847;
     text-align: left;
- }
+ }
+
+.btn-signup {
+    @extend .btn-primary;
+    background-color: #003d7c !important;
+    height: 3rem; 
+    color: white;
+}
+
+.btn-signup:hover {
+    background-color: white !important;
+    color: #003d7c !important;
+}
+
+.btn-signup:active {
+    border-style: outset !important; 
+}
+
+.btn-login {
+    background-color: transparent;
+    height: 3rem; 
+    color: #003d7c;
+    padding: 1rem;
+}
+
+// background-color: transparent; color: #003d7c; height: 3rem; padding: 1rem

app/assets/stylesheets/site.css.scss

@@ -14,6 +14,10 @@
 // along with SSID.  If not, see <http://www.gnu.org/licenses/>.
 @import "bootstrap_custom";
 
+html { 
+  height: 100%;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -51,76 +55,206 @@ h2, h3, h4, h5, h6 {
   }
 }
 
-.site_header_background {
-  background-color: var(--bs-gray-200);
-}
-
-.site_logo {
-  padding: 1.25rem 0.5rem;
+.site-subtitle {
+  font-size: 1.125rem;
+  color: #003d7c;
 }
 
 .site-introduction {
   width: 100%;
   display: flex;
   flex-direction: row;
-  margin-bottom: $spacer * 2;
+  margin-top: $spacer * 2.5;
+  margin-bottom: $spacer * 10;
+
+  .site_logo {
+    padding: 1.25rem 0.5rem;
+  }
+
+  .btn-start {
+    @extend .btn-primary;
+    background-color: #003d7c !important;
+    height: 3.5rem;
+    padding: 1rem;
+    width: 100%;
+    margin-top: 2rem;
+  }
+
+  .btn-start:hover {
+    @extend .btn-primary;
+    color: #003d7c !important;
+    background-color: white !important;
+  }
+
+  .site-subtitle2 {
+    margin-top: 2rem;
+    padding-left: 1.5rem;
+    color: #003d7c;
+  }
 
   .site-motto {
-    width: 40%;
-    font-size: 1.25rem;
-    font-weight: 500;
-    font-style: italic;
-    padding: 0.5rem 0 0 0.5rem;
+    width: 38%;
+    font-size: 3.5rem;
+    font-weight: 700;
+    line-height: 3.75rem;
+    color: #003d7c;
+    margin-top: $spacer * 2.5;
+
   }
 
-  div.site-clip {
-    width: 60%;
+  .site-motto em {
+    color: #003d7c;
+    font-style: normal;
+  }
 
-    iframe {
-      width: 100%;
-      height: 100%;
-    }
+  div.site-clip {
+    width: 62%;
+    padding: 3rem 3rem 1rem 1rem;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
 .site-features-wrapper {
   width: 100%;
   display: flex;
   flex-direction: row;
+  margin-top: $spacer * 10;
+  margin-bottom: $spacer * 10;
 
-  .site-statistics {
+  .site-screenshot {
     width: 50%;
   }
 
+  .site-screenshot-img {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .site-features {
     width: 50%;
+    margin-left: 2 rem;
+  }
+}
+
+@media screen and (max-width: 1100px) {
+  .site-testimonials {
+      display: none !important;
+  }
+}
+
+.site-testimonials {
+  width: 100vw;
+  position: relative;
+  left: calc(-50vw + 50%);
+  height: 500px;
+  background-color: #003d7c;
+  text-align: "center";
+
+  .testimonial-heading {
+    text-align: center; 
+    width: 100%;
+    padding: 3.5rem;
+  }
+
+  .testimonial-cards {
+    display: flex;
+    justify-content: center;
+  }
+
+  .card {
+    width:28%;
+    height:450px;
+  }
+
+  .testimonial-author {
+    position: absolute;
+    bottom: 2rem;
+  }
+
+}
+
+.site-faq {
+  height: 550px;
+  margin-top: $spacer * 8;
+  .faq-heading {
+    text-align: center; 
+    width: 100%;
+    padding-top: $spacer * 4;
+    padding-bottom: $spacer * 4;
+  }
+  .accordion-button {
+    background: white !important;
+    color: black !important;
   }
 }
 
 .site-footer {
-  width: 100%;
+  width: 100vw;
+  height: 350px;
+  position: relative;
+  left: calc(-50vw + 50%);
   display: flex;
   flex-direction: row;
+  background-color: #003d7c;
+  color: white !important;
+
+  .actioncall-heading {
+    text-align: center; 
+    width: 100%;
+    padding-top: $spacer * 3;
+    padding-bottom: $spacer * 3;
+  }
 
-  span {
-    width: 50%;
-    margin: 0 0 1rem;
-    @extend .text-muted;
+  .btn-actioncall {
+    @extend .btn-primary;
+    position: absolute;
+    top: 7rem;
+    left: 0; 
+    right: 0; 
+    margin-left: auto; 
+    margin-right: auto;
+    background-color: white !important;
+    color: #003d7c;
+    height: 3.5rem;
+    padding: 1rem;
+    width: 200px;
+    margin-top: 2rem;
   }
 
-  ul {
-    width: 50%;
-    height: fit-content;
-    list-style: none;
-    text-align: right;
-    padding: 0 1rem 0 2rem;
+  .btn-actioncall:hover {
+    @extend .btn-primary;
+    color: #003d7c;
+  }
+  .footer {
+    .copyright {
+      position: absolute;
+      bottom: 1rem;
+      left: 3.5rem;
+      color: white !important;
+    }
 
-    li {
-      display: inline-block;
-      a {
-        text-decoration: none;
+    ul {
+      list-style: none;
+      position: absolute;
+      bottom: 0;
+      right: 3.5rem;
+      li {
+        display: inline-block;
+        a {
+          text-decoration: none;
+        }
       }
     }
+
+    a {
+      color: white !important;
+      text-decoration: inherit;
+      margin:0;
+    }
+
   }
 }
 
@@ -159,10 +293,10 @@ table {
 #site-banner-login {
   margin: 0;
   height: 75%;
-  width: 60%;
+  width: 80%;
   padding: 1.25rem 0.5rem;
   font-size: 2rem;
-  font-weight: 500;
+  font-weight: 700;
   color: #003d7c;
 }
 

app/helpers/application_helper.rb

@@ -5,7 +5,7 @@ module ApplicationHelper
   EMAIL_DEFAULT_SENDER = "[email protected]"
 
   # copyright
-  COPYRIGHT_DATE_RANGE = "2009–2022"
+  COPYRIGHT_DATE_RANGE = '2009–2023'.freeze
   COPYRIGHT_HOLDER = "Web Information Retrieval and Natural Language Processing Group"
 
   def self.is_application_healthy