Skip to content

Commit

Permalink
Merge pull request #84 from Annastacia-dev/enhancement/landing-page-r…
Browse files Browse the repository at this point in the history 
…edesign

[WIP] Landing Page Redesign
  • Loading branch information
@JudahSan
JudahSan authored May 20, 2024
2 parents 03a7871 + f30638b commit 92c452d
Show file tree
Hide file tree
Showing 29 changed files with 589 additions and 586 deletions.
12 changes: 8 additions & 4 deletions Gemfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand Down
7 changes: 0 additions & 7 deletions Gemfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -419,7 +413,6 @@ DEPENDENCIES
stimulus-rails
turbo-rails
tzinfo-data
web-console
webdrivers

RUBY VERSION
Expand Down
Binary file added app/assets/images/conference.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/assets/images/developers.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions app/assets/stylesheets/application.tailwind.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&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)));
}
Expand Down
48 changes: 48 additions & 0 deletions app/helpers/chapters_helper.rb
View file
Original file line number Diff line number Diff line change
@@ -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
35 changes: 8 additions & 27 deletions app/views/landing/home/_activities.html.erb
View file
Original file line number Diff line number Diff line change
@@ -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>
59 changes: 10 additions & 49 deletions app/views/landing/home/_chapters.html.erb
View file
Original file line number Diff line number Diff line change
@@ -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:organisers@rubycommunity.africa" class="place-self-center w-72 md:w-48 card border border-red-600
rounded-b-md rounded-tr-md">
<% end %>

<a href="mailto:organisers@rubycommunity.africa" 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>
Expand Down
18 changes: 7 additions & 11 deletions app/views/landing/home/_featured_sponsors.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
117 changes: 36 additions & 81 deletions app/views/landing/home/_intro.html.erb
View file
Original file line number Diff line number Diff line change
@@ -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>

Loading

0 comments on commit 92c452d

Please sign in to comment.