#35 Update Index Page to own desgin

Author: Yuma Soga

Gemfile

@@ -41,6 +41,8 @@ gem 'pg'
 
 gem 'bootstrap', '~> 4.1.1'
 
+gem 'simple_form'
+
 group :development, :test do
   gem 'sqlite3'
   gem 'byebug'

Gemfile.lock

@@ -257,6 +257,9 @@ GEM
       json (~> 1.7, >= 1.7.7)
       rdoc (~> 4.0)
     sexp_processor (4.11.0)
+    simple_form (4.0.1)
+      actionpack (>= 5.0)
+      activemodel (>= 5.0)
     simplecov (0.13.0)
       docile (~> 1.1.0)
       json (>= 1.8, < 3)
@@ -334,6 +337,7 @@ DEPENDENCIES
   rspec-rails
   sass-rails (~> 5.0.5)
   sdoc (~> 0.4.0)
+  simple_form
   simplecov
   spring
   sqlite3

app/assets/stylesheets/bootstrap-creative/_other-sections.scss

@@ -1,6 +1,16 @@
 #thinking-together.bg-dark{
   background-color: $gray-100 !important;
 }
-#language.bg-dark{
+#learn-with-each-other.bg-dark{
   background-color: $gray-100 !important;
 }
+#contact {
+  .twitter-timeline-box {
+    display: inline-block;
+    position: relative;
+    margin: 0.5rem;
+    width: 340px;
+    height: 500px;
+    vertical-align: top;
+  }
+}

app/views/layouts/staticpages.html.haml

@@ -41,3 +41,25 @@
             %li.nav-item
               %a.nav-link.js-scroll-trigger{:href => "#contact"} Contact
     = yield
+
+    %footer.bg-dark
+      .footer-connect
+        .container
+          .row
+            .col-lg-12.mx-auto.my-3.text-center.text-white
+              .footer-social
+                %h5 Social Links
+                .footer-social-icons
+                  %a.mx-1{ target: "_blank" , href: "https://twitter.com/coderdojo_konan", title: "Twitter" }
+                    = fa_icon "twitter 2x"
+                  %a.mx-1{ target: "_blank", href: "http://facebook.com/Coderdojo.Konan/", title: "Facebook" }
+                    = fa_icon "facebook 2x"
+                  %a.mx-1{ target: "_blank", href: "https://www.instagram.com/coderdojo_konan/", title: "Instagram" }
+                    = fa_icon "instagram 2x"
+                  %a.mx-1{ target: "_blank", href: "https://github.com/CoderDojo-Konan-Okayama", title: "Github" }
+                    = fa_icon "github 2x"
+                  %a.mx-1{ target: "_blank", href: "https://www.youtube.com/channel/UCRN6euxI9l10q6I-gVewVcw", title: "YouTube" }
+                    = fa_icon "youtube 2x"
+          .row
+            .col-lg-12.col-lg-12.mx-auto.my-3.text-center.text-white
+              %p Copyright © 2018 CoderDojo Konan Okayama

app/views/staticpages/index.html.haml

@@ -85,11 +85,44 @@
           などに掲載されているテキストをやったりもしています。
           %br/
           とても自由な雰囲気で、そして楽しみながらやることに重点を置いているのです。
-%section#learn-with-each-other.bg-white.p-3
+%section#share-what-you-made.bg-white.p-3
   .container
     .row
       .col-lg-8.mx-auto.p-3.my-3
