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. 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 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

Requirement	Version / Notes
Node.js	18.18+ or 20+ (confirm against your exact Next.js version in package.json)
Package manager	npm, yarn, or pnpm (any one of these)
Next.js	App Router based project
Code editor	Any editor (VS Code recommended)

No local database or PHP/MySQL server is required to preview the front-end demos. If your backend/API is included, list its requirements separately in a [ADD BACKEND REQUIREMENTS IF APPLICABLE] note here.

4. Installation

Follow these steps exactly, in order:

1. Extract the ZIP file you downloaded from ThemeForest 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

Variable	Description
NEXTAUTH_URL / AUTH_URL	Full public URL of the deployed site, e.g. https://your-domain.com (used by NextAuth for callbacks)
NEXTAUTH_SECRET	Random secret string used to sign auth session tokens — generate a new one per deployment, e.g. openssl rand -base64 32
JWT_SECRET	Random secret string used to sign JWTs — generate a separate new one per deployment, never reuse the example value
GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET	Credentials for "Sign in with Google", from your own Google Cloud Console project
DATABASE_URL	Connection string for the auth/admin database (SQLite by default: file:./dev.db) — point this at your own database for production
BASE_URL / SITE_URL	Public site URL, same as NEXTAUTH_URL — must match your real domain in production, not localhost
DOMAIN / PROTOCOL	Domain name and protocol used for [ADD WHAT THIS DRIVES, e.g. cookie domain / absolute URL generation]
USER_ROOT_URL / ADMIN_ROOT_URL	Base path for the customer account area (/user) and admin dashboard (/admin)
CAPTCHA_TYPE	Captcha mode for auth forms (default: image)

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:

Demo	Base Route	Example (EN)
Fashion	/[locale]/fashion	next.ayantheme.com/en/fashion
Beauty	/[locale]/beauty	next.ayantheme.com/en/beauty
Jewelry	/[locale]/jewelry	next.ayantheme.com/en/jewelry

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 a free 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 mode is handled separately through Tailwind CSS dark-mode utility classes.

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: [ADD HOW TO SWITCH BETWEEN THE THREE PRODUCT-PAGE VARIANTS].
• Look-book gallery images/content: [ADD FILE/COMPONENT LOCATION].
• Category slider content: [ADD FILE/COMPONENT LOCATION].

8.3 Beauty Demo Customization

• Hero zoom section content/media: [ADD FILE/COMPONENT LOCATION].
• Brand story scroll-stack content: [ADD FILE/COMPONENT LOCATION].
• Style variant (Luxe Noir / Clean Glow / Bold Retro): [ADD HOW TO SWITCH].

8.4 Jewelry Demo Customization

• Color palette variant (Aurum / Lumière / Noir): [ADD HOW TO SWITCH].
• Pinned storytelling section content: [ADD FILE/COMPONENT LOCATION].

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, [ADD INSTRUCTIONS — e.g. remove/comment the relevant useEffect, or wrap the tween in a prop/flag check] in that component's file.

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 [ADD FILE LOCATION, e.g. the Lenis provider/hook].

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 [ADD PATH, e.g. /messages/en.json and /messages/ar.json].
2. To add a new language, duplicate the file, translate the values, and register the new locale in [ADD CONFIG FILE LOCATION].
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 placeholder image/font with a licensed one before selling, keep this list accurate — Envato requires every non-standard asset to be credited and linked.

Asset	Type	License / Source
GSAP + ScrollTrigger	Animation library	Free for commercial use under GSAP's standard license (all GSAP tools became free as of April 2025) — gsap.com/licensing
Lenis	Smooth scroll library	MIT — github.com/darkroomengineering/lenis
Swiper.js	Slider library	MIT — swiperjs.com
Framer Motion	Animation library	MIT — framer.com/motion
[ADD FONT NAME]	Font	[CONFIRM: use only fonts you have redistribution rights for — e.g. Google Fonts like Outfit/Poppins are safe; a paid font license (desktop/app-only) usually does NOT cover bundling the font files inside a resold template]
[ADD ICON SET NAME]	Icons	[ADD SOURCE LINK]
[ADD PRODUCT / STOCK PHOTOS SOURCE]	Images (preview only or included)	[ADD LICENSE — mark clearly if "for preview purposes only, not included in the download"]

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?

Authentication (sign in/up, Google login) and the admin dashboard are included and use a local SQLite database by default (DATABASE_URL) — swap that for your own database when you deploy. Storefront/product content [ADD CONFIRMATION — is this placeholder JSON only, or does it also read from the same database? Section 6 assumed placeholder data; please confirm before this goes out, since it affects what buyers expect].

Can I connect this to my own backend/API?

[ADD REAL ANSWER — e.g. where API endpoints/base URLs are configured, which files fetch data].

Can I use this for multiple sites?

A single regular license covers one end product. For multiple sites you'll need a license per site, per Envato's licensing terms.

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?

[ADD REAL ANSWER — e.g. "A WordPress edition is planned as a separate item; 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: [ADD SUPPORT EMAIL]
• Support hours / response time: [ADD EXPECTED RESPONSE TIME]
• Item support covers bug fixes and usage questions related to AyanTheme, per Envato's Item Support Policy.

13. Changelog

Version	Date	Notes
1.0.0	[ADD RELEASE DATE]	Initial release — Fashion, Beauty, and Jewelry demos.