Now let me check what UI components are available and look at the tailwind config:

Now I have all the context I need. Let me build the QuietFind app with all the components. I'll update the theme, layout, and create the components.

Now let me create the manifest.json, the map component, location card component, and the main page:

Now let me create the main page that brings everything together:

Now let me update the tailwind config to include the Inter font:

The QuietFind app is now complete. Here's what I built:

• app/layout.tsx — Updated with Inter font, proper SEO metadata, iOS Safari zoom prevention via maximumScale: 1, and PWA-ready manifest.json link.
• app/globals.css — New soft blue color theme (--primary: 213 94% 55%) with a light, airy background and larger border-radius for rounded corners.
• components/campus-map.tsx — An illustrated SVG campus map with 4 color-coded pins (blue=quiet, amber=moderate, red=busy), tooltips on hover/tap, pulse animation on selection, and a legend overlay.
• components/location-card.tsx — Horizontally scrollable cards with noise-level badges, Power/WiFi icons, opening hours, 5-star ratings, and a "Report noise" button that shows confirmation feedback.
• components/app-header.tsx — Compact header with the QuietFind branding and a search icon.

Selecting a map pin auto-scrolls to its matching card, and tapping a card highlights its pin on the map. Everything uses 44px+ touch targets and snap scrolling for a native mobile feel.

I have the full picture now. I need to:

1. Create a ReservationSheet bottom-sheet component
2. Add a "Reserve seat" button next to "Report noise" in the LocationCard
3. Wire the sheet into the main page

Let me first create the reservation bottom sheet component, then update the location card to include the reserve button and trigger the sheet:

Now update the LocationCard to include the "Reserve seat" button next to the "Report noise" button, and wire up the sheet:

Now replace the single full-width "Report noise" button with two side-by-side buttons and add the sheet:

Now let me verify the final state of the card component to make sure everything looks correct:

Everything looks correct. Here's a summary of the changes:

I added a "Reserve" button (solid blue, white text) next to the existing "Report" button on each location card, and created a new ReservationSheet bottom-sheet component. On mobile, the sheet slides up from the bottom with a drag handle; on larger screens it appears as a centered modal. The sheet displays the location name as the title, shows "12 seats available," offers three duration buttons (30 min, 1 hour, 2 hours) that highlight in blue when selected, previews the end time, and has a green "Confirm reservation" button. After confirming, an animated success state shows a checkmark and the message "Your seat is reserved until [time]." The sheet resets its state each time it opens and can be dismissed via backdrop tap, the X button, or the Escape key.