Merge pull request #1 from TigerWolf/add-sponsors

Lift sponors from https://2024.rubyconf.au/

Gemfile.lock

@@ -117,6 +117,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-22
+  arm64-darwin-23
 
 DEPENDENCIES
   middleman (~> 4.5)
@@ -127,4 +128,4 @@ DEPENDENCIES
   wdm (~> 0.1)
 
 BUNDLED WITH
-   2.4.13
+   2.5.11

source/parts/_sponsors.html.erb

@@ -2,9 +2,48 @@
   <div class="mx-auto">
     <h2 class="heading">Sponsors</h2>
     <div>Ruby Retreat couldn’t exist without the support of our sponsors. Interested in sponsoring part of Ruby Retreat? <a class="link" href="mailto:[email protected]">Get in touch</a>.</div>
-    <div class="logos">
-      TBD.
-    </div>
+    <section id="sponsors" class="full-width">
+      <div class="content-grid">
+        <div class="sponsors-list">
+          <hr>
+          <h3>Ruby sponsors</h3>
+          <div class="sponsors-tier ruby-sponsors">
+            <div class="sponsor-logo">
+              <a href="https://www.hotdoc.com.au/" target="_blank">
+                <img alt="HotDoc" src="/images/sponsors/2024/hotdoc.png">
+              </a>
+            </div>
+          </div>
+          <hr>
+          <h3>Sapphire sponsors</h3>
+          <div class="sponsors-tier sapphire-sponsors">
+            <div class="sponsor-logo">
+              <a href="https://assemblyfour.com/" target="_blank">
+                <img alt="Assembly Four" src="/images/sponsors/2024/assembly-four.png">
+              </a>
+            </div>
+          </div>
+          <hr>
+          <h3>Opal sponsors</h3>
+          <div class="sponsors-tier opal-sponsors">
+            <div class="sponsor-logo">
+              <a href="https://reinteractive.com/" target="_blank">
+                <img alt="reinteractive" src="/images/sponsors/2024/reinteractive.png">
+              </a>
+            </div>
+          </div>
+          <hr>
+          <h3>Amber sponsors</h3>
+          <div class="sponsors-tier amber-sponsors">
+            <div class="sponsor-logo">
+              <a href="https://www.lookahead.com.au/" target="_blank">
+                <img alt="Lookahead" src="/images/sponsors/2024/lookahead.png">
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
     <div class="blurb">
       <%= image_tag 'rubyau-logo-large.png', :class => 'ruby-logo' %>
       <p>Ruby Retreat is a <a href="https://ruby.org.au/">Ruby Australia</a> event.<br/> For all enquiries contact <a class="link" href="mailto:[email protected]">[email protected]</a>.</p>

source/stylesheets/site.css

@@ -675,3 +675,134 @@ h3 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+
+
+.mx-auto {
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 20px;
+  text-align: center;
+}
+
+.heading {
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+.link {
+  color: #0073e6;
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.full-width {
+  width: 100%;
+  padding: 0 20px;
+}
+
+.content-grid {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sponsors-list {
+  width: 100%;
+}
+
+.sponsors-list hr {
+  border: none;
+  border-top: 2px solid #e0e0e0;
+  margin: 20px 0;
+}
+
+.sponsors-list h3 {
+  font-size: 1.5em;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.sponsors-tier {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.sponsor-logo {
+  margin: 0 10px;
+}
+
+.sponsor-logo a {
+  display: inline-block;
+  background: #fff;
+}
+
+.sponsor-logo img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.sponsor-logo img:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.ruby-sponsors {
+  background-color: #ffe4e1;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.sapphire-sponsors {
+  background-color: #e0f7fa;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.opal-sponsors {
+  background-color: #f3e5f5;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.amber-sponsors {
+  background-color: #fff3e0;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.blurb {
+  margin-top: 40px;
+  text-align: center;
+}
+
+.blurb .ruby-logo {
+  max-width: 150px;
+  height: auto;
+  display: block;
+  margin: 0 auto 10px;
+}
+
+.blurb p {
+  font-size: 1.2em;
+}
+
+@media (max-width: 600px) {
+  .sponsor-logo {
+      margin: 0;
+  }
+
+  .sponsor-logo img {
+      max-width: 80%;
+  }
+}