bold-bot

byAman Rai

Act as a Senior UI/UX Designer, Frontend Engineer, Three.js Developer, and Product Designer. Design and develop a world-class frontend for an AI-powered Excel Assistant. The frontend should feel like a premium SaaS application built by Apple, Vercel, Linear, Framer, and ChatGPT. The design must be clean, elegant, futuristic, interactive, responsive, and optimized for performance. Do NOT create a basic dashboard. Create a highly animated, immersive user experience. ================================== Theme ================================== • Light Mode Only • Pure white (#FFFFFF) background • Very soft shadows • Glassmorphism cards • Frosted blur effects • Rounded corners (20-24px) • Soft gradients • Blue accent (#2563EB) • Purple accent (#7C3AED) • Cyan highlights • Minimalistic aesthetic ================================== Animation Requirements ================================== Every page should feel alive. Implement: • Framer Motion animations • Smooth page transitions • Scroll reveal animations • Floating cards • Hover elevation • Magnetic buttons • Ripple click effects • Smooth loading skeletons • Animated progress bars • Morphing icons • Animated gradients • Glow effects • Mouse tracking effects • Floating particles • Cursor interactions Everything should animate smoothly at 60 FPS. ================================== 3D Effects ================================== Use Three.js / React Three Fiber. Include: • Floating 3D Excel Spreadsheet • Rotating AI Brain • Floating data cubes • Animated neural network • Interactive hologram • Floating charts • Animated nodes connected with lines • Moving particles • Glass spheres • Floating geometric objects Mouse movement should rotate objects. Objects should slowly float continuously. ================================== Landing Page ================================== Hero Section Large headline: "Analyze Excel Files with AI in Seconds" Subheading Upload your spreadsheet. Clean data. Generate insights. Visualize trends. Download professional reports. CTA Buttons Upload Excel Try Demo Hero Illustration A beautiful floating 3D Excel sheet connected to an AI brain with animated data flowing between them. Background Animated gradient mesh Floating particles Blur circles Glass effects ================================== Navigation ================================== Top Navbar Logo Home Features Dashboard Pricing About Login Get Started Navbar should become glassmorphism while scrolling. ================================== Dashboard ================================== Beautiful sidebar Animated icons Collapsible Smooth transitions Dashboard Cards Files Uploaded Rows Processed Columns Detected AI Insights Generated Reports Downloaded Storage Used Cards should animate when hovering. ================================== Upload Section ================================== Large drag-and-drop area 3D upload icon Animated border Glow while dragging Progress animation Upload percentage Success animation ================================== Dataset Preview ================================== Professional table Sticky headers Resizable columns Column sorting Search Pagination Column statistics Hover effects Smooth transitions ================================== Data Cleaning Page ================================== Interactive cards Missing values Duplicates Outliers Incorrect data types Date conversion Buttons Auto Fix Preview Undo Apply Changes Animated before-after comparison. ================================== Charts Page ================================== Beautiful interactive charts Bar Pie Line Area Scatter Histogram Heatmap Treemap Sunburst Charts should animate while loading. ================================== AI Insights Page ================================== ChatGPT-style cards Executive Summary Business Insights Recommendations Risk Analysis Opportunities Each insight should appear using typing animation. ================================== Export Page ================================== Download buttons Excel CSV PDF Word PowerPoint Each button should have hover animation. ================================== Loading Experience ================================== Create premium loading animations. Skeleton loaders Floating shimmer Animated progress indicators AI Thinking animation ================================== Micro Interactions ================================== Hover effects Button bounce Icon rotation Card lift Smooth shadows Animated borders Glass reflections Cursor glow ================================== Typography ================================== Use: Inter SF Pro Display Poppins Large bold headings Excellent spacing ================================== Icons ================================== Lucide React Heroicons Animated SVG icons ================================== Technology ================================== React Next.js Tailwind CSS TypeScript Framer Motion React Three Fiber Three.js Drei GSAP Shadcn UI Lucide React ================================== Performance ================================== Lazy loading Code splitting Image optimization GPU accelerated animations Responsive design Accessibility support ================================== Responsiveness ================================== Desktop Laptop Tablet Mobile No layout shifts. ================================== Overall Feel ================================== The application should look premium enough that users would believe it is a paid SaaS product worth $99/month. It should have the visual quality of: • ChatGPT • Vercel • Linear • Framer • Notion AI • Arc Browser • Stripe Dashboard Focus heavily on elegant animations, 3D interactions, premium glassmorphism, smooth transitions, modern UI components, and a delightful user experience. Generate production-ready React code with reusable components, clean architecture, and maintainable code. Redesign the sidebar navigation for the AI Excel Assistant. Keep ONLY these four navigation tabs: 1. Upload 2. Clean Data 3. Dashboard 4. AI Insights Remove all other sidebar items such as: - Home - Reports - Export - Settings - Profile - Pricing - Help - Documentation - Logout - Any additional menu items Sidebar Requirements: • Modern premium SaaS design • Light mode only • Glassmorphism effect • White background (#FFFFFF) • Active tab with blue gradient (#2563EB → #3B82F6) • Rounded corners (18-20px) • Soft shadow • Smooth hover animation • Animated active indicator • Lucide React icons for each tab • Framer Motion animations • Smooth page transition when switching tabs • Collapsible sidebar on tablet/mobile • Width: 260px • Icons and text perfectly aligned • Professional spacing • Premium typography using Inter font Workflow: 📤 Upload ↓ 🧹 Clean Data ↓ 📊 Dashboard ↓ 🤖 AI Insights Each tab should represent one step of the workflow. When a user clicks a tab: - Animate the transition smoothly. - Highlight the active tab. - Keep completed steps visually marked with a subtle check indicator. - Disable future steps until the previous step is completed (optional). Do not add any extra navigation items. The sidebar should contain ONLY these four workflow tabs and nothing else. create only frontend