245 lines
17 KiB
Markdown
245 lines
17 KiB
Markdown
# Tripz Stitch Prompts
|
|
|
|
Ready-to-use prompts for Google Stitch. Copy and paste these to generate each screen.
|
|
|
|
---
|
|
|
|
## RIDER APP
|
|
|
|
### 1. Splash Screen
|
|
```
|
|
Design a minimal splash screen for a ride-hailing app called "Tripz". Centered logo (stylized "T" icon in blue #1A73E8) on solid white background. Subtle fade-in scale animation on the logo. Clean, modern, minimal. No text except the logo. Mobile app format (390x844).
|
|
```
|
|
|
|
### 2. Onboarding Slide 1
|
|
```
|
|
Design an onboarding screen for a ride-hailing mobile app. Title: "Request with one tap". Simple vector illustration of a hand tapping a phone screen with a car icon. Below: subtitle text "Enter your destination and get matched instantly". Page indicator (1 of 3), "Skip" button top-right, "Next" button at bottom (52px height, blue #1A73E8 filled, white text, 12px radius). Clean white background, modern minimal design. RTL Arabic layout. Mobile format.
|
|
```
|
|
|
|
### 3. Onboarding Slide 2
|
|
```
|
|
Design an onboarding screen for a ride-hailing mobile app. Title: "Track your ride live". Simple vector illustration of a phone showing a map with a moving car pin. Below: subtitle "Watch your driver approach in real-time". Page indicator (2 of 3), "Skip" button top-right, "Next" button at bottom. Clean white background. RTL Arabic layout. Mobile format.
|
|
```
|
|
|
|
### 4. Onboarding Slide 3
|
|
```
|
|
Design an onboarding screen for a ride-hailing mobile app. Title: "Pay your way". Simple vector illustration showing cash, card, and wallet payment icons. Below: subtitle "Choose cash, card, or wallet". Page indicator (3 of 3), "Skip" button top-right, "Get Started" button at bottom. Clean white background. RTL Arabic layout. Mobile format.
|
|
```
|
|
|
|
### 5. Phone Login
|
|
```
|
|
Design a phone number input screen for a ride-hailing app. Large friendly title "Welcome to Tripz" at top. Subtitle "Enter your phone number to get started". A phone input field (52px height, 8px radius, light gray border) with a country code dropdown showing Jordan flag +962. Below the field: a prominent blue filled button "Send Code" (52px height, 12px radius, white text). Clean white background, minimal design. RTL Arabic layout. Mobile format.
|
|
```
|
|
|
|
### 6. OTP Verification
|
|
```
|
|
Design an OTP verification screen for a ride-hailing app. Title "Verify your number". Subtitle showing the phone number "+962 7XX XXX XXXX" with an "Edit" link. Four large separate digit input boxes (56x56px each, 8px radius, 16px gap), centered. Below: "Resend code in 0:45" countdown text. Clean white background. When all digits filled, auto-submit indication. RTL Arabic layout. Mobile format.
|
|
```
|
|
|
|
### 7. Name Entry
|
|
```
|
|
Design a simple name entry screen for a ride-hailing app. Large title "What's your name?". Subtitle "Help us personalize your experience". Single text input field (52px height, 8px radius). Below: "Continue" blue filled button (52px height). Clean white background, centered layout. RTL Arabic layout. Mobile format.
|
|
```
|
|
|
|
### 8. Home Screen
|
|
```
|
|
Design a ride-hailing app home screen. Full-screen map background (edge to edge, no top bar). On the map: a pulsing blue location dot in the center. Floating re-center button (bottom-right, 48px circle, white background, shadow). A collapsed bottom sheet at the bottom third with: a search field saying "Where to?" (52px height, 12px radius, search icon on start side), below it: two pinned favorite places (Home with house icon, Work with briefcase icon) as list items. Top-left: hamburger menu icon (32px). Clean modern design. RTL layout.
|
|
```
|
|
|
|
### 9. Destination Selection
|
|
```
|
|
Design a destination selection screen for a ride-hailing app. Draggable bottom sheet over a map. The sheet has 3 snap states - show the medium state. Top of sheet: origin field (auto-filled with current location) connected to destination field by a vertical colored line with dots. Below: "Add stop" button with plus icon. Search field with autocomplete results showing place names and addresses. Below results: "Pick from map" option with map pin icon. Saved places section: Home and Work. Clean white background, modern design. RTL layout. Mobile format.
|
|
```
|
|
|
|
### 10. Route Preview
|
|
```
|
|
Design a route preview screen for a ride-hailing app. Map showing a blue polyline route from origin (blue dot) to destination (red pin), with numbered stop markers along the way. Bottom sheet showing: distance "3.2 km" and time "8 min" at top, then horizontal scrollable ride category cards (Economy, Comfort, XL) each showing vehicle icon, capacity, ETA, and price. At bottom: "Choose Ride" blue filled button. Clean modern design. RTL layout.
|
|
```
|
|
|
|
### 11. Category & Price Selection
|
|
```
|
|
Design a ride category selection screen for a ride-hailing app. Top section: route summary (from → to, distance, time). Below: horizontal scrollable cards for vehicle categories - Economy (4 seats, small car icon, $5.00), Comfort (4 seats, larger car icon, $7.50), XL (6 seats, SUV icon, $12.00). Selected card has blue border. Below cards: payment method toggle (Cash / Wallet), optional coupon code input field, "Schedule for later" option with calendar icon. Bottom: "Confirm Ride" blue filled button (52px). Clean white background. RTL layout.
|
|
```
|
|
|
|
### 12. Searching for Driver
|
|
```
|
|
Design a "searching for driver" screen for a ride-hailing app. Full-screen map with a pulsing blue circle animation at the pickup location. Below the map: bottom sheet with "Looking for your driver..." text and a subtle loading animation. "Cancel" text button below. Minimal, calm waiting state. Clean design. RTL layout.
|
|
```
|
|
|
|
### 13. Driver Accepted
|
|
```
|
|
Design a "driver accepted" screen for a ride-hailing app. Map showing: route to pickup location in blue, driver car icon moving along the route. Bottom sheet with driver card: circular driver photo (56px), driver name "Ahmad K.", 4.8 star rating with star icon, vehicle info "White Toyota Camry" with license plate "1234" prominently displayed in a bordered box. Live ETA "Arriving in 3 min" with countdown. Below: two action buttons - Call (phone icon, outlined) and Chat (chat icon, outlined). Clean modern design. RTL layout.
|
|
```
|
|
|
|
### 14. During Trip (Live Tracking)
|
|
```
|
|
Design a live trip tracking screen for a ride-hailing app. Full-screen map with: blue polyline route to destination, driver car icon moving along route with smooth animation, destination pin marker. Floating re-center button. Bottom sheet (collapsed): trip status "On the way to destination", ETA, driver name and photo, "Share trip" option. Clean modern design. RTL layout.
|
|
```
|
|
|
|
### 15. Trip Invoice
|
|
```
|
|
Design a trip invoice/receipt screen for a ride-hailing app. Clean white background. At top: "Trip Complete" with checkmark icon. Route map thumbnail showing the path. Fare breakdown in a clean list: Base fare $3.00, Distance (3.2 km) $2.00, Time (8 min) $0.50, Extra wait $0.00, Discount -$1.00, Total $4.50 (bold, large). Payment method: Cash. Below: "Pay Driver" or "Paid" status indicator. Bottom: "Rate your ride" blue button. Tabular/monospace digits for prices. Clean receipt-style design. RTL layout.
|
|
```
|
|
|
|
### 16. Rating Screen
|
|
```
|
|
Design a post-trip rating screen for a ride-hailing app. At top: driver photo (72px, circular) and name "Ahmad K." Below: 5 large star icons in a row (currently unselected, gray outline). Below stars: quick reason chips/tags - "Clean car", "Great driving", "Friendly", "On time", "Good music" (selectable, outlined). Below chips: optional text area "Add a comment..." Bottom: "Submit" blue filled button (52px). Warm, encouraging design. RTL layout.
|
|
```
|
|
|
|
### 17. Navigation Drawer
|
|
```
|
|
Design a navigation drawer (side menu) for a ride-hailing rider app. Top section: user profile with circular avatar (64px), user name "Mohammed Ali", phone number below. Menu items list with icons: My Trips (clock icon), Wallet (wallet icon), Coupons & Invites (gift icon), Settings (gear icon), Support (help icon). Each item is a row with icon + label. Clean white background, subtle divider between items. RTL layout (menu slides from right side).
|
|
```
|
|
|
|
### 18. Chat Screen
|
|
```
|
|
Design an in-trip chat screen for a ride-hailing app. AppBar with back arrow, driver name "Ahmad K." and "Online" status. Message list: sent messages in blue bubbles (right side in RTL), received messages in gray bubbles (left side). Timestamps between messages. Bottom: text input field with send button (blue circle with arrow icon). Clean messaging UI. RTL layout.
|
|
```
|
|
|
|
### 19. Trip History
|
|
```
|
|
Design a trip history list screen for a ride-hailing app. AppBar title "My Trips". List of past trip cards, each showing: route thumbnail map (small), from → to addresses, date and time, fare amount, status badge (Completed in green, Cancelled in red). Scrollable list. Empty state: illustration with "No trips yet" text. Clean white background. RTL layout.
|
|
```
|
|
|
|
---
|
|
|
|
## DRIVER APP
|
|
|
|
### 1. Driver Splash
|
|
```
|
|
Design a splash screen for a driver-side ride-hailing app. Same style as rider splash but with slightly different styling to differentiate. Centered logo, clean background.
|
|
```
|
|
|
|
### 2. Driver OTP Login
|
|
```
|
|
Design a phone number login screen for a ride-hailing driver app. Title "Driver Login". Same OTP flow as rider but with professional driver-oriented styling. Blue theme. Mobile format.
|
|
```
|
|
|
|
### 3. Document Registration
|
|
```
|
|
Design a driver document registration screen for a ride-hailing app. Title "Complete your registration". Sections: Vehicle Photos (grid of upload areas for front, back, side views with camera icons), Personal Photo (circular capture area), Face Liveness Video (record button with instructions). Each section has a status indicator (pending/uploaded/verified). Bottom: "Submit for Review" button. Clean form design. RTL layout.
|
|
```
|
|
|
|
### 4. Driver Home
|
|
```
|
|
Design a driver home screen for a ride-hailing app. Full-screen map background. Top: prominent online/offline toggle switch (green when online, gray when offline) with status text. Map with location dot. Floating: balance card showing today's earnings "$45.20" (small card, top-right). Bottom: "No active trip" status or trip info card. Menu icon top-left. Clean, functional design. RTL layout.
|
|
```
|
|
|
|
### 5. Ride Offer Overlay
|
|
```
|
|
Design a ride offer overlay card for a driver app. Card floating over the map with: pickup distance "2.1 km away", destination "Downtown - King Hussein St", estimated fare "$8.50", ride time "12 min". Large green "Accept" button and red "Decline" button. Countdown timer ring (15 seconds) at top. Urgent but clear design. RTL layout.
|
|
```
|
|
|
|
### 6. Navigate to Pickup
|
|
```
|
|
Design a navigation screen for driver going to pickup. Map with route to pickup. Top: pickup address and distance. Bottom sheet: rider name "Sara M.", call button, chat button, "Arrived" blue button. Clean navigation UI. RTL layout.
|
|
```
|
|
|
|
### 7. Arrived at Pickup
|
|
```
|
|
Design a "driver arrived" waiting screen. Map showing driver at pickup location. Bottom sheet: "Waiting for Sara" with 5-minute free waiting timer (countdown), rider contact options. Timer changes color when approaching limit. Clean design. RTL layout.
|
|
```
|
|
|
|
### 8. Driver During Trip
|
|
```
|
|
Design a driver active trip navigation screen. Map with route to destination. Bottom: destination info, "End Trip" red button, fare estimate. Clean functional design. RTL layout.
|
|
```
|
|
|
|
### 9. Trip Complete (Driver)
|
|
```
|
|
Design a trip completion screen for driver. "Trip Complete" header. Fare earned: "$8.50" (large, bold). Route summary thumbnail. "Rate rider" option. "Done" button. Clean celebratory design. RTL layout.
|
|
```
|
|
|
|
### 10. Earnings Dashboard
|
|
```
|
|
Design a driver earnings dashboard screen. Title "Earnings". Today's earnings card (large number), weekly summary card with bar chart, trip count today. Below: recent trips list with earnings per trip. Clean data visualization. Dark or light theme. RTL layout.
|
|
```
|
|
|
|
### 11. Balance & Top-up
|
|
```
|
|
Design a driver wallet/balance screen. Current balance displayed prominently. Top-up options (buttons with amounts: $10, $20, $50, custom). Transaction history list. Warning banner when balance is negative (red background, freeze message). Clean financial UI. RTL layout.
|
|
```
|
|
|
|
### 12. Driver Drawer
|
|
```
|
|
Design a driver navigation drawer. Profile section at top (photo, name, rating). Menu: Earnings, Balance, My Vehicle, Documents, Settings, Support, Logout. Clean list with icons. RTL layout.
|
|
```
|
|
|
|
---
|
|
|
|
## WEB DASHBOARDS
|
|
|
|
### 1. SuperAdmin Dashboard Overview
|
|
```
|
|
Design a SaaS admin dashboard overview page. Dark sidebar (240px, #1A1A2E) with navigation items. Top bar with search, notifications bell, user profile. Main content: 4 KPI cards in a row (Total Tenants: 12, Active Rides: 1,234, Revenue: $45,678, Active Drivers: 89). Below: two charts - line chart (revenue over time) and donut chart (rides by category). Recent activity feed below. Clean modern SaaS design. Dark sidebar, light content area (#F5F5F5 background, white cards).
|
|
```
|
|
|
|
### 2. SuperAdmin Tenant List
|
|
```
|
|
Design a tenant management table page. Dark sidebar. Top bar. Main content: search bar + "Add Tenant" button. Table with columns: Logo, Name, Country, Package, Status (active/inactive badge), Drivers, Rides, Revenue, Actions (edit/disable icons). Alternating row colors. Pagination. Clean data table design.
|
|
```
|
|
|
|
### 3. SuperAdmin Create Tenant
|
|
```
|
|
Design a tenant creation form. Dark sidebar. Two-column form layout: Left column - Name input, Logo upload area, Country dropdown, City input. Right column - Package selection (cards: Starter/Pro/Enterprise), Payment methods checkboxes, Feature toggles switches. Bottom: "Create Tenant" blue button, "Cancel" text button. Clean form design.
|
|
```
|
|
|
|
### 4. Admin Driver Management
|
|
```
|
|
Design a driver management page for tenant admin. Dark sidebar. Main: search + filters (status: pending/approved/rejected). Table: Photo, Name, Phone, Vehicle, Documents status (badge), Joined date, Status, Actions (approve/reject buttons). Document review modal with driver docs side by side. Clean admin UI.
|
|
```
|
|
|
|
### 5. Admin Trip Listing
|
|
```
|
|
Design a trip listing page for tenant admin. Dark sidebar. Filters: date range, status, driver. Table: Trip ID, Rider, Driver, Pickup → Destination, Distance, Fare, Status (badge), Date. Clickable rows for detail. Clean data table.
|
|
```
|
|
|
|
### 6. Admin Document Review
|
|
```
|
|
Design a document review page. Dark sidebar. Driver info card at top. Below: document images in a grid (vehicle front, back, side, license, insurance). AI-extracted data panel showing matched/unmatched fields. Approve and Reject buttons. Clean review interface.
|
|
```
|
|
|
|
### 7. Admin Payouts
|
|
```
|
|
Design a payouts management page. Dark sidebar. Summary cards: Total pending, Total paid this month, Driver count. Table: Driver name, Balance, Last payout, Amount, Status, Action (Pay button). Bulk payout button. Clean financial admin UI.
|
|
```
|
|
|
|
### 8. Customer Service Search
|
|
```
|
|
Design a customer service search interface. Dark sidebar. Two search modes: By phone number (input + search) and By trip ID (input + search). Results: user card with trip history, or trip detail card with all info. Clean service tool design.
|
|
```
|
|
|
|
---
|
|
|
|
## LANDING PAGE
|
|
|
|
### 1. Hero Section
|
|
```
|
|
Design a landing page hero section for "Tripz" - a ride-hailing SaaS platform. Bilingual Arabic/English. Headline: "Launch your transport app under your brand in 30 days". Subheadline: "Data stays in your country. Transparent pricing. Full customization." Two CTA buttons: "Try the Demo" (blue filled) and "Contact on WhatsApp" (green outlined). Background: subtle gradient or illustration of city/map. Modern SaaS landing page style.
|
|
```
|
|
|
|
### 2. Features Section
|
|
```
|
|
Design a features section with 3 pillar cards side by side. Card 1: Shield icon, "Data Sovereignty", "Your data stays on your servers, in your country." Card 2: Dollar icon, "Transparent Pricing", "No hidden fees. Public pricing. Calculator included." Card 3: Rocket icon, "30-Day Launch", "From contract to app store in 30 days." Clean icon cards with subtle shadows. Bilingual.
|
|
```
|
|
|
|
### 3. Savings Calculator
|
|
```
|
|
Design an interactive savings calculator section. Title "Calculate Your Savings". Two input fields: "Daily Rides" (number) and "Average Fare" (currency). Results panel showing: Your current cost vs Tripz cost, savings amount, annual savings. Bar chart comparison. Clean interactive design.
|
|
```
|
|
|
|
### 4. Pricing Section
|
|
```
|
|
Design a pricing page with 3 tier cards. Starter ($299/mo): Up to 50 drivers, Basic features, Email support. Professional ($799/mo): Up to 200 drivers, Advanced features, Priority support, Custom branding. Enterprise (Custom): Unlimited drivers, All features, Dedicated support, White-label. Popular badge on Professional. Clean modern pricing table.
|
|
```
|
|
|
|
### 5. FAQ Section
|
|
```
|
|
Design an FAQ accordion section. Title "Frequently Asked Questions". Questions: "Who owns the data?", "What if I want to leave?", "How long does setup take?", "Do you support Arabic?", "What payment methods are supported?", "Can I customize the app?" Each expands to show answer. Clean accordion design.
|
|
```
|
|
|
|
### 6. Footer
|
|
```
|
|
Design a landing page footer. Logo on left. Navigation columns: Product (Features, Pricing, Demo), Company (About, Blog, Contact), Support (Help Center, Status, API Docs). Social media icons. Copyright text. Bilingual. Clean minimal footer.
|
|
```
|