Enhance SaaS Conversion with ROI Calculator Pro on Framer

Enhance SaaS Conversion with ROI Calculator Pro on FramerEnhance SaaS Conversion with ROI Calculator Pro on Framer

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Ali Hassan

• 20h

ROI Calculator Pro — Submit on Framer Marketplace.

A premium component for SaaS marketing sites. Turns complex value props into a visual, interactive experience.

→ Real-Time Visual Chart → Smart ROI Calculations → Yearly/Monthly Toggle → Glassmorphism Ready → 100% Responsive

If your SaaS page isn't converting, visitors probably can't see the value yet. This fixes that.

Framer framercomponent webdesigner Framer Website Design Framer Website Development Web Development React Tailwind CSS

Akinkunmi Ayo

• 18h

Nice work

Ali Hassan

• 15h

@Akinkunmi Ayo Thanks!

Jordane Lelong

pro

• Apr 12

This screenshot wraps up this week's efforts to optimize my Contra profile and presence here. Glad to be in the top 5%, now onto the top 1% 🚀

Contra designerlife Framer

Nagaraj M

• Apr 12

Congrats! how long will take to achieve 125 pts?

Florencia Ezcurra

pro

• Apr 11

MY FIRST FRAMER TEMPLATE GOT APPROVED & PUBLISHED IN THE MARKETPLACE. After 3 months of reviews.

Yup. 3 months of thinking I had all the requirements met.

Here's what I learned along the way, in case you're going through the same process:

1. You need a clear user persona I wanted to make my template general enough that anyone could use it. Huge mistake. By trying to serve everyone, it served nobody. This was actually a rejection reason.

2. Be consistent with your buttons If you have a "Contact" button, every single one needs to link to the same section. Sounds obvious, but it's easy to miss and reviewers will catch it.

3. Manually audit your components, colors, and code Don't rely entirely on the Unused Component plugin. It missed things for me and caused multiple rejections. Some things just need a manual pass.

4. ALT text every photo Placeholders included. Every single one.

5. Add input validation to your forms manually This is the only video you need: https://www.youtube.com/watch?v=qN9giCMK6Zo

6. Make sure ALL your colors are in your library Error states, low-opacity variations, everything. Go through each component individually. It takes time upfront, but saves you a lot more later.

7. Rename all your layers "Stack" won't get approved. The Auto-Rename feature is a good starting point, but make sure every name actually makes sense.

8. Use the Balance feature for fonts It prevents orphaned words across different screen sizes. A small detail that makes a real difference.

➡️ Get a copy of my FREE template in the marketplace: https://www.framer.com/marketplace/templates/blossom/

It took perseverance to get through the process, but I would totally do it again. Have you ever submitted a template to Framer? I'd love to hear about your experience below 👇

freelancerlife Framer Framer Website Design

Monic ✧

pro

• Apr 13

so detailed, thanks for sharing! and congrats 🎉

Shezaan Ansari

pro

• Apr 12

Bloom AI — Cinematic Landing Page & Boot Sequence Developed the interactive landing page for Bloom, an AI-powered floral design platform. The project demanded a highly premium, "Awwwards-caliber" aesthetic merging organic video elements with futuristic, dark-mode glassmorphism. Technical Highlights:

Custom Preloader: Engineered a "Botanical Boot Sequence" featuring a dynamic iridescent SVG loading ring that expands into a portal wipe.

Advanced Glassmorphism: Wrote custom CSS layers utilizing background-blend-mode: luminosity, fractal noise SVGs, and gradient borders via -webkit-mask-composite.

Fluid Motion: Implemented Framer Motion for buttery-smooth staggered entrances, spring-physics hover states, and a custom mix-blend-difference fluid cursor.

Tech Stack: React, Tailwind CSS, Framer Motion, Lucide Icons.

Completed work

portfolioreview freelancerlife Brand Design AI Video Production Web Design Framer Higgsfield AI Webflow

Cipher UI

• Apr 13

Wow.....the animation of the earth in the image syncs so welll

Back to feed

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Challenges

View all

Paper Challenge

$10K1d left450 participants

Morphic Workflows

$10K2d left195 participants

Zo Computer Challenge

$10K3d left395 participants

Fuser Co-create

$5K4d left250 participants

Runway $100k Big Pitch Challenge

$100K15d left108 participants

Trending

Runway

AI video generation is exploding. What are you dreaming up in Runway?

Contra University

Learn from expert creatives how to earn more using next-gen AI tools.

creativeaiflow

Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?

portfolioreview

The best portfolios tell a story, not just show a grid. Share yours for feedback.

freelancerlife

Freelancer life is wins, pivots, and everything in between. What’s yours right now?

Jordane Lelong

pro

• Apr 12

This screenshot wraps up this week's efforts to optimize my Contra profile and presence here. Glad to be in the top 5%, now onto the top 1% 🚀

Contra designerlife Framer

Nagaraj M

• Apr 12

Congrats! how long will take to achieve 125 pts?

Florencia Ezcurra

pro

• Apr 11

MY FIRST FRAMER TEMPLATE GOT APPROVED & PUBLISHED IN THE MARKETPLACE. After 3 months of reviews.

Yup. 3 months of thinking I had all the requirements met.

Here's what I learned along the way, in case you're going through the same process:

2. Be consistent with your buttons If you have a "Contact" button, every single one needs to link to the same section. Sounds obvious, but it's easy to miss and reviewers will catch it.

3. Manually audit your components, colors, and code Don't rely entirely on the Unused Component plugin. It missed things for me and caused multiple rejections. Some things just need a manual pass.

4. ALT text every photo Placeholders included. Every single one.

5. Add input validation to your forms manually This is the only video you need: https://www.youtube.com/watch?v=qN9giCMK6Zo

6. Make sure ALL your colors are in your library Error states, low-opacity variations, everything. Go through each component individually. It takes time upfront, but saves you a lot more later.

7. Rename all your layers "Stack" won't get approved. The Auto-Rename feature is a good starting point, but make sure every name actually makes sense.

8. Use the Balance feature for fonts It prevents orphaned words across different screen sizes. A small detail that makes a real difference.

➡️ Get a copy of my FREE template in the marketplace: https://www.framer.com/marketplace/templates/blossom/

It took perseverance to get through the process, but I would totally do it again. Have you ever submitted a template to Framer? I'd love to hear about your experience below 👇

freelancerlife Framer Framer Website Design

Monic ✧

pro

• Apr 13

so detailed, thanks for sharing! and congrats 🎉

Shezaan Ansari

pro

• Apr 12

Custom Preloader: Engineered a "Botanical Boot Sequence" featuring a dynamic iridescent SVG loading ring that expands into a portal wipe.

Advanced Glassmorphism: Wrote custom CSS layers utilizing background-blend-mode: luminosity, fractal noise SVGs, and gradient borders via -webkit-mask-composite.

Fluid Motion: Implemented Framer Motion for buttery-smooth staggered entrances, spring-physics hover states, and a custom mix-blend-difference fluid cursor.

Tech Stack: React, Tailwind CSS, Framer Motion, Lucide Icons.

Completed work

portfolioreview freelancerlife Brand Design AI Video Production Web Design Framer Higgsfield AI Webflow

Cipher UI

• Apr 13

Wow.....the animation of the earth in the image syncs so welll