opal-painting

bySaurav Swain

# Create a Premium Painting & Art Learning Platform Build a modern, premium, highly animated website using: * Vite + React (SPA) * React Router DOM for page navigation * TypeScript * Tailwind CSS * Framer Motion * GSAP + ScrollTrigger * React Three Fiber (Three.js) * React Icons / Lucide Icons Do NOT use Next.js. The website should be a Single Page Application with multiple routes managed using React Router DOM. ## Overall Design Direction Create a luxurious, artistic, premium art-gallery experience. Theme Requirements: * Fully light theme * Soft white background (#FFFFFF) * Light cream sections (#FAF7F2) * Light beige accents (#F5EFE6) * Elegant dark text (#222222) * No dark mode * Minimalist premium design * Large whitespace * Modern typography * Smooth animations everywhere The design should feel like: * Modern art gallery * Premium painting exhibition * Creative art studio * Luxury design portfolio Avoid looking like a typical ecommerce website. --- # Website Pages ## Home Page ### Hero Section (MOST IMPORTANT) Create an immersive cinematic 3D scroll-driven hero section. This section should occupy the first full viewport and continue for multiple scroll scenes. Build it using: * React Three Fiber * Three.js * GSAP ScrollTrigger * Framer Motion ### Hero Animation Concept The user should feel like traveling through an artist's creative world. Scene 1: A premium floating paintbrush slowly rotates in 3D. Paint particles float around. Text appears: "Every Stroke Tells A Story" Smooth fade and reveal animations. --- Scene 2: Camera moves forward. Floating paint tubes and color palettes appear. Paint splashes animate through the scene. Text: "Discover Original Artwork" --- Scene 3: Large floating canvas rotates in 3D. Brush strokes dynamically reveal artwork. Text: "Learn From Professional Artists" --- Scene 4: Several framed paintings float in space. Camera passes between them. Parallax depth effect. Text: "Create. Learn. Inspire." --- Scene 5: The camera enters a virtual gallery. Premium CTA buttons appear. Buttons: * Explore Paintings * Explore Courses --- Hero Effects Requirements * 3D depth * Floating objects * Parallax movement * Paint particles * Scroll-driven camera movement * Smooth transitions * Motion blur feeling * Professional cinematic experience * Premium art-gallery atmosphere The hero section should feel like an Apple product launch mixed with an interactive art exhibition. --- # Home Page Sections ## Featured Paintings Section Display: * Popular Paintings * Recent Paintings Card Design: * Large artwork image * Hover zoom effect * Subtle shadow * Premium border radius Animation: * Cards reveal on scroll * Staggered entrance * Hover lift effect Button: "View All Paintings" --- ## Painting Courses Section Display featured courses. Each course card should include: * Course image * Course title * Instructor * Duration * Price Animations: * Fade up * Hover scale * Floating card effect Button: "View All Courses" --- ## Student Gallery Section Create a beautiful masonry gallery. Display student artwork. Features: * Masonry layout * Hover animation * Image zoom * Smooth reveal Section heading: "Student Creations" --- ## Testimonials Section Create premium animated testimonials. Features: * Infinite horizontal scrolling * Floating cards * Star ratings * Customer image Animations: * Smooth auto-scroll * Hover pause --- ## CTA Section Large artistic section. Text: "Start Your Artistic Journey Today" Buttons: * Browse Paintings * Join Courses Background: Light artistic paint texture. --- ## Footer Include: * About * Contact * FAQ * Privacy Policy * Social Links Elegant minimalist design. --- # Shop Page Route: /shop Features: * Painting grid * Search * Filter * Category filter * Price filter * Sorting Card Animations: * Hover lift * Image zoom * Smooth transitions Product Details Modal/Page Display: * Multiple images * Painting information * Price * Artist * Description Buttons: * Add To Cart * Buy Now --- # Courses Page Route: /courses Display all courses. Course Card: * Thumbnail * Instructor * Duration * Price Course Detail Page: * Overview * Curriculum * Instructor * Reviews * FAQ * Purchase Button --- # Student Gallery Page Route: /gallery Create a premium Pinterest-style gallery. Features: * Masonry layout * Category filters * Smooth animations * Fullscreen artwork view --- # Testimonials Page Route: /testimonials Display all customer feedback. Features: * Ratings * Comments * Artwork images * Pagination Add Feedback Form: * Name * Rating * Message --- # Chatbot Floating AI assistant at bottom-right. Capabilities: * Course questions * Painting information * General FAQs * Contact support Use modern chat UI. Smooth open/close animation. --- # Admin Panel Route: /admin Do not create customer dashboard. Only create Admin Panel. Admin Features: ### Dashboard * Total Paintings * Total Courses * Total Orders * Total Reviews Charts and analytics. --- ### Painting Management CRUD Fields: * Title * Artist * Price * Description * Category * Images --- ### Course Management CRUD Fields: * Title * Instructor * Duration * Price * Thumbnail --- ### Student Gallery Management * Approve Artwork * Reject Artwork * Delete Artwork --- ### Testimonial Management * Approve Review * Reject Review * Delete Review --- # Global Animation Requirements Every section should animate while scrolling. Use Framer Motion and GSAP. Implement: * Fade Up * Fade In * Slide Left * Slide Right * Scale In * Stagger Animation * Parallax Effects * Floating Elements * Reveal On Scroll * Smooth Page Transitions Use Intersection Observer for performance. --- # Navigation Use React Router DOM. Routes: / /shop /courses /gallery /testimonials /admin Create animated route transitions. --- # Performance Requirements * Lazy load pages * Lazy load images * Responsive design * Mobile optimized * Tablet optimized * Desktop optimized Maintain 60fps animations. --- # Visual Goal The final website should feel like: A premium art gallery + modern ecommerce store + creative learning platform. The first impression must come from the immersive 3D scroll-driven hero section with floating brushes, paint splashes, rotating canvases, cinematic camera movement, and beautiful artistic storytelling. ------------------------------------------ create with plain Vite + React SPA and use the react-route-dom to navigation, don't use TanStack. in the hero section do the 3D animation using paint, brush, color etc and also add the parallex effect while schrolling in hero section