Navigation and Detail screen

Create Page

Go back and create a Page and name it: Detail Screen. In Settings, set the Scrolling to Vertical and disable the indicator. The Status Bar will be Light. Add a padding bottom of 100 and set the BG Color to #17182B.

Hero Section

Similar to the Booking Card, the hero is a carousel of images. Add a Stack H and name it: Hero Section.

• In Settings, toggle Paging to Start and set the Effects to Fade & Scale.
• Set the Width to 100%, the Height to 444PT and Pin To Top Center
• Set the Corner Radius to 32

In that stack, add an Image element. In Layout, set the Width and the Height are 100% and the Corner Radius to 32. Duplicate the Image twice and change the image.

Info Container

Then, on top of the Hero Section, we will add the Info Container. Let’s start with a Stack and name it: Info Container.

• In Settings, set it to Vertical, Alignment Center and Distribution to Center
• Set the Width to 100% and the Height to 300PT
• Set the paddings to 0, 20, 0, 20 and the margin top to 240

Info Card

Add a Stack V and name it: Info Card.

• Set the Gap to 30PT and the Alignment to Center
• In Layout, set Width to 100% and the Height to 224PT
• In Appearance, set the Corner Radius to 20
• Add Borders 1PT white at 10%
• Add BG Blur Dark
• Add Drop Shadow : Offset X 0PT, Offset Y 10PT, Blur 20PT, Color Black at 30%

Title Container

Add a Stack and name it: Title Container.

• Set it to Vertical, the Gap to 9 and the Alignment to Center
• Set the Width to 100% and Height to Auto
• Add a padding top of 20
• In that stack, add a Text “Hosted by Trang”, the Type is Title 3 - Bold and the Color is white
• Duplicate the Text and change it to “Luxury, Lifestyle”

Info

Then, we have the info stack. Select the Info Card and add a Stack H and rename it Info.

• Set the Gap to 12, Alignment and Distribution to Center
• Set the Height to Auto
• Add another Stack H inside and rename it Item
• Set the Gap to 4PT and the height to Auto
• Add a SF Symbol “star.fill”, set the Size to 15PT and the Container Size to 16x16 with the Color white
• Add a Text “4.1”, the type is Subhead 1 with Color white

Between each info, we will add a separator. Add a stack, set the Width to 1PT and the Height to 30PT. Then, set the BG Color to white at 10% opacity.

Next, add a Text “1,648 reviews”, the Type is Subhead 1 with Color white. Duplicate the separator and add it to the right side.

Duplicate the first info and delete the SF Symbol. Replace it by an SVG element. Select the Superhost icon and set the Width and the Height to 24PT.

Location Container

Then, we have the Location Container, add a Stack H and name it: Location Container.

• Set the Gap to 12PT
• Set the Width to Auto and the Height to 44PT

Next, add a Diamond Button, set the BG Color to White 10% and the Icon to “mappin .and.ellipse” with Color to System Gray. Add a Text for the Address, you can use the Placeholder instead of inputting manually an address. The Type is Footnote and the Color is System Gray.

Host Badge

The only UI missing on the Info Container is the Host UI. Let’s add a Stack and rename it Host Badge.

• Set the Alignment Center
• Set the Width to 92PT and the Height to 110PT
• Set the margin left to 16 and Pin To Top Left

In it, add an Image element and set the image to an avatar.

• Set the Width and Height to 88PT with the Offset Y to 4
• In Appearance, set the Corner Radius to 64
• Add Border 4PT #293655 100%

Then, add a Diamond Button from the components, Detach from Instance, set the BG Color to #E1225B. Remove the SF Symbol and replace it by an SVG. Select the Superhost icon. Pin To Bottom Center. Make it into a component.

Navigation

With that done, let’s add some navigations to the app. First, add a Stack H, name it: Top Navigation.

• Set the Alignment Center.
• Set the Width to 100% and the Height to 96PT
• Set the paddings to 64, 8, 8, 8
• Pin To Top Left and toggle Pin To Page
• Add an Effect BG Blur Dark

Let’s add a Back Button, add a Stack H and name it: Back Button. Set the Width and the Height to Auto. In it, add an SF Symbol “chevron.backward”, Size 17PT, Container Size 24x24 with Color white and the Weight to Bold. Set the Width and the Height to Auto. Next to it, add a Text “Back”, the Type is Headline with Color white. Set the Width and the Height to Auto.

On the right side, add a Stack H and name it: Icons.

• Set the Gap to 10PT
• Set the Width and Height to Auto
• Add a SF Symbol “heart.fill”, Size 17, Container Size 24x24 with Color white
• Duplicate it and change the icon to “square.and.arrow.up”
• Make the Top Navigation into a component

Go to Page Action

To access this page, the user needs to tap on the Booking Card. Go to the Booking Card Component’s screen and add a Tap trigger. The action is “Go To Page”, let’s select the Detail Page and right below, you can choose an animation. Select the Move In from the Right with a Duration of 0.5s with Ease In & Out. Now, when you tap on any Booking Card, it will navigate to the Detail Screen.

