AyanTheme

1. Overview

Thank you for purchasing AyanTheme! AyanTheme is a modern e-commerce template built on Next.js, designed for online stores that need a fast, animated, premium storefront out of the box.

AyanTheme ships with three complete, independent demos — Fashion, Beauty, and Jewelry — each with its own layout style, color palette, and product-page variations, so you can launch a store that matches your niche without starting from scratch. It also includes a full Admin Dashboard with its own separate login, for managing products, orders, promotions, shipping and users. The interface is fully translatable and ships with English and Arabic (full RTL) out of the box.

2. What's Included

Also included:

• Complete Next.js (App Router) source code, ready to run
• Fully typed TypeScript source — models, DTOs and components
• 180+ reusable, documented UI components
• 40+ ready pages across shop, account, admin and content (cart, checkout, wishlist, compare, account, orders, addresses, blog, FAQ, help center, 404, and more)
• This documentation, install/configure/customize/deploy guides
• Icons, placeholder images and multilingual (EN/AR) JSON example data
• Dark & Light mode, color palettes, full RTL support

3. Requirements

AyanTheme is a frontend template — no database or backend server is required to run the included interface. Authentication uses signed JWT session cookies (no database adapter), and storefront content is served from the included placeholder JSON data until you connect your own API.

4. Installation

Follow these steps exactly, in order:

1. Extract the ZIP file you downloaded to a folder on your computer.
2. Open a terminal (Command Prompt, Terminal, or your editor's built-in terminal) inside the extracted project folder.
3. Install dependencies:

   npm install

   or yarn install / pnpm install, depending on the package manager you prefer.

4. Create your environment file by copying the example file:

   cp .env.example .env.local

   Then open .env.local and fill in the required values. See the table below.

5. Run the project locally:

   npm run dev

   Open http://localhost:3000 in your browser.

6. To create a production build:

   npm run build
   npm run start

Environment Variables

5. Project Structure

AyanTheme follows a clean, domain-driven folder structure so related code stays together and is easy to customize:

src/
├── demos/                  # Demo-specific pages & UI (one folder per demo)
│   ├── fashion/
│   ├── beauty/
│   └── jewelry/
├── domains/                 # Shared business logic, organized by feature
│   ├── cart/
│   ├── product/
│   └── shipping/
└── shared/                  # Shared components, hooks, and utilities

You generally won't need to touch anything inside domains/ or shared/ unless you're changing core functionality. Day-to-day customization (colors, content, layout tweaks) happens inside demos/{demo-name}/.

6. Switching Between Demos

Each demo lives at its own route under a locale prefix (e.g. en, ar) — there is no build-time flag or environment variable to set. All three demos run side by side from the same codebase:

Within a demo, each page that has multiple style variants (Home, Product, About, Contact) is selected with a style query parameter. The first style is the default and needs no parameter:

/en/fashion                      → Home, Style 1 (default)
/en/fashion?style=style2         → Home, Style 2
/en/fashion?style=style3         → Home, Style 3
/en/fashion/product/2?style=style2 → Product page, Style 2
/en/fashion/about?style=style3      → About page, Style 3

Pages with a single layout — Shop/product list, FAQ, Help Center, and Size Guide — don't take a style parameter, e.g. /en/fashion/search, /en/fashion/faq, /en/fashion/help-center, /en/fashion/size-guide.

7. Deployment

Because AyanTheme is a Next.js application, it does not use a one-click WordPress-style installer. It needs to be built and hosted on a Node.js-capable environment.

Option A — Deploy to Vercel (recommended, easiest)

1. Create an account at vercel.com.
2. Import your project (via Git or by uploading the folder).
3. Add your environment variables from .env.local in the Vercel project settings.
4. Click Deploy — Vercel builds and hosts the site automatically.

Option B — Deploy to your own Node.js server

1. Run npm run build on the server (or upload the built output).
2. Run npm run start to serve the production build.
3. Use a process manager such as PM2 to keep it running, and a reverse proxy (Nginx) if needed.

8. Customization

8.1 Global Colors & Theme Tokens

All color values are centralized so you can re-skin the entire template without touching component code:

• _colors.scss — raw color palette variables.
• _light.scss — the $light-themes map, mapping semantic tokens (primary, secondary, accent, base, text, surface, background, and a lightest–darkest scale) to the raw palette.
• _dark.scss — the equivalent $dark-themes map used automatically when Dark Mode is on.
• Dark mode is handled separately through Tailwind CSS dark-mode utility classes.

Which palette is active is controlled by a single CSS class on <body> — matching the palette's key in $light-themes/$dark-themes (default, theme2, theme3, theme4, theme5). This class comes from settings.theme (see appSettings / the initial settings API) and is applied in the root layout: <body className={settings.theme}>. To re-theme a demo by default, change that value; to let visitors switch palettes live, they can use the floating Theme Switcher panel (palette icon, bottom of the screen) — built from ThemeSwitcher and StyleSwitcher in domains/core/presentation/components/, which also toggles Dark Mode and RTL and persists the palette choice to localStorage.

To re-theme a demo, update the token values in _light.scss — every component that references these tokens updates automatically.

8.2 Fashion Demo Customization

• Product page style variant: switch live via the floating Theme/Style Switcher panel (see 8.1), or link directly using the ?style=styleN query parameter — see Section 6.
• Look-book gallery images/content: src/demos/fashion/pages/home/style2/lookbook.tsx (Style 2) and src/demos/fashion/pages/home/style3/editoral-lookbook.tsx (Style 3).
• Category slider content: src/demos/fashion/pages/home/style1/product-category.tsx (Style 1) and src/demos/fashion/pages/home/style2/product-category-tab.tsx (Style 2).

8.3 Beauty Demo Customization

• Hero zoom section content/media: the main hero/slider component under src/demos/beauty/pages/home/style{N}/ — e.g. main-slider-video.tsx (Style 2) or main-slider-half-blur.tsx (Style 3).
• Brand story scroll-stack content: src/demos/beauty/pages/home/style2/brand-story.tsx.
• Style variant (Luxe Noir / Clean Glow / Bold Retro): switch live via the floating Theme/Style Switcher panel, or the ?style=styleN query parameter — see 8.1 and Section 6.

8.4 Jewelry Demo Customization

• Color palette variant (Aurum / Lumière / Noir): switch live via the floating Theme/Style Switcher panel, or the ?style=styleN query parameter — see 8.1 and Section 6.
• Pinned storytelling section content: src/demos/jewelry/pages/home/style3/scroll-storytelling.tsx.

8.5 Animations (GSAP & ScrollTrigger)

Scroll-based animations — pinned sections, scroll-stacking cards, and parallax image reveals — are built with GSAP and ScrollTrigger. Each animated component creates its ScrollTrigger inside a gsap.context() and cleans it up with ctx.revert() on unmount, so animations don't leak between page navigations. To disable or reduce animation on a specific component, open that component's file and either comment out the gsap.context()/useEffect block that registers its ScrollTrigger tween, or replace the tween's values with a static end-state (e.g. set the target element's final opacity/position directly instead of animating to it).

