Objective: Generate a React-based NGO website matching https://rarathemesdemo.com/benevolent-pro-4/
with dynamic animations
Design Requirements:
Theme: Primary red (#E63946), Accent yellow (#FFD166), White background
Font: Montserrat (Google Font import)
Layout: Spacious sections with 120px vertical padding, max-width 1280px container
Animations: Framer Motion for all scroll/hover interactions
Responsive: Mobile-first (stacked columns <768px)
Sections to Generate:
Hero Section:
Full-bleed background video (placeholder: <video autoPlay loop muted/>) with dark overlay
Animated headline: "Empowering Communities" (fade-up 0.5s delay)
Two CTAs:
• "Donate Now" (red button with hover:scale-105)
• "Join Volunteers" (yellow outline button)
Causes Grid (3-column):
[Image Container 4:3]
Title (e.g. "Clean Water Project")
Progress bar (red, 60% width)
"Learn More" link (yellow underline on hover)
Animation: Staggered fade-up per card
Donation Block:
Tiered options: $25/$50/$100 (yellow border on selected)
Recurring donation toggle
Secure payment badges (SVG placeholders)
Testimonials Carousel:
Circular image containers (1:1 ratio)
Quote text with yellow quotation marks
Auto-rotate every 5s (Framer Motion animate)
Newsletter Signup:
Email input + "Subscribe" button
Micro-animation on submit (checkmark ✓)
Required Components:
Sticky header with mobile hamburger
Animated progress bars
Auto-rotating testimonial carousel
Newsletter form with validation
Pages required:
/contact page- with a nicely made form with an image (both 50-50 vertically divided on screen for desktop only)
/gallery: containing all the gallery images fill dummy data for now. MAke sure they are nicely animated using framer motion or any library that you want to use.
I'll create a comprehensive NGO website based on the Orphange design you've shown, but with the red and yellow color scheme you specified, along with Framer Motion animations and all the requested features.
I've created a comprehensive NGO website based on the Orphange design with all the features you requested:
#E63946) and accent yellow (#FFD166) as requestedThe website captures the essence of the original Orphange design while implementing your specific color scheme and adding modern animations and interactions. All components are fully responsive and include accessibility features.
Refine the React-based NGO website project, initially designed to mirror the functionality and aesthetic of https://rarathemesdemo.com/benevolent-pro-4/, with a focus on enhancing user engagement and modern design principles. The core objective remains the creation of a dynamic, visually appealing website, but with significant updates to the design, content structure, and interactive elements.
Design and Theme Modifications:
#E63946) and a secondary palette of yellow (#FFD166). Eliminate all black elements to align with the new theme.Content and Layout Adjustments:
Interactive and Animated Elements:
<video autoPlay loop muted/>) with a dark overlay.Component Requirements:
Technical Specifications:
Creative Freedom:
Remove the donation section too. We will add upi section there for the same. So make a section with upi id where we place our qr-code.
I'll refine the NGO website with your enhanced requirements, focusing on modern design, interactive elements, and the new UPI payment section.
I've successfully refined the NGO website with all your requested enhancements:
#E63946) and yellow (#FFD166) throughout, eliminating all black elementsThe website now features a completely modern design with engaging animations, interactive elements, and a seamless user experience that encourages engagement and donations through the new UPI payment system.
Refine the React-based NGO website project, initially designed to mirror the functionality and aesthetic of https://rarathemesdemo.com/benevolent-pro-4/, with a focus on enhancing user engagement and modern design principles. The core objective remains the creation of a dynamic, visually appealing website, but with significant updates to the design, content structure, and interactive elements.
Design and Theme Modifications:
#E63946) and a secondary palette of yellow (#FFD166). Eliminate all green and black elements to align with the new theme.Content and Layout Adjustments:
Interactive and Animated Elements:
<video autoPlay loop muted/>) with a dark overlay. Ensure the content is fully visible and not cut off.Component Requirements:
Technical Specifications:
Creative Freedom: