Make me a 3 page website for a company that sells baseball cards.
Generated Prompt
## APPLICATION OVERVIEW This web application is an e-commerce platform dedicated to selling baseball cards. It features a home page showcasing the company name and images of baseball cards, a product listing page where users can browse and filter cards by team, position, and year played, and a contact page for customer inquiries. ## CORE FEATURES 1. **Home Page**: Displays the company name prominently along with engaging images of various baseball cards to draw in visitors and create a connection with the product. 2. **Product Listing Page**: A comprehensive list of available baseball cards where users can filter products by team, position, and year played to streamline their shopping experience. 3. **Filtering System**: Allows users to easily sort through the inventory using dropdowns or checkboxes for team, position, and year played. 4. **Contact Page**: A simple form for visitors to reach out with questions or comments, including fields for name, email, and message. 5. **Responsive Design**: Ensures the application is fully functional and visually appealing on all devices, from desktops to smartphones. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a strong focus on typography to enhance readability. - **Color Mode**: Light theme with dark text on light backgrounds to provide a clear and inviting user experience. - **Layout**: - **Home Page**: Hero section at the top with the company name and a carousel of baseball card images below. - **Product Listing Page**: Grid layout for displaying cards with filtering options placed prominently above the card listings. - **Contact Page**: Simple, centered form layout with ample spacing for easy navigation. - **Typography**: Use modern, sans-serif fonts for headings (e.g., Montserrat) and body text (e.g., Roboto) to maintain a clean aesthetic. Headings should be bold and larger to create a clear hierarchy. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for type safety and enhanced developer experience. - **Styling**: Tailwind CSS for utility-first styling that supports the minimalist design approach. - **UI Components**: Utilize shadcn/ui for a consistent and modern component library. - **State Management**: Use React's Context API or Zustand for state management to handle the filtering and cart functionalities efficiently. ## IMPLEMENTATION STEPS 1. **Setup**: Initialize a new React project with TypeScript and install necessary packages (React, Tailwind CSS, shadcn/ui). 2. **Create Component Structure**: Set up the main components: Home, ProductListing, Product, and Contact. 3. **Design the Home Page**: Implement the hero section with the company name and a carousel of images. 4. **Develop the Product Listing Page**: Create a grid layout for displaying baseball cards and integrate the filtering functionality. 5. **Build the Contact Page**: Design a simple form with fields for user input and a submit button. 6. **Implement Routing**: Use React Router to manage navigation between the home page, product listing, and contact page. 7. **Test Responsiveness**: Ensure that all components are responsive and look good on various devices. 8. **Deploy**: Prepare the application for deployment on platforms like Vercel or Netlify. ## USER EXPERIENCE Users will land on the home page, where they are greeted by the company name and an attractive display of baseball cards. They can navigate to the product listing page to explore the inventory, using the filtering options to find specific cards based on their preferences. The contact page is easily accessible for any inquiries, ensuring that users have a smooth and engaging experience throughout the application. The minimalist design and responsive layout enhance usability and promote a positive interaction with the brand.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
