Airbnb Clone

Build a polished native iOS clone of the Airbnb app in SwiftUI: Explore with the Homes / Experiences / Services tabs and their 3D icons, Guest favorite cards and the heart that saves to a wishlist, the Where? / When? / Who? search, the results map with price pills, the listing page with Reserve, Review and continue, Wishlists with side-by-side Compare, Trips day by day, Messages and Profile.

It is the Airbnb app on screen: its name, the Bélo, Rausch pink and its own words (Start your search, Homes, Experiences, Services, NEW, Guest favorite, Superhost, Popular homes in, Where?, Search destinations, Suggested destinations, When?, Dates, Months, Flexible, Exact dates, Who?, Adults, Children, Infants, Pets, Clear all, Search, Next, Reset, Over 1,000 homes, Prices include all fees, Reserve, Free cancellation, Rare find!, Review and continue, Choose when to pay, Request to book, Saved to, Change, Create wishlist, Compare, Trips, Wishlists, Messages, Profile, Explore). The guest is Maya. Today is Friday, November 6, 2026. The attached screenshots are the current app: match their layout, type sizes, spacing and colours.

ASSETS
curl -L once each and unzip flat: https://vibecode-airbnb-media.beacon.host/brand.zip and https://vibecode-airbnb-media.beacon.host/media.zip. brand.zip: BeloMark.swift (the Bélo as a SwiftUI Shape: add the file as is, fill it with FillStyle(eoFill: true)), belo-rausch.png, belo-white.png, belo-dark.png, and the 3D tab icons tab-homes.png, tab-experiences.png, tab-services.png (512 px, transparent). media.zip: the 45 JPEG photos named below. Put every image in the asset catalog under its file name. Never draw or generate the logo, the tab icons or any photo; no image generation is needed.

SHELL
Opens on Explore: no splash, onboarding, sign-in or permission prompts. A 5-tab bar: Explore (magnifyingglass), Wishlists (heart), Trips (the Bélo outline, BeloMark stroked 1.6 pt), Messages (message), Profile (person.crop.circle); white with a top hairline #EBEBEB, 10 pt labels, selected #FF385C icon and label, others #6A6A6A. The status bar stays visible and dark on every screen. Light mode only.

