🎨 feat(ui): Massive UI refactoring to match Figma 'Roman' theme

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "yaml.schemas": {
+        "https://www.artillery.io/schema.json": []
+    }
+}

CHANGELOG.md

@@ -1,8 +1,16 @@
 # Changelog
 
-## 0.16.5
-
-* [Antigravity/Gemini] feat(agenda): 🗣️ Add Marco Roth abstract and title (Fixes #74).
+## 0.17.0
+
+* [gemini] feat(ui): 🎨 Massive UI refactoring based on Figma design (#88).
+    * Implemented "Roman" theme with Wine Red (#802126) and Cream (#fcf7e8) color palette.
+    * Refined logotype to match PDF specifications, including the "I♦I" pictogram.
+    * Completely redesigned Hero section with full-viewport background, transparent header, and improved CTAs.
+    * Updated all sections (About, Speakers, Schedule, Sponsors, Venue) to match the minimalist, left-aligned design from Figma mockups.
+    * Fixed invisible "RVBYCON" hero title by adding cream color override.
+    * Implemented dynamic sticky header that transitions from transparent to cream on scroll for better visibility.
+    * Simplified footer with refined link columns and social icons.
+    * Integrated "Trajan Pro" as the primary serif font, with "Cinzel" as a high-fidelity fallback.
 
 ## 0.16.3
 

doc/plans/20260329-figma-ui-refactoring.md

@@ -0,0 +1,51 @@
+# Figma UI Refactoring Plan
+
+## Description
+This massive UI refactoring uses the design provided in Figma via [Issue #88](https://github.com/palladius/rubycon.it/issues/88) to update the Rubycon.it static website.
+The design utilizes a sophisticated Wine Red (`#802126`) and Cream White (`#fcf7e8`) color set, moving away from the previously planned blue scales to better align with the Roman "Rubicon" theme.
+
+We will use the **figma26** branch to ensure `main` remains stable.
+
+## Subtasks
+
+### 1. Environment & Git Setup
+- Create and checkout a new branch called `figma26`.
+- Add an entry in `CHANGELOG.md` for this UI refactoring initiative.
+- **Testable**: `git branch --show-current` outputs `figma26`.
+- **Revertible**: `git checkout main && git branch -D figma26`.
+
+### 2. Figma MCP Server Configuration
+- The user must ensure the Antigravity Figma MCP Server is installed and authenticated. 
+- You can connect via Figma's Remote MCP endpoint (`https://mcp.figma.com/mcp`) or by enabling the Desktop MCP server in Figma Dev Mode.
+- **Testable**: The agent can successfully run Figma MCP tools or list Figma resources.
+- **Revertible**: Disable or remove the MCP from Antigravity configuration.
+
+### 3. Extract Design System
+- Utilize the Figma MCP to read the Figma file: `https://www.figma.com/design/qfjYpDGQmX7vRR6e2eKXmU/Revisione-Ui`.
+- Extract exact hex codes, typography sizes, layout boundaries, and specific assets.
+- **Testable**: Agent outputs a clear mapping of what variables will be created.
+- **Revertible**: No code changes at this stage.
+
+### 4. Implement Basic CSS Design Tokens
+- Update the main stylesheet to include the extracted Figma tokens as CSS variables under `:root`.
+- **Testable**: Run `just build` and inspect the generated CSS.
+- **Revertible**: Revert CSS file modifications via Git.
+
+### 5. Layout Refactor (Header & Footer)
+- Update `_layouts/default.html` and includes such as `header.html` and `footer.html`.
+- **Testable**: `curl -s http://localhost:4002 | grep "your-new-classes"` or verify with Playwright.
+- **Revertible**: Revert HTML files via Git.
+
+### 6. Pages Refactor (Schedule, Speakers, Sponsors)
+- Adjust the layout of iteration loops (speakers, schedule, sponsors) to align with Figma specifications.
+- Ensure the newly updated schedule logic integrates smoothly with the new UI.
+- **Testable**: Use Playwright to capture screenshots of `http://localhost:4002` and visually inspect. Wait for user feedback.
+- **Revertible**: Revert HTML/CSS file differences.
+
+### 7. Review, Version Bump & Push
+- Update `version:` in `_config.yml` (semantic bump, e.g., minor or major depending on scope).
+- Add detailed `CHANGELOG.md` entry.
+- Test with `just test`.
+- Push to origin and create a GitHub Pull Request closing/referencing #88.
+- **Testable**: Verify Netlify deployment preview generated from the PR.
+- **Revertible**: Delete branch and close PR.

graphic-assets

@@ -0,0 +1 @@
+/home/riccardo/git/rubycon.it-pvt-data/projects/graphic-assets/

rubycon.it/404.html

@@ -3,15 +3,68 @@
 permalink: /404.html
 ---
 
-{% capture content %}
-<div class="container text-center">
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
-</div>
-{% endcapture %}
+<section class="py-16 md:py-24 bg-[#FAFAFA]">
+    <div class="mx-auto w-full max-w-[1376px] px-6 md:px-8">
+        <div class="text-center py-16 md:py-32">
+            <p class="text-[#8B2D2B] mb-6" style="font-family: 'Noto Serif', serif; font-weight: 500; font-size: 20px; line-height: 20px; letter-spacing: 0;">
+                404 Error
+            </p>
+            <h1 class="text-[#3F3F3F] mb-6" style="font-family: 'Noto Serif', serif; font-weight: 400; font-size: clamp(48px, 6vw, 72px); line-height: clamp(56px, 7vw, 84px); letter-spacing: 0; text-transform: none;">
+                Page not found<br>
+                <span style="color: #802126;">When in Rome...</span>
+            </h1>
+            <p class="text-[#3F3F3F] max-w-[664px] mx-auto mb-12" style="font-family: 'Inter', sans-serif; font-weight: 400; font-size: 20px; line-height: 32px; letter-spacing: 0;">
+                It seems the page you're looking for has been lost in time. But don't worry, the Rubicon is calling you back.
+            </p>
+
+            <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
+                <a href="{{ '/' | relative_url }}" class="inline-flex items-center justify-center" style="box-sizing: border-box; width: 220px; height: 52px; padding: 16px 32px; border: 1px solid #802126; color: #FCF7E8; background-color: #802126; font-family: 'Noto Serif', serif; font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 0; text-transform: none; text-decoration: none; transition: all 0.3s ease;">
+                    Back to Home
+                </a>
+                <a href="{{ '/schedule/' | relative_url }}" class="inline-flex items-center justify-center" style="box-sizing: border-box; width: 220px; height: 52px; padding: 16px 32px; border: 1px solid #802126; color: #802126; background-color: transparent; font-family: 'Noto Serif', serif; font-weight: 500; font-size: 16px; line-height: 16px; letter-spacing: 0; text-transform: none; text-decoration: none; transition: all 0.3s ease;">
+                    View Schedule
+                </a>
+            </div>
+        </div>
 
-{% include section.html
-    id="error" 
-    title="404" 
-    content=content
-%}
+        <div class="mt-20 md:mt-32 border-t border-[#D8CFB6]">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
+                <article class="text-center">
+                    <p class="text-[#8B2D2B] mb-3" style="font-family: 'Noto Serif', serif; font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: 0; text-transform: none;">
+                        🎤
+                    </p>
+                    <h3 class="text-[#3F3F3F] mb-2" style="font-family: 'Noto Serif', serif; font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: 0; text-transform: none;">
+                        Talks
+                    </h3>
+                    <p class="text-[#3F3F3F]" style="font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0;">
+                        <a href="{{ '/schedule/' | relative_url }}" style="color: #802126; text-decoration: none; font-weight: 500;">View the full schedule</a> of deep talks by the Ruby community.
+                    </p>
+                </article>
+
+                <article class="text-center">
+                    <p class="text-[#8B2D2B] mb-3" style="font-family: 'Noto Serif', serif; font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: 0; text-transform: none;">
+                        🎟️
+                    </p>
+                    <h3 class="text-[#3F3F3F] mb-2" style="font-family: 'Noto Serif', serif; font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: 0; text-transform: none;">
+                        Tickets
+                    </h3>
+                    <p class="text-[#3F3F3F]" style="font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0;">
+                        <a href="{{ site.event.tickets_url }}" style="color: #802126; text-decoration: none; font-weight: 500;">Grab your ticket</a> for Rimini, 8 May.
+                    </p>
+                </article>
+
+                <article class="text-center">
+                    <p class="text-[#8B2D2B] mb-3" style="font-family: 'Noto Serif', serif; font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: 0; text-transform: none;">
+                        ❓
+                    </p>
+                    <h3 class="text-[#3F3F3F] mb-2" style="font-family: 'Noto Serif', serif; font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: 0; text-transform: none;">
+                        FAQ
+                    </h3>
+                    <p class="text-[#3F3F3F]" style="font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0;">
+                        <a href="{{ '/faq/' | relative_url }}" style="color: #802126; text-decoration: none; font-weight: 500;">Check our FAQs</a> for answers to common questions.
+                    </p>
+                </article>
+            </div>
+        </div>
+    </div>
+</section>

rubycon.it/_config.yml

@@ -21,9 +21,9 @@
 title: RubyCon - The Ruby Conference in Italy
 # When we have the email for the domain:
 info_email: info@rubycon.it
-cfp_email: cfp@rubycon.it
-site_version: "0.18.0"
-support_email: support@rubycon.com
+cfp_email: info@rubycon.it
+site_version: "0.17.0"
+support_email: info@rubycon.it
 
 event:
   name: Rubycon

rubycon.it/_data/faq.yml

@@ -4,7 +4,7 @@
     So here we are! And by speaking to devs and sponsors, it looks like they appreciate what we're trying to do, which motivates us to do more!
 - question: '✈️ How do I travel to Rubycon / 🇮🇹 Rimini?'
   answer: |
-    The biggest international airport is Bologna Marconi Airport (BLQ). The railway system is very rich and efficient and connects Rimini to Bologna > Milan, Ravenna > Venezia, Ancona > south. So you can also fly to Florence, Milan and Venice.
+    The biggest international airport is Bologna Marconi Airport (BLQ). The railway system is very rich and efficient and connects Rimini to Bologna > Milan, Ravenna > Ferrara > Venezia, Ancona > south. So you can also fly to Florence, Milan and Venice.
     Check our <a href="/logistics/">Logistics page</a> for detailed travel info including airports, trains, and driving directions.
 - question: '🏨 Any updates on Hotels?'
   answer: |
@@ -26,7 +26,7 @@
 - question: "🤷‍♀️  I have a great question which you didn't answer.."
   answer: |
     Join our <a href="https://discord.gg/T43GHE6wHH">Discord chat</a> and ask it there. This is NOT just for people who've already bought a ticket, it's the right place to ask a question and make up your mind!
-    You can also drop us an email at <a href="mailto:support@rubycon.com">support@rubycon.com</a>.
+    You can also drop us an email at <a href="mailto:info@rubycon.it">info@rubycon.it</a>.
 - question: "🎓 Do you care about Equity? Do you have a Scholarship program?"
   answer: |
     Yes we do! We have a dedicated <a href="/scholarship">Scholarship Program</a> to ensure everyone has a fair chance to participate.

rubycon.it/_data/navigation.yml

@@ -1,22 +1,9 @@
-- name: Home
-  link: "/#home"
 - name: Schedule
   link: "/schedule/"
-- name: Info
-  submenu:
-    # Nota: questi dovrebbero linkare tutti e soli i subpages della home - cioe' dovrebbero essere tutti LOCALU a / come #qualcosa.
-    #       Le sotto pagine dovrebbero avere un link relativo in BASSO dove ci sono MOLTI link.
-    #       Perche' direte? Se no l'header si appesantisce un botto.
-    - name: About
-      link: "/#about"
-    - name: Speakers
-      link: "/#speakers"
-    - name: Venue
-      link: "/#venue"
-    - name: Sponsors
-      link: "/#sponsors"
-    - name: Logistics
-      link: "/logistics/"
+- name: Speakers
+  link: "/speakers/"
+- name: Venue
+  link: "/#venue"
 - name: Blog
   link: "/articles/"
 - name: FAQ

rubycon.it/_data/schedule.yml

@@ -1,3 +1,71 @@
-# This is redundant: schedule is in _includes/dsl/content.rb and can be ascertained by running `just schedule`.
-# We keep this file as a placeholder to avoid breaking potential Jekyll references, 
-# but the Ruby code is the single source of truth!
+- date: 2026-05-08
+  events:
+    - clock: "8:30"
+      description: "Check-in & Welcome Coffee"
+
+    - clock: "9:30"
+      description: "Welcome to Rubycon"
+      full_name: "Riccardo Carlesso"
+      tag: "Intro"
+
+    - clock: "9:45"
+      description: "Ruby Is the Best Language for Building AI Web Apps"
+      full_name: "Carmine Paolino"
+      tag: "Keynote"
+
+    - clock: "10:25"
+      description: "Shift-left on Accessibility in your Ruby webapps"
+      full_name: "Julia López"
+
+    - clock: "11:05"
+      description: "Coffee Break"
+      tag: "Break"
+
+    - clock: "11:20"
+      description: "Breaking the rules of software engineering: will it work?"
+      full_name: "Silvano Stralla"
+
+    - clock: "12:00"
+      description: "rv, a ruby manager for the future"
+      full_name: "André Arko"
+
+    - clock: "12:40"
+      description: "Lunch Break & Networking"
+      tag: "Break"
+
+    - clock: "13:45"
+      description: "5minutes for everyone who has something to say"
+      full_name: "Many speakers (FIFO)"
+      tag: "FIFO"
+
+    - clock: "14:45"
+      description: "Semantic Image Search in Ruby: Postgres, Redis, or LLM?"
+      full_name: "Michele Franzin"
+
+    - clock: "15:25"
+      description: "My daily life on Ruby"
+      full_name: "Akira Matsuda"
+
+    - clock: "16:05"
+      description: "Coffee Break"
+      tag: "Break"
+
+    - clock: "16:20"
+      description: "HTML-Aware ERB: The Path to Reactive Rendering"
+      full_name: "Marco Roth"
+
+    - clock: "17:00"
+      description: "From Plato to Production: A Philosophical History of Code"
+      full_name: "Yara Debian"
+
+    - clock: "17:40"
+      description: "Piadina - It's a wrap!"
+      full_name: "Riccardo Carlesso"
+
+    - clock: "18:00"
+      description: "Drinks or Shower or Nap"
+      tag: "optional"
+
+    - clock: "20:00"
+      description: "Dinner + Toga Party! @ Bagno 46"
+      tag: "Dinner"