-<% content_for :head do %>
- <%= javascript_include_tag "about" %>
-<% end %>
-
-<div class='attr'>
- <div class='byosm'>
- <%= t "about_page.copyright_html" %>
- </div>
+<% content_for(:content_class) { "bg-body-secondary" } %>
+<% I18n.with_locale @locale do %>
+ <%= tag.div :lang => @locale, :dir => t("html.dir") do %>
+ <div class="container-lg attr">
+ <div class='row'>
+ <div class='col-sm-7 user-image'></div>
+ <div class='col-sm-5 px-5 py-3 byosm'>
+ <p class='h5 text-white text-nowrap'>
+ <%= t ".heading_html", :copyright => tag.span(t(".copyright_symbol_html")),
+ :br => tag.br %>
+ </p>
+ </div>
+ </div>
+ <div class='row'>
+ <div class="px-5 py-4 bg-black bg-opacity-75">
+ <h1 class="text-white fw-light"><%= t ".used_by_html", :name => tag.span("OpenStreetMap", :class => "user-name") %></h1>
+ </div>
+ </div>
+ </div>
- <div class='user-image'></div>
+ <div class='bg-body px-5 py-4'>
+ <p class="lead"><%= t ".lede_text" %></p>
- <strong>
- <%= raw t "about_page.used_by", :name => "<span class='user-name'>OpenStreetMap</span>" %>
- </strong>
-</div>
+ <section>
+ <div class="d-flex align-items-center gap-2 mb-2">
+ <svg width="30" height="30" class="flex-shrink-0">
+ <circle cx="15" cy="15" r="13" fill="none" stroke="#c0c0c0" stroke-width="4" />
+ <path d="m 15,22 c 0,0 5,-4.5199 5,-8 0,-3 -2,-5 -5,-5 -3,0 -5,2 -5,5 0,3.4801 5,8 5,8 z" fill="#c0c0c0" />
+ </svg>
+ <h2 class="flex-grow-1 mb-0"><%= t "site.about.local_knowledge_title" %></h2>
+ </div>
+ <p><%= t "site.about.local_knowledge_html" %></p>
+ </section>
-<div class='text'>
- <div class='section'>
- <p><strong><%= t "about_page.lede_text" %></strong></p>
- <h2><div class='icon local'></div><%= t "about_page.local_knowledge_title" %></h2>
- <p><%= t "about_page.local_knowledge_html" %></p>
- </div>
+ <section>
+ <div class="d-flex align-items-center gap-2 mb-2">
+ <svg width="30" height="30" class="flex-shrink-0">
+ <circle cx="15" cy="15" r="13" fill="none" stroke="#c0c0c0" stroke-width="4" />
+ <path d="m 15,7 -6,6 0,7 4,0 0,-4 4,0 0,4 4,0 0,-7 z" fill="#c0c0c0" />
+ </svg>
+ <h2 class="flex-grow-1 mb-0"><%= t "site.about.community_driven_title" %></h2>
+ </div>
+ <p>
+ <%= t "site.about.community_driven_1_html", :osm_blog_link => link_to(t("site.about.community_driven_osm_blog"),
+ t("site.about.community_driven_osm_blog_url")),
+ :user_diaries_link => link_to(t("site.about.community_driven_user_diaries"),
+ diary_entries_path),
+ :community_blogs_link => link_to(t("site.about.community_driven_community_blogs"),
+ t("site.about.community_driven_community_blogs_url")),
+ :osm_foundation_link => link_to(t("site.about.community_driven_osm_foundation"),
+ t("site.about.community_driven_osm_foundation_url")) %>
+ </p>
+ </section>
- <div class='section'>
- <h2><div class='icon community'></div><%= t "about_page.community_driven_title" %></h2>
- <p><%= t "about_page.community_driven_html", :diary_path => diary_path %></p>
- </div>
+ <section id="open-data">
+ <div class="d-flex align-items-center gap-2 mb-2">
+ <svg width="30" height="30" class="flex-shrink-0">
+ <circle cx="15" cy="15" r="13" fill="none" stroke="#c0c0c0" stroke-width="4" />
+ <path d="M20.196 18 a6 6 0 1 1 0 -6" fill="none" stroke="#c0c0c0" stroke-width="3" />
+ </svg>
+ <h2 class="flex-grow-1 mb-0"><%= t "site.about.open_data_title" %></h2>
+ </div>
+ <p>
+ <%= t "site.about.open_data_1_html", :open_data => tag.i(t("site.about.open_data_open_data")),
+ :copyright_license_link => link_to(t("site.about.open_data_copyright_license"),
+ copyright_path) %></p>
+ </section>
- <div class='section' id='open-data'>
- <h2><div class='icon open'></div><%= t "about_page.open_data_title" %></h2>
- <p><%= t "about_page.open_data_html", :copyright_path => copyright_path %></p>
- </div>
-</div>
+ <section id="legal">
+ <div class="d-flex align-items-center gap-2 mb-2">
+ <svg width="30" height="30" class="flex-shrink-0">
+ <circle cx="15" cy="15" r="13" fill="none" stroke="#c0c0c0" stroke-width="4" />
+ <g fill="none" stroke="#c0c0c0" stroke-width="1.125" stroke-linecap="round">
+ <path transform="translate(15 15) scale(2.2 1.75) rotate(45)"
+ d="M.5 1 a1 1 0 0 0 0 -2 h-2.5 a1 1 0 0 1 0 -2 h.5" />
+ <path transform="translate(15 15) scale(-2.2 -1.75) rotate(45)"
+ d="M.5 1 a1 1 0 0 0 0 -2 h-2.5 a1 1 0 0 1 0 -2 h.5" />
+ </g>
+ </svg>
+ <h2 class="flex-grow-1 mb-0"><%= t "site.about.legal_title" %></h2>
+ </div>
+ <p>
+ <%= t "site.about.legal_1_1_html", :openstreetmap_foundation_link => link_to(t("site.about.legal_1_1_openstreetmap_foundation"),
+ t("site.about.legal_1_1_openstreetmap_foundation_url")),
+ :terms_of_use_link => link_to(t("site.about.legal_1_1_terms_of_use"),
+ t("site.about.legal_1_1_terms_of_use_url")),
+ :aup_link => link_to(t("site.about.legal_1_1_aup"),
+ t("site.about.legal_1_1_aup_url")),
+ :privacy_policy_link => link_to(t("site.about.legal_1_1_privacy_policy"),
+ t("site.about.legal_1_1_privacy_policy_url")) %>
+ </p>
+ <p>
+ <%= t "site.about.legal_2_1_html", :contact_the_osmf_link => link_to(t("site.about.legal_2_1_contact_the_osmf"),
+ t("site.about.legal_2_1_contact_the_osmf_url")) %>
+ </p>
+ <p>
+ <%= t "site.about.legal_2_2_html", :registered_trademarks_link => link_to(t("site.about.legal_2_2_registered_trademarks"),
+ t("site.about.legal_2_2_registered_trademarks_url")) %>
+ </p>
+ </section>
-<% 5.times do |i| %>
- <div class='caption photo-<%= i %>'>
- <%= t "about_page.photo_caption_#{i}_html" %>
- </div>
+ <section id="partners">
+ <div class="d-flex align-items-center gap-2 mb-2">
+ <svg width="30" height="30" class="flex-shrink-0">
+ <circle cx="15" cy="15" r="13" fill="none" stroke="#c0c0c0" stroke-width="4" />
+ <g stroke="#c0c0c0" stroke-width="4" stroke-linecap="round">
+ <line x1="11" y1="15" x2="19" y2="15" />
+ <line x1="15" y1="11" x2="15" y2="19" />
+ </g>
+ </svg>
+ <h2 class="flex-grow-1 mb-0"><%= t "site.about.partners_title" %></h2>
+ </div>
+ <p><%= t "layouts.hosting_partners_2024_html", :fastly => link_to(t("layouts.partners_fastly"), "https://www.fastly.com/"),
+ :corpmembers => link_to(t("layouts.partners_corpmembers"), "https://osmfoundation.org/wiki/Corporate_Members"),
+ :partners => link_to(t("layouts.partners_partners"), "https://hardware.openstreetmap.org/thanks/") %>
+ </p>
+ </section>
+ </div>
+ <% end %>
<% end %>
-
-<a class='next' id='next-photo' href='#'><%= t "about_page.next" %></a>