[WIP] Landing Page Redesign

Gemfile

@@ -47,6 +47,15 @@ group :development, :test do
 end
 
 group :development do
+  gem 'annotate', '~> 3.2'
+  # Use console on exceptions pages [https://github.com/rails/web-console]
+
+  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
+  # gem "rack-mini-profiler"
+
+  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
+  # gem "spring"
+
   # Capistrano - deployment gems
   gem 'capistrano', '~> 3.11'
   gem 'capistrano-asdf'
@@ -56,10 +65,6 @@ group :development do
   gem 'capistrano-webpacker-precompile', require: false
   gem 'dockerfile-rails', '>= 1.2'
   gem 'letter_opener'
-  gem 'web-console' # Use console on exceptions pages [https://github.com/rails/web-console]
-
-  # gem "rack-mini-profiler" # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
-  # gem "spring" #Speed up commands on slow machines / big apps [https://github.com/rails/spring]
 end
 
 group :test do

Gemfile.lock

@@ -75,6 +75,9 @@ GEM
       public_suffix (>= 2.0.2, < 5.0)
     airbrussh (1.4.1)
       sshkit (>= 1.6.1, != 1.7.0)
+    annotate (3.2.0)
+      activerecord (>= 3.2, < 8.0)
+      rake (>= 10.4, < 14.0)
     ar_lazy_preload (1.1.2)
       rails (>= 5.2)
     ast (2.4.2)
@@ -381,6 +384,7 @@ PLATFORMS
 
 DEPENDENCIES
   active_storage_validations (~> 1.0)
+  annotate (~> 3.2)
   aws-sdk-s3 (~> 1.119)
   bootsnap
   cancancan (~> 3.4)

app/assets/stylesheets/application.tailwind.css

