cool-design

byIshika Saxena

You are a world-class UI/UX designer and frontend developer. Your task is to recreate a premium financial advisory website inspired by: https://wealth-clinic.com/ BUT upgrade it with modern design, smooth motion animations, and subtle 3D elements. ----------------------------------- 🎯 GOAL ----------------------------------- Create a clean, premium, trust-focused financial website with: - High-end fintech feel (like Stripe / Ramp / Wealthsimple) - Smooth animations (Framer Motion / GSAP style) - Interactive 3D elements (Spline / Three.js style) - Conversion-focused layout ----------------------------------- 🎨 DESIGN STYLE ----------------------------------- - Minimal + premium + futuristic - Colors: Deep navy, white, soft gold accents, gradients - Typography: Modern sans-serif (Inter / Poppins) - Lots of whitespace - Glassmorphism + soft shadows - Subtle glowing highlights ----------------------------------- 🧠 UX STRUCTURE ----------------------------------- 1. HERO SECTION - Fullscreen layout - Headline: Wealth management / financial freedom message - Subheading + CTA buttons (Get Started, Book Consultation) - Animated 3D element (floating finance objects / graph / globe) - Background gradient with motion - Smooth fade + slide-in animations 2. TRUST / SOCIAL PROOF - Client logos (auto-scrolling marquee) - Stats with count-up animation (AUM, clients served) 3. SERVICES SECTION - Cards with hover animations - Each card lifts in 3D on hover - Icons slightly rotate or glow - Example: Wealth Planning, Tax Planning, Investment Advisory 4. ABOUT SECTION - Split layout - Image with parallax scroll effect - Text fades in on scroll - Subtle 3D tilt on image 5. PROCESS / HOW IT WORKS - Step-by-step horizontal timeline - Animated connectors - Scroll-triggered reveal 6. CALCULATORS / TOOLS (optional upgrade) - Interactive widgets (EMI / SIP calculator feel) - Smooth input transitions 7. TESTIMONIALS - Carousel with soft transitions - Cards scale slightly on focus 8. BLOG / INSIGHTS - 3-card grid - Hover: image zoom + gradient overlay 9. CTA SECTION - Bold, centered - Animated gradient background - Pulsing button 10. FOOTER - Clean multi-column layout - Social links - Minimal but elegant ----------------------------------- ⚡ ANIMATIONS ----------------------------------- - Use smooth easing (ease-in-out, spring physics) - Scroll-triggered animations - Parallax effects - Micro-interactions on hover - Button ripple / glow effects - Page transitions (fade + slide) ----------------------------------- 🧊 3D ELEMENTS ----------------------------------- - Floating financial graphs / coins / charts - Subtle rotation following cursor - Lightweight (optimize performance) - Use as accent, not overload ----------------------------------- 📱 RESPONSIVENESS ----------------------------------- - Fully responsive - Mobile: simplified animations - Touch-friendly interactions ----------------------------------- ⚙️ TECH (if code is generated) ----------------------------------- - Next.js + Tailwind CSS - Framer Motion for animations - Optional: Three.js / Spline for 3D - Optimized performance (lazy loading, small bundles) ----------------------------------- ✨ EXTRA PREMIUM TOUCHES ----------------------------------- - Cursor-based hover effects - Section transitions feel seamless - Soft ambient background animations - Skeleton loaders for content - Accessibility friendly ----------------------------------- 🎯 OUTPUT ----------------------------------- - Clean, modular component-based code OR - Full design + layout structure ready to implement Make it feel like a modern fintech startup website, not a basic corporate site.