Lovable Prompt Creator - AI Prompt Generator

Create a comprehensive Cursor prompt for the following project idea:

USER IDEA: "Create a modern, responsive, premium educational website.

WEBSITE NAME:
BEEN UMAHR FHARUUQ Free Learning Website 2th World

TITLE:
BEEN UMAHR FHARUUQ Free Learning Website 2th World

WEBSITE THEME:
Modern Educational Platform
Professional Learning Academy
Elegant and Inspiring Design

COLORS:
- Primary Background: Light Green (#B7FF5A)
- Secondary Color: White (#FFFFFF)
- Accent Color: Gold (#D4AF37)
- Text Color: White and Gold
- Glassmorphism Cards
- Smooth Animations

LOGO:
Use the uploaded green logo image as the official website logo.

PROFILE:
Use the uploaded single profile image as the founder profile picture.

HERO SECTION:
Use the uploaded classroom teaching image as the full-screen background cover.

Hero Title:
BEEN UMAHR FHARUUQ
Free Learning Website 2th World

Hero Subtitle:
Learn. Build. Create. Inspire.

Hero Description:
Empowering students worldwide through free high-quality education in technology, software development, and creative design.

Buttons:
- Start Learning
- Join Community
- Contact Us

ABOUT SECTION:
Title:
About Our Academy

Content:
BEEN UMAHR FHARUUQ Free Learning Website 2th World is dedicated to providing free educational opportunities for students around the world. We focus on practical skills, innovation, creativity, and professional development.

MISSION SECTION:
Title:
Our Mission

Content:
To empower students worldwide with free high-quality education in software development and creative designs.

GOAL SECTION:
Title:
Our Goal

Content:
Building a community of skilled developers and creative designers who can innovate and inspire the world.

COURSES SECTION:
Title:
What We Are Teaching

Create beautiful course cards for:

1. Software Development
- Programming Fundamentals
- Problem Solving
- Real World Projects

2. Web Development
- HTML
- CSS
- JavaScript
- React
- Modern Web Technologies

3. UI/UX Design
- User Research
- Wireframing
- Prototyping
- Design Systems

4. Graphic Art & Design
- Branding
- Logo Design
- Social Media Design
- Creative Visual Communication

INSTRUCTOR SECTION:
Title:
Meet The Founder

Display founder profile picture with gold border.

Founder Name:
BEEN UMAHR FHARUUQ

Founder Bio:
Passionate educator, software developer, and mentor committed to helping students achieve success through free education and practical learning experiences.

STUDENT SUCCESS SECTION:
Title:
Student Success Stories

Use uploaded teaching images as gallery samples.

Testimonials:

Amina Musa:
"Thanks to BEEN UMAHR FHARUUQ Academy, I learned web development and built my first professional website."

Yusuf Ibrahim:
"The software development training changed my career and helped me gain valuable skills."

Fatima Ahmad:
"I learned graphic design and now create professional designs for businesses."

Muhammad Sani:
"The teaching style is practical, easy to understand, and very inspiring."

GALLERY SECTION:
Title:
Learning In Action

Use uploaded classroom and training images as examples showing:
- Software Development Classes
- Coding Workshops
- Team Collaboration
- Student Training Sessions

STATISTICS SECTION:
Display animated counters:

1000+
Students Trained

50+
Courses

30+
Projects Completed

20+
Countries Reached

SOCIAL MEDIA SECTION:
Title:
Connect With Us

Facebook:
https://www.facebook.com/profile.php?id=61590373448315

TikTok:
https://tiktok.com/@been_umahr_fharuuq_03

YouTube:
https://youtube.com/@beenumahrfharuuq?si=OfKSwqp2u-LGEdEx

Telegram:
https://t.me/Been_Umahr_Fharuuq_03

CONTACT SECTION:
Title:
Contact Us

WhatsApp:
https://wa.me/qr/GTQQZU6ZL5FVE1

Telephone:
+2347045363746

CONTACT FORM:
- Full Name
- Email Address
- Subject
- Message
- Send Button

FEATURES:
- Fully Responsive
- Mobile Friendly
- SEO Optimized
- Fast Loading
- Professional Navigation Bar
- Smooth Scroll Effects
- Hover Animations
- Premium Gold and Green Styling
- Modern Footer
- Dark Overlay On Hero Image
- Professional Typography
- Accessible Design

FOOTER:
© 2026 BEEN UMAHR FHARUUQ Free Learning Website 2th World.
Empowering students through free education worldwide.

Generate complete production-ready HTML, CSS, JavaScript, responsive layouts, and beautiful animations."

ANALYZE: This project is a LANDING PAGE since it focuses on presenting an educational platform with a single-page layout, emphasizing marketing and information rather than complex app functionalities.

PLATFORM: Cursor - AI-powered code editor

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

PROJECT SETUP
The project will be organized into the following structure:
- index.html: Main HTML file for the landing page
- css/
  - styles.css: Main CSS file for styling
- js/
  - scripts.js: JavaScript file for interactivity
- images/: Directory for all images used in the website
- fonts/: Directory for Google Fonts or imported font files

DESIGN REQUIREMENTS (include these exact specs—typography, primary color, border radius—in your output):
- 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

CORE COMPONENTS
1. Hero Section: Full-screen background with title, subtitle, description, and buttons.
2. About Section: Description of the academy.
3. Mission Section: Statement of the mission.
4. Goal Section: Overview of the goals.
5. Courses Section: Cards for each course category.
6. Instructor Section: Founder profile with bio.
7. Student Success Section: Testimonials carousel.
8. Gallery Section: Images showcasing learning activities.
9. Statistics Section: Animated counters for key metrics.
10. Social Media Section: Links to social media profiles.
11. Contact Section: Contact information and a form.

IMPLEMENTATION APPROACH
1. Create the HTML structure in index.html.
2. Link to the CSS and JavaScript files.
3. Use CSS for styling components based on the design requirements.
4. Implement smooth scroll effects using JavaScript.
5. Add animations for button hovers and image transitions.

ARCHITECTURE CONSIDERATIONS
- Use semantic HTML5 elements for better SEO and accessibility.
- Structure CSS using BEM (Block Element Modifier) methodology for clarity.
- Keep JavaScript lightweight and modular for easier maintenance.

ERROR HANDLING
- Validate contact form inputs before submission.
- Provide user feedback for empty fields or incorrect formats.
- Handle image loading errors gracefully.

TESTING STRATEGY
- Test responsiveness on various screen sizes using developer tools.
- Ensure all links are functional and lead to the correct pages.
- Check form submission and validation through manual testing.

Please provide detailed, production-ready code that follows best practices for Cursor.