Our programs sections

.gitignore

@@ -37,3 +37,10 @@ yarn-debug.log*
 yarn.lock
 
 /config/database.yml
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

.ruby-version

@@ -1 +1 @@
-ruby-3.0.2
+3.0.2

app/assets/stylesheets/home/Our_Programs.scss

@@ -0,0 +1,68 @@
+@import './variables.scss';
+
+.programs_container {
+  text-align: center;
+  margin: 1rem auto;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #f5f6f8;
+  align-items: center;
+
+  h1 {
+    margin: 1.5rem auto;
+    font-weight: 800;
+  }
+}
+
+.white_container {
+  margin: 1rem auto;
+  background-color: white;
+  border-radius: 15px;
+  width: 85vw;
+}
+
+.program {
+  margin: 1rem auto;
+  &_img {
+    margin: 2rem auto;
+    max-width: 13rem;
+  }
+  .ux {
+    margin: 2rem auto;
+    max-width: 6rem;
+  }
+  h4 {
+    font-weight: 700;
+    color: $blue;
+  }
+  p {
+    font-weight: 600;
+  }
+}
+
+@media (min-width: 768px) {
+  .white_container {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    padding: 1rem;
+  }
+  .program {
+    max-width: 100%;
+    max-height: 40vh;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    &_img {
+      margin: auto;
+      max-width: 60%;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .white_container {
+    grid-template-columns: 25% 25% 25% 25%;
+  }
+}

app/views/home/index.html.erb

@@ -38,3 +38,18 @@
     </div>
   </div>
 <% end %>
+
+<div class="programs_container">
+ <h1>Nuestros programas</h1>
+  <div class="white_container">
+    <% t('our_programs.items').each do |item| %>
+      <div class="program">
+        <%=image_tag(item[:img], alt: t('hero.image_background'), class:item[:class])%>
+        <h4><%=item[:title]%></h4>
+        <p><%=item[:description]%></p>
+      </div>
+    <% end %>
+  </div>
+<div>
+
+</div>

bin/webpack

@@ -1,19 +1,18 @@
 #!/usr/bin/env ruby
-# frozen_string_literal: true
 
-ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
-ENV['NODE_ENV']  ||= 'development'
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
 
-require 'pathname'
-ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
-                                           Pathname.new(__FILE__).realpath)
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
 
-require 'bundler/setup'
+require "bundler/setup"
 
-require 'webpacker'
-require 'webpacker/webpack_runner'
+require "webpacker"
+require "webpacker/webpack_runner"
 
-APP_ROOT = File.expand_path('..', __dir__)
+APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   Webpacker::WebpackRunner.run(ARGV)
 end

bin/webpack-dev-server

@@ -1,19 +1,18 @@
 #!/usr/bin/env ruby
-# frozen_string_literal: true
 
-ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
-ENV['NODE_ENV']  ||= 'development'
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
 
-require 'pathname'
-ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
-                                           Pathname.new(__FILE__).realpath)
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
 
-require 'bundler/setup'
+require "bundler/setup"
 
-require 'webpacker'
-require 'webpacker/dev_server_runner'
+require "webpacker"
+require "webpacker/dev_server_runner"
 
-APP_ROOT = File.expand_path('..', __dir__)
+APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   Webpacker::DevServerRunner.run(ARGV)
 end

config/locales/en.yml

@@ -35,3 +35,22 @@ en:
                 Intermediate object-oriented programming in HTML, CCS, and JS to start a career in technology.
                 It is also an option to accredit internships or professional stays."
       icon: 'icon-lamp'
+  our_programs:
+    items:
+    - img: "logo-rails.png"
+      class: "program_img"
+      title: "Web"
+      description: "Ruby on rail Web Developer"
+    - img: "logo-react.png"
+      class: "program_img"
+      title: "Mobile"
+      description: "React Native Mobile Developer"
+    - img: "Shopify_logo.png"
+      class: "program_img"
+      title: "E-commerce"
+      description: "Shopify StoreFront Developer"
+    - img: "Group 48.png"
+      class: " ux "
+      title: "Design"
+      description: "UI/UX Designer"
+

config/locales/es.yml

@@ -35,3 +35,21 @@ es:
                 intermedios de programación orientada a objetos en HTML, CCS, y JS para iniciar una carrera en tecnología.
                 También es una opción para acreditar las prácticas o estancias profesionales."
       icon: 'icon-lamp'
+  our_programs:
+    items:
+    - img: "logo-rails.png"
+      class: "program_img"
+      title: "Web"
+      description: "Desarrollo web Ruby on Rail"
+    - img: "logo-react.png"
+      class: "program_img"
+      title: "Mobile"
+      description: "Desarrollador móvil React Native"
+    - img: "Shopify_logo.png"
+      class: "program_img"
+      title: "E-commerce"
+      description: "Desarrollador Shopify StoreFront"
+    - img: "Group 48.png"
+      class: " ux "
+      title: "Design"
+      description: "Diseñador UI/UX"

package.json

@@ -23,7 +23,7 @@
     "husky": "^7.0.2",
     "prettier": "2.3.2",
     "stylelint": "^13.13.1",
-    "webpack-dev-server": "^4.0.0"
+    "webpack-dev-server": "^4.2.1"
   },
   "scripts": {
     "precommit": "lint-staged"