Raíces is a warm, trust-first landing page template built for immigrant women's centers and community nonprofits. It leads with real faces and real stories, then guides visitors toward multilingual resources in legal aid, housing, healthcare, and education. The masonry grid layout, botanical color palette, and sticky language-filter button make it feel welcoming before it asks for anything.
by Rocket studio
Loading preview…
Quick summary
Raíces is a single-page community landing page template designed for immigrant women's centers. It opens with a candid split-hero, moves into a Pinterest-style masonry grid of portraits and resource cards, and closes with a workshop signup banner and a language-filtered resource directory. Every design choice earns trust before presenting a call to action.
Who this template is for
This template is built for organizations that serve immigrant women and their families. It suits teams who need a page that feels human and approachable before it feels institutional.
Nonprofit immigrant services centers and community organizations
Volunteer coordinators, outreach staff, and program directors managing multilingual audiences
Community partners and donors who want to understand a center's reach and culture at a glance
What problem this template solves
Many nonprofit landing pages lead with forms, statistics, or program lists before visitors feel safe enough to engage. For immigrant women navigating unfamiliar systems, a cold or transactional page can feel like one more barrier.
Visitors arrive unsure whether this organization understands their situation, so the page must signal warmth and cultural recognition first
Resource information spread across multiple links or documents makes it hard for someone to find help quickly in their own language
Generic nonprofit templates do not reflect the lived texture of the community they serve, which reduces trust before a single word is read
What you get with this template
You get a fully structured single-page layout that moves visitors from emotional connection to practical action. The layout is organized to introduce the community first and present resources second.
A split-hero section with a candid community photograph on the left and a grounding headline on the right
A masonry grid that alternates women's portraits and testimonial cards with terracotta-colored resource cards in a people-people-resource rhythm
Theme
Community Hearth
Creative direction
Team & People
Color system
Botanical
Style
Masonry/Pinterest
Direction
Content/Resource
Page Sections
Split Hero with Community Photography
Masonry Community Portrait Grid
Sticky Language Filter Button
Workshop Signup Banner
CSS Scroll-reveal and Hover Animations
Botanical Color and Typography System
Related questions
Can I change the colors and fonts to match my organization's brand?
Is this template suitable for a bilingual or multilingual organization?
Do I need design experience to customize this template?
Can I remove the workshop banner if my organization does not run events?
What makes this template different from a generic nonprofit landing page?
A midpage workshop banner with a single-field email signup, date, time, and address displayed in plain text
Feature list
This template ships with a set of purpose-built layout components. Each one reflects a deliberate choice about how trust is built with immigrant women visitors.
Split Hero with Community Photography
The hero divides the viewport in half. The left side holds a candid table-level photograph of women mid-conversation over paperwork and coffee. The right side carries a loam-brown serif headline and a fern-green italic line naming the center's city and annual reach. This pairing grounds the visitor immediately in real community life.
Masonry Community Grid
The main scroll section is a Pinterest-style masonry grid. Each card shows a woman's portrait, her first name, her country of origin, and one sentence in her own words. Cards vary in height. Interspersed cards show hands, children drawing on a classroom floor, and verb-covered whiteboards. Every third row, a terracotta resource card breaks the rhythm with a downloadable guide, a workshop calendar, or a hotline number.
Sticky Language Filter Button
A fern-green sticky button labeled "Find Help in Your Language" stays visible as the visitor scrolls. It opens a resource directory organized first by language, then by topic: legal, medical, housing, and education. This makes the page immediately functional for someone arriving with an urgent need.
Workshop Signup Banner
A warm terracotta banner sits midpage. It displays the next workshop's date, time, and address in plain, readable text. A single email input field lets visitors register without friction. The banner's color and placement make it visible without interrupting the community narrative above it.
Scroll-Reveal Animations and Masonry Hover States
The template includes medium-weight CSS scroll-reveal animations. Cards fade and lift into view as the visitor scrolls down. Each masonry card has a hover state. Images are lazy-loaded so the page feels responsive even on slower mobile connections.
Botanical Color and Typography System
The palette uses four defined colors: loam brown for body text, fern green for links and pathways, terracotta for buttons and highlighted quotes, and cotton white as the background canvas. Fraunces serif handles headlines and Fraunces's warmth pairs with DM Sans for readable body text at every size.
Page sections overview
Section
Purpose
Split Hero
Opens with a candid community photograph and a grounding headline
Community Masonry Grid
Alternates portrait cards, moment cards, and terracotta resource cards
Midpage Workshop Banner
Terracotta call to action with email signup and event details
Resource Directory Preview
Language-filtered resource cards organized by topic
Testimonials in Grid
Women's quotes embedded naturally inside the masonry card rhythm
Minimal Linear Footer
Single-row footer with essential contact and navigation links
Design & branding system
The visual identity follows a Community Hearth theme built on a Botanical color system. Every color has a specific role, and none of them feel accidental.
Loam brown (#3E2723) carries body text with gravity and dignity; fern green (#4A7C59) marks resource links and pathways; terracotta (#C17650) warms buttons and pull quotes; cotton white (#FAF3EB) grounds every section with breathing room
Fraunces serif headlines give the page emotional warmth, while DM Sans body text keeps information clear and readable across languages and literacy levels
The overall aesthetic resembles a windowsill herb garden: clay pots, damp soil, green leaves catching morning light, a texture that feels lived-in and genuinely welcoming
Mobile & speed optimization
The template is built mobile-first because most visitors in this audience arrive on phones, often in moments of real need.
Images are lazy-loaded so the masonry grid loads progressively without stalling the first visible screen
Animations are CSS-only, keeping the scroll-reveal and hover effects lightweight and smooth on mid-range devices
The sticky "Find Help in Your Language" button remains accessible throughout the entire scroll on small screens, so no visitor has to search for the most important action
How this template helps you convert
This template does not ask for trust; it builds it section by section before presenting any call to action.
The hero photograph and headline create immediate emotional recognition. A visitor sees real women at a real table and reads a headline that names their experience directly. That moment of recognition is what makes the next scroll feel safe.
The masonry grid introduces the community before introducing any program or resource. By the time a visitor reaches the workshop banner or the resource directory, they have already met the people behind the organization. The click that follows is not a leap of faith; it is a natural next step.
Other information about this template
This template sits in the Community and Nonprofit category under the Immigrant and Refugee Support subcategory. It is specifically scoped for immigrant women's center use cases but can be adapted for any community organization that prioritizes trust-building before conversion.
The template style is Masonry and Pinterest, meaning cards vary in height and the grid breathes rather than aligns to a rigid column structure
The creative direction is Team and People: the design centers human faces and direct quotes rather than program descriptions or statistics
The header concept is Half-Page Photo and Text, a split-screen layout that gives equal visual weight to the community photograph and the headline
The landing page direction is Content and Resource, meaning the page's primary job is to connect visitors with useful information rather than to drive a single transactional outcome
The theme is Community Hearth, a design philosophy that treats warmth, familiarity, and openness as functional values, not decorative ones
