Complaint-Management Platform — Landing Page Build

A high-conversion marketing landing page for a cloud business-management and complaint-handling platform, built to turn a supplied, unbuildable design file into a responsive, production-hardened React application. Built across twenty-one days with nineteen hand-authored section components on a React + Vite + shadcn base, paired with a security-hardened Express form-capture service on Render.

Agency subcontract at Spaceapps; the commercial client relationship belonged to the agency and I delivered as staff. The landing page design was originated by Thiago, our tech lead, and the cloud ERP behind the authentication gate was built by a separate development team on Supabase and Bubble. My contribution was design engineering: remediating the Figma file to make it buildable, hand-coding all nineteen marketing sections, and deploying the hardened form service.

Design remediation: Making handoffs buildable

In agency client work, design handoffs frequently arrive in a state that looks finished on canvas but falls apart in code: missing auto-layout constraints, arbitrary absolute positioning, rigid desktop containers that collapse on responsive viewports, and components with inconsistent padding logic. Gestrif is the second documented instance of this pattern in the portfolio (alongside AllPrice). Rather than flagging blockers back to the team, I ran a comprehensive remediation pass directly in Figma — fixing hierarchy, flexbox alignment, and responsive container rules before writing the first line of code.

🧩19

authored section components

📦50

shadcn UI primitives integrated

🛡️5 req / 15m

IP rate limit on form capture

⏱️21 days

first commit to production deployment

The front-end architecture: 19 sections, not 69 components

The repository contains 69 component files, and claiming that total without qualification would overstate authorship. The actual architecture splits cleanly between 50 CLI-generated shadcn/Radix UI primitives (buttons, dialogs, form fields, dropdowns) and nineteen hand-authored section components built to translate Gestrif's feature hierarchy:

• Header navigation with responsive mobile menu drawer.
• Hero section featuring value proposition, primary CTA, and social proof trust marks.
• Five feature-image deep dives highlighting module capabilities with alternating visual flow.
• Two multi-column feature grids detailing business tools and complaint-handling workflows.
• Interactive comparison table contrasting Gestrif against traditional, fragmented business spreadsheets.
• 'Como Funciona' step-by-step onboarding walkthrough.
• Crawling marquee banner displaying ecosystem integrations.
• Pricing tier cards with monthly/annual billing toggles and feature matrices.
• Customer testimonial carousel and social proof cards.
• Comprehensive FAQ accordion addressing security, migration, and compliance.
• Lead-capture contact section wired to backend validation.
• Footer with legal links, sitemap navigation, and corporate disclosures.

The project began from a Lovable scaffold (lovable-tagger in devDependencies, with vite_react_shadcn_ts in package.json). The scaffold supplied the initial Vite and shadcn boilerplate; all nineteen section components were coded by hand against the remediated Figma specifications.

Production backend: Hardened form capture on Render

Many marketing sites treat form submission as an afterthought — embedding unauthenticated third-party webhooks or bare mailto scripts that invite spam floods and downtime. For Gestrif, I deployed an Express service on Render: the core server (server/index.js) is shared boilerplate, and what is Gestrif's own is the entry point, server/start.js, where I applied production-grade defensive hardening:

• Rate Limiting — Configured strict IP throttling limiting requests to 5 per IP per 15-minute window, effectively neutralizing automated bot submissions.
• Content Security Policy (CSP) & Headers — Implemented Helmet with an explicit CSP directive whitelist, blocking cross-site scripting and unauthorized iframe framing.
• Payload Caps — Enforced a strict 10 KB limit on incoming JSON payloads to prevent memory exhaustion and buffer overflow attacks.
• Reverse-Proxy Trust — Configured Express trust proxy specifically for Render's edge architecture, ensuring accurate client IP resolution for rate limiters.
• Telemetry & Compression — Gzip compression enabled across all responses, paired with structured Morgan logging separating development debugging from high-signal production error streams.

Client feedback and rapid iteration

The repository commit log documents an active agency iteration cycle rather than a static handoff: initial structure (22/07), client review revisions (30/07), new section additions and responsive updates (06/08), and final server hardening (12/08). Commit entries mentioning 'new sections added' reflect new sections coded against evolving client requirements, not sections designed from scratch. Adapting to shifting scope while preserving clean code and delivery deadlines is standard agency execution.

What this is not

• Not my original visual design. Thiago designed the original landing page; I remediated the file and made it buildable.
• Not the cloud business-management platform. The ERP behind gestrif.com/login was built on Supabase and Bubble by a different engineering team.
• Not a Next.js application. The stack is a client-rendered React 18 + Vite SPA; next-themes was a dependency, not the Next.js framework.
• Not 69 bespoke components. It is 19 hand-crafted sections built on top of 50 CLI-generated shadcn primitives.
• Not an enterprise backend. The Express service on Render is a hardened contact-capture gateway, not a financial database.
• Not inspectable in Figma today. Active access to the Gestrif workspace has lapsed; the design remediation claim is an honest historical record, while AllPrice remains the inspectable proof.
• Not supported by commercial conversion numbers. No marketing metrics were tracked or retained — a confirmed absence across this corpus.
• Not the full platform described in the repository README. The README quotes the client's commercial product description, which covers the entire ERP, not just the landing page.

The value of a design-aware engineer

Gestrif represents the essential subcontract and agency overflow dynamic: receiving an imperfect, unbuildable design file and delivering a pixel-accurate, responsive, and secure web application without friction. It proves the ability to bridge design flaws before they reach code, write disciplined TypeScript and Tailwind components, and harden deployments against real-world production risks.

Evidence

The product shipped and operates in production: gestrif.com answers and redirects to /login behind an authentication gate. The repository contains the marketing front end, evidencing my design remediation and front-end engineering, not the application behind the gate. The client-rendered Vite build is preserved and inspectable via the self-hosted mirror on my domain. No quantitative conversion or engagement metrics exist — a confirmed absence across this corpus, not an uncollected one.