Smooth scrolling is powered by Lenis, synced to GSAP's ticker (gsap.ticker.add()) so ScrollTrigger positions stay accurate. Scroll weight/inertia is controlled by Lenis' lerp value — lower values (around 0.04–0.06) give a slower, heavier scroll feel; higher values feel snappier. Adjust it in src/shared/utils/lenis-instance.ts.

8.6 Sliders (Swiper.js)

Product and content sliders use Swiper.js. Slide count, spacing, and breakpoints can be adjusted in each slider component's Swiper configuration props.

9. Languages & RTL

Text is managed through next-intl with locale-prefixed routes (/en, /ar), so all UI copy is translatable without editing component code. AyanTheme ships with English and Arabic (including full RTL) today; more locales can be added over time.

1. Translation strings live in public/locales/{locale}.json — e.g. public/locales/en.json and public/locales/ar.json.
2. To add a new language, duplicate the file, translate the values, and register the new locale in i18n.ts (the routing config imported as @/root/i18n).
3. RTL is automatic for right-to-left locales (Arabic) — layout, icons and motion mirror without extra configuration once the locale is registered.

10. Third-Party Assets & Credits

The following third-party libraries and assets are used in this template. If you replace any included placeholder image, font, icon, or other asset with a third-party resource, make sure you have the appropriate rights or license to use and redistribute that resource. Keep this list accurate when assets are added or replaced.

11. Frequently Asked Questions

Can I use only one of the three demos?

Yes. Each demo runs at its own route (/fashion, /beauty, /jewelry) — see Section 6. If you only need one, you can remove the other two demo folders; nothing else needs to change.

Do I need a database or backend to use this?

No — AyanTheme, including the customer account panel and Admin Dashboard, is a frontend template with no bundled database or backend service. The included demo login does not validate usernames or passwords; any username and password combination can be used to enter the respective panel. Storefront and dashboard content is served from the included placeholder JSON data. Connect the template to your own API, database, and production authentication system when you're ready.

Can I connect this to my own backend/API?

Yes. The API base URL is set once via the API_URL environment variable (see the table above) and read through Envs.API_URL in src/shared/utils/config.ts. Each domain's data-fetching files — e.g. domains/product/infrastructure/services/product-api.ts, domains/order/infrastructure/services/order.api.ts — build their requests from that base URL, so pointing API_URL at your own backend routes the storefront and Admin Dashboard through it; no per-file URL changes are needed unless your API's endpoint paths differ from the defaults. You should also connect the customer and admin login flows to your own authentication and credential-validation service for production use.

Are the customer and admin login flows separate?

Yes. Customers sign in through /account/sign-in and access the customer account area at /user. Administrators sign in separately through /account-admin/sign-in and access the management dashboard at /admin.

For demonstration purposes, the included login implementation does not validate the entered username and password against a real credential store or authentication service. Any username and password combination can be used to enter the respective panel. For production use, connect both login flows to your own secure authentication and credential-validation system.

Can I use this for multiple sites?

Usage rights depend on the license or purchase terms provided by the marketplace or distributor where you obtained the template. Please check the license terms associated with your purchase.

Which languages are supported?

English and Arabic (including full RTL) ship today — see Section 9. More locales can be added following the same pattern.

Is a WordPress or Shopify version available?

Not yet — WordPress and Shopify editions are planned as separate, independent items with their own codebases (design-matched, not code-shared). This documentation covers the Next.js edition only.

How do I turn off an animation that feels too intense?

See Section 8.5.

12. Support

Before contacting support, please check the sections above and the FAQ — most questions are already answered here.

• Support email: support@ayantheme.com (primary) or ayantheme@gmail.com
• Support hours / response time: Support requests are typically answered within 1–2 business days.
• Support covers bug fixes and usage questions related to AyanTheme according to the support terms provided with your purchase.

13. Changelog