Build a mobile-friendly web app called "QuietFind" that helps students find quiet study spots.
Layout:
Top half: A map placeholder showing a university campus with 4 pinned locations
Bottom half: A horizontally scrollable list of location cards
Each location card must show:
Name of the spot (e.g. "Main Library Floor 4")
Noise level badge (🔵 Quiet / 🟡 Moderate / 🔴 Busy)
Icons for: power outlet available, WiFi available
A "Report noise" button
Opening hours (e.g. "Open until 10pm")
Star rating (out of 5)
Colour scheme: Clean white background, soft blue accents, rounded corners.
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.
Add a "Reserve seat" button to each location card.
Place it next to the "Report noise" button
When clicked:
Open a small modal or bottom sheet
Title: "Reserve a seat at [Location Name]"
Show time selector: add buttons for 30 min, 1 hour, 2 hours
Show available seats: e.g. "12 seats available"
Button: "Confirm reservation" (green)
After clicking confirm, show a success message: "Your seat is reserved until 3:30 PM"
Style:
Reserve button: solid blue background, white text
Modal: white card, centered, rounded corners, shadow
I have the full picture now. I need to:
ReservationSheet bottom-sheet componentLocationCardLet 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.