💰 Affluence: An Interactive Financial Journey 💰

“A dynamic, scroll-driven financial experience — where storytelling meets interactivity.”

---

---

🪄 Overview

Affluence: An Interactive Financial Journey redefines how users experience financial websites. It’s not just a landing page — it’s a narrative-driven digital experience, where the story of wealth and growth unfolds as users scroll.

✨ A continuous scroll transforms a coin’s journey from a pile to a wallet — symbolizing prosperity through interaction.

---

🚀 Features

💰 Scroll-Driven Coin Animation A smooth, physics-inspired coin travels across the page as users scroll, symbolizing financial growth.

🪙 Interactive Scrollytelling Each section animates dynamically — from hero intro to contact finale — creating a seamless narrative flow.

🖱️ Dynamic Background Motion Subtle parallax shifts respond to mouse movements, adding depth and immersion.

👥 3D Team Cards Team members appear in flipping 3D cards, powered by React state and CSS transforms.

💼 Expandable Service Cards Click to reveal detailed information using React hooks for smooth expand/collapse transitions.

📈 Animated Timeline The “About Us” section unfolds a timeline of company milestones with fade-in and slide-up reveals.

📱 Fully Responsive Optimized for all devices with adaptive layout and animation scaling.

---

🧰 Tech Stack

Technology	Purpose
⚛️ React	Core UI framework
🌀 Tailwind CSS	Styling and responsive utilities
🌌 Three.js	Hero section 3D visuals
⚙️ JavaScript (ES6+)	Logic, animation control, and interactivity
⚡ Vite	Fast build and development environment

---

🧑‍💻 Core Functionality

🪙 The Coin’s Journey

• Coin visibility begins after the hero section.
• Its position and rotation are tied to scroll percentage.
• As the user approaches the contact section, the coin seamlessly animates into a wallet icon.

🖱️ Interactive UI

• Scroll observers trigger smooth fade-ins and slide-ups for content blocks.
• React state manages expanding service cards and flipping team cards.

🌌 Dynamic Background

• The background subtly moves according to mouse coordinates, creating a premium sense of motion and depth.

---

🚀 Getting Started

1. Clone the Repository

   git clone [https://github.com/yourusername/affluence.git](https://github.com/yourusername/affluence.git)
   cd affluence

2. Install Dependencies

   npm install

3. Run the Development Server

   npm run dev

4. Build for Production

   npm run build

---

🧩 Customization Tips

• Adjust Animations: Tweak scroll thresholds and animation speeds in the main useEffect logic.
• Theme: Modify tailwind.config.js for your project's color palette and typography.
• 3D Model: Replace the hero elements with your own brand-specific Three.js model.
• Content: Add or remove "journey stages" in the scroll timeline to fit your brand story.

---

🧠 Example React Snippet

Here's a look at the core scroll-tracking logic:

useEffect(() => {
  const handleScroll = () => {
    const scrollY = window.scrollY;
    const scrollPercent = scrollY / (document.body.scrollHeight - window.innerHeight);
    setCoinPosition(scrollPercent * 100);
    setRotation(scrollPercent * 360);
  };
  
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

---

📜 License

This project is released under the MIT License — free to use, modify, and share.
See the LICENSE.md file for details.

---

👤 Author

💰 “Design finance like a journey — not a transaction.” 💰