Complete and massive overhaul: overall site notes: CANNOT LAG - must be clean scrolling
Generated Prompt
## APPLICATION OVERVIEW This project is a comprehensive web application for the Founders Cup initiative, focused on providing a platform for students to create and manage charitable events. It aims to facilitate customizable event pages, streamline team communication, and enhance fundraising efforts while maintaining a modern and engaging user experience. ## CORE FEATURES 1. **User Authentication**: Integrate Google Sign-In for easy access, allowing team members to log in with their Google accounts. 2. **Custom Event Pages**: Each team can create customizable event pages that include details about the event, progress bars for fundraising, and donation options. 3. **Team Communication Hub**: A dedicated space for team members to communicate, manage tasks, and access resources, featuring group chats and document storage. 4. **Event Scheduling and Management**: A scheduling tool that allows teams to manage upcoming events, including agendas, beneficiary details, and fundraising goals. 5. **Sponsor and Charity Management**: Display sponsor tiers and charity information, allowing teams to showcase their partnerships and impact. 6. **Donation Tracking**: A dynamic feature showing how much has been raised in real-time, along with statistics on charities impacted and events held. ## 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 application will follow a structured layout with a top navigation bar for easy access to features, a hero section for showcasing key information, and well-defined sections for events, team communication, and donations. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Use React's built-in state management or Context API as needed. ## IMPLEMENTATION STEPS 1. **Set Up Development Environment**: Install Node.js and create a new React app using Create React App with TypeScript. 2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and any other necessary libraries for routing and state management. 3. **Create Component Structure**: Develop components for the navigation bar, event pages, team communication hub, and donation tracking. 4. **Implement User Authentication**: Set up Google Sign-In for user authentication and create a user context for managing logged-in state. 5. **Design Event Pages**: Build customizable event pages with forms for entering details, uploading images, and managing fundraising goals. 6. **Develop Team Communication Features**: Create a messaging system and document storage feature for team collaboration. 7. **Integrate Donation Tracking**: Implement a real-time donation tracker displaying funds raised and statistics on impact. 8. **Test and Optimize**: Conduct thorough testing for usability, responsiveness, and performance; optimize the application for clean scrolling and fast loading times. ## USER EXPERIENCE Users will have a seamless experience navigating through the application. Upon landing, they will be greeted by a hero section with a video introduction and options to sign in or create an event. Each event page will feature a progress bar for donations, a detailed agenda, and options for team communication. Users will be able to easily access their profiles, manage events, and communicate with team members through a straightforward UI, ensuring they can focus on their charitable efforts without technical distractions. This comprehensive approach ensures that the Founders Cup web application meets the needs of its users while maintaining a modern and engaging aesthetic.
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!
