Razes - Civic Community Resource Landing Page Template Template | Build Fully Functional Applications with Rocket
Razes - Civic Community Resource Landing Page Template
The Raízes template is a modular card grid landing page built for Brazilian cultural associations and diaspora community organizations. It pairs a Community Mosaic hero with a scrolling Testimonial Mosaic and a resource hub layout. The result is a warm, civic-grade site that earns trust before asking for anything, showing thirty real faces first, then handing visitors exactly what they need.
by Rocket studio
Loading preview…
Quick summary
This template turns a single landing page into a full community hub. It leads with a mosaic of real member photographs, moves through bilingual testimonial cards, and transitions into downloadable resources and event listings. The Slate and Sky color system keeps the site dignified and approachable, while the modular card grid layout makes every section easy to scan and act on.
Who this template is for
This template serves organizations that support residents living far from home. It is built for groups that run real-world services and need a website that communicates with the same warmth and professionalism they offer in person.
Brazilian cultural associations and diaspora community hubs running Portuguese literacy classes, legal aid sessions, or cultural events
Nonprofit coordinators and volunteers managing outreach programs for first-generation immigrants and undocumented families
Community members and staff who need user friendly pages without deep coding knowledge, ready to publish quickly
What problem this template solves
Many civic and nonprofit organizations struggle to present their services online in a way that feels human rather than bureaucratic. A plain government-style website often fails to communicate the warmth that keeps people coming back. This template solves that gap.
Residents need easy access to legal aid documents, class schedules, and event calendars without hunting through cluttered pages
Organizations lack the design tools and development budget to build accessible, bilingual digital experiences from scratch
New visitors need social proof before they trust an institution enough to share their name and email
What you get with this template
This is a complete, ready-to-customize landing page solution. It includes all core sections, reusable components, and a bilingual content structure so your site can meet the community where it is.
A 30-tile Community Mosaic hero with hover name reveals, centered headline, and scroll-triggered card animations across the page
A full Testimonial Mosaic section with member story cards, Portuguese and English quote pairs, and program tags for Cidadania, Alfabetização, and Assessoria Jurídica
Theme
Civic Service
Creative direction
Testimonial Mosaic
Color system
Slate & Sky
Style
Card Grid (Modular)
Direction
Content/Resource
Page Sections
Community Mosaic Hero with Hover Reveals
Testimonial Mosaic with Program Tags
Persistent Resource Call to Action with Modal
Bilingual Content Architecture
Modular Card Grid Layout
Civic Warmth Color and Typography System
Related questions
Can I use this template without coding experience?
Is the bilingual layout fixed, or can I change the languages?
How does the resource download section work?
Can I adapt this template for a different cultural community?
What file formats are included with the template?
A resource transition zone, programs bento grid, upcoming events calendar grid, and a persistent bottom-bar call to action with a resource access modal
Feature list
This landing page is built around features that support real community engagement and reduce the friction of creating and managing an online presence.
Community Mosaic Hero with Hover Reveals
The hero section is a tight grid of dozens of uniform photo tiles. On hover, each tile lifts and reveals the member's first name and years of membership. A bilingual headline sits centered over the mosaic, grounding the site in collective identity from the first scroll.
Testimonial Mosaic with Program Tags
Member story cards each carry a photograph, a bilingual quote, and a program tag. As visitors scroll, the cards shift from personal testimonials to resource cards. This scroll-driven layout guides users from emotional connection to practical action without a hard section break.
Resource Hub with Modal Registration
A persistent bottom bar appears after the first scroll, displaying the primary call to action. Clicking it opens a lightweight modal asking for a first name, email, and a checkbox grid of interests. Visitors can also browse and download individual resource PDFs without registering, building trust before commitment.
Bilingual Content Structure
Every key piece of communication is presented in both Portuguese and English. This bilingual layout ensures the site is accessible and legible for first-generation community members and English-dominant visitors alike, broadening reach without extra development effort.
Modular Card Grid Layout
All sections use a card grid format. Programs, events, testimonials, and resources each live in their own modular card components. This layout makes managing and updating individual sections straightforward for non-technical staff.
Marigold Accent and Civic Color System
Event dates, badges, and notification dots use a single marigold accent color. The rest of the palette uses institutional charcoal, warm slate, sky blue, and a pale morning wash. The result is a site that feels like a government building decorated with fresh flowers.
Page sections overview
Section
Purpose
Community Mosaic Hero
Establishes trust through 30 real member photo tiles with hover name reveals and a bilingual headline
Testimonial Mosaic Cards
Presents member stories with program tags, building emotional connection as visitors scroll
Resource Transition Zone
Shifts the page from personal stories to downloadable guides, checklists, and schedules
Programs Bento Grid
Showcases core services in a scannable grid format with individual program cards
Upcoming Events Grid
Displays community events in a calendar-style card layout with marigold date accents
Persistent call to action Bar
Stays visible after first scroll and opens the resource access modal on click
Footer Pattern Split
Carries the logo and tagline on the left, with navigation links on the right
Design & branding system
The visual identity follows a Civic Service theme. The palette balances institutional authority with genuine human warmth, making the site feel both credible and welcoming.
Color system uses institutional charcoal (#3B4252) for text, warm slate (#636E7B) for card borders, sky blue (#5B9BD5) for buttons and active links, pale wash (#EDF2F7) for backgrounds, and marigold (#E2A72E) reserved for event dates and badges
Typography pairs Plus Jakarta Sans for headlines with DM Sans for body text, keeping the site legible and modern across all screen sizes
Animations are medium intensity: mosaic tile hover lifts, scroll-triggered card reveals, and staggered grid entrances create movement without overwhelming the content
Mobile & speed optimization
This template is built mobile-first. The target users are often on phones in community settings, so the site must perform well on smaller screens without sacrificing clarity or warmth.
Responsive design ensures every section, from the mosaic hero to the resource cards, adapts cleanly to phone and tablet layouts
Animations rely on CSS and minimal JavaScript, keeping pages light and fast to load even on slower mobile connections
The card grid layout and large tap targets make the site intuitive for users navigating on touch screens in busy environments
How this template helps you convert
The page earns every click before asking for one. Rather than leading with a form, it leads with faces, stories, and resources.
The 30-tile mosaic hero and testimonial cards present social proof immediately, so visitors feel seen and informed before they reach any call to action, increasing the likelihood of voluntary registration
The free PDF download path lets residents access essential information without committing to registration, creating a low-barrier entry point that builds trust and encourages return visits
The persistent bottom bar keeps the primary call to action visible throughout the scroll, so community members who are ready to engage can act at any moment without searching for a button
Other information about this template
This template is part of a broader library of civic and community-focused templates designed to help organizations establish a powerful tool for online outreach and resident engagement.
The Razes Civic Community Resource Landing Page template is a Webflow-based and Figma-compatible solution, giving teams the ability to make high-fidelity design changes before going live
It includes over 18 unique pre-made pages and multiple reusable components, so organizations can extend the site beyond the core landing page without starting from scratch
A drag-and-drop interface supports quick setup without coding, and users can replace placeholder text and images with local content easily
Customizable colors, fonts, and layouts let organizations reflect their own identity, whether serving citizens in a diaspora context or residents in a civic government setting
Integrated communication features and a centralized layout support operations across programs, keeping internal processes consistent for staff managing multiple services
Analytics integration allows organizations to track how visitors interact with pages and update site content based on real user behavior, keeping the site informed and relevant over time
Templates like this reduce development costs significantly, making professional website design accessible to nonprofits and associations that rely on volunteer labor and limited budgets
The site serves as a centralized access point where residents can find news, download documents, browse available options, and participate in upcoming programs without barriers
