Artist Landing Page - Copy this React, Mui Component to your project
Landing Page: Hero Section: Fullscreen background showcasing rotating, high quality images or videos related to the user's artwork (AI should auto generate placeholders). Overlay text introducing the artist/creator with bold typography (e.g., "Discover the Art of [User's Name]"). A scroll indicator or subtle animated icon suggesting users explore further. Navigation Bar: Minimalist, sticky header with options for Home, Portfolio, Store, About, and Contact. Responsive design so that on mobile, the navigation becomes a collapsible hamburger menu. Ensure smooth scrolling effect between sections. Portfolio Section: Grid Layout: AI should generate a responsive grid layout that showcases the portfolio pieces in a gallery format. Images are presented with subtle hover animations (e.g., zoom in, fade, or color saturation). Each artwork should have a lightbox feature, allowing users to click and view it in detail. Descriptions and titles should appear underneath the images. Ensure the grid can adjust fluidly between mobile and desktop views (responsive design). Interactive Animations: Subtle Hover Effects: As users hover over buttons, images, and text, animations such as fading, sliding in, or soft enlargements should trigger to engage interaction. Use animations sparingly to avoid clutter while enhancing the aesthetic. Scroll Based Animations: Parallax effects on the background as users scroll down the page, providing depth to the page. Smooth transitions between sections using fades or subtle sliding elements. About Section: Bio and Artistic Statement: Center aligned text box with artist's bio and artistic statement, written in clear and elegant font. AI can generate placeholder text and suggest a template for the biography. This section should also include a profile picture with an artistic frame, potentially animated to fit the website’s overall style. Online Store: Product Display: A clean, minimalistic product display grid for artworks for sale. Each product should have a hover state revealing details like price and quick view options. Clicking on any artwork should open a detailed product page with multiple images, a description, price, and an add to cart button. Cart and Checkout: Simple cart icon on the navigation bar, dynamically updating when items are added. A smooth, streamlined checkout process, integrating popular payment methods. Contact Section: Contact Form: A simple and clean form allowing users to contact the artist (fields: Name, Email, Message). Include basic validation for form submission. AI can generate backend code to handle form submission (using email services such as SMTP or integration with API services). Social Links: Clearly visible social media icons (e.g., Instagram, Behance) linking to external profiles. Consider hover animations for each icon (e.g., soft glow or color change). Additional Functionalities: Search Bar: A minimalistic search bar allowing users to search through portfolio items and store products. Language Toggle: A simple toggle switch for language selection, like the one seen on Paumau.art (EN/FR). Dark/Light Mode: Optional feature where users can switch between dark and light themes with a toggle button. Visual Aesthetic & Branding: Typography: Clean, bold sans serif fonts for headings. Serif or modern sans serif for body text, ensuring readability while maintaining elegance. Color Palette: A modern, muted color palette with occasional vibrant accents that highlight important areas. Ensure sufficient contrast for accessibility. Logo and Favicon: Placeholder for custom logo and favicon placement. Responsive Design: Desktop and Mobile Views: AI should generate code for fully responsive design across all pages. Grid elements should resize fluidly between different screen sizes (desktop, tablet, mobile). Ensure menu, buttons, and text are optimized for mobile use (larger touch areas, simplified layout).
