XStore Grocery Mega Market is a high-end, demo-ready
front-end web project that showcases a complete online
supermarket experience. It is designed as a pixel-rich,
motion-driven landing page that demonstrates how a modern
grocery brand can present its products, categories,
deals, and content in a clean, conversion-focused layout.

The project replicates the structure and feel of the
original XStore Elementor “Grocery Mega Market” demo,
but goes further with a wider layout, an upgraded design
system, smoother animations, and reusable component
architecture suitable for production extension.

KEY FEATURES
————
• Full landing page with all major sections:
– Top announcement bar
– Sticky header with navigation, search, and cart
– Animated hero banner with floating elements
– Deal of the Month block
– Scrolling marquee strip
– Product categories grid
– Editor’s picks
– Promotional banners
– Most-selling products carousel
– Today’s Special highlight
– Articles / blog preview
– FAQ accordion
– Rich multi-column footer

• Premium motion design powered by Framer Motion:
– Scroll-triggered reveal & stagger animations
– Spring-based hover physics on product cards
– Floating background blobs and slow-rotating accents
– Smooth page-wide transitions

• Floating “Demo Website” popup (bottom-right) with
glassmorphism, persistent visibility, bounce motion,
and clickable developer branding logos
(pabitra.net & Brown Fox IT).

• Wide, modern layout (up to 1720px) for an immersive
big-screen experience while remaining fully responsive
down to mobile breakpoints.

• Semantic design tokens (HSL-based) defined in
index.css and tailwind.config.ts — no hard-coded
colors in components, making theming easy.

• Demo image set bundled with the build (hero shots,
category tiles, product photos, blog thumbnails,
promotional visuals, and brand logos).

TECH STACK
———-
• React 18 + TypeScript
• Vite 5 (build & dev server)
• Tailwind CSS v3 with custom design tokens
• shadcn/ui component library
• Framer Motion (animations)
• Lucide React (icons)

PROJECT STRUCTURE (HIGHLIGHTS)
——————————
src/
├── pages/Index.tsx → Main landing page
├── components/site/ → All page sections
│ ├── Header, Hero, Categories, MostSelling,
│ ├── DealOfMonth, TodaysSpecial, Articles,
│ ├── FAQ, Footer, DemoPopup, Reveal, …
├── components/ui/ → shadcn UI primitives
├── data/products.ts → Demo product catalog
├── assets/ → Demo images & logos
└── index.css → Design tokens & keyframes

DEPLOYMENT
———-
The project ships as a static build (Vite output in
/dist) and can be deployed to any static host:
cPanel/Apache, Netlify, Vercel, Cloudflare Pages, etc.
An .htaccess file is included for SPA routing on
Apache/cPanel hosts.

STATUS
——
This is a front-end DEMO project. The UI, layout,
animations, and demo content are complete. A backend
(authentication, cart persistence, checkout, orders,
admin) can be added later — the codebase is structured
to make that integration straightforward.

CREDITS
——-
Designed & developed by:
• pabitra.net
• Brown Fox IT