Design landing page

alexandreruban · alexandreruban · commit acd0fbeaac11 · 2023-05-01T21:12:12.000+02:00
diff --git a/Gemfile b/Gemfile
@@ -43,7 +43,7 @@ gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
 gem "bootsnap", require: false
 
 # Use Sass to process CSS
-# gem "sassc-rails"
+gem "sassc-rails"
 
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 # gem "image_processing", "~> 1.2"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -88,6 +88,7 @@ GEM
       irb (>= 1.5.0)
       reline (>= 0.3.1)
     erubi (1.12.0)
+    ffi (1.15.5)
     globalid (1.1.0)
       activesupport (>= 5.0)
     i18n (1.12.0)
@@ -170,6 +171,14 @@ GEM
       io-console (~> 0.5)
     rexml (3.2.5)
     rubyzip (2.3.2)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     selenium-webdriver (4.9.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -184,6 +193,7 @@ GEM
     stimulus-rails (1.2.1)
       railties (>= 6.0.0)
     thor (1.2.1)
+    tilt (2.1.0)
     timeout (0.3.2)
     turbo-rails (1.4.0)
       actionpack (>= 6.0.0)
@@ -222,6 +232,7 @@ DEPENDENCIES
   puma (~> 5.0)
   rails (~> 7.0.4, >= 7.0.4.3)
   redis (~> 4.0)
+  sassc-rails
   selenium-webdriver
   sprockets-rails
   stimulus-rails
diff --git a/app/assets/images/courses/stimulus.png b/app/assets/images/courses/stimulus.png
diff --git a/app/assets/images/icons/email.svg b/app/assets/images/icons/email.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 25 20" height="24" width="24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M1 4.83333L11.0817 11.5544C11.5016 11.8346 11.9952 11.9842 12.5 11.9842C13.0048 11.9842 13.4984 11.8346 13.9183 11.5544L24 4.83333M3.55556 18.8889H21.4444C22.1222 18.8889 22.7722 18.6196 23.2515 18.1404C23.7308 17.6611 24 17.0111 24 16.3333V3.55556C24 2.87778 23.7308 2.22776 23.2515 1.7485C22.7722 1.26925 22.1222 1 21.4444 1H3.55556C2.87778 1 2.22776 1.26925 1.7485 1.7485C1.26925 2.22776 1 2.87778 1 3.55556V16.3333C1 17.0111 1.26925 17.6611 1.7485 18.1404C2.22776 18.6196 2.87778 18.8889 3.55556 18.8889Z" />
+</svg>
diff --git a/app/assets/images/icons/github.svg b/app/assets/images/icons/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="24" width="24">
+  <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
+</svg>
diff --git a/app/assets/images/icons/twitter.svg b/app/assets/images/icons/twitter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="24" width="24">
+  <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
+</svg>
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -0,0 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');
+
+@import "config/variables";
+@import "config/mixins";
+@import "config/reset";
+@import "config/globals";
+
+@import "components/course_card";
+@import "components/btn";
+
+@import "pages/homepage";
diff --git a/app/assets/stylesheets/components/_btn.scss b/app/assets/stylesheets/components/_btn.scss
@@ -0,0 +1,19 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 0.25rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  font-weight: bold;
+  text-decoration: none;
+
+  &--primary {
+    color: var(--color-primary-text-body);
+    background-color: var(--color-primary-background);
+  }
+
+  &--small {
+    font-size: 87.5%;
+  }
+}
diff --git a/app/assets/stylesheets/components/_course_card.scss b/app/assets/stylesheets/components/_course_card.scss
@@ -0,0 +1,56 @@
+.course-card {
+  width: 100%;
+  max-width: 80ch;
+  margin-right: auto;
+  margin-left: auto;
+
+  border-radius: 0.5rem;
+  box-shadow: 0 0.25rem 2rem hsla(202, 16%, 90%, 50%);
+  overflow: hidden;
+
+  @include media(tabletPortrait) {
+    display: flex;
+  }
+
+  &__image-wrapper {
+    flex-shrink: 0;
+    height: 20rem;
+
+    @include media(tabletPortrait) {
+      width: 15rem;
+      height: auto;
+    }
+  }
+
+  &__image {
+    object-fit: cover;
+    object-position: center;
+    height: 100%;
+    width: 100%;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    padding: 1rem;
+  }
+
+  &__title {
+    font-size: 150%;
+    margin-bottom: 1rem;
+  }
+
+  &__description {
+    margin-bottom: 2rem;
+  }
+
+  &__footer {
+    margin-top: auto;
+
+    @include media(tabletPortrait) {
+      align-self: flex-end;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/config/_globals.scss b/app/assets/stylesheets/config/_globals.scss
@@ -0,0 +1,19 @@
+html {
+  font-size: var(--font-size-base);
+}
+
+body {
+  font-family: var(--font-family-serif);
+  line-height: var(--line-height-body);
+  color: var(--color-text-body);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: var(--line-height-header);
+  color: var(--color-text-header);
+}
+
+a {
+  color: inherit;
+}
diff --git a/app/assets/stylesheets/config/_mixins.scss b/app/assets/stylesheets/config/_mixins.scss
@@ -0,0 +1,9 @@
+@mixin media($query) {
+  @if $query == tabletPortrait {
+    @media (min-width: 40em) { @content; }
+  } @else if $query == tabletLandscape {
+    @media (min-width: 66em) { @content; }
+  } @else if $query == desktop {
+    @media (min-width: 94em) { @content; }
+  }
+}
diff --git a/app/assets/stylesheets/config/_reset.scss b/app/assets/stylesheets/config/_reset.scss
@@ -0,0 +1,28 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
diff --git a/app/assets/stylesheets/config/_variables.scss b/app/assets/stylesheets/config/_variables.scss
@@ -0,0 +1,19 @@
+:root {
+  --font-family-serif: 'Merriweather', serif;
+  --font-family-mono: 'Fira Code', monospace;
+
+  --font-size-base: clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
+
+  --line-height-header: 1.1;
+  --line-height-body: 1.65;
+
+  --color-text-header: hsl(202, 28%, 17%);
+  --color-text-body:   hsl(202, 23%, 24%);
+
+  --color-suface: hsl(202, 17%, 97%);
+
+  --color-primary-background: hsl(348, 80%, 95%);
+  --color-primary-text-body: hsl(348, 60%, 58%);
+
+  --color-secondary-text-body: hsl(209, 60%, 50%);
+}
diff --git a/app/assets/stylesheets/pages/_homepage.scss b/app/assets/stylesheets/pages/_homepage.scss
@@ -0,0 +1,86 @@
+.homepage {
+  @include media(tabletLandscape) {
+    display: flex;
+  }
+
+  &__section {
+    padding: 1rem;
+
+    @include media(tabletLandscape) {
+      padding: 2rem;
+    }
+  }
+
+  &__hero-section {
+    flex: 1 0 min-content;
+
+    display: flex;
+    flex-direction: column;
+
+    overflow: auto;
+    background-color: var(--color-suface);
+
+    @include media(tabletPortrait) {
+      text-align: center;
+    }
+
+    @include media(tabletLandscape) {
+      position: sticky;
+      top: 0;
+      height: 100vh;
+      text-align: left;
+    }
+  }
+
+  &__main-title {
+    font-size: 500%;
+    line-height: 1;
+
+    & br {
+      display: none;
+    }
+
+    @include media(tabletLandscape) {
+      & br {
+        display: initial;
+      }
+    }
+  }
+
+  &__tagline {
+    margin: 1rem auto;
+    font-size: 125%;
+    max-width: 60ch;
+  }
+
+  &__newsletter-link {
+    display: inline-block;
+    font-style: italic;
+    font-size: 125%;
+    margin-bottom: 2rem;
+    color: var(--color-secondary-text-body);
+  }
+
+  &__courses-section {
+    flex: 3 1 40rem;
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+
+  &__social-links {
+    margin-top: auto;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    @include media(tabletPortrait) {
+      justify-content: center;
+    }
+
+    @include media(tabletLandscape) {
+      justify-content: flex-start;
+    }
+  }
+}
diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
@@ -0,0 +1,3 @@
+class PagesController < ApplicationController
+  def home; end
+end
diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb
@@ -0,0 +1,7 @@
+module SvgHelper
+  def inline_svg(path, **options)
+    File.read("#{Rails.root}/app/assets/images/#{path}.svg").strip.then do |icon|
+      raw options.any? ? icon.sub(/\A<svg(.*?)>/, "<svg\\1 #{tag.attributes(**options)}>") : icon
+    end
+  end
+end
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
diff --git a/config/routes.rb b/config/routes.rb
diff --git a/test/controllers/pages_controller_test.rb b/test/controllers/pages_controller_test.rb