SCREENS
1. Explore. A header with a soft grey gradient (#EBEBEB at the top to white) pinned while the content scrolls under it (a hairline shadow appears once scrolled). The pill: a white capsule 56 pt tall, 16 pt side margins, a big soft shadow (black 12%, radius 16, y 4), centred magnifyingglass + "Start your search" (16 pt semibold #222222). Below it three equal tab columns: the 3D icon (44 pt tall) over the label (13 pt; selected #222222 semibold, others #6A6A6A), a navy "NEW" badge (capsule #3D4A6B → #2A3350, 9 pt heavy white, 1.5 pt white border) over the top right of the Experiences and Services icons, and a 3 pt #222222 rounded underline under the selected label that slides between tabs (matched geometry). A tab tap bounces its icon (0.9 → 1.08 → 1.0); the balloon floats up 4 pt and back; the bell rocks ±12° twice.
   Homes: rows, each a header (22 pt bold #222222, e.g. "Popular homes in Lake Tahoe") with a 32 pt #F2F2F2 circle "arrow.right" at the right, then a horizontal row of cards 168 pt wide: a square photo with 20 pt corners, a white "Guest favorite" capsule (12 pt semibold #222222) top left on Guest favorite homes, a heart top right (white 2 pt outline over black 40%; saved: filled #FF385C), then the title (13 pt semibold) and "$824 for 2 nights · ★ 4.97" (12 pt #6A6A6A). Rows: Popular homes in Lake Tahoe, Available next weekend in Joshua Tree, Stay in Miami Beach, Guest favorites in Austin; every row title fits on one line (minimumScaleFactor 0.8). A card opens the listing page.
   The heart: a tap fills it #FF385C and pops 1.25 → 1.0 (0.25 s spring), saves to the most recent wishlist and slides up a white toast just above the tab bar (12 pt corners, shadow): a 40 pt photo, "Saved to Tahoe ski trip" (14 pt), "Change" (underlined; a sheet listing the wishlists with "Create new wishlist"). It holds 2.5 s, sits under every sheet and cover, and hides the moment any sheet or cover opens. With no wishlists yet it opens "Create wishlist" instead (Name field, "0/50 characters", Clear, black Create). Un-hearting removes it, no toast.
   Experiences: "Airbnb Originals" (cards with an "Original" capsule), "Popular experiences in Lake Tahoe" (a "Popular" capsule; "From $165 / guest · ★ 4.98"). Services: "Services in Lake Tahoe": 96 pt rounded photo squares with the category and "12 available" (Chefs, Photography, Massage, Rentals, Groceries, Baby gear), then rows "Chefs" and "Rentals". Their pages reuse the listing page with "From $165 / guest" and a Rausch "Show dates" (3 time slots).
2. Search, a full-screen cover that morphs out of the pill: the pill's white grows into the Where? card in one matched-geometry spring (0.35 s), the three tabs stay at the top with a round white X at the right; never a cross-fade. On each later step the old card collapses into its summary row ("Where · Lake Tahoe", "When · Dec 18 – 20") while the next card expands from its row, both drawn in full on every frame: never an empty card. Cards: white, 24 pt corners, a big shadow, on #F7F7F7.
   Where?: "Where?" (26 pt bold), a "Search destinations" field (magnifyingglass, 1 pt #B0B0B0 border, 12 pt corners), "Suggested destinations" (12 pt), rows of a 48 pt rounded tile with a tinted SF Symbol + title + subtitle: Nearby · Find what's around you; Lake Tahoe · Popular lake destination; Joshua Tree, CA · For starry desert nights; Miami Beach, FL · For sun and Art Deco; Austin, TX · For live music and tacos. Below it collapsed white rows "When · Add dates" and "Who · Add guests". A bottom bar: "Clear all" (underlined) and a Rausch-gradient "Search" capsule with magnifyingglass.
   Picking a place collapses Where? into "Where · Lake Tahoe" and expands When? (the same morph). When?: "When?", a segmented Dates / Months / Flexible (track #EBEBEB, white thumb), weekday letters, month grids from November 2026 (days before today struck through #B0B0B0); start and end days are black circles with white numbers, the days between sit on a #F2F2F2 band that fills in 0.2 s; capsules "Exact dates", "± 1 day", "± 2 days", "± 3 days"; "Reset" (underlined) and a black "Next". Who?: "Who?", rows Adults "Ages 13 or above", Children "Ages 2 – 12", Infants "Under 2", Pets "Bringing a service animal?" (underlined), each with 32 pt round − (disabled at 0) and + buttons around the count; "Clear all" and "Search".
3. Results: the search cards and the search header (the three tabs and the X) collapse up into a top pill ("Homes in Lake Tahoe" over "Dec 18 – 20 · 4 guests" 12 pt #6A6A6A) in the same 0.3 s, with a round back button left and a filters circle right, while the map is already fully drawn underneath (nothing see-through, nothing left over the map). A MapKit map of the region with white price capsules ("$412", 13 pt bold, shadow) that pop in one by one (scale 0.6 → 1, 0.06 s apart); a tapped capsule turns #222222 with white text and a listing card slides up over the map (photo, title, ★, "$824 for 2 nights", X). A draggable bottom sheet: grabber, "Over 1,000 homes" (13 pt semibold, centred), a pink tag + "Prices include all fees", then full-width listing cards (a photo pager with dots, Guest favorite, heart, title + "★ 4.97 (312)", subtitle, "Dec 18 – 20", "$824 for 2 nights" underlined). Pre-warm the map at launch on the Lake Tahoe region so its tiles are loaded: a map is never beige on its first frame.
4. Pushed screens (the listing page, a wishlist, Compare, a trip) fade in a white top bar (the status bar area plus the button row, a hairline under it) once the content scrolls past the photo or the title, with the back, share and heart buttons on it, so nothing ever shows under the clock. Listing page (push): a full-width photo pager 300 pt tall with "1 / 5" (white on black 50%) bottom right; 32 pt round white buttons: back top left, share and heart top right. A white sheet with 28 pt top corners overlaps the photo by 24 pt: the title centred (26 pt semibold), "Entire cabin in Tahoe City, California" (15 pt #6A6A6A), "8 guests · 4 bedrooms · 5 beds · 3 baths"; the rating row "4.97" + five small stars | laurel.leading "Guest favorite" laurel.trailing | "312" over "Reviews", split by hairlines; "Hosted by Hannah" with her 40 pt photo and a small Rausch Superhost badge, "Superhost · 6 years hosting"; three highlights with icons (Hot tub with a view · Guests love the cedar tub on the deck; Ski shuttle at the door · 10 minutes to Palisades Tahoe; Hannah is a Superhost · Superhosts are experienced, highly rated Hosts); "About this place" + "Show more"; "Where you'll sleep" (photo cards); "What this place offers" (Hot tub, Fireplace, Wifi – 300 Mbps, Kitchen, Free parking, EV charger) + "Show all 52 amenities"; "Where you'll be" (a MapKit map with a Rausch home pin); a big centred "4.97" between laurels, "Guest favorite", "This home is in the top 5% of eligible listings based on ratings, reviews, and reliability"; two review cards with initials avatars; "Meet your host" (photo, Hannah, Superhost, 312 Reviews, 4.97★, 6 Years hosting). A strip "Rare find! This place is usually booked" (diamond icon) sits above a fixed bottom bar: "$824" (17 pt semibold, underlined) "For 2 nights · Dec 18 – 20", a small "✓ Free cancellation" capsule, and the Rausch-gradient "Reserve" capsule (52 pt tall, 17 pt semibold white).
5. Booking: Reserve opens "Review and continue" (a cover, X top right): the photo thumbnail, title, "★ 4.97 (312) · Guest favorite"; rows with a grey "Change" button: Dates · Dec 18 – 20, 2026; Guests · 4 adults; Total price · $1,037.40 including taxes USD + "Details" (a sheet: 2 nights x $412.00 $824.00, Cleaning fee $95.00, Taxes $118.40); "Free cancellation · Cancel before Dec 17 for a full refund. Full policy"; "Choose when to pay": "Pay $1,037.40 now" (selected) or "Pay part now, part later · $345.80 now, $691.60 charged on Dec 4. No extra fees."; a black "Next" to "Request to book" (Price details + a Rausch "Request to book"), then a full-screen "Your trip is booked" with the cabin photo (a white status bar over it), "Lake Tahoe · Dec 18 – 20" and a black "Go to Trips". The trip appears in Trips.
6. Wishlists: "Wishlists" (32 pt bold) + "Edit"; a 2-column grid of 4-photo mosaics (16 pt corners) with the name and "n saved": Recently viewed · Today; Tahoe ski trip · 2 saved; Joshua Tree 2027 · 4 saved; Miami 🌴 · 2 saved. A wishlist opens its homes as large cards with a floating black "Compare" capsule: Compare shows the homes side by side in columns (photo, name, "$412 night", ★) with rows Bedrooms, Beds, Hot tub, Fireplace, Ski shuttle, Drive to Palisades, Free cancellation (✓ or –) and a two-line "Why guests love it" under each photo ("The cedar hot tub and the big A-frame window"): Airbnb's side-by-side compare.
7. Trips: "Trips" (32 pt bold) + a list icon; a city section "Austin" with a big card: an "In 3 weeks" capsule, the photo, "Home in Austin", "Nov 26 – 29 · Hosted by Kenji", "1207 Travis Heights Blvd, Austin, TX" + a grey "Get directions" button. A trip opens its day-by-day view: the city title, a timeline of day badges (weekday over a grey circled date on a thin line): Thu 26 · Check in after 4:00 PM (a door tile); "Discover experiences for your trip" (a carousel); Fri 27 · an experience; Sun 29 · Check out before 11:00 AM. "Past trips": Joshua Tree (Mar 2026), Miami Beach (Jan 2026).
8. Messages: "Messages", capsules All / Traveling / Support; threads (host photo, name, last line, date): Kenji "Happy early Thanksgiving! Breakfast tacos are on me 🌮", Marco "Fresh snow this week ❄️"; a thread has bubbles and "Write a message…".
9. Profile: "Profile" (32 pt bold); a shadowed card with Maya's photo, "Maya", "San Francisco, CA", "3 Trips · 2 Reviews · 4 Years on Airbnb"; cards Past trips and Connections; rows Account settings, Get help, Privacy, Become a host.

FIXTURES (Data/Fixtures.swift; photo names from media.zip; prices per night; card line = 2 nights)
Lake Tahoe: Cabin in Tahoe City (the hook home: an A-frame with a cedar hot tub, tahoe-cabin-1…5, $412, ★ 4.97 (312), Guest favorite, host Hannah, 8 guests · 4 bedrooms · 5 beds · 3 baths, 39.1677, -120.1452); Chalet in Olympic Valley (tahoe-chalet-1…3, $468, 4.93 (188), Guest favorite, Marco); Home in South Lake Tahoe (tahoe-lake-1…2, $395, 4.89 (241), Priya, lakefront dock); Cabin in Truckee (truckee-1…2, $289, 4.95 (97), Guest favorite, James, barrel sauna); Condo in Incline Village (incline-1, $236, 4.86 (154), Sofia).
Joshua Tree: Home in Joshua Tree (jt-home-1, $318, 4.96, GF); Cabin in Yucca Valley (jt-cabin-1, $182, 4.92); Dome in Joshua Tree (jt-dome-1, $246, 4.98, GF); Home in Twentynine Palms (jt-adobe-1, $139, 4.88); Casita in Pioneertown (jt-casita-1, $164, 4.94, GF). Miami Beach: Apartment in Miami Beach (mia-deco-1, $211, 4.91, GF); Condo in South Beach (mia-pool-1, $264, 4.87); Home in Coconut Grove (mia-grove-1, $389, 4.95, GF); Loft in Wynwood (mia-loft-1, $176, 4.84); Bungalow in Key Biscayne (mia-bungalow-1, $298, 4.93). Austin: Home in Austin (atx-bungalow-1, $205, 4.96, GF, Kenji); Tiny home in Austin (atx-tiny-1, $129, 4.92); Ranch in Wimberley (atx-ranch-1, $342, 4.97, GF); Condo in Austin (atx-condo-1, $198, 4.85); Camper in Dripping Springs (atx-airstream-1, $149, 4.94, GF).
Experiences (Lake Tahoe): Ski with a former Olympian (exp-ski, Original, from $165, 4.98, Marco); Snowshoe to Emerald Bay at sunrise (exp-snowshoe, $85, 4.96, Priya); Fondue night in a Truckee cabin (exp-fondue, $95, 4.97, Sofia); Shoot the Milky Way over the lake (exp-stars, Original, $120, 4.99, Kenji). Services: Private chef dinner for your cabin (svc-chef, Chefs, from $95 / guest), Family photos in the snow (svc-photo, Photography, from $250 / group), Massage at your stay (svc-massage, $160), Ski & snowboard rentals delivered (svc-ski-rental, Rentals, $45 / day), Groceries with Instacart (svc-groceries), Baby gear with BabyQuip (svc-babygear, 10% off).
People: hosts Hannah, Marco, Priya, James, Sofia, Kenji (host-<name>), the guest Maya (member-maya). At launch "Tahoe ski trip" holds the Chalet and the Truckee cabin.

HOOK (the video's first 3 seconds)
- HOOK MODE: tapping an invisible 24x60 pt strip at the right edge of the screen at mid-height (x 378–402, y 400–460 pt), above every sheet, cover and the tab bar (a tap closes whatever is open and resets to launch), plays this run through the real heart, search and results code, identical every time (seconds from the tap): 0.00 Explore on Homes, scrolled to the top, fully drawn (no fade-in), a touch dot landing on the heart of Cabin in Tahoe City; 0.10 tap the heart: it fills and pops; 0.20 the "Saved to Tahoe ski trip" toast slides up; 0.45 the dot glides to the pill's centre; 0.75 tap: the Where? card morphs out of the pill; 1.20 tap Lake Tahoe: When? expands, already showing December 2026; 1.75 tap Dec 18; 2.00 tap Dec 20 (the band fills); 2.30 tap Next: Who?; 2.60, 2.78, 2.96, 3.14 tap Adults + (4); 3.45 tap Search: Results with the Tahoe map; 3.75–4.05 the price capsules pop; 4.40 tap "$412": it turns black and the card slides up; hold to 6.0.
- The touch dot: 44 pt, black at 35%, a 3 pt white ring, a soft shadow, drawn above everything; it scales in as it lands, glides 0.25 s between points and fades after its last tap.
- What the eye must see: the heart fills and pops, never blinks; the toast holds ≥1.2 s; the search cards morph and never cross-fade; the map already has tiles on its first frame; flashes ≤0.12 s at ≤35%. Waits use these times, not the app's normal delays. Every image is preloaded and decoded off the main thread at launch; warm up haptics and the map at launch.

LOOK
Rausch #FF385C (selected, hearts, pills); the CTA gradient #E61E4D → #E31C5F → #D70466 left to right (Search, Reserve, Request to book); text #222222, secondary #6A6A6A, hairlines #DDDDDD, soft fill #F7F7F7; black buttons #222222 with white 16 pt semibold and 8 pt corners; photos with 20 pt corners, panels 16 pt, soft shadows. SF Pro with semibold titles; pressed states darken.

RULES
- Native SwiftUI, iOS 26 (keep the template's target), iPhone portrait; MapKit for maps.
- Deterministic fixtures. No backend, login, permissions, location, analytics or network calls at runtime (images are bundled). No persistence: delete the SwiftData starter, no UserDefaults or files.
- Springs under 350 ms, haptics on taps, pressed states.
- Files under 300 lines, big bodies split into subviews, no long chained expressions.

REMIX-READY
Theme/Brand.swift (name, the Bélo, a Copy enum with every word), Theme/Theme.swift (colours, the gradient, fonts; no colour literals elsewhere), Data/Fixtures.swift, Data/DemoScript.swift (HOOK MODE timings). Codable models with String ids: Listing (title, city, coordinate, pricePerNight, rating, reviewCount, isGuestFavorite, hostId, photos, guests, bedrooms, beds, baths, amenities, highlights), Experience, Service, Host, Wishlist, Trip (days of timeline items), Thread; behind one AppDataSource protocol (FixtureDataSource) feeding @Observable stores (ExploreStore, SearchStore, WishlistStore, TripStore, InboxStore); views never read Fixtures. Components/ is a library of travel components that take plain inputs and work alone on any screen: PriceMap (a region + priced pins), ListingCard and ListingCardLarge, PhotoPager, CompareTable, DateRangeCard, GuestCounter, TripTimeline, PriceSummary (total + Reserve). Features/<Screen>/. README.md under 80 lines: file map; how to rename, recolour, swap the logo, change the listings and add a city row; the Components list, one line each; 3 one-prompt remixes ("Airbnb for parking spots", "for campsites and RVs", "for studios and event spaces"). "Read README.md first." atop CLAUDE.md and ios/AGENTS.md; replace ios/CLAUDE.md's structure block with this app's files. No scratch folders.

FILMING
Long-press the 3D Homes icon to reset everything to launch (hearts, wishlists, trips, dates, guests, tab, scroll).

BUILD
Theme, Brand, Fixtures, then each screen in small files, a one-line status per screen; launch in the simulator every two or three files. Explore (Homes) with the heart and toast first, then Search (Where? / When? / Who?) and Results, then the listing page and booking, then Wishlists with Compare, Trips, Messages, Profile, Experiences and Services. Fetch brand.zip and media.zip as soon as the shell runs; check each image exists, never view them. Walk each flow once and fix what breaks; no pixel measuring or debug modes. Deliver the whole app, not a plan.