Design landing page

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"

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

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";

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%;
+  }
+}

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;
+    }
+  }
+}

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;
+}

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; }
+  }
+}

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;
+}

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%);
+}

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;
+    }
+  }
+}

app/controllers/pages_controller.rb

@@ -0,0 +1,3 @@
+class PagesController < ApplicationController
+  def home; end
+end

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