[WIP] Landing Page Redesign

Gemfile

@@ -47,6 +47,14 @@ group :development, :test do
 end
 
 group :development do
+  # 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 +64,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

@@ -97,7 +97,6 @@ GEM
     aws-sigv4 (1.5.2)
       aws-eventstream (~> 1, >= 1.0.2)
     bcrypt (3.1.18)
-    bindex (0.8.1)
     bootsnap (1.11.1)
       msgpack (~> 1.2)
     builder (3.2.4)
@@ -356,11 +355,6 @@ GEM
     unicode-display_width (2.4.2)
     warden (1.2.9)
       rack (>= 2.0.9)
-    web-console (4.2.0)
-      actionview (>= 6.0.0)
-      activemodel (>= 6.0.0)
-      bindex (>= 0.4.0)
-      railties (>= 6.0.0)
     webdrivers (5.0.0)
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
@@ -419,7 +413,6 @@ DEPENDENCIES
   stimulus-rails
   turbo-rails
   tzinfo-data
-  web-console
   webdrivers
 
 RUBY VERSION

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/helpers/chapters_helper.rb

@@ -1,4 +1,52 @@
 # frozen_string_literal: true
 
 module ChaptersHelper
+  def 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' }
+    ]
+  end
+
+  def 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' }
+    ]
+  end
+
+  def featured_sponsors
+    [
+      { image: 'sponsors/current/nairobits.png', link: 'https://www.nairobits.com/', alt: 'Nairobits' },
+      { image: 'sponsors/current/finplus.png', link: 'https://finplusgroup.com', alt: 'Finplus Group' }
+    ]
+  end
+
+  def previous_sponsors
+    [
+      { image: 'sponsors/previous/shopify.webp', link: 'https://www.shopify.com/', alt: 'Shopify' },
+      { image: 'sponsors/previous/turing.png', link: 'https://www.turing.com/', alt: 'Turing' },
+      { image: 'sponsors/previous/kopokopo.png', link: 'https://kopokopo.co.ke', alt: 'Kopokopo' },
+      { image: 'sponsors/previous/kwara.png', link: 'https://kwara.com/', alt: 'Kwara' },
+      { image: 'sponsors/previous/ihub.png', link: 'https://ihub.co.ke/', alt: 'iHub, Nairobi' },
+      { image: 'sponsors/previous/andela.png', link: 'https://andela.com/', alt: 'Andela' }
+    ]
+  end
+
+  def socials
+    [{ alt: 'ARC Twitter', link: 'https://twitter.com/ruby_african', image: 'brands_twitter.png', show: true },
+     { alt: 'ARC telegram', link: '#', image: 'brands_telegram.png',
+       show: FeatureFlag.find_by(name: 'telegram').try(:enabled) },
+     { alt: 'ARC facebook', link: 'https://www.facebook.com/rubycommunity.africa',
+       image: 'brands_facebook.png', show: true },
+     { alt: 'ARC Instagram', link: '#', image: 'brands_instagram.png', show: true },
+     { alt: 'ARC LinkedIn', link: 'https://www.linkedin.com/company/african-ruby-community/',
+       image: 'brands_linkedin.png', show: true },
+     { alt: 'ARC Github', link: 'https://github.com/nairuby', image: 'brands_github.png', show: true }]
+  end
 end

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

@@ -1,31 +1,12 @@
-<h1 class="pt-16 pb-16 text-4xl text-red-600 font-bold text-center">
+<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,20 @@
 <div style="background-image: url(<%= image_path('countries.png') %>);">
-  <h1 class="pt-16 pb-16 text-4xl text-red-600 font-bold text-center">
+  <h1 class="md:pt-28 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>
-
-      <%= 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>
-
-    <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>
-
-      <%= link_to new_user_registration_path, class: 'place-self-center pb-6' do %>
-        <p>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>

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

@@ -2,16 +2,12 @@
   Featured Sponsors
 </h1>
 
-<div class="grid grid-flow-col  gap-2 px-20 place-content-center">
-  <%= link_to 'https://www.nairobits.com/', target: '_blank' do %>
-    <div class="items-center justify-center w-36 h-40 card place-items-center">
-      <%= image_tag 'sponsors/current/nairobits.png', alt: "Nairobits" %>
-    </div>
-  <% end %>
-
-  <%= link_to 'https://finplusgroup.com/', target: '_blank' do %>
-    <div class="items-center justify-center w-36 h-40 card place-items-center">
-      <%= image_tag 'sponsors/current/finplus.png', alt: 'Finplus Group' %>
-    </div>
+<div class="grid md:grid-flow-col  gap-2 px-20 place-content-center">
+  <% featured_sponsors.each do |sponsor| %>
+    <%= link_to sponsor[:link], target: '_blank' do %>
+      <div class="items-center justify-center w-36 h-40 card place-items-center">
+        <%= image_tag sponsor[:image], alt: sponsor[:alt] %>
+      </div>
+    <% end %>
   <% end %>
 </div>

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