-        %img.img-fluid{:alt => "開催風景 2", :src => "#{asset_path "index/introduction-image/dojo-image-01.jpg"}"}/
+        %img.img-fluid{:alt => "開催風景 2", :src => "#{asset_path "index/introduction-image/dojo-image-07.png"}"}/
+      .col-lg-8.mx-auto.my-3.text-center
+        %h2.section-heading
+          Share what you made
+          %br - 作ったものを共有する
+        %hr.my-4/
+        %p.mb-4
+          CoderDojo では、必ず会の終わりに発表会があります。
+          %br/
+          そこでは、その日に作った作品や、学んだことなどを思う存分に発表することができます。
+          %br/
+          素晴らしい箇所には拍手や、「すごい！」などの声があがり、やる気が上がります。
+          %br/
+          また、直した方が良い箇所や、悩んでいる所についても、
+          %br/
+          メンターや他のNinjaが一緒に考えたりしてくれます。
+        %p.mb-4
+          もちろん、これは Ninja だけが楽しむのではありません。
+          %br/
+          参加しているメンターも、時には目を見張るような、
+          %br/
+          素晴らしいアイデアや工夫をした作品に出会う時があります。
+          %br/
+          そういう時は、データを持ち帰って研究するなど、メンター自身も楽しんでいるのです。
+        %p.mb-4
+          このように、Ninja - メンター と双方向で楽しめるのが、CoderDojo で、
+          %br/
+          メンターの楽しんでいる様子を見て、また Ninja も楽しむようになるのです。
+
+%section#learn-with-each-other.bg-dark.p-3
+  .container
+    .row
+      .col-lg-8.mx-auto.p-3.my-3
+        %img.img-fluid{:alt => "開催風景 3", :src => "#{asset_path "index/introduction-image/dojo-image-01.jpg"}"}/
       .col-lg-8.mx-auto.my-3.text-center
         %h2.section-heading
           Learn with each other and co-polish
@@ -113,7 +146,7 @@
           中には全くもって初対面だったのに、Dojoを通し、仲良くなったNinja達も居ます。
           %br/
           彼らは互いに切磋琢磨し、めきめきと上達してきているのです。
-%section#language.bg-dark
+%section#language.bg-white
   .container
     .row
       .col-lg-12.text-center
@@ -195,22 +228,29 @@
 -#                 Category
 -#               .project-name
 -#                 Project Name
-%section.bg-dark.text-white
-  .container.text-center
-    %h2.mb-4 Free Download at Start Bootstrap!
-    %a.btn.btn-light.btn-xl.sr-button{:href => "http://startbootstrap.com/template-overviews/creative/"} Download Now!
 %section#contact
   .container
     .row
       .col-lg-8.mx-auto.text-center
-        %h2.section-heading Let's Get In Touch!
+        %h2.section-heading
+          %i.fa.fa-envelope-o.sr-contact.mx-3
+          Contact us
         %hr.my-4/
-        %p.mb-5 Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!
+        %p.mb-5 何か気になることがございましたら、お気軽にお問い合わせください！
+    .row
+      .col-lg-8.mx-auto.mw-100
+        = simple_form_for :contact_form, :html => { :class => 'form-horizontal' } do |f|
+          = f.input :name, as: :string, placeholder: 'お名前'
+          = f.input :email, as: :string, placeholder: 'メールアドレス'
+          = f.input :subject, as: :string, placeholder: '件名'
+          = f.input :body, as: :text, placeholder: '本文を入力してください。', :input_html => { :rows => 5 }
+          = f.submit '送信', :class => 'btn btn-primary'
     .row
-      .col-lg-4.ml-auto.text-center
-        %i.fa.fa-phone.fa-3x.mb-3.sr-contact
-        %p 123-456-6789
-      .col-lg-4.mr-auto.text-center
-        %i.fa.fa-envelope-o.fa-3x.mb-3.sr-contact
-        %p
-          %a{:href => "mailto:your-email@your-domain.com"} feedback@startbootstrap.com
+      .col-lg-4.mx-auto.my-3.p-2.mw-100
+        .fb-page.fb-page-style{"data-adapt-container-width" => "true", "data-hide-cover" => "false", "data-href" => "https://www.facebook.com/Coderdojo.Konan/", "data-show-facepile" => "true", "data-small-header" => "false", "data-tabs" => "timeline"}
+          %blockquote.fb-xfbml-parse-ignore{:cite => "https://www.facebook.com/Coderdojo.Konan/"}
+            %a{:href => "https://www.facebook.com/Coderdojo.Konan/"} CoderDojo 岡山 岡南
+      .col-lg-4.mx-auto.my-3.p-2.mw-100
+        .twitter-timeline-box
+          %a.twitter-follow-button{"data-show-count" => "false", :href => "https://twitter.com/CoderDojo_Konan?ref_src=twsrc%5Etfw"} Follow @CoderDojo_Konan
+          %a.twitter-timeline{"data-height" => "500", "data-theme" => "light", "data-width" => "340", :href => "https://twitter.com/coderdojo_konan?ref_src=twsrc%5Etfw"} Tweets by coderdojo_konan