Landing Case Work (CPA Uzbekistan Case Study Page)

This repository contains the refactored, production-ready landing page files for the CPA case study project. The codebase has been fully modularized, separating styling (CSS) and interactivity scripts (JS) from the semantic HTML structure to allow frontend developers to easily integrate it into any modern stack (React/Next.js, Vue/Nuxt.js, etc.).

📁 Directory Structure

├── index.html                  # Main landing page layout (Centered layout)
├── side.html                   # Alternative layout (Sidebar desktop layout)
├── styleguide.html             # UI Styleguide & component playground
├── CAROUSEL_GUIDE.md           # Carousel developer integration guide
├── README.md                   # This handoff documentation
└── assets/
    ├── css/
    │   └── style.css           # Extracted unified styling rules
    ├── js/
    │   ├── carousel.js         # Stacked card carousel logic
    │   ├── main.js             # Global interactivity (observers, counters, dialogs)
    │   └── styleguide.js       # Toast & copy helpers specific to the UI guide
    └── (images & pngs)         # Content assets, screenshots, and visual elements

---

🚀 Key Features & Interactive Components

1. Stacked Card Carousel (assets/js/carousel.js)

• Visual style: Desktop & mobile custom stacked creative cards carousel with smooth sliding animations and interactive controls (arrows and pagination indicator dots).
• Mobile-friendly: Optimized arrow alignments (left-2 / right-2 positioning on small screens) to prevent clipping. Jitter-free transition callbacks using native CSS animations.
• Handoff integrations: Refer to CAROUSEL_GUIDE.md for pre-built code adapters in React / Next.js (using hooks/state) and Vue 3 (using composition API).

2. Auto-Counting Summary Stats (assets/js/main.js)

• Smooth, easing-based numeric increment count-up animations for key metrics (Spend, Revenue, Profit, ROAS, Leads, Approve) on page load.
• Centralized in main.js, targeting both index.html and side.html element IDs automatically.

3. Responsive Reading Progress & Floating Scroll-To-Top

• Radial SVG progress rings on the bottom scroll-to-top indicator showing reading progression percentage.
• Adjusts dynamically to screen height and avoids overlapping with the footer block on mobile.

4. Interactive Lightbox

• Image preview overlay with smooth transitions (opacity-300) and backdrop filters. Clicking any prose image (excluding avatars) expands it into full screen.

5. Smart Dark/Light Theme Switching

• Global light mode system utilizing CSS filter inversions:

  html.theme-light body { background: #f0f0f0 !important; }
  html.theme-light .animate-orb,
  html.theme-light header,
  html.theme-light #mobile-menu,
  html.theme-light #page-wrapper {
    filter: invert(1) hue-rotate(180deg);
  }

  This achieves light mode automatically without double-coding colors.

---

🎨 UI Styleguide (styleguide.html)

The interactive styleguide page showcases all buttons, input elements, type systems, and color variables.

• Developers can inspect color variables or copy code blocks directly with a single click.
• Includes toast feedback on successful copies powered by assets/js/styleguide.js.

---

💻 Running & Deploying Locally

Local Development

You can run a simple local web server to inspect and work on the files:

# Using Python
python3 -m http.server 8000

# Using Node.js (npx)
npx serve .

Deploying to Production (Vercel)

The project is configured for Vercel. To deploy, run:

# Deploy to production environment
vercel --prod --yes