@@ -1,89 +1,44 @@
-<div class="hidden md:flex">
-  <div class="grid md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2">
-    <div class="bg-gradient-to-tr from-red-300">
-      <div class="pt-20" style="margin-left: 75px">
-                <h1 class="text-5xl font-medium uppercase text-red-600 pb-2" style="font-size: 60px; text-shadow: 0px 0px 1px rgba(0,0,0,0.6);">African Ruby Community</h1>
+<div class="grid md:grid-cols-2 pt-10 pb-10 gap-10">
+  <div class="md:pt-12 md:px-12 flex flex-col gap-8">
+    <h1 class="text-5xl font-semibold capitalize text-red-600 leading-[60px]">African Ruby Community</h1>
 
-        <p class="text-lg text-base relative" style="font-size: 19px;">
-          A community organization that seeks to promote computer software programming skills with
-          the Ruby programming language.
-        </p>
-      </div>
-      <div class="pb-16"></div>
-    </div>
-    <div class="bg-gradient-to-t from-red-600">
-      <div class="pt-56" style="margin-left: 250px">
-        <h1 class="text-4xl uppercase font-medium text-black " style="font-size: 47px; color: black; text-shadow: 1px 1px 2px rgba(0,0,0,0.6);">RubyConf</h1>
-
-        <h1 class="text-4xl uppercase text-white pb-3 font-medium " style="font-size: 40px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.6);"
->Africa 2023</h1>
-        <div class="inline-flex text-sm text-white">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-               class="flex-none w-6 h-full w-5 h-5">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0
-            00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd"/>
-          </svg>
-          <p class="ml-2 truncate">TBD</p>
-        </div>
-        <br/>
-        <div class="inline-flex text-sm text-white">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-               class="w-5 h-5">
-            <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10
-            19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0
-            00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17
-            12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765
-            11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25
-            2.25 0 000 4.5z" clip-rule="evenodd"/>
-          </svg>
+    <p class="text-base sm:w-3/4 leading-7 text-black font-normal">
+      A community organization that seeks to promote computer software programming skills with
+      the Ruby programming language.
+    </p>
 
-          <p class="ml-2 truncate">TBD | Kigali, Rwanda</p>
-        </div>
-        <div class="pb-16"></div>
-      </div>
-    </div>
+    <%= link_to new_user_registration_path do %>
+      <button class="btn btn-primary rounded-full py-4 px-8 text-white flex justify-center items-center gap-2">
+        <span>Join Us</span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
+          <path fill-rule="evenodd" d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0
+            111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0
+            11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z" clip-rule="evenodd"/>
+        </svg>
+      </button>
+    <% end %>
   </div>
-</div>
 
-<div class="md:hidden lg:hidden xl:hidden">
-  <div class="grid">
-    <div class="bg-gradient-to-tr from-red-300 text-center">
-      <div class="pt-20 pb-32">
-        <h1 class="text-5xl uppercase text-red-600 pb-8">African Ruby Community</h1>
-        <p>
-          A community organization that seeks to promote computer software programming skills with
-          the Ruby programming language.
-        </p>
-      </div>
-      <div class="pb-16"></div>
+  <div class="grid lg:grid-cols-2 grid-cols-1 lg:gap-0 gap-5 lg:-ml-10">
+    <div class="bg-red-600 text-white rounded-lg p-10 w-64 h-40 text flex flex-col gap-3 justify-center items-center">
+      <p class="text-5xl font-bold"> 5000 + </p>
+      <p class="text-sm font-semibold">Members across East Africa</p>
     </div>
-    <div class="bg-gradient-to-t from-red-600 text-center">
-      <div class="pt-20"></div>
-        <h1 class="text-4xl uppercase">RubyConf</h1>
-        <h1 class="text-4xl uppercase text-white pb-3">Africa 2023</h1>
-        <div class="inline-flex text-sm text-white">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-               class="flex-none w-6 h-full w-5 h-5">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0
-            00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd"/>
-          </svg>
-          <p class="ml-2 truncate">TBD</p>
-        </div>
-
-        <div class="inline-flex text-sm text-white">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
-               class="w-5 h-5">
-            <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10
-            19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0
-            00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17
-            12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765
-            11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25
-            2.25 0 000 4.5z" clip-rule="evenodd"/>
-          </svg>
-
-          <p class="ml-2 truncate">TBD | Kigali, Rwanda</p>
-        </div>
-        <div class="pb-16"></div>
+    <div class="rounded-lg lg:-ml-20">
+       <%= image_tag 'developers.jpg', class: 'w-full lg:h-[110%] object-cover rounded-lg lg:rounded-tr-full' %>
+    </div>
+    <div class="lg:-mt-28 rounded-lg">
+     <%= image_tag 'conference.jpg', class: 'w-full h-full object-cover rounded-lg lg:rounded-bl-full' %>
+    </div>
+    <div class="bg-red-600 text-white rounded-lg lg:rounded-bl-none lg:rounded-tl-none lg:rounded-tr-none p-10 w-76 h-40 text flex flex-col gap-3 justify-center items-center lg:mt-6">
+      <p class="text-5xl font-bold">
+        <%= Time.now.year - 2010 %> +
+      </p>
+      <p class="text-sm font-semibold">
+        Years of Ruby community
+      </p>
     </div>
   </div>
+
 </div>
+