Portfolio Blocks & Tokens
All semantic block renderers and the interactive design token playground. Blocks render with DEFAULT_DESIGN_TOKENS (dark background, primary accent).
Text Blocks
Heading, Paragraph, and List renderers
Developer details
Start from these files when you need to trace the live implementation.
shared/ui/portfolio/blocks/text-blocks.tsx
Custom Stone Patio & Outdoor Living Space
Project Overview
This residential project transformed a neglected backyard into a stunning outdoor living area featuring a 600 sq ft natural stone patio, custom-built fire pit, and integrated seating walls. The homeowner wanted a space that could host family gatherings while complementing their mid-century modern home.
- Natural flagstone patio with irregular joint pattern
- Custom gas fire pit with granite cap
- Dry-stacked stone seating walls
- LED landscape lighting throughout
- French drain system for water management
- Initial consultation and site assessment
- Design approval and material selection
- Excavation and base preparation
- Stone installation and grouting
- Final landscaping and lighting
Media Blocks
Hero, Before/After, Gallery, Testimonial, and Process Step renderers
Developer details
Start from these files when you need to trace the live implementation.
shared/ui/portfolio/blocks/media-blocks.tsx
Thompson Residence Patio
A complete backyard transformation in Denver, CO
Driveway renovation: cracked concrete replaced with interlocking pavers
“The team was professional from start to finish. Our new patio has become the centerpiece of our backyard. We use it almost every evening now and have already hosted three cookouts this summer.”— John D., Denver CO
Site Preparation
2-3 daysWe begin every project with thorough excavation and grading. The existing soil is removed to a depth of 8 inches and replaced with compacted gravel base material to prevent settling.
Base & Edge Installation
1-2 daysA layer of crushed limestone is spread and compacted in lifts. Edge restraints are installed to keep pavers locked in place for decades. This step is critical for long-term durability.
Stone Placement & Finishing
3-5 daysEach stone is hand-selected and placed to create a natural-looking pattern. Joints are filled with polymeric sand and the entire surface is sealed for weather protection.
Card Blocks
Feature Card, CTA Section, Stats, and Materials List
Developer details
Start from these files when you need to trace the live implementation.
shared/ui/portfolio/blocks/card-blocks.tsx
10-Year Warranty
Every project includes our comprehensive 10-year structural warranty covering materials and workmanship.
Premium Materials
We source stone and pavers from top quarries across North America for unmatched quality and consistency.
Expert Craftsmanship
Our crew averages 12 years of experience in hardscape construction and natural stone work.
Materials Used
- •Pennsylvania BluestoneNatural cleft finish, 1.5" thick irregular flagstone
- •Limestone Gravel Base3/4" crushed limestone, compacted in 2" lifts
- •Polymeric SandAlliance Gator Maxx G2 for joint stabilization
- •Granite Cap StonesThermal finish, 2" thick for fire pit surround
Ready to Transform Your Outdoor Space?
Get a free consultation and detailed estimate for your project. We typically respond within 24 hours.
Data Blocks
Project Meta, Detail List, Comparison Table, Badge Row, and FAQ
Developer details
Start from these files when you need to trace the live implementation.
shared/ui/portfolio/blocks/data-blocks.tsx
Scope of Work
- •DemolitionRemove existing concrete pad and dispose of debris
- •ExcavationGrade and compact sub-base to engineered specifications
- •Stone InstallationHand-lay natural flagstone in running bond pattern
- •Fire Pit BuildCustom gas fire pit with electronic ignition system
- •Landscape RestorationSod, mulch, and planting around hardscape perimeter
How long will a natural stone patio last?+
Do you offer financing?+
What happens if stones crack or shift?+
Callout Block
Info, Tip, Warning, Success, and Guarantee variants
Developer details
Start from these files when you need to trace the live implementation.
shared/ui/portfolio/blocks/callout-block.tsx
Permit Requirements
Most hardscape projects over 200 sq ft require a building permit. We handle all permit applications and inspections as part of our service.
Maintenance Tip
Apply a penetrating sealer every 2-3 years to protect natural stone from staining and weather damage. We offer maintenance packages for all completed projects.
Scheduling for spring projects fills up quickly. We recommend booking your consultation by January to secure a spring start date.
Project Complete
This project was completed on schedule and within budget. The homeowner rated us 5 stars and has already referred two neighbors.
Our Guarantee
If you are not completely satisfied with the quality of our work, we will make it right at no additional cost. That is our promise.
Divider Block
Line, Dots, and Space variants
Developer details
Start from these files when you need to trace the live implementation.
shared/ui/portfolio/blocks/divider-block.tsx
style: line
style: dots
style: space
Extended Media Blocks
Video Embed, Single Image, and Quote Highlight
Developer details
Start from these files when you need to trace the live implementation.
shared/ui/portfolio/blocks/extended-media-blocks.tsx
Time-lapse of the complete patio installation process
The finished outdoor living space photographed at golden hour
“Great outdoor spaces are not built — they are crafted, one stone at a time.”— Mike R., Lead Mason
Token Playground
Interactive picker for all 6 design token dimensions. Select values to see the resolved Tailwind classes.
Developer details
Start from these files when you need to trace the live implementation.
shared/lib/design/tokens.ts
Layout
Overall structure and arrangement of content sections
Spacing
Vertical rhythm and whitespace density
Heading Style
Typographic personality of headings
Accent Color
Interactive elements, highlights, and brand expression
Image Display
How images are visually presented
Hero Style
Main hero image layout
Resolved Tailwind Classes
Current Token Values
{
"layout": "hero-gallery",
"spacing": "comfortable",
"typography": {
"headingStyle": "bold",
"bodySize": "base"
},
"colors": {
"accent": "primary",
"background": "dark"
},
"imageDisplay": "rounded",
"heroStyle": "large-single"
}