Implement 2023 landing page (#268)

frontend/stylesheets/components/_app-footer.scss

@@ -1,39 +1,3 @@
-.app-footer__mailing-list {
-  padding: 2rem;
-
-  color: $white;
-  text-align: center;
-
-  background-color: black;
-
-  &__text {
-    padding: 0 2rem;
-
-    @include media-breakpoint-up('md') {
-      padding: 0;
-    }
-  }
-
-  .form-mailing-list {
-    @include media-breakpoint-up('md') {
-      @include make-col(6);
-      @include make-col-offset(3);
-    }
-  }
-
-  .form-mailing-list .form__control {
-    font-size: map-get($font-sizes, 'xs');
-
-    @include media-breakpoint-up('sm') {
-      font-size: map-get($font-sizes, 'sm');
-    }
-
-    @include media-breakpoint-up('lg') {
-      font-size: map-get($font-sizes, 'lg');
-    }
-  }
-}
-
 .app-footer__social-platform {
   padding-block: 1rem;
   text-align: center;
@@ -53,15 +17,24 @@
 
   .container {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+
+    @include media-breakpoint-up('sm') {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
   }
 
   .app-footer__community {
     display: none;
+    text-align: center;
 
     @include media-breakpoint-up('sm') {
       display: initial;
     }
   }
+
+  .app-footer__link {
+    text-align: right;
+  }
 }

frontend/stylesheets/components/_app-hero.scss

@@ -3,7 +3,7 @@
   align-items: center;
   padding: 2rem 0;
 
-  background-color: $primary;
+  background-color: $black;
 
   &__heading {
     font-weight: 500;

frontend/stylesheets/components/_app-navigation.scss

@@ -74,7 +74,7 @@
     height: 75%;
 
     opacity: 0;
-    background-color: var(--color-brand-primary);
+    background-color: $black;
     border-radius: 1rem;
     transition: all variables.$base-animation-duration variables.$base-animation-timing;
   }

frontend/stylesheets/components/_form-mailing-list.scss

@@ -2,11 +2,21 @@
   position: relative;
 
   .form__control {
+    font-size: map-get($font-sizes, 'xs');
+
     border-radius: var(--bs-border-radius-lg);
 
+    @include media-breakpoint-up('sm') {
+      font-size: map-get($font-sizes, 'sm');
+    }
+
     @include media-breakpoint-up('md') {
       padding-right: 155px;
     }
+
+    @include media-breakpoint-up('lg') {
+      font-size: map-get($font-sizes, 'lg');
+    }
   }
 
   .btn {

frontend/stylesheets/layouts/_default.scss

@@ -40,5 +40,29 @@
 
   .app-hero ~ .app-content {
     padding-top: 0;
-  }  
+  }
+
+  .mailing-list {
+    padding: 2rem;
+
+    color: $white;
+    text-align: center;
+
+    background-color: black;
+
+    &__text {
+      padding: 0 2rem;
+
+      @include media-breakpoint-up('md') {
+        padding: 0;
+      }
+    }
+
+    .form-mailing-list {
+      @include media-breakpoint-up('md') {
+        @include make-col(6);
+        @include make-col-offset(3);
+      }
+    }
+  }
 }

frontend/stylesheets/screens/_home.scss

@@ -1,26 +1,28 @@
 body.home .app-hero {
+
+  color: $primary;
   text-align: center;
 
-  background: {
-    image: url('/images/home/hero-background.png');
-    repeat: no-repeat;
-    position: center;
-  }
-
-  @include media-breakpoint-up('md') {
-    height: rem(460px);
-  }
+  background: $white;
 
   &__subheading {
     display: block;
     margin-bottom: 1rem;
     text-transform: uppercase;
   }
 
-  .btn {
-    margin-top: 2rem;
-    font-size: map-get($font-sizes, 'lg');
-    border-radius: var(--bs-border-radius-lg);
+  &__mailing-list {
+    width: 80%;
+    margin: 2rem auto 0;
+
+    @include media-breakpoint-up('lg') {
+      width: 50%;
+      margin-top: 3rem;
+    }
+  }
+
+  &__text {
+    color: $body-color;
   }
 }
 
@@ -32,45 +34,28 @@ body.home .app-content {
   }
 }
 
-body.home .speaker-lineup {
-  .list-speaker,
-  .btn  {
-    margin-top: 1rem;
-
-    @include media-breakpoint-up('sm') {
-      margin-top: 2rem;
-    }
-  }
-}
-
 body.home .sponsors {
 
   .list-sponsor {
     justify-content: center;
     padding-left: 0;
-
-    &--silver,&--speaker {
-      .list-sponsor__company {
-        @include media-breakpoint-up('sm') {
-          @include make-col(3);
-        }
-      }
-    }
 
     @include media-breakpoint-up('sm') {
       margin-inline: auto;
     }
   }
 
   &.list-sponsor--silver {
-    @include media-breakpoint-up('sm') {
-      width: 75%
+    @include media-breakpoint-up('md') {
+      width: 85%
     }
   }
 
-  &.list-sponsor--speaker {
+  .btn {
+    width: 80%;
+
     @include media-breakpoint-up('sm') {
-      width: 60%
+      width: auto;
     }
   }
 }

src/_components/footer.liquid

@@ -1,12 +1,4 @@
 <footer class="app-footer">
-  <section class="app-footer__mailing-list">
-    <div class="container">
-      <h3>Join our mailing list</h3>
-      <p class="mailing-list__text">Sign up to receive updates about the event</p>
-      {% render "form_mailing_list" %}
-    </div>
-  </section>
-
   <section class="app-footer__social-platform">
     <div class="container">
       <h3>Follow us</h3>
@@ -17,7 +9,7 @@
   <div class="app-footer__footnote">
     <div class="container">
       <div class="app-footer__legal">
-        &copy; Bangkok.rb
+        &copy; <a href="https://bangkokrb.org/" title="Ruby Community organizer">Bangkok.rb</a>
       </div>
       <div class="app-footer__community">
         Built with <a href="https://www.ruby-lang.org/en/">Ruby</a> & <a href="https://www.bridgetownrb.com/">Bridgetown</a>

src/_components/form_mailing_list.liquid

@@ -1,9 +1,9 @@
 <form action="https://rubyconfth.us20.list-manage.com/subscribe/post?u=fd4a02525718b1d58ebaed6a0&id=4af9421776" method="post" class="form-mailing-list form" target="_blank">
   <div class="form__group">
-    <input type="hidden" name="tags" value="2841779">
+    <input type="hidden" name="tags" value="3502539">
     <input type="email" name="EMAIL" placeholder="Enter your email address" class="form__control form__control--lg" required />
     <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
     <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_fd4a02525718b1d58ebaed6a0_4af9421776" tabindex="-1" value=""></div>
   </div>
-  <button type="submit" class="form-mailing-list__btn btn btn--primary">Count me in</button>
+  <button type="submit" class="form-mailing-list__btn btn btn--primary">I Love Ruby</button>
 </form>

src/_data/menu/header.yml

@@ -1,12 +1,12 @@
-- title: Venue
-  permalink: /venue
+# - title: Venue
+#   permalink: /venue
 - title: Practicalities
   permalink: /practicalities
-- title: Schedule
-  permalink: /schedule
-- title: Speakers
-  permalink: /speakers
-- title: Sponsors
-  permalink: /sponsors
+# - title: Schedule
+#   permalink: /schedule
+# - title: Speakers
+#   permalink: /speakers
+# - title: Sponsors
+#   permalink: /sponsors
 - title: Code of Conduct
   permalink: /code-of-conduct

src/_data/schedule/day_one.yml

@@ -1,72 +1,28 @@
-- start_at: "8:00"
-  end_at: "9:00"
-  title: "Registration & Conference Door Opens"
-- start_at: "9:00"
-  end_at: "9:10"
-  title: "Welcome Address"
-- start_at: "9:10"
-  end_at: "9:55"
-  title: "Keynote: A Beginner's Guide to Puma Internals"
-  speaker_id: nate-berkopec
-  slides_url: https://github.com/nateberkopec/rubyconfth/blob/main/RubyConfTH.pdf
-  youtube_id: w4X_oBuPmTM
-- start_at: "10:00"
-  end_at: "10:30"
-  title: "A Rails performance guidebook: from 0 to 1B requests/day"
-  speaker_id: cristian-planas
-  youtube_id: QOGY1GHVQu0
-- start_at: "10:30"
-  end_at: "10:50"
-  title: "Coffee Break"
-- start_at: "10:50"
-  end_at: "11:20"
-  title: "Hanami 2: New Framework, New You"
-  speaker_id: tim-riley
-  youtube_id: jxJ4-iadvIk
-- start_at: "11:25"
-  end_at: "11:55"
-  title: "Megaruby - mruby/c on Sega Mega Drive"
-  speaker_id: yuji-yokoo
-  slides_url: https://github.com/yujiyokoo/mega-present/releases/tag/rubyconfth-2022
-  youtube_id: s65qlUFRWtI
-- start_at: "12:00"
-  end_at: "12:30"
-  title: "Roasting the Duck - A talk about Ruby and types"
-  speaker_id: paolo-perrotta
-  youtube_id: tQU8PEY55rg
-- start_at: "12:30"
-  end_at: "13:50"
-  title: "Buffet Lunch"
-- start_at: "14:00"
-  end_at: "14:30"
-  title: "Scaling Ruby with JRuby"
-  speaker_id: charles-nutter
-  slides_url: https://speakerdeck.com/headius/scaling-ruby-with-jruby
-  youtube_id: OwEDqtlBg04
-- start_at: "14:35"
-  end_at: "15:05"
-  title: "10x your teamwork through pair programming"
-  speaker_id:
-    - michael-milewski
-    - selena-small
-  youtube_id: 6E_2azg8r40
-- start_at: "15:05"
-  end_at: "15:35"
-  title: "Coffee Break"
-- start_at: "15:35"
-  end_at: "16:05"
-  title: "Why I choose Phoenix"
-  speaker_id: aaron-cruz
-  youtube_id: PIrLtOvDwGA
-- start_at: "16:10"
-  end_at: "16:55"
-  title: "Keynote: The Ecstatic Organisation"
-  speaker_id: siddharth-sharma
-  youtube_id: M_vHUl3riKQ
-- start_at: "17:00"
-  end_at: "17:10"
-  title: "Closing remarks & announcements"
-- start_at: "18:00"
-  end_at: "22:00"
-  title: "Official Party 🥳"
-  subtitle: "at Bangkok Heritage, 2 Phaya Thai Rd, Thung Phaya Thai, Ratchathewi, Bangkok 10400"
+# - start_at: "8:00"
+#   end_at: "9:00"
+#   title: "Registration & Conference Door Opens"
+# - start_at: "9:00"
+#   end_at: "9:10"
+#   title: "Welcome Address"
+# - start_at:
+#   end_at: 
+#   title: 
+#   speaker_id: 
+#   slides_url: 
+#   youtube_id: 
+# - start_at: "10:30"
+#   end_at: "10:50"
+#   title: "Coffee Break"
+# - start_at: "12:30"
+#   end_at: "13:50"
+#   title: "Buffet Lunch"
+# - start_at: "15:05"
+#   end_at: "15:35"
+#   title: "Coffee Break"
+# - start_at: "17:00"
+#   end_at: "17:10"
+#   title: "Closing remarks & announcements"
+# - start_at: "18:00"
+#   end_at: "22:00"
+#   title: "Official Party 🥳"
+#   subtitle: "at TBD"