Electronic Mega Market is a high-end, demo e-commerce website
crafted for an electronics retail brand. The project re-imagines a
traditional online electronics store with a contemporary visual
language: wide layouts, dramatic typography, soft gradients,
glassmorphism cards, and motion-driven user experiences. Every
section is built to feel premium, fast, and engaging on both
desktop and mobile devices.

The website is currently a frontend-only build with demo images and
placeholder content. The architecture is intentionally modular so
that a backend (product catalog, cart, checkout, authentication,
admin dashboard) can be integrated cleanly in the next phase.

PURPOSE & GOALS
—————
– Showcase a modern, conversion-focused storefront design for
electronics, gadgets, and smart-home products.
– Demonstrate advanced frontend techniques: scroll animations,
staggered reveals, hover micro-interactions, and responsive
layout patterns.
– Serve as a ready-to-extend foundation for a real online store —
developers only need to wire up data sources, payments, and auth.
– Act as a portfolio piece highlighting design system thinking,
component reusability, and motion design.

KEY FEATURES
————
1. Full Homepage Experience
– Sticky header with category navigation and search
– Hero section with featured products and promotional banners
– Categories grid with iconography
– “New Arrivals” and “Recently Launched” product carousels
– Mega Market split-banner promotions
– Deals section, Freedom banner, brand showcase
– Articles/blog teaser section
– Newsletter signup with animated CTA
– Trust/Advantages strip (shipping, warranty, support, returns)
– Multi-column organized footer with payment badges

2. Motion & Interaction Design
– Custom `useReveal` hook powered by IntersectionObserver
– Scroll-triggered fade, slide, and stagger animations
– Hover lift, tilt, glow-pulse, shimmer, and float effects
– Smooth transitions throughout (300–500ms easing curves)
– Floating scroll-to-top button

3. Branding System
– Top demo notification bar (full-width, dismissible)
– Floating glassmorphism demo popup (bottom-right) crediting
the development partners with clickable logos
– Fully responsive — popup shrinks intelligently on mobile

4. Design System
– Semantic HSL color tokens defined in `index.css`
– Tailwind CSS v3 with extended theme (colors, animations,
keyframes, container widths up to 1600px)
– Reusable UI primitives via shadcn/ui
– Consistent typography pairing for display and body text
– Dark “ink” surfaces with primary accent and glow variants

5. Performance & SEO
– Built with Vite 5 — fast HMR, optimized production builds
– Lazy-loaded images
– Semantic HTML structure with proper heading hierarchy
– Lightweight (~110 KB gzipped JS bundle)
– .htaccess included for SPA routing, gzip, and asset caching

TECHNOLOGY STACK
—————-
– Framework: React 18
– Language: TypeScript 5
– Bundler: Vite 5
– Styling: Tailwind CSS v3 + custom CSS variables
– Components: shadcn/ui (Radix-based primitives)
– Icons: Lucide React
– Routing: React Router
– Animations: Pure CSS keyframes + IntersectionObserver
– Deployment: Static hosting (cPanel, Netlify, Vercel, etc.)

PROJECT STRUCTURE (HIGHLIGHTS)
——————————
– src/components/store/ → All homepage section components
(Header, Hero, Categories, NewArrivals, RecentlyLaunched,
MegaMarket, DealsSplit, Brands, Articles, Newsletter,
FreedomBanner, Advantages, Footer, ProductCard, SectionTitle)
– src/components/branding/→ DemoBar and DemoPopup components
– src/components/ui/ → shadcn/ui primitives
– src/hooks/useReveal.ts → Scroll-reveal animation hook
– src/assets/ → 20+ demo product/banner/logo images
– src/pages/ → Index and NotFound routes
– src/index.css → Design tokens, keyframes, utilities
– tailwind.config.ts → Extended theme and animation config

DEMO ASSETS INCLUDED
——————–
– Hero/banner images: drone, VR headset, headphones, fan,
AirPods, smart case, wireless charger, portable speaker,
woman with headphones lifestyle shot
– Product images: phones, laptops, tablets, cameras,
controllers, JBL speakers, headphones, smart thermostats
– Brand/partner logos: pabitra.net, Brown Fox IT

WHAT’S NEXT (ROADMAP)
———————
– Backend integration (product database, inventory, orders)
– User authentication (signup, login, profile, wishlist)
– Shopping cart and checkout flow
– Payment gateway (Stripe, PayPal, or local provider)
– Admin dashboard for catalog and order management
– Search with filters, sorting, and pagination
– Customer reviews and ratings
– Multi-language and multi-currency support

CREDITS
——-
– Designed & developed by: pabitra.net
– In partnership with: Brown Fox IT
– Status: Demo / Frontend complete
(Backend integration planned)