Navigate to https://www.figma.com/file/FUW3XqFh9buFBmT487GUQ7/Wheely---Bicycle-Website?type=design&node-id=0-1&mode=design&t=NFIqiKlET571VFqE-0

Click on "Homepage" (Main Frame) & Apply "Auto-layout"

Make sure the width is set on the "Fixed"

Select the "Hero-Section" (Container) and apply the "Auto-layout". As per Design, Set the Width as "Fill" and Height as "Fixed" (850px) & Removed the gap 10px.

Select Image - Fill. Now, Copy (CTRL+C) the Image Fill.

Now, Click on the "Hero-Section" Frame & Apply "Fill".

Now, Paste (CTRL+V) the Image in the "Fill" & Remove the #FFFFFF color which was added by default. Then, Delete the Image (Close-up-bicycle-outdoors 3)

Select the "Navbar" Frame (Absolute Frame) and apply the "Auto-layout". Set the Gap to "Auto".

**IMPORTANT STEP:** Remove the "Absolute Position" by clicking on this icon.

Repeat the Step 8 (Adding Auto-layout & Set Gap to Auto) and Step 9 (Remove Absolute Position) for "btn-next prev" Frame.

Now, Move the "Navbar" Frame above the "btn-next prev" Frame.

Remove the Absolute Position For "Heading" Frame and move it into "btn-next prev" frame between "Previous" & "next" arrow frames to place the heading between the arrows.

Select the "btn-next prev" frame, Set the Width & Height to "Fill Container" and Apply padding left-right "80px"

at the last, Select "menu" icon and Lock the frame by clicking on the "Lock" icon. If you are using multiple elements to create a single object in your Figma layout, you can combine those elements by locking and export that as a single image using UiChemy.

Hero Section is ready with background image and fully Auto-laoyut 🚀