Astro builds
Your Figma design built in Astro and Tailwind CSS, with Sanity for content. Static HTML, so pages score high on PageSpeed and you can show your client the numbers.
For design agencies
Your Figma designs, built exactly as drawn, in Astro, Next.js or Framer.
I build your designs into fast websites under your agency's name, with Sanity CMS so your client edits content. You keep the client and the credit.
Or email hello@sohailrana.com
01
Recent builds
Real sites, built fast, with the numbers to show it.
Client project 
Seetha The Comic, Phase 2
Figma redesign built pixel-perfect in Astro. Mobile PageSpeed 50 → 99. Repeat client.
Read the case study →Client project 
AA Sends
Framer landing page sped up. Mobile PageSpeed 35 → 90, desktop 45 → 98.
Read the case study →Live demo 
Everline Advisory: Framer to Astro
Demo projectFramer site rebuilt in Astro. Mobile PageSpeed 78 → 99.
Read the case study →Client project 
Seetha The Comic, Phase 1
Off Squarespace to a custom-coded site, edited in Sanity.
Read the case study →Own site 
sohailrana.com
Self-initiated projectReact app rebuilt in Astro. 78% less JavaScript, mobile PageSpeed 91.
Read the case study →
02
What I build
Next.js + Sanity builds
For sites that need app features such as logins, dashboards or heavy interactivity: your design built in Next.js, with Sanity for the content your client edits.
Framer builds
Your Figma design built in Framer, with components and styles set up so your team or your client can edit copy and pages without breaking the layout.
Responsive implementation
Every breakpoint in your file built as drawn. Where the design only shows desktop and mobile, I fill the gaps in your design language and check with you first.
Performance optimisation
Images, fonts and scripts tuned so the site stays fast on a phone, and checked with Lighthouse and PageSpeed Insights before handoff.
CMS setup
Collections and fields modelled around how your client will actually edit the site, in Sanity, or Framer CMS for Framer builds.
03
How I work with agencies
- 01
White-label by default
Your agency's name on the work. Mine doesn't appear anywhere your client can see it.
- 02
Happy to sign an NDA
Send yours before you share the file, and I'll sign it before we talk details.
- 03
I work from your Figma files
Your design is the brief. I don't redesign it. I've designed sites myself, so I understand design intent: spacing, type, rhythm and the states a mockup leaves out. I raise those before I build, not after.
- 04
In your tools
Slack, email, your project board or whatever your team already uses. No new accounts for you.
- 05
Your clients stay yours
I never contact your clients unless you ask me to.
- 06
Clean handoff
Tidy, named layers and components, short written documentation, and everything transferred to your account or your client's.
04
After launch
White-label maintenance, updates and hosting, so your agency keeps the client relationship and the margin.
Updates on request
Text, images, new sections and pages, sent through your agency and done in the site's own style.
Monthly health check
I test pages, links, forms and the mobile view, and fix small problems as part of the plan.
Backups and uptime alerts
A saved copy of the site every month, and an alert to me if it goes down.
Reports under your name
A short monthly summary of what was done, written so you can forward it to your client as your own.
Hosting for custom builds
Custom-coded sites can be hosted and kept up to date by me, billed to you, not your client.
You keep the relationship
Your client talks to you, you set the price, and the margin stays with your agency.
05
Pricing
Per project or per page
Builds
Pricing on request
A fixed written quote from your Figma file, before any work starts.
Monthly, at wholesale rates
After launch
Pricing on request
A flat monthly rate you resell to your client at your own price.
Starting with a paid test section is fine; most agency work then moves to a monthly retainer.
A low-risk first step
Send me one section.
Send one section of a design and I'll build it, so you can judge the result against your file before you commit to a full project. If you'd rather start with something real, a small paid test project works too.
Send a section06
Questions
How long does a build take?
It depends on the number of pages and how much interaction the design has. You get a timeline in writing with the quote, before anything starts.
What about revisions?
If something in the build doesn't match your Figma file, I fix it. That's the job. Changes to the design itself are scoped and agreed with you before I make them.
Which tools do you work in?
Figma for the design handoff. Astro, Next.js or Framer for builds, with Tailwind CSS. Sanity for content, or Framer CMS on Framer builds. For communication, whatever your team already uses.
You're in India. How do time zones work?
I'm on IST (UTC+5:30). My working day overlaps with UK and Australian business hours and with US mornings, and we agree on regular check-in times at the start. Work you send at the end of your day is often moving by the time you're back.
What happens after launch?
You get a clean handoff with documentation, and the site moves to your account or your client's. If you'd rather not handle updates, I can keep looking after it white-label on a monthly plan.
07
Let's talk
Have a design ready to build? Tell me about it and I'll reply with scope, timeline and an honest take on fit.