Skip to content

Redesign "The Association" page - #434

Merged
andreslucena merged 83 commits into
mainfrom
about/the-association
Jul 20, 2026
Merged

Redesign "The Association" page #434
andreslucena merged 83 commits into
mainfrom
about/the-association

Conversation

@greenwoodt

@greenwoodt greenwoodt commented Jun 8, 2026

Copy link
Copy Markdown
Member

NOTE: As the partners section #402 is not built yet, this PR omits one section based on the design:

image

Summary by CodeRabbit

Summary by CodeRabbit

  • Documentation

    • Updated About page localization, including refreshed association links, history timeline copy, mission/vision text, partners, recognitions, values, and updated CTAs.
  • New Features

    • Added a drag-to-scroll horizontal carousel on the About page.
  • Style

    • Restyled the About page (hero, mission/vision, carousel, values “pill” tags, recognitions grid, and bottom CTA card) and added dedicated carousel item styling.
  • Chores

    • Adjusted i18n configuration to prevent unused-key warnings for the updated About association keys.

@coderabbitai

coderabbitai Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

This PR redesigns the About page with restructured content, a new drag-to-scroll carousel for image galleries, and refreshed visual styling. The locale strings support the new layout with association membership/donation CTAs, history timeline, and updated values messaging. A carousel JavaScript module and CSS components enable horizontal image scrolling. The About template is significantly restructured with hero typography updates, mission/vision section, history timeline, partners CTA, banner image, recognitions grid, and values section redesign including rounded pill-style value tags.

Changes

About Page and Carousel Redesign

Layer / File(s) Summary
Content and locale updates
locales/en.yml, config/i18n-tasks.yml
About section restructured under about.association with membership/donation CTAs and support links; values section title changed to "A Technopolitical Project"; new history timeline, mission, partners, and recognitions strings added. i18n configuration extended to treat association keys as used.
Carousel drag-to-scroll implementation
source/javascripts/carousel.js, source/stylesheets/components/carousel.css
New carousel feature enables horizontal drag-to-scroll on elements with data-scroll-gallery attribute. JavaScript wires mouse and touch event handlers to pause/resume CSS animations and update scroll position. CSS styles gallery items with fixed dimensions and cover-based image fitting.
Global carousel asset wiring
source/stylesheets/site.css, source/layouts/layout.erb
Site stylesheet imports the carousel component CSS. Layout template registers carousel JavaScript as an async script include to activate drag-to-scroll globally.
Hero section and association links
source/localizable/about.html.erb
Hero text styling updated from gray to black with adjusted spacing. CTA area replaced with a loop rendering translated association membership and donation links via arrow-link partial.
Mission, vision, and image carousel
source/localizable/about.html.erb
New red-background mission/vision section with introductory text. Horizontal scrollable image carousel integrated below using the carousel feature with multiple about images.
History timeline section
source/localizable/about.html.erb
History/timeline section driven by about.history.timeline items with conditional "above" and "below" text blocks and timeline visual elements for year-by-year narrative.
Partners, banner, and recognitions
source/localizable/about.html.erb
Partners CTA section with download link, dedicated banner image section, and new recognitions grid with responsive logo/year presentation and grid-aligned text for multiple translated entries.
Values section redesign
source/localizable/about.html.erb
Values section container and typography restyled with updated heading/intro classes and arrow-link-rounded partial. Value tags transformed from bordered text to white-on-red rounded pills with flex layout and controlled whitespace. Bottom card section added; prior support/FAQ block removed.

Sequence Diagram

sequenceDiagram
  participant User
  participant CarouselJS as carousel.js
  participant DOM
  User->>CarouselJS: mousedown on gallery
  CarouselJS->>CarouselJS: Record drag start position
  CarouselJS->>DOM: Toggle cursor (grabbing)
  User->>CarouselJS: mousemove
  CarouselJS->>DOM: Update scrollLeft delta
  User->>CarouselJS: mouseup / mouseleave
  CarouselJS->>DOM: Restore cursor (grab)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • decidim/decidim.org#382: The About page switches value/CTA link markup to use the partials/arrow-link and partials/arrow-link-rounded components that were introduced in this PR's first-steps redesign.
  • decidim/decidim.org#409: The redesigned About page renders partials/cta-banner, which is updated in that PR with new translation keys and link targets affecting the banner output.

