Avone is a high-fidelity demo e-commerce website modeled after the Avon Premium
Indian Ethnic Fashion Shopify store. It serves as a portfolio piece and client
demonstration of modern frontend capabilities, emphasizing bold visual design,
fluid motion, and responsive layout engineering.

THEME & DESIGN
– Color Palette: Pure red primary (#d92323) with cream/sand backgrounds and
near-black text, creating a premium, festive Indian aesthetic.
– Typography: Playfair Display for elegant headings, Inter for clean body
text, and Italianno for decorative script accents.
– Layout: Full-width sections with generous spacing, max-width containers,
and a refined 12-column responsive grid.

SECTIONS & CONTENT
1. HEADER — Sticky navigation with logo, menu links, icons, and mobile drawer.
2. HERO — Full-width hero banner with a bridal fashion image and CTA buttons.
3. CATEGORIES — Grid of product categories (Sarees, Lehengas, Kurtas, etc.)
with hover zoom animations.
4. NEW ARRIVALS — Product cards with “Add to Cart” functionality, star
ratings, quick-view modals, and a functional mini cart with quantity
controls and animated slide-out panel.
5. BANNER — Promotional saree banner with parallax-style text.
6. FEATURES — Trust badges (Free Shipping, Easy Returns, Support, Secure).
7. FESTIVE COLLECTION — Curated festive wear grid with overlay titles.
8. MENSWEAR — Men’s ethnic fashion section with kurta and sherwani cards.
9. ABOUT — Brand story section with mission statement and imagery.
10. PROMO MARQUEE — Scrolling promotional text ticker.
11. TESTIMONIAL — Customer quote with background image.
12. FOOTER — Full footer with newsletter, links, social icons, and copyright.

ANIMATIONS & MOTION EFFECTS
– Scroll-triggered section reveals using Framer Motion.
– Staggered fade-in/up animations for grids and lists.
– Hover zoom and scale effects on cards, buttons, and images.
– Floating animation on the demo badge.
– Smooth cart panel slide-in/out transitions.
– Pulsing status indicator on the demo badge.

DEMO BADGE (Floating Card)
– Fixed bottom-right glassmorphism card with developer branding.
– Displays “Pabitra.net” and “Brown Fox IT” logos with click-to-visit links.
– Non-intrusive, dismissible with a close button.

TECH STACK
– React 19 + TypeScript
– Tailwind CSS v4 (utility-first styling)
– Framer Motion (animations)
– Lucide React (icons)
– Vite (build tool)

DEPLOYMENT
– Packaged as a static SPA (Single Page Application) for cPanel hosting.
– Includes .htaccess for Apache SPA routing and asset caching.
– Delivered as both .zip and .tar.gz archives.

PURPOSE
– Client demonstration and portfolio showcase.
– Sales tool for web development services by Pabitra.net and Brown Fox IT.
– Illustrates modern React UI/UX capabilities without backend dependencies.