Build Stunning Hero Sections in Framer: A Daily Challenge

Build Stunning Hero Sections in Framer: A Daily ChallengeBuild Stunning Hero Sections in Framer: A Daily Challenge

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

Josephat Obare

• Apr 22

Day 1 of #FramerBuild — AXIOM Hero Section

I’m running a personal daily build challenge in Framer. Every day I ship one section, component, or interaction — no full websites, just focused craft. The goal is simple: sharpen my skills, build in public, and show what’s possible in Framer one piece at a time.

Day 1 is the hero section for AXIOM

What went into today’s build: • Glass navbar with heavy backdrop blur and a hairline bottom border • Asymmetric 7/5 column hero split • Metric overlay anchored with a 2px left border accent • Full CMS architecture planned before touching the canvas — Site Customization, Services, and Metrics collections all wired for easy customisation

Design system details: zero border-radius everywhere, Space Grotesk with tight −0.04em tracking on headlines, and a 5-tier surface elevation system instead of borders or drop shadows.

See it live → axiom-ai.framer.website

Day 2 tomorrow.

Framer webdesign

Jan Mráz

pro

• Apr 19

Designing an interactive Before / After slider in Framer 💙

Use code JAN for free Framer Pro for one month! 🔥

Framer webdesign ui UI Design Web Design

Madob Acharjya

• Apr 20

Nice!

alexis pilon

pro

• Apr 20

After watching the Artemis mission I decided take a look at the Canadian Space Agency website and decided to redo it for fun. The goal was to modernize the web site and create something that would get people interested in learning more about it. Here are some hero section explorations I created for it.

Figma webdesign webdesigner

15 voted

71%

6 voted

29%

21 votes

Closed

Madob Acharjya

• Apr 20

Nice!

R. Qule

max

• Apr 20

Trading platforms rarely get hero sections right.

They either feel generic or too busy — neither inspires confidence. For Opo Finance, we designed a landing page hero that avoids both.

This concept uses a clean web layout and a purpose-built 3D animation to set the tone before a single line of copy is read. The focus was on structure, hierarchy, and motion that feels intentional — not ornamental.

Opo promises transparency, speed, and precision — and the hero reflects that.

This was created with a design subscription from FANCY — and yes, we’re currently open to new projects.