https://ift.tt/xtoGDWs https://t.me/aigc1024/aigc1024/8499
https://ift.tt/xtoGDWs
# 20 Key Prompts for a Great Next.js + Tailwind CSS + shadcn/ui Website
Usage Scenario: You’re building a modern, responsive website for a tech startup. This site needs to showcase their products, engage potential customers, and provide easy access to information. The website needed to be visually appealing, high performance and user friendly on all devices.
1. “Create a sleek sticky navigation bar that adapts perfectly to a variety of devices from desktop to mobile. Includes a logo that shrinks when scrolled, a search icon that expands into a full-width search bar when clicked, and a hamburger menu that gracefully transforms into full-screen navigation on mobile.”
2. “Design an eye-catching first screen area that gives visitors a glimpse of our story. Incorporate a looping background video overlaid with an eye-catching headline and a subtly bouncing call-to-action button. Ensuring that the text remains legible across a variety of devices and slower internet connections.”
3. “Develop a ‘feature’ grid that is both informative and interactive. Each feature card should flip on hover to show more detail, and the grid layout should transition seamlessly from a 3×2 on desktop to a single column layout on mobile.”
4. “Create a pricing table that is clear, compelling and conversion-oriented. Include toggle switches for monthly/yearly payments, a ‘Most Popular’ tab, and subtle animations when hovering over the ‘Sign Up Now’ button. Ensures no loss of clarity when stacked vertically on a small screen.”
5. “Design a testimonial rotation that builds trust through social proof. Include customer photos, company logos, and fade-in and fade-out select quotes. On mobile, transform it into a swipeable card interface for a native app-like experience.”
6. “Build a contact form that is both user-friendly and secure. Include smart validation that provides real-time feedback, drop-down menus for inquiry types, and attachment upload functionality. Integrates with back-end APIs for spam protection and instant notifications.”
7. “Craft a footer that is both functional and attractive. Include a two-step opt-in process for email subscriptions, a collapsible link area for mobile, and a ‘back to top’ button that appears after scrolling. Make sure all elements support keyboard access.”
8. “Develop a dynamic blogroll page with infinite scrolling and categorized filtering. Include a featured posts area, estimated reading time and author information. Enables skeleton screen loading states to provide a smoother user experience when accessing content.”
9. “Create an immersive product showcase with 360-degree product views, zoom functionality, and image galleries. Add a sticky ‘add to cart’ bar on mobile and implement delayed loading to optimize performance.”
10. “Design a FAQ section that is both comprehensive and easy to navigate. Implement a search function that highlights results, group questions by category, and add a ‘Was this answer helpful?’ at the end of each answer. ‘s feedback option.”
11. “Craft a ‘Meet the Team’ section that injects personality into the brand. Add hover states to showcase interesting facts about each team member and implement a masonry layout that can be elegantly rearranged at different breakpoints.”
12. “Build an animated ‘key data’ section that catches the eye and conveys impact. Use SVG animations for data visualization, implement scroll-triggered counting animations, and make sure the layout is equally compelling on mobile devices.”
13. “Design an interactive company timeline that tells your story visually. Implement horizontal scrolling on desktop and vertical scrolling on mobile. Add parallax effects and trigger animations when milestones enter the view.”
14. “Create a masonry image gallery with lightbox functionality and delayed loading. Include category filtering, image tagging and single image sharing features. Optimizes touch interaction for mobile devices.”
15. “Develop a news subscription component that improves conversion rates with polished copy. Implement a multi-step form with progressive disclosures, display sample news, and include social proof. Add an exit intent popup for desktop users.”
16. “Build a social media wall that aggregates content from all platforms. Implement infinite scrolling, platform-specific styles, and the ability to directly like or share posts. Ensure walls can be smoothly rearranged across different screen sizes.”
17. “Design a multi-step guided process with a progress bar that allows users to save their progress and continue later. Add tooltips for complex fields, enable instant validation, and include a summary step before final submission. Optimize both desktop and mobile experiences.”
18. “Build an intelligent search component with autocomplete, recent searches and popular suggestions. Implement keyboard navigation, voice search capabilities, and ensure that the search overlay is accessible and closeable.”
19. “Create a 404 page that turns mistakes into opportunities. Include a search bar, links to popular content, and perhaps a small game or interactive element to engage users. Make sure the page is fully responsive and maintains brand consistency.”
20. “Implement a Floating Action Button (FAB) that provides quick access to key actions such as ‘Contact Us’ or ‘Start Free Trial’. Include a speed dial menu when clicked/flicked and ensure that the FAB is optimally positioned for different screen sizes and orientations.”