Suggested reviewers

  • andreslucena

Poem

🐰 The About page springs to life anew,
With carousels that glide and slide on through,
Red pills round up our values tight,
Timeline chapters dance in sight,
The Association's story, pixel-perfect and true!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Redesign "The Association" page' directly matches the main objective from issue #395 and accurately summarizes the primary changeset focus.
Linked Issues check ✅ Passed The PR implements the redesign of 'The Association' page per issue #395, with all major sections redesigned (about, mission, values, history, partners CTA, recognitions) plus carousel functionality and responsive mobile layout adjustments, addressing all design requirements.
Out of Scope Changes check ✅ Passed All changes directly support the page redesign objective: localization updates, template restructuring, carousel implementation, styling, and configuration are all in-scope for the design overhaul.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@greenwoodt
greenwoodt marked this pull request as draft June 8, 2026 15:29
@greenwoodt greenwoodt self-assigned this Jun 8, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
locales/en.yml (1)

29-29: 💤 Low value

Minor grammar improvement: use present perfect tense.

The phrase "From the beginning, Decidim has a social contract" mixes temporal markers. Consider using present perfect "has had" to properly express continuity from past to present.

📝 Suggested improvement
-    values_intro: Decidim is a technopolitical project that serves as a public commons infrastructure, combining institutional support with open and free code accessibility. From the beginning, Decidim has a social contract that defines the values of the project.
+    values_intro: Decidim is a technopolitical project that serves as a public commons infrastructure, combining institutional support with open and free code accessibility. From the beginning, Decidim has had a social contract that defines the values of the project.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@locales/en.yml` at line 29, Update the string for the YAML key values_intro
to use present perfect tense ("has had") instead of "has" to indicate continuity
from past to present; locate the values_intro entry in locales/en.yml and
replace "Decidim has a social contract" with "Decidim has had a social
contract", preserving the rest of the sentence and punctuation.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@locales/en.yml`:
- Line 29: Update the string for the YAML key values_intro to use present
perfect tense ("has had") instead of "has" to indicate continuity from past to
present; locate the values_intro entry in locales/en.yml and replace "Decidim
has a social contract" with "Decidim has had a social contract", preserving the
rest of the sentence and punctuation.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 15aa9144-f5ff-400c-a781-7e86cdccb0ec

📥 Commits

Reviewing files that changed from the base of the PR and between 9f705ca and 95573c7.

⛔ Files ignored due to path filters (1)
  • source/images/banner_about.svg is excluded by !**/*.svg
📒 Files selected for processing (2)
  • locales/en.yml
  • source/localizable/about.html.erb

@netlify

netlify Bot commented Jun 8, 2026

Copy link
Copy Markdown

Deploy Preview for decidim-website ready!

Name Link
🔨 Latest commit 3e88c58
🔍 Latest deploy log https://app.netlify.com/projects/decidim-website/deploys/6a59f11fc7a7a70008cf98d5
😎 Deploy Preview https://deploy-preview-434--decidim-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@greenwoodt
greenwoodt requested a review from andreslucena June 30, 2026 12:30
@greenwoodt

Copy link
Copy Markdown
Member Author

@andreslucena applied changes. Ready for another round

@greenwoodt

greenwoodt commented Jul 13, 2026

Copy link
Copy Markdown
Member Author

Any chance we can get a second review @andreslucena? Of your comments and suggestions have long been tacked. It will block #444

Comment thread source/localizable/about.html.erb
Comment thread source/localizable/about.html.erb
@greenwoodt

greenwoodt commented Jul 17, 2026

Copy link
Copy Markdown
Member Author

I have fixed the resolution issue in 3e88c58 affecting the timeline section you mentioned [here](https://github.com/decidim/decidim.org/pull/434#discussion_r3601263506) @andreslucena:

Screencast.from.2026-07-17.11-06-17.webm

Let me know if you're happy with the implementation criteria, so we can fix: #446

@andreslucena
andreslucena merged commit 6efe945 into main Jul 20, 2026
8 checks passed
@andreslucena
andreslucena deleted the about/the-association branch July 20, 2026 08:37
@github-project-automation github-project-automation Bot moved this from Code Review to Done in New Web Design Jul 20, 2026
@coderabbitai coderabbitai Bot mentioned this pull request Jul 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

The Association (About us)

4 participants