Please create a mobile app based on below name and description. The app should be designed with mobile-first principles, optimized for responsive for mobile devices.
Name: Damofat Description: For the buying of real estate properties
I'll create a mobile-first real estate app called "Damofat" for buying properties. This will be optimized for mobile devices with responsive design principles.
I've created Damofat, a mobile-first real estate app for buying properties. Here are the key features and mobile-optimized design elements:
Key Features
Mobile-First Design:
- Responsive grid layout that adapts from 1 column on mobile to 3 columns on desktop
- Touch-friendly interface with large tap targets
- Mobile-optimized search with collapsible filters in a slide-out sheet
- Bottom navigation bar for easy thumb navigation on mobile devices
Property Features:
- Property listings with high-quality images
- Detailed property information (bedrooms, bathrooms, square footage)
- Price formatting and featured property badges
- Favorite/save functionality with heart icon
- Location display with map pin icons
Search & Filtering:
- Location-based search
- Price range filtering
- Property type selection (House, Apartment, Condo, etc.)
- Bedroom count filtering
- Mobile: Compact search with filter sheet
- Desktop: Expanded horizontal search bar
User Experience:
- Loading states with skeleton animations
- Smooth hover effects and transitions
- Gradient hero section with clear branding
- Card-based layout for easy scanning
- Contact agent and view details buttons
Mobile Optimizations
- Touch-Friendly Interface: Large buttons and tap targets (minimum 44px)
- Responsive Images: Next.js Image component with proper sizing
- Bottom Navigation: Easy thumb access to main app sections
- Collapsible Filters: Space-saving filter system using sheets
- Optimized Typography: Readable font sizes across all devices
- Proper Spacing: Adequate padding and margins for mobile viewing
Design System
- Colors: Blue and purple gradient branding with clean white cards
- Typography: Inter font for modern, readable text
- Icons: Lucide React icons for consistency
- Components: shadcn/ui components for professional UI elements
- Layout: CSS Grid and Flexbox for responsive layouts
The app follows modern mobile app conventions with a bottom navigation, card-based layouts, and intuitive search functionality. It's built with Next.js 15 using Server Components for optimal performance and SEO 1.