Then, on the Detail Screen, select the Back Button and let’s add a Tap trigger. The action is “Back To Page”, this action will go back to the previous screen. Set the Duration to 0.5s with Ease In & Out.

Info Row

Next, let’s design Info Rows. Add a Stack V and name it: Info List. Set the Height to Auto. Then, add a Stack H and name it: Info Row.

• Set the Gap to 20PT and Alignment Center
• In Layout, set the Height to Auto
• Add paddings (24, 48, 24, 16)
• Add BG Color, add a new Radial gradient #2D2C40 - #666692

In that stack, add a Diamond Button from your components.

• Change the BG Color to #0F54E8 - #9DDFF3
• Add icon to “mapping.and.ellipse” and set the Color to white

Afterwards, add a Stack V and name it: Text Container.

• Add a Gap of 8PT
• Set the Width to Fill Width and Height to Auto
• Add a Text “Great Location”, Type to Headline and Color white
• Add another Text “98% of recent guests gave the location a 5-star rating.”, the Type is Subhead 1 and the Color is System Gray

Make the Info Row into a component and duplicate it 3 times and change the text and icon accordingly.

Row Text

Change the Text and the Icons to these:

1. Superhost Icon Trang is a Superhost Superhost are experienced, highly rated hosts who are committed to providing great stays for guest.
2. mapping.and.ellipse Great Location 98% of recent guests gave the location a 5-star rating.
3. key.fill Great check-in experience 93% of recent guests gave the check-in process a 5-star rating.
4. star.fill Highly rated host Trang has received 5-star rating from 93% of recent guests.

Offers Row

Next, we have the offers. Add a Stack V and name it: Offers.

• Set the Height to Auto
• Set padding top of 64
• Add a Text “What this place offers”, the Type is Title 3 - Bold and the Color is white
• Add a padding bottom of 18 and left of 16.

Then, we have buttons that resembles the Menu buttons. Add a Menu button, Detach Instance and remove the SF Symbol. Set the Icon to “mappin.and.ellipse” and the text to “Mountain View” and the color to System Gray. Then, add a Separator Menu.

Offers List

Duplicate the Menu Button until you have 5 total. Add a separator between each button. Then, change the icon and the titles:

1. mapping.and.ellipse - Mountain View
2. sidebar.squares.trailing - Kitchen
3. wifi - Wifi
4. car - Free Parking
5. drop.fill - Private Pool

Gradient Button

Right after, we have a more button. Add a Stack V name it: Button Container.

• Set the paddings (16, 16, 0, 16)
• In it, add a Stack V and name it: Gradient Button
• Set Alignment to Center
• Add paddings (10, 0, 10, 0)
• Add BG Color to #000000 - #263888 from Top to Bottom
• Set the Corner Radius to 30
• Add a Border 1PT Teal at 20%
• Add a Text “Show all 43 amenities”, Type is Subhead 2 with Color white

Location Container

Right below, we have the Location Container. Add a Stack V and rename it Location Container.

• Set the Gap to 12PT
• Set the paddings to (32, 16, 32, 16)
• For the title, duplicate the title from the Offer List and change it to “Where you’ll be”.

Add a Stack V for the Map Card.

• Set the Height to Auto
• Add Drop Shadow: Offset X 0PT, Offset Y 10PT, Blur 20 and Color Black at 30%
• Add a Map element, set the Height to 320PT with Corner Radius of 24

For the Card on top, add a Stack V with a Gap of 20PT. In Layout, set the Height to Auto, paddings ( 24, 16, 24 16), Corner Radius to 24, Borders 1PT white at 20%, BG Blur Dark and then, set the margin top -110. In it, add a Text “Toronto, Canada”, the Type is Title 3 - Bold with Color white. Next, add a Text “Exact location provided after booking.”, the Type is Footnote and Color System Gray.

Ghost Button

The next UI is a Ghost Button, we called this UI a ghost button because the background color is clear. Add a Stack H and name it: Ghost Button.

• Set the Gap to 7PT and Alignment Center
• Set the Width and Height to Auto
• Add paddings (11, 20, 11, 20), Corner Radius to 30
• Add Borders 1PT Blue at 20%
• Add a Text “Show more”, Type is Subhead 2 and Color white
• Add a SF Symbol “chevron.forward”, Size 13PT, Container Size 16x16 and Color Blue at 20%
• Make it into a component

Reviews Section

This section will have multiple review cards where you can swipe. First, add a Stack V and name it: Reviews.

• Set the Height to Auto and padding top to 32
• Add a Stack H and name it: Review Title
• Set the Gap 8PT and paddings (0, 16, 0, 16)
• Add an SF Symbol “star.fill”, Size 20PT, Container Size 24x24 and Color white
• Add a Text “4.9 - 1,648 Reviews”, the Type is Title 3 - Bold and Color white

Card Carousel

Add a Stack H and name it: Cards. Set the Gap 20PT, the effects to Fade & Scale and Paging on. Set the paddings (20, 16, 30, 16) and the Height to Auto. In it, add a Stack V and name it: Review Card.