@@ -1,14 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
     :root {
     /*  Override colors and other variables  */
     }
 }
 
 @layer components {
+
     .turbo-progress-bar {
         background: linear-gradient(to right, hsl(var(--p)), hsl(var(--b1)));
     }

app/models/chapter.rb

@@ -1,5 +1,22 @@
 # frozen_string_literal: true
 
+# == Schema Information
+#
+# Table name: chapters
+#
+#  id          :bigint           not null, primary key
+#  description :text
+#  location    :string
+#  name        :string
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  country_id  :bigint
+#
+# Indexes
+#
+#  index_chapters_on_country_id  (country_id)
+#  index_chapters_on_name        (name) UNIQUE
+#
 class Chapter < ApplicationRecord
   # Attachments
   has_one_attached :image

app/models/country.rb

@@ -1,5 +1,14 @@
 # frozen_string_literal: true
 
+# == Schema Information
+#
+# Table name: countries
+#
+#  id         :bigint           not null, primary key
+#  name       :string
+#  created_at :datetime         not null
+#  updated_at :datetime         not null
+#
 class Country < ApplicationRecord
   # Associations
   has_many :chapters, dependent: :nullify

app/models/feature_flag.rb

@@ -1,4 +1,15 @@
 # frozen_string_literal: true
 
+# == Schema Information
+#
+# Table name: feature_flags
+#
+#  id          :bigint           not null, primary key
+#  description :text
+#  enabled     :boolean
+#  name        :string
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#
 class FeatureFlag < ApplicationRecord
 end

app/models/project.rb

@@ -1,5 +1,26 @@
 # frozen_string_literal: true
 
+# == Schema Information
+#
+# Table name: projects
+#
+#  id          :bigint           not null, primary key
+#  description :text
+#  end_date    :datetime
+#  name        :string
+#  start_date  :datetime
+#  created_at  :datetime         not null
+#  updated_at  :datetime         not null
+#  chapter_id  :bigint           not null
+#
+# Indexes
+#
+#  index_projects_on_chapter_id  (chapter_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (chapter_id => chapters.id)
+#
 class Project < ApplicationRecord
   belongs_to :chapter
 end

app/models/user.rb

@@ -1,5 +1,42 @@
 # frozen_string_literal: true
 
+# == Schema Information
+#
+# Table name: users
+#
+#  id                     :bigint           not null, primary key
+#  confirmation_sent_at   :datetime
+#  confirmation_token     :string
+#  confirmed_at           :datetime
+#  current_sign_in_at     :datetime
+#  current_sign_in_ip     :string
+#  email                  :string           default(""), not null
+#  encrypted_password     :string           default(""), not null
+#  failed_attempts        :integer          default(0), not null
+#  github_username        :string
+#  last_sign_in_at        :datetime
+#  last_sign_in_ip        :string
+#  locked_at              :datetime
+#  name                   :string
+#  phone_number           :string
+#  remember_created_at    :datetime
+#  reset_password_sent_at :datetime
+#  reset_password_token   :string
+#  role                   :integer
+#  sign_in_count          :integer          default(0), not null
+#  unconfirmed_email      :string
+#  unlock_token           :string
+#  created_at             :datetime         not null
+#  updated_at             :datetime         not null
+#
+# Indexes
+#
+#  index_users_on_confirmation_token    (confirmation_token) UNIQUE
+#  index_users_on_email                 (email) UNIQUE
+#  index_users_on_github_username       (github_username) UNIQUE
+#  index_users_on_reset_password_token  (reset_password_token) UNIQUE
+#  index_users_on_unlock_token          (unlock_token) UNIQUE
+#
 class User < ApplicationRecord
   # Include default devise modules. Others available are:
   # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable

app/models/users_chapter.rb

@@ -1,5 +1,26 @@
 # frozen_string_literal: true
 
+# == Schema Information
+#
+# Table name: users_chapters
+#
+#  id           :bigint           not null, primary key
+#  main_chapter :boolean          default(FALSE)
+#  created_at   :datetime         not null
+#  updated_at   :datetime         not null
+#  chapter_id   :bigint           not null
+#  user_id      :bigint           not null
+#
+# Indexes
+#
+#  index_users_chapters_on_chapter_id  (chapter_id)
+#  index_users_chapters_on_user_id     (user_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (chapter_id => chapters.id)
+#  fk_rails_...  (user_id => users.id)
+#
 class UsersChapter < ApplicationRecord
   # Associations
   belongs_to :chapter

app/views/landing/home/_activities.html.erb

@@ -1,31 +1,35 @@
-<h1 class="pt-16 pb-16 text-4xl text-red-600 font-bold text-center">
+<% activities = [
+  {
+    image: 'activities_local_meetups.png',
+    title: "Local meetups"
+  },
+  {
+    image: 'activities_local_conferences.png',
+    title: 'conferences'
+  },
+  {
+    image: 'activities_local_programming.png',
+    title: 'programming'
+  },
+  {
+    image: 'activities_local_workshops.png',
+    title: 'workshops'
+  },
+  {
+    image: 'activities_local_hackathons.png',
+    title: 'hackathons'
+  }
+] %>
+
+<h1 class="md:pt-36 pt-24 pb-10 text-4xl text-red-600 font-bold text-center">
   Activities
 </h1>
 
-<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4
-xl:grid-cols-5 gap-2 px-20 place-content-center">
-  <div class="place-self-center w-72 h-72 md:w-48 md:h-48 card rounded-box">
-    <%= image_tag image_path('activities_local_meetups.png'), alt: 'Local meetups photo' %>
-    <p class="place-self-center text-xl md:text-base">Local Meetups</p>
-  </div>
-
-  <div class="place-self-center w-72 h-72 md:w-48 md:h-48 card rounded-box">
-    <%= image_tag image_path('activities_local_conferences.png'), alt: 'Conferences photo' %>
-    <p class="place-self-center text-xl md:text-base">Conferences</p>
-  </div>
-
-  <div class="place-self-center w-72 h-72 md:w-48 md:h-48 card rounded-box">
-    <%= image_tag image_path('activities_local_programming.png'), alt: 'Programming photo' %>
-    <p class="place-self-center text-xl md:text-base">Programming</p>
-  </div>
-
-  <div class="place-self-center w-72 h-72 md:w-48 md:h-48 card rounded-box">
-    <%= image_tag image_path('activities_local_workshops.png'), alt: 'Workshops photo' %>
-    <p class="place-self-center text-xl md:text-base">Workshops</p>
-  </div>
-
-  <div class="place-self-center w-72 h-72 md:w-48 md:h-48 card rounded-box">
-    <%= image_tag image_path('activities_local_hackathons.png'), alt: 'Hackathons photo' %>
-    <p class="place-self-center text-xl md:text-base">Hackathons</p>
-  </div>
+<div class="grid  md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 px-20 place-content-center">
+  <% activities.each do |activity| %>
+    <div class="place-self-center w-72 h-72 md:w-full md:h-60 card rounded flex flex-col gap-4">
+      <%= image_tag activity[:image], alt: activity[:title], class: 'hover:scale-105' %>
+      <p class="text-center text-xl md:text-base capitalize font-semibold"><%= activity[:title] %></p>
+    </div>
+  <% end %>
 </div>

app/views/landing/home/_chapters.html.erb

@@ -1,59 +1,46 @@
-<div style="background-image: url(<%= image_path('countries.png') %>);">
-  <h1 class="pt-16 pb-16 text-4xl text-red-600 font-bold text-center">
-    Chapters
-  </h1>
-
-  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4
-xl:grid-cols-5 gap-2 px-20 place-content-center">
-    <div class="place-self-center w-72 md:w-48 card border border-red-600
-       rounded-b-md rounded-tr-md">
-
-      <%= image_tag('country_kenya.png', alt: "Nairuby",class: 'pt-2 place-self-center h-16 md:36') %>
-      <p class="place-self-center text-2xl text-red-600">Kenya</p>
-
-      <%= link_to new_user_registration_path, class: 'place-self-center pb-6' do %>
-        <p>Join community</p>
-      <% end %>
-    </div>
-
-    <div class="place-self-center w-72 md:w-48 card border border-red-600
-       rounded-b-md rounded-tr-md">
-
-      <%= image_tag('country_rwanda.png', alt:"ARC_Rwanda", class: 'pt-2 place-self-center h-16 md:36') %>
-      <p class="place-self-center text-2xl text-red-600">Rwanda</p>
+<% chapters = [
+  {
+    country: 'Kenya',
+    image: 'country_kenya.png',
+    alt: 'Nairuby'
+  },
+  {
+    country: 'Rwanda',
+    image: 'country_rwanda.png',
+    alt: 'ARC_Rwanda'
+  },
+  {
+    country: 'Tanzania',
+    image: 'country_tanzania.png',
+    alt: 'ARC_Tanzania'
+  },
+  {
+    country: 'Uganda',
+    image: 'country_uganda.png',
+    alt: 'ARC_Uganda'
+  }
+
+] %>
 
-      <%= link_to new_user_registration_path, class: 'place-self-center pb-6' do %>
-        <p>Join community</p>
-      <% end %>
-    </div>
-
-    <div class="place-self-center w-72 md:w-48 card border border-red-600
-       rounded-b-md rounded-tr-md">
-
-      <%= image_tag('country_tanzania.png',alt:"ARC_Tanzania", class: 'pt-2 place-self-center h-16 md:36') %>
-      <p class="place-self-center text-2xl text-red-600">Tanzania</p>
-
-      <%= link_to new_user_registration_path, class: 'place-self-center pb-6' do %>
-        <p>Join community</p>
-      <% end %>
-    </div>
 
-    <div class="place-self-center w-72 md:w-48 card border border-red-600
-       rounded-b-md rounded-tr-md">
 
-      <%= image_tag('country_uganda.png',alt:"ARC_Uganda", class: 'pt-2 place-self-center h-16 md:36') %>
-      <p class="place-self-center text-2xl text-red-600">Uganda</p>
+<div style="background-image: url(<%= image_path('countries.png') %>);">
+  <h1 class="md:pt-28 pt-16 pb-16 text-4xl text-red-600 font-bold text-center">
+    Chapters
+  </h1>
 
-      <%= link_to new_user_registration_path, class: 'place-self-center pb-6' do %>
-        <p>Join community</p>
+  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 px-20 place-content-center">
+    <% chapters. each do |chapter| %>
+      <%= link_to new_user_registration_path, class: 'place-self-center w-72 md:w-48 card border border-red-600 rounded flex flex-col gap-4 hover:scale-95 p-3' do %>
+        <%= image_tag chapter[:image], alt: chapter[:alt], class: 'pt-2 place-self-center h-16 md:36' %>
+        <p class="text-center text-2xl text-red-600"><%= chapter[:country] %></p>
+        <p class="place-self-center pb-6 hover:underline font-semibold">Join community</p>
       <% end %>
-    </div>
-
-    <a href="mailto:[email protected]" class="place-self-center w-72 md:w-48 card border border-red-600
-       rounded-b-md rounded-tr-md">
+    <% end %>
 
+    <a href="mailto:[email protected]" class="place-self-center w-72 md:w-48  card border border-red-600 rounded flex flex-col gap-4 p-3 hover:scale-95">
       <%= image_tag('add.png',alt:" Add Chapter",class: 'pt-2 place-self-center h-16 md:36') %>
-      <p class="place-self-center text-xl text-red-600">Request new chapter</p>
+      <p class="text-center text-xl text-red-600">Request new chapter</p>
       <p class="pb-6"></p>
     </a>
   </div>