What is the cost / price?

Price depends on the scope and complexity of the project. DM us; it's always negotiable. We also offer highly efficient, affordable costing options for startups.

Do you do automation?

Yes, we handle automation extensively using cutting-edge tools like Clawbot, n8n, Zapier, and many others to streamline your business workflows.

Available

Let's Talk

Back to Projects

Case Study

RenderATL
Marketing Site

Figma-to-React fidelity for a culture-forward conference brand—paired with Makeswift so marketing can ship copy, imagery, and compositions without losing performance, accessibility, or motion craft.

Client

RenderATL

Domain

renderatl.com

Project overview & objectives

RenderATL is positioned as a major software conference in Atlanta—high energy, culture-forward, and technically serious. The public site has to sell tickets, explain a full week of programming, showcase speakers and sponsors, and surface resources. Stakeholders need to update copy, swap imagery, reorder blocks, and spin up campaign sections without a deploy for every comma—while engineering keeps control of performance, accessibility, and brand-critical structure.

•Fidelity: Reproduce Figma—brutalist shadows, Mortend display type, yellow / pink / black palette, diagonal cuts, marquees, and layered “paper” treatments—not a generic template.
•Scale: Many distinct routes (home, speakers, agenda, events, sponsors, resources, tickets) with shared chrome and repeatable patterns.
•Operations: Safe, fast edits for heroes, CTAs, sponsor grids, resource cards, FAQ links, and legal footers—plus new compositions from approved blocks.
•Engineering quality: App Router, modern React, Tailwind v4 design tokens, Framer Motion for scroll and hover, optimized images, and a path to preview before publish.

What we shipped

Global shell

•Root layout with fonts (Geist, Geist Mono, Roboto, custom Mortend), semantic metadata, fixed header with mobile drawer navigation, and a newsletter-focused footer.
•Primary information architecture—speakers, agenda, events, sponsors, resources—stays in code; ticket URLs, partner forms, and campaign links are editor-controlled strings validated as URLs.

Home & inner pages

•Home: Long-form landing—hero with mobile/desktop art direction, stats “trading cards,” partner marquees, narrative video, speakers/experience storytelling, pass comparison, and Atlanta-week modules with event cards and CTAs.
•Inner pages: Full-bleed image heroes and scroll-revealed sections for Speakers (profile grid), Agenda (two-day cards with marquee headers and structured lists), Events (summit blocks), Sponsors (featured logo grid), Resources (hover-lift link cards), and Tickets (benefits plus checkout-style email capture).

The Makeswift layer

Makeswift is the visual editing and publishing layer on top of the App Router app. We registered approved sections so each prop maps to a control—text, image, link, boolean, or structured lists—without letting layout drift break engineered overlap, clip-paths, or marquee behavior.

•Stayed in code: Header/footer primitives, z-index and pointer-events fixes for mobile WebKit, button variants, ScrollReveal, StatCard, Marquee, agenda pushpin lists, ticket checklists, speaker/sponsor chrome, and Framer Motion wrappers (including AnimatePresence for the mobile menu).
•Exposed to editors: Page regions composed of registered components—heroes, rich text + CTA, logo strips, resource grid items, partner callouts, legal blocks, repeatable list fields for agenda bullets and “what’s included” lines.
•Preview & publish: Live preview against the real Next.js render; publishing updates content through Makeswift’s pipeline while preview URLs support stakeholder sign-off.
•Tokens: Colors and font families live in globals / Tailwind @theme so editor choices align with brand (pink, yellow, black) instead of one-off hex.

Complexity, performance & governance

•Figma vs. CMS: Precise absolute positioning, rotations, and clip-paths stay engineered; editor-safe zones cover copy, imagery swaps, optional rows, and feature flags for campaign bands.
•Performance: Large heroes, dual marquees, and textures—priority hints, constrained sizes, and lazy loading for below-the-fold grids, with guidance so swaps do not become multi-megabyte PNGs.
•Motion + CMS: Scroll reveals and hover springs live inside registered components so reordering blocks in Makeswift does not strip motion wrappers.
•Security: Role-based editing in Makeswift; only engineers register new component types; sanitized rich text and links; preview isolation before production publish.

Outcomes

Visitors get a fast, distinctive conference experience that feels on-brand—motion, texture, and confidence rather than a generic SaaS landing page. The team can ship same-day updates to copy, imagery, and section visibility with less engineering churn on typo tickets, and a clear line between “change the words” (Makeswift) and “change the system” (code and design review). Engineering keeps a maintainable App Router codebase, reusable primitives, and a single source of truth for tokens—with Makeswift on top, not replacing the architecture.