Overall Site Notes Clean & Modern Customizable while maintaining our brand Each person gets their own page (everyone builds their brand) founderscup.
Generated Prompt
```markdown ## APPLICATION OVERVIEW This project is designed as a web application focused on promoting the Founders Cup initiative, allowing users to create personalized pages while showcasing the organization's mission and events. It aims to provide resources for students to build their brand and engage in charitable activities, incorporating donation options and interactive features for users to manage their contributions and events. ## CORE FEATURES 1. **User Profiles**: Each participant can create and customize their own page to showcase their brand and contributions. 2. **Donation System**: A clear interface for users to donate to the organization, displaying how funds are allocated and a live updating total of funds raised. 3. **Event Management**: Users can view and create events, with a globe visualization displaying all events and specific details for each event, including beneficiaries and amounts raised. 4. **Dynamic Statistics**: A visually engaging section that features key metrics such as total funds raised, number of charities impacted, and media views, presented in a horizontal scrolling format. 5. **Testimonials**: A section dedicated to showcasing testimonials from student leaders, event attendees, sponsors, and donors. 6. **Responsive Design**: The application will be fully responsive, ensuring an optimal experience across all devices. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography. - **Color Mode**: Light theme with dark text on light backgrounds. - **Primary Color**: #1978E5 (accent for buttons, links, highlights). - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements. - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs. - **Layout**: The main layout will consist of a hero section at the top, followed by user profiles, a donation section, a dynamic statistics display, testimonials, and a footer with contact information. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript. - **Styling**: Tailwind CSS. - **UI Components**: shadcn/ui. - **State Management**: Redux or Context API (as needed). ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React application with TypeScript and integrate Tailwind CSS. 2. **Create Components**: Develop reusable components for the hero section, user profiles, donation features, event management, and testimonials. 3. **Implement Routing**: Use React Router to manage navigation between different sections of the application. 4. **Set Up State Management**: Implement Redux or Context API for managing user data and event information. 5. **Connect Donation System**: Integrate a payment processing system (e.g., Stripe) for handling donations. 6. **Build Event Management Features**: Develop the functionality for users to create, manage, and view events, including the globe visualization. 7. **Design Responsive Layout**: Ensure all components are responsive and provide an optimal user experience across devices. 8. **Testing**: Conduct thorough testing for functionality, usability, and performance. ## USER EXPERIENCE Users will interact with the application by creating their personalized pages, making donations, and engaging with events. They will be greeted by a clean hero section that clearly communicates the organization's mission, followed by easy navigation to key features like their profile, donation options, and events. The dynamic statistics will provide real-time feedback on the impact of their contributions, enhancing engagement and fostering a sense of community. ```
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!