• Set the Width to 280PT and Height to Auto
• Set paddings to 16
• Set BG Color #313A5B - #21273D, Corner Radius to 20
• Add Borders 1PT Purple at 20%
• Add Drop Shadow: Offset X 0PT, Offset Y 10PT, Blur 20 and Color Black 30%

Let’s add a Stack H: Avatar Container.

• Set the Gap to 12PT
• Set the Width and Height to Auto
• Add an Image: Avatar
• Set the Width and Height to 44PT
• Set the Corner Radius to 32
• Add Borders 1PT White 10%

In the Avatar Container, add a Stack V with Width and Height set to Auto. Add a Text and use the Placeholder Name, the Type is Title 3 - Bold and the Color is white. Add another Text “2 weeks ago”, the Type is Footnote and the Color is System Gray.

Add a Separator Menu. Then, add a Text, use the Placeholder to generate content, the Type is Subhead 1 and the Color is System Gray. Add a Ghost Button. Make the Review Card into a component and duplicate it 3 more times.

Duplicate the Button Container from the Offers and place it inside the Reviews. Remove the top padding.

Host Section

The next section is the Host section. Let’s start by adding a Stack V: Hosts.

• Set the Height to Auto, paddings (40, 16, 40, 16)
• Set BG Color to #313A5B - #21273D
• Add a Stack H: Host Badges. Set the Distribution to Space Between and the Height to Auto.

In that stack, add a Stack V: Host Container. Set the Width and the Height to Auto. Then, add a Host Badge. Right below, add a Text “Hosted by Trang”, the Type is Headline and the color is white. Duplicate the Host Container, change the picture and the text to “Co-host by Ben”.

Add another Text “Joined since June 2011”, the Type is Subhead 1 and the color is white. Set a padding top of 24. Add another Text “Trang has received 5-star rating from 93% of recent guests”, the Type is Subhead 1 and the color is System Gray.

Then, add a Gradient Button and change the text to “Contact Host”.

Rules Section

The last section is the rules section. This UI is pretty simple, it is basically a list of 4 rows. Add a Stack V: Rules. Set the Height to Auto and the padding top to 32.

Then, add a Stack H: Rule Row. Set the Gap to 20PT and the Distribution to Space Between. Set the paddings (20, 32, 20, 16) and the BG Color to #21273D - #000000.

Add a Stack V: Text Container. Set the Gap to 8PT and the Height to Auto. Add a Text “Availability”, the Type is Title 3 - Bold and the color is white. Add another Text “Oct 23 - 26”, the Type is Subhead 1 and the color is System Gray.

Finally, add a Diamond Button. Set the BG Color to #313A5B 70% and the Icon to “chevron.forward”. Make the Rule Row into a component.

Rule Info

Duplicate the Rule Row 3 times. For the BG Color, duplicate the same color but switch both side. Then, change the texts accordingly.

1. Availability - Oct 23 - 26
2. House rules - Check-in: After 2:00 p.m.
3. Health & Safety - Wear a mask or face covering when interacting in person
4. Cancellation policy - This reservation is non-refundable

Separators

With that done, you will realized that there’s weird spacings between each sections. Let’s add separators. Add a Stack V and name it: Separator Container. Set the Height to Auto and paddings (32, 16, 0, 16). In it, add a Stack H: Horizontal Separator. Set the Height to 1 and BG Color to white at 20% with a Corner Radius of 20.

• Place this one between Offers - Location
• Duplicate and place another one between Location - Reviews but remove the padding top
• Duplicate and place another one between Reviews and Hosts and keep the padding top
• Duplicate and place another one between Hosts and Rules and keep the padding top

Booking Button

Now, let’s design a button to navigate to the next screen. At the bottom, we will design a Booking Button. Start with a Stack H: Booking Button. Set the Height to 100PT, Pin To Bottom Center, Pin To Page and set the BG Color to the 3th Info Row.

For the left side, it is mainly texts. Add a Stack V: Price - Date Container. Set the Gap to 4PT, Width to 50% and paddings (16, 18, 16, 18).

In it, add a Stack H: Price Container. Set the Gap to 4PT and Width and Height to Auto. Add a Text “$200 CAD”, the Type is Headline and the color is white. The second Text “/ night”, the Type is Footnote and the color is white.

Then, add another Stack H: Date Container. Set the Gap to 4PT and the Width and the Height to Auto. In it, add a SF Symbol “calendar”, Size 13PT, Container Size 22x22 and color white. Add a Text “Oct 24 - 26”, the Type is Footnote and the color is white.

Button Container

On the right side, add a Stack V: Button Container. Set the Alignment to Center, Width to 50% and padding top to 10. Set the BG Color to Info Row 3.

Rectangle Button

• Then, add a Stack V: Rectangle Button
• Set the Alignment to Center, Width to 100PT and Height to 44PT
• Set the BG Color to #9DDFF3 - #0F54E8, Corner Radius to 10
• Add Borders 1PT white at 20%
• Add Drop Shadow: Offset X 0PT, Offset Y 10PT, Blur 20 and Navy Blue at 40%
• In it, add a Text “Book”, the Type is Headline and the color is white
• Make the Rectangle Button and the Booking Button into a component