このプロンプト一つでこのHPのUI部分をだしてくれる。
Create detailed components with these requirements: 1. Use 'use client' directive for client-side components 2. Style with Tailwind CSS utility classes for responsive design 3. Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested 4. Use stock photos from
picsum.photos where appropriate, only valid URLs you know exist 5. Configure next.config.js image remotePatterns to enable stock photos from
picsum.photos 6. Avoid duplicate components 7. Automatically source and display logos from a CDN in design placeholders 8. Follow proper import practices: - Use @/ path aliases - Keep component imports organized - Update current src/app/page.tsx with new comprehensive code - Don't forget root route (page.tsx) handling - You MUST complete the entire prompt before stopping <summary_title> Luxury Eco-Resort Landing Page with Immersive Scroll Experience </summary_title> <image_analysis> 1. Navigation Elements: - Top header with: Logo, Menu, Booking button - Secondary navigation with: Location, Amenities, Experience - Footer navigation with: Contact, Social media links 2. Layout Components: - Full-width hero section (100vw x 100vh) - Content sections with 1200px max-width - Image grid layouts (3 columns, 20px gap) - Padding: 80px (desktop), 40px (mobile) 3. Content Sections: - Hero with parallax forest imagery - Experience showcase with large typography - Photo gallery grid - Amenities feature blocks - Location map integration - Booking information cards 4. Interactive Controls: - Smooth scroll transitions - Image hover effects with scale (1.05) - Booking form with date picker - Interactive map controls - Menu toggle for mobile 5. Colors: - Primary:
#1A2F23 (dark green) - Secondary:
#F5F5F1 (off-white) - Accent:
#8B9B8B (sage) - Text: #333333 (dark gray) 6. Grid/Layout Structure: - 12-column grid system - Margins: 120px (desktop), 24px (mobile) - Breakpoints: 1440px, 1024px, 768px, 480px - Vertical rhythm: 8px base unit </image_analysis> <development_planning> 1. Project Structure: ``` src/ ├── components/ │ ├── layout/ │ │ ├── Header │ │ ├── Footer │ │ └── Navigation │ ├── features/ │ │ ├── Booking │ │ ├── Gallery │ │ └── Map │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. Key Features: - Parallax scrolling effects - Dynamic image loading - Booking system integration - Interactive map - Responsive image galleries 3. State Management: ```typescript interface AppState { ├── booking: { │ ├── selectedDates: DateRange │ ├── availability: AvailabilityMap │ └── pricing: PricingData ├── } ├── ui: { │ ├── isMenuOpen: boolean │ ├── activeSection: string │ └── scrollPosition: number ├── } } ``` 4. Routes: ```typescript const routes = [ ├── '/', ├── '/experience/*', ├── '/booking/*', └── '/location/*' ] ``` 5. Component Architecture: - ParallaxContainer - ImageGallery - BookingForm - LocationMap - AmenitiesList 6. Responsive Breakpoints: ```scss $breakpoints: ( ├── 'desktop': 1440px, ├── 'laptop': 1024px, ├── 'tablet': 768px, └── 'mobile': 480px ); ``` </development_